/* ==========================================================================
   Qiwa documents — the letterhead design shared by the live preview, the
   printed PDF and the Word export. Copied unchanged from the v2 portal so an
   issued document looks exactly as before.
   ========================================================================== */
:root{
  --brand:#183334; --brand-deep:#0D1F20; --brand-soft:#22484A;
  --accent:#F3C19E; --accent-deep:#C98F63;
  --cream:#FAF3EB; --cream-2:#F2E7DB; --paper:#FFFBF7;
  --ink:#16292A; --muted:#5C7071;
  --line:rgba(24,51,52,.14); --line-soft:rgba(24,51,52,.08);
  --amber:#B57A24; --amber-bg:#FBF0DC;
  --green:#2F6A4F; --green-bg:#E4F0E9;
  --red:#9B3B3B; --red-bg:#F7E5E5;
  --radius:12px; --shadow:0 18px 44px -26px rgba(13,31,32,.42);
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:'DIN Next Arabic','Segoe UI',system-ui,-apple-system,sans-serif;
  --ar:'DIN Next Arabic','Tahoma','Segoe UI',system-ui,sans-serif;
}
.sh-logo-svg{height:44px;width:auto;color:var(--brand);fill:currentColor;flex:none;display:block}
.sheet{
  background:#fff;width:100%;max-width:794px;margin:0 auto 18px;
  padding:0 0 26px;box-shadow:0 4px 18px -6px rgba(0,0,0,.18);
  color:#1b1b1b;font-size:12.4px;line-height:1.72;position:relative;
}
.sheet:last-child{margin-bottom:0}
/* In the on-screen preview the page keeps its true A4 layout and is scaled to
   fit the panel (see fitSheets in doc-engine.js), so it matches the PDF. */
