/* ============================================================================
   SOHOULA (سهولة) — UI Design System  (Phase 001.5 + UI batches)
   Arabic-first RTL · modern desktop accounting · readable + compact + dense.
   One system for every screen. Do not patch per-screen; extend tokens here.
   Sections: 1 Tokens · 2 Base · 3 Utilities · 4 Buttons · 5 Forms · 6 Tables
             7 Badges/Chips · 8 Panels/Cards · 9 Shell · 10 Tabs · 11 Screens
             12 Documents · 13 Dialogs · 14 Auth · 15 States · 16 Responsive
   ============================================================================ */

/* ---- 1. Design tokens --------------------------------------------------- */
:root{
  /* brand */
  --accent:#0f766e;            /* teal */
  --accent-600:#0c6a62;
  --accent-700:#115e59;
  --accent-800:#0c4a45;
  --accent-50:#e8f3f1;
  --accent-100:#d2e8e5;

  /* neutrals (higher-contrast ink than Phase 001) */
  --bg:#eceff3;                /* app background */
  --surface:#ffffff;
  --surface-2:#f6f8fa;         /* zebra / subtle fill */
  --surface-3:#eef2f5;
  --ink:#16222e;               /* primary text */
  --ink-2:#44535f;             /* secondary text */
  --muted:#6a7785;             /* tertiary / labels */
  --border:#dce2e8;
  --border-2:#c6cfd7;
  --sel:#e0f0ee;               /* selection tint (teal) */
  --sel-2:#d0e8e5;

  /* status */
  --danger:#c02a2a;  --danger-bg:#fbeaea;  --danger-bd:#ecc2c2;
  --ok:#157347;      --ok-bg:#e6f4ea;       --ok-bd:#bfe3c9;
  --warn:#b45309;    --warn-bg:#fdf3e6;     --warn-bd:#efdcb0;
  --info:#1d6fa5;    --info-bg:#e7f1f8;     --info-bd:#c4dcec;

  /* typography */
  --font:"Cairo","Tajawal",system-ui,"Segoe UI",sans-serif;
  --fs:14.5px;                 /* base — up from 13.5 for long desktop sessions */
  --fs-sm:13px;
  --fs-xs:12px;
  --fs-lg:16px;
  --lh:1.55;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* radii & elevation */
  --r-sm:5px; --r:8px; --r-lg:12px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,34,46,.06),0 1px 1px rgba(16,34,46,.04);
  --sh-2:0 4px 12px rgba(16,34,46,.10);
  --sh-3:0 14px 38px rgba(16,34,46,.20);

  /* control sizing */
  --h-ctl:36px;                /* fields & buttons */
  --h-ctl-sm:30px;
  --h-row:34px;                /* grid row */

  /* layout chrome */
  --topbar-h:48px;
  --sidebar-w:256px;
  --sidebar-w-collapsed:60px;
  --tabbar-h:40px;
}

/* ---- 2. Base ------------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--font); font-size:var(--fs); line-height:var(--lh);
  color:var(--ink); background:var(--bg); direction:rtl;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--ink);line-height:1.3}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--sel-2)}

/* numbers always read LTR with grouping, even inside RTL cells */
.num,.mono,.docno,.money{direction:ltr;unicode-bidi:plaintext;font-variant-numeric:tabular-nums}

/* scrollbars (subtle) */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c2ccd4;border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#a9b5bf;background-clip:content-box}

/* ---- 3. Utilities ------------------------------------------------------- */
.muted{color:var(--muted)}
.ink-2{color:var(--ink-2)}
.ok{color:var(--ok)} .danger{color:var(--danger)} .warn{color:var(--warn)}
.pos{color:var(--ok)} .neg{color:var(--danger)}
.center{text-align:center}
.row{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.col{display:flex;flex-direction:column;gap:var(--s2)}
.spread{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.grow{flex:1}
.sp{flex:1}
.nowrap{white-space:nowrap}

/* ---- 4. Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:var(--h-ctl);padding:0 15px;border:1px solid var(--border-2);
  background:var(--surface);color:var(--ink);border-radius:var(--r-sm);
  font-family:inherit;font-size:var(--fs);font-weight:600;line-height:1;cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s;white-space:nowrap;
}
.btn:hover{background:var(--surface-3)}
.btn:active{background:var(--border)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--sh-1)}
.btn.primary:hover{background:var(--accent-600)}
.btn.primary:active{background:var(--accent-700)}
.btn.danger{color:var(--danger);border-color:var(--danger-bd)}
.btn.danger:hover{background:var(--danger-bg)}
.btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger.solid:hover{background:#a82424}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--surface-3)}
.btn.sm{height:var(--h-ctl-sm);padding:0 10px;font-size:var(--fs-sm)}
.btn.icon{width:var(--h-ctl);padding:0}
.btn.icon.sm{width:var(--h-ctl-sm)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- 5. Forms ----------------------------------------------------------- */
label{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:var(--s1);font-weight:600}
.field{margin-bottom:var(--s3)}
input,select,textarea,.inp{
  width:100%;height:var(--h-ctl);padding:0 10px;border:1px solid var(--border-2);
  border-radius:var(--r-sm);font-family:inherit;font-size:var(--fs);
  background:var(--surface);color:var(--ink);transition:border-color .12s,box-shadow .12s;
}
textarea{height:auto;padding:8px 10px;line-height:var(--lh)}
select{cursor:pointer}
input:hover,select:hover,textarea:hover{border-color:#aab6c0}
input:focus,select:focus,textarea:focus,.inp:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-50);
}
input[readonly]{background:var(--surface-3);color:var(--muted)}
input[type=number]{text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
input.num,.num input,td.num input{text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
input::placeholder{color:#9aa6b0}

/* form layouts */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4)}
.form-grid label{margin-bottom:var(--s1)}
.form-grid .full{grid-column:1 / -1}

/* ---- 6. Tables / data grids -------------------------------------------- */
table.grid{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  font-size:var(--fs-sm);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
table.grid th{
  background:var(--surface-3);color:var(--ink-2);text-align:right;
  padding:9px 11px;font-weight:700;font-size:var(--fs-xs);letter-spacing:.2px;
  white-space:nowrap;position:sticky;top:0;z-index:1;border-bottom:1px solid var(--border-2);
}
table.grid td{padding:0 11px;height:var(--h-row);border-bottom:1px solid var(--border);
  white-space:nowrap;color:var(--ink);vertical-align:middle}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid tbody tr:nth-child(even){background:var(--surface-2)}
table.grid tbody tr:hover{background:var(--sel)}
table.grid tbody tr.sel{background:var(--sel-2);box-shadow:inset 3px 0 0 var(--accent)}
table.grid td.num,table.grid th.num{text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
table.grid[data-dense] td{height:30px}
/* inputs sitting inside a grid cell stay flush and compact */
table.grid td .inp,table.grid td input,table.grid td select{height:30px;border-color:var(--border);background:var(--surface)}
table.grid td .inp:focus,table.grid td input:focus,table.grid td select:focus{border-color:var(--accent)}

/* ---- 7. Badges / chips -------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;background:var(--surface-3);color:var(--ink-2);border:1px solid var(--border)}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.badge.danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.badge.info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.badge.accent{background:var(--accent-50);color:var(--accent-700);border-color:var(--accent-100)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ---- 8. Panels / cards -------------------------------------------------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4);box-shadow:var(--sh-1)}
.panel-title,.panel h3{font-weight:700;color:var(--ink);margin-bottom:var(--s3)}
.toolbar{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}

/* ---- 9. Application shell ---------------------------------------------- */
.shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--topbar-h) 1fr;height:100vh;height:100dvh;overflow:hidden}

.topbar{display:flex;align-items:center;gap:var(--s4);
  background:linear-gradient(100deg,var(--accent-800),var(--accent-600));
  color:#fff;padding:0 var(--s4);box-shadow:var(--sh-2);z-index:20}
.topbar .burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--r-sm);cursor:pointer;color:#eafaf7;background:rgba(255,255,255,.08);border:none;font-size:16px}
.topbar .burger:hover{background:rgba(255,255,255,.18)}
.topbar .brand{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:var(--fs-lg);letter-spacing:.2px}
.topbar .brand small{font-weight:500;opacity:.8;font-size:var(--fs-xs)}
.topbar .who{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);opacity:.97}
.topbar .who .co{opacity:.85}
.topbar .who .co-switch{background:rgba(255,255,255,.14);color:inherit;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);padding:3px 8px;font:inherit;max-width:220px}
.topbar .who .co-switch option{color:var(--ink)}
.topbar .who .avatar{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.topbar .btn.on-accent{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.topbar .btn.on-accent:hover{background:rgba(255,255,255,.22)}

.body{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);overflow:hidden;min-width:0}

.sidenav{background:var(--surface);border-inline-end:1px solid var(--border);overflow:auto;padding:var(--s2) 0;display:flex;flex-direction:column}
.sidenav .grouphdr{padding:12px var(--s4) 4px;font-size:10.5px;font-weight:800;color:var(--muted);letter-spacing:.6px}
.navitem{display:flex;align-items:center;gap:11px;margin:1px var(--s2);padding:8px 12px;border-radius:var(--r-sm);
  width:calc(100% - 2 * var(--s2));border:none;background:transparent;text-align:start;font-family:inherit;
  cursor:pointer;color:var(--ink-2);font-size:var(--fs);font-weight:600;transition:background .1s,color .1s;position:relative}
.navitem .ico{color:var(--muted);flex:0 0 auto}
.navitem:hover{background:var(--surface-3);color:var(--ink)}
.navitem:hover .ico{color:var(--ink-2)}
.navitem.active{background:var(--accent-50);color:var(--accent-700)}
.navitem.active .ico{color:var(--accent)}
.navitem.active::before{content:"";position:absolute;inset-inline-start:-8px;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--accent)}
.navitem:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.navitem .lbl{white-space:normal;line-height:1.35;min-width:0}      /* expanded: an Arabic label is never clipped — it wraps */

