/* ═══════════════════════════════════════════════════════════════════════════
   TARTIB SHELL — OrderTech's look for every Tartib app
   brand/tartib-shell.css → /brand/tartib-shell.css
   (after tartib-tokens.css, tartib-ui.css and the page's own <style>)

   Hussain, 30 Sep 2026: "lets fully re-design Tartib (koobs.tartib.app) and the
   rest of the tenants and make the page Style and same as OrderTech which we
   make look like Zoho Inventory but with deferent themes to choose from, for
   Tartib HR console lets make it same style with a simple touch of deferance"
   — and "take some idea from zoho people". He chose the Zoho People rail for
   HR: a slim icon rail with labels, each module's pages as tabs under the bar.

   ⚠️ OPT-IN, AND NOTHING HAPPENS WITHOUT IT. Every rule is under html.zs, so a
   page that links this file and does not put class="zs" on <html> looks exactly
   as it did. The hub, Assets and Loyalty link the same tokens and components
   and move over one at a time by adding the class.

   ⚠️ ORDERTECH'S NUMBERS, NOT A LOOKALIKE. The tokens below are the ones in
   console.ordertech.me (measured off Zoho Inventory on 30 Sep 2026) — the same
   48px bar, 13px body, 11px column heads, 18px page titles, 32px buttons at
   radius 5 — and the ten themes are the same ten, token for token. Tartib's
   own component classes (.card, .btn, .pill, table…) are re-pointed at those
   tokens, so every screen that already exists changes with nothing rewritten.

   ⚠️ A THEME IS TOKENS, NOT A SECOND STYLESHEET — OrderTech learnt that one
   the hard way (its first dark mode was a copy of every rule and left white
   tiles). Themes and dark mode below only redefine --z-* and --tc-*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 · TOKENS — number 1, Classic, the structural reference ═══════════════
   On html.zs AND .zs-mini: the miniatures on the Theme tab carry data-style
   themselves, so each one paints with its own theme's real tokens. */
/* ⚠️ THE COMPANY'S COLOUR ON html ONLY. The page writes it there (inline, from
   /v1/branding); a miniature that defined its own would paint every theme on
   the Theme tab in this fallback blue instead of the company's colour. */
