/* ============================================================================
   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:where(:not([type=checkbox])),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:where(:not([type=checkbox])):hover,select:hover,textarea:hover{border-color:#aab6c0}
input:where(:not([type=checkbox])):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}
/* checkboxes — ONE shared look for every screen. The generic control rule above (full width, 36px tall, padding, border) is for text
   fields and leaves checkboxes alone; it used to stretch them, so a checked and an unchecked box differed in size and place.
   No screen sets a checkbox's size of its own (guarded by CheckboxStyleTests). */
input[type=checkbox]{width:16px;height:16px;min-width:16px;flex:none;margin:0;padding:0;
  accent-color:var(--accent);cursor:pointer;vertical-align:middle}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=checkbox]:disabled{cursor:not-allowed;opacity:.55}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer}
.chk:has(input[type=checkbox]:disabled){cursor:not-allowed}

/* 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}
/* B21.15 (N10): a faint separator between adjacent columns + tabular numerals, so neighbouring values (e.g. a 1 beside a 1) are never read as one number (11) */
table.grid th + th,table.grid td + td{border-inline-start:1px solid var(--border)}
table.grid td.num{font-variant-numeric:tabular-nums}
/* B21.15 (N10) — every data cell is ONE line of uniform height: numbers and short values centred; long text (names,
   accounts, descriptions) stays on one line and is cut with an ellipsis (…) when the column is too narrow, instead of
   wrapping and growing the row. When the whole table is too wide for the screen its wrapper (.grid-scroll) scrolls
   horizontally. A cell holding a field stays as it was. */
table.grid td.num,table.grid th.num{text-align:center}
table.grid td.c,table.grid th.c,table.grid td:has(> .badge:only-child),table.grid td:has(> input[type=checkbox]:only-child){text-align:center}
table.grid td:not(.num):not(.c):not(:has(input,select,textarea,button,[data-lookup])){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* B21.53 (TABLE-02, owner 2026-11-02): column titles and their cells are centred by default — numbers, dates, statuses and short
   texts alike; a column of long names (items, customers, suppliers) may opt back to the reading side with .start */
table.grid th,table.grid td{text-align:center}
table.grid th.start,table.grid td.start{text-align:start}
/* inputs sitting inside a grid cell stay flush and compact */
table.grid td .inp,table.grid td input:where(:not([type=checkbox])),table.grid td select{height:30px;border-color:var(--border);background:var(--surface)}
table.grid td .inp:focus,table.grid td input:where(:not([type=checkbox])):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:hidden;min-height:0;position:relative}
/* each tab is its own scroll area (B6.1): switching tabs keeps every tab's scroll position */
.tabpane{height:100%;overflow:auto;padding:var(--s4);box-sizing:border-box}
.tab-presence{margin-bottom:var(--s3)}
.ws-notice{position:fixed;z-index:70;left:50%;transform:translateX(-50%);bottom:18px;max-width:min(560px,calc(100vw - 24px));
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r);background:var(--ink);color:#fff;box-shadow:var(--sh-3);
  font-size:var(--fs-sm);font-weight:600}
.ws-notice .x{border:0;background:transparent;color:inherit;cursor:pointer;display:inline-flex;padding:2px;border-radius:4px;opacity:.8}
.ws-notice .x:hover{opacity:1}
/* B7.1 save state of the active tab + recovery dialog */
.save-state{display:inline-flex;align-items:center;flex:0 0 auto;max-width:260px;margin-inline:6px;padding:2px 8px;border-radius:999px;
  font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent}
.save-state.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
.save-state.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
.save-state.busy{color:var(--muted);background:var(--surface-3)}
.save-state.err{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-bd)}
.modal.recovery{max-width:620px;width:100%}
.rec-list{list-style:none;margin:0 0 var(--s3);padding:0;display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.rec-list li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r)}
.rec-ttl{flex:1;min-width:0;display:flex;flex-direction:column}
.rec-ttl b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-ttl small{color:var(--muted)}
@media (max-width:560px){ .save-state{max-width:120px} }