.docscroll.fit .sheet{width:794px;max-width:none}
.sh-contact{white-space:nowrap}
.sheet.rtl{direction:rtl;text-align:right;font-family:var(--ar);line-height:1.85}
.sheet.ltr{direction:ltr;text-align:left}
.sh-band{height:5px;background:linear-gradient(90deg,var(--brand) 0%,var(--brand) 62%,var(--accent) 62%,var(--accent) 100%)}
.sh-head{display:flex;align-items:center;gap:22px;padding:18px 40px 13px;min-height:74px}
.sh-logo{max-height:44px;max-width:170px;object-fit:contain;flex:none;display:block}
.sh-id .n1{font-size:15px;font-weight:700;color:var(--brand);line-height:1.25;font-family:var(--sans)}
.sh-id .n2{font-size:11.5px;color:#5c6a6b;font-family:var(--ar)}
.sh-meta{flex:1;min-width:0;text-align:end;font-family:var(--sans);direction:ltr}

.sh-contact{font-size:9.8px;color:#3f4c4d;font-weight:500;letter-spacing:.01em;margin-bottom:3px}
.sh-office{font-size:8.9px;color:#8a9293;line-height:1.62;white-space:nowrap}
.sheet.rtl .sh-meta{text-align:start}
.sh-rule{height:1px;background:var(--line);margin:0 40px}
.sh-body{padding:16px 40px 0}
.sheet.rtl .sh-body{font-family:var(--ar)}

.d-basmala{text-align:center;font-size:13px;font-weight:700;color:var(--brand);margin-bottom:14px;font-family:var(--ar)}
.d-datebox{display:flex;justify-content:flex-end;gap:22px;font-size:11.5px;margin-bottom:14px}
.sheet.rtl .d-datebox{justify-content:flex-start}
.d-datebox b{color:var(--brand)}
.d-title{text-align:center;font-size:15px;font-weight:700;color:var(--brand);line-height:1.5;margin:6px 0 4px}
.d-title-u{width:64px;height:2px;background:var(--accent);margin:9px auto 18px}
.d-ref{text-align:center;font-size:10.5px;color:#7a8586;letter-spacing:.05em;margin-bottom:14px;font-family:var(--sans)}
h3.d-h{font-size:12.8px;font-weight:700;color:var(--brand);margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line-soft)}
h4.d-sh{font-size:12.2px;font-weight:700;color:var(--brand);margin:13px 0 6px}
.d-p{margin-bottom:9px;text-align:justify}
.d-lead{margin-bottom:9px;font-weight:600;color:#2a3a3b}
.d-ol{margin:0 0 10px;padding-inline-start:20px}
.d-ol li{margin-bottom:6px;text-align:justify}
.d-ul{margin:0 0 10px;padding-inline-start:18px;list-style:none}
.d-ul li{margin-bottom:6px;text-align:justify;position:relative}
.d-ul li::before{content:'—';position:absolute;inset-inline-start:-18px;color:var(--accent-deep)}
.d-num{display:flex;gap:9px;margin-bottom:7px}
.d-num .k{flex:none;font-weight:700;color:var(--brand);min-width:30px;font-family:var(--sans)}
.d-num .v{flex:1;text-align:justify}
.d-party{background:#F8F5F1;border-inline-start:3px solid var(--accent);border-radius:0 6px 6px 0;padding:11px 14px;margin-bottom:11px}
.sheet.rtl .d-party{border-radius:6px 0 0 6px}
.d-party .pl{font-weight:700;color:var(--brand);text-decoration:underline;margin-inline-end:5px}
.d-partyref{font-size:11.5px;font-weight:700;color:#4a5859;margin-bottom:13px;text-align:center}
.d-fees{width:100%;border-collapse:collapse;margin:11px 0 13px;font-size:11.8px}
.d-fees th{background:var(--brand);color:#fff;padding:9px 13px;font-size:10.2px;letter-spacing:.05em;text-transform:uppercase;font-family:var(--sans);text-align:start}
.d-fees td{padding:9px 13px;border-bottom:1px solid #E8E2DA}
.d-fees3 td.sv{font-weight:700;color:var(--brand);width:24%;vertical-align:top}
.d-fees3 td.ds{color:#3a4647;font-size:11.2px;vertical-align:top}
.d-fees3 td.amt{width:20%;vertical-align:top}
.d-fees .amt{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--sans)}
.d-fees tr:last-child td{border-bottom:none}
.d-fees .tot td{background:#F5F1EC;font-weight:700;color:var(--brand);font-size:12.6px}
.d-note{background:#F8F5F1;border-radius:6px;padding:10px 13px;font-size:11.5px;margin-bottom:11px}
.d-sigrow{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.d-sigrow-mid{display:flex;gap:26px;margin-top:10px;flex-wrap:wrap}
.d-sigfull{border-top:1px dotted #55605f;margin-top:10px}
.d-sigbox{flex:1;min-width:210px;max-width:320px}
.d-sigbox .lb{font-size:10.5px;color:#6a7576;margin-bottom:4px;font-family:var(--sans)}
.d-sigimg{height:76px;margin:2px 0 3px;display:flex;align-items:flex-end}
.d-sigimg img{height:100%;max-width:100%;object-fit:contain}
.d-sigline{border-top:1px solid #55605f;padding-top:6px;font-size:11.8px}
.d-sigline .nm{font-weight:700;display:block;margin-bottom:2px}
.d-sigline .ti{display:block;font-size:10.6px;color:#5c6a6b;line-height:1.85}
.d-sigline .dt{display:block;font-size:10.4px;color:#7b8586;margin-top:2px}
.d-sigline .dots{display:inline-block;min-width:105px;border-bottom:1px dotted #9aa3a3;height:.85em}
.d-sigfield{font-size:11.8px;margin-bottom:7px;color:#3a4647}
.d-sigfield span{display:inline-block;min-width:150px;border-bottom:1px dotted #9aa3a3;margin-inline-start:5px}
.d-stamp{margin-top:10px}
.d-signoff{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.d-signoff .d-firm{margin-top:0}
.d-signoff .d-stamp{margin-top:0}
.d-stamp img{max-height:92px;max-width:140px;opacity:.92}
.d-stamp-ph{font-size:10.5px;color:#a8b0b0;border:1px dashed #cfd5d5;border-radius:6px;padding:7px 12px;display:inline-block}
.d-firm{font-weight:700;color:var(--brand);font-size:12.6px;margin-top:14px}
.d-foot{margin:22px 40px 0;padding-top:9px;border-top:1px solid var(--line-soft);font-size:9.2px;color:#8a9293;text-align:center;line-height:1.65;font-family:var(--sans);direction:ltr}
.d-wm{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:70px;font-weight:800;color:rgba(181,122,36,.075);transform:rotate(-24deg);letter-spacing:.12em;font-family:var(--sans);z-index:2}
.d-appx{background:var(--cream-2);color:var(--brand);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:20px;display:inline-block;margin-bottom:12px;font-family:var(--sans)}

@media (max-width:640px){
  .sh-head,.sh-body{padding-inline:20px}
  .sh-rule,.d-foot{margin-inline:20px}
  .sh-head{flex-wrap:wrap;gap:10px}
  .sh-office{white-space:normal}
}

/* ===== PRINT ===== */
#print-area{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff}
  #app,#toasts,#modal-root{display:none!important}
  #print-area{display:block!important}
  .sheet{
    max-width:none;width:210mm;min-height:297mm;margin:0;box-shadow:none;
    padding:0 0 18mm;page-break-after:always;position:relative;
    font-size:10.2pt;line-height:1.52;
  }
  .sheet.rtl{line-height:1.75}
  .sheet:last-child{page-break-after:auto}
  .sh-head{padding:11mm 16mm 5mm;min-height:0}
  .sh-rule{margin:0 16mm}
  .sh-body{padding:6mm 16mm 0}
  .d-foot{position:absolute;bottom:8mm;inset-inline:16mm;margin:0}
  .d-sigrow,.d-sigrow-mid,.d-party,.d-note{page-break-inside:avoid}
  .d-fees tr{page-break-inside:avoid}
  /* the appendix carries a 7-row table — tighten it so the sheet holds one page */
  .sheet.appendix .d-fees td{padding:6px 11px}
  .sheet.appendix .d-fees th{padding:7px 11px}
  .sheet.appendix .d-fees3 td.ds{font-size:10.4px;line-height:1.45}
  .sheet.appendix .d-note{padding:8px 12px}
  .sheet.appendix .d-p{margin-bottom:6px}
  .sheet.appendix .d-stamp img{max-height:66px}
  .sheet.appendix .d-signoff{margin-top:8px;page-break-inside:avoid}
  .sheet.appendix .d-stamp img{max-height:60px}
  h3.d-h{margin:12px 0 6px}
  .d-p{margin-bottom:7px}
  h3.d-h,h4.d-sh{page-break-after:avoid}
  .d-wm{position:fixed}
}
.d-closing{break-inside:avoid;page-break-inside:avoid}