html.zs{ --tc:#1A73E8; --tc-strong:#1A73E8; }
html.zs, .zs-mini{
  --tc-deep:color-mix(in srgb,var(--tc-strong) 80%,#000);
  --tc-ink:color-mix(in srgb,var(--tc-strong) 72%,#000);
  --tc-tint:color-mix(in srgb,var(--tc) 14%,#fff);
  --tc-wash:color-mix(in srgb,var(--tc) 9%,#fff);

  --top:48px;
  --zr-w:72px;              /* the rail */
  --zt-h:44px;              /* the module's tabs */
  --z-bar:#21263C; --z-bar-line:#181C2E; --z-bar-rule:transparent; --z-bar-2:#333850;
  --z-bar-ink:#F0F0F0; --z-bar-mute:#C6C9D8; --z-bar-ph:#9EA2B8; --z-bar-hover:rgba(255,255,255,.10);
  --z-qc:var(--tc-strong); --z-qc-ink:#fff; --z-avatar:#6C5CE7; --z-av-ring:var(--z-bar);
  --z-side:#F7F7FE; --z-side-line:#EAEAFB; --z-side-ink:#181C2E; --z-side-sub:#181C2E; --z-side-mute:#4C526C;
  --z-side-hover:#EBEBF9; --z-side-open:#EAEAFB; --z-side-on:var(--tc-strong); --z-side-on-ink:#fff;
  --z-side-here:var(--tc-strong);
  --z-canvas:#FFFFFF; --z-pbar:#FFFFFF; --z-pbar-line:#EBEAF2; --z-pbar-h:56px; --z-pbar-rule:1px;
  --z-rail-col:#262B40; --z-pill:var(--tc-strong); --z-link:#1C5BD9;
  --z-line:#E4E4EC; --z-line-2:#EBEAF2; --z-head:#F9F9FB; --z-th-ink:#6C718A; --z-cell:#3A3F57;
  --z-ink:#212529; --z-sub:#6C718A;
  --z-bg:#FFFFFF; --z-hover:#F1F1FA; --z-sel:color-mix(in srgb,var(--tc) 9%,#fff); --z-field-line:#DDDDDD;
  --z-btn:#F5F5F5; --z-btn-line:#DDDDDD; --z-btn-hover:#ECECEC;
  --z-green:#1e8a4c; --z-blue:#1a66d6; --z-amber:#b45f06; --z-red:#c93b3b;
  --z-thumb:32px;
  --z-font:Almarai,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  /* one type scale, one icon scale — Zoho's, as OrderTech's */
  --t-xs:11px; --t-sm:12px; --t-md:13px; --t-lg:16px; --t-xl:18px; --t-2xl:22px; --t-3xl:28px; --t-4xl:36px;
  --ic-xs:10px; --ic-sm:14px; --ic-md:16px; --ic-lg:16px;
  --z-fs:var(--t-md); --z-lh:1.6;
  --z-radius:6px; --z-btn-radius:5px;
  --z-shadow:0 1px 2px rgba(31,30,29,.06),0 1px 3px rgba(31,30,29,.05);
  --z-rowpad:11px 15px; --z-thpad:10px 15px;
}

/* ── Tartib's own vocabulary, re-pointed at those ─────────────────────────
   ⚠️ ON BODY AS WELL AS HTML. tartib-tokens.css sets each module's accent on
   [data-app="hr"], and topbar() writes that attribute on <body> too — so a
   value set only on <html> is overridden one element down, and every
   var(--accent) in the page would still read HR's old teal. */
html.zs, html.zs body{
  --bg:var(--z-canvas); --surface:var(--z-bg); --surface-2:var(--z-hover);
  --line:var(--z-line); --line-soft:var(--z-line-2);
  --ink:var(--z-ink); --body:var(--z-ink); --mute:var(--z-sub);
  --accent:var(--tc-strong); --accent-deep:var(--z-link); --accent-ink:var(--tc-strong);
  --accent-wash:var(--tc-wash); --accent-on:#fff;
  --r:var(--z-radius); --r-sm:5px; --shadow:var(--z-shadow);
  --shadow-md:0 4px 14px rgba(20,24,40,.10); --shadow-lg:0 18px 48px rgba(20,24,40,.16);
  --sans:var(--z-font);
}

/* ══ 2 · THE THEMES ═════════════════════════════════════════════════════════
   The ten are OrderTech's, token for token, so a person who chose Night there
   finds Night here. People is Tartib HR's own, and its default: the Zoho People
   shell — a navy bar over a navy rail — around a soft grey page. */
:is(html.zs,.zs-mini)[data-style="people"]{
  --z-bar:#243152; --z-bar-line:#1B2642; --z-bar-2:rgba(255,255,255,.12); --z-bar-ph:#AEB7CC;
  --z-bar-ink:#F3F5FA; --z-bar-mute:#C9D0E0; --z-bar-hover:rgba(255,255,255,.12); --z-av-ring:#243152;
  --z-side:#1B2642; --z-side-line:#1B2642; --z-side-ink:#E4E8F2; --z-side-sub:#E4E8F2; --z-side-mute:#AFB8CD;
  --z-side-hover:rgba(255,255,255,.08); --z-side-open:rgba(255,255,255,.10);
  --z-side-here:color-mix(in srgb,var(--tc) 55%,#fff);
  --z-canvas:#F3F5F9; --z-pbar:#FFFFFF; --z-pbar-line:#E6E9F0; --z-head:#F7F8FB; --z-hover:#F2F5FA;
  --z-line-2:#ECEFF4;
}
:is(html.zs,.zs-mini)[data-style="classic"]{ /* the tokens above */ }
:is(html.zs,.zs-mini)[data-style="night"]{
  --z-bar:color-mix(in srgb,var(--tc) 36%,#0d0f0d); --z-bar-line:color-mix(in srgb,var(--tc) 26%,#000);
  --z-bar-ink:#F3F5F1; --z-bar-mute:#D3DBD3; --z-bar-2:rgba(255,255,255,.10); --z-bar-ph:#AAB6AA;
  --z-side:#FCFAED; --z-side-line:#ECE7D6; --z-side-hover:#F3EFDF; --z-side-open:#EFEAD8;
  --z-side-mute:color-mix(in srgb,var(--tc-strong) 70%,#333);
  --z-head:#FAF8EF; --z-hover:#F4F2E7; --z-line-2:#EEEADF; --z-link:var(--tc-ink); --z-avatar:#8C6D4A;
}
:is(html.zs,.zs-mini)[data-style="lightbar"]{
  --z-bar:#FFFFFF; --z-bar-line:#E6E8EC; --z-bar-rule:var(--tc); --z-bar-ink:#202124; --z-bar-mute:#5F6368;
  --z-bar-hover:#F1F3F4; --z-bar-2:#F1F3F4; --z-bar-ph:#80868B; --z-av-ring:#FFFFFF;
  --z-side:#FFFFFF; --z-side-line:#EEF0F2; --z-side-hover:#F4F5F6; --z-side-open:#F4F5F6; --z-side-mute:#5F6368;
  --z-side-on:color-mix(in srgb,var(--tc) 15%,#fff); --z-side-on-ink:var(--tc-ink);
  --z-canvas:#F8F9FA; --z-pbar:#FFFFFF; --z-head:#FFFFFF; --z-hover:color-mix(in srgb,var(--tc) 7%,#fff);
  --z-line-2:#EEF0F2; --z-link:#1A73E8;
}
:is(html.zs,.zs-mini)[data-style="brandband"]{ --z-pbar:var(--tc-wash); --z-pbar-line:var(--tc); --z-pbar-rule:2px; }
:is(html.zs,.zs-mini)[data-style="compact"]{
  --top:44px; --zr-w:64px; --zt-h:40px; --z-pbar-h:48px; --z-thpad:7px 12px; --z-rowpad:7px 12px; --z-thumb:28px;
}
:is(html.zs,.zs-mini)[data-style="darkside"]{
  --z-bar:#FFFFFF; --z-bar-line:#E6E8EC; --z-bar-ink:#202124; --z-bar-mute:#5F6368; --z-bar-hover:#F1F3F4;
  --z-bar-2:#F1F3F4; --z-bar-ph:#80868B; --z-av-ring:#FFFFFF;
  --z-side:#1F2433; --z-side-line:#1F2433; --z-side-ink:#D9DCE6; --z-side-sub:#C3C7D4; --z-side-mute:#9CA2B8;
  --z-side-hover:rgba(255,255,255,.07); --z-side-open:rgba(255,255,255,.09);
  --z-side-here:color-mix(in srgb,var(--tc) 55%,#fff);
}
:is(html.zs,.zs-mini)[data-style="rail"]{
  --z-side:#262B40; --z-side-line:#262B40; --z-side-ink:#E6E8F2; --z-side-sub:#E6E8F2; --z-side-mute:#A9AEC4;
  --z-side-hover:rgba(255,255,255,.07); --z-side-open:rgba(255,255,255,.12);
}
:is(html.zs,.zs-mini)[data-style="card"]{
  --z-canvas:#F1F2F6; --z-side:#F1F2F6; --z-side-line:#F1F2F6; --z-side-hover:#E6E8EF; --z-side-open:#E6E8EF;
}
:is(html.zs,.zs-mini)[data-style="brandtop"]{
  --z-bar:var(--tc-strong); --z-bar-line:var(--tc-deep); --z-bar-ink:#FFFFFF; --z-bar-mute:#F2F5F2;
  --z-bar-hover:rgba(255,255,255,.16); --z-bar-2:rgba(255,255,255,.18); --z-bar-ph:#E3E9E3;
  --z-qc:#FFFFFF; --z-qc-ink:var(--tc-deep); --z-av-ring:#FFFFFF; --z-avatar:#2D2A26;
  --z-side:#F6F7F9; --z-side-line:color-mix(in srgb,var(--tc) 12%,#fff); --z-side-hover:color-mix(in srgb,var(--tc) 8%,#fff);
  --z-side-open:color-mix(in srgb,var(--tc) 12%,#fff); --z-side-mute:color-mix(in srgb,var(--tc-strong) 80%,#222);
  --z-side-on:var(--tc-deep); --z-side-here:var(--tc-deep);
  --z-head:color-mix(in srgb,var(--tc) 5%,#fff); --z-hover:color-mix(in srgb,var(--tc) 9%,#fff);
  --z-line-2:color-mix(in srgb,var(--tc) 12%,#fff); --z-link:var(--tc-ink);
}

/* ── dark: one palette, OrderTech's warm greys ────────────────────────────
   Every colour above is a token, so this is the whole of dark mode for every
   theme; each theme keeps only what makes it itself (its bar colour, its line,
   its band, its shape). The semantic four lift the way OrderTech's do — the
   light inks measure under 2:1 on a near-black panel. */
html.zs[data-theme="dark"]{
  --z-bar:#141827; --z-bar-line:#0B0E18; --z-bar-2:#262c44; --z-bar-ink:#F0F0F0; --z-bar-mute:#C6C9D8; --z-bar-ph:#9EA2B8;
  --z-bar-hover:rgba(255,255,255,.10); --z-bar-rule:transparent; --z-av-ring:var(--z-bar); --z-qc:var(--tc-strong); --z-qc-ink:#fff;
  --z-bg:#1B1916; --z-canvas:#131210; --z-hover:rgba(255,255,255,.045); --z-field-line:#3A352E;
  --z-sel:color-mix(in srgb,var(--tc) 22%,#1B1916);
  --z-side:#1B1916; --z-side-line:#332F29; --z-side-ink:#F0EDE6; --z-side-sub:#F0EDE6; --z-side-mute:#A6A099;
  --z-side-hover:rgba(255,255,255,.06); --z-side-open:rgba(255,255,255,.08);
  --z-side-on:var(--tc-strong); --z-side-on-ink:#fff; --z-side-here:color-mix(in srgb,var(--tc) 55%,#fff);
  --z-pbar:#1B1916; --z-pbar-line:#332F29;
  --z-line:#332F29; --z-line-2:#28241F; --z-head:#161512; --z-th-ink:#A6A099;
  --z-cell:#F0EDE6; --z-ink:#F0EDE6; --z-sub:#A6A099; --z-link:#8ab4f8;
  --z-btn:#221F1B; --z-btn-line:#3A352E; --z-btn-hover:rgba(255,255,255,.06);
  --tc-tint:color-mix(in srgb,var(--tc) 24%,#1B1916); --tc-wash:color-mix(in srgb,var(--tc) 14%,#1B1916);
  --tc-ink:color-mix(in srgb,var(--tc) 50%,#fff);
  --z-green:#81c995; --z-blue:#8ab4f8; --z-amber:#fdd663; --z-red:#f28b82;
}
html.zs[data-theme="dark"], html.zs[data-theme="dark"] body{
  --ok:#81C995; --ok-bg:#1E3A2A; --ok-line:#3C6B4A;
  --warn:#E0A44E; --warn-bg:#34260F; --warn-line:#6B4E1E;
  --hold:#E8D44D; --hold-bg:rgba(201,168,0,.16); --hold-line:#C9A800;
  --bad:#F28B82; --bad-bg:#3A1F1E; --bad-line:#7A3A36;
  --info:#8AB4F8; --info-bg:#1A2A45; --info-line:#35507D;
}
html.zs[data-style="brandtop"][data-theme="dark"]{
  --z-bar:var(--tc-strong); --z-bar-line:var(--tc-deep); --z-bar-ink:#FFFFFF; --z-bar-mute:#F2F5F2;
  --z-bar-hover:rgba(255,255,255,.16); --z-bar-2:rgba(255,255,255,.18); --z-bar-ph:#E3E9E3;
  --z-qc:#FFFFFF; --z-qc-ink:var(--tc-deep); --z-av-ring:#FFFFFF; --z-side-on:var(--tc-deep);
}
html.zs[data-style="people"][data-theme="dark"]{ --z-bar:#1A2238; --z-side:#141B2E; --z-side-line:#141B2E; }
html.zs[data-style="night"][data-theme="dark"]{ --z-bar:color-mix(in srgb,var(--tc) 36%,#0d0f0d); --z-bar-2:rgba(255,255,255,.10); }
html.zs[data-style="lightbar"][data-theme="dark"]{ --z-bar-rule:var(--tc); }
html.zs[data-style="brandband"][data-theme="dark"]{ --z-pbar:var(--tc-wash); --z-pbar-line:var(--tc); }
html.zs[data-style="card"][data-theme="dark"]{ --z-canvas:#131210; --z-side:#131210; --z-side-line:#131210; }

/* ══ 3 · THE PAGE ═══════════════════════════════════════════════════════════ */
html.zs body{font-family:var(--z-font);font-size:var(--z-fs);line-height:var(--z-lh);color:var(--z-ink);
  background:var(--z-canvas);letter-spacing:0}
html.zs[dir="rtl"] body{font-family:var(--z-font)}
html.zs body :is(button,input,select,textarea){font-family:inherit}
html.zs a{color:var(--z-link)}
html.zs :is(button:not(:disabled),a[href],[onclick],summary,select,label[for],tr.click,.stat.go){cursor:pointer}

/* ── the top bar: TartibUI's markup, OrderTech's bar ───────────────────── */
/* ⚠️ #chrome IS NOT A BOX. chrome() draws the bar inside it, and a sticky
   element cannot leave its parent: inside a box exactly its own height the
   bar never stuck. Scrolled past 48px it left with the page, while the tab
   row and the page bar, sticky at var(--top), hung 48px down with the page
   showing through above them. Without a box of its own, the bar's parent is
   the page and `position:sticky` holds it. #chrome is only ever filled, never
   measured, and its other children (the launcher) are fixed. (1 Oct 2026) */
html.zs body #chrome{display:contents}
html.zs body .top{height:var(--top);min-height:var(--top);background:var(--z-bar);color:var(--z-bar-ink);
  border:0;border-bottom:1px solid var(--z-bar-line);box-shadow:inset 0 3px 0 var(--z-bar-rule);
  padding:0 12px;gap:10px;z-index:50}
/* ⚠️ ONLY WHERE THE RAIL CARRIES THE MARK. A page that opts in without a rail
   (the Workspace) keeps tartib-ui.css's own rule: the mark in the bar where
   there is no side menu, hidden where the side menu's header has one. */
html.zs body:has(.zrail) .top :is(.top-div,.top-mark,.rail-btn){display:none!important}
html.zs body .top .brand{gap:8px;min-width:0;flex:0 1 auto}
html.zs body .top .logo{height:26px;max-width:110px;background:rgba(255,255,255,.92);border-radius:5px;padding:2px 4px}
html.zs body .top .brand .co{font-size:var(--t-md);font-weight:700;color:var(--z-bar-ink);max-width:220px}
html.zs body .top .top-sep{color:var(--z-bar-mute);font-size:var(--t-md);margin:0 -2px;opacity:.7}
html.zs body .top .ttl{font-size:var(--t-md);font-weight:400;color:var(--z-bar-mute);white-space:nowrap}
/* icon buttons: 32px targets, 16px drawings — Zoho's bell and gear */
html.zs body .top .key-btn, html.zs body .top .zs-ib{width:32px;height:32px;border-radius:8px;border:0;background:transparent;
  color:var(--z-bar-ink);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background-color .2s}
html.zs body .top .key-btn:hover, html.zs body .top .zs-ib:hover, html.zs body .top .zs-ib[aria-expanded="true"]{background:var(--z-bar-hover)}
html.zs body .top .key-btn svg, html.zs body .top .zs-ib svg{width:var(--ic-lg);height:var(--ic-lg)}
/* the grid of apps goes to the far end, where OrderTech keeps it */
html.zs body .top > .key-btn:first-child{order:20}
html.zs body .top .menu-btn{order:-1;display:none}
@media(max-width:760px){ html.zs body:has(.side) .top .menu-btn{display:inline-flex} }
/* the search: 34px, radius 7, the glass inside on the left */
html.zs body .top .zs-sr{position:relative;flex:0 1 300px;min-width:120px;margin-inline-start:auto}
html.zs body .top .zs-sr svg{position:absolute;inset-inline-start:12px;top:50%;width:var(--ic-md);height:var(--ic-md);
  margin-top:calc(var(--ic-md) / -2);color:var(--z-bar-ph);pointer-events:none}
html.zs body .top .zs-sr input#zs-q{width:100%;height:34px;margin:0;background:var(--z-bar-2);border:1px solid transparent;border-radius:7px;
  padding:0 12px 0 38px;font-size:var(--t-md);color:var(--z-bar-ink);transition:box-shadow .2s,background-color .2s}
html.zs[dir="rtl"] body .top .zs-sr input#zs-q{padding:0 38px 0 12px}
html.zs body .top .zs-sr input#zs-q::placeholder{color:var(--z-bar-ph)}
html.zs body .top .zs-sr input#zs-q:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 60%,transparent)}
html.zs body .top .zs-sr input#zs-q:focus{background:#fff;color:#212529;border-color:#fff;outline:0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--tc) 45%,transparent)}
html.zs body .top .zs-sr:focus-within svg{color:#6C718A}
/* quick create: the one filled button on the bar */
html.zs body .top .zs-qc{width:34px;height:34px;border-radius:var(--z-btn-radius);background:var(--z-qc);color:var(--z-qc-ink)}
html.zs body .top .zs-qc:hover, html.zs body .top .zs-qc[aria-expanded="true"]{background:var(--z-qc);filter:brightness(1.08)}
/* Auto / Light / Dark, and the language: two small segmented controls */
html.zs body .top :is(.zs-thm,.lang){display:inline-flex;align-items:center;flex:none;gap:0;padding:0;background:transparent;
  border:1px solid color-mix(in srgb,var(--z-bar-mute) 35%,transparent);border-radius:var(--z-btn-radius);overflow:hidden}
html.zs body .top :is(.zs-thm,.lang) button{height:26px;padding:0 9px;border:0;border-radius:0;background:transparent;
  font-size:var(--t-sm);font-weight:400;line-height:1;color:var(--z-bar-mute);transition:background-color .2s,color .2s}
html.zs body .top :is(.zs-thm,.lang) button + button{border-inline-start:1px solid color-mix(in srgb,var(--z-bar-mute) 35%,transparent)}
html.zs body .top :is(.zs-thm,.lang) button:hover{color:var(--z-bar-ink);background:var(--z-bar-hover)}
html.zs body .top :is(.zs-thm,.lang) button.on{background:var(--z-bar-hover);color:var(--z-bar-ink);font-weight:700}
/* the account: 32px, ringed in the tenant's colour */
html.zs body .top .prof-chip{padding:0;gap:4px}
html.zs body .top .prof-chip:hover{background:transparent}
html.zs body .top .prof-av{width:32px;height:32px;border:0;font-size:var(--t-sm);
  box-shadow:0 0 0 2px var(--z-av-ring),0 0 0 3.5px var(--tc)}
html.zs body .top .prof-caret{display:none}
/* the dropdowns hang from the bar, in the page's colours */
html.zs body .prof-panel, html.zs body .zs-menu{background:var(--z-bg);color:var(--z-ink);border:1px solid var(--z-line);
  border-radius:6px;box-shadow:0 10px 30px rgba(17,24,39,.18)}
html.zs body .prof-link{font-size:var(--t-md);font-weight:400;color:var(--z-ink)}
html.zs body .prof-link:hover{background:var(--z-hover)}
html.zs body .prof-nm{font-size:var(--t-md);color:var(--z-ink)}
html.zs body .prof-em{font-size:var(--t-sm);color:var(--z-sub)}
html.zs body .prof-sep{border-top-color:var(--z-line-2)}
html.zs body .prof-tag{background:var(--tc-tint);color:var(--tc-ink)}
/* quick create's menu */
html.zs body .zs-menu{position:fixed;top:calc(var(--top) + 4px);z-index:80;width:300px;padding:8px 6px;display:grid;gap:2px}
html.zs body .zs-menu[hidden]{display:none}
html.zs body .zs-menu .qh{padding:6px 10px 4px;font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--z-sub)}
html.zs body .zs-menu button{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px;border:0;border-radius:var(--z-btn-radius);
  background:transparent;font-size:var(--t-md);color:var(--z-ink);text-align:start;white-space:nowrap}
html.zs body .zs-menu button:hover, html.zs body .zs-menu button:focus-visible{background:var(--z-hover);outline:0}
html.zs body .zs-menu button .ic{color:var(--tc-strong)}
html.zs body .zs-menu button .ic svg{width:var(--ic-sm);height:var(--ic-sm);filter:none}
/* the app launcher and the language menu keep their shape and take the palette */
html.zs body .apps-box{background:var(--z-bg);color:var(--z-ink);border-color:var(--z-line)}
/* the launcher's settings links read as rows, not as links in a sentence — as on OrderTech's keypad */
html.zs body .apps-box .apps-ft a{color:var(--z-ink)}

/* ── the rail: Zoho People's, in the theme's side colours ───────────────── */
html.zs .zrail{display:none}
@media(min-width:761px){
  /* OrderTech's grouped menu stays in the page for the phone drawer; on a
     desktop the rail replaces it */
  /* ⚠️ :has(> .zrail) ON EVERY LAYOUT RULE: a page that opts in without the
     rail (the Workspace's account pages keep their 260px menu) must keep its
     own layout. */
  html.zs body .wrap:has(> .zrail) > nav.side{display:none}
  /* ⚠️ :has(.zrail), OR tartib-ui.css's `body:has(.side):not(.rail-off) .top`
     (0,3,1) keeps the bar 260px in, beside a menu that is no longer there. */
  html.zs body:has(.zrail) .top{margin-inline-start:var(--zr-w);position:sticky;top:0}
  html.zs body .wrap:has(> .zrail){display:block}
  html.zs body .wrap:has(> .zrail) > .main{margin-inline-start:var(--zr-w)}
  html.zs .zrail{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:55;width:var(--zr-w);display:flex;flex-direction:column;
    align-items:center;gap:2px;padding:0 0 10px;background:var(--z-side);border-inline-end:1px solid var(--z-side-line);
    overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  html.zs .zrail::-webkit-scrollbar{display:none}
  html.zs .zrail .zr-mark{flex:none;display:flex;align-items:center;justify-content:center;width:100%;height:var(--top);
    margin-bottom:6px}
  html.zs .zrail .zr-mark img{width:30px;height:30px;border-radius:8px;display:block}
  html.zs .zrail .zr-it{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    width:calc(var(--zr-w) - 8px);min-height:58px;padding:7px 2px 6px;border:0;border-radius:8px;background:transparent;
    color:var(--z-side-mute);font-size:var(--t-xs);font-weight:400;line-height:1.2;text-align:center;
    transition:background-color .2s,color .2s}
  html.zs .zrail .zr-it .ic{width:34px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    transition:background-color .2s,color .2s}
  html.zs .zrail .zr-it .ic svg{width:19px;height:19px;filter:none;stroke-width:1.7}
  html.zs .zrail .zr-it span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.zs .zrail .zr-it:hover{background:var(--z-side-hover);color:var(--z-side-ink)}
  html.zs .zrail .zr-it.on{color:var(--z-side-ink);font-weight:700}
  html.zs .zrail .zr-it.on .ic{background:var(--z-side-on);color:var(--z-side-on-ink)}
  html.zs .zrail .zr-sp{flex:1 1 auto;min-height:10px}
  html.zs[data-style="compact"] .zrail .zr-it{min-height:52px;padding:5px 2px}
}

/* ── the module's pages, as tabs under the bar ─────────────────────────── */
html.zs .ztabs{display:flex;align-items:stretch;gap:2px;height:var(--zt-h);margin:0;padding:0 16px;
  background:var(--z-pbar);border-bottom:1px solid var(--z-pbar-line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  position:sticky;top:var(--top);z-index:30}
html.zs .ztabs::-webkit-scrollbar{display:none}
html.zs .ztabs[hidden]{display:none}
html.zs .ztabs .zt-t{flex:none;display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 12px;margin:0;border:0;border-radius:0;
  background:transparent;font-size:var(--t-md);font-weight:400;color:var(--z-sub);white-space:nowrap;
  box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
html.zs .ztabs .zt-t:hover{color:var(--z-ink)}
html.zs .ztabs .zt-t.on{color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}
/* a page's own tabs, lifted into the bar, wear the same underline */
html.zs .ztabs .tabs{display:flex;align-items:stretch;gap:2px;height:100%;margin:0;padding:0;border:0;background:transparent;box-shadow:none}
html.zs .ztabs .tabs .tab{height:100%;min-height:0;padding:0 12px;margin:0;border:0;border-radius:0;background:transparent;
  font-size:var(--t-md);font-weight:400;color:var(--z-sub);box-shadow:inset 0 -2px 0 transparent}
html.zs .ztabs .tabs .tab:hover{color:var(--z-ink);background:transparent}
html.zs .ztabs .tabs .tab.on{background:transparent;color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}

/* ── the work area ─────────────────────────────────────────────────────── */
html.zs body .wrap:has(> .zrail) > .main{padding:0 20px 48px;background:var(--z-canvas);min-height:calc(100vh - var(--top))}
html.zs body .wrap > .main > .ztabs{margin:0 -20px 16px}
/* breadcrumbs only on a record — a top-level page has its tab */
html.zs body .main .crumbs{margin:12px 0 -4px;font-size:var(--t-sm);min-height:0}
html.zs body .main .crumbs button, html.zs body .main .crumbs a{font-size:var(--t-sm);color:var(--z-link)}
html.zs body .main .crumbs .here{font-weight:700;color:var(--z-ink)}

/* ══ THE PAGE BAR ═══════════════════════════════════════════════════════════
   OrderTech's: the page's title on the left at 18px and its own buttons on the
   right, on a white band that runs the width of the work area. zsAfter() in
   the page marks the header a screen ALREADY draws — .pgh, a title row, or an
   h1 with its lede — as .zpbar; nothing is rebuilt, so every onclick stays. */
html.zs body .main .zpbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;min-height:var(--z-pbar-h);
  margin:0 -20px 16px;padding:8px 20px;box-sizing:border-box;background:var(--z-pbar);
  border-bottom:var(--z-pbar-rule) solid var(--z-pbar-line)}
/* ⚠️ ONLY UNDER A TAB ROW THAT SHOWS. The −16px cancels the row's 16px
   bottom margin so the bar sits on the tabs; a hidden row (All Settings, a
   one-page module) has no margin to cancel, and the bar slid 16px under the
   top bar. A tall window hid it — the sticky rule below holds the bar at
   var(--top) — but under 720px the bar is not sticky: Fatemeh's laptop
   (Windows at 125%, a bookmarks bar, ~696px of page) showed All Settings cut
   in half, 1 Oct 2026. */
html.zs body .main .ztabs:not([hidden]) + .zpbar{margin-top:-16px}
html.zs body .main .zpbar h1, html.zs body .main .zpbar > h2{flex:0 1 auto;margin:0;font-size:var(--t-xl);font-weight:700;
  letter-spacing:0;line-height:1.4;color:var(--z-ink);min-width:0}
html.zs body .main .zpbar h1 .ic, html.zs body .main .zpbar h2 .ic{color:var(--z-sub)}
html.zs body .main .zpbar :is(.mut,.lede){margin:0;font-size:var(--t-sm);color:var(--z-sub);line-height:1.4}
html.zs body .main .zpbar .lede{flex:1 1 100%;order:3;margin-top:-6px;max-width:90ch}
html.zs body .main .zpbar > :is(.btn,.btn-act,details,.row,div:last-child:not(.lede)):not(:first-child){margin-inline-start:auto}
html.zs body .main .zpbar > :is(.btn,.btn-act,details) ~ :is(.btn,.btn-act,details){margin-inline-start:0}
@media(min-width:761px) and (min-height:720px){
  html.zs body .main .zpbar{position:sticky;top:calc(var(--top) + var(--zt-h));z-index:25}
  html.zs body .main.zs-notabs .zpbar{top:var(--top)}
}

/* ══ 4 · THE COMPONENTS, IN ORDERTECH'S LOOK ═══════════════════════════════ */
html.zs body h1{font-size:var(--t-xl);font-weight:700;letter-spacing:0;color:var(--z-ink)}
html.zs body h2{font-size:var(--t-lg);font-weight:700;color:var(--z-ink)}
html.zs body .lede{font-size:var(--t-sm);color:var(--z-sub)}
html.zs body .mut{color:var(--z-sub)}

/* cards: flat panels with a 1px lift */
html.zs body .card{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow);
  padding:14px 16px}
html.zs body .card-t{font-size:var(--t-lg);font-weight:700;color:var(--z-ink)}
html.zs body .card-t :is(a,.lnk){font-size:var(--t-sm);font-weight:400;color:var(--z-link)}
html.zs body .sect{background:var(--z-bg);border-color:var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow)}

/* stat tiles: white, the number in the severity's colour */
html.zs body .stats{gap:12px}
html.zs body .stat{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow);
  padding:12px 14px}
html.zs body .stat .k{font-size:var(--t-sm);font-weight:400;letter-spacing:0;text-transform:none;color:var(--z-sub)}
html.zs body .stat .v{font-size:var(--t-2xl);font-weight:700;letter-spacing:0;color:var(--z-ink)}
html.zs body .stat .s{font-size:var(--t-sm);color:var(--z-sub)}
/* ⚠️ THE SEVERITY'S 3px TOP EDGE IS tartib-ui.css's, AND IT STAYS A BORDER.
   A first pass drew it as an inset shadow over a 1px hairline — the same
   picture, and look-check (which reads border-top) caught that the colour the
   tile is known by was no longer where it is measured. Only the plain tiles'
   border is re-pointed; a tile with a severity keeps its coloured 3px edge
   (restated here because the hairline above outranks tartib-ui.css). */
html.zs body .stat:is(.bad,.warn,.ok,.info,.hold,.teal,.violet,.cyan){border-top-width:3px}
html.zs body .stat.bad{border-top-color:var(--bad-line)} html.zs body .stat.warn{border-top-color:var(--warn-line)}
html.zs body .stat.ok{border-top-color:var(--ok-line)} html.zs body .stat.info{border-top-color:var(--info-line)}
html.zs body .stat.hold{border-top-color:var(--hold-line)} html.zs body .stat.teal{border-top-color:var(--cat-7)}
html.zs body .stat.violet{border-top-color:var(--cat-2)} html.zs body .stat.cyan{border-top-color:var(--cat-8)}
/* the severity still speaks in the label and the number, as tartib-ui.css has it */
html.zs body .stat.bad :is(.k,.v){color:var(--bad)} html.zs body .stat.warn :is(.k,.v){color:var(--warn)}
html.zs body .stat.ok :is(.k,.v){color:var(--ok)} html.zs body .stat.info :is(.k,.v){color:var(--info)}
html.zs body .stat.hold :is(.k,.v){color:var(--hold)} html.zs body .stat.teal :is(.k,.v){color:var(--cat-7)}
html.zs body .stat.violet :is(.k,.v){color:var(--cat-2)} html.zs body .stat.cyan :is(.k,.v){color:var(--cat-8)}
html.zs body .stat.go:hover{box-shadow:0 2px 10px rgba(20,24,40,.10)}
html.zs body .ic svg{filter:none}

/* tables: 11px capitals on the header band, 13px cells, one line each */
html.zs body table{font-size:var(--t-md);border-collapse:collapse}
html.zs body th{background:var(--z-head);color:var(--z-th-ink);font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;padding:var(--z-thpad);border-bottom:1px solid var(--z-line-2);white-space:nowrap;line-height:1.5}
html.zs body td{padding:var(--z-rowpad);border-bottom:1px solid var(--z-line-2);color:var(--z-cell);font-size:var(--z-fs);
  line-height:1.5;vertical-align:middle}
html.zs body tbody tr:hover, html.zs body table tr:hover > td{background:var(--z-hover)}
html.zs body tr.click:hover td{background:var(--z-hover)}
html.zs body tr.click:hover :is(.emp-nm b, .emp-nm a, td > b:first-child){text-decoration:underline;text-underline-offset:3px}
html.zs body .scroll{border-radius:0}
/* ⚠️ ONE LINE PER ROW — Hussain, 30 Sep: "remove the second raw under the item
   and others and keep them as a column". What was a second line is its own
   column now (see the page); a cell that still carries two words keeps them on
   one line and says the rest on hover. */
html.zs body .main td{white-space:nowrap}
html.zs body .main td[colspan]:not([colspan="1"]), html.zs body .main td.wrap, html.zs body .main td :is(textarea,.msg){white-space:normal}
html.zs body .main .tabs.zs-dup{display:none}

/* pills: status words in a soft wash, as OrderTech's badges */
html.zs body .pill{font-size:var(--t-sm);font-weight:500;border-radius:4px;padding:1px 7px;line-height:1.6}
/* ⚠️ THE CLASSLESS PILL'S GREY IS A LITERAL (#EEF1F3 in tartib-ui.css), so in
   dark it stayed a light chip with grey ink on it. Only the classless one is
   touched — :not() keeps every severity pill's own wash. */
html.zs body .pill:not(.ok,.warn,.bad,.hold,.info,.teal,.violet,.cyan){background:color-mix(in srgb,var(--z-sub) 12%,var(--z-bg));
  color:color-mix(in srgb,var(--z-sub) 80%,var(--z-ink))}

/* buttons: 32px, radius 5, the primary in the tenant's colour */
html.zs body .btn, html.zs body .btn-act{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;
  padding:0 12px;border:1px solid var(--z-pill);border-radius:var(--z-btn-radius);background:var(--z-pill);color:#fff;
  font-size:var(--t-md);font-weight:400;line-height:1;box-shadow:none;white-space:nowrap;
  transition:background-color .2s,border-color .2s,box-shadow .2s}
html.zs body .btn:hover, html.zs body .btn-act:hover{background:var(--tc-deep);border-color:var(--tc-deep);
  box-shadow:0 2px 6px color-mix(in srgb,var(--tc) 35%,transparent)}
html.zs body .btn:active{transform:none}
html.zs body .btn.lime, html.zs body .btn-act{background:var(--z-pill);border-color:var(--z-pill);color:#fff}
html.zs body .btn.ghost, html.zs body summary.btn{background:var(--z-btn);border-color:var(--z-btn-line);color:var(--z-ink)}
html.zs body .btn.ghost:hover, html.zs body summary.btn:hover{background:var(--z-btn-hover);border-color:var(--z-btn-line);box-shadow:none}
html.zs body .btn.danger{background:var(--z-btn);border-color:var(--z-btn-line);color:var(--z-red)}
html.zs body .btn.danger:hover{background:color-mix(in srgb,var(--z-red) 10%,var(--z-bg));border-color:var(--z-red);box-shadow:none}
html.zs body .btn.sm{height:28px;padding:0 10px;font-size:var(--t-sm)}
html.zs body .btn[disabled]{opacity:.5;box-shadow:none}
html.zs body .btn:focus-visible, html.zs body .btn-act:focus-visible{outline:2px solid color-mix(in srgb,var(--tc) 50%,transparent);outline-offset:2px}

/* fields: 32px, a hairline, the tenant's colour on focus */
html.zs body label{font-size:var(--t-sm);font-weight:400;color:var(--z-sub)}
html.zs body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea){
  font-size:var(--t-md);color:var(--z-ink);background:var(--z-bg);border:1px solid var(--z-field-line);border-radius:4px}
html.zs body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),select){min-height:32px}
html.zs body :is(input,select,textarea):focus{border-color:var(--z-pill);box-shadow:0 0 0 2px var(--z-sel);outline:none}
html.zs body :is(input[type="checkbox"],input[type="radio"]){accent-color:var(--tc-strong)}

/* a page's own tabs: an underline, as the reference draws them */
html.zs body .main .tabs{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 14px;padding:0;background:transparent;border:0;
  border-bottom:1px solid var(--z-line);border-radius:0;box-shadow:none}
html.zs body .main .tabs .tab{height:36px;min-height:0;padding:0 12px;margin:0 0 -1px;border:0;border-radius:0;background:transparent;
  font-size:var(--t-md);font-weight:400;color:var(--z-sub);box-shadow:inset 0 -2px 0 transparent}
html.zs body .main .tabs .tab:hover{color:var(--z-ink);background:transparent}
html.zs body .main .tabs .tab.on{background:transparent;color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}
html.zs body .etabs{display:flex;flex-wrap:wrap;gap:2px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--z-line);
  border-radius:0;box-shadow:none}
html.zs body .etabs .etab{height:36px;padding:0 12px;margin:0 0 -1px;border:0;border-radius:0;background:transparent;
  font-size:var(--t-md);font-weight:400;color:var(--z-sub);box-shadow:inset 0 -2px 0 transparent}
html.zs body .etabs .etab:hover{color:var(--z-ink);background:transparent}
html.zs body .etabs .etab.on{background:transparent;color:var(--z-ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--z-pill)}
html.zs body .seg{border:1px solid var(--z-field-line);border-radius:var(--z-btn-radius);background:var(--z-bg);padding:0;gap:0;overflow:hidden}
html.zs body .seg button{height:30px;border:0;border-radius:0;background:transparent;font-size:var(--t-md);font-weight:400;color:var(--z-sub);padding:0 12px}
html.zs body .seg button + button{border-inline-start:1px solid var(--z-field-line)}
html.zs body .seg button.on{background:var(--tc-tint);color:var(--tc-ink);font-weight:700}

/* dialogs: a white sheet, a hairline under the title */
html.zs body .dmask{background:rgba(16,20,32,.45)}
html.zs body .dbox{background:var(--z-bg);color:var(--z-ink);border:1px solid var(--z-line);border-radius:8px;
  box-shadow:0 18px 48px rgba(16,20,32,.22)}
html.zs body .dbox h2{font-size:var(--t-lg)}

/* notes */
html.zs body .msg{font-size:var(--t-sm);border-radius:5px}
html.zs body .backlink{font-size:var(--t-md);color:var(--z-link)}
html.zs body .spin{border-color:var(--z-line);border-top-color:var(--tc-strong)}

/* the employee file's header */
html.zs body .ehead{background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow)}

/* ══ 5 · THE PHONE ══════════════════════════════════════════════════════════
   The rail is a desktop thing. On a phone the bar, the module's tabs (which
   scroll sideways) and the bottom bar and drawer the page already had. */
@media(max-width:760px){
  html.zs body .top{padding:0 8px;gap:6px}
  html.zs body .top .zs-sr, html.zs body .top .zs-thm, html.zs body .top .ttl, html.zs body .top .top-sep{display:none}
  html.zs body .wrap:has(> .zrail) > .main{padding:0 12px calc(78px + env(safe-area-inset-bottom))}
  html.zs body .wrap > .main > .ztabs{margin:0 -12px 12px;top:var(--top)}
  html.zs body .main .zpbar{margin:0 -12px 12px;padding:8px 12px}
  html.zs body .side{background:var(--z-bg)}
  /* ⚠️ THE BOTTOM BAR'S .tab IS NOT THE PAGE'S .tab. HR's own sheet styles a
     page tab as a bordered pill that fills when on, and the same class name on
     the bar picked that up: a green blob with its label white on green. */
  html.zs body .tabbar{background:var(--z-bg);border-top-color:var(--z-line)}
  html.zs body .tabbar .tab{color:var(--z-sub);background:transparent;border:0;border-radius:0;box-shadow:none;margin:0}
  html.zs body .tabbar .tab:hover{background:transparent}
  html.zs body .tabbar .tab.on{color:var(--tc-strong);background:transparent;border:0;font-weight:700}
  html.zs body .nav{color:var(--z-ink)}
  html.zs body .nav.on{background:var(--tc-strong);color:#fff}
}

/* ══ 6 · THE THEME TAB ═════════════════════════════════════════════════════ */
html.zs .zthm-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:10px}
html.zs .zthm-opt{position:relative;display:flex;flex-direction:column;gap:8px;text-align:start;width:100%;padding:8px 8px 10px;
  border:1px solid var(--z-line);border-radius:8px;background:var(--z-bg);color:var(--z-ink);transition:border-color .15s,box-shadow .15s}
html.zs .zthm-opt:hover{border-color:var(--z-field-line);box-shadow:0 2px 8px rgba(20,24,40,.08)}
html.zs .zthm-opt.on{border-color:var(--z-pill);box-shadow:inset 0 0 0 1px var(--z-pill)}
html.zs .zthm-opt b{display:flex;align-items:center;gap:6px;font-size:var(--t-md);line-height:1.4}
html.zs .zthm-opt b i{font-style:normal;font-weight:400;color:var(--z-sub)}
html.zs .zthm-opt b em{font-style:normal;font-weight:700;font-size:var(--t-xs);padding:1px 7px;border-radius:9px;
  background:var(--tc-tint);color:var(--tc-ink)}
html.zs .zthm-opt small{display:block;font-size:var(--t-sm);line-height:1.45;color:var(--z-sub)}
html.zs .zthm-opt .tick{position:absolute;top:-8px;inset-inline-end:-8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--z-pill);color:#fff;font-size:12px;font-weight:700}
html.zs .zthm-opt .tick:empty{display:none}
/* the miniature: the theme's own tokens, drawn as bar, rail, tabs and rows */
.zs-mini{display:grid;grid-template-columns:22px 1fr;grid-template-rows:14px 10px 1fr;height:118px;border-radius:6px;overflow:hidden;
  border:1px solid rgba(20,24,40,.10);background:var(--z-canvas)}
.zs-mini .m-rl{grid-row:1 / -1;background:var(--z-side);display:flex;flex-direction:column;align-items:center;gap:5px;padding-top:18px}
.zs-mini .m-rl i{width:12px;height:9px;border-radius:3px;background:color-mix(in srgb,var(--z-side-mute) 45%,transparent)}
.zs-mini .m-rl i.on{background:var(--z-side-on)}
.zs-mini .m-bar{background:var(--z-bar);box-shadow:inset 0 2px 0 var(--z-bar-rule)}
.zs-mini .m-tabs{background:var(--z-pbar);border-bottom:1px solid var(--z-pbar-line);display:flex;align-items:center;gap:6px;padding:0 6px}
.zs-mini .m-tabs i{width:18px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--z-sub) 50%,transparent)}
.zs-mini .m-tabs i.on{background:var(--z-pill)}
.zs-mini .m-pg{padding:6px;display:flex;flex-direction:column;gap:4px}
.zs-mini .m-pg .h{height:7px;border-radius:2px;background:var(--z-head)}
.zs-mini .m-pg .r{height:7px;border-bottom:1px solid var(--z-line-2);background:var(--z-bg)}
.zs-mini .m-pg .b{align-self:flex-end;width:26px;height:8px;border-radius:2px;background:var(--z-pill)}
.zs-mini[data-style="card"] .m-pg{margin:4px;border-radius:4px;background:var(--z-bg)}

/* ══ 7 · RIGHT TO LEFT ═════════════════════════════════════════════════════
   The rail moves to the right edge with inset-inline-start; the bar keeps the
   order tartib-tokens.css gives it ("always Profile is far right"). */
html.zs[dir="rtl"] body .top .zs-sr{margin-inline-start:0;margin-inline-end:auto}

/* ══ 8 · SETTINGS, ORDERTECH'S WAY ══════════════════════════════════════════
   OrderTech's settings are Zoho's (measured 30 Sep 2026): All Settings is a
   page of cards — 234px, radius 10, a 42px head on a 45° tint of its colour,
   links on 38px rows — and a settings page draws beside a settings menu of
   sections in 11px capitals, groups that fold, and the current page filled in
   the business's colour. Close Settings goes back to where you were. */
html.zs .zset{display:grid;grid-template-columns:236px minmax(0,1fr);margin:0 -20px;min-height:calc(100vh - var(--top))}
html.zs .zset-nav{position:sticky;top:var(--top);align-self:start;height:calc(100vh - var(--top));overflow-y:auto;
  padding:10px 8px 24px;background:var(--z-bg);border-inline-end:1px solid var(--z-line);scrollbar-width:thin}
html.zs .zset-body{min-width:0;padding:0 20px 48px}
html.zs .zset-back, html.zs .zset-mback{display:flex;align-items:center;gap:6px;width:100%;height:32px;margin:0 0 4px;padding:0 8px;
  border:0;border-radius:6px;background:transparent;font-size:var(--t-md);color:var(--z-ink);text-align:start}
html.zs .zset-back:hover, html.zs .zset-mback:hover{background:var(--z-hover)}
html.zs :is(.zset-back,.zset-mback) .ic svg{width:14px;height:14px}
html.zs[dir="rtl"] :is(.zset-back,.zset-mback) .ic{transform:scaleX(-1)}
html.zs .zset-mback{display:none}
html.zs .zset-sec{margin:14px 8px 6px;font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--z-sub)}
html.zs .zset-g{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 8px;border:0;border-radius:6px;
  background:transparent;font-size:var(--t-md);font-weight:400;color:var(--z-ink);text-align:start}
html.zs .zset-g:hover{background:var(--z-hover)}
html.zs .zset-g > span:not(.ic){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.zs .zset-g .ic svg{width:16px;height:16px}
html.zs .zset-g .ic:last-child{color:var(--z-sub);transition:transform .15s}
html.zs .zset-g .ic:last-child svg{width:14px;height:14px}
html.zs .zset-grp.open .zset-g .ic:last-child{transform:rotate(90deg)}
html.zs[dir="rtl"] .zset-grp:not(.open) .zset-g .ic:last-child{transform:scaleX(-1)}
html.zs .zset-grp.has-on .zset-g{font-weight:700}
html.zs .zset-lks{display:none;padding:2px 0 6px}
html.zs .zset-grp.open .zset-lks{display:block}
html.zs .zset-lk{display:block;width:100%;height:32px;margin:1px 0;padding:0 8px;padding-inline-start:34px;border:0;border-radius:6px;
  background:transparent;font-size:var(--t-md);color:var(--z-ink);text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.zs .zset-lk:hover{background:var(--z-hover)}
html.zs .zset-lk.on{background:var(--tc-strong);color:#fff;font-weight:700}
/* the group colours, OrderTech's three */
html.zs :is(.zset-g,.zset-card-h).g .ic:first-child{color:#22B378}
html.zs :is(.zset-g,.zset-card-h).r .ic:first-child{color:#F7525A}
html.zs :is(.zset-g,.zset-card-h).o .ic:first-child{color:#FD9134}
/* the close button, at the far end of every settings page's bar */
html.zs .zset-close .x{color:#E23D3D;font-size:var(--t-lg);line-height:1}
html.zs body .main .zpbar > .zset-close{margin-inline-start:auto}
html.zs body .main .zpbar :is(.zset-act,.zset-hact){display:flex;align-items:center;gap:8px;margin-inline-start:auto}

/* All Settings */
html.zs .zset-hph{gap:16px}
html.zs .zset-hph h1 + .mut{display:block}
html.zs .zset-find{display:flex;align-items:center;gap:8px;width:300px;max-width:100%;height:36px;margin:0 auto;padding:0 12px;
  border:1px solid var(--z-field-line);border-radius:8px;background:var(--z-bg);cursor:text}
html.zs .zset-find svg{width:14px;height:14px;flex:none;color:var(--z-sub)}
/* ⚠️ BY ID: the fields rule above is (0,5,3), and a plain class here loses to it — a white box inside the box */
html.zs body .zset-find input#zset-q{flex:1;min-width:0;min-height:0;height:100%;border:0;border-radius:0;outline:0;box-shadow:none;
  background:transparent;padding:0;font-size:var(--t-md);color:var(--z-ink)}
html.zs body .zset-find input#zset-q:focus{box-shadow:none;border:0}
html.zs .zset-find:focus-within{border-color:var(--z-pill);box-shadow:0 0 0 2px var(--z-sel)}
html.zs .zset-hsec{margin:6px 0 18px;padding:14px 16px 20px;border-radius:14px;
  background:linear-gradient(var(--z-bg) 0,transparent 70%);box-shadow:0 -4px 20px rgba(33,38,60,.03)}
html.zs .zset-hsec h3{margin:4px 4px 14px;font-size:var(--t-xl);font-weight:400;color:var(--z-ink)}
html.zs .zset-cards{display:flex;flex-wrap:wrap;gap:18px}
html.zs .zset-card{width:234px;padding:4px;border:1px solid var(--z-line-2);border-radius:10px;background:var(--z-bg)}
html.zs .zset-card-h{display:flex;align-items:center;gap:8px;height:42px;padding:10px;border-radius:8px;font-size:var(--t-lg);
  font-weight:700;color:var(--z-ink)}
html.zs .zset-card-h .ic svg{width:16px;height:16px}
html.zs .zset-card-h.g{background:linear-gradient(45deg,color-mix(in srgb,#22B378 12%,var(--z-bg)),transparent)}
html.zs .zset-card-h.r{background:linear-gradient(45deg,color-mix(in srgb,#F7525A 11%,var(--z-bg)),transparent)}
html.zs .zset-card-h.o{background:linear-gradient(45deg,color-mix(in srgb,#FD9134 12%,var(--z-bg)),transparent)}
html.zs .zset-link{display:block;width:100%;padding:8px 10px;border:0;border-radius:6px;background:transparent;font-size:var(--t-md);
  line-height:22px;color:var(--z-ink);text-align:start}
html.zs .zset-link:hover{background:var(--z-hover);color:var(--z-link)}
html.zs :is(.zset-link,.zset-card,.zset-hsec,.zset-none)[hidden]{display:none}
html.zs .zset-none{padding:48px 16px;text-align:center;color:var(--z-sub)}

/* page furniture every settings page shares */
html.zs .zset-ttl{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* ⚠️ .zpbar h1 may shrink (min-width:0) — beside a filter it shrank under its own word */
html.zs body .main .zpbar .zset-ttl h1{flex:none}
html.zs body .zset-filter{height:32px;min-height:32px;padding:0 8px;border:1px solid var(--z-field-line);border-radius:5px;background:var(--z-bg);
  font-size:var(--t-md);color:var(--z-ink)}
html.zs body .card.zset-flush{padding:0;overflow:hidden}
html.zs .zset-u{display:flex;align-items:center;gap:12px}
html.zs .zset-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--tc-tint);color:var(--tc-ink);font-size:var(--t-xs);font-weight:700;letter-spacing:.3px}
html.zs .zset-av.lg{width:56px;height:56px;font-size:var(--t-lg)}
html.zs :is(.zset-utable,.zset-rtable) .nm{color:var(--z-link);font-weight:500;text-decoration:none}
html.zs .zset-empty{padding:28px 12px;text-align:center;color:var(--z-sub)}
html.zs .zset-note{margin-top:10px;font-size:var(--t-sm);line-height:1.55;color:var(--z-sub)}
/* a user, beside the list */
html.zs .zset-split{display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--z-line);border-radius:8px;
  background:var(--z-bg);overflow:hidden;min-height:60vh}
html.zs .zset-ulist{border-inline-end:1px solid var(--z-line);overflow-y:auto;max-height:calc(100vh - 170px)}
html.zs .zset-uli{display:flex;align-items:center;gap:12px;width:100%;padding:11px 16px;border:0;border-bottom:1px solid var(--z-line-2);
  border-radius:0;background:transparent;text-align:start;color:var(--z-ink)}
html.zs .zset-uli:hover{background:var(--z-hover)}
html.zs .zset-uli.on{background:var(--z-sel)}
html.zs .zset-uln{display:flex;flex-direction:column;min-width:0}
html.zs .zset-uln b{font-weight:500;color:var(--z-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.zs .zset-uln small{font-size:var(--t-sm);color:var(--z-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.zs .zset-udet{padding:16px 20px;min-width:0;background:var(--z-canvas)}
html.zs .zset-uhead{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
html.zs .zset-uid{flex:1;min-width:0}
html.zs .zset-uid h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px;font-size:var(--t-xl);font-weight:700}
html.zs .zset-em{font-size:var(--t-sm);color:var(--z-sub)}
html.zs .zset-rl{margin-top:6px;font-size:var(--t-md)}
html.zs .zset-uact{display:flex;align-items:center;gap:8px}
html.zs .zset-x{border:0;background:transparent;font-size:22px;line-height:1;color:#E23D3D;padding:0 4px}
html.zs .zset-cardgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
html.zs body .card.zset-box{margin:0;padding:14px 16px}
html.zs .zset-box.zset-wide{grid-column:1 / -1}
html.zs .zset-bh{margin-bottom:10px;font-size:var(--t-lg);font-weight:700;color:var(--z-ink)}
html.zs .zset-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
html.zs .zset-fact .k{font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--z-sub)}
html.zs .zset-fact .v{margin-top:2px;font-size:var(--t-md);font-weight:600;color:var(--z-ink);overflow-wrap:anywhere}
html.zs .zset-can{list-style:none;margin:0;padding:0;display:grid;gap:6px}
html.zs .zset-can li{display:flex;align-items:center;gap:8px;font-size:var(--t-md)}
html.zs .zset-can li span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700}
html.zs .zset-can li.y span{background:color-mix(in srgb,var(--ok,#1e8a4c) 16%,var(--z-bg));color:var(--ok,#1e8a4c)}
html.zs .zset-can li.n{color:var(--z-sub)} html.zs .zset-can li.n span{background:var(--z-hover);color:var(--z-sub)}
html.zs .zset-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
html.zs .zset-form label{display:flex;flex-direction:column;gap:4px;min-width:200px;flex:1 1 200px;max-width:320px}
html.zs .zset-form label > span{font-size:var(--t-sm);color:var(--z-sub)}
/* Add user, and a role's page */
html.zs body .dbox.zset-dlg{width:560px;max-width:calc(100vw - 32px);padding:18px 20px}
html.zs .zset-dlg h2{margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--z-line-2)}
html.zs .zset-fld2{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 14px;align-items:center;margin-bottom:12px}
html.zs .zset-fld2 label{font-size:var(--t-md);color:var(--z-ink)}
html.zs .zset-fld2 label em{font-style:normal;color:#E23D3D;margin-inline-start:2px}
html.zs body .zset-fld2 :is(input,select,textarea){width:100%;box-sizing:border-box}
html.zs body .zset-fld2 textarea{min-height:64px;resize:vertical;padding:7px 10px}
html.zs .zset-dfoot{display:flex;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--z-line-2)}
html.zs body .card.zset-rolecard{padding:18px 20px;max-width:980px}
html.zs .zset-rolecard .zset-fld2{max-width:640px}
html.zs .zset-perm{width:100%;margin-top:8px;border:1px solid var(--z-line-2);border-radius:6px}
html.zs .zset-perm :is(th,td).c{text-align:center;width:84px}
html.zs .zset-foot{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;max-width:980px;margin-top:14px;padding:12px 0;
  background:var(--z-canvas);border-top:1px solid var(--z-line)}
html.zs .zset-foot .zset-del{margin-inline-start:auto}
@media(max-width:1100px){
  html.zs .zset{grid-template-columns:200px minmax(0,1fr)}
  html.zs .zset-split{grid-template-columns:240px minmax(0,1fr)}
}
@media(max-width:900px){
  html.zs .zset-split{grid-template-columns:1fr} html.zs .zset-ulist{max-height:220px;border-inline-end:0;border-bottom:1px solid var(--z-line)}
  html.zs .zset-cardgrid, html.zs .zset-facts{grid-template-columns:1fr}
}
@media(max-width:760px){
  /* the phone keeps its drawer: the menu gives way to a way back */
  html.zs .zset{display:block;margin:0}
  html.zs .zset-nav{display:none}
  html.zs .zset-body{padding:0}
  html.zs .zset-mback{display:flex;margin:10px 0 4px;padding:0}
  html.zs .zset-find{width:100%;order:3;flex:1 1 100%}
  html.zs .zset-card{width:100%}
  html.zs .zset-fld2{grid-template-columns:1fr}
  html.zs .zset-uhead{flex-wrap:wrap}
}

/* ══ 9 · THE WORKSPACE (the hub at {tenant}.tartib.app/) ═════════════════════
   The same bar, palette, themes and dark mode as HR, on the page every
   person opens first. Its layout stays its own: the 54px strip of products on
   the dashboard, and the 260px menu on the account pages.
   ⚠️ THE BAR'S OWN TOKENS, RE-POINTED INSIDE THE BAR ONLY. The Workspace's
   search, bell and gear are drawn with --chrome-*, which tartib-tokens.css
   keeps for a white bar and which the side menu also reads — so they are
   re-pointed on .top and nowhere else. */
html.zs body .top{--chrome:var(--z-bar);--chrome-ink:var(--z-bar-ink);--chrome-mute:var(--z-bar-mute);
  --chrome-fill:var(--z-bar-2);--chrome-fill-hi:var(--z-bar-hover);--chrome-line:transparent;--chrome-accent:var(--z-bar-ink)}
/* ⚠️ AND THE MENUS BESIDE THE PAGE READ THE SAME TOKENS — the Workspace's
   account menu, HR's phone drawer and bottom bar. tartib-tokens.css darkens
   --chrome to a petrol #0A2E39 in dark mode, which under this shell's navy bar
   and warm-grey page was a third colour belonging to neither. */
html.zs body :is(.side,.tabbar){--chrome:var(--z-bg);--chrome-ink:var(--z-ink);--chrome-mute:var(--z-sub);
  --chrome-fill:var(--z-hover);--chrome-fill-hi:var(--z-hover);--chrome-line:var(--z-line)}
/* the business's own mark on a white plate, and its name, as HR's bar has them */
html.zs body .top .topbar-logo{height:26px;max-width:110px;background:rgba(255,255,255,.92);border-radius:5px;padding:2px 4px}
html.zs body .top .topbar-name{font-size:var(--t-md);font-weight:700;letter-spacing:0;color:var(--z-bar-ink)}
html.zs body .top .topbar-search{height:34px;border-radius:7px;border:1px solid transparent;font-size:var(--t-md)}
html.zs body .top .topbar-search:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 60%,transparent)}
html.zs body .top .topbar-btn{width:32px;height:32px;border:0;background:transparent}
html.zs body .top .topbar-btn:hover{background:var(--z-bar-hover)}
html.zs body .top .topbar-btn svg{width:var(--ic-lg);height:var(--ic-lg)}
html.zs body .top .gear-menu{background:var(--z-bg);border-color:var(--z-line);border-radius:6px;box-shadow:0 10px 30px rgba(17,24,39,.18)}
html.zs body .top .gear-item{color:var(--z-ink);font-size:var(--t-md)}
html.zs body .top .gear-item:hover{background:var(--z-hover)}
/* the strip of products, in the theme's side colours */
html.zs .ws-rail{background:var(--z-side);border-inline-end-color:var(--z-side-line)}
html.zs .ws-rail :is(a,button){color:var(--z-side-mute)}
html.zs .ws-rail :is(a,button):hover{background:var(--z-side-hover);color:var(--z-side-ink)}
html.zs .ws-rail .on{background:var(--z-side-on);color:var(--z-side-on-ink)}
html.zs .ws-rail .on::before{background:var(--z-side-on)}
html.zs .ws-rail .sep{background:color-mix(in srgb,var(--z-side-mute) 35%,transparent)}
/* ⚠️ A FIXED PLATE: var(--ink) turns near-white in dark, under white words */
html.zs .ws-rail .tip{background:#21263C;color:#fff}
/* the boxes: OrderTech's flat panel with a 1px lift */
html.zs .dbox{border-color:var(--z-line);border-radius:var(--z-radius);box-shadow:var(--z-shadow);background:var(--z-bg)}
html.zs .dbox > h3{font-size:var(--t-xs);font-weight:700;letter-spacing:.03em;color:var(--z-th-ink)}
html.zs .dskel{border-radius:var(--z-radius);background:var(--z-hover);border-color:var(--z-line)}
html.zs body .myhr-form :is(select,input){background:var(--z-bg);color:var(--z-ink);border-color:var(--z-field-line)}
html.zs[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#221F1B 25%,#2B2723 50%,#221F1B 75%);background-size:200% 100%}
html.zs .greeting-title .accent{color:var(--tc-ink)}
html.zs .trial-strip{border-color:var(--z-line);background:var(--z-bg);border-radius:var(--z-radius)}
html.zs .trial-strip .ts-t{color:var(--z-sub)} html.zs .trial-strip .ts-t b{color:var(--z-ink)}
html.zs .drawer{background:var(--z-bg);border-radius:10px}
html.zs .app-tile:hover, html.zs .day-slot.today{background:var(--tc-strong);border-color:var(--tc-strong)}
/* ⚠️ TODAY'S DATE WAS --cyan ON A NAVY PLATE, and --cyan is --accent, which is
   the company's colour here — the plate's own colour. The number vanished. */
html.zs .day-slot.today :is(.day-num,.day-hours){color:#fff}