/* =============================================================================
   TRUST Financial — app.css
   Layout: fixed navy ledger rail (sidebar) + sticky period bar + content grid.
   Identity: TRUST navy & green, IBM Plex Sans / Arabic / Mono.
   ============================================================================= */
:root{
  --navy:#0B3A61; --navy-2:#082B48; --navy-3:#1D5D8C;
  --accent:#2E9A34; --accent-soft:#E6F4E7;
  --bg:#F1F4F7; --surface:#FFFFFF; --surface-2:#F7F9FB; --line:#DCE3EA; --line-2:#EBF0F4;
  --ink:#14212C; --ink-2:#43586A; --ink-3:#73879A;
  --good:#23863A; --good-soft:#E3F3E6; --warn:#B8650F; --warn-soft:#FBEEDD; --bad:#B4372A; --bad-soft:#F9E5E2;
  --info:#24679E; --info-soft:#E6EFF7; --crit:#7E1B12; --crit-soft:#F3D9D5;
  --rail-ink:#C9DAE7; --rail-dim:#7F9AB0;
  --shadow:0 1px 2px rgba(11,58,97,.06), 0 6px 18px -10px rgba(11,58,97,.22);
  --sans:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --ar:"IBM Plex Sans Arabic","IBM Plex Sans",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:10px; --r-s:6px; --rail:248px;
  --chart-1:#0B3A61; --chart-2:#2E9A34; --chart-3:#B8650F; --chart-4:#8FA9BF; --chart-grid:#E7EDF2;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --navy:#0A2338; --navy-2:#071A2A; --navy-3:#5E9CCB; --accent:#5CC468; --accent-soft:#1B3322;
  --bg:#0E151C; --surface:#151F28; --surface-2:#1A2631; --line:#2A3946; --line-2:#22303B;
  --ink:#E4ECF2; --ink-2:#AFC0CE; --ink-3:#7E93A5;
  --good:#6CCB7C; --good-soft:#1A3322; --warn:#E5A456; --warn-soft:#3A2A15; --bad:#EE8577; --bad-soft:#3D1F1B;
  --info:#7DB4E2; --info-soft:#17293A; --crit:#FF9C8E; --crit-soft:#4A1A15;
  --rail-ink:#B8CADA; --rail-dim:#6C8599; --shadow:0 1px 2px rgba(0,0,0,.3);
  --chart-1:#7DB4E2; --chart-2:#6CCB7C; --chart-3:#E5A456; --chart-4:#4F667A; --chart-grid:#24323E;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --navy:#0A2338; --navy-2:#071A2A; --navy-3:#5E9CCB; --accent:#5CC468; --accent-soft:#1B3322;
  --bg:#0E151C; --surface:#151F28; --surface-2:#1A2631; --line:#2A3946; --line-2:#22303B;
  --ink:#E4ECF2; --ink-2:#AFC0CE; --ink-3:#7E93A5;
  --good:#6CCB7C; --good-soft:#1A3322; --warn:#E5A456; --warn-soft:#3A2A15; --bad:#EE8577; --bad-soft:#3D1F1B;
  --info:#7DB4E2; --info-soft:#17293A; --crit:#FF9C8E; --crit-soft:#4A1A15;
  --rail-ink:#B8CADA; --rail-dim:#6C8599; --shadow:0 1px 2px rgba(0,0,0,.3);
  --chart-1:#7DB4E2; --chart-2:#6CCB7C; --chart-3:#E5A456; --chart-4:#4F667A; --chart-grid:#24323E;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
html[dir="rtl"] body{font-family:var(--ar)}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mono{font-family:var(--mono);font-size:12.5px}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh}
.rail{position:fixed;inset-block:0;inset-inline-start:0;width:var(--rail);background:var(--navy);color:var(--rail-ink);
  display:flex;flex-direction:column;z-index:60;padding-top:env(safe-area-inset-top,0px)}
.brand{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand .mark{display:flex;align-items:center;gap:10px}
.brand .bm{width:34px;height:34px;flex:none;border-radius:8px;background:#fff;color:#0B3A61;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;line-height:1;letter-spacing:-.04em;white-space:nowrap;font-family:var(--sans)}
.brand .bm span{color:#2E9A34}
.brand .tlogo{display:block;flex:none}
.brand b.tname{font-size:13px;line-height:1.25;text-align:start}
.brand b.tname em{font-style:italic;font-weight:700;color:#D9B46E;font-size:17px;letter-spacing:.04em;display:block}
.brand b.tname span{color:#fff;font-weight:600}
[dir="rtl"] .brand b.tname{text-align:right}
.brand b{display:block;color:#fff;font-size:15px;line-height:1.2;letter-spacing:.01em}
.brand .own{display:block;color:var(--rail-dim);font-size:10.5px;line-height:1.3;margin-top:2px}
.brand small{display:block;color:var(--rail-dim);font-size:10.5px;margin-top:8px;line-height:1.35}
.nav{flex:1;overflow-y:auto;padding:8px 8px 12px;scrollbar-width:thin}
.nav a{display:flex;align-items:center;gap:9px;padding:6.5px 10px;border-radius:var(--r-s);color:var(--rail-ink);text-decoration:none;
  font-size:13px;cursor:pointer;border-inline-start:3px solid transparent;margin-block:1px}
.nav a .n{font-family:var(--mono);font-size:10px;color:var(--rail-dim);width:16px;text-align:end}
.nav a .i{width:16px;text-align:center;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.on{background:rgba(92,196,104,.14);color:#fff;border-inline-start-color:#5CC468;font-weight:600}
.nav a.off{opacity:.45;cursor:not-allowed}
.nav a.off:hover{background:none;color:var(--rail-ink)}
.nav a .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a .tag{margin-inline-start:auto;white-space:nowrap;flex:none;font-size:9.5px;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:0 6px;color:var(--rail-dim)}
.rail-foot{padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.09);font-size:10.5px;color:var(--rail-dim)}
.main{flex:1;min-width:0;margin-inline-start:var(--rail);display:flex;flex-direction:column}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px 20px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.bar .title{margin-inline-end:auto;min-width:0}
.bar .title h1{font-size:17px;color:var(--ink)}
.bar .title p{margin:0;font-size:11.5px;color:var(--ink-3)}
.ctl{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:3px 8px}
.ctl label{font-size:10px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
html[dir="rtl"] .ctl label{text-transform:none;letter-spacing:0}
.ctl select{border:0;background:transparent;font-size:12.5px;font-weight:500;padding:3px 0;max-width:190px;cursor:pointer}
.menu-btn{display:none;border:0;background:var(--navy);color:#fff;border-radius:var(--r-s);padding:6px 10px;cursor:pointer}
.content{padding:18px 20px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.banner{display:flex;gap:10px;align-items:flex-start;padding:9px 14px;border-radius:var(--r-s);font-size:12.5px;border:1px solid}
.banner b{font-weight:600}
.banner.demo{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);font-weight:600;letter-spacing:.02em}
.banner.info{background:var(--info-soft);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.banner.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.banner.bad{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.banner.good{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent)}

/* ---------- cards & grids ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.card-h h2{font-size:14px;color:var(--ink)}
.card-h .sub{font-size:11.5px;color:var(--ink-3)}
.card-h .act{margin-inline-start:auto;display:flex;gap:6px;flex-wrap:wrap}
.card-b{padding:14px 16px}
.card-b.flush{padding:0}
.grid{display:grid;gap:16px;min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-top:4px}
.sec-h h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
html[dir="rtl"] .sec-h h2{letter-spacing:0;text-transform:none;font-size:13px}
.sec-h::after{content:"";flex:1;border-top:1px solid var(--line)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 11px;display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--line)}
.kpi.s-good::before{background:var(--good)} .kpi.s-warn::before{background:var(--warn)} .kpi.s-bad::before{background:var(--bad)}
.kpi .t{font-size:11.5px;color:var(--ink-2);font-weight:600;display:flex;gap:6px;align-items:center}
.kpi .v{font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.kpi .d{font-size:11.5px;display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--ink-3)}
.kpi .d b{font-weight:600;color:var(--ink-2)}
.kpi .f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;padding-top:6px;border-top:1px dashed var(--line)}

/* tables */
.tw{overflow:auto;max-width:100%}
.tw.tall{max-height:620px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 12px;text-align:start;border-bottom:1px solid var(--line-2);white-space:nowrap;vertical-align:middle}
thead th{position:sticky;top:0;background:var(--surface-2);color:var(--ink-2);font-size:11px;font-weight:600;z-index:1}
td.n,th.n{text-align:end}
tr.h td{font-weight:600;color:var(--navy-3);background:var(--surface-2);font-size:12px}
:root[data-theme="dark"] tr.h td{color:var(--info)}
tr.s td{font-weight:600}
tr.t td{font-weight:700;border-top:2px solid var(--ink-2);background:var(--surface-2)}
tr.ind td:first-child{padding-inline-start:26px;color:var(--ink-2)}
tbody tr:hover td{background:color-mix(in srgb,var(--info-soft) 55%,transparent)}
td.wrap{white-space:normal;min-width:220px}
.pos{color:var(--good)} .neg{color:var(--bad)} .amb{color:var(--warn)} .muted{color:var(--ink-3)} .small{font-size:11.5px}
.na{color:var(--ink-3);font-style:italic;font-size:.92em}

/* badges / pills */
.b{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:99px;padding:1px 8px;white-space:nowrap}
.b-good{background:var(--good-soft);color:var(--good)} .b-warn{background:var(--warn-soft);color:var(--warn)}
.b-bad{background:var(--bad-soft);color:var(--bad)} .b-info{background:var(--info-soft);color:var(--info)}
.b-crit{background:var(--crit-soft);color:var(--crit)} .b-mute{background:var(--line-2);color:var(--ink-2)}
.st{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;border:1px solid currentColor;border-radius:4px;padding:0 5px}
html[dir="rtl"] .st{text-transform:none;letter-spacing:0;font-size:10.5px}
.st.der{color:var(--info)} .st.est{color:var(--warn)}

/* buttons & form */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--r-s);padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--navy-3)}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
:root[data-theme="dark"] .btn.pri{background:var(--navy-3);border-color:var(--navy-3);color:#071A2A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.pri{background:var(--navy-3);border-color:var(--navy-3);color:#071A2A} }
.btn.ok{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:4px 9px;font-size:11.5px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:11px;color:var(--ink-3)}
.in, select.in{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-s);padding:7px 9px;font-size:13px;min-width:0;max-width:100%}
select.in.sm,.in.sm{padding:4px 6px;font-size:12px}
.form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 14px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;flex-wrap:wrap}
.seg button{border:0;background:var(--surface);padding:6px 12px;font-size:12px;cursor:pointer;color:var(--ink-2);border-inline-end:1px solid var(--line)}
.seg button:last-child{border-inline-end:0}
.seg button.on{background:var(--navy);color:#fff;font-weight:600}
:root[data-theme="dark"] .seg button.on{background:var(--navy-3);color:#071A2A}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .seg button.on{background:var(--navy-3);color:#071A2A} }

/* wizard */
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{flex:1;min-width:120px;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;font-size:12px;background:var(--surface);color:var(--ink-3);display:flex;gap:8px;align-items:center}
.step i{font-style:normal;font-family:var(--mono);width:20px;height:20px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:11px;flex:none}
.step.on{border-color:var(--navy-3);color:var(--ink);font-weight:600;background:var(--info-soft)}
.step.done{color:var(--good)}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:28px 16px;text-align:center;background:var(--surface-2);display:flex;flex-direction:column;gap:10px;align-items:center}
.drop.hot{border-color:var(--accent);background:var(--accent-soft)}
/* inputs page */
.inputs{display:flex;flex-direction:column;gap:16px}
.in-head{display:flex;gap:14px;align-items:center}.in-head h2{font-size:19px;margin:0 0 2px}.in-head p{margin:0}
.req{color:var(--bad);font-weight:700}.opt{font-weight:400;color:var(--ink-3)}
.ferr{color:var(--bad);font-size:11.5px}
.in.err{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.field.span2{grid-column:1/-1}
.prange{display:flex;flex-direction:column;gap:6px}.pside{display:flex;gap:6px;align-items:center}.pside .in{width:auto;min-width:0;flex:1 1 0}.pside .pl{font-size:12px;color:var(--ink-3);min-width:24px}
.in-save{gap:12px;align-items:center}
.drop.locked{opacity:.75}
.cov-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.cov{display:flex;flex-wrap:wrap;gap:4px}
.cov span,.cov button{min-width:40px;font:inherit;cursor:default;padding:4px 2px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);font-size:10.5px;line-height:1.15;text-align:center;color:var(--ink-3)}
.cov button{cursor:pointer}.cov button:hover{border-color:var(--navy-3)}
.cov span.on,.cov button.on{background:var(--good-soft);border-color:var(--good);color:var(--good);font-weight:600}
.cov small{font-size:9.5px}
.cov button.stg{background:var(--warn-soft);border-color:var(--warn);color:var(--warn);font-weight:600}
.stp .card-h h3{display:flex;align-items:center;gap:10px;margin:0;font-size:15px}
.stp .stn{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-2)}
.stp.ok .stn{background:var(--good);border-color:var(--good);color:#fff}
.inputs > .card + .card{margin-top:0}
.card.post{border:1.5px solid var(--good)}
.btn.big{padding:11px 22px;font-size:15px}
.stg td{vertical-align:middle}
.covt td{vertical-align:middle}.covt .in.sm{min-width:110px}
.drop .big{font-size:15px;font-weight:600}
.preview td,.preview th{font-size:12px;padding:5px 9px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.preview tr.hdr td{background:var(--info-soft);font-weight:600}
.issue{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.issue:last-child{border-bottom:0}
.issue .ic{flex:none;width:18px;text-align:center;font-weight:700}
.issue.error .ic{color:var(--bad)} .issue.warning .ic{color:var(--warn)} .issue.info .ic{color:var(--info)}

/* score */
.score{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.score .ring{--p:0;width:118px;height:118px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--sc) calc(var(--p)*1%), var(--line-2) 0)}
.score .ring b{width:90px;height:90px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:28px;font-weight:600}
.meter{height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--navy-3);border-radius:99px}
.chart{position:relative;height:270px}
.chart.sm{height:220px}
.formula{font-size:11px;color:var(--ink-3);font-family:var(--mono);white-space:normal}
html[dir="rtl"] .formula{font-family:var(--ar)}
.empty{padding:28px 16px;text-align:center;color:var(--ink-3);display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{position:fixed;inset-block-end:calc(18px + env(safe-area-inset-bottom,0px));inset-inline-end:18px;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:var(--r);z-index:200;font-size:13px;max-width:340px;box-shadow:var(--shadow)}
.modal{position:fixed;inset:0;background:rgba(6,25,40,.55);z-index:150;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .box{background:var(--surface);border-radius:var(--r);max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;font-size:13px}
.dl dt{color:var(--ink-2)} .dl dd{margin:0;font-weight:600;text-align:end}
.kbd{font-family:var(--mono);font-size:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:0 5px}

/* ---------- responsive ---------- */
@media (max-width:1100px){ .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){
  .rail{transform:translateX(-102%);transition:transform .2s ease}
  html[dir="rtl"] .rail{transform:translateX(102%)}
  .rail.open{transform:none!important;box-shadow:0 0 0 100vmax rgba(6,25,40,.45)}
  .main{margin-inline-start:0}
  .menu-btn{display:inline-flex}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .bar{padding:8px 16px}
  .content{padding:14px 16px 24px}
  .kpis{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .kpi .v{font-size:18px}
  .ctl select{max-width:140px}
}
@media (max-width:480px){
  .bar .ctl{flex:1 1 calc(50% - 8px)}
  .bar .ctl select{max-width:none;width:100%}
  .kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .kpi{padding:10px 10px 9px}
  .kpi .d{font-size:10.5px}
}

/* ---------- print (phase 4 builds the full report layout) ---------- */
@media print{
  .rail,.bar,.menu-btn,.btn,.no-print{display:none!important}
  .main{margin:0} body{background:#fff}
  .card{box-shadow:none;break-inside:avoid}
  .tw{max-height:none!important;overflow:visible!important}
}