/* Arabian Eye Business Platform — approved reusable visual design system */
:root{
  --ink:#16202e; --ink2:#4a5568; --line:#e4e0d8; --bg:#f5f2ec; --card:#ffffff;
  --teal:#0e4f5f; --teal2:#0b3c49; --gold:#c9a227; --gold2:#a8871c;
  --ok:#178a5b; --warn:#b7791f; --bad:#c0392b; --info:#2b6cb0;
  --r:14px; --sh:0 1px 3px rgba(22,32,46,.08),0 4px 14px rgba(22,32,46,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}
body{font-family:'IBM Plex Sans Arabic',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh}
h1,h2,h3{font-family:'Tajawal',sans-serif}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:.95rem;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
label{font-size:.8rem;font-weight:600;color:var(--ink2);display:block;margin-bottom:4px}
.field{margin-bottom:12px}
.hidden{display:none!important}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g2{grid-template-columns:1fr}}
@media(max-width:480px){.g3,.g4{grid-template-columns:1fr}}

/* ---- login ---- */
#loginView{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
  radial-gradient(1200px 600px at 80% -10%,rgba(201,162,39,.18),transparent 60%),
  linear-gradient(160deg,#0b3c49,#0e4f5f 55%,#123)}
.loginCard{background:var(--card);border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.35);padding:34px 30px;width:min(430px,92vw)}
.loginBrand{text-align:center;margin-bottom:20px}
.loginBrand .mark{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.9rem;box-shadow:inset 0 0 0 2px rgba(201,162,39,.6)}
.loginBrand h1{font-size:1.3rem;margin-top:12px;font-weight:900;color:var(--teal2)}
.loginBrand p{color:var(--ink2);font-size:.85rem}
.langBtn{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:99px;padding:5px 14px;font-size:.8rem;font-weight:800;letter-spacing:.5px}
.langBtn.dark{background:#eef4f5;border-color:var(--line);color:var(--teal2)}
.loginErr{background:#fdecea;color:var(--bad);border-radius:10px;padding:9px 13px;font-size:.82rem;font-weight:700;margin-top:10px}

/* ---- header & nav ---- */
header{background:linear-gradient(135deg,var(--teal2),var(--teal));color:#fff;padding:14px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
header .mark{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:inset 0 0 0 1.5px rgba(201,162,39,.55)}
header .tt h1{font-size:1.02rem;font-weight:900}
header .tt p{font-size:.72rem;opacity:.75}
header .sp{flex:1}
.userChip{background:rgba(255,255,255,.12);padding:6px 13px;border-radius:99px;font-size:.8rem;display:flex;gap:8px;align-items:center}
.userChip b{color:#f3d989}
.btnGhostW{background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;border-radius:10px;padding:6px 13px;font-size:.8rem}
.btnGhostW:hover{background:rgba(255,255,255,.12)}
.syncDot{width:9px;height:9px;border-radius:50%;background:#5ee6a0;box-shadow:0 0 8px #5ee6a0}
.syncDot.err{background:#ff7b6b;box-shadow:0 0 8px #ff7b6b}
nav#mainNav{background:#fff;border-bottom:1.5px solid var(--line);display:flex;overflow-x:auto;padding:0 10px;position:sticky;top:0;z-index:40}
nav#mainNav button{background:none;border:none;padding:13px 16px;font-size:.9rem;font-weight:700;color:var(--ink2);border-bottom:3px solid transparent;white-space:nowrap}
nav#mainNav button.on{color:var(--teal);border-bottom-color:var(--gold)}
main{max-width:1280px;margin:0 auto;padding:18px 14px 90px}

/* ---- notifications bell ---- */
.bellWrap{position:relative}
.bellBtn{background:rgba(255,255,255,.12);border:none;color:#fff;width:38px;height:38px;border-radius:12px;font-size:1.1rem;position:relative}
.bellBtn .cnt{position:absolute;top:-5px;inset-inline-end:-5px;background:var(--bad);color:#fff;font-size:.62rem;font-weight:800;border-radius:99px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notifPanel{position:absolute;top:46px;inset-inline-end:0;width:min(360px,88vw);background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.25);z-index:60;max-height:65vh;overflow-y:auto;color:var(--ink)}
.notifPanel .nh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1.5px solid var(--line);font-weight:800;color:var(--teal2);font-size:.85rem}
.notifItem{padding:11px 14px;border-bottom:1px solid var(--line);font-size:.82rem;cursor:pointer;display:flex;gap:9px;align-items:flex-start}
.notifItem:hover{background:#faf8f3}
.notifItem.unread{background:#f0f7f8}
.notifItem .nd{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:6px}
.notifItem small{color:var(--ink2);display:block;margin-top:3px;font-size:.7rem}

/* ---- cards, stats, buttons, badges, tables (prototype) ---- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:16px}
.card h2{font-size:1.02rem;font-weight:800;color:var(--teal2);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card h2 .ic{width:30px;height:30px;border-radius:9px;background:#eef4f5;display:inline-flex;align-items:center;justify-content:center;font-size:.95rem}
.statGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:15px;border-inline-start:4px solid var(--teal)}
.stat .lbl{font-size:.74rem;color:var(--ink2);font-weight:600}
.stat .val{font-family:'Tajawal';font-size:1.45rem;font-weight:900;margin-top:3px}
.stat .sub{font-size:.7rem;color:var(--ink2)}
.stat.gold{border-color:var(--gold)}.stat.ok{border-color:var(--ok)}.stat.bad{border-color:var(--bad)}.stat.warn{border-color:var(--warn)}.stat.info{border-color:var(--info)}
.btn{border:none;border-radius:11px;padding:10px 18px;font-size:.9rem;font-weight:700;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.btnP{background:var(--teal);color:#fff}.btnP:hover{background:var(--teal2)}
.btnG{background:var(--gold);color:#fff}.btnG:hover{background:var(--gold2)}
.btnO{background:#fff;border:1.5px solid var(--line);color:var(--ink)}.btnO:hover{border-color:var(--teal);color:var(--teal)}
.btnD{background:#fdecea;color:var(--bad)}.btnD:hover{background:#f9d2cd}
.btnS{padding:6px 12px;font-size:.78rem;border-radius:9px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;font-size:.72rem;font-weight:700;white-space:nowrap}
.code{font-family:'Tajawal';font-weight:900;letter-spacing:.4px;color:var(--teal2);background:#eef4f5;padding:2px 10px;border-radius:8px;display:inline-block;direction:ltr}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{background:#f0ede6;padding:10px;text-align:start;font-size:.75rem;color:var(--ink2);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
tr:hover td{background:#faf8f3}
tfoot td{font-weight:800;background:#f0ede6}
.num{direction:ltr;text-align:left;font-weight:700}
.pos{color:var(--ok)}.neg{color:var(--bad)}.wrn{color:var(--warn)}
.empty{text-align:center;padding:44px 10px;color:var(--ink2)}
.empty .big{font-size:2.4rem;margin-bottom:8px}
.secTitle{font-family:'Tajawal';font-size:1.2rem;font-weight:900;color:var(--teal2);margin:4px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters input,.filters select{width:auto;min-width:130px}
.searchBox{flex:1;min-width:200px}

/* ---- booking cards & services (prototype) ---- */
.bkCard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:15px;margin-bottom:11px;display:grid;grid-template-columns:1fr auto;gap:8px;cursor:pointer;transition:.15s;border:1.5px solid transparent}
.bkCard:hover{border-color:var(--teal)}
.bkTop{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.bkName{font-weight:800;font-size:1rem}
.bkMeta{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--ink2);margin-top:7px}
.bkMoney{text-align:end;font-size:.8rem}
.bkMoney .big{font-family:'Tajawal';font-weight:900;font-size:1.1rem;direction:ltr}
.svcCard{border:1.5px solid var(--line);border-radius:12px;padding:13px;margin-bottom:10px;background:#fdfcf9}
.svcHead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.svcHead .t{font-weight:800}
.svcGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 16px;margin-top:9px;font-size:.8rem;color:var(--ink2)}
.svcGrid b{color:var(--ink)}
.proofRow{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.proofBtn{display:inline-flex;align-items:center;gap:6px;background:#eef4f5;border:1.5px solid #cfe0e3;color:var(--teal2);border-radius:9px;padding:5px 11px;font-size:.75rem;font-weight:700}
.proofBtn:hover{background:#dcebee}
.upBtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px dashed var(--gold);color:var(--gold2);border-radius:9px;padding:5px 11px;font-size:.75rem;font-weight:700;cursor:pointer}
.attachmentList{display:flex;flex-direction:column;gap:7px;width:100%}
.attachmentItem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fbfcfc}
.attachmentItem .proofBtn{min-width:0;justify-self:start;max-width:100%}
.attachmentItem .proofBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachmentFileActions{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.attachmentFileName{font-size:.75rem;font-weight:750;color:var(--teal2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(360px,55vw)}
.attachmentItem .attachmentMeta{grid-column:1/-1;font-size:.67rem;color:var(--ink2);overflow-wrap:anywhere}
.attachmentItem.archived{opacity:.7;background:#f2f1ed}
.attachmentArchive{grid-column:2;grid-row:1;border:0;background:transparent;cursor:pointer;padding:5px;border-radius:7px}
.attachmentArchive:hover{background:#f4e5df}
.attachmentSummary{display:flex;flex-direction:column;gap:4px;padding:12px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:#f7faf9;overflow-wrap:anywhere}
.attachmentSummary span,.attachmentMeta,.attachmentDescription{font-size:.75rem;color:var(--ink2)}
.attachmentProgress{height:28px;border-radius:9px;background:#e7eceb;overflow:hidden;position:relative;margin:12px 0}
.attachmentProgress>div{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .15s}
.attachmentProgress span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--ink)}
.attachmentPreviewPdf{width:100%;height:65vh;border:1px solid var(--line);border-radius:10px;margin-top:10px}
.attachmentPreviewImage{display:block;max-width:100%;max-height:68vh;margin:10px auto 0;border-radius:10px;object-fit:contain}
.attachmentPreviewState{min-height:220px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:10px;border:1px solid var(--line);border-radius:10px;background:#f8faf9;color:var(--ink2)}
.attachmentPreviewState.ready{display:block;min-height:0;border:0;background:transparent}
.attachmentSpinner{width:20px;height:20px;border:3px solid #cbd7d8;border-top-color:var(--teal);border-radius:50%;animation:attSpin .8s linear infinite}
@keyframes attSpin{to{transform:rotate(360deg)}}
.attachmentActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.attachmentDescription{padding:8px 10px;border-inline-start:3px solid var(--gold);background:#faf7ed;margin-top:8px}
.attachmentError{width:100%;font-size:.75rem;color:var(--bad);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.attachmentHub{display:grid;gap:12px}
.attachmentGroup{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fcfdfc}
.attachmentGroup h3{font-size:.82rem;color:var(--teal2);margin:0 0 8px}
.attachmentContext{font-size:.68rem;font-weight:800;color:var(--gold2);margin:7px 2px 3px}

/* ---- status flow, fin rows ---- */
.flow{display:flex;gap:4px;overflow-x:auto;padding:4px 0 8px}
.flowStep{flex:1;min-width:74px;text-align:center;font-size:.62rem;font-weight:700;color:var(--ink2);cursor:pointer}
.flowStep .dot{width:22px;height:22px;border-radius:50%;background:#e6e2d8;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#fff}
.flowStep.done .dot{background:var(--ok)}
.flowStep.cur .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(201,162,39,.25)}
.flowStep.cur{color:var(--gold2)}
.finRow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.finRow b{direction:ltr}
.finRow.total{font-size:1.05rem;font-weight:900;border-bottom:none;padding-top:12px}

/* ---- timeline ---- */
.timeline{position:relative;padding-inline-start:22px}
.timeline:before{content:'';position:absolute;inset-inline-start:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tlItem{position:relative;padding:7px 0 7px;font-size:.82rem}
.tlItem .td{position:absolute;inset-inline-start:-21px;top:12px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--teal)}
.tlItem small{color:var(--ink2);display:block;font-size:.7rem;margin-top:2px}

/* ---- mini bar chart ---- */
.barRow{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.8rem}
.barRow .bl{width:130px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barRow .bt{flex:1;background:#f0ede6;border-radius:99px;height:18px;overflow:hidden}
.barRow .bf{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--gold));min-width:2px}
.barRow .bv{width:110px;text-align:end;font-weight:700;direction:ltr}

/* ---- package wizard (prototype) ---- */
.pkgSec{border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:#fdfcf9}
.pkgSec>.pkgHead{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--teal2)}
.pkgHead .sw{margin-inline-start:auto}
.switch{position:relative;width:46px;height:26px;display:inline-block;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:#d8d3c8;border-radius:99px;transition:.2s;cursor:pointer}
.switch .sl:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;inset-inline-start:3px;transition:.2s}
.switch input:checked + .sl{background:var(--ok)}
.switch input:checked + .sl:before{transform:translateX(20px)}
[dir=rtl] .switch input:checked + .sl:before{transform:translateX(-20px)}
.hotelRow{border:1.5px dashed var(--line);border-radius:12px;padding:12px;margin-top:10px;background:#fff;position:relative}
.hotelRow .rm{position:absolute;top:8px;inset-inline-end:8px}

/* ---- special request chips ---- */
.reqChip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:.8rem;font-weight:700;cursor:pointer;transition:.13s}
.reqChip.on{border-color:var(--gold);background:#fdf6e3;color:var(--gold2)}

/* ---- inner tabs (accounting / cs) ---- */
.subTabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.subTabs button{border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:7px 16px;font-size:.82rem;font-weight:700;color:var(--ink2)}
.subTabs button.on{background:var(--teal);border-color:var(--teal);color:#fff}

/* ---- report buttons, modal, toast, print (prototype) ---- */
.repBtn{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px;font-size:.85rem;font-weight:700;text-align:start;transition:.13s;width:100%}
.repBtn:hover{border-color:var(--teal);background:#f0f7f8}
.repBtn .ri{width:34px;height:34px;border-radius:10px;background:#eef4f5;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#modalWrap{position:fixed;inset:0;background:rgba(12,25,32,.55);z-index:100;display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(3px)}
#modalBox{background:#fff;border-radius:18px;width:min(760px,96vw);max-height:92vh;overflow-y:auto;padding:22px;position:relative}
#modalBox.wide{width:min(1000px,96vw)}
.modalX{position:absolute;top:14px;inset-inline-start:14px;background:var(--bg);border:none;width:32px;height:32px;border-radius:50%;font-size:1rem;z-index:5}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 22px;border-radius:99px;font-size:.85rem;font-weight:600;z-index:300;box-shadow:0 8px 30px rgba(0,0,0,.3);opacity:0;transition:.25s;pointer-events:none}
#toast.show{opacity:1}
#printArea{display:none}
@media print{ body>*{display:none!important} #printArea{display:block!important} body{background:#fff} }
.inv{font-family:'IBM Plex Sans Arabic';color:#16202e;max-width:800px;margin:0 auto;padding:30px}
.invHead{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #0e4f5f;padding-bottom:16px;margin-bottom:20px}
.invHead .co h1{font-family:'Tajawal';font-size:1.4rem;color:#0b3c49}
.invHead .co p{font-size:.78rem;color:#4a5568}
.invHead img{max-height:64px}
.invTitle{background:#0e4f5f;color:#fff;display:inline-block;padding:6px 22px;border-radius:99px;font-weight:800;font-size:.95rem;margin-bottom:16px}
.invMeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 20px;font-size:.85rem;margin-bottom:18px}
.invMeta b{color:#0b3c49}
.inv table{width:100%;border-collapse:collapse;font-size:.85rem;margin:14px 0}
.inv th{background:#0e4f5f;color:#fff;padding:9px;text-align:start}
.inv td{padding:9px;border-bottom:1px solid #ddd}
.invTotals{margin-inline-start:auto;width:min(320px,100%);font-size:.9rem}
.invTotals .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #ccc}
.invTotals .row.tt{font-weight:900;font-size:1.05rem;border-bottom:2px solid #0e4f5f;color:#0b3c49}
.invFoot{margin-top:34px;display:flex;justify-content:space-between;font-size:.8rem;color:#4a5568}
.invSign{text-align:center}
.invSign .line{width:170px;border-top:1.5px solid #999;margin-top:44px;padding-top:5px}
@media(max-width:640px){
  header .tt p{display:none}
  main{padding:12px 9px 80px}
  .card{padding:14px}
  .bkCard{grid-template-columns:1fr}
  .bkMoney{text-align:start;display:flex;gap:14px}
  .barRow .bl{width:90px}
  .attachmentPreviewPdf{height:58vh}
  .attachmentPreviewState{min-height:180px}
  .attachmentActions .btn{flex:1 1 auto}
}

/* Phase 5A — customer business code */
.customerCode{display:inline-flex;align-items:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:850;letter-spacing:.04em;color:var(--teal2);direction:ltr}
.customerCodeMissing,.customerCodeMissingBanner{color:var(--bad);font-weight:750;font-size:.75rem}
.customerCodeMissingBanner{padding:9px 12px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);border-radius:9px;background:color-mix(in srgb,var(--bad) 7%,transparent)}
.customerCodeField input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:800;letter-spacing:.05em;text-transform:uppercase;direction:ltr}
.customerCodeStatus{display:block;min-height:1.1em;margin-top:4px;font-size:.7rem;color:var(--ink2)}
.customerCodeStatus.ok{color:var(--ok);font-weight:700}.customerCodeStatus.bad{color:var(--bad);font-weight:700}
.customerCodeDuplicate{display:flex;gap:10px;align-items:center;margin:12px 0;padding:10px;border:1px solid var(--line);border-radius:9px}
.customerCodeMigrationNotice{display:flex;align-items:center;gap:12px;justify-content:space-between;border-color:var(--gold)}
.customerCodeMigrationList{display:grid;gap:10px;max-height:65vh;overflow:auto}
.customerCodeMigrationItem{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,.7fr) minmax(120px,.7fr) auto auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px}
.customerCodeMigrationItem small{display:block;color:var(--ink2);margin-top:3px}
@media(max-width:640px){.customerCodeMigrationItem{grid-template-columns:1fr}.customerCodeMigrationNotice{align-items:flex-start;flex-direction:column}.customerCodeMigrationItem .btn{width:100%}}

/* ============================================================
   Phase 9 — Arabian Eye premium interface
   Palette sampled from the official company logo:
   blue #0a79bc, orange #e78724, coral accent #ef5c50.
   ============================================================ */
:root{
  --brand-primary:#0a79bc;
  --brand-primary-700:#075f98;
  --brand-primary-900:#073b61;
  --brand-secondary:#e78724;
  --brand-secondary-700:#d87815;
  --brand-secondary-800:#9a4d05;
  --brand-accent:#ef5c50;
  --bg:#f3f7fa;
  --bg-soft:#eaf3f8;
  --card:#ffffff;
  --surface:#ffffff;
  --surface-muted:#f7fafc;
  --ink:#102235;
  --ink2:#607286;
  --line:#dfe8ef;
  --line-strong:#cad8e2;
  --ok:#17845f;
  --warn:#b66b13;
  --bad:#c83f4d;
  --info:#286daf;
  --teal:var(--brand-primary);
  --teal2:var(--brand-primary-700);
  --gold:var(--brand-secondary);
  --gold2:var(--brand-secondary-800);
  --r-xs:8px;
  --r-sm:11px;
  --r:16px;
  --r-lg:22px;
  --sh-xs:0 1px 2px rgba(16,34,53,.05);
  --sh:0 8px 24px rgba(16,60,91,.075);
  --sh-lg:0 22px 60px rgba(7,59,97,.16);
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --text-xs:.72rem;
  --text-sm:.82rem;
  --text-md:.94rem;
  --text-lg:1.08rem;
  --text-xl:1.35rem;
  --sidebar-w:272px;
  --header-h:76px;
}

html{font-size:15px;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);line-height:1.55;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:
  radial-gradient(700px 360px at 78% -80px,color-mix(in srgb,var(--brand-primary) 9%,transparent),transparent 68%),
  linear-gradient(180deg,#f8fbfd 0,var(--bg) 360px)}
::selection{background:color-mix(in srgb,var(--brand-primary) 22%,transparent);color:var(--brand-primary-900)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-secondary) 72%,white);outline-offset:2px}
button,input,select,textarea{font:inherit}
button{min-height:42px}
a{color:var(--brand-primary)}

/* Login */
#loginView{background:
  radial-gradient(circle at 15% 15%,rgba(231,135,36,.2),transparent 25%),
  radial-gradient(circle at 85% 80%,rgba(10,121,188,.26),transparent 30%),
  linear-gradient(145deg,#062f50 0,#075f98 54%,#0a79bc 100%);padding:28px}
#loginView:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 72%);pointer-events:none}
.loginCard{position:relative;width:min(460px,94vw);padding:32px 34px 36px;border:1px solid rgba(255,255,255,.7);border-radius:28px;box-shadow:0 28px 80px rgba(2,32,54,.34);overflow:hidden}
.loginCard:after{content:"";position:absolute;inset-inline:0;bottom:0;height:5px;background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary))}
.loginTools{display:flex;justify-content:flex-end}
.loginBrand{margin:-4px 0 26px}
.companyLogo{display:block;object-fit:contain;background:#fff}
.loginLogo{width:170px;height:138px;margin:0 auto 14px;border-radius:18px}
.loginBrand h1{margin:0;color:var(--brand-primary-900);font-size:1.55rem;letter-spacing:-.02em}
.loginBrand p{margin-top:4px;font-size:.82rem;letter-spacing:.04em;color:var(--ink2)}
.loginCard .field{margin-bottom:15px}
.loginCard .btnP{margin-top:12px!important}

/* Application shell */
#app:not(.hidden){display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh;direction:inherit}
.appSidebar{position:sticky;top:0;height:100vh;z-index:80;display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#073b61 0,#075f98 56%,#086eaa 100%);color:#fff;box-shadow:6px 0 28px rgba(7,59,97,.12);overflow:hidden;transition:width .22s ease,transform .22s ease}
[dir=rtl] .appSidebar{box-shadow:-6px 0 28px rgba(7,59,97,.12)}
.appSidebar:after{content:"";position:absolute;inset-inline-end:-60px;bottom:-90px;width:250px;height:250px;border:42px solid rgba(255,255,255,.035);border-radius:50%;pointer-events:none}
.sidebarBrand{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:104px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.sidebarLogo{width:66px;height:66px;flex:0 0 66px;border-radius:15px;border:1px solid rgba(255,255,255,.35);box-shadow:0 7px 18px rgba(0,0,0,.18)}
.sidebarBrandText{min-width:0}
.sidebarBrandText h1{font-size:.98rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebarBrandText p{font-size:.64rem;line-height:1.35;opacity:.72;margin-top:3px}
.appSidebar nav#mainNav{position:relative;top:auto;z-index:1;display:flex;flex:1;flex-direction:column;gap:5px;overflow-x:hidden;overflow-y:auto;background:transparent;border:0;padding:17px 12px}
.appSidebar nav#mainNav button{display:flex;align-items:center;gap:13px;width:100%;min-height:48px;padding:10px 13px;border:1px solid transparent;border-radius:13px;color:rgba(255,255,255,.78);text-align:start;font-size:.88rem;font-weight:700;transition:background .16s ease,color .16s ease,transform .16s ease;border-bottom:0}
.appSidebar nav#mainNav button svg{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.appSidebar nav#mainNav button:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(2px)}
[dir=rtl] .appSidebar nav#mainNav button:hover{transform:translateX(-2px)}
.appSidebar nav#mainNav button.on{color:#fff;background:linear-gradient(100deg,rgba(255,255,255,.17),rgba(255,255,255,.1));border-color:rgba(255,255,255,.14);box-shadow:inset 3px 0 0 var(--brand-secondary)}
[dir=rtl] .appSidebar nav#mainNav button.on{box-shadow:inset -3px 0 0 var(--brand-secondary)}
.sidebarFoot{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin:10px 14px 16px;padding:11px 13px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(0,0,0,.08);font-size:.72rem;color:rgba(255,255,255,.72)}
.sidebarFoot .syncDot{flex:0 0 auto}
.appFrame{min-width:0;display:flex;flex-direction:column}

/* Header */
.appHeader{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;min-height:var(--header-h);padding:10px 22px;background:rgba(255,255,255,.92);color:var(--ink);border-bottom:1px solid rgba(202,216,226,.82);box-shadow:0 4px 18px rgba(16,60,91,.045);backdrop-filter:blur(14px);flex-wrap:nowrap}
.headerBrand{display:flex;align-items:center;gap:12px;min-width:0}
.headerLogo{width:54px;height:48px;border-radius:11px;border:1px solid var(--line);box-shadow:var(--sh-xs)}
.pageHeading{min-width:0}
.pageHeading span{display:block;color:var(--ink2);font-size:.66rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pageHeading h1{font-size:1.23rem;color:var(--brand-primary-900);font-weight:900;line-height:1.3;white-space:nowrap}
.headerActions{margin-inline-start:auto;display:flex;align-items:center;gap:9px;min-width:0}
.iconButton{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;min-height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink2);transition:.15s}
.iconButton:hover{border-color:color-mix(in srgb,var(--brand-primary) 45%,var(--line));color:var(--brand-primary);background:var(--bg-soft)}
.iconButton svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.navToggle{flex:0 0 42px}
.langBtn{min-height:38px;padding:6px 13px;border:1px solid var(--line);background:#fff;color:var(--brand-primary-700);box-shadow:var(--sh-xs)}
.langBtn:hover{background:var(--bg-soft);border-color:var(--brand-primary)}
.langBtn.dark{background:var(--bg-soft);border-color:var(--line);color:var(--brand-primary-700)}
.bellBtn{width:42px;height:42px;background:#fff;color:var(--ink2)}
.userChip{display:flex;align-items:center;gap:9px;max-width:245px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);box-shadow:var(--sh-xs)}
[dir=rtl] .userChip{padding:5px 5px 5px 10px}
.userAvatar{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:linear-gradient(145deg,var(--brand-primary),var(--brand-primary-700));color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.03em}
.userMeta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.userMeta b{color:var(--ink);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userMeta>span{font-size:.65rem;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btnGhostW{min-height:40px;padding:7px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink2)}
.btnGhostW:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 38%,var(--line));background:color-mix(in srgb,var(--bad) 5%,white)}
.notifPanel{top:52px;width:min(390px,calc(100vw - 24px));border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);overflow:hidden}
.notifPanel .nh{padding:15px 16px;background:var(--surface-muted)}
.notifItem{padding:13px 16px}
.notifItem:hover{background:var(--bg-soft)}
.notifItem.unread{background:color-mix(in srgb,var(--brand-primary) 6%,white)}
.notifItem .nd{background:var(--brand-secondary)}

/* Content hierarchy */
.appFrame main{width:100%;max-width:1520px;margin:0 auto;padding:24px 26px 96px}
.secTitle{margin:0 0 18px;color:var(--brand-primary-900);font-size:1.4rem;letter-spacing:-.02em}
.secTitle:before{content:"";width:5px;height:26px;border-radius:99px;background:linear-gradient(var(--brand-primary),var(--brand-secondary));flex:0 0 5px}
.card{border:1px solid rgba(202,216,226,.72);border-radius:var(--r);box-shadow:var(--sh);padding:20px;margin-bottom:18px;background:rgba(255,255,255,.97)}
.card h2{font-size:1.06rem;color:var(--brand-primary-900);margin-bottom:16px}
.card h2 .ic{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--brand-primary) 9%,white);color:var(--brand-primary)}
.grid{gap:16px}
.statGrid{grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:14px;margin-bottom:20px}
.stat{position:relative;overflow:hidden;min-height:112px;padding:18px;border:1px solid rgba(202,216,226,.72);border-inline-start:0;border-radius:var(--r);box-shadow:var(--sh);background:#fff}
.stat:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--brand-primary)}
.stat:after{content:"";position:absolute;width:82px;height:82px;border-radius:50%;inset-inline-end:-34px;top:-36px;background:color-mix(in srgb,var(--brand-primary) 8%,transparent)}
.stat .lbl{font-size:.76rem;color:var(--ink2);font-weight:700}
.stat .val{font-size:1.65rem;color:var(--ink);margin-top:8px;line-height:1.15}
.stat .sub{margin-top:6px;font-size:.69rem}
.stat.gold:before{background:var(--brand-secondary)}.stat.gold:after{background:color-mix(in srgb,var(--brand-secondary) 11%,transparent)}
.stat.ok:before{background:var(--ok)}.stat.ok:after{background:color-mix(in srgb,var(--ok) 9%,transparent)}
.stat.bad:before{background:var(--bad)}.stat.bad:after{background:color-mix(in srgb,var(--bad) 9%,transparent)}
.stat.warn:before{background:var(--warn)}.stat.warn:after{background:color-mix(in srgb,var(--warn) 9%,transparent)}
.stat.info:before{background:var(--info)}.stat.info:after{background:color-mix(in srgb,var(--info) 9%,transparent)}

/* Forms and actions */
label{margin-bottom:6px;font-size:.78rem;font-weight:700;color:#52677a}
.field{margin-bottom:15px}
input,select,textarea{min-height:44px;padding:10px 13px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s}
textarea{min-height:92px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#afc4d3}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-primary) 13%,transparent)}
input:disabled,select:disabled,textarea:disabled,input[readonly],textarea[readonly]{background:#eef3f6;color:#758696;cursor:not-allowed}
.btn{min-height:42px;padding:9px 17px;border-radius:11px;justify-content:center;box-shadow:none;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.52;cursor:not-allowed;transform:none}
.btnP{background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-700));box-shadow:0 7px 16px color-mix(in srgb,var(--brand-primary) 22%,transparent)}
.btnP:hover{background:linear-gradient(135deg,var(--brand-primary-700),var(--brand-primary-900))}
.btnG{background:linear-gradient(135deg,var(--brand-secondary),var(--brand-secondary-700));color:#102235;box-shadow:0 7px 16px color-mix(in srgb,var(--brand-secondary) 20%,transparent)}
.btnO{border:1px solid var(--line-strong);background:#fff;color:var(--ink)}
.btnO:hover{border-color:var(--brand-primary);background:var(--bg-soft);color:var(--brand-primary-700)}
.btnD{border:1px solid color-mix(in srgb,var(--bad) 22%,white);background:color-mix(in srgb,var(--bad) 8%,white);color:var(--bad)}
.btnD:hover{background:var(--bad);color:#fff}
.btnS{min-height:34px;padding:5px 11px;border-radius:9px}
.filters{gap:10px;margin-bottom:18px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh-xs)}
.filters input,.filters select{min-width:150px}
.searchBox{min-width:240px}
.badge{min-height:26px;padding:4px 10px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 7%,white)!important}
.code,.customerCode{padding:4px 9px;border:1px solid color-mix(in srgb,var(--brand-primary) 18%,white);border-radius:8px;background:color-mix(in srgb,var(--brand-primary) 7%,white);color:var(--brand-primary-900)}

/* Tables and record cards */
.tw{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh-xs);scrollbar-width:thin;scrollbar-color:#b7cad6 transparent}
table{font-size:.84rem;background:#fff}
th{position:sticky;top:0;z-index:2;padding:12px 13px;background:#edf4f8;color:#52677a;border-bottom:1px solid var(--line-strong);font-weight:800}
td{padding:12px 13px;border-bottom:1px solid #edf2f5}
tbody tr{transition:background .13s}
tr:hover td{background:#f6fafc}
tfoot td{background:#edf4f8}
.bkCard{padding:17px 18px;margin-bottom:12px;border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh-xs);background:#fff;transition:transform .16s,border-color .16s,box-shadow .16s}
.bkCard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand-primary) 48%,var(--line));box-shadow:var(--sh)}
.bkName{color:var(--brand-primary-900);font-size:1.02rem}
.bkMeta{gap:9px 16px;margin-top:9px}
.bkMeta>*{display:inline-flex;align-items:center}
.bkMoney{padding-inline-start:18px;border-inline-start:1px solid var(--line)}
.svcCard,.pkgSec{padding:15px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff,#fafcfd);box-shadow:var(--sh-xs)}
.svcCard:hover{border-color:#b9cfdd}
.svcHead .t{color:var(--brand-primary-900)}
.hotelRow{border-color:#cfdde6;background:#fff}
.subTabs{position:sticky;top:calc(var(--header-h) + 10px);z-index:20;gap:7px;padding:8px;margin:0 0 17px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:var(--sh-xs);backdrop-filter:blur(10px)}
.subTabs button{min-height:38px;padding:7px 15px;border:0;border-radius:10px;background:transparent}
.subTabs button:hover{background:var(--bg-soft);color:var(--brand-primary)}
.subTabs button.on{background:var(--brand-primary);color:#fff;box-shadow:0 5px 12px color-mix(in srgb,var(--brand-primary) 20%,transparent)}
.settingsNav{position:sticky;top:calc(var(--header-h) + 10px);z-index:18;display:flex;gap:7px;overflow-x:auto;margin-bottom:18px;padding:8px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.95);box-shadow:var(--sh-xs);backdrop-filter:blur(10px)}
.settingsNav button{min-height:38px;padding:7px 14px;border:0;border-radius:10px;background:transparent;color:var(--ink2);font-size:.8rem;font-weight:750;white-space:nowrap}
.settingsNav button:hover,.settingsNav button:focus-visible{background:var(--bg-soft);color:var(--brand-primary-700)}
#tab-settings .card{scroll-margin-top:calc(var(--header-h) + 78px)}
.repBtn{min-height:64px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh-xs)}
.repBtn:hover{transform:translateY(-1px);border-color:var(--brand-primary);background:var(--bg-soft);box-shadow:var(--sh)}
.repBtn .ri{background:color-mix(in srgb,var(--brand-primary) 9%,white);color:var(--brand-primary)}
.empty{padding:48px 14px;color:#718396;border-radius:14px}

/* Attachments */
.attachmentList{gap:9px}
.attachmentItem{grid-template-columns:minmax(0,1fr) auto;padding:12px 13px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--sh-xs)}
.attachmentItem:hover{border-color:#b9cfdd}
.attachmentFileName{font-size:.8rem;color:var(--brand-primary-900)}
.proofBtn{min-height:34px;border:1px solid color-mix(in srgb,var(--brand-primary) 22%,white);background:color-mix(in srgb,var(--brand-primary) 6%,white);color:var(--brand-primary-900)}
.upBtn{min-height:40px;padding:8px 13px;border-color:var(--brand-secondary);background:color-mix(in srgb,var(--brand-secondary) 5%,white);color:var(--brand-secondary-800)}
.attachmentGroup{padding:13px;border-color:var(--line);border-radius:14px;background:#f9fbfc}
.attachmentPreviewState{min-height:300px;border:1px solid var(--line);border-radius:14px;background:#f5f8fa}
.attachmentPreviewImage,.attachmentPreviewPdf{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh)}
.attachmentProgress{height:30px;background:#e5edf2}
.attachmentProgress>div{background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary))}

/* Financial visual hierarchy */
.finRow{padding:11px 2px;border-color:#dce6ec}
.finRow.total{margin-top:5px;padding:14px 12px;border-radius:11px;background:var(--bg-soft);color:var(--brand-primary-900)}
.flow{gap:8px;padding:6px 2px 12px}
.flowStep .dot{width:26px;height:26px;background:#dbe5eb}
.flowStep.done .dot{background:var(--ok)}
.flowStep.cur .dot{background:var(--brand-secondary);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand-secondary) 18%,transparent)}
.timeline:before{background:#d8e4eb}
.tlItem .td{border-color:var(--brand-primary)}
.barRow .bt{height:12px;background:#e7eef2}
.barRow .bf{background:linear-gradient(90deg,var(--brand-primary),var(--brand-secondary))}
.reqChip{min-height:36px;border-color:var(--line-strong)}
.reqChip.on{border-color:var(--brand-secondary);background:color-mix(in srgb,var(--brand-secondary) 9%,white);color:var(--brand-secondary-800)}

/* Modal, toast, and overlays */
#modalWrap{padding:22px;background:rgba(4,28,46,.64);backdrop-filter:blur(7px)}
#modalBox{width:min(780px,96vw);max-height:min(92vh,920px);padding:26px;border:1px solid rgba(255,255,255,.72);border-radius:22px;box-shadow:0 30px 90px rgba(2,31,53,.32);scrollbar-width:thin}
#modalBox.wide{width:min(1080px,97vw)}
.modalX{top:14px;inset-inline-start:14px;width:38px;height:38px;min-height:38px;border:1px solid var(--line);background:#fff;color:var(--ink2);box-shadow:var(--sh-xs)}
.modalX:hover{background:color-mix(in srgb,var(--bad) 7%,white);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 25%,white)}
#toast{bottom:24px;max-width:min(560px,calc(100vw - 28px));padding:12px 20px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:#102d43;box-shadow:0 12px 36px rgba(0,0,0,.26)}
.navScrim{display:none}

/* Compact desktop sidebar */
#app.sidebarCollapsed{--sidebar-w:88px}
#app.sidebarCollapsed .sidebarBrand{justify-content:center;padding-inline:10px}
#app.sidebarCollapsed .sidebarLogo{width:58px;height:58px;flex-basis:58px}
#app.sidebarCollapsed .sidebarBrandText,#app.sidebarCollapsed .navLabel,#app.sidebarCollapsed .sidebarFoot span:not(.syncDot){display:none}
#app.sidebarCollapsed .appSidebar nav#mainNav button{justify-content:center;padding-inline:10px}
#app.sidebarCollapsed .sidebarFoot{justify-content:center;margin-inline:12px;padding-inline:8px}

/* Directional polish */
[dir=ltr] body{font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif}
[dir=ltr] .num,[dir=ltr] .bkMoney,[dir=ltr] .barRow .bv{text-align:right}
[dir=rtl] .num{font-variant-numeric:tabular-nums}

/* Responsive shell */
@media(max-width:1280px){
  :root{--sidebar-w:248px}
  .appFrame main{padding-inline:20px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1024px){
  #app:not(.hidden){display:block}
  .appSidebar{position:fixed;top:0;bottom:0;width:min(310px,86vw);height:100dvh;transition:transform .22s ease;box-shadow:var(--sh-lg)}
  [dir=ltr] .appSidebar{left:0;transform:translateX(-105%)}
  [dir=rtl] .appSidebar{right:0;transform:translateX(105%)}
  #app.navOpen .appSidebar{transform:translateX(0)}
  .navScrim{position:fixed;inset:0;z-index:70;width:100%;height:100%;min-height:0;border:0;border-radius:0;background:rgba(3,27,45,.5);backdrop-filter:blur(2px)}
  #app.navOpen .navScrim{display:block}
  .appHeader{padding-inline:16px}
  .appFrame main{padding:20px 16px 90px}
  .headerLogo{display:none}
  .userChip{max-width:190px}
}
@media(max-width:768px){
  :root{--header-h:68px}
  .appHeader{gap:9px;min-height:68px;padding:8px 11px}
  .pageHeading span{display:none}
  .pageHeading h1{font-size:1.05rem}
  .headerActions{gap:6px}
  .userChip{padding:4px;border:0;background:transparent;box-shadow:none}
  .userMeta{display:none}
  .btnGhostW{padding-inline:10px}
  .appFrame main{padding:16px 11px 82px}
  .secTitle{font-size:1.2rem;margin-bottom:14px}
  .card{padding:16px;margin-bottom:14px}
  .statGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{min-height:104px;padding:15px}
  .stat .val{font-size:1.4rem}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters{align-items:stretch}
  .filters input,.filters select,.searchBox{width:100%;min-width:0;flex:1 1 46%}
  .bkCard{grid-template-columns:1fr;padding:15px}
  .bkMoney{display:flex;gap:14px;padding:10px 0 0;border:0;border-top:1px solid var(--line);text-align:start}
  .attachmentPreviewPdf{height:64dvh}
  .attachmentPreviewState{min-height:230px}
  #modalWrap{padding:10px}
  #modalBox,#modalBox.wide{width:100%;max-height:94dvh;padding:22px 16px;border-radius:18px}
  .subTabs{top:76px;overflow-x:auto;flex-wrap:nowrap}
  .subTabs button{white-space:nowrap}
}
@media(max-width:430px){
  html{font-size:14px}
  .appHeader{gap:6px}
  .navToggle,.bellBtn,.iconButton{width:40px;height:40px;min-height:40px}
  .headerBrand{min-width:0;flex:1}
  .pageHeading h1{max-width:112px;overflow:hidden;text-overflow:ellipsis}
  .langBtn{padding-inline:9px}
  .btnGhostW{font-size:0;width:40px;padding:0}
  .btnGhostW:before{content:"↪";font-size:1rem}
  .userAvatar{width:32px;height:32px;flex-basis:32px}
  .statGrid{grid-template-columns:1fr 1fr}
  .stat{min-height:96px;padding:13px}
  .stat .val{font-size:1.23rem}
  .g3,.g4{grid-template-columns:1fr}
  .filters>*{flex-basis:100%!important}
  .card h2{font-size:1rem;padding-inline-end:34px}
  .btn{min-height:44px}
  .proofRow>.btn,.attachmentActions .btn{flex:1 1 calc(50% - 8px)}
  .attachmentFileActions{align-items:stretch}
  .attachmentFileName{flex-basis:100%;max-width:100%}
  .customerCodeMigrationItem{padding:12px}
  .loginCard{padding:26px 21px 31px}
  .loginLogo{width:148px;height:122px}
}
@media(max-width:390px){
  .appFrame main{padding-inline:9px}
  .headerActions{gap:4px}
  .pageHeading h1{max-width:90px}
  .userChip{display:none}
  .statGrid{grid-template-columns:1fr}
  .stat{min-height:88px}
  .bkMeta{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .attachmentActions .btn{flex-basis:100%}
}
@media(max-width:360px){
  .pageHeading{display:none}
  .headerActions{margin-inline-start:auto}
  .card{padding:14px 12px}
  .secTitle{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- Phase 10 executive dashboard and monthly reports ---- */
.reportFilters{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px;align-items:end}
.reportFilters .field{margin:0}.reportFilters .btn{align-self:end}.reportContext{font-size:.75rem;color:var(--ink2);font-weight:600}
.executiveStats{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
button.stat{border:1px solid var(--line);text-align:inherit;cursor:default;font:inherit;color:inherit}
button.stat[data-dash-action]{cursor:pointer}button.stat[data-dash-action]:hover{transform:translateY(-2px);border-color:var(--brand-primary)}
.countrySummaryGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.countrySummaryCard{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:16px;text-align:inherit;color:var(--ink);cursor:pointer;box-shadow:var(--shadow-sm)}
.countrySummaryCard:hover{border-color:var(--brand-primary);transform:translateY(-1px)}
.countrySummaryCard>b{display:block;color:var(--brand-primary);font-size:1rem;margin-bottom:10px}
.summaryMetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;font-size:.72rem;color:var(--ink2)}
.summaryMetrics span{display:flex;justify-content:space-between;gap:8px}.summaryMetrics b{color:var(--ink);white-space:nowrap}
.countryDetail summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;color:var(--brand-primary);padding:3px 0 13px}
.countryDetail summary::marker{color:var(--brand-secondary)}.countryDetail summary span{font-size:.75rem;color:var(--ink2)}
.simpleFinancialSummary h3{margin:18px 0 9px;color:var(--ink);font-size:.92rem}.simplePaymentList{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}.simplePayment{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}.simplePayment span{font-size:.75rem;color:var(--ink2)}.simpleTotals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}.simpleTotals>div,.moneyLocations>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}.simpleTotals span,.moneyLocations span{color:var(--ink2);font-size:.78rem}.moneyLocations{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.manualFinancialWarning{display:flex;flex-direction:column;gap:4px;padding:12px;margin:10px 0;border:1px solid var(--warn);border-radius:12px;background:color-mix(in srgb,var(--warn) 10%,var(--surface));font-size:.76rem}.manualFinancialWarning b{color:var(--warn)}.financialModeActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.advancedFinancial{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}.advancedFinancial summary{cursor:pointer;color:var(--brand-primary);font-weight:700}.advancedFinancial[open] summary{margin-bottom:10px}
.countryDetail tr[data-booking]{cursor:pointer}.countryDetail tr[data-booking]:hover{background:var(--surface-soft)}
.bookingMini{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;border:0;border-bottom:1px dashed var(--line);background:transparent;padding:11px 0;color:var(--ink);text-align:inherit;cursor:pointer}
.bookingMini span{font-size:.75rem;color:var(--ink2)}
.monthlyTable{max-height:72vh}.monthlyTable table{width:100%;min-width:980px;table-layout:fixed}.monthlyTable th{position:sticky;top:0;z-index:2}.monthlyTable td{vertical-align:top;white-space:pre-line;overflow-wrap:anywhere;line-height:1.55}.monthlyTable .reportMonthRow th{position:static;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;text-align:start;font-size:15px;padding:9px 12px}.monthlyTable .reportCodeCell{font-weight:700}.monthlyTable .reportCodeCell span{display:block;white-space:pre-line}.monthlyTable .reportCodeCell .btn{margin-top:8px}.monthlyTable td:nth-last-child(2){color:var(--teal2);font-weight:900}.verticalMonthlyReport{overflow:hidden}
.reportMultiline{white-space:pre-line;display:block;line-height:1.55;min-width:180px}
.monthlyTable .reportMultiline{min-width:0}
.filterScopeNote{display:flex;flex-direction:column;justify-content:center;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius-xs);background:var(--surface-soft);font-size:.75rem}
.reportRuleNote{margin:-4px 0 14px;padding:10px 12px;border-inline-start:3px solid var(--brand-primary);background:var(--surface-soft);border-radius:var(--radius-xs)}
.filterScopeNote span,.fieldHint{color:var(--ink2);font-size:.72rem}.monthCloseCard{border-inline-start:4px solid var(--brand-secondary)}
.approvalCard{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:var(--radius-xs);margin-bottom:9px}.approvalCard small{display:block;color:var(--ink2);margin-top:3px}.approvalCard p{margin-top:5px}
@media(max-width:1024px){.reportFilters{grid-template-columns:repeat(3,minmax(0,1fr))}.monthlyTable{max-height:65vh}}
@media(max-width:768px){.reportFilters{grid-template-columns:repeat(2,minmax(0,1fr))}.countrySummaryGrid{grid-template-columns:1fr}.approvalCard{grid-template-columns:1fr}.monthlyTable{max-height:62vh}}
@media(max-width:390px){.reportFilters{grid-template-columns:1fr}.summaryMetrics{grid-template-columns:1fr}.bookingMini{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.simpleTotals{grid-template-columns:1fr}.simplePaymentList{grid-template-columns:1fr}}
@media print{
  .appSidebar,.appHeader,.navScrim{display:none!important}
  .appFrame main{padding:0!important}
}