/* collapsed rail: icons only, labels/headers hidden — desktop only; below 861px the navigation is a drawer (section 21) */
@media (min-width:861px){
.body.collapsed .sidenav .grouphdr{height:10px;padding:6px 0;color:transparent;overflow:hidden}
.body.collapsed .navitem{justify-content:center;padding:9px 0;margin:1px 8px;width:calc(100% - 16px)}
.body.collapsed .navitem .lbl{display:none}
.body.collapsed .modhdr{justify-content:center;padding:8px 0}
.body.collapsed .modhdr .lbl{display:none}
.body.collapsed{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
}

/* module-level navigation (UI-01): header of the module in use, the way back to the launcher, module rows at launcher level */
.modhdr{display:flex;align-items:center;gap:10px;margin:2px var(--s2) 4px;padding:8px 10px;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--border);font-weight:800;color:var(--ink);font-size:var(--fs)}
.modhdr .lbl{line-height:1.3}
.navitem.back{color:var(--muted);font-size:var(--fs-sm);padding-block:6px}
.navitem.back .ico{transform:none}
.navitem.module{padding-block:7px;color:var(--ink)}
.navitem.new .ico{color:var(--accent)}
.modico{flex:0 0 auto;display:block}
.topbar .brand{background:none;border:none;color:inherit;font-family:inherit;cursor:pointer;padding:4px 6px;border-radius:var(--r-sm)}
.topbar .brand:hover{background:rgba(255,255,255,.12)}
.topbar .brand:focus-visible,.topbar .burger:focus-visible,.topbar .btn:focus-visible{outline:2px solid #fff;outline-offset:1px}
.topbar .homebtn.active{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.5)}

/* ---- 10. Workspace tabs (single-row scrollable strip, never wraps) ----- */
.workspace{display:grid;grid-template-rows:var(--tabbar-h) 1fr;overflow:hidden;background:var(--bg);min-width:0}
.tabstrip{position:relative;display:flex;align-items:stretch;min-width:0;background:var(--surface-3);
  border-bottom:1px solid var(--border-2);padding-inline-end:4px}
.tabbar{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;padding:5px 6px 0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth}
.tabbar::-webkit-scrollbar{display:none}
.tabnav{display:none;align-items:center;justify-content:center;width:26px;flex:0 0 auto;border:none;background:transparent;
  color:var(--ink-2);cursor:pointer}
.tabnav:hover{background:var(--border);color:var(--ink)}
.tabstrip.overflowing .tabnav{display:inline-flex}
.tabstrip.overflowing .tabbar{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.tabmenu-btn{display:inline-flex;align-items:center;gap:4px;margin:6px 2px 5px;padding:0 8px;border:1px solid var(--border-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink-2);font-family:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer;flex:0 0 auto}
.tabmenu-btn:hover,.tabmenu-btn.open{border-color:var(--accent);color:var(--accent-700)}
.tabmenu-btn .count{min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
.tabmenu-backdrop{position:fixed;inset:0;z-index:40}
.tabmenu{position:absolute;inset-inline-end:4px;top:calc(100% + 2px);z-index:41;width:300px;max-height:60vh;overflow:auto;
  background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--sh-2);padding:4px}
.tabmenu-head{font-size:var(--fs-xs);font-weight:800;color:var(--muted);padding:6px 10px}
.tabmenu-item{display:flex;align-items:center;gap:8px;width:100%;border:none;background:transparent;text-align:start;
  font-family:inherit;font-size:var(--fs-sm);color:var(--ink-2);padding:7px 10px;border-radius:var(--r-sm);cursor:pointer}
.tabmenu-item .ttl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabmenu-item:hover{background:var(--surface-3);color:var(--ink)}
.tabmenu-item.active{background:var(--accent-50);color:var(--accent-700);font-weight:700}
.badge.sm{padding:0 7px;font-size:10.5px}

.tab{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;
  border-bottom:none;border-radius:var(--r-sm) var(--r-sm) 0 0;padding:0 8px 0 6px;min-width:96px;max-width:200px;flex:0 0 auto;
  height:34px;cursor:pointer;color:var(--ink-2);font-size:var(--fs-sm);font-weight:600;transition:background .1s,color .1s;user-select:none}
.tab .tico{color:var(--muted);flex:0 0 auto}
.tab:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.tab.active{background:var(--surface);border-color:var(--border-2);color:var(--ink);
  box-shadow:inset 0 2px 0 var(--accent);font-weight:700;position:relative}
.tab.active::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:1px;background:var(--surface)}
.tab.active .tico{color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tab .ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.tab .x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;
  background:transparent;color:var(--muted);cursor:pointer;border-radius:4px;flex:0 0 auto;padding:0}
.tab .x:hover{background:var(--surface-3);color:var(--ink)}
/* dirty = filled circle in place of × (shape, not just color); hover reveals × to close */
.tab .x .dirty-mark{display:none;width:8px;height:8px;border-radius:50%;background:var(--accent-700)}
.tab.dirty .x .dirty-mark{display:block}
.tab.dirty .x .ico{display:none}
.tab.dirty .x:hover .dirty-mark{display:none}
.tab.dirty .x:hover .ico{display:block}
.tab.dirty .ttl{font-style:italic}
.tabhost{overflow:auto;padding:var(--s4)}

/* ---- 11. Screen scaffold ------------------------------------------------ */
.screen{max-width:1320px;margin:0 auto}
.screen-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.screen-head h2{font-size:19px}
.screen-head .sub{color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.screen-toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s2) var(--s3);box-shadow:var(--sh-1)}
.searchbar{position:relative;flex:0 1 300px}
.searchbar input{padding-inline-start:34px}
.searchbar .mag{position:absolute;inset-inline-start:10px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}

/* dashboard cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3)}
.statcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4) var(--s4) var(--s3);
  box-shadow:var(--sh-1);position:relative;overflow:hidden}
.statcard::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--accent)}
.statcard .ic{color:var(--accent);opacity:.85}
.statcard .n{font-size:30px;font-weight:800;color:var(--ink);line-height:1.1;direction:ltr;text-align:right;margin-top:4px}
.statcard .l{color:var(--muted);font-size:var(--fs-sm);font-weight:600;margin-top:2px}

/* master/detail split */
.split{display:grid;grid-template-columns:1fr 340px;gap:var(--s4);align-items:start}
.list-pane h3,.card-pane h3{font-size:var(--fs);margin-bottom:var(--s2)}

/* account quick card */
.card-pane .qcard{position:static;width:auto;box-shadow:var(--sh-1)}
.qcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4)}
.qcard-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  border-bottom:1px solid var(--border);padding-bottom:var(--s3);margin-bottom:var(--s3)}
.qcard-name{font-weight:800;font-size:var(--fs-lg);color:var(--ink)}
.qcard-row{display:flex;justify-content:space-between;gap:var(--s3);padding:5px 0;font-size:var(--fs-sm)}
.qcard-row span{color:var(--muted)}
.qcard-row b{font-weight:700}
.qcard-row.big{border-top:1px solid var(--border);margin-top:var(--s2);padding-top:var(--s3);font-size:var(--fs-lg)}

/* ---- 12. Documents (sales invoice = reference screen) ------------------ */
.doc{max-width:1320px;margin:0 auto}
.doc-toolbar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:6px var(--s3);box-shadow:var(--sh-1);margin-bottom:var(--s2)}
.doc-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);font-weight:800}
.doc-title .accent{color:var(--accent)}
.doc-title .docno{font-size:var(--fs);color:var(--accent-700);font-weight:800}
/* unsaved document: no business number exists yet (allocated server-side on first save) */
.doc-title .docno-new{font-size:var(--fs-xs);font-weight:700;color:var(--muted);background:var(--surface-3);
  border:1px dashed var(--border-2);border-radius:var(--r-pill);padding:1px 10px}
.doc-actions{display:flex;gap:var(--s2);margin-inline-start:auto;flex-wrap:wrap}

.doc-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s2) var(--s3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s2) var(--s3) var(--s3);box-shadow:var(--sh-1);margin-bottom:var(--s2)}
.doc-head label{margin-bottom:0}
.doc-head label > .inp{margin-top:3px}
.hint{font-weight:500;color:var(--muted);font-size:11px}

/* line grid — accounting data-entry grid: cells ARE the editors */
.lines-wrap{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--sh-1);overflow-x:auto}
table.doc-lines{width:100%;min-width:860px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--fs-sm)}
.doc-lines col.c-no{width:40px} .doc-lines col.c-wh{width:17%} .doc-lines col.c-unit{width:76px}
.doc-lines col.c-qty{width:92px} .doc-lines col.c-price{width:112px} .doc-lines col.c-disc{width:78px}
.doc-lines col.c-total{width:124px} .doc-lines col.c-act{width:40px}
.doc-lines th{position:sticky;top:0;z-index:1;background:var(--surface-3);color:var(--ink-2);text-align:right;
  height:32px;padding:0 10px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.2px;white-space:nowrap;
  border-bottom:2px solid var(--border-2);border-inline-start:1px solid var(--border)}
.doc-lines th:first-child{border-inline-start:none;text-align:center}
.doc-lines th small{font-weight:600;color:var(--muted);font-size:10.5px;margin-inline-start:4px}
.doc-lines th.num{text-align:left}
.doc-lines td{height:36px;padding:0;border-bottom:1px solid var(--border);border-inline-start:1px solid var(--border);
  vertical-align:middle;white-space:nowrap;overflow:hidden;background:var(--surface)}
.doc-lines td:first-child{border-inline-start:none}
.doc-lines tbody tr:hover td{background:#fafcfd}
/* active row = the row being edited */
.doc-lines tbody tr:focus-within td{background:var(--sel)}
.doc-lines tbody tr:focus-within td.c-no{box-shadow:inset -3px 0 0 var(--accent);color:var(--accent-700);font-weight:800}
.doc-lines td.c-no{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;background:var(--surface-2)}
.doc-lines td.c-unit{padding:0 10px;color:var(--ink-2);font-size:var(--fs-xs);background:var(--surface-2)}
.doc-lines td.line-total{padding:0 10px;font-weight:800;color:var(--ink);text-align:left;direction:ltr;
  font-variant-numeric:tabular-nums;background:var(--surface-2)}
.doc-lines td.c-act{text-align:center;background:var(--surface-2)}

/* cell editor */
.ce{display:block;width:100%;height:36px;border:none;border-radius:0;background:transparent;color:var(--ink);
  padding:0 10px;font-family:inherit;font-size:var(--fs-sm);box-shadow:none;outline:none}
.ce:hover{background:rgba(15,118,110,.04)}
.ce:focus{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent);border-color:transparent}
select.ce{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:28px;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a7785' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 9px center}
input.ce.num{text-align:left;direction:ltr;font-variant-numeric:tabular-nums;font-weight:600}
input.ce::-webkit-outer-spin-button,input.ce::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.ce[type=number]{-moz-appearance:textfield;appearance:textfield}
/* per-line warehouse that differs from the header default: bold + accent edge (not color only) */
.doc-lines td.wh-override{box-shadow:inset -3px 0 0 var(--accent-100)}
.doc-lines td.wh-override .ce{font-weight:800;color:var(--accent-700)}
/* validation */
.doc-lines td.invalid .ce{background:var(--danger-bg);box-shadow:inset 0 0 0 1.5px var(--danger);color:var(--danger)}
.row-err{display:inline-flex;color:var(--danger);cursor:help}
.doc-lines tr.has-error td.c-no{background:var(--danger-bg)}
/* row delete — quiet until the row is hovered/active */
.row-del{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);opacity:.45;cursor:pointer;padding:0}
.doc-lines tr:hover .row-del,.doc-lines tr:focus-within .row-del{opacity:1}
.row-del:hover{background:var(--danger-bg);color:var(--danger)}
/* posted / read-only */
.doc-lines.locked .ce{color:var(--ink);cursor:default;background:transparent;opacity:1;-webkit-text-fill-color:var(--ink)}
.doc-lines.locked select.ce{background-image:none}
.doc-lines.locked tbody tr:hover td{background:var(--surface)}
/* footer: add line + counters */
.doc-lines tfoot td{height:auto;border-bottom:none;border-inline-start:none;background:var(--surface-2);padding:0}
.lines-foot{display:flex;align-items:center;gap:var(--s3);padding:5px 8px;flex-wrap:wrap}
.add-line-row{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px dashed var(--border-2);
  border-radius:var(--r-sm);background:var(--surface);color:var(--accent-700);font-family:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer}
.add-line-row:hover{border-color:var(--accent);background:var(--accent-50)}
.add-line-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kbd-hint{color:var(--muted);font-size:11.5px}
kbd{display:inline-block;font-family:inherit;font-size:10.5px;font-weight:700;padding:0 5px;border:1px solid var(--border-2);
  border-bottom-width:2px;border-radius:4px;background:var(--surface);color:var(--ink-2);direction:ltr}
.lines-count{margin-inline-start:auto;color:var(--ink-2);font-size:var(--fs-xs);font-weight:700}

.doc-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);margin-top:var(--s3);flex-wrap:wrap}
.doc-note{flex:1 1 300px}
.doc-note > label{max-width:520px}
.cost-panel{margin-top:var(--s2);max-width:640px}
.section-title{font-size:var(--fs-sm);font-weight:700;margin:var(--s3) 0 var(--s2)}
.grid tr.clickable{cursor:pointer}
.grid tr.clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.entry-bar.adj{grid-template-columns:minmax(220px,1fr) 250px 92px 92px 120px auto}
.entry-bar.xfer{grid-template-columns:minmax(220px,1fr) 130px 100px minmax(190px,260px) auto}
.entry-bar.count{grid-template-columns:minmax(260px,1fr) 92px 120px 130px 110px auto}
.eb-pair{display:flex;gap:4px}
.eb-pair select{min-width:0}
.eb-pair .dir{flex:0 0 92px;font-weight:700}
.eb-pair .dir.inc{color:var(--ok)} .eb-pair .dir.dec{color:var(--danger)}
.diff-plus{color:var(--ok);font-weight:700} .diff-minus{color:var(--danger);font-weight:700} .diff-zero{color:var(--muted)}
/* signed quantities: no strong character → force LTR so "-4" never renders as "4-" in RTL cells */
.diff-plus,.diff-minus,.diff-zero{direction:ltr;unicode-bidi:isolate}
.doc-head label.invalid .inp{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.res-mark{display:inline-flex;vertical-align:middle;margin-inline-start:4px;color:var(--accent)}
.section-title label.chk input{width:16px;height:16px;margin:0}
.units-grid{min-width:0;width:100%;table-layout:auto}
.units-form label.chk{display:flex;flex-direction:row;align-items:center;gap:8px;align-self:end;font-weight:600}
.units-form label.chk input{width:16px;height:16px;margin:0;flex:none}
.cost-head{font-weight:600;font-size:var(--fs-sm);margin-bottom:4px}
.totals{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s2) var(--s4) var(--s3);box-shadow:var(--sh-1);min-width:300px}
.totrow{display:flex;justify-content:space-between;gap:var(--s4);align-items:center;padding:4px 0;font-size:var(--fs-sm)}
.totrow span{color:var(--muted)}
.totrow b{direction:ltr;font-variant-numeric:tabular-nums;font-weight:700}
.totrow.grand{font-size:20px;color:var(--accent-700);font-weight:800;
  border-top:2px solid var(--border);padding-top:var(--s2);margin-top:var(--s1)}
.totrow.grand span{color:var(--ink)}

/* ---- searchable lookup (LOOKUP-STANDARD.md) --------------------------- */
.lk{position:relative}
.lk-list{position:fixed;z-index:60;max-height:min(320px,50vh);overflow:auto;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--sh-2);padding:3px}
.lk-opt{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--fs-sm);color:var(--ink);min-height:32px}
.lk-opt.active{background:var(--accent-50);box-shadow:inset -3px 0 0 var(--accent)}
.lk-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lk-title mark{background:#fdeeb0;color:inherit;border-radius:2px;padding:0 1px}
.lk-code{flex:0 0 auto;font-size:var(--fs-xs);color:var(--ink-2);background:var(--surface-3);border:1px solid var(--border);
  border-radius:4px;padding:0 6px}
.lk-code.exact{background:var(--ok-bg);border-color:var(--ok-bd);color:var(--ok)}
.lk-meta{flex:0 0 auto;font-size:var(--fs-xs);color:var(--muted)}
.lk-aside{flex:0 0 auto;min-width:64px;text-align:left;font-weight:700;color:var(--ink-2);font-size:var(--fs-xs)}
.lk-state{padding:10px 12px;color:var(--muted);font-size:var(--fs-sm)}
/* pick-and-clear chip: shows the chosen record inside the (empty) field; hidden as soon as the user types */
.lk-chip{position:absolute;inset-block:0;inset-inline-start:10px;inset-inline-end:10px;display:flex;align-items:center;gap:6px;
  pointer-events:none;font-weight:700;color:var(--ink);font-size:var(--fs-sm);overflow:hidden;white-space:nowrap}
.lk-chip .ico{color:var(--ok);flex:0 0 auto}
.lk-chip .t{overflow:hidden;text-overflow:ellipsis}
.lk input:not(:placeholder-shown) ~ .lk-chip{display:none}
.lk-foot{border-top:1px solid var(--border);margin-top:3px;padding:4px 8px 2px;color:var(--muted);font-size:11px}
.doc-head .lk{margin-top:3px}
td.c-item-cell{overflow:visible}
.ce-text{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- rapid-entry bar (KEYBOARD-ENTRY-STANDARD.md) ---------------------- */
.entry-bar{display:grid;grid-template-columns:minmax(220px,1fr) 150px 92px 86px 104px 76px 112px auto;gap:6px;align-items:end;
  background:var(--surface);border:1px solid var(--accent-100);border-inline-start:4px solid var(--accent);
  border-radius:var(--r);padding:6px 10px 8px;box-shadow:var(--sh-1)}
.eb-f{display:flex;flex-direction:column;gap:2px;min-width:0}
.eb-lbl{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--ink-2)}
.eb-item .eb-lbl{color:var(--accent-700)}
.eb-item .inp{border-color:var(--accent);font-weight:600}
.eb-ro{height:var(--h-ctl);display:flex;align-items:center;padding:0 10px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);font-size:var(--fs-sm)}
.eb-total .eb-ro{font-weight:800;color:var(--ink);justify-content:flex-end}
.eb-f.invalid .inp{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.eb-f.override select{font-weight:800;color:var(--accent-700);border-color:var(--accent)}
.eb-add{align-self:end}
.eb-msg{min-height:22px;margin:3px 2px var(--s2);font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.eb-msg.err{color:var(--danger);font-weight:700}
.doc-lines tr.just-added td{animation:flashrow .9s ease-out}
@keyframes flashrow{from{background:var(--ok-bg)}to{background:transparent}}
.add-line-row.secondary{color:var(--ink-2);border-style:dotted}
@media (max-width:1180px){
  .entry-bar{grid-template-columns:minmax(200px,1fr) 140px 86px 80px 96px 70px auto;}
  .entry-bar .eb-total{display:none}
  .entry-bar.adj,.entry-bar.count{grid-template-columns:minmax(200px,1fr) 1fr 1fr auto}
  .entry-bar.xfer{grid-template-columns:minmax(200px,1fr) 120px 96px minmax(170px,220px) auto}
  .entry-bar.xfer .eb-total{display:block}
}
@media (max-width:860px){
  .entry-bar{grid-template-columns:1fr 1fr 1fr}
  .entry-bar .eb-item{grid-column:1 / -1}
  .entry-bar.adj,.entry-bar.count{grid-template-columns:1fr 1fr 1fr}
  .entry-bar.xfer{grid-template-columns:1fr 1fr 1fr}
  .entry-bar.xfer .eb-total{grid-column:1 / 3}
}

/* icons */
.ico{flex:0 0 auto;vertical-align:middle}
.flip-rtl{transform:scaleX(-1)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 13. Dialogs -------------------------------------------------------- */
.modal-bg{position:fixed;inset:0;background:rgba(16,34,46,.5);display:flex;align-items:center;justify-content:center;
  z-index:100;padding:var(--s4);backdrop-filter:blur(1px)}
.modal{background:var(--surface);border-radius:var(--r-lg);padding:var(--s5) var(--s6);width:440px;max-width:96vw;
  box-shadow:var(--sh-3);animation:pop .12s ease-out}
.modal.wide{width:620px}
.modal.units{width:780px}
.modal h3{color:var(--ink);margin-bottom:var(--s2);font-size:var(--fs-lg)}
.modal .modal-msg{color:var(--ink-2);font-size:var(--fs);margin-bottom:var(--s2)}
.modal-actions{display:flex;gap:var(--s2);margin-top:var(--s5)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- 14. Auth / setup --------------------------------------------------- */
.center-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-800),var(--accent));padding:var(--s4)}
.auth-card{width:460px;max-width:96vw;background:var(--surface);border-radius:var(--r-lg);
  padding:var(--s8) var(--s8) var(--s6);box-shadow:var(--sh-3)}
.auth-card h1{font-size:22px;margin-bottom:4px}
.auth-card .sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s5)}

/* ---- 15. States (empty / loading / alerts) ----------------------------- */
.alert{border-radius:var(--r-sm);padding:10px 13px;font-size:var(--fs-sm);margin:0 0 var(--s3);
  display:flex;align-items:center;gap:8px;font-weight:600}
.alert.err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-bd)}
.alert.ok{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-bd)}
.alert:not(.err):not(.ok){background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd)}
.err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-bd);
  border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-sm);margin-bottom:var(--s3);font-weight:600}

.empty{text-align:center;color:var(--muted);padding:40px 20px}
.empty .ic{display:block;margin:0 auto 8px;opacity:.35}
td .empty{padding:24px}

/* ---- 16. Responsive ----------------------------------------------------- */
/* laptops incl. the common 1366×768 — keep vertical chrome tight, content wide */
@media (max-width:1500px){
  .screen,.doc{max-width:100%}
}
@media (max-width:1180px){
  .split{grid-template-columns:1fr 300px}
  .doc-head{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){            /* tablet */
  .split{grid-template-columns:1fr}
  .doc-head{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){            /* small / phone — must not collapse */
  .doc-head,.form-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .doc-foot{flex-direction:column}
  .totals{min-width:0;width:100%}
  .tabhost{padding:var(--s3)}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 002G treasury ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s2);margin:0 0 var(--s3)}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:2px}
.kpi > span{color:var(--muted);font-size:12px}
.kpi > b{font-size:17px}
.kpi .badge{align-self:flex-start;margin-top:2px}
.screen-toolbar label.inline{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:500}
.screen-toolbar label.inline .inp{margin:0;max-width:160px}
.grid tr.selected td{background:var(--surface-3)}
.grid-scroll{max-width:100%;overflow-x:auto}
.grid-scroll > .grid{min-width:640px}

/* ---------- 002H cheques ---------- */
.kpi-btn{font:inherit;text-align:start;cursor:pointer;color:inherit}
.kpi-btn:hover{border-color:var(--accent)}
.kpi > small{font-size:11.5px}
.action-panel{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:end}
.action-panel label{margin:0;display:flex;flex-direction:column;gap:2px;font-weight:500;flex:0 1 180px}
.action-panel label .inp{margin:0}
.action-panel > b{align-self:center}
.action-panel > .muted{flex:1 1 100%;font-size:12px}
.badge.linkish{border:0;font:inherit;font-size:12px;cursor:pointer}
.action-panel label:has(select){flex-basis:270px}
.action-panel label.chk{flex-direction:row;align-items:center;flex:0 1 auto;gap:6px}
.grid td.wrap{white-space:normal;line-height:1.5}
.grid td.wrap .btn.sm{margin-inline-start:6px}

/* ---- access control (002L): permission matrix, scopes, effective preview ---- */
.perm-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:0 0 var(--s3)}
.perm-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:var(--s3);align-items:start}
.perm-groups.user{grid-template-columns:repeat(auto-fit,minmax(600px,1fr))}
.perm-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.perm-card > header{display:flex;align-items:center;gap:var(--s2);padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.perm-card > header .sp{flex:1}
.perm-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.perm-table td{padding:5px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
.perm-table tr:last-child td{border-bottom:0}
.perm-table tr.overridden td{background:var(--warn-bg)}
.perm-table td.op{width:92px;white-space:nowrap}
.perm-table td.ctl{width:1%;white-space:nowrap;text-align:end}
.perm-table td.ctl input[type=checkbox]{width:18px;height:18px;margin:0}
.perm-table td.rolev{width:78px;white-space:nowrap;font-size:var(--fs-xs)}
.perm-table td.res{width:128px;white-space:nowrap}
.op-tag{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.op-tag.op-view{color:var(--muted)} .op-tag.op-post{color:var(--accent-700);border-color:var(--accent)} .op-tag.op-reverse{color:var(--danger);border-color:var(--danger)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;font:inherit;font-size:var(--fs-xs);padding:4px 10px;cursor:pointer;color:var(--ink-2);border-inline-start:1px solid var(--border)}
.seg button:first-child{border-inline-start:0}
.seg button.on{background:var(--accent);color:#fff;font-weight:700}
.seg button.allow.on{background:var(--ok)} .seg button.deny.on{background:var(--danger)}
.seg button:disabled{cursor:default;opacity:.65}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-bottom:var(--s3)}
.scope-list{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 12px}
.scope-list label.chk{display:inline-flex;align-items:center;gap:6px;font-weight:500;margin:0}
.scope-list label.chk input{width:16px;height:16px;margin:0}
.eff-chip{display:inline-block;margin:2px 0 2px 6px;padding:1px 8px;border-radius:999px;font-size:var(--fs-xs);background:var(--ok-bg);color:var(--ink)}
.eff-chip.direct{outline:1px solid var(--ok);font-weight:700}
.eff-chip.deny{background:var(--danger-bg);color:var(--danger);text-decoration:line-through}
.kpi b.pos{color:var(--ok)} .kpi b.neg{color:var(--danger)}
@media (max-width:860px){ .perm-groups,.perm-groups.user{grid-template-columns:1fr} .scope-grid{grid-template-columns:1fr} .perm-table td.rolev{display:none} }

/* ---- master data registers (002M): server-side pager ---- */
.pager{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.pager .sp{flex:1}

/* ---- account statement (002N) ---- */
.statement .grid tr.carried td{background:var(--surface-2,rgba(0,0,0,.035));font-size:var(--fs-sm)}
.statement .grid tr.rev td{color:var(--ink-2)}
.statement .grid .docno-link{color:var(--accent)}
.statement .grid tr.alloc-detail td{background:var(--surface-2,rgba(0,0,0,.035));white-space:normal}
.statement .alloc-line{padding:2px 0;font-size:var(--fs-sm)}
.statement .grid td .badge.linkish{margin-inline-start:6px}
.statement .grid td:nth-child(4){white-space:normal}
.statement .grid-scroll > .grid{min-width:620px}
.statement .grid th.c-date{width:92px} .statement .grid th.c-kind{width:118px} .statement .grid th.c-no{width:112px}
.statement .grid th.c-amt{width:104px} .statement .grid th.c-bal{width:132px}
.statement .kind-inline{display:none}
@media (max-width:900px){
  .statement .grid .c-kind{display:none}
  .statement .kind-inline{display:inline-block;margin-inline-end:6px}
  .statement .grid th.c-date{width:84px} .statement .grid th.c-no{width:88px} .statement .grid th.c-amt{width:82px} .statement .grid th.c-bal{width:112px}
  .statement .grid td, .statement .grid th{padding-inline:6px}
}
.statement .screen-toolbar{flex-wrap:wrap;row-gap:var(--s2)}

/* ---- opening balances (002O) ---- */
.opening .ob-entry{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
.opening .ob-actions{grid-column:1 / -1;display:flex;gap:var(--s2);flex-wrap:wrap}
.opening .grid tr.rev td{color:var(--ink-2)}
.opening .grid td.c-ref{white-space:normal}
.opening .grid td .btn.sm{margin-inline-end:4px}
.opening .grid-scroll > .grid{min-width:700px}
.opening .kpi > small{display:block}
.opening .grid th.c-ref{width:27%}
@media (max-width:900px){
  .opening .ob-entry{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opening .grid .c-ref{display:none}
  .opening .grid-scroll > .grid{min-width:600px}
  .opening .grid td, .opening .grid th{padding-inline:6px}
}

/* ---- migration centre (002P) ---- */
.migration .hash{font-family:ui-monospace,Consolas,monospace;font-size:12px;direction:ltr;unicode-bidi:plaintext}
.migration .code{font-family:ui-monospace,Consolas,monospace;font-size:11px;direction:ltr;text-align:start}
.migration .steps{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 var(--s3)}
.migration .step{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);padding:6px 8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.migration .step .n{font-size:11px;color:var(--muted)}
.migration .step .t{font-weight:700;font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.migration .step small{font-size:11px;color:var(--muted)}
.migration .step.done{border-color:var(--ok);background:var(--ok-bg)}
.migration .step.current{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.migration .step.bad{border-color:var(--danger);background:var(--danger-bg)}
.migration .bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.migration .bar > span{display:block;height:100%;background:var(--ok)}
.migration .grid tr.blocks td{background:var(--danger-bg)}
.migration .grid tr.rev td{color:var(--ink-2);opacity:.75}
.migration .grid td.c-ref{white-space:normal}
.migration .kpi > small{display:block}
.migration .kpi > b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 002Q: partial-scope runs — source sections, preflight report, staged-only rows */
.migration .report{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 var(--s3);align-items:start}
.migration .report details{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);min-width:0}
.migration .report summary{cursor:pointer;padding:6px 10px;font-size:var(--fs-sm)}
.migration .report details .grid{border:0;border-top:1px solid var(--border)}
.migration .report details .grid td{white-space:normal;vertical-align:top}
.migration .grid tr.staged-only td{color:var(--ink-2)}
@media (max-width: 900px){ .migration .report{grid-template-columns:minmax(0,1fr)} }
/* 002R: historical scope — category rows of the reconciliation, clickable history rows, provenance filters */
.migration .grid tr.group td{background:var(--surface-3);font-size:var(--fs-sm);padding-block:6px}
.migration .grid tr.group td .badge{margin-inline-start:6px}
.migration .grid tr.clickable{cursor:pointer}
.migration .grid tr.clickable:hover td{background:var(--surface-2)}
.migration .filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:0 0 8px}
.migration .filter-bar label{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-sm)}
.migration .pager{display:flex;gap:8px;align-items:center;margin:6px 0 var(--s3)}
@media (max-width:900px){
  .migration .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .migration .grid td, .migration .grid th{padding-inline:6px}
}
@media (max-width:900px){
  .migration [data-checks] th:nth-child(3), .migration [data-checks] th:nth-child(4){width:92px !important}
  .migration [data-checks] th:nth-child(5){width:80px !important}
}

/* ============================================================================
   UI batch 001 — module launcher, document close action, register filters
   (docs/build/UI-UX-RULES.md)
   ============================================================================ */
/* ---- launcher: module cards --------------------------------------------- */
.home{max-width:1320px}
.mod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin:var(--s2) 0 var(--s5);max-width:1180px}   /* 11 modules: 4 + 4 + 3 */
.mod-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 14px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);cursor:pointer;font-family:inherit;color:var(--ink);text-align:center;min-height:168px;
  transition:transform .12s,box-shadow .12s,border-color .12s}
.mod-card .modico{filter:drop-shadow(0 3px 5px rgba(16,34,46,.18))}
.mod-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-2)}
.mod-card:active{transform:translateY(0);box-shadow:var(--sh-1)}
.mod-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mod-ttl{font-size:var(--fs-lg);font-weight:800;line-height:1.35}
.mod-hint{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.home-strip{display:flex;flex-wrap:wrap;gap:var(--s2)}
.ministat{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);
  font-size:var(--fs-sm);color:var(--ink-2)}
.ministat .ico{color:var(--accent)}
.ministat b{font-size:var(--fs);color:var(--ink);direction:ltr}
/* ---- launcher: a module's functions ------------------------------------- */
.crumbs{display:flex;align-items:center;gap:6px;margin-bottom:var(--s3);font-size:var(--fs-sm);color:var(--muted)}
.crumb{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-2);background:var(--surface);border-radius:var(--r-sm);padding:4px 10px;
  font-family:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--accent-700);cursor:pointer}
.crumb:hover{background:var(--accent-50)}
.crumb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.crumbs .here{font-weight:800;color:var(--ink)}
.modpage-head{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s2)}
.fn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.fn-tile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:start;padding:12px 14px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);font-family:inherit;color:var(--ink);cursor:pointer;
  transition:border-color .12s,box-shadow .12s,background .12s}
.fn-tile:hover{border-color:var(--accent);box-shadow:var(--sh-1);background:var(--surface-2)}
.fn-tile:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.fn-ico{grid-row:1 / span 2;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--surface-3);color:var(--ink-2)}
.fn-tile.new .fn-ico{background:var(--accent-50);color:var(--accent-700)}
.fn-ttl{font-weight:700;line-height:1.35}
.fn-kind{font-size:var(--fs-xs);color:var(--muted)}
/* ---- the universal document close action -------------------------------- */
.doc-actions .doc-cancel{order:99;margin-inline-start:var(--s2)}
/* ---- register filters (shared) ------------------------------------------ */
.rf{margin-bottom:var(--s3)}
.rf-main{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s2) var(--s3)}
.rf-main > .sp{display:none}
.rf-main > .sp + *{margin-inline-start:auto}   /* the register's own actions stay at the far end even when the row wraps */
.rf-search{flex:1 1 260px;max-width:380px}
.rf-sel{width:auto;min-width:140px;max-width:230px;flex:0 1 auto}
.rf-sel.on{border-color:var(--accent);background:var(--accent-50);font-weight:700}
.rf-all.open{border-color:var(--accent);color:var(--accent-700);background:var(--accent-50)}
.rf-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:11px}
.rf-panel{margin-top:6px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r);box-shadow:var(--sh-2);padding:var(--s3) var(--s4)}
.rf-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s3) var(--s4)}
.rf-group{border:none;margin:0;padding:0;min-width:0}
.rf-group legend{font-size:var(--fs-sm);font-weight:800;color:var(--ink);padding:0;margin-bottom:6px}
.rf-periods{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.chip-btn{border:1px solid var(--border-2);background:var(--surface);border-radius:var(--r-pill);padding:3px 11px;font-family:inherit;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);cursor:pointer}
.chip-btn:hover{background:var(--surface-3)}
.chip-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rf-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rf-range label{margin:0;font-weight:600}
.rf-find{margin-bottom:6px}
.rf-options{display:flex;flex-direction:column;gap:2px;max-height:210px;overflow:auto;padding-inline-end:2px}
.rf-opt{display:flex;align-items:center;gap:8px;margin:0;padding:3px 6px;border-radius:var(--r-sm);font-weight:500;color:var(--ink);cursor:pointer;font-size:var(--fs-sm)}
.rf-opt:hover{background:var(--surface-3)}
.rf-opt input{width:16px;height:16px;margin:0;flex:0 0 auto}
.rf-opt .t{flex:1;min-width:0;line-height:1.35}
.rf-opt .c{color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--fs-xs)}
.rf-opt.empty .t{color:var(--muted)}
.rf-panel-foot{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--border);font-size:var(--fs-xs)}
.rf-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;min-height:28px}
.rf-count{font-size:var(--fs-sm);color:var(--ink-2);margin-inline-end:4px}
.rf-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent-100);background:var(--accent-50);color:var(--accent-800);border-radius:var(--r-pill);
  padding:2px 10px;font-family:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer;line-height:1.6}
.rf-chip:hover{background:var(--accent-100)}
.rf-chip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rf-notice{display:inline-flex;align-items:center;gap:6px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-bd);border-radius:var(--r-sm);padding:2px 8px;font-size:var(--fs-xs)}
.rf-pager{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);flex-wrap:wrap;font-size:var(--fs-sm)}
@media (max-width:860px){
  .rf-search{max-width:none;flex-basis:100%}
  .mod-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3)}
}

/* ---- 20. Batch 002 — product brand, company identity, sign-in, customer discount, Excel data centre ---------------- */
/* The PRODUCT brand (سهولة / SOHOULA): one component (Brand.razor), three sizes. Wordmarks are real text. */
.sahoula{display:inline-flex;align-items:center;gap:10px;line-height:1;direction:rtl;color:var(--ink)}
.sahoula-mark{width:34px;height:34px;flex:0 0 auto;display:block}
.sahoula-words{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.sahoula-words .ar{font-family:"Cairo","Tajawal",sans-serif;font-weight:800;font-size:20px;letter-spacing:0}
.sahoula-words .en{font-family:"Cairo","Segoe UI",sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.34em;color:var(--accent);padding-inline-start:1px}
.sahoula.sm .sahoula-mark{width:30px;height:30px}
.sahoula.sm .sahoula-words .ar{font-size:17px}
.sahoula.sm .sahoula-words .en{font-size:8px;letter-spacing:.32em}
.sahoula.lg{gap:16px}
.sahoula.lg .sahoula-mark{width:76px;height:76px}
.sahoula.lg .sahoula-words{gap:6px}
.sahoula.lg .sahoula-words .ar{font-size:46px}
.sahoula.lg .sahoula-words .en{font-size:15px;letter-spacing:.42em}
.sahoula.on-accent{color:#fff}
.sahoula.on-accent .sahoula-words .en{color:#bfece6}
.topbar .brand{display:inline-flex;align-items:center}
.topbar .who .co-logo{width:28px;height:28px;object-fit:contain;background:#fff;border-radius:6px;padding:2px;flex:0 0 auto}

/* The CUSTOMER company on the launcher: its own logo, never the product mark */
.home-head{justify-content:flex-start;gap:var(--s3);flex-wrap:wrap}
.home-head .home-co-logo{width:46px;height:46px;object-fit:contain;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:3px}
.home-head .muted{flex:1 1 320px}

/* Sign-in: product on one side, the customer company (when the server knows it) above the form */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(360px,44%) 1fr;background:var(--bg)}
.login-brand{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--s5);padding:56px 56px 72px;color:#fff;overflow:hidden;
  background:radial-gradient(1200px 520px at 110% -10%,rgba(255,255,255,.14),transparent 60%),linear-gradient(160deg,#0c4a45 0%,#0f766e 58%,#16998d 100%)}
.login-brand::after{content:"";position:absolute;inset-inline-start:-90px;bottom:-110px;width:340px;height:340px;border-radius:50%;border:44px solid rgba(255,255,255,.07)}
.login-tag{font-size:20px;font-weight:700;line-height:1.7;max-width:420px;position:relative}
.login-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:var(--fs);opacity:.94;position:relative}
.login-points li{display:flex;align-items:center;gap:10px}
.login-points li::before{content:"";width:8px;height:8px;border-radius:50%;background:#bfece6;flex:0 0 auto}
.login-foot{position:absolute;bottom:26px;inset-inline-start:56px;font-size:11px;letter-spacing:.5em;font-weight:700;opacity:.55}
.login-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s6)}
.login-card{width:440px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s8) var(--s8) var(--s6);box-shadow:var(--sh-2)}
.login-card h1{font-size:22px;margin-bottom:4px}
.login-card .sub{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s5)}
.login-submit{width:100%;justify-content:center;margin-top:6px;height:42px;font-size:var(--fs-lg)}
.login-company{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--border)}
.login-company-logo{width:64px;height:64px;object-fit:contain;border:1px solid var(--border);border-radius:var(--r);padding:4px;background:#fff;flex:0 0 auto}
.login-company-initial{width:64px;height:64px;border-radius:var(--r);background:var(--accent-50);color:var(--accent-700);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;flex:0 0 auto}
.login-company-names{display:flex;flex-direction:column;gap:2px;min-width:0}
.login-company-names b{font-size:18px;line-height:1.4;overflow-wrap:anywhere}
.login-company-names span{color:var(--muted);font-size:var(--fs-sm);text-align:start}
.login-nocompany{padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--border)}
.login-legal{color:var(--muted);font-size:var(--fs-xs);letter-spacing:.08em}
.auth-brand{margin-bottom:var(--s4)}
@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .login-brand{padding:28px 24px;gap:var(--s3);justify-content:flex-start}
  .login-brand::after,.login-points,.login-foot{display:none}
  .login-tag{font-size:16px}
  .sahoula.lg .sahoula-mark{width:54px;height:54px}
  .sahoula.lg .sahoula-words .ar{font-size:32px}
  .login-main{justify-content:flex-start;padding:var(--s4)}
  .login-card{padding:var(--s5)}
}

/* Company settings */
.co-settings{display:grid;grid-template-columns:300px 1fr;gap:var(--s5);align-items:start}
.co-logo-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.co-logo-panel .section-title{margin-top:0}
.co-logo-box{height:190px;border:1px dashed var(--border-2);border-radius:var(--r);background:
  linear-gradient(45deg,var(--surface-2) 25%,transparent 25%,transparent 75%,var(--surface-2) 75%) 0 0/16px 16px,
  linear-gradient(45deg,var(--surface-2) 25%,#fff 25%,#fff 75%,var(--surface-2) 75%) 8px 8px/16px 16px;
  display:flex;align-items:center;justify-content:center;padding:12px}
.co-logo-box img{max-width:100%;max-height:100%;object-fit:contain}
.co-logo-box.empty{background:var(--surface-2)}
.co-logo-ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted)}
.co-logo-meta{font-size:11px;text-align:center}
.co-logo-actions{display:flex;gap:var(--s2);flex-wrap:wrap}
.co-logo-hint{font-size:12px;line-height:1.6;margin:0}
.co-fields .section-title:first-child{margin-top:0}
label.btn{display:inline-flex;align-items:center;margin:0;cursor:pointer;font-weight:600;position:relative}
label.btn:focus-within{outline:2px solid var(--accent);outline-offset:1px}
label.btn.disabled{opacity:.5;pointer-events:none}
@media (max-width:1100px){ .co-settings{grid-template-columns:1fr} .co-logo-panel{max-width:340px} }

/* Customer discount on sales documents */
.totrow.sub{color:var(--ink-2);border-top:1px dashed var(--border);margin-top:2px;padding-top:6px}
.totrow .pct{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:var(--r-pill);background:var(--accent-50);color:var(--accent-700);font-size:12px;font-weight:800}
.hint.cust-disc{display:inline-block;margin-inline-start:6px;padding:0 8px;border-radius:var(--r-pill);background:var(--accent-50);color:var(--accent-700);font-weight:800}