/* ---- 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}
/* B21.12 — the sales header: a fixed label line above every control, equal columns (the customer spans two), controls aligned */
/* B21.12 — quick receipt / payment for an account (card toolbar, register row) */
.party-actions{display:inline-flex;gap:6px;flex-wrap:nowrap}
/* B21.12 — a voucher's account before / after */
/* B21.13 — a field-level check shown next to its field (the current inputs, never an older message) */
.field-err{color:var(--danger);font-size:12px;font-weight:600;flex:1 1 100%}
.party-balance{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:12px;color:var(--muted);margin:-4px 2px 8px}
.party-balance b{color:var(--ink)}
.doc-head.sale-head{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}
.doc-head.sale-head > label{display:flex;flex-direction:column;gap:3px;min-width:0}
.doc-head.sale-head > label.cust{grid-column:span 2}
.doc-head.sale-head .lbl{display:flex;align-items:center;gap:4px;min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-head.sale-head .lbl .hint{overflow:hidden;text-overflow:ellipsis;min-width:0}
.doc-head.sale-head > label > .inp,.doc-head.sale-head > label > .lk{margin-top:0}
@media (max-width:1180px){.doc-head.sale-head{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.doc-head.sale-head{grid-template-columns:1fr}.doc-head.sale-head > label.cust{grid-column:auto}}
.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-color{width:84px} .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}
.xfer-people{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.xfer-people > label{flex:1 1 200px;max-width:255px}
.doc-note textarea.q-terms{resize:vertical;min-height:58px;font:inherit;line-height:1.5}
.doc-note > label + label{margin-top:8px}
/* B21.41: further cash parts of a mixed collection (one cashbox each) */
.mixed-extra > .doc-head{margin-top:6px;align-items:end}
.mixed-extra-add{margin:6px 0 10px}
/* B21.41: the partial conversion panel */
.part-convert{display:block}
.part-convert table{margin:8px 0}
.part-convert .draft-cancel-actions{display:flex;gap:8px}
/* B21.41: integration intakes */
.payroll-checks{margin:6px 0;padding-inline-start:18px;font-size:13px}
.payroll-checks li.bad{color:var(--danger, #b42318);font-weight:600}
.portal-order,[data-payroll-posting]{margin-top:12px}
.grid tr.warn td{background:var(--warn-bg, #fff7e6)}
/* B21.42: the profit and loss statement */
.pl-table tr.pl-total td{border-top:2px solid var(--line-strong, #9aa4b2);background:var(--surface-2)}
.pl-table tr.pl-strong td{background:var(--surface-2)}
.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}
/* B21.11 DocLink: a document number that opens its document (keyboard: Tab + Enter) */
.doclink{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-align:inherit}
.doclink:hover,.doclink:focus-visible{text-decoration:underline}
.doclink:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:2px}
.cash-detail{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.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)}
.floor-warn{display:inline-flex;align-items:center;gap:2px;margin-inline-start:4px;color:var(--warn);font-size:11px;font-weight:700;cursor:help;white-space:nowrap}
.doc-lines tr.below-floor td.floor-cell{box-shadow:inset -3px 0 0 var(--warn)}
.doc-lines tr.line-notice td{background:var(--warn-bg);color:var(--warn);font-size:12px;padding:3px 8px}
.doc-lines tr.line-notice .btn{margin-inline-start:6px}
.eb-msg.price-notice{color:var(--warn);font-weight:600}
.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}
.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}
/* B7.3: an insert is in flight — keys typed meanwhile are held and replayed in order */
.entry-bar{position:relative}
.entry-bar.busy::after{content:"جارٍ الإدراج…";position:absolute;inset-inline-end:8px;top:-9px;padding:0 6px;border-radius:999px;
  background:var(--accent-50);color:var(--accent-700);font-size:10.5px;font-weight:700;line-height:18px;pointer-events:none}
/* B21.11 item-group filter: one compact row at the start of the entry bar (spans the bar's grid) */
.eb-grp{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.eb-grp select.inp{width:auto;min-width:110px;max-width:220px;height:26px;padding:0 6px;font-size:12px}
.eb-grp select.inp.on{border-color:var(--accent);color:var(--accent-700);font-weight:700}
.eb-grp .chip-btn{padding:2px 9px}
.eb-grp-hint{font-size:11px;color:var(--muted)}
.eb-grp-hint kbd{font-size:10px}
.eb-grp.solo{margin:0 0 var(--s2)}
/* B6.3 availability of the item being entered (in its unit, after this document's other lines) — B6.2 repeated-line notice */
.eb-aux{margin:4px 2px 0;font-size:12px}
.stock-hint{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;color:var(--ok);font-weight:700}
.stock-hint small{color:var(--muted);font-weight:600}
.stock-hint.none{color:var(--warn)}
.stock-hint.over{color:var(--danger)}
.dup-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 2px 0;padding:6px 10px;border-radius:var(--r-sm);
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bd);font-size:12.5px;font-weight:600}
.dup-note .btn{height:28px}
.plan-conflicts{margin:4px 0 0;padding-inline-start:18px;font-weight:500}
/* B6.4 selection in the items register (bulk barcode labels) */
.sel-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 var(--s3);font-size:var(--fs-sm)}
.grid th.c-sel,.grid td.c-sel{width:36px;text-align:center}
.bl-bulk{margin-top:var(--s2)}
.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%}
  .tabpane{padding:var(--s3)}
}

/* B21.14 — phones and touch screens (desktop unchanged) */
@media (max-width:860px), (pointer:coarse){
  /* 16px fields: iPhone Safari zooms the whole page into any field below 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea, .inp,
  .eb-grp select.inp{font-size:16px}
  .eb-grp select.inp{height:auto;min-height:36px}
}
@media (pointer:coarse){
  /* a finger needs a bigger target than a mouse */
  table.grid .linklike{min-height:32px;display:inline-flex;align-items:center}
  .pin{padding:8px 6px;margin:-8px -4px}
  /* keyboard shortcut hints mean nothing on a phone */
  .eb-msg:not(.err) > span:has(> kbd){display:none}
}

