.template-module { min-width: 0; }
.template-module .page-heading { align-items: flex-start; flex-wrap: wrap; }
.template-module .heading-actions, .template-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.template-catalog { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin: 18px 0 23px; }
.template-card { min-width: 0; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.template-card-icon { width: 39px; height: 43px; display: grid; place-items: center; border: 1px solid #d9c2a4; border-radius: 8px; background: #f5e8d5; color: #87603a; font-size: 21px; }
.template-card h2 { margin: 2px 0 0; font-size: 14px; }
.template-card p { margin: 0 0 5px; color: var(--muted); font-size: 10px; line-height: 1.8; min-height: 35px; }
.template-card .btn { margin-top: auto; }
.template-card small { color: var(--muted); font-size: 9px; }
.template-status { display: inline-block; border-radius: 7px; padding: 4px 8px; white-space: nowrap; font-size: 9px; color: #785d3e; background: #eee5d8; }
.template-status-issued { color: #236748; background: #e6f3e9; }
.template-status-submitted { color: #936018; background: #fff0d4; }
.template-status-cancelled { color: #97483f; background: #ffece7; }
.template-notice { margin: 12px 0; padding: 11px 13px; border: 1px solid #e2cdb0; border-radius: 8px; background: #faf1e4; color: #775a38; font-size: 10px; line-height: 1.85; }
.template-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 13px; }
.template-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.template-toolbar select, .template-toolbar input { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 7px 10px; color: var(--ink); max-width: 100%; }
.template-editor-section { padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 16px; }
.template-editor-section h3 { margin: 0 0 12px; color: #795937; font-size: 12px; }
.template-editor .field textarea { min-height: 90px; resize: vertical; line-height: 1.85; }
.template-editor .field small[lang="en"] { display: block; color: var(--muted); font-size: 9px; margin: 4px 0 0; }
.template-editor .field input[readonly], .template-editor .field textarea[readonly], .template-editor .field select:disabled { background: #f1ece5; color: #76624e; }
.template-person-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; border: 1px solid var(--line); background: #f7f0e6; padding: 12px; border-radius: 9px; font-size: 10px; line-height: 1.85; }
.template-person-summary strong { color: var(--ink); }
.template-editor .modal-actions { position: sticky; bottom: -19px; z-index: 2; background: var(--surface); padding: 13px 0 10px; flex-wrap: wrap; }
.template-preview-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.template-preview .template-actions { position: sticky; top: -17px; z-index: 1; padding: 10px 0; background: var(--surface); border-bottom: 1px solid var(--line); margin-bottom: 15px; }
.modal:has(.template-preview), .modal:has(.template-editor) { width: min(100%,920px); }
.template-document { padding: 10px; background: #e9e4de; border-radius: 8px; }
.template-page { display: flex; flex-direction: column; width: 100%; margin: 0 auto 12px; padding: 20px 24px 14px; color: #21182d; background: white; box-shadow: 0 2px 12px #00000012; font-family: Tahoma,Arial,sans-serif; }
.template-page:last-child { margin-bottom: 0; }
.template-letterhead { display: block; width: 100%; height: auto; margin: 0 0 7px; }
.template-title { text-align: center; border-top: 1px solid #c39b42; padding: 8px 0 6px; }
.template-title h2 { margin: 0 0 3px; color: #352540; font-size: 17px; font-weight: 700; }
.template-title p { margin: 0; color: #715e35; font-size: 11px; letter-spacing: .3px; }
.template-title .template-private { color: #6f6251; font-size: 8px; margin-top: 4px; }
.template-document-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: 6px 0 10px; color: #504357; font-size: 9px; line-height: 1.6; }
.template-document-status { border: 1px solid #bdb4a7; padding: 1px 6px; color: #574630; }
.template-document-status.template-unissued { color: #855315; border-color: #b99050; background: #fff6e7; }
.template-page-content { min-width: 0; }
.template-block { margin: 0; overflow-wrap: anywhere; word-break: normal; }
.template-section-title { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid #b9a176; padding: 7px 9px; margin-top: 12px; background: #f6eddb; color: #34243f; font-size: 11px; font-weight: 700; break-after: avoid; }
.template-section-title span[lang="en"] { font-size: 9px; font-weight: 500; direction: ltr; text-align: left; }
.template-data-row { margin: 0; width: 100%; border: 1px solid #c9bdad; border-top: 0; table-layout: fixed; border-collapse: collapse; }
.template-data-row td { padding: 6px 8px; border-left: 1px solid #ddd2c3; font-size: 10px; line-height: 1.7; vertical-align: top; overflow-wrap: anywhere; white-space: pre-wrap; }
.template-data-row .template-label-ar { width: 30%; background: #fbf8f2; font-weight: 500; }
.template-data-row .template-value { width: 43%; min-height: 22px; text-align: center; }
.template-data-row .template-label-en { width: 27%; background: #fbf8f2; direction: ltr; text-align: left; font-size: 8px; }
.template-data-row .template-money { direction: ltr; }
.template-long-label { padding: 7px 8px 2px; color: #4a3b51; border-right: 2px solid #c0a56e; font-size: 10px; font-weight: 600; margin-top: 5px; }
.template-paragraph { margin: 0; padding: 6px 8px; color: #251d2d; font-size: 10px; line-height: 1.95; white-space: pre-wrap; text-align: justify; overflow-wrap: anywhere; }
.template-paragraph[lang="en"] { direction: ltr; text-align: left; font-size: 8px; line-height: 1.75; color: #4b4154; }
.template-paragraph.template-continuation { border-top: 1px dashed #d4c7b3; }
.template-signatures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-top: 8px; border: 1px solid #c9bdad; break-inside: avoid; }
.template-signatures.template-signatures-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.template-signatures.template-signatures-one { grid-template-columns: 1fr; }
.template-signature { padding: 9px; border-left: 1px solid #d3c8b7; min-width: 0; font-size: 9px; line-height: 1.8; }
.template-signature:last-child { border-left: 0; }
.template-signature strong { display: block; color: #36253f; font-size: 10px; }
.template-signature small { display: block; direction: ltr; text-align: right; font-size: 7px; color: #60536a; margin: 0 0 4px; }
.template-signature p { margin: 3px 0; overflow-wrap: anywhere; }
.template-signature .template-sign-line { margin-top: 9px; padding: 5px 0 3px; border-bottom: 1px dotted #9b8b72; color: #544965; }
.template-signatures-one .template-signature { padding:7px 9px; }
.template-signatures-one .template-signature p:not(.template-sign-line) { display:inline-block; margin-inline-end:24px; }
.template-clearance-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.template-clearance-panel { border: 1px solid #bdac90; min-width: 0; break-inside: avoid; }
.template-clearance-panel h4 { margin: 0; background: #f4ecd9; padding: 7px 9px; font-size: 11px; }
.template-clearance-panel h4 small { display: block; font-size: 8px; direction: ltr; text-align: right; font-weight: 400; color: #71634b; margin-top: 2px; }
.template-clearance-panel .template-signature { border: 0; }
.template-clearance-decision { padding: 7px 9px; border-top: 1px solid #d6cbb8; font-size: 9px; line-height: 1.8; }
.template-clearance-decision p { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.template-letterfooter { width: 100%; height: auto; display: block; margin-top: 14px; }
.template-page-number { direction: ltr; text-align: center; margin: 5px 0 0; font-size: 7px; color: #786953; }
.template-hidden-financial { color: #8d7c67; font-size: 8px; }
.template-print-area { display: none; }
.template-print-area.template-measuring { display: block; position: fixed; left: -15000px; top: 0; width: 190mm; background: white; z-index: -100; }
.template-print-area.template-measuring .template-page { width: 190mm; padding: 0; margin: 0; box-shadow: none; }
.template-print-area.template-measuring .template-signatures { grid-template-columns: repeat(3,minmax(0,1fr)); }
.template-print-area.template-measuring .template-signatures-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.template-print-area.template-measuring .template-signatures-one { grid-template-columns: 1fr; }
.template-print-area.template-measuring .template-clearance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.template-print-area.template-measuring .template-signature { border-bottom: 0; border-left: 1px solid #d3c8b7; }
@media (max-width:1050px) { .template-catalog { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) {
  .template-catalog { grid-template-columns: 1fr; }
  .template-card p { min-height: 0; }
  .template-toolbar label, .template-toolbar select, .template-toolbar input { width: 100%; }
  .template-page { padding: 10px 8px; }
  .template-document { padding: 4px; }
  .template-data-row td { padding: 5px 3px; font-size: 9px; }
  .template-data-row .template-label-en { font-size: 7px; }
  .template-title h2 { font-size: 14px; }
  .template-signatures, .template-signatures.template-signatures-two { grid-template-columns: 1fr; }
  .template-signature { border-left: 0; border-bottom: 1px solid #d3c8b7; }
  .template-clearance-grid { grid-template-columns: 1fr; }
}
@media print {
  @page benyah-forms { size: A4 portrait; margin: 10mm; }
  html { background:white !important; }
  body.forms-printing { background: white !important; min-width: 0; }
  body.forms-printing > :not(.template-print-area) { display: none !important; }
  body.forms-printing > .template-print-area { display: block !important; position: static !important; width: auto !important; }
  body.forms-printing .template-page { page: benyah-forms; width: 100%; min-height:273mm; padding: 0; margin: 0; box-shadow: none; break-after: page; page-break-after: always; }
  body.forms-printing .template-letterfooter { margin-top:auto; padding-top:14px; }
  body.forms-printing .template-page-content, body.forms-printing .template-letterhead, body.forms-printing .template-letterfooter, body.forms-printing .template-title, body.forms-printing .template-document-meta, body.forms-printing .template-page-number { flex-shrink:0; }
  body.forms-printing .template-page:last-child { break-after: auto; page-break-after: auto; }
  body.forms-printing .template-letterhead { margin-bottom: 5px; }
  body.forms-printing .template-title h2 { font-size:17px; }
  body.forms-printing .template-block { break-inside: avoid; page-break-inside: avoid; }
  body.forms-printing .template-paragraph { orphans: 3; widows: 3; }
  body.forms-printing .template-section-title { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.forms-printing .template-signatures { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.forms-printing .template-signatures-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.forms-printing .template-signatures-one { grid-template-columns: 1fr; }
  body.forms-printing .template-signature { border-bottom: 0; border-left: 1px solid #d3c8b7; }
  body.forms-printing .template-clearance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.forms-printing .template-page table { min-width: 0 !important; white-space: normal !important; }
  body.forms-printing .template-page td { font-size: 10px !important; padding:6px 8px; }
  body.forms-printing .template-page td.template-label-en { font-size: 8px !important; }
}
/* Pagination on phones must measure the same type size used on the printed page. */
.template-print-area.template-measuring .template-title h2 { font-size:17px; }
.template-print-area.template-measuring .template-data-row td { padding:6px 8px; font-size:10px; }
.template-print-area.template-measuring .template-data-row td.template-label-en { font-size:8px; }