/* Excel data centre */
.datacenter .screen-head h2{display:flex;align-items:center;gap:8px}
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s3)}
.dc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);box-shadow:var(--sh-1)}
.dc-card.fin{border-inline-start:3px solid var(--warn)}
.dc-card-head{display:flex;align-items:center;gap:var(--s3)}
.dc-card-head > div{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.dc-card-head b{font-size:var(--fs-lg);line-height:1.4}
.dc-ico{width:42px;height:42px;border-radius:var(--r);background:var(--accent-50);color:var(--accent-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dc-card.fin .dc-ico{background:var(--warn-bg);color:var(--warn)}
.dc-desc{margin:0;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.65;flex:1}
.dc-actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.dc-actions a.btn,.dc-upload a.btn,.dc-export a.btn{text-decoration:none}
.dc-export{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3) var(--s4)}
.dc-export p{margin:0 0 var(--s2)}
.dc-export-row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.dc-sahl-note{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:var(--s3)}
.dc-steps{list-style:none;margin:0 0 var(--s3);padding:0;display:flex;flex-wrap:wrap;gap:6px 0}
.dc-steps li{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:700;color:var(--muted);padding-inline-end:14px;margin-inline-end:14px;position:relative}
.dc-steps li:not(:last-child)::after{content:"";position:absolute;inset-inline-end:0;top:50%;width:1px;height:16px;transform:translateY(-50%);background:var(--border-2)}
.dc-steps .n{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:var(--surface);color:var(--muted)}
.dc-steps li.current{color:var(--accent-700)}
.dc-steps li.current .n{border-color:var(--accent);background:var(--accent);color:#fff}
.dc-steps li.done{color:var(--ink-2)}
.dc-steps li.done .n{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.dc-upload{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.dc-upload-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:6px}
.dc-upload p{margin:0}
.dc-file{display:inline-flex;align-items:center;gap:6px;font-weight:700;overflow-wrap:anywhere}
.dc-counts{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.dc-counts .kpi.bad{border-color:var(--danger-bd);background:var(--danger-bg)}
.dc-counts .kpi.warnk{border-color:var(--warn-bd);background:var(--warn-bg)}
.dc-issues-wrap,.dc-sample-wrap{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:var(--r);margin-bottom:var(--s3)}
.dc-issues tr.is-error td{background:#fff8f8}
.dc-issues .dc-msg{white-space:normal;line-height:1.6;font-weight:600}
.dc-confirm-bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;position:sticky;bottom:0;background:var(--bg);padding:var(--s2) 0}
.dc-result{background:var(--surface);border:1px solid var(--ok-bd);border-radius:var(--r);padding:var(--s4) var(--s5)}
.dc-result-head{display:flex;align-items:center;gap:var(--s3);color:var(--ok);margin-bottom:var(--s3)}
.dc-result-head > div{display:flex;flex-direction:column}
.dc-result-head b{font-size:20px;color:var(--ink)}
.dc-result-head span{color:var(--muted);font-size:var(--fs-sm)}
@media (max-width:1100px) and (min-width:861px){ .mod-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* non-production marker (Branding:EnvironmentBadge) — small on purpose: it labels the installation, it is not a banner */
.env-badge{display:inline-block;vertical-align:middle;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:800;line-height:1.5;letter-spacing:0;background:#fef3c7;color:#92400e;border:1px solid #f59e0b;white-space:nowrap}
.env-badge.on-accent{background:#f59e0b;color:#3b2300;border-color:#fde68a}
/* approved SOHOULA logo (brand/sohoula-logo.png): sized by height only, width follows — proportions are never forced */
.sahoula-mark{object-fit:contain}
.sahoula-full{display:inline-block;line-height:0;align-self:flex-start;max-width:100%}
.sahoula-full img{display:block;height:132px;width:auto;max-width:100%}
.sahoula-full.lg img{height:230px}
.sahoula-full.on-accent{background:#fff;border-radius:var(--r-lg);padding:18px 26px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.login-nocompany,.auth-brand{text-align:center}
@media (max-width:900px){.sahoula-full.lg img{height:120px}.sahoula-full.on-accent{padding:10px 16px}}

/* ============================================================================
   21. Responsive foundation — phone and tablet (SOHOULA-MOBILE-RESPONSIVE-001)
   Desktop is untouched above 860px. Below it the shell changes shape, once, for every screen:
   the page is exactly as wide as the viewport, the navigation is an off-canvas drawer that takes no layout space,
   and wide content (tables, document lines) scrolls inside its own container — never the page.
   The drawer breakpoint (860px) is mirrored in wrd.js → isNarrow().
   ============================================================================ */
.nav-backdrop,.drawer-user{display:none}
.topbar{min-width:0}
.topbar .who{min-width:0}
.topbar .who .co{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tabhost{min-width:0}

@media (max-width:860px){
  /* ---- shell ---- */
  .topbar{gap:6px;padding:0 8px}
  .topbar .burger{width:42px;height:42px;flex:0 0 auto}
  .topbar .brand{min-width:0;padding:4px}
  .topbar .homebtn,.topbar .tb-user,.topbar .who .co,.topbar .who > b,.topbar .who .co-switch{display:none}   /* the brand goes home; the rest is in the drawer */
  .topbar .who{flex:0 0 auto}
  .body,.body.collapsed{grid-template-columns:minmax(0,1fr)}

  /* ---- navigation drawer: out of the layout, slides in from the start (right, RTL) edge ---- */
  .sidenav{position:fixed;top:var(--topbar-h);bottom:0;inset-inline-start:0;width:min(86vw,320px);z-index:60;
    border-inline-end:none;box-shadow:var(--sh-3);padding-bottom:env(safe-area-inset-bottom);
    transform:translateX(105%);visibility:hidden;transition:transform .18s ease,visibility 0s linear .18s}
  .body.drawer-open .sidenav{transform:none;visibility:visible;transition:transform .18s ease}
  .nav-backdrop{position:fixed;inset:var(--topbar-h) 0 0 0;z-index:55;background:rgba(16,34,46,.45)}
  .body.drawer-open .nav-backdrop{display:block}
  .sidenav .navitem{padding:12px 12px;font-size:15px}          /* touch target ≥ 44px */
  .sidenav .navitem.back{padding-block:10px}
  .drawer-user{display:block;margin-top:auto;border-top:1px solid var(--border);padding:var(--s3) 0 var(--s2)}
  .drawer-user .du-who{display:flex;align-items:center;gap:10px;padding:4px var(--s4) 8px}
  .drawer-user .avatar{width:34px;height:34px;border-radius:50%;background:var(--accent-50);color:var(--accent-700);display:inline-flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
  .drawer-user .du-names{display:flex;flex-direction:column;min-width:0;line-height:1.4}
  .drawer-user .du-names span{color:var(--muted);font-size:var(--fs-sm)}
  .drawer-user select.inp{margin:0 var(--s4) 6px;width:calc(100% - 2 * var(--s4))}
  .drawer-user a.navitem{text-decoration:none;box-sizing:border-box}

  /* ---- workspace ---- */
  .tabhost{padding:var(--s3)}
  .tab{height:38px}
  .tabmenu{width:min(300px,calc(100vw - 16px))}
  .screen-head{flex-wrap:wrap}
  .screen-head > *{min-width:0}
  .doc-actions{margin-inline-start:0}

  /* ---- wide content scrolls inside itself, not the page ---- */
  .screen,.doc,.home{min-width:0;max-width:100%}
  .modal{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--s4)}
  .modal-bg{padding:8px}
  .modal-actions{flex-wrap:wrap}
}

@media (max-width:900px){
  /* sign-in: a single column that can never be wider than the screen (the card used to force 440px) */
  .login{grid-template-columns:minmax(0,1fr)}
  .login-brand,.login-main{min-width:0}
  .login-card{width:100%;max-width:440px}
}
@media (max-width:560px){
  /* launcher: one readable column; icon beside the text instead of above it — same icons, same card */
  .mod-grid{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .mod-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;text-align:start;min-height:0;padding:12px 14px}
  .mod-card .modico{grid-row:1 / span 2;width:48px;height:48px}
  .mod-ttl,.mod-hint{overflow-wrap:anywhere}
  .fn-grid{grid-template-columns:minmax(0,1fr)}
  .login-card,.auth-card{padding:var(--s5) var(--s4)}
}