/* 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.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}
.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}
/* B21.34: a sensitive right (edit after approval, override negative stock…) is marked wherever it is granted */
.eff-chip.sensitive{background:var(--warn-bg, #fff4e0);outline:1px dashed var(--warn, #b26a00)}
.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}
/* B21.40 (OB-05): the row's «إلغاء المسودة» — a small button; its dialog floats above the register (the grid scrolls and would clip it) */
.opening .grid td .draft-cancel > .btn{height:var(--h-ctl-sm);padding:0 10px;font-size:var(--fs-sm)}
.opening .grid td .draft-cancel .draft-cancel-dialog{position:fixed;top:22vh;inset-inline-end:max(16px,calc(50vw - 220px));text-align:start}
.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)}
/* B21.3: the five rungs of a restore — their notes say what the evidence is */
.migration .steps.ladder{grid-template-columns:repeat(5,minmax(0,1fr))}
.migration .steps.ladder .step small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.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 .steps.ladder{grid-template-columns:repeat(2,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 .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}
/* B21.10A — the owner's local trial of restored Sahl history (LocalTrialStrip): never mistaken for the real installation */
.local-trial-strip{background:#b91c1c;color:#fff;font-weight:800;font-size:13px;line-height:1.4;text-align:center;padding:5px 12px;letter-spacing:0;overflow-wrap:anywhere}
.local-trial-strip .muted-on-strip{font-weight:600;opacity:.85}
.shell:has(> .local-trial-strip){grid-template-rows:auto var(--topbar-h) 1fr}
.local-trial-strip ~ .login{min-height:calc(100vh - 32px)}
.local-trial-print{display:none}
@media print{
  .local-trial-print{display:block;position:fixed;bottom:0;left:0;right:0;text-align:center;font-size:9pt;font-weight:800;color:#b91c1c;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* 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}}

/* ---- 20b. Reports (B1) ---- */
.period-filter{display:inline-flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.period-filter .inp{max-width:160px}
.screen-toolbar > .sp{flex:1}
tr.muted td{color:var(--muted)}

/* ============================================================================
   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 ---- */
  .tabpane{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)}
}

/* ---- 20c. Settings policies + audit trail (B3) ---- */
.policy-panel{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3)}
.policy-panel .chk{display:flex;gap:8px;align-items:center;font-weight:600}
.audit-data{margin:0;padding:var(--s2);background:var(--surface-2);border-radius:var(--r-sm);font-size:12px;white-space:pre-wrap;max-height:320px;overflow:auto;text-align:left}

/* ============================================================================
   22. Printing (B2) — docs/build/PRINTING.md. One template (PrintSheet) for every document; A4 portrait, RTL.
   ============================================================================ */
.print-tools{display:flex;gap:var(--s2);align-items:center;justify-content:center;padding:var(--s3);background:var(--surface-3);border-bottom:1px solid var(--border)}
.print-page{max-width:210mm;margin:var(--s4) auto;padding:0 var(--s3)}
/* print parity (owner, 2026-10-28): the preview IS the sheet — the page's own size and the @page margin (10 mm) as its padding, so the content
   is 190 mm wide (277 mm landscape) on the screen exactly as on paper and the lines break the same way */
.print-doc{position:relative;background:#fff;color:#111;width:210mm;max-width:100%;min-height:297mm;margin:var(--s4) auto;padding:10mm;
  box-shadow:var(--sh-2);font-size:12.5px;line-height:1.55;box-sizing:border-box;display:flex;flex-direction:column}
.print-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-size:72px;font-weight:800;color:rgba(192,42,42,.12);transform:rotate(-24deg);white-space:nowrap}
.pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12mm;border-bottom:2px solid #222;padding-bottom:4mm}
.pd-co-name{font-size:19px;font-weight:800}
.pd-co-en{font-size:12px;font-weight:700;color:#444}
.pd-co-contacts{display:flex;flex-wrap:wrap;gap:4px 14px;color:#333}
.pd-logo{max-height:26mm;max-width:45mm;object-fit:contain}
.pd-titlebar{display:flex;align-items:baseline;gap:10mm;margin:5mm 0 4mm}
.pd-titlebar h1{font-size:20px;margin:0;flex:1}
.pd-info{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-bottom:4mm}
.pd-party,.pd-fields{border:1px solid #bbb;border-radius:4px;padding:3mm 4mm}
.pd-label{font-size:11px;color:#555}
.pd-party-name{font-size:15px;font-weight:800;margin-bottom:1mm}
.pd-kv{display:flex;gap:6px}
.pd-kv span{color:#555;min-width:28mm}
.pd-lines{width:100%;border-collapse:collapse;margin-bottom:4mm}
/* the table cells, not the cells of the end block's own tables (the end block sits in the table's last row — :where adds no specificity) */
.pd-lines :is(th,td):where(:not(.pd-end *)){border:1px solid #999;padding:4px 6px;text-align:start;vertical-align:top}
.pd-lines thead th{background:#eee;font-weight:800}
.pd-lines tr.pd-subitems td{font-size:.85em;color:#333;padding:2px 6px 4px 6px;padding-inline-start:22px;border-top:0}
.pd-lines .num,.pd-totals .num{text-align:left;direction:ltr;font-variant-numeric:tabular-nums;white-space:nowrap}
.pd-empty{text-align:center;color:#777}
.pd-bottom{display:flex;flex-wrap:wrap;gap:4mm 8mm;align-items:flex-start;justify-content:flex-end}
.pd-words{flex:1 1 100%}
.pd-amount-words{font-weight:700;border:1px dashed #999;border-radius:4px;padding:2mm 3mm;margin-bottom:3mm}
.pd-notes span{font-weight:700}
.pd-totals{border-collapse:collapse;min-width:70mm}
.pd-totals th{font-weight:600;text-align:start;padding:3px 8px;border-bottom:1px solid #ddd}
.pd-totals td{padding:3px 8px;border-bottom:1px solid #ddd}
.pd-account{margin-inline-end:6mm}
.pd-account caption{font-weight:800;text-align:start;padding:0 8px 2px}
.pd-totals tr.strong th,.pd-totals tr.strong td{font-weight:800;font-size:14px;border-top:2px solid #222;border-bottom:2px solid #222}
/* B21.12: a sale's summary — the customer's cumulative balance last and most prominent; the invoice's remainder stays a normal row */
.pd-summary{min-width:86mm}
.pd-summary tr.final th,.pd-summary tr.final td{font-weight:800;font-size:15px;background:#f1f1f1;border:2px solid #111;padding:6px 8px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.pd-signs{display:flex;gap:10mm;justify-content:space-around;margin-top:auto;padding-top:14mm}
.pd-sign{text-align:center;min-width:40mm}
.pd-sign .line{border-bottom:1px solid #444;height:12mm;margin-bottom:2mm}
.pd-foot{display:flex;justify-content:space-between;color:#666;font-size:10.5px;border-top:1px solid #bbb;margin-top:6mm;padding-top:2mm}
/* print parity: the phone layout is for SCREENS only — on paper the content box is 190 mm ≈ 718 px, under this breakpoint, and without
   «screen» every printed document and portrait report stacked its header, boxes and totals (PRINT-PREVIEW-PARITY-DIAGNOSIS-ar.md) */
@media screen and (max-width:860px){ .print-doc{width:100%;min-height:0;padding:var(--s4);margin:0} .pd-info{grid-template-columns:1fr} .pd-bottom{flex-direction:column} .pd-head{flex-direction:column-reverse} }
@page{size:A4 portrait;margin:10mm}
@media print{
  html,body{background:#fff!important}
  /* blazor-focus-on-navigate (FocusOnNavigate, after the content): in print it fell back to the default A4 page — an empty A4 sheet after
     every template's own pages */
  .no-print,#blazor-error-ui,#components-reconnect-modal,blazor-focus-on-navigate{display:none!important}
  .print-doc{box-shadow:none;margin:0;width:auto;min-height:auto;padding:0}
  .pd-lines thead{display:table-header-group}
  .pd-lines tr{break-inside:avoid}
  .print-watermark{position:fixed}
}

/* B21.39-P phase 7 — the SOHOULA print design system's identity on the classic print (every document's A4 fallback and every report /
   register): Cairo, the logo first, the company name large, the logo's red rule, the title in red, grey headings and captions, the
   deep-red strong total, dark-grey rules. Only the look: the same table, rows and values. Colours are kept in black-and-white print. */
.print-doc.sohoula-identity{--pd-red:#fe0000;--pd-red-deep:#c00000;--pd-ink:#111;--pd-muted:#3a3a3a;--pd-grey:#ececec;--pd-light:#f4f4f4;--pd-rule:#5a5a5a;
  font-family:"SohoulaPrintCairo",var(--font);font-size:12px;line-height:1.5;color:var(--pd-ink);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.print-doc.sohoula-identity.landscape{width:297mm;min-height:210mm;padding-bottom:14mm}
.sohoula-identity .pd-head{justify-content:flex-start;align-items:center;gap:7mm;border-bottom:3px solid var(--pd-red);padding-bottom:3mm}
.sohoula-identity .pd-logo{max-height:24mm;max-width:40mm;order:0}
.sohoula-identity .pd-company{flex:1;color:var(--pd-muted);font-size:11px}
.sohoula-identity .pd-co-name{font-size:21px;font-weight:800;color:var(--pd-ink)}
.sohoula-identity .pd-co-en{font-size:11.5px;color:var(--pd-muted)}
.sohoula-identity .pd-co-contacts{color:var(--pd-muted)}
.sohoula-identity .pd-titlebar{margin:4mm 0 3.5mm;align-items:baseline}
.sohoula-identity .pd-titlebar h1{font-size:22px;font-weight:800;color:var(--pd-red);border:0;border-radius:0;background:none;box-shadow:none;padding:0;outline:0}
.sohoula-identity .pd-no,.sohoula-identity .pd-date,.sohoula-identity .pd-time{font-size:13px;font-weight:700}
.sohoula-identity .pd-party,.sohoula-identity .pd-fields{border:1px solid var(--pd-rule);border-radius:0;padding:0;overflow:hidden}
.sohoula-identity .pd-label{background:var(--pd-grey);color:var(--pd-ink);font-weight:700;font-size:11px;padding:1.2mm 3mm;border-bottom:1px solid var(--pd-rule)}
.sohoula-identity .pd-party-name{font-size:15px;padding:1.5mm 3mm 0}
.sohoula-identity .pd-party .pd-kv{padding:0 3mm;color:var(--pd-muted)}
.sohoula-identity .pd-party .pd-kv:last-child{padding-bottom:1.5mm}
.sohoula-identity .pd-fields .pd-kv{gap:0;border-bottom:1px solid var(--pd-rule)}
.sohoula-identity .pd-fields .pd-kv:last-child{border-bottom:0}
.sohoula-identity .pd-fields .pd-kv span{background:var(--pd-grey);color:var(--pd-ink);font-weight:700;min-width:34mm;padding:1mm 3mm;border-inline-end:1px solid var(--pd-rule)}
.sohoula-identity .pd-fields .pd-kv b{padding:1mm 3mm;font-weight:600;overflow-wrap:anywhere}
.sohoula-identity .pd-lines :is(th,td):where(:not(.pd-end *)){border:1px solid var(--pd-rule);padding:1.2mm 1.8mm;overflow-wrap:anywhere}
.sohoula-identity .pd-lines thead th{background:var(--pd-grey);font-weight:800;font-size:11.5px;text-align:center}
.sohoula-identity .pd-lines tbody td:where(:not(.pd-end *)){font-size:11.5px}
.sohoula-identity .pd-lines tbody td.num:where(:not(.pd-end *)){font-weight:600}
/* the end block's cell (the table's last row): no cell look — the end block lays out as it did below the table */
.sohoula-identity .pd-lines td.pd-end-cell{border:0;padding:4mm 0 0;font-size:inherit;font-weight:inherit;background:none;text-align:start;vertical-align:top;overflow-wrap:normal}
.sohoula-identity .pd-lines tr.pd-subitems td{background:var(--pd-light);color:var(--pd-muted)}
.sohoula-identity .pd-amount-words{border:1px solid var(--pd-rule);border-radius:0;background:var(--pd-light)}
.sohoula-identity .pd-notes{border:1px solid var(--pd-rule);background:var(--pd-light);padding:1.5mm 3mm}
.sohoula-identity .pd-totals th{background:var(--pd-grey);border:1px solid var(--pd-rule)}
.sohoula-identity .pd-totals td{border:1px solid var(--pd-rule)}
.sohoula-identity .pd-totals tr.strong th,.sohoula-identity .pd-totals tr.strong td,
.sohoula-identity .pd-summary tr.final th,.sohoula-identity .pd-summary tr.final td{background:var(--pd-red-deep);color:#fff;border:1px solid var(--pd-red-deep);font-size:14px}
.sohoula-identity .pd-account caption{color:var(--pd-ink)}
/* owner 2026-11-01: the balance AFTER the document (the account box's last row; a sale's cumulative-balance row) — its VALUE alone in the
   factory's deep red, bold, one step larger (12.5 → 14 px); the label stays like the other labels; the side stays beside the number */
.sohoula-identity .pd-account tr.strong th,.sohoula-identity .pd-summary tr.final th{background:var(--pd-grey);color:var(--pd-ink);border:1px solid var(--pd-rule);font-size:inherit;font-weight:600}
.sohoula-identity .pd-account tr.strong td,.sohoula-identity .pd-summary tr.final td{background:#fff;color:var(--pd-red-deep);border:1px solid var(--pd-rule);font-size:14px;font-weight:800;white-space:nowrap}
.sohoula-identity .pd-sign .line{border-bottom:1px solid var(--pd-ink)}
.sohoula-identity .pd-sign{font-weight:700}
.sohoula-identity .pd-foot{color:var(--pd-muted);border-top:1px solid var(--pd-rule)}
/* print parity: the sheet flows on the screen exactly as on paper — a block flow (a flex column fragments unevenly in print), the
   signatures 10 mm under the content, not pushed to the foot of the preview */
.print-doc.sohoula-identity{display:block}
.sohoula-identity .pd-signs{margin-top:0;padding-top:10mm}
/* every printed page numbered (the footer of the page box) — the same words as the template pages */
@page{@bottom-left{content:"صفحة " counter(page) " من " counter(pages);font-family:"SohoulaPrintCairo";font-size:9pt;font-weight:700;color:#111}}
@media print{
  .print-doc.sohoula-identity.landscape{width:auto;min-height:auto;padding:0}
  /* corrective review: the totals block and the signatures never stand alone on a page — they keep with the end of the table (the last
     rows move with them); the footer line prints in the page box instead */
  .sohoula-identity .pd-lines thead{display:table-header-group}
  .sohoula-identity .pd-end{break-inside:avoid}
  /* second corrective pass: the table's last rows and the end block are ONE unsplittable group (the tail tbody) — the totals never stand on
     a page without table rows; when the group does not fit it moves whole and the headings repeat above it */
  .sohoula-identity .pd-lines tbody.pd-tail{break-inside:avoid}
  .sohoula-identity .pd-lines tr.pd-end-row{break-inside:avoid}
  /* the end block's last text (the signature captions) draws its glyphs a little below its line box (Cairo's descent): when the end
     group just fits, that ink crossed the page's foot and Chromium opened an empty page for it — 2 mm of white space under the block
     keeps the ink inside the block (found by the fine sweep: the sheet shifted 0–12 mm in 0.5 mm steps) */
  .sohoula-identity .pd-end{padding-bottom:2mm}
  .sohoula-identity .pd-foot{display:none}
}

/* ============================================================================
   23. Barcode labels (B5.2) — real millimetres; the same markup for preview and print (docs/build/LABELS.md)
   ============================================================================ */
.labels-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--s3)}
.bl-form{margin-top:var(--s2)}
.bl-checks{display:flex;flex-wrap:wrap;gap:6px 14px;margin:var(--s2) 0}
.bl-checks .chk{display:inline-flex;gap:6px;align-items:center;font-weight:600}
.bl-preview{overflow:auto;background:var(--surface-3);padding:var(--s3);border-radius:var(--r);max-height:80vh}
.bl-preview .bl-page{margin:0 auto var(--s3);box-shadow:var(--sh-2)}
.bl-page{position:relative;background:#fff;overflow:hidden;box-sizing:border-box;break-after:page;page-break-after:always}
.bl-page:last-child{break-after:auto;page-break-after:auto}
.bl-cell{position:absolute;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0.4mm;
  color:#000;line-height:1.15;text-align:center;direction:rtl;font-family:"Cairo","Tajawal",sans-serif}
.bl-preview .bl-cell{outline:1px dashed #b9c3cc}
.bl-preview .bl-empty{background:repeating-linear-gradient(45deg,#f1f3f5,#f1f3f5 4px,#fff 4px,#fff 8px)}
.bl-co{font-size:.8em;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-name{font-weight:800;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
/* B21.39-P phase 8 — the label TEXT in the print design system's typography (Cairo, black for thermal / mono printers); the cell, the page and
   the barcode keep their exact geometry (the rules above that size them are unchanged) */
.bl-page .bl-cell{font-family:"SohoulaPrintCairo","Cairo","Tajawal",sans-serif;gap:0.35mm}
.bl-page .bl-co{font-size:.72em;font-weight:600;letter-spacing:.01em}
.bl-page .bl-name{font-weight:700;font-size:1em;line-height:1.12;overflow-wrap:anywhere;text-wrap:balance}
.bl-page .bl-text{font-family:"SohoulaPrintCairo","Cairo",sans-serif;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.09em;font-size:.82em;line-height:1}
.bl-page .bl-meta{justify-content:space-between;align-items:baseline;gap:1.2mm;font-size:.88em;line-height:1.1}
.bl-page .bl-meta:not(:has(.bl-price)){justify-content:center}
.bl-page .bl-id{display:inline-flex;gap:1mm;align-items:baseline;min-width:0;overflow:hidden}
.bl-page .bl-code{font-weight:600;font-variant-numeric:tabular-nums}
.bl-page .bl-unit{font-weight:700;border:0.2mm solid #000;border-radius:0.6mm;padding:0 0.7mm;line-height:1.15}
.bl-page .bl-price{font-size:1.28em;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-bars{display:block;width:100%;shape-rendering:crispEdges}
.bl-bars path{fill:#000}
.bl-text{font-family:"Consolas","Courier New",monospace;font-size:.85em;letter-spacing:.05em;white-space:nowrap;overflow:hidden}
.bl-meta{display:flex;justify-content:center;gap:2mm;white-space:nowrap;overflow:hidden;font-size:.9em}
.bl-print{margin:0}
@media (max-width:860px){ .labels-grid{grid-template-columns:minmax(0,1fr)} }
@media print{ .bl-print .bl-page{box-shadow:none;margin:0} body{margin:0} }
/* B10.2 «بيانات النظام السابق» — the migrated document's source record (read only) */
.legacy-panel{margin:var(--s4) 0 0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.legacy-panel>summary{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:var(--s2) var(--s3);font-size:var(--fs-sm);list-style:none}
.legacy-panel>summary::-webkit-details-marker{display:none}
.legacy-panel>summary::after{content:"▾";margin-inline-start:auto;color:var(--muted)}
.legacy-panel[open]>summary::after{content:"▴"}
.legacy-panel[open]>summary{border-bottom:1px solid var(--border)}
.legacy-panel .legacy-num{font-weight:600;color:var(--accent-700)}
.legacy-panel>:not(summary){margin-inline:var(--s3)}
.legacy-panel h4{margin:var(--s3) var(--s3) var(--s2);font-size:var(--fs-sm)}
.legacy-note{font-size:var(--fs-xs);margin-top:var(--s2)}
.legacy-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 16px;margin-block:var(--s2) var(--s3)}
.legacy-fields>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.legacy-fields dt{font-size:var(--fs-xs);color:var(--muted)}
.legacy-fields dd{margin:0;overflow-wrap:anywhere}
.legacy-exceptions{margin-top:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--surface);border:1px dashed var(--danger);font-size:var(--fs-sm)}
.legacy-exceptions ul{margin:4px 0 0;padding-inline-start:18px}
.legacy-panel .grid-scroll{margin-bottom:var(--s3)}
.legacy-panel tr.warn td{color:var(--danger)}
@media (max-width:640px){.legacy-fields{grid-template-columns:1fr}}

/* B14.1 «الدبوس»: pin a field's value as the user's default (out of the Tab order) */
.pin{border:0;background:none;cursor:pointer;opacity:.3;font-size:12px;line-height:1;padding:0 2px;vertical-align:middle;filter:grayscale(1)}
.pin:hover{opacity:.7}.pin.on{opacity:1;filter:none}.pin:disabled{cursor:default;opacity:.15}

/* B14.5 «البضاعة»: sortable headers and the column picker */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; font-weight: 600; }
.linklike:hover, .linklike:focus-visible { text-decoration: underline; }
.col-picker { position: relative; }
.col-picker > summary { list-style: none; }
/* B21.40 (A4-10) the shared «الأعمدة» panel of the registers (ColumnPicker.razor; filled by wrd.js) */
.col-picker-panel { position: absolute; inset-inline-end: 0; z-index: 20; min-width: 200px; max-height: 60vh; overflow: auto; padding: var(--s2); display: grid; gap: 4px; }
.col-picker-panel .chk { display: block; white-space: nowrap; }
.col-picker-panel [data-cols-all] { margin-top: var(--s1); justify-self: start; }
@media print { .col-picker { display: none !important; } }
.grid tr.selected td { background: var(--accent-soft, rgba(15,118,110,.12)); }

/* B15 print templates — the same fonts as the PDF: Droid Arabic Naskh for Arabic, Noto Sans for Latin / digits / punctuation */
@font-face { font-family: "SohoulaPrint"; src: url("fonts/DroidNaskh-Regular.ttf") format("truetype"); font-weight: 400;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "SohoulaPrint"; src: url("fonts/DroidNaskh-Bold.ttf") format("truetype"); font-weight: 700;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "SohoulaPrint"; src: url("fonts/NotoSans-Variable.ttf"); font-weight: 400;
  unicode-range: U+0000-05FF, U+2000-206F, U+20A0-20CF, U+2100-218F, U+2190-22FF; }
@font-face { font-family: "SohoulaPrint"; src: url("fonts/NotoSans-Variable.ttf"); font-weight: 700;
  unicode-range: U+0000-05FF, U+2000-206F, U+20A0-20CF, U+2100-218F, U+2190-22FF; }
.tpl-pages { font-family: "SohoulaPrint"; color: #000; }
/* B21.39-P — the design-system templates print in Cairo (SIL OFL 1.1): the repository's own variable file, under its own family name so
   the browser never picks the PC's old local CAIRO.TTF; the PDF uses static 400 / 700 instances of this same file */
@font-face { font-family: "SohoulaPrintCairo"; src: url("fonts/Cairo-Variable.ttf") format("truetype"); font-weight: 200 1000; font-style: normal; }
.tpl-pages.tpl-font-cairo { font-family: "SohoulaPrintCairo"; }
.tpl-pages.screen { display: flex; flex-direction: column; align-items: center; gap: 6mm; padding: 4mm 0; background: var(--bg-2, #eef1f4); }
.tpl-page { position: relative; background: #fff; overflow: hidden; box-sizing: border-box; }
.tpl-pages.screen .tpl-page { box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.tpl-cell { position: absolute; box-sizing: border-box; display: flex; overflow: hidden; padding: 0 1.2mm; line-height: 1.25; }
.tpl-cell img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; }
.tpl-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 60pt; font-weight: 700;
  color: rgba(200, 30, 30, .16); transform: rotate(-35deg); pointer-events: none; font-family: "SohoulaPrint"; }
@media print {
  .tpl-pages.screen { background: none; padding: 0; gap: 0; }
  .tpl-page { box-shadow: none !important; page-break-after: always; break-after: page; }
  .tpl-page:last-child { page-break-after: auto; break-after: auto; }
}
.print-menu-host { position: relative; display: inline-block; }
/* corrective review: the menu opens INTO the document from the print button (its start edge on the button's start edge) — opened the other way
   it ran past the document into the side rail, which clipped the template names and took their clicks */
.print-menu { position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + 4px); min-width: 380px; max-width: min(560px, 92vw); padding: var(--s2); display: flex; flex-direction: column; gap: 6px; }
.print-menu .pm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.print-menu .pm-row > label { flex: 1 1 200px; }          /* the template's name keeps its width; the actions wrap below it */
.print-menu .pm-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; }
.print-menu .pm-foot { border-top: 1px solid var(--line, #dde3e8); padding-top: 6px; justify-content: flex-start; }

/* B15.3 template editor */
.tpl-excel { margin-bottom: 8px; display: grid; gap: 6px; }
.tpl-excel-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tpl-ribbon { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--line, #dde3e8); border-radius: 8px; margin-bottom: 8px; background: var(--bg-1, #fff); }
.tpl-ribbon .inp.sm, .tpl-side .inp.sm { height: 28px; padding: 2px 6px; font-size: 12px; }
.tpl-ribbon .tpl-text { flex: 1 1 260px; min-width: 200px; }
.tpl-ribbon .btn.on, .tpl-editor .btn.on { background: var(--accent-soft, rgba(15,118,110,.15)); border-color: var(--accent, #0f766e); }
.tpl-sel { min-width: 64px; font-weight: 700; }
.tpl-color { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; cursor: pointer; }
.tpl-color input[type=color] { width: 26px; height: 24px; padding: 0; border: 0; background: none; }
.tpl-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
@media (max-width: 1100px) { .tpl-body { grid-template-columns: 1fr; } }
.tpl-grid-wrap { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tpl-grid { overflow: auto; max-height: 62vh; border: 1px solid var(--line, #dde3e8); border-radius: 6px; background: #fff; outline: none; font-family: "SohoulaPrint", var(--font); }
.tpl-grid:focus-visible { box-shadow: 0 0 0 2px var(--accent, #0f766e); }
.tpl-grid table { border-collapse: collapse; table-layout: fixed; }
.tpl-grid th { position: sticky; top: 0; background: #f2f5f7; font-size: 11px; font-weight: 600; border: 1px solid #e3e8ec; z-index: 2; user-select: none; }
.tpl-grid th.out-area { background: #fbe9e7; }
.tpl-grid th.rowh { position: sticky; inset-inline-start: 0; z-index: 1; text-align: start; padding: 0 4px; cursor: pointer; white-space: nowrap; }
.tpl-grid th.corner { inset-inline-start: 0; z-index: 3; }
.tpl-grid th .band { display: block; font-size: 9px; font-weight: 400; color: #5b6770; }
.tpl-grid th.band-Line { background: #e8f4ec; } .tpl-grid th.band-LineHeader { background: #e7f0fb; }
.tpl-grid th.band-PageHeader, .tpl-grid th.band-PageFooter { background: #f6efe1; }
.tpl-grid td { border: 1px dashed #e6eaee; padding: 0 3px; overflow: hidden; white-space: pre; max-width: 0; cursor: cell; position: relative; }
.tpl-grid td.sel { background-color: rgba(15, 118, 110, .10) !important; }
.tpl-grid td.active { outline: 2px solid var(--accent, #0f766e); outline-offset: -2px; }
.tpl-grid .tpl-img { color: #8a6fd0; font-size: 10px; margin-inline-end: 4px; }
.rz-col { position: absolute; top: 0; bottom: 0; inset-inline-end: -3px; width: 6px; cursor: col-resize; }
.rz-row { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; cursor: row-resize; }
.tpl-grid thead th { position: sticky; }
.tpl-grid thead th, .tpl-grid th.rowh { position: sticky; }
.tpl-side details { border: 1px solid var(--line, #dde3e8); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px; background: var(--bg-1, #fff); }
.tpl-side summary { font-weight: 700; cursor: pointer; }
.tpl-side label { display: block; font-size: 12px; margin-top: 6px; }
.tpl-vgroup { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.tpl-vgroup b { width: 100%; font-size: 12px; }
.tpl-var { border: 1px solid #cfd8de; background: #f7f9fa; border-radius: 12px; padding: 1px 8px; font-size: 11px; cursor: pointer; font-family: inherit; }
.tpl-var.cost { border-color: #d97706; background: #fff7ed; }
.tpl-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tpl-margins { display: flex; gap: 4px; } .tpl-margins .inp { width: 60px; }
.tpl-preview { border: 1px solid var(--line, #dde3e8); border-radius: 6px; overflow: auto; max-height: 75vh; }

.tpl-ribbon .inp, .tpl-ribbon select.inp { width: auto; flex: 0 0 auto; }
.tpl-ribbon .tpl-text { flex: 1 1 280px; width: auto; }
.tpl-side .inp { width: 100%; }

/* B17 visual review — large screens: the same layout and the same workflow, using the space and a slightly larger type.
   Below 1600px nothing changes. The item card measured 1320px wide on a 1920px screen (≈344px unused) with 14.5px text. */
@media (min-width:1600px){
  :root{ --fs:15.5px; --fs-sm:14px; --fs-xs:12.5px; --fs-lg:17px; --h-ctl:38px; --h-ctl-sm:32px; --h-row:36px; }
  .screen,.doc,.home{max-width:1560px}
}
@media (min-width:1920px){
  :root{ --fs:16px; --fs-sm:14.5px; --fs-xs:13px; --fs-lg:18px; --h-ctl:40px; --h-ctl-sm:33px; --h-row:37px; }
  .screen,.doc,.home{max-width:1640px}
}
.restore-steps{margin:var(--s2) var(--s4);padding-inline-start:var(--s4);display:grid;gap:4px;font-size:var(--fs-sm)}
/* B21.10A — the owner's service → stock-item confirmation on the item card */
.convert-dialog{display:block;border-color:#f59e0b}
.convert-dialog ul{margin:6px 0 8px;padding-inline-start:20px}
.convert-dialog table{margin:4px 0;max-width:420px}
.convert-dialog .neg{color:#b91c1c}

/* B21.26 — unified table system: sortable headers (3 states), active column, page-size choice, totals rows */
table.grid th.sortable{padding:0}
table.grid th.sortable .sort-btn{width:100%;min-height:36px;padding:6px 8px;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;font-weight:600;text-align:start;border-radius:0}
table.grid th.sortable.num .sort-btn{justify-content:center;direction:rtl}
table.grid th.sortable .sort-ind{opacity:.35;font-size:11px}
table.grid th.sortable.sort-active{background:var(--accent-weak,#e8f1fb)}
table.grid th.sortable.sort-active .sort-ind{opacity:1;color:var(--accent,#1d5fa3)}
table.grid th.sortable .sort-btn:focus-visible{outline:2px solid var(--accent,#1d5fa3);outline-offset:-2px;text-decoration:none}
.rf-pager .rf-pagesize{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto}
.rf-pager .rf-pagesize select{min-width:64px}
table.grid tfoot td{font-weight:600;background:var(--surface-2,#f6f8fa)}
table.grid tfoot tr.totals-page td{font-weight:400;color:var(--muted,#666)}
@media (max-width:560px){.rf-pager{flex-wrap:wrap;row-gap:6px}.rf-pager .rf-pagesize{margin-inline-start:0;width:100%}}

/* B21.38-U — registers and grids (shared; every screen that uses table.grid / .grid-scroll / SortHeader gets it):
   1. STICKY HEADERS that really stick. «position:sticky» on the header cells was there since 002, but two scroll containers
      cancelled it: the table's own overflow:hidden (kept only for its rounded corners) and .grid-scroll's overflow-x:auto (which
      makes the wrapper a vertical scroll container that never scrolls). overflow:clip keeps the corners without being a scroll
      container; .grid-scroll now scrolls both ways inside a bounded height, so the header row stays on top of a long register
      and the pager stays in sight. The document line grids keep their own rules (not touched here). */
table.grid{overflow:clip}
.grid-scroll{overflow:auto;max-height:max(340px,calc(100dvh - 250px));overscroll-behavior:contain;
  border-radius:var(--r)}
.grid-scroll > table.grid th{top:0}
table.grid thead th{box-shadow:0 1px 0 var(--border-2)}
/* 2. LONG TEXT: a long name / account / description no longer stretches its column across the screen (the reason for most
      horizontal scrolling) — the cell stays on one line (N10), is cut with «…», and shows the whole text as its tooltip
      (wrd.js); the column can be widened by dragging its header edge (3). Numbers and fields keep their own width. */
table.grid td:not(.num):not(.c):not(:has(input,select,textarea,button,[data-lookup])){max-width:var(--cell-max,28rem)}
table.grid[data-colw] td{max-width:none}
/* 3. COLUMN WIDTH (N10 #6): drag the edge of a sortable header; double-click it to return to the automatic width. Remembered per
      user and register in this browser (wrd.pref, the same mechanism as the goods columns); nothing is stored on the server. */
.col-grip{position:absolute;top:0;bottom:0;inset-inline-end:0;width:8px;cursor:col-resize;z-index:2;touch-action:none;user-select:none}
.col-grip::after{content:"";position:absolute;top:22%;bottom:22%;inset-inline-end:0;width:1px;background:transparent;transition:background .12s}
th:hover > .col-grip::after,th.col-resizing > .col-grip::after{background:var(--accent)}
th.col-resizing{cursor:col-resize}
@media (pointer:coarse){ .col-grip{width:14px} .col-grip::after{background:var(--border-2)} }
/* 4. WIDE SCREENS: a register uses the whole workspace width instead of a centred 1320–1640px column with its own scrollbar */
.screen[data-register]{max-width:none}
/* 5. PHONES: text cells may wrap (two or three short lines) so a long item / account name is read whole instead of being cut,
      and the grid needs less sideways scrolling; numbers stay on one line. */
@media (max-width:560px){
  table.grid{--cell-max:15rem}
  table.grid td:not(.num):not(.c):not(:has(input,select,textarea,button,[data-lookup])){white-space:normal;overflow-wrap:break-word;word-break:normal;min-width:7.5rem;line-height:1.35;padding-block:4px}
  table.grid td:has(> .badge:only-child){min-width:0}
  table.grid td .badge{white-space:nowrap}
  .grid-scroll > .grid{min-width:520px}
  .grid-scroll{max-height:max(300px,calc(100dvh - 190px))}
}
/* 6. PICKERS: an item name in the lookup list shows on up to two lines (whole for nearly every name), the full text as tooltip */
.lk-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35;overflow-wrap:anywhere}
/* B21.38-U: the shared item-group filter inside a register toolbar — same controls as the entry bars, toolbar height */
.screen-toolbar .eb-grp.in-toolbar{grid-column:auto;flex:0 1 auto}
.screen-toolbar .eb-grp.in-toolbar select.inp{height:var(--h-ctl-sm,32px);font-size:var(--fs-sm)}
@media (max-width:560px){ .screen-toolbar .eb-grp.in-toolbar{flex:1 1 100%} .screen-toolbar .eb-grp.in-toolbar select.inp{flex:1 1 140px;max-width:none} }
/* B21.38-U: printing a screen never cuts a bounded grid — every row and the whole text */
@media print{ .grid-scroll{max-height:none;overflow:visible} table.grid td{max-width:none!important;white-space:normal} }

/* B21.43: the header tagline — beside the company block, never taller than the logo (no extra header height) */
.pd-head .pd-tagline{margin-inline-start:auto;align-self:center;font-family:"SohoulaPrintCairo","Cairo",sans-serif;font-weight:700;font-size:11pt;color:#1a1a1a;
  border-bottom:0.6pt solid #fe0000;padding-bottom:1px;white-space:nowrap;line-height:1.3}