/* =====================================================================
   كفايات · التقارير المالية — design system
   Conventional accounting-software look. Light only. RTL.
   ===================================================================== */
:root{
  --page:#EEF1F4; --surface:#FFFFFF; --surface-2:#F1F4F7; --line:#D3DAE2; --line-2:#E3E8ED;
  --ink:#172033; --ink-2:#465264; --ink-3:#6B7684;
  --nav:#FFFFFF; --nav-ink:#172033; --nav-ink2:#5B6675; --nav-line:#D3DAE2; --nav-active:#00A4B3; --nav-hover:#F1F4F7;
  --brand:#0097A6; --brand-2:#00727D; --brand-tint:#E3F5F7; --brand-line:#9EDCE3; --brand-bg:#00A4B3; --gold:#DD9933; --gold-tint:#FBF1E1;
  --pos:#1E7B4F; --pos-tint:#E7F4EC; --neg:#B42318; --neg-tint:#FBEAE7; --warn:#B97B1F; --warn-tint:#FBF1E1;
  --sel:#EEF8F9; --focus:0 0 0 3px rgba(0,164,179,.28);
  --r:6px; --r-lg:8px;
  --font:"Tajawal","IBM Plex Sans Arabic","Segoe UI",Tahoma,Arial,sans-serif;
  --appbar-h:56px; --toolbar-h:52px;
}
/* ---------- dark theme (toggle in the app bar; remembered per browser) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0F1419; --surface:#161C24; --surface-2:#1C242E; --line:#2A3441; --line-2:#222B36;
  --ink:#E6EAF0; --ink-2:#A7B1BE; --ink-3:#7B8794;
  --brand:#2BC1CF; --brand-2:#6ADAE4; --brand-tint:#0F3338; --brand-line:#1F5F66; --brand-bg:#00727D; --gold:#E5B163; --gold-tint:#3A2D16;
  --pos:#3FCF84; --pos-tint:#12301F; --neg:#F0705F; --neg-tint:#3A1A18; --warn:#F2A950; --warn-tint:#3A2A12;
  --sel:#132A2E; --focus:0 0 0 3px rgba(43,193,207,.35);
  --bar-2:#B98A3A; --bar-3:#2E5C62; --tip-bg:#2A3441; --toast-bg:#2A3441;
  --nav:#0F1419; --nav-ink:#E6EAF0; --nav-ink2:#A7B1BE; --nav-line:#2A3441; --nav-active:#2BC1CF; --nav-hover:rgba(255,255,255,.06);
}
:root{ --bar-2:#DD9933; --bar-3:#9EDCE3; --tip-bg:#1F2933; --toast-bg:#1F2933; }
:root[data-theme="dark"] .note.warn{border-color:#5A4322}
:root[data-theme="dark"] .btn:hover{border-color:#3A4656}
:root[data-theme="dark"] .btn.danger,:root[data-theme="dark"] .badge.bad{border-color:#5A2A26}
:root[data-theme="dark"] .badge.ok{border-color:#1F4D33}
:root[data-theme="dark"] .badge.warn{border-color:#5A4322}
:root[data-theme="dark"] .brand img{background:#00727D}
:root[data-theme="dark"] .modal{box-shadow:0 20px 50px rgba(0,0,0,.6)}
:root[data-theme="dark"] .select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A7B1BE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")}
.theme-toggle svg.moon{display:block} .theme-toggle svg.sun{display:none}
:root[data-theme="dark"] .theme-toggle svg.moon{display:none} :root[data-theme="dark"] .theme-toggle svg.sun{display:block}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:14px/1.55 var(--font);direction:rtl;text-align:right;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.3}
h1{font-size:18px} h2{font-size:15px} h3{font-size:14px}
p{margin:0}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.num,.n{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)} .small{font-size:12px} .xs{font-size:11.5px}
.pos{color:var(--pos)} .neg{color:var(--neg)} .bold{font-weight:600}
.ltr{direction:ltr;unicode-bidi:isolate}
.nowrap{white-space:nowrap}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grow{flex:1 1 auto;min-width:0}
.right{margin-inline-start:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- app bar ---------- */
.appbar{position:sticky;top:0;z-index:40;height:var(--appbar-h);background:var(--nav);color:var(--nav-ink);border-bottom:1px solid var(--nav-line);display:flex;align-items:center;gap:20px;padding:0 24px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{height:30px;width:auto;display:block}
.brand .name{font-weight:600;font-size:14px;white-space:nowrap}
.brand .name small{display:block;font-weight:400;font-size:11px;color:var(--ink-3);line-height:1.2}
.appbar .brand .name small{color:var(--nav-ink2)}
.appbar .brand img{background:var(--brand-bg);padding:7px 11px;border-radius:6px;height:42px}
.nav{display:flex;align-items:stretch;height:var(--appbar-h);gap:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;padding:0 14px;color:var(--nav-ink2);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{color:var(--nav-ink);text-decoration:none;background:var(--nav-hover)}
.nav a.active{color:var(--brand-2);border-bottom-color:var(--nav-active)}
:root[data-theme="dark"] .nav a.active{color:#fff}
.appbar .tools{margin-inline-start:auto;display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:8px;padding:5px 10px;border:1px solid var(--nav-line);border-radius:20px;font-size:12.5px;background:var(--nav-hover);color:var(--nav-ink)}
.appbar .btn{background:var(--surface);border-color:var(--nav-line);color:var(--nav-ink)}
.appbar .btn:hover{background:var(--nav-hover)}
.appbar .select{background-color:var(--surface);border-color:var(--nav-line);color:var(--nav-ink)}
.appbar .filter label{color:var(--nav-ink2)}
.appbar .user-chip .faint{color:var(--nav-ink2)}
.user-chip b{font-weight:600}

/* ---------- toolbar ---------- */
.toolbar{position:sticky;top:var(--appbar-h);z-index:30;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:var(--toolbar-h)}
.toolbar .title{display:flex;flex-direction:column;gap:1px;min-width:0}
.toolbar .title h1{font-size:16px}
.toolbar .title p{font-size:12px;color:var(--ink-3)}
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter{display:flex;align-items:center;gap:6px}
.filter label{font-size:12px;color:var(--ink-2);white-space:nowrap}

/* ---------- layout ---------- */
.page{max-width:1440px;margin:0 auto;padding:20px 24px 60px}
.page.narrow{max-width:960px}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2-1{grid-template-columns:2fr 1fr}
.grid.c1-2{grid-template-columns:1fr 2fr}
.stack{display:flex;flex-direction:column;gap:16px}

/* admin shell with side nav */
.shell{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - var(--appbar-h))}
.sidenav{background:var(--surface);border-inline-end:1px solid var(--line);padding:14px 10px;position:sticky;top:var(--appbar-h);height:calc(100vh - var(--appbar-h));overflow:auto}
.sidenav .group{font-size:11px;color:var(--ink-3);font-weight:600;padding:12px 10px 4px;letter-spacing:.02em}
.sidenav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);color:var(--ink-2);font-weight:500}
.sidenav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.sidenav a.active{background:var(--brand-tint);color:var(--brand)}
.sidenav a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.main{min-width:0}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.card.flush{padding:0;overflow:hidden}
.card.flush > .card-head{padding:12px 16px}
.card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.card.flush > .card-head{margin-bottom:0;border-bottom:1px solid var(--line-2)}
.card-head h2{font-size:14px}
.card-head p{font-size:12px;color:var(--ink-3)}
.card-head .tools{margin-inline-start:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.card-foot{padding:10px 16px;border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-3)}
.note{font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 12px}
.note.warn{background:var(--warn-tint);border-color:#F3D9BF;color:var(--warn)}
.empty{padding:28px 16px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;min-width:0}
.kpi .k{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .v{font-size:21px;font-weight:600;margin-top:4px;letter-spacing:-.01em}
.kpi .s{font-size:12px;color:var(--ink-3);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.delta{font-size:11.5px;font-weight:600;padding:0 6px;border-radius:10px;line-height:18px}
.delta.up{color:var(--pos);background:var(--pos-tint)} .delta.down{color:var(--neg);background:var(--neg-tint)} .delta.flat{color:var(--ink-3);background:var(--surface-2)}

/* ---------- tables ---------- */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.tbl-wrap.tall{max-height:calc(100vh - var(--appbar-h) - var(--toolbar-h) - 120px)}
.card.flush .tbl-wrap{border:0;border-radius:0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;min-width:560px}
.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--line-2);text-align:right;vertical-align:middle;white-space:nowrap}
.tbl th{position:sticky;top:0;z-index:2;background:var(--surface-2);color:var(--ink);font-weight:600;font-size:12px;border-bottom:1px solid var(--line)}
.tbl th.num,.tbl td.num{text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
.tbl th.num{text-align:left;direction:rtl}
.tbl th.c,.tbl td.c{text-align:center}
.tbl tbody tr{height:36px}
.tbl tbody tr:hover td{background:var(--sel)}
.tbl tr.tr-group td{background:var(--surface-2);font-weight:600}
.tbl tr.tr-cap td{background:var(--brand-tint);color:var(--brand-2);font-weight:600;font-size:12px;padding-block:5px}
.tbl tr.tr-sub td{color:var(--ink-2)}
.tbl tr.tr-sub td:first-child{padding-inline-start:28px}
.tbl tr.tr-sub2 td{color:var(--ink-2);font-size:12.5px}
.tbl tr.tr-sub2 td:first-child{padding-inline-start:44px}
.tbl tr.tr-total td{font-weight:600;border-top:2px solid var(--line);background:var(--surface)}
.tbl tr.tr-total.emph td{background:var(--brand-tint);color:var(--brand-2)}
.tbl tr.tr-total.emph td.neg,.tbl tr.tr-net td.neg{color:var(--neg)}
.tbl tr.tr-net td{font-weight:700;border-top:2px solid var(--ink-2);border-bottom:3px double var(--ink-2)}
.tbl td.neg{color:var(--neg)}
.tbl .dash{color:var(--ink-3)}
.tbl td.name{white-space:normal;min-width:180px}
.tbl th.col-total,.tbl td.col-total{background:var(--surface-2);font-weight:600;border-inline-start:1px solid var(--line)}
.tbl tr.clickable{cursor:pointer}
.tbl .actions{display:flex;gap:6px;justify-content:flex-end}
.tbl-count{font-size:12px;color:var(--ink-3);padding:8px 12px}
.toggle{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);width:18px;height:18px;border-radius:4px;font-size:12px;line-height:1;display:inline-grid;place-items:center;cursor:pointer;margin-inline-end:6px;vertical-align:middle}
.toggle:hover{border-color:var(--ink-3);color:var(--ink)}
.toggle.ph{visibility:hidden}
.code{font-size:11px;color:var(--ink-3);direction:ltr;unicode-bidi:isolate;display:inline-block;min-width:44px;margin-inline-start:6px}
.share{display:inline-block;height:6px;border-radius:3px;background:var(--brand);vertical-align:middle;margin-inline-end:6px}
.bar-cell{display:flex;align-items:center;gap:8px;direction:ltr;justify-content:flex-start}
.bar-cell i{display:block;height:8px;border-radius:2px;background:var(--brand);flex:none}
.bar-cell i.neg{background:var(--neg)}

/* editable grid */
.grid-input{width:120px;padding:5px 8px;border:1px solid transparent;border-radius:4px;background:transparent;text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
.grid-input:hover{border-color:var(--line)}
.grid-input:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:var(--focus)}
.grid-input.dirty{background:var(--warn-tint)}
.grid-input.saved{background:var(--pos-tint)}
.grid-input.err{border-color:var(--neg);background:var(--neg-tint)}

/* ---------- controls ---------- */
.btn{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 12px;border-radius:var(--r);font-weight:500;cursor:pointer;line-height:1.4;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:#C9D0D8}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn:disabled{opacity:.55;cursor:default}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn.danger{color:var(--neg);border-color:#F1C4BE}
.btn.danger:hover{background:var(--neg-tint)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:3px 9px;font-size:12px}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.icon{padding:6px;width:30px;height:30px;justify-content:center}
.input,.select,textarea.input{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:6px 10px;min-height:32px;width:100%}
.input:focus,.select:focus,textarea.input:focus{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.input.num{text-align:left;direction:ltr}
.select{appearance:none;padding-inline-end:28px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:left 9px center;cursor:pointer}
.select.sm,.input.sm{min-height:28px;padding:3px 8px;font-size:12.5px}
.select.sm{padding-inline-end:26px}
.select.inline{width:auto;min-width:130px}
textarea.input{min-height:120px;resize:vertical;line-height:1.5}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:12px;color:var(--ink-2);font-weight:500}
.field .hint{font-size:11.5px;color:var(--ink-3)}
.field .err{font-size:11.5px;color:var(--neg)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px}
.form-grid .span2{grid-column:span 2}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:2px;gap:2px}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);padding:4px 11px;border-radius:4px;font-weight:500;cursor:pointer;font-size:12.5px;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--brand-tint);color:var(--brand)}
.seg button:focus-visible{outline:none;box-shadow:var(--focus)}
.badge{display:inline-block;font-size:11.5px;font-weight:500;padding:1px 8px;border-radius:10px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2);white-space:nowrap}
.badge.ok{background:var(--pos-tint);color:var(--pos);border-color:#CBE6D5}
.badge.warn{background:var(--warn-tint);color:var(--warn);border-color:#F3D9BF}
.badge.bad{background:var(--neg-tint);color:var(--neg);border-color:#F1C4BE}
.badge.brand{background:var(--brand-tint);color:var(--brand);border-color:var(--brand-line)}
.search{position:relative}
.search .input{padding-inline-start:30px}
.search svg{position:absolute;inset-inline-start:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{appearance:none;border:0;background:transparent;padding:9px 14px;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;flex:none}
.tabs button[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.crumbs{font-size:12.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--ink-2)}

/* ---------- modal / toast ---------- */
.modal-back{position:fixed;inset:0;background:rgba(31,41,51,.45);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.modal{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:640px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.2)}
.modal.wide{max-width:920px}
.modal-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.modal-head h2{font-size:15px}
.modal-head .close{margin-inline-start:auto}
.modal-body{padding:18px}
.modal-foot{display:flex;gap:8px;justify-content:flex-start;padding:12px 18px;border-top:1px solid var(--line-2);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.toast-host{position:fixed;bottom:20px;inset-inline-start:20px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--toast-bg);color:#fff;padding:10px 14px;border-radius:var(--r);font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);min-width:220px;max-width:360px}
.toast.ok{border-inline-start:3px solid var(--pos)} .toast.err{border-inline-start:3px solid var(--neg)}

/* ---------- charts ---------- */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--font);font-size:11px;fill:var(--ink-2)}
.chart text.v{font-size:11px;font-weight:600;fill:var(--ink)}
.chart .grid{stroke:var(--line-2);stroke-width:1}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .bar{fill:var(--brand)} .chart .bar.b2{fill:var(--bar-2)} .chart .bar.b3{fill:var(--bar-3)}
.chart .bar.negv{fill:var(--neg)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-inline-end:6px;vertical-align:-1px;background:var(--brand)}
.legend i.b2{background:var(--bar-2)} .legend i.b3{background:var(--bar-3)}
#tip{position:fixed;z-index:70;pointer-events:none;opacity:0;transition:opacity .08s;background:var(--tip-bg);color:#fff;border-radius:6px;padding:7px 10px;font-size:12px;line-height:1.5;max-width:280px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#tip .tt{font-weight:600;margin-bottom:2px}
#tip .tr{display:flex;justify-content:space-between;gap:14px;color:#D5DBE1}
#tip .tr b{color:#fff;font-weight:600;direction:ltr}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.login .brand{justify-content:center;margin-bottom:18px}
.login h1{text-align:center;font-size:16px;margin-bottom:18px}

/* ---------- responsive / print ---------- */
@media (max-width:1280px){ .toolbar .filter label{display:none} }
@media (max-width:1180px){ .kpis{grid-template-columns:repeat(3,1fr)} .grid.c3,.grid.c2{grid-template-columns:1fr} .toolbar{position:static} }
@media (max-width:1024px){ .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr} .sidenav{position:static;height:auto;display:flex;gap:4px;overflow-x:auto;padding:8px 12px;border-inline-end:0;border-bottom:1px solid var(--line);scrollbar-width:none} .sidenav::-webkit-scrollbar{display:none} .sidenav .group{display:none} .sidenav a{white-space:nowrap;padding:6px 8px} }
@media (max-width:860px){ .grid.c2,.grid.c3,.grid.c2-1,.grid.c1-2{grid-template-columns:1fr} .appbar{padding:0 14px;gap:12px} .toolbar,.page{padding-inline:14px} .form-grid{grid-template-columns:1fr} .form-grid .span2{grid-column:auto} .brand .name small{display:none} }
@media (max-width:640px){ .kpis{grid-template-columns:1fr 1fr} .kpi .v{font-size:18px} .appbar .tools .hide-sm{display:none} .tbl{min-width:0} .tbl td.name{min-width:140px} }
@media print{
  :root[data-theme="dark"]{--page:#fff;--surface:#fff;--surface-2:#F8F9FB;--line:#DFE3E8;--line-2:#EDF0F3;--ink:#1F2933;--ink-2:#5F6B7A;--ink-3:#8B95A5;--brand:#1F7A70;--brand-2:#17635B;--brand-tint:#E6F2F0;--pos:#1E7B4F;--neg:#B42318}
  @page{size:A4 landscape;margin:12mm}
  .appbar,.sidenav,.btn,.toast-host,#tip,.toggle,.toolbar .filters,.toolbar .seg,.toolbar select{display:none!important}
  .toolbar{display:block!important;position:static;border:0;padding:0 0 8px}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page{max-width:none;padding:0}
  .card,.tbl-wrap,.kpi{border-color:#BBB} .card{break-inside:avoid}
  .tbl-wrap{overflow:visible!important;border:0;max-height:none!important}
  .tbl{min-width:0;width:100%;font-size:11px} .tbl th,.tbl td{padding:4px 6px;position:static!important}
}

/* =====================================================================
   index.html (dashboard.js) — page-specific additions
   ===================================================================== */
/* charts.js positions text with LTR anchors (start = left); do not inherit the document's RTL direction */
.chart{direction:ltr}
/* sticky first column for wide pivot tables (RTL: the right-most column) */
.tbl-sticky th:first-child,.tbl-sticky td:first-child{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;border-inline-end:1px solid var(--line-2)}
.tbl-sticky th:first-child{z-index:3}
.tbl tr.tr-margin td{color:var(--ink-3);font-size:12px;border-bottom:0}
.tbl td.name .code{margin-inline-start:0;margin-inline-end:6px}
.card-head .search{width:220px;max-width:100%}
.chart-narrow{max-width:760px}
.toolbar .filters.right{margin-inline-start:auto}
.note b{font-weight:600}
@media (max-width:640px){
  .appbar{flex-wrap:wrap;height:auto;padding-block:6px;row-gap:0}
  .appbar .nav{order:3;flex-basis:100%;height:40px;margin-inline:-14px;padding-inline:8px}
  .toolbar{position:static}
  .card-head .search{width:100%}
}

/* ---------- admin.html page-specific (assets/admin.js) ---------- */
.grid-tbl td.cell{padding:2px 6px}
.grid-tbl .grid-input{width:132px}
.grid-tbl tr.tr-add td{padding:4px 12px 8px}
.grid-tbl tfoot td{position:sticky;bottom:0;z-index:1}
.rows-tbl td{padding:3px 6px}
.rows-tbl td.ord{width:44px;color:var(--ink-3);text-align:center}
.rows-tbl .actions .btn.icon{width:26px;height:26px;padding:3px}
.form-err{color:var(--neg);font-size:12.5px}
.login .field .err{display:block}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0;font-size:12.5px}
.kv dt{color:var(--ink-2)} .kv dd{margin:0;font-weight:600;text-align:right}
.sidenav a span{white-space:nowrap}
.tbl td .actions .btn.sm{padding:2px 8px}
/* the supplied logo is white on transparent: give it a brand backing wherever the brand block is used */
.brand img{background:var(--brand-bg);border-radius:4px;padding:4px 8px;height:34px}

/* ---------- simplified statement form ---------- */
.stmt-form td.name{white-space:normal}
.stmt-form tr.line td{padding-block:4px}
.stmt-form tr.line .input.sm{min-height:30px}
.stmt-form tr.fixed td.name{font-weight:500}
.stmt-form tr.add td{padding-block:2px;border-bottom:1px solid var(--line-2)}
.stmt-form tr.tr-cap td{padding-block:7px;font-size:13px}
.stmt-form tr[data-total] td.num{font-weight:600}
.stmt-form .input.num{text-align:left}

/* ---------- statement form (admin) ---------- */
.stmt-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.stmt-summary{position:sticky;top:calc(var(--appbar-h) + 12px)}
.sum-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:13px;color:var(--ink-2)}
.sum-row b{font-size:14px;color:var(--ink)}
.sum-row.emph{color:var(--brand-2);font-weight:600} .sum-row.emph b{color:var(--brand-2)}
.sum-row.net{border-top:2px solid var(--ink-2);border-bottom:3px double var(--ink-2);font-weight:700;color:var(--ink);font-size:14px} .sum-row.net b{font-size:17px}
.sum-row b.neg{color:var(--neg)}
.stmt-head{background:var(--brand-tint)} .stmt-head h2{color:var(--brand-2)}
.stmt-sub-label{font-size:12px;color:var(--ink-2)} .stmt-sub{font-size:15px;color:var(--brand-2)} .stmt-sub.neg{color:var(--neg)}
.stmt-form .name-in{border-color:transparent;background:transparent;max-width:420px;padding-inline-start:0}
.stmt-form .name-in:hover{border-color:var(--line)} .stmt-form .name-in:focus{border-color:var(--brand);background:var(--surface)}
.stmt-form .amt-in{font-size:15px;font-weight:600;text-align:left;direction:ltr;min-height:34px;max-width:220px;font-variant-numeric:tabular-nums}
.stmt-form tr.fixed td.name{font-weight:600}
@media (max-width:1024px){ .stmt-layout{grid-template-columns:1fr} .stmt-summary{position:static} }