/* ============================================================================
   app.css — Operator Console theme for the Saudi recruitment platform
   Arabic-RTL first. Plain CSS, no build step. Used directly by Django templates.

   Fonts are fully self-hosted (no external CDN, PDPL/privacy + availability): Cairo (sans,
   variable) and IBM Plex Mono (mono, weights 400/500/600) via @font-face below.

   Aesthetic: calm, dense, trustworthy back-office. One confident accent
   (institutional jade/teal, grounded in the Musaned gov-rail world the
   operators live in), cool-paper neutrals, scannable tables and boards.
   Signature: the stage rail — the Request state machine made visible.
   ========================================================================== */

/* IBM Plex Mono — mono face for IDs / رقم السيرة / refs (--font-mono). Self-hosted (no CDN),
   latin subset, three weights matching the prior CDN load (OFL). */
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/IBMPlexMono-400.79936b18df9f.woff2") format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/IBMPlexMono-500.b1c8a895f5fd.woff2") format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/IBMPlexMono-600.5a2ce7798732.woff2") format('woff2');
}

/* Cairo — the official platform typeface (Google Fonts, OFL). Self-hosted (no CDN)
   as a variable font: one Arabic + one Latin subset cover every weight 100–900. */
@font-face{
  font-family:'Cairo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/Cairo-arabic.4d90a59cb181.woff2") format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC;
}
@font-face{
  font-family:'Cairo'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/Cairo-latin.3c9597566d23.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;
}

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
/* 1a. SHARED (non-themeable) tokens — spacing, radii, type, layout, motion.
   Every COLOR/SHADOW token is theme-scoped below (1b dark = default, 1c light)
   so a single [data-theme] attribute on <html> flips the whole app. Keep token
   NAMES stable across themes so all screens re-colour automatically. */
:root {
  /* --- Typography --- */
  --font-sans: 'Cairo', 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* IDs, رقم السيرة, refs */

  --fs-display: 1.5rem;    /* 24px — page title */
  --fs-h2:      1.125rem;  /* 18px — section heading */
  --fs-h3:      1rem;      /* 16px */
  --fs-body:    0.875rem;  /* 14px — default UI text */
  --fs-sm:      0.8125rem; /* 13px — meta, table cells */
  --fs-xs:      0.75rem;   /* 12px — labels, captions, pills */

  --lh-tight:   1.3;
  --lh-body:    1.6;       /* Arabic reads better with generous leading */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* Latin/mono readout tracking — safe, NEVER applied to Arabic glyphs. */
  --data-track: .01em;

  /* --- Spacing (4px base) --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem; --sp-12: 3rem;

  /* --- Radius --- */
  --r-sm: 6px;   --r-md: 8px;   --r-lg: 12px;   --r-pill: 999px;

  /* --- Layout --- */
  --shell-side:  248px;   /* sidebar width */
  --shell-top:   56px;    /* topbar height */
  --content-max: 1400px;

  --dur: 140ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* focus ring formula (resolves the themed --accent-ring at point of use) */
  --sh-focus: 0 0 0 3px var(--accent-ring);
}

/* 1b. DARK THEME — "لوحة القيادة" cockpit. This is the DEFAULT (bare :root),
   so the app renders dark even with JS disabled / no data-theme attribute.
   Near-black charcoal surfaces + one luminous jade signal + status glows. */
:root,
:root[data-theme="dark"] {
  /* --- Charcoal surface stack (canvas darkest → surface raised) --- */
  --canvas:        #0a0d10;   /* app backdrop */
  --surface:       #141a20;   /* cards, panels, rows (raised) */
  --surface-2:     #1e262e;   /* headers / hover / wells (a notch lighter = lift) */
  --surface-3:     #0d1116;   /* deep inset / empty pips */
  --ink:           #e8edf2;   /* primary text — AA on surface */
  --ink-1:         #e8edf2;   /* high-contrast fill/text alias */
  --ink-2:         #9fb0bd;   /* secondary text */
  --ink-3:         #7f909d;   /* tertiary / meta / captions (AA on --surface: ~5:1) */
  --ink-on-accent: #04140d;   /* dark glyph on luminous jade */
  --line:          #232c35;   /* hairline borders */
  --line-strong:   #2e3a45;   /* emphasized borders, dividers */

  /* --- The one accent: luminous jade — a precise signal, never a wash --- */
  --accent:        #1fd18a;   /* primary action / signal */
  --accent-hover:  #38d99b;
  --accent-press:  #16b57a;
  --accent-soft:   #10251d;   /* dark jade tint for active nav / soft badges */
  --accent-ring:   rgba(31,209,138,.40);

  /* --- Functional (glow on dark) --- */
  --danger:        #ff5a5f;
  --danger-hover:  #ff7a7e;
  --danger-soft:   #2a1613;
  --warn:          #ffb020;
  --warn-soft:     #2a2010;
  --ok:            #35d07f;
  --ok-soft:       #0f2a1c;
  --info:          #4aa8ff;
  --info-soft:     #132639;

  /* --- Semantic STATUS colors — dark tint bg + luminous fg + vivid dot --- */
  --st-new-bg:        #1a2230;  --st-new-fg:        #9fb6d8;  --st-new-dot:        #6b7c97;
  --st-reserved-bg:   #2a2211;  --st-reserved-fg:   #e6a93a;  --st-reserved-dot:   #c98a12;
  --st-visa-bg:       #1c1f3a;  --st-visa-fg:       #9296f2;  --st-visa-dot:       #5a5fd6;
  --st-active-bg:     #10281d;  --st-active-fg:     #4fd88a;  --st-active-dot:     #2f9d54;
  --st-transfer-bg:   #0e2a2c;  --st-transfer-fg:   #3cc9d4;  --st-transfer-dot:   #1d949e;
  --st-rental-bg:     #211a33;  --st-rental-fg:     #bd91e2;  --st-rental-dot:     #8b53c4;
  --st-closed-bg:     #1b2320;  --st-closed-fg:     #9fada6;  --st-closed-dot:     #8a948f;
  --st-cancelled-bg:  #2a1512;  --st-cancelled-fg:  #ff8681;  --st-cancelled-dot:  #cf4239;
  /* Worker-lifecycle S2: ink for the "current" step node (sits on --warn). */
  --step-current-ink: #3a2700;

  /* --- Shadows (deep black — panels lift off the charcoal backdrop) --- */
  --sh-sm: 0 1px 2px rgba(0,0,0,.35);
  --sh-md: 0 2px 8px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.45);
  --sh-lg: 0 16px 48px rgba(0,0,0,.60);
}

/* 1c. LIGHT THEME — today's institutional cool-paper palette, unchanged. */
:root[data-theme="light"] {
  /* --- Brand & neutrals (cool paper, ink with a faint green-gray cast) --- */
  --canvas:        #eef1ef;   /* app background — cool paper, not stark white */
  --surface:       #ffffff;   /* cards, panels, rows */
  --surface-2:     #f6f8f7;   /* table headers, subtle fills, hover */
  --surface-3:     #e6ebe8;   /* deeper inset (rarely used) */
  --ink:           #16211d;   /* primary text — near-black, green-gray cast */
  --ink-1:         #16211d;   /* high-contrast fill/text alias */
  --ink-2:         #45524d;   /* secondary text */
  --ink-3:         #6b7873;   /* tertiary / meta / captions */
  --ink-on-accent: #ffffff;
  --line:          #dde3e0;   /* hairline borders */
  --line-strong:   #c7d0cc;   /* emphasized borders, dividers */

  /* --- The one accent: institutional jade/teal (the Musaned/gov-rail world) --- */
  --accent:        #0f6e5a;   /* primary action */
  --accent-hover:  #0b5a49;
  --accent-press:  #084538;
  --accent-soft:   #e3f0ec;   /* tinted fill for selected / active nav */
  --accent-ring:   #88c4b5;   /* focus ring */

  /* --- Functional --- */
  --danger:        #b3261e;
  --danger-hover:  #971c16;
  --danger-soft:   #fbe9e7;
  --warn:          #9a6700;
  --warn-soft:     #fdf3df;
  --ok:            #1e7a3e;
  --ok-soft:       #e6f2ea;
  --info:          #2a5d9f;
  --info-soft:     #e8f0f9;

  /* --- Semantic STATUS colors, one per case stage ---------------------------
     Soft tinted background + saturated foreground + a solid dot, so a pill is
     readable, calm, and instantly distinguishable in a dense board/table.    */
  --st-new-bg:        #eef1f4;  --st-new-fg:        #41526b;  --st-new-dot:        #6b7c97;  /* جديد */
  --st-reserved-bg:   #fbf0d8;  --st-reserved-fg:   #8a5a00;  --st-reserved-dot:   #c98a12;  /* تم الحجز */
  --st-visa-bg:       #e8eafc;  --st-visa-fg:       #3b3f9c;  --st-visa-dot:       #5a5fd6;  /* التأشيرة */
  --st-active-bg:     #e2f1e7;  --st-active-fg:     #1e7a3e;  --st-active-dot:     #2f9d54;  /* نشط / قيد الخدمة */
  --st-transfer-bg:   #def0f1;  --st-transfer-fg:   #0e6b73;  --st-transfer-dot:   #1d949e;  /* نقل / تنازل */
  --st-rental-bg:     #efe7f7;  --st-rental-fg:     #6a3a98;  --st-rental-dot:     #8b53c4;  /* تأجير */
  --st-closed-bg:     #eceeed;  --st-closed-fg:     #5a655f;  --st-closed-dot:     #8a948f;  /* مغلق / مكتمل */
  --st-cancelled-bg:  #fbe7e6;  --st-cancelled-fg:  #a52b23;  --st-cancelled-dot:  #cf4239;  /* ملغي */
  /* Worker-lifecycle S2: ink for the "current" step node (sits on --warn). */
  --step-current-ink: #ffffff;

  /* --- Shadows (low, layered — a calm tool, not a floaty app) --- */
  --sh-sm: 0 1px 2px rgba(16,33,29,.06), 0 1px 1px rgba(16,33,29,.04);
  --sh-md: 0 2px 4px rgba(16,33,29,.06), 0 4px 12px rgba(16,33,29,.07);
  --sh-lg: 0 8px 28px rgba(16,33,29,.14);
}

/* ----------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* RTL default. Set dir="rtl" lang="ar" on <html>. */
[dir="rtl"] { direction: rtl; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--ink); }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* IMPORTANT RTL/Arabic rule: never letter-space Arabic — it breaks the
   connected glyphs. Letter-spacing is opt-in via .u-label for Latin only. */

/* Numerals & codes: keep Latin/Western digits LTR-isolated, tabular for tables */
.num, .u-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
bdi, .ltr { unicode-bidi: isolate; }
.tnum { font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft); }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: var(--r-sm);
}

/* Custom scrollbars — quiet */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); border: 2px solid var(--canvas); }

/* ----------------------------------------------------------------------------
   3. APP SHELL (RTL: sidebar on the right, topbar across the top)
   ------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-columns: 1fr var(--shell-side);   /* content | sidebar (RTL) */
  grid-template-rows: var(--shell-top) 1fr;
  grid-template-areas:
    "topbar  topbar"
    "main    sidebar";
  min-height: 100vh;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-inline: var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.topbar__brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-semi); font-size: var(--fs-h3); }
.topbar__brand .mark {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--ink-on-accent);
  display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.topbar__spacer { flex: 1; }
.topbar__search {
  flex: 0 1 360px;
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding-inline: var(--sp-3); height: 36px;
}
.topbar__search input { border: 0; background: transparent; outline: none; width: 100%; font: inherit; color: var(--ink); }
.topbar__search:focus-within { border-color: var(--accent-ring); box-shadow: var(--sh-focus); }
.topbar__user { display: flex; align-items: center; gap: var(--sp-2); }

.sidebar {
  grid-area: sidebar;
  background: var(--surface);
  border-inline-start: 1px solid var(--line);  /* the edge facing the content */
  padding: var(--sp-4) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-1);
  position: sticky; top: var(--shell-top); height: calc(100vh - var(--shell-top));
  overflow-y: auto;
}
.nav-group__label {
  font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-semi);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}
.nav-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  color: var(--ink-2); font-weight: var(--fw-medium); font-size: var(--fs-body);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  text-decoration: none; position: relative;
}
.nav-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-link.is-active { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semi); }
.nav-link.is-active::before {
  /* active marker on the inline-start edge (RTL-aware) */
  content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: var(--r-pill); background: var(--accent);
}
.nav-link .ico { width: 18px; height: 18px; flex: none; color: currentColor; opacity: .85; }
.nav-link .count {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--surface-2); color: var(--ink-3); padding: 1px var(--sp-2); border-radius: var(--r-pill);
}
.nav-link.is-active .count { background: #ffffff; color: var(--accent); }

/* ---- Sidebar sections (S1) — collapsible <details class="nav-parent"> tree ----------------
   A parent SUMMARY looks like a nav-link but toggles its child list; children nest under a
   connector line (RTL-aware via logical properties). Native <details> gives the a11y + toggle;
   the inline script persists open/closed per browser and force-opens the active section. */
.nav-parent { margin: 0; }
.nav-parent__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  color: var(--ink-2); font-weight: var(--fw-medium); font-size: var(--fs-body);
  cursor: pointer; user-select: none; list-style: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-parent__row::-webkit-details-marker { display: none; }   /* kill the native ▶ marker */
.nav-parent__row:hover { background: var(--surface-2); color: var(--ink); }
.nav-parent__row:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.nav-parent__row .ico { width: 18px; height: 18px; flex: none; color: currentColor; opacity: .85; }
.nav-parent__chev {
  width: 16px; height: 16px; flex: none; margin-inline-start: auto; opacity: .55;
  transition: transform var(--dur) var(--ease);
}
.nav-parent[open] > .nav-parent__row .nav-parent__chev { transform: rotate(180deg); }
/* a section holding the active route reads as lightly active on its summary */
.nav-parent:has(.nav-link.is-active) > .nav-parent__row { color: var(--ink); }

.nav-sub {
  list-style: none; margin: var(--sp-1) 0 var(--sp-2); padding: 0;
  margin-inline-start: 21px;                     /* aligns the rail under the summary icon centre */
  border-inline-start: 1px solid var(--line);
}
.nav-sub li { position: relative; }
.nav-sub li::before {                            /* the connector tick from the rail into the row */
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  width: var(--sp-3); height: 1px; background: var(--line);
}
.nav-sub .nav-link { padding-inline-start: var(--sp-4); font-size: var(--fs-sm); }
.nav-badge {                                     /* approvals + WA unread badge in the tree */
  margin-inline-start: auto; font-size: 11px; padding: 1px var(--sp-2); border-radius: var(--r-pill);
}
@media (prefers-reduced-motion: reduce) { .nav-parent__chev { transition: none; } }

.main {
  grid-area: main;
  padding: var(--sp-6) var(--sp-6) var(--sp-12);
  /* clip (not hidden): same horizontal-overflow backstop, but WITHOUT registering .main as the
     scroll container — so position:sticky descendants (e.g. .case-aside / .cd2-aside) bind to the
     window and actually stick. `hidden` silently broke every in-page sticky panel. */
  overflow-x: clip;
}
.main__inner { max-width: var(--content-max); margin-inline: auto; }

/* Page header band */
.page-head { display: flex; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-head__titles { flex: 1; min-width: 0; }
.page-title { font-size: var(--fs-display); font-weight: var(--fw-semi); }
.page-sub { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; }
.page-head__actions { display: flex; gap: var(--sp-2); align-items: center; }

/* Breadcrumb */
.crumbs { display: flex; gap: var(--sp-2); align-items: center; color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.crumbs a { color: var(--ink-3); }
.crumbs .sep { opacity: .5; }
/* directional chevron flips automatically because layout is RTL; use » as a neutral mark */

/* Linked page tabs — separate URL per tab, current one marked active server-side (NOT a
   client-side JS panel-switcher). Introduced for Settings › التأجير بالساعة
   (templates/core/_hourly_settings_tabs.html); generic enough to reuse anywhere a
   multi-page section wants an underline tab bar instead of the sidebar's nav-parent tree. */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-3); font-size: var(--fs-body); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--fw-semi); }

/* ----------------------------------------------------------------------------
   4. CARDS & PANELS
   ------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.card__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); }
.card__head .spacer { flex: 1; }
.card__body { padding: var(--sp-5); }
.card__body--flush { padding: 0; }
.card__foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); }

/* Stat tiles — restrained: a label, a tabular number, a small delta. No gradient. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.stat__label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-medium); }
.stat__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.625rem; font-weight: var(--fw-semi); margin-top: 2px; letter-spacing: -.01em; }
.stat__delta { font-size: var(--fs-xs); margin-top: var(--sp-1); }
.stat__delta.up { color: var(--ok); }
.stat__delta.down { color: var(--danger); }

/* F2 (doc-expiry report) — a leading accent bar + colored value keyed to the traffic-light
   band. Report-local but still token-driven, so dark/light follow automatically. */
.stat--danger { border-inline-start: 3px solid var(--danger); }
.stat--warn   { border-inline-start: 3px solid var(--warn); }
.stat--muted  { border-inline-start: 3px solid var(--ink-3); }
.stat--accent { border-inline-start: 3px solid var(--accent); }
.stat--danger .stat__value { color: var(--danger); }
.stat--warn   .stat__value { color: var(--warn); }
.stat--muted  .stat__value { color: var(--ink-2); }

/* ----------------------------------------------------------------------------
   5. STATUS PILLS — one per case stage (the semantic status system)
   ------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 2px var(--sp-3) 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.7;
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; flex: none; }

/* Mobile scroll hint (reviewer nit): a horizontally-scrollable table gets an inner edge fade
   on the side hiding more columns (RTL: content overflows leftward). JS toggles the classes. */
.table-wrap.has-hscroll { box-shadow: inset 24px 0 16px -16px rgba(0, 0, 0, 0.35); }
.table-wrap.has-hscroll.at-hend { box-shadow: none; }

/* Active-filter chip — shows which dashboard drill-in is applied to a list, with an × to clear. */
.filter-chip-row { margin-top: var(--sp-2); }
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-2) 3px var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--accent-soft, rgba(15,110,90,.08)); color: var(--ink-1);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.filter-chip__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: var(--ink-2); text-decoration: none; font-size: 15px; line-height: 1;
}
.filter-chip__clear:hover { background: var(--line); color: var(--ink-1); }
.filter-chip__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* F2 (doc-expiry report) — band-filter chips reuse .filter-chip but as a navigational TOGGLE:
   inactive = surface, active = accent-soft. Scoped under .doc-report so the always-on
   accent-soft appearance of the global applied-filter chip (above) is untouched elsewhere. */
.doc-report .filter-chip {
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; text-decoration: none;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.doc-report .filter-chip:hover { border-color: var(--ink-3); color: var(--ink-1); text-decoration: none; }
.doc-report .filter-chip.is-active { background: var(--accent-soft); border-color: transparent; color: var(--ink-1); }
.filter-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.filter-chip__n { font-family: var(--font-mono); opacity: .85; }

/* F2 date cell — Gregorian (mono) over the secondary Hijri line; and the remaining-days cell. */
.date-cell { display: flex; flex-direction: column; line-height: 1.35; }
.date-cell .greg { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--ink); }
.date-cell .hijri { font-size: var(--fs-xs); color: var(--ink-3); }
.rem { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }
.rem--over { color: var(--danger); }
.rem--soon { color: var(--warn); }
.rem--none { color: var(--ink-3); }
.rem__unit { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--ink-3); margin-inline-start: 2px; }

/* F1 housing report — worker identity cell (round initials avatar + name) + exception strip.
   Token-driven; mirrors the inbox-item avatar idiom. */
.cell-worker { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ava { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); font-weight: var(--fw-semi); font-size: var(--fs-xs); flex: none; }
.cell-worker__name { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-worker__nat { color: var(--ink-3); font-size: var(--fs-xs); }
.exc-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.exc-strip__label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--sp-2); }
.exc-strip__label::before { content: "\2691"; color: var(--danger); }
.exc-strip .badge { font-size: var(--fs-sm); padding: 3px var(--sp-3); text-decoration: none; }
.exc-strip a.badge:hover { text-decoration: none; filter: brightness(1.08); }

/* Severity filter chips on the "needs action" panel — interactive (client-side row filter). */
.sev-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.sev-chip:hover { border-color: var(--ink-3, #9aa5a0); color: var(--ink-1); }
.sev-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sev-chip.is-active { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
.sev-chip--danger.is-active { background: var(--danger); border-color: var(--danger); }
.sev-chip--warn.is-active { background: var(--warn); border-color: var(--warn); color: #3a2700; }

/* S2 (F6/F7): the one-tap bucket bar — segmented, pre-canned status filters with count
   badges. Token-driven (dark/light follow automatically), RTL-safe (pure flex, no
   directional offsets), wraps on phones. */
.bucket-bar {
  display: flex; flex-wrap: wrap; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 2px;
  margin: var(--sp-3) 0 var(--sp-1);
}
.bucket-bar__seg {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm);
  min-height: 32px; text-decoration: none; white-space: nowrap;
}
.bucket-bar__seg:hover { color: var(--ink-1); text-decoration: none; }
.bucket-bar__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bucket-bar__seg.is-active {
  background: var(--surface); color: var(--ink-1);
  box-shadow: var(--sh-sm); font-weight: var(--fw-semi);
}
.bucket-bar__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 0 var(--sp-1); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); line-height: 1.6;
  background: var(--line); color: var(--ink-2);
}
.bucket-bar__seg.is-active .bucket-bar__count { background: var(--accent-soft); color: var(--accent); }

/* S2 (F8): the one-tap nationality chips row (directly above «تصفية متقدمة»). */
.nat-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); }
.nat-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi); text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.nat-chip:hover { border-color: var(--ink-3); color: var(--ink-1); text-decoration: none; }
.nat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nat-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.nat-chip__count { opacity: .85; }

.pill--new        { background: var(--st-new-bg);        color: var(--st-new-fg); }
.pill--reserved   { background: var(--st-reserved-bg);   color: var(--st-reserved-fg); }
.pill--visa       { background: var(--st-visa-bg);       color: var(--st-visa-fg); }
.pill--active     { background: var(--st-active-bg);     color: var(--st-active-fg); }
.pill--transfer   { background: var(--st-transfer-bg);   color: var(--st-transfer-fg); }
.pill--rental     { background: var(--st-rental-bg);     color: var(--st-rental-fg); }
.pill--closed     { background: var(--st-closed-bg);     color: var(--st-closed-fg); }
.pill--cancelled  { background: var(--st-cancelled-bg);  color: var(--st-cancelled-fg); }

/* F2 document-expiry traffic-light pills — semantic tokens only (theme-aware, no hardcoded
   color). Green «ساري» / yellow «قريب الانتهاء» / red «منتهي» + gray «بدون تاريخ». The 15-day
   critical band adds `.pill--pulse`, which pulses the pill's leading dot. */
.pill--ok      { background: var(--ok-soft);     color: var(--ok); }
.pill--warn    { background: var(--warn-soft);   color: var(--warn); }
.pill--danger  { background: var(--danger-soft); color: var(--danger); }
.pill--muted   { background: var(--surface-2);   color: var(--ink-3); }
.pill--pulse::before { animation: pill-pulse 1.4s ease-in-out infinite; }
@keyframes pill-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .pill--pulse::before { animation: none; } }

/* Tiny dot-only status indicator for dense tables */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; vertical-align: middle; }
.dot--new{background:var(--st-new-dot)} .dot--reserved{background:var(--st-reserved-dot)}
.dot--visa{background:var(--st-visa-dot)} .dot--active{background:var(--st-active-dot)}
.dot--transfer{background:var(--st-transfer-dot)} .dot--rental{background:var(--st-rental-dot)}
.dot--closed{background:var(--st-closed-dot)} .dot--cancelled{background:var(--st-cancelled-dot)}

/* Generic badges (counts, tags, flow labels) */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 1px var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge--warn   { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge--info   { background: var(--info-soft); color: var(--info); border-color: transparent; }
/* flow tags */
.badge--istiqdam { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge--tanazul  { background: var(--st-transfer-bg); color: var(--st-transfer-fg); border-color: transparent; }
.badge--tajeer   { background: var(--st-rental-bg); color: var(--st-rental-fg); border-color: transparent; }

/* ----------------------------------------------------------------------------
   6. SIGNATURE — THE STAGE RAIL (the Request state machine, made visible)
   A segmented progress rail; the current stage is filled in its own status
   color, done stages in muted accent, future stages hollow.
   ------------------------------------------------------------------------- */
.stage-rail { display: flex; align-items: stretch; gap: 3px; width: 100%; }
.stage-rail__seg {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.stage-rail__bar {
  height: 6px; border-radius: var(--r-pill);
  background: var(--line);          /* future */
  transition: background var(--dur) var(--ease);
}
.stage-rail__seg.is-done  .stage-rail__bar { background: var(--accent); opacity: .55; }
.stage-rail__seg.is-current .stage-rail__bar { background: var(--accent); }
.stage-rail__label {
  font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.stage-rail__seg.is-current .stage-rail__label { color: var(--ink); font-weight: var(--fw-semi); }

/* Compact rail variant for case cards on the board (no labels) */
.stage-rail--mini .stage-rail__bar { height: 4px; }

/* ----------------------------------------------------------------------------
   7. DATA TABLES (dense, scannable, RTL text-align: start)
   ------------------------------------------------------------------------- */
/* The scroll boundary for wide data tables: never wider than its container, and it
   scrolls its overflow horizontally instead of letting the table clip under main's
   overflow:hidden. min-width:0 lets it shrink inside any flex/grid parent. */
/* «شبكة العمليات» (owner-picked variant C, 2026-08-10): every table sits in ONE
   framed surface card — border + shadow + raised background — with hairline
   column separators and a denser row rhythm. The frame lives on .table-wrap so
   every existing page upgrades without touching its template. */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); }
/* The big registries add --grid: the table body scrolls INSIDE the card (sticky
   header actually sticks; the footer bar with the pager stays in reach). */
.table-wrap--grid { overflow: auto; max-height: min(68dvh, 680px); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
table.data thead th {
  text-align: start; font-weight: var(--fw-bold); color: var(--ink-2); font-size: var(--fs-xs);
  background: var(--surface-2); padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-strong); position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
table.data thead th:not(:last-child),
table.data tbody td:not(:last-child) { border-inline-end: 1px solid var(--line); }
table.data tbody td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
table.data tbody tr { transition: background var(--dur) var(--ease); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
/* Sortable column header — a real link to the whitelisted server sort. The
   active sort is jade with a direction arrow; everything else stays quiet. */
.th-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.th-sort:hover { color: var(--accent); text-decoration: none; }
.th-sort.is-active { color: var(--accent); }
.th-sort .ico { width: 12px; height: 12px; }
/* Footer bar INSIDE the card: range readout + pager + page-size, one place. */
.table-foot {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line);
  background: var(--surface); position: sticky; bottom: 0; inset-inline: 0;
}
.table-foot__count { color: var(--ink-3); font-size: var(--fs-sm); }
.table-foot__count b { color: var(--ink); font-weight: var(--fw-semi); }
.table-foot .spacer { flex: 1; }
.table-foot .pager { margin: 0; }
.pagesize { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap; }
.pagesize select { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); padding: 2px var(--sp-2); min-width: 58px; }

/* --- The full operations-grid card (prototype variant C, 1:1) ---------------
   .table-card owns the frame when a page composes toolbar + bulk bar + grid +
   footer as ONE surface; the inner .table-wrap then drops its own frame so the
   card never double-borders. Pages without a toolbar keep the plain framed
   .table-wrap unchanged. */
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; }
.table-card .table-wrap { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.table-card .table-foot { border-top: 1px solid var(--line); }
.table-toolbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.table-toolbar .spacer { flex: 1; }
.tsearch { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px var(--sp-3); min-width: 240px; }
.tsearch:focus-within { border-color: var(--accent); box-shadow: var(--sh-focus); }
.tsearch svg { color: var(--ink-3); flex: none; }
.tsearch input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-sm); width: 100%; min-width: 0; }
.tsearch input::placeholder { color: var(--ink-3); }
.tsearch input:focus { outline: none; }
.tbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: 32px; height: 32px; padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit; font-size: var(--fs-xs); text-decoration: none; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.tbtn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.tbtn.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* Bulk-action bar — appears only when rows are selected (checkbox-driven). */
.table-bulk { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--accent-soft); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--accent); font-weight: var(--fw-semi); flex-wrap: wrap; }
.table-bulk[hidden] { display: none; }
.table-bulk select { border: 1px solid var(--accent-ring); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); padding: 2px var(--sp-2); max-width: 220px; }
/* Selection column + selected-row treatment (prototype C). */
table.data td.cell-check, table.data th.cell-check { width: 38px; text-align: center; padding-inline: var(--sp-2); }
table.data input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }
table.data tr.is-sel { background: var(--accent-soft); box-shadow: inset -3px 0 0 var(--accent); }
/* Density toggle (client-side, persisted): compact rows for triage days. */
.table-wrap.is-compact table.data tbody td { padding-top: 4px; padding-bottom: 4px; }
/* Phones: ONE scroll direction inside the card. The inner vertical scroll that
   works on desktop turns into scroll-fighting on touch — so the grid grows to
   its content and the PAGE scrolls; only the horizontal overflow stays inside. */
@media (max-width: 768px) {
  .table-wrap--grid { max-height: none; }
  .tsearch { min-width: 0; flex: 1 1 100%; }
  .table-foot { position: static; }
}
table.data .cell-id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
table.data .cell-name { font-weight: var(--fw-medium); }
table.data .cell-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: start; }
table.data .cell-actions { text-align: end; white-space: nowrap; }
table.data tr.is-selected { background: var(--accent-soft); }

.t-meta { color: var(--ink-3); font-size: var(--fs-xs); }

/* ----------------------------------------------------------------------------
   8. KANBAN PIPELINE BOARD (columns + draggable case cards)
   ------------------------------------------------------------------------- */
.board {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  overflow-x: auto; padding-bottom: var(--sp-4); scroll-snap-type: x proximity;
}
.board__col {
  flex: 0 0 300px; max-width: 300px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; max-height: calc(100vh - 220px);
  scroll-snap-align: start;
}
.board__col-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface-2); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.board__col-head .name { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.board__col-head .count { margin-inline-start: auto; }
/* the column gets a thin top accent in its stage color */
.board__col-head::before { content:""; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink-3); }
.board__col[data-stage="new"]       .board__col-head::before { background: var(--st-new-dot); }
.board__col[data-stage="reserved"]  .board__col-head::before { background: var(--st-reserved-dot); }
.board__col[data-stage="visa"]      .board__col-head::before { background: var(--st-visa-dot); }
.board__col[data-stage="active"]    .board__col-head::before { background: var(--st-active-dot); }
.board__col[data-stage="transfer"]  .board__col-head::before { background: var(--st-transfer-dot); }
.board__col[data-stage="rental"]    .board__col-head::before { background: var(--st-rental-dot); }
.board__col[data-stage="closed"]    .board__col-head::before { background: var(--st-closed-dot); }
.board__col[data-stage="cancelled"] .board__col-head::before { background: var(--st-cancelled-dot); }

.board__col-body { padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; }

.case-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
  box-shadow: var(--sh-sm);
  cursor: grab;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.case-card:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); }
.case-card:active { cursor: grabbing; }
.case-card.is-dragging { transform: rotate(-1deg); box-shadow: var(--sh-lg); }
.case-card__top { display: flex; align-items: center; gap: var(--sp-2); }
.case-card__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.case-card__top .spacer { flex: 1; }
.case-card__customer { display: flex; align-items: center; gap: var(--sp-2); }
.case-card__name { font-weight: var(--fw-semi); font-size: var(--fs-body); }
.case-card__line { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); font-size: var(--fs-xs); }
.case-card__foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; }
.case-card__foot .spacer { flex: 1; }
/* SLA / age chip — turns warm then hot */
.age { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.age.warm { color: var(--warn); } .age.hot { color: var(--danger); font-weight: var(--fw-semi); }

/* ----------------------------------------------------------------------------
   9. WORKER CARD (catalog tile)
   ------------------------------------------------------------------------- */
.worker-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.worker-card:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); }
.worker-card__head { display: flex; gap: var(--sp-3); padding: var(--sp-4); }
.worker-card__photo {
  width: 56px; height: 56px; border-radius: var(--r-md); flex: none; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-3); font-weight: var(--fw-semi);
}
.worker-card__id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); }
.worker-card__name { font-weight: var(--fw-semi); font-size: var(--fs-h3); }
.worker-card__meta { color: var(--ink-3); font-size: var(--fs-sm); }
.worker-card__body { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.worker-card__attrs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.worker-card__attr { display: flex; gap: var(--sp-1); color: var(--ink-2); }
.worker-card__attr b { font-weight: var(--fw-semi); color: var(--ink); }
.worker-card__foot { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }

/* skill rating meter (8-axis ضعيف→ممتاز) — quiet bars */
.rating { display: flex; align-items: center; gap: var(--sp-2); }
.rating__track { display: flex; gap: 2px; }
.rating__pip { width: 14px; height: 5px; border-radius: var(--r-pill); background: var(--line); }
.rating__pip.on { background: var(--accent); }

/* ----------------------------------------------------------------------------
   10. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: inherit; font-weight: var(--fw-semi); font-size: var(--fs-body);
  padding: var(--sp-2) var(--sp-4); height: 36px;
  border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap; user-select: none;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; }

.btn--primary { background: var(--accent); color: var(--ink-on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { background: var(--surface-2); border-color: var(--ink-3); }

.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: var(--danger-hover); }
.btn--danger-soft { background: var(--danger-soft); color: var(--danger); }
.btn--danger-soft:hover { background: #f6dad7; }
/* Dark theme: the light-pink hover flashes illegibly (2.3:1) — tint from the danger token. */
:root[data-theme="dark"] .btn--danger-soft:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); }

.btn--sm { height: 30px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn--icon { width: 36px; padding: 0; }
.btn--icon.btn--sm { width: 30px; }
.btn--block { width: 100%; }

/* gated / approval-required action — visually marks §8 human-gate buttons */
.btn--gated { position: relative; }
.btn--gated::after {
  content: "بانتظار اعتماد"; position: absolute; inset-block-start: -8px; inset-inline-start: 50%;
  transform: translateX(50%); font-size: 0.625rem; font-weight: var(--fw-semi);
  background: var(--warn); color: #fff; padding: 0 var(--sp-2); border-radius: var(--r-pill);
  white-space: nowrap; opacity: 0; pointer-events: none;
}

/* ----------------------------------------------------------------------------
   11. FORMS — inputs, selects, labels, fields
   ------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.field__label .req { color: var(--danger); margin-inline-start: 2px; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); }
.field__error { font-size: var(--fs-xs); color: var(--danger); }

.input, .select, .textarea {
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); height: 38px; width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.textarea { height: auto; min-height: 88px; padding: var(--sp-3); resize: vertical; line-height: var(--lh-body); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--sh-focus);
}
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); }
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }

/* --- Date inputs -----------------------------------------------------------------------
   The dropdown PANEL of <input type="date"> is browser chrome and cannot be styled in any
   engine — Firefox exposes no ::-webkit-* hooks and iPad Safari renders a wheel. So the
   panel itself is reached the only way it can be: `color-scheme`, which flips it out of
   white-on-dark and is why it looked broken in the dark theme. The rest here brings the BOX
   to .input parity and makes the whole field open the picker, not just the tiny glyph.
   (Designer plan 2026-08-04, Stage 0. A full custom .dpick component is specced for the
   Hijri read-out, which native can never show.) */
.input[type="date"], .input[type="datetime-local"], .input[type="month"] {
  position: relative;
  direction: ltr;                       /* the value is LTR even on an RTL page */
  text-align: right;
  font-variant-numeric: tabular-nums;   /* stop the field twitching as digits change */
  padding-inline-start: var(--sp-3);
  color-scheme: light;
}
:root[data-theme="dark"] .input[type="date"],
:root[data-theme="dark"] .input[type="datetime-local"],
:root[data-theme="dark"] .input[type="month"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .input[type="date"],
  :root:not([data-theme="light"]) .input[type="datetime-local"],
  :root:not([data-theme="light"]) .input[type="month"] { color-scheme: dark; }
}
/* The whole box opens the picker — a 12px glyph is not a target. */
.input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
/* Chrome/Edge print an empty value as grey placeholder text — match --ink-3. */
.input[type="date"]:not(:focus):invalid { color: var(--ink-3); }

/* --- .dpick: the console's own date picker ---------------------------------------------
   The native panel is browser chrome — unstylable, English, LTR, and incapable of Hijri.
   These styles dress the replacement; static/js/datepicker.js builds it as progressive
   enhancement over the original input, which stays in the DOM carrying the ISO value. */
.dpick { position: relative; width: 100%; }
.dpick__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.dpick__trigger {
  display: flex; align-items: center; gap: var(--sp-2);
  text-align: start; cursor: pointer; font-variant-numeric: tabular-nums;
}
.dpick__trigger::before {
  content: ""; flex: none; width: 16px; height: 16px; opacity: .65;
  background: currentColor;
  -webkit-mask: var(--dpick-cal) center / contain no-repeat;
          mask: var(--dpick-cal) center / contain no-repeat;
}
:root {
  --dpick-cal: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>");
}
.dpick__trigger.is-empty { color: var(--ink-3); }
.dpick.is-open .dpick__trigger { border-color: var(--accent); box-shadow: var(--sh-focus); }

/* FIXED, not absolute: the field sits inside cards with their own overflow, which clipped
   the panel to 4 of 7 columns. Fixed positioning escapes every ancestor; the script places
   it and keeps it inside the viewport. */
.dpick__pop {
  position: fixed; z-index: 1200; width: 296px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--sh-lg);
}
.dpick__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 8px; }
.dpick__month { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.dpick__nav {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--ink-2); cursor: pointer;
}
.dpick__nav:hover { background: var(--surface-2); color: var(--ink); }
.dpick__nav svg { width: 16px; height: 16px; }
.dpick__dow, .dpick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpick__dow span { text-align: center; font-size: var(--fs-xs); color: var(--ink-3); padding-bottom: 4px; }
.dpick__day {
  height: 36px; border: 0; background: none; border-radius: 10px; cursor: pointer;
  color: var(--ink); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.dpick__day:hover { background: var(--surface-2); }
.dpick__day.is-out { color: var(--ink-3); opacity: .5; }
/* today = a ring, never a fill — a fill would compete with the selected day */
.dpick__day.is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.dpick__day.is-sel { background: var(--accent); color: var(--ink-on-accent); font-weight: var(--fw-semi); }
.dpick__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.dpick__actions { display: flex; gap: var(--sp-2); }
.dpick__link { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: var(--fs-xs); padding: 2px 4px; }
.dpick__link:hover { text-decoration: underline; }
/* The Hijri read-out — the whole reason native could never serve this office. */
.dpick__hijri { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  /* full-width sheet at the bottom; the script's clamp still applies to taller screens */
  .dpick__pop { inset-inline: 8px !important; left: 8px !important; right: 8px !important;
    width: auto !important; top: auto !important; bottom: 8px; }
  .dpick__day { height: 44px; }
}

/* RTL select arrow on the inline-start (left in RTL) side */
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7873' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left var(--sp-3) center;
  padding-inline-start: var(--sp-8);
}

/* input with a leading control / unit (e.g. SAR) — RTL aware */
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 0; }
.input-group > :first-child { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
.input-group > :last-child  { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.input-group .addon {
  display: inline-flex; align-items: center; padding-inline: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--ink-3); font-size: var(--fs-sm); white-space: nowrap;
}
.input-group .addon + .input { border-inline-start: 0; }
.input-group .input + .addon { border-inline-start: 0; }

/* checkbox / switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--line-strong); transition: background var(--dur) var(--ease); flex: none; }
.switch .track::after { content:""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); transition: inset-inline-start var(--dur) var(--ease); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { inset-inline-start: 19px; }
.switch input:focus-visible + .track { box-shadow: var(--sh-focus); }

/* segmented filter control (flow / view toggles) */
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.segmented button, .segmented a { display: inline-flex; align-items: center; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); border: 0; background: transparent; color: var(--ink-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; height: 30px; text-decoration: none; }
.segmented a:hover { color: var(--ink); text-decoration: none; }
.segmented button.is-active, .segmented a.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); font-weight: var(--fw-semi); }

/* toolbar / filter row */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbar .spacer { flex: 1; }

/* ----------------------------------------------------------------------------
   12. DEFINITION LISTS (case / worker detail key-value rows)
   ------------------------------------------------------------------------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); align-items: baseline; }
.kv dt { color: var(--ink-3); font-size: var(--fs-sm); }
.kv dd { margin: 0; color: var(--ink); font-size: var(--fs-body); font-weight: var(--fw-medium); }
.kv dd .num { font-weight: var(--fw-semi); }

/* timeline (StateTransition audit trail) */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding-bottom: var(--sp-4); position: relative; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); margin-top: 3px; }
.timeline__line { flex: 1; width: 2px; background: var(--line); margin-top: 2px; }
.timeline__item:last-child .timeline__line { display: none; }
.timeline__body { padding-bottom: var(--sp-2); }
.timeline__title { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.timeline__time { color: var(--ink-3); font-size: var(--fs-xs); font-family: var(--font-mono); }

/* ----------------------------------------------------------------------------
   13. EMPTY STATES
   ------------------------------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--ink-3); }
.empty__art {
  width: 56px; height: 56px; margin: 0 auto var(--sp-4); border-radius: var(--r-lg);
  background: var(--surface-2); display: grid; place-items: center; color: var(--ink-3);
  border: 1px solid var(--line);
}
.empty__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); color: var(--ink-2); }
.empty__text { font-size: var(--fs-sm); margin-top: var(--sp-2); max-width: 42ch; margin-inline: auto; }
.empty__actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); justify-content: center; }

/* ----------------------------------------------------------------------------
   14. INBOX LIST (WhatsApp leads)
   ------------------------------------------------------------------------- */
.inbox-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--dur) var(--ease); }
.inbox-item:hover { background: var(--surface-2); }
.inbox-item.is-unread { background: var(--accent-soft); }
.inbox-item.is-unread .inbox-item__name { font-weight: var(--fw-bold); }
.inbox-item__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); font-weight: var(--fw-semi); flex: none; }
.inbox-item__main { flex: 1; min-width: 0; }
.inbox-item__row { display: flex; align-items: center; gap: var(--sp-2); }
.inbox-item__name { font-weight: var(--fw-medium); font-size: var(--fs-body); }
.inbox-item__time { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-mono); }
.inbox-item__preview { color: var(--ink-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------------------------
   15. UTILITIES
   ------------------------------------------------------------------------- */
.u-label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-3); }
.u-label--latin { letter-spacing: .04em; text-transform: uppercase; } /* Latin-only — never on Arabic */
.u-muted { color: var(--ink-3); }
.u-ink2 { color: var(--ink-2); }
.u-right { text-align: end; } .u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
.u-flex { display: flex; align-items: center; gap: var(--sp-2); }
.u-flex-col { display: flex; flex-direction: column; gap: var(--sp-2); }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.u-wrap { flex-wrap: wrap; }
.u-grow { flex: 1; min-width: 0; }
.u-divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-4) 0; }
.u-vdivider { width: 1px; align-self: stretch; background: var(--line); }
.u-hidden { display: none !important; }
.u-mt-2{margin-top:var(--sp-2)} .u-mt-4{margin-top:var(--sp-4)} .u-mt-6{margin-top:var(--sp-6)}
.u-mb-2{margin-bottom:var(--sp-2)} .u-mb-4{margin-bottom:var(--sp-4)} .u-mb-6{margin-bottom:var(--sp-6)}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
/* Let grid tracks shrink below their content's min-content width. Without this a grid cell
   holding a wide element (a .table-wrap with a min-width'd table, a long code, a nowrap row)
   keeps its track at that min-width and pushes the whole grid past the viewport. min-width:0
   restores shrinkability so the inner overflow-x:auto (e.g. .table-wrap) actually scrolls. */
.grid-2 > *, .grid-3 > *, .grid-cards > * { min-width: 0; }

/* ----------------------------------------------------------------------------
   16. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* minmax(0,1fr) lets the single column shrink below its content's min-content width,
     so non-shrinkable topbar chrome can't force the whole grid wider than the viewport. */
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  /* (mobile sidebar becomes the off-canvas drawer — see §18) */
  /* Collapse ALL two/three-column card rows to a single column. !important is deliberate:
     several page templates set an inline grid-template-columns (e.g. "1.4fr 1fr") for their
     desktop layout, and a normal media-query rule can't beat an inline style — so those rows
     would otherwise stay multi-column on phones and clip content under main's overflow:hidden. */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  body { overflow-x: hidden; }         /* backstop against any residual horizontal scroll */
}
@media (max-width: 600px) {
  .main { padding: var(--sp-4); }
  .topbar__search { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  /* Compact the topbar so it fits a phone viewport: icon-only actions, truncated brand. */
  .topbar { gap: var(--sp-2); padding-inline: var(--sp-3); }
  .topbar__user > div, .topbar__user form span { display: none; }
  .topbar__brand { min-width: 0; }
  .topbar__brand span:last-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Dense data tables stay legible by scrolling inside their .table-wrap rather than
     crushing every column to unreadable widths. The wrap already has overflow-x:auto. */
  .table-wrap table.data { min-width: 600px; }
  /* Stack the page header so a wide actions cluster (segmented filters, buttons) drops
     below the title instead of squeezing the subtitle into a sliver. */
  .page-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .page-head__actions { flex-wrap: wrap; }
  /* Inline filter forms in the header (e.g. finance reports' date range) must wrap their
     own controls too — the actions wrapper wrapping isn't enough if the form is a non-wrap
     flex row of date inputs + a button. Let its fields drop to a new line and shrink. */
  .page-head__actions form { flex-wrap: wrap; }
  .page-head__actions form .input,
  .page-head__actions form label { min-width: 0; }
  /* Toolbars (filter rows) wrap comfortably and their trailing meta drops to a new line. */
  .toolbar > .spacer { flex-basis: 100%; height: 0; }
}

/* ----------------------------------------------------------------------------
   17. MOTION — one calm system; respect reduced-motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .apq2-panel { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ----------------------------------------------------------------------------
   18. SIDEBAR — desktop collapse (icon rail) + mobile/tablet drawer
   Desktop ≥961px: the sidebar collapses to a 68px icon rail; hovering a link
   reveals a label flyout. State lives on <html data-sidebar> (persisted in
   localStorage, applied pre-paint so there's no flash).
   ≤960px (phones + iPad portrait): the sidebar becomes an off-canvas drawer
   that slides in from the inline-start edge, with a scrim and a close button.
   ------------------------------------------------------------------------- */

/* sidebar becomes a column so the collapse control can sit pinned at the foot */
.sidebar__head { display: none; }           /* only rendered in drawer mode */
.sidebar > nav { display: flex; flex-direction: column; gap: var(--sp-1); }
.sidebar__foot { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.sidebar__collapse {
  display: inline-flex; align-items: center; gap: var(--sp-3); width: 100%;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-3);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar__collapse:hover { background: var(--surface-2); color: var(--ink); }
.sidebar__collapse .ico { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease); }

/* --- collapsed icon rail (desktop only) --- */
:root[data-sidebar="collapsed"] { --shell-side: 68px; }
@media (min-width: 961px) {
  :root[data-sidebar="collapsed"] .sidebar { padding-inline: var(--sp-2); }
  :root[data-sidebar="collapsed"] .nav-link { justify-content: center; padding-inline: 0; }
  :root[data-sidebar="collapsed"] .nav-link .ico { opacity: 1; }
  /* the existing label span turns into a hover flyout, no markup change needed */
  :root[data-sidebar="collapsed"] .nav-link span:not(.count) {
    position: absolute; inset-inline-end: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) scale(.96); transform-origin: 100% 50%;
    background: var(--ink); color: var(--canvas); padding: 5px 10px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
    box-shadow: var(--sh-md); opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  :root[data-sidebar="collapsed"] .nav-link:hover span:not(.count),
  :root[data-sidebar="collapsed"] .nav-link:focus-visible span:not(.count) { opacity: 1; transform: translateY(-50%) scale(1); }
  :root[data-sidebar="collapsed"] .nav-link .count { display: none; }
  /* the active link keeps its edge marker; add a small filled dot so state reads on the rail */
  :root[data-sidebar="collapsed"] .nav-link.is-active::after {
    content: ""; position: absolute; inset-inline-end: 8px; top: 8px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--accent);
  }
  /* group labels shrink to a hairline divider */
  :root[data-sidebar="collapsed"] .nav-group__label { font-size: 0; padding: var(--sp-2) var(--sp-2) 0; }
  :root[data-sidebar="collapsed"] .nav-group__label::before { content: ""; display: block; height: 1px; background: var(--line); }
  :root[data-sidebar="collapsed"] .sidebar__collapse { justify-content: center; padding-inline: 0; }
  :root[data-sidebar="collapsed"] .sidebar__collapse span { display: none; }
  :root[data-sidebar="collapsed"] .sidebar__collapse .ico { transform: scaleX(-1); }
  /* S1 sections on the rail: show only the parent icon; hide the chevron + children. The
     summary label becomes a hover flyout, mirroring .nav-link; an active section gets a dot. */
  :root[data-sidebar="collapsed"] .nav-parent__row { justify-content: center; padding-inline: 0; position: relative; }
  :root[data-sidebar="collapsed"] .nav-parent__chev { display: none; }
  :root[data-sidebar="collapsed"] .nav-parent__row .ico { opacity: 1; }
  :root[data-sidebar="collapsed"] .nav-sub { display: none; }
  :root[data-sidebar="collapsed"] .nav-parent__row > span {
    position: absolute; inset-inline-end: calc(100% + 10px); top: 50%;
    transform: translateY(-50%) scale(.96); transform-origin: 100% 50%;
    background: var(--ink); color: var(--canvas); padding: 5px 10px; border-radius: var(--r-sm);
    font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
    box-shadow: var(--sh-md); opacity: 0; pointer-events: none; z-index: 60;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  :root[data-sidebar="collapsed"] .nav-parent__row:hover > span,
  :root[data-sidebar="collapsed"] .nav-parent__row:focus-visible > span { opacity: 1; transform: translateY(-50%) scale(1); }
  :root[data-sidebar="collapsed"] .nav-parent:has(.nav-link.is-active) > .nav-parent__row::after {
    content: ""; position: absolute; inset-inline-end: 8px; top: 8px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--accent);
  }
}

/* --- mobile / iPad-portrait drawer (≤960px) --- */
.topbar__menu { display: none; }             /* hamburger — shown ≤960 */
.drawer-scrim { display: none; }
.drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 960px) {
  .topbar__menu { display: inline-flex; }
  /* sidebar stays in the DOM (fixed, off-canvas) so it can slide */
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 55;
    width: min(86vw, 300px); height: 100dvh; max-height: 100dvh;
    /* docked at the RTL start edge (right); slide it off that edge to hide.
       translateX is physical, so the inline-start (right) edge hides with +100%. */
    transform: translateX(calc(100% + 12px));
    transition: transform .24s var(--ease);
    box-shadow: var(--sh-lg); padding: var(--sp-3);
    display: flex; border-inline-start: 0;
  }
  /* LTR safety: hide toward the physical left instead. */
  [dir="ltr"] .sidebar { transform: translateX(calc(-1 * (100% + 12px))); }
  .sidebar__head {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line);
  }
  .sidebar__head .brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semi); font-size: var(--fs-h3); }
  .sidebar__head .brand .mark {
    width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--accent); color: var(--ink-on-accent);
    display: grid; place-items: center; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  }
  .sidebar__head .close { margin-inline-start: auto; }
  .sidebar__foot { display: none; }          /* no rail-collapse in drawer mode */

  .drawer-toggle:checked ~ .app .sidebar { transform: translateX(0); }

  .drawer-scrim {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: rgba(16,33,29,.42); opacity: 0; pointer-events: none;
    transition: opacity .24s var(--ease);
  }
  .drawer-toggle:checked ~ .app .drawer-scrim { opacity: 1; pointer-events: auto; }

  /* comfortable touch targets in the drawer */
  .sidebar .nav-link { padding: var(--sp-3); min-height: 44px; }
  .sidebar .nav-group__label { padding-top: var(--sp-4); }
  body.drawer-open { overflow: hidden; }     /* set by JS to lock scroll behind the drawer */
}

/* ----------------------------------------------------------------------------
   19. TASKS (المهام) — instrument pulse · command composer · agenda rail
   Works without JS: priority is radio-driven, complete/reopen are POST forms,
   the composer options are visible by default (JS only collapses them).
   Re-designed 2026-07-04 (de-slopped per owner): quiet count tiles (colour only
   on non-zero urgent counts), grouped list on a timeline rail whose nodes are
   coloured only for overdue/today, rows inside plain cards. No decoration.
   ------------------------------------------------------------------------- */

/* --- instrument pulse (the 3 counters) --- */
/* the whole tasks column is capped — full-bleed rows on a 1400px canvas read as
   dead space when titles are short; ~1000px keeps rows dense (owner feedback) */
.tasks-pulse, .tasks-pulse ~ .composer, .tasks-pulse ~ .toolbar, .tasks-pulse ~ .task-groups, .tasks-pulse ~ .card { max-width: 1000px; }
.pulse-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.pulse-tile__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: var(--fw-bold); line-height: 1.15; color: var(--ink); }
.pulse-tile__label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-medium); }
/* colour is a signal, not decoration: only a non-zero urgent count earns it */
.pulse-tile--overdue .pulse-tile__value { color: var(--danger); }
.pulse-tile--today   .pulse-tile__value { color: var(--warn); }
.pulse-tile--zero    .pulse-tile__value { color: var(--ink-3); }

/* --- command composer --- */
.composer {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--sh-sm); margin-bottom: var(--sp-6);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.composer.is-focused { border-color: var(--accent); box-shadow: var(--sh-focus), var(--sh-md); }
.composer__row { display: flex; align-items: center; gap: var(--sp-3); }
.composer__circle {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 2px dashed var(--line-strong); color: var(--ink-3);
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.composer__circle::after { content: "+"; font-weight: var(--fw-semi); }
.composer.is-focused .composer__circle { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.composer__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--fs-h3); color: var(--ink); padding: var(--sp-1) 0; }
.composer__input::placeholder { color: var(--ink-3); font-weight: var(--fw-regular); }
.composer__hint { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
/* options: visible by default (no-JS safe); JS adds .js-composer to collapse until focus */
.composer__options { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: flex-end; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.js-composer .composer__options { display: none; }
.js-composer.composer.is-focused .composer__options { display: flex; }
.composer__opt { display: flex; flex-direction: column; gap: var(--sp-2); }
.composer__opt > span { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-medium); }
.composer__opt .select, .composer__opt .input { height: 34px; }
.composer__opt--grow { flex: 1; min-width: 180px; }
.composer__opt--grow .textarea { min-height: 34px; height: 34px; }
.composer__spacer { flex: 1; }

/* priority segmented radios */
.prio-pick { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; }
.prio-pick label { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); height: 30px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2); position: relative; }
.prio-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.prio-pick .pdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pdot--high { background: var(--danger); } .pdot--normal { background: var(--info); } .pdot--low { background: var(--ink-3); }
.prio-pick label:has(input:checked) { background: var(--surface); box-shadow: var(--sh-sm); color: var(--ink); font-weight: var(--fw-semi); }
.prio-pick label:has(input:focus-visible) { box-shadow: var(--sh-focus); }

/* --- agenda rail: the grouped list hangs on a timeline --- */
.task-groups { position: relative; display: flex; flex-direction: column; gap: var(--sp-6); padding-inline-start: 26px; }
/* node colour = urgency only; everything else stays quiet */
.task-group--overdue { --g-c: var(--danger); }

/* rows live inside a lifted card per group */
.task-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; }

/* the complete/reopen check */
.task-check { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; padding: 0; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
/* end-of-row meta column (left in RTL): date · assignee · priority at a fixed scan line */
.task-side { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-4); flex: none; }
.task-meta__item .ico { width: 13px; height: 13px; opacity: .85; flex: none; }
a.task-meta__item { text-decoration: none; } a.task-meta__item:hover { color: var(--accent); }
.task-actions { display: inline-flex; gap: var(--sp-1); opacity: 0; transition: opacity var(--dur) var(--ease); }
@media (hover: none) { .task-actions { opacity: 1; } }   /* touch: always show actions */

/* mobile: keep the rail, tighten the tiles */
@media (max-width: 640px) {
  .task-row { flex-wrap: wrap; align-items: flex-start; }
  .task-side { flex-basis: 100%; margin-inline-start: calc(24px + var(--sp-3)); gap: var(--sp-3); }
  .tasks-pulse { gap: var(--sp-2); }
  .pulse-tile { padding: var(--sp-2) var(--sp-3); }
  .pulse-tile__value { font-size: 1.25rem; }
  .task-groups { padding-inline-start: 20px; }
  .task-group__node { inset-inline-start: -20px; width: 14px; height: 14px; }
}

/* ----------------------------------------------------------------------------
   20. THEME SYSTEM — the ∞ brand mark, the light/dark toggle, and the handful
   of dark-scoped overrides for spots that hard-coded a colour (white-on-accent
   fills, etc.). Tokens in §1 do the heavy lifting; these are the exceptions.
   ------------------------------------------------------------------------- */

/* --- ∞ "بلا حدود" brand mark (replaces the old letter chip) --- */
.mark { overflow: hidden; }
.mark .mark-svg { width: 68%; height: auto; display: block; }
/* light: a filled jade chip with a contrasting ∞ */
.topbar__brand .mark,
.sidebar__head .brand .mark { color: var(--ink-on-accent); }

/* dark: a recessed chip with a luminous jade ∞ + soft glow (matches direction-2) */
:root[data-theme="dark"] .topbar__brand .mark,
:root[data-theme="dark"] .sidebar__head .brand .mark {
  background: #0f1a16; border: 1px solid var(--line-strong); color: var(--accent);
}
:root[data-theme="dark"] .mark .mark-svg { filter: drop-shadow(0 0 4px rgba(31,209,138,.35)); }

/* --- Topbar theme toggle (sun in dark → offer light; moon in light → offer dark) --- */
.theme-toggle .ico { transition: opacity var(--dur) var(--ease); }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun  { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* --- Dark ambient backdrop (very low-alpha jade/blue glow, not a wash) --- */
:root[data-theme="dark"] body {
  background:
    radial-gradient(1100px 600px at 88% -10%, rgba(31,209,138,.05), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(74,168,255,.04), transparent 55%),
    var(--canvas);
  background-attachment: fixed;
}
:root[data-theme="dark"] ::selection { background: rgba(31,209,138,.28); color: #fff; }

/* --- Dark shell surfaces read as instrument panels (subtle vertical grade) --- */
:root[data-theme="dark"] .topbar  { background: linear-gradient(180deg, var(--surface), var(--canvas)); }
:root[data-theme="dark"] .sidebar { background: linear-gradient(180deg, var(--surface), var(--canvas)); }

/* --- Dark fixes for spots that hard-coded a light-on-colour value --- */
/* active nav count chip was solid #ffffff → use a dark chip with jade text */
:root[data-theme="dark"] .nav-link.is-active .count { background: var(--surface-2); color: var(--accent); }
/* severity/filter "الكل" active chip fills with --ink-1 (now light in dark) → dark text */
:root[data-theme="dark"] .sev-chip.is-active { color: var(--canvas); }
:root[data-theme="dark"] .sev-chip--danger.is-active { color: #0a0d10; }

/* =========================================================================
   Cases — scale-first requests surface (faceted filters · pagination · segments)
   All theme-token based (dark + light), RTL-native, responsive to mobile.
   ========================================================================= */
.input--sm, .select--sm { height: 32px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }

/* Applied-filter chip row extras */
.filter-chip__reset { margin-inline-start: var(--sp-2); color: var(--ink-3); text-decoration: none; align-self: center; }
.filter-chip__reset:hover { color: var(--accent); text-decoration: underline; }

/* Collapsible faceted filter panel */
.filters { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); margin: var(--sp-3) 0 var(--sp-5); }
.filters__summary { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-weight: var(--fw-semi); font-size: var(--fs-sm); color: var(--ink-1); cursor: pointer; list-style: none; }
.filters__summary::-webkit-details-marker { display: none; }
.filters__summary .ico { width: 16px; height: 16px; color: var(--ink-3); }
.filters[open] .filters__summary { border-bottom: 1px solid var(--line); }
.filters__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); }
.filters__grid .field { margin-bottom: 0; }
.filters__actions { grid-column: 1 / -1; display: flex; gap: var(--sp-2); justify-content: flex-start; }
.filters__save { display: flex; gap: var(--sp-2); align-items: center; padding: 0 var(--sp-4) var(--sp-4); flex-wrap: wrap; }
.filters__save .input { max-width: 220px; }
@media (max-width: 900px) { .filters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .filters__grid { grid-template-columns: 1fr; } }

/* Dropdown (saved segments) — pure CSS via <details> */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown__menu { position: absolute; inset-block-start: calc(100% + 4px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md); padding: var(--sp-1); z-index: 40; }
.dropdown__menu--end { inset-inline-end: 0; }
.dropdown__row { display: flex; align-items: center; gap: var(--sp-1); }
.dropdown__item { flex: 1; display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); color: var(--ink-1); text-decoration: none; font-size: var(--fs-sm); }
.dropdown__item:hover { background: var(--surface-2); color: var(--accent); }
.dropdown__del { margin: 0; }
.dropdown__empty { padding: var(--sp-2) var(--sp-3); }

/* Board "+N more" overflow tag (board view is capped, never renders 100k cards) */
.board__more { display: block; text-align: center; padding: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--ink-3); text-decoration: none; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.board__more:hover { color: var(--accent); border-color: var(--accent); }

/* Pagination controls — RTL: prev (›) sits at the start, next (‹) at the end */
.pager { display: flex; align-items: center; gap: var(--sp-1); justify-content: center; margin: var(--sp-5) 0; flex-wrap: wrap; }
.pager__btn, .pager__page { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-1); text-decoration: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pager__btn:hover, .pager__page:hover { border-color: var(--accent); color: var(--accent); }
.pager__page.is-active { background: var(--accent); border-color: var(--accent); color: var(--canvas); font-weight: var(--fw-semi); }
.pager__btn.is-disabled { color: var(--ink-3); border-color: var(--line); background: var(--surface-2); cursor: default; pointer-events: none; }

/* ----------------------------------------------------------------------------
   21. APPROVAL QUEUE (طابور الاعتماد) — the decision desk.
   Design plan: docs/design/approvals-queue-redesign-2026-07-04.md
   Dossier + decision rail per card; status bucket-bar; slim record-only posture
   strip; pure-CSS <details> reject overlay (backdrop = the open summary's fixed
   ::after → click-outside dismisses with zero JS); the ختم القرار stamp on
   decided cards; 7-day TTL pips. Colour = signal only.
   ------------------------------------------------------------------------- */

/* --- header readout: the oldest pending wait (§4.1) --- */
.apq2-oldest {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-3); background: var(--surface);
}
.apq2-oldest b { color: var(--warn); font-weight: var(--fw-semi); }
.apq2-oldest .ico { width: 14px; height: 14px; color: var(--warn); flex: none; }

/* --- record-only posture strip (§4.2) — replaces the amber banner --- */
.apq2-posture {
  display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--warn); border-radius: var(--r-md);
}
.apq2-posture > strong { color: var(--ink-1); font-size: var(--fs-sm); }
.apq2-posture__more { display: inline; }
.apq2-posture__more > summary {
  list-style: none; cursor: pointer; display: inline;
  color: var(--ink-3); font-size: var(--fs-xs);
}
.apq2-posture__more > summary::-webkit-details-marker { display: none; }
.apq2-posture__more > summary:hover { color: var(--accent); }
.apq2-posture__more[open] > summary { display: none; }

/* رحلة الوصول — the flight-number mismatch strip (clone .apq2-posture with a --danger accent)
   + the «تتبّع رحلة أخرى…» disclosure (summary styled like .apq2-posture__more). Existing tokens
   only, so both dark and light themes resolve correctly. */
.flight-mismatch {
  display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--danger); border-radius: var(--r-md);
}
.flight-mismatch > strong { color: var(--ink-1); font-size: var(--fs-sm); }
.flight-track-more > summary {
  list-style: none; cursor: pointer; display: inline;
  color: var(--ink-3); font-size: var(--fs-xs);
}
.flight-track-more > summary::-webkit-details-marker { display: none; }
.flight-track-more > summary:hover { color: var(--accent); }
.flight-track-more[open] > summary { display: none; }

/* --- the queue + decision card (§4.4) --- */
.apq2 { display: flex; flex-direction: column; gap: var(--sp-3); }
.apq2-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  /* NO overflow:hidden — the reject popover must escape the card */
}
.apq2-card--pending { border-inline-start: 3px solid var(--warn); }
.apq2-dossier { min-width: 0; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.apq2-rail {
  border-inline-start: 1px solid var(--line); padding: var(--sp-4) var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); position: relative;
}

/* identity row (§4.5) — one line, the message hangs off its sender */
.apq2-who { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.apq2-who__id { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: inherit; min-width: 0; }
.apq2-who__id strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apq2-who__id:hover strong { color: var(--accent); }
.apq2-who__avatar { width: 32px; height: 32px; font-size: 12px; flex: none; }
.apq2-who__case {
  font-size: var(--fs-xs); text-decoration: none; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 var(--sp-2);
}
.apq2-who__case:hover { color: var(--accent); border-color: var(--accent); }
.apq2-who__meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.apq2-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); flex: none; }

/* message (§4.6) */
.apq2-label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink-2); }
.apq2-bubble {
  max-width: 52ch; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); border-start-start-radius: 2px;
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: 1.7;
  box-shadow: var(--sh-sm);
}
.apq2-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.apq2-key { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-3); letter-spacing: var(--data-track); direction: ltr; unicode-bidi: embed; }

/* decision rail states (§4.7) */
.apq2-state {
  align-self: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-semi);
  border-radius: var(--r-pill); padding: 2px var(--sp-3);
  color: var(--warn); background: var(--warn-soft);
}
.apq2-age { font-size: var(--fs-xs); color: var(--ink-3); }
.apq2-age--stale { color: var(--warn); font-weight: var(--fw-semi); }
.apq2-rail .btn--primary { width: 100%; justify-content: center; }
.apq2-recordonly { font-size: var(--fs-xs); color: var(--ink-3); margin-top: auto; }
.apq2-decided { font-size: var(--fs-xs); color: var(--ink-3); }
.apq2-decided b { color: var(--ink-2); font-weight: var(--fw-semi); }
.apq2-note { font-size: var(--fs-sm); color: var(--ink-2); }

/* the 7-day TTL pips — the expiry rule as visible structure */
.apq2-ttl { display: flex; align-items: center; gap: var(--sp-2); }
.apq2-ttl__pips { display: inline-flex; gap: 3px; }
.apq2-ttl__pips i {
  width: 10px; height: 4px; border-radius: 2px;
  background: var(--surface-3); border: 1px solid var(--line);
}
.apq2-ttl__pips i.on { background: var(--accent); border-color: transparent; }
.apq2-ttl--last .apq2-ttl__pips i.on { background: var(--warn); }
.apq2-ttl__text { font-size: var(--fs-xs); color: var(--ink-3); }

/* --- the reject overlay (§4.8) — pure-CSS <details> popover --- */
.apq2-reject > summary { list-style: none; cursor: pointer; }
.apq2-reject > summary::-webkit-details-marker { display: none; }
.apq2-reject__btn {
  display: flex; justify-content: center; width: 100%;
  font-size: var(--fs-sm); color: var(--danger);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.apq2-reject__btn:hover { background: var(--danger-soft); border-color: var(--danger); }
.apq2-reject__btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.apq2-reject .if-open { display: none; }
.apq2-reject[open] .if-open { display: inline; }
.apq2-reject[open] .if-closed { display: none; }

/* THE BACKDROP IS THE OPEN SUMMARY'S FIXED PSEUDO-ELEMENT — clicking anywhere on
   it toggles the details closed: click-outside-to-dismiss with zero JavaScript. */
.apq2-reject[open] > summary::after {
  content: ""; position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 8, 12, .55);
}
.apq2-reject[open] > .apq2-reject__btn { position: relative; z-index: 70; }

.apq2-panel {
  position: absolute; inset-inline-end: var(--sp-4); inset-block-start: auto;
  width: min(380px, calc(100vw - 2rem)); z-index: 70;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  animation: apq2-pop var(--dur) var(--ease);
}
@keyframes apq2-pop { from { opacity: 0; transform: translateY(-4px); } }
.apq2-panel__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-semi); }
.apq2-panel__recap { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.apq2-panel form { display: flex; flex-direction: column; gap: var(--sp-3); }
.apq2-panel__note { width: 100%; }
.apq2-panel__actions { display: flex; justify-content: flex-end; }

/* preset reason chips */
.apq2-chiprow { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.apq2-chip { position: relative; }
.apq2-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.apq2-chip span {
  display: inline-flex; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer;
}
.apq2-chip input:checked + span { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.apq2-chip input:focus-visible + span { box-shadow: var(--sh-focus); }

/* --- ختم القرار — the decision stamp (§7, the signature) --- */
.apq2-stamp {
  align-self: flex-start; display: inline-flex; flex-direction: column; gap: 2px;
  border: 2px solid currentColor; border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3); transform: rotate(-1.5deg);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: var(--lh-tight);
}
.apq2-stamp--ok     { color: var(--ok);     background: var(--ok-soft); }
.apq2-stamp--danger { color: var(--danger); background: var(--danger-soft); }
.apq2-stamp small   { font-weight: var(--fw-regular); font-size: 0.65rem; opacity: .8; }

/* positive empty state: the desk itself is stamped done (§4.9) */
.apq2-clear { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-12) var(--sp-4); text-align: center; }
.apq2-clear .apq2-stamp { font-size: var(--fs-h2); transform: rotate(1.5deg); align-self: center; }
.apq2-clear p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); max-width: 52ch; }

/* mobile (§3c): rail becomes a footer row; the panel becomes a bottom sheet */
@media (max-width: 900px) {
  .apq2-card { grid-template-columns: 1fr; }
  .apq2-rail { border-inline-start: 0; border-top: 1px solid var(--line); }
  .apq2-rail .btn--primary { width: auto; flex: 1; }
  .apq2-rail { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .apq2-recordonly { margin-top: 0; flex-basis: 100%; }
  .apq2-reject { flex: 1; }
}
@media (max-width: 640px) {
  .apq2-panel {
    position: fixed; inset-inline: 0; inset-block-end: 0; inset-block-start: auto;
    width: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 80vh; overflow: auto;
  }
}

/* ============================================================================
   §22  QUICK SEARCH  (بحث سريع)
   The fast one-tap facet rows above «تصفية متقدمة» on the requests surface
   (later: customers/workers). Tokens only — dark/light both resolve. Chip visuals
   are reused verbatim from .nat-chip (§5); this adds only the panel + row shell.
   Rows WRAP (like every chip row) — no horizontal scroll; .main is overflow-x:hidden.
   ========================================================================== */
.quick-search {
  display: grid; gap: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-3) 0;
}
.quick-search__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.quick-search__label {
  min-inline-size: 6.5rem; color: var(--ink-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
}
.quick-search__more { align-self: center; }
@media (max-width: 480px) {
  .quick-search__label { flex-basis: 100%; min-inline-size: 0; }
}

/* --- Client Twin — the «اقتراح أولوية» tier badge + thread bar (docs/design/client-twin-v1) --- */
/* A ranking HINT (G6), never a verdict: muted chips, not loud alarms; jade earned only at «جاد». */
.twin-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 1px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); line-height: 1.6; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2);
}
.twin-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.twin-badge__label { font-weight: 600; }
.twin-badge__manual {
  font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: var(--r-sm);
  background: var(--surface-3); color: var(--ink-3);
}
.twin-badge--hot   { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.twin-badge--warm  { color: var(--warn);   background: var(--warn-soft);   border-color: transparent; }
.twin-badge--cold  { color: var(--ink-3);  background: var(--surface-2); }
.twin-badge--pending,
.twin-badge--unscored { color: var(--ink-3); background: transparent; }
.twin-badge--pending .twin-badge__dot { opacity: .4; }

.wa-ctier { grid-column: 2; justify-self: start; margin-top: 2px; }

/* Thread-header twin bar: badge + why-line on one side, the G1/G3 quick actions on the other. */
.wa-twin {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line);
  background: var(--surface); flex-wrap: wrap;
}
.wa-twin__main { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.wa-twin__hint { font-size: var(--fs-xs); color: var(--ink-3); }
/* The why-line — the transparency of «اقتراح أولوية» — is ALWAYS shown in full (owner request
   2026-07-05: no click-to-expand); it wraps across lines. Hover still surfaces it via the title. */
.wa-twin__why {
  margin: 0; min-width: 0;
  font-size: var(--fs-sm); color: var(--ink-2);
  max-width: 72ch; overflow-wrap: anywhere; line-height: 1.5;
}
.wa-twin__acts { display: flex; align-items: center; gap: var(--sp-2); position: relative; }
.wa-twin__override { position: relative; }
.wa-twin__override > summary { list-style: none; cursor: pointer; }
.wa-twin__override > summary::-webkit-details-marker { display: none; }
.wa-twin__pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: var(--sp-3); box-shadow: 0 8px 24px rgba(0,0,0,.28); min-width: 16rem;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.wa-twin__popacts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ============================================================================
   §23  CASE DETAIL — request "cockpit" head: key-facts hero, action command bar,
   money-figures well, and the situational status-spine. Token-only (dark+light),
   RTL-native. Kills the 50/50 tall-vs-short dead space of the old card rows.
   ========================================================================== */

/* --- 23a/23b (case-hero strip + case-actionbar command bar) REMOVED 2026-07-06:
   superseded by §24 Option B (sticky key-panel) + §25 (dense fact grid); the
   case_detail.html markup no longer references .case-hero* / .case-actionbar*. --- */

/* --- 23c. تفاصيل الطلب internal split (long fields | money well) ------------ */
.case-detail-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5) var(--sp-6); align-items: start; }
@media (max-width: 720px) { .case-detail-split { grid-template-columns: 1fr; } }

/* --- 23d. رسوم الدفع money well (a filled panel, not empty space) ----------- */
.fee-figures {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.fee-figures__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.fee-figures__k { font-size: var(--fs-sm); color: var(--ink-3); }
.fee-figures__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); color: var(--ink); }
.fee-figures__v--lg { font-size: var(--fs-h2); }
.fee-figures__v--out   { color: var(--warn); }
.fee-figures__v--clear { color: var(--ok); }
.fee-figures__row--total { border-top: 1px dashed var(--line-strong); padding-top: var(--sp-3); }
.fee-meter { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.fee-meter__fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }

/* --- 23e. Situational band: a shared label + a status spine so the lower band
   stops reading as ragged squares. Colour = state only. --------------------- */
.band-label {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-8) 0 var(--sp-4);
  color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-semi);
}
.band-label::before, .band-label::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.card--flag        { border-inline-start: 3px solid var(--line-strong); }
.card--flag-warn   { border-inline-start-color: var(--warn); }
.card--flag-danger { border-inline-start-color: var(--danger); }
.card--flag-ok     { border-inline-start-color: var(--ok); }
.card--flag-info   { border-inline-start-color: var(--info); }

/* ==========================================================================
   §24  CASE DETAIL — Option B: sticky key-panel + scrolling detail.
   The stage rail stays full-width above; below it a two-column shell places
   an always-visible key panel on the START side (RTL → right): (1) الإجراء
   التالي pinned first, (2) identity, (3) money glance — beside the scrolling
   detail column. Collapses to one column (panel first) under 960px.
   Token-only, theme-aware, RTL-native. REPLACES §23a hero + §23b action bar.
   ========================================================================== */
.case-shell {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-6);
  align-items: start;
  margin-top: var(--sp-6);            /* was the hero's top gap; keeps rhythm under the rail */
}

/* the key panel: sticky under the 56px sticky topbar; its own scroll if it
   ever outgrows the viewport (الإجراء التالي stays reachable at its top). */
.case-aside {
  position: sticky;
  top: calc(var(--shell-top) + var(--sp-4));           /* 56px topbar + breathing room ≈ 72px */
  display: flex; flex-direction: column; gap: var(--sp-4);
  max-height: calc(100vh - var(--shell-top) - var(--sp-6));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.case-main { min-width: 0; }           /* block flow — preserves existing u-mb-* card spacing */

/* (1) الإجراء التالي — accent-edged card so the pinned command reads first */
.case-aside__act { border-color: var(--accent-soft); }
.case-aside__act .card__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.case-aside__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: .02em; color: var(--accent);
}
/* stacked, full-width action buttons — verbatim button markup, laid out vertically */
.case-aside__acts { display: flex; flex-direction: column; gap: var(--sp-2); }
.case-aside__acts form { margin: 0; }
.case-aside__acts .btn { width: 100%; justify-content: center; }

/* (2) identity block */
.case-aside__id  { display: flex; flex-direction: column; gap: var(--sp-3); }
.case-aside__who { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.case-aside__ava {
  width: 38px; height: 38px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center; font-weight: var(--fw-bold);
  background: var(--accent-soft); color: var(--accent);
}
.case-aside__ava--worker { background: var(--surface-2); color: var(--ink-2); }
.case-aside__who b    { display: block; font-size: var(--fs-body); line-height: var(--lh-tight);
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-aside__who span { font-size: var(--fs-xs); color: var(--ink-3); }
.case-aside__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.case-aside__k   { font-size: var(--fs-sm); color: var(--ink-3); }
.case-aside__flags { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }

/* (3) money glance reuses .fee-figures / .fee-meter verbatim — no new rules. */

@media (max-width: 960px) {
  .case-shell { grid-template-columns: 1fr; }
  .case-aside { position: static; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .case-aside { scroll-behavior: auto; } }

/* ==========================================================================
   §25  CASE DETAIL — fact list of clean property ROWS (owner-approved 2026-07-06).
   Replaces the earlier bordered auto-fit tile grid ("squares"): the fact list is
   now a borderless single-column list of `label | value` rows — gray label
   (--ink-3, regular) beside a dark value (--ink, regular), hierarchy by COLOR
   not weight. ONE hairline --line divider sits BETWEEN rows (no per-cell borders,
   no grid-gap seam bg); subtle --surface-2 hover; muted "—" empties recede; long
   values truncate with ellipsis (+ a title attr on the markup for hover). Also the
   الأطراف two-up split (customer | worker). Token-only, theme-aware, RTL-native.
   ========================================================================== */
.facts {
  display: flex;
  flex-direction: column;
}
.fact {
  display: grid;
  grid-template-columns: 140px 1fr;   /* fixed label rail → values align down the list */
  align-items: baseline;              /* label + value share a baseline; a wrapped long label top-aligns cleanly instead of centre-floating */
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-1);    /* 8px vertical rhythm; 4px inset keeps hover off the edge */
  border-radius: var(--r-sm);
  min-width: 0;
}
.fact + .fact {
  border-top: 1px solid var(--line);   /* ONE hairline between rows — not around cells */
}
.fact:hover {
  background: var(--surface-2);         /* subtle row lift, both themes */
}
.fact__k {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--ink-3);                  /* gray label */
  line-height: var(--lh-tight);
}
.fact__v {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);       /* NOT bold — owner correction */
  color: var(--ink);                    /* dark value; contrast vs gray label = the hierarchy */
  min-width: 0;                         /* allow the ellipsis in a grid track */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;              /* long values truncate; markup carries title="" for hover */
}
.fact__v .num,
.fact__v.num {
  font-weight: var(--fw-regular);       /* numbers stay regular; mono + tabular inherited from .num */
}
/* «الرقم يظهر كاملًا» — a money figure is never ellipsised.
   The rule above sets nowrap/overflow:hidden/text-overflow:ellipsis on .fact__v so long TEXT
   truncates cleanly. Applied to a figure that is catastrophic: in an RTL box the clip takes the
   HIGH-ORDER digits, so 450000.00 paints as a smaller, well-formed, entirely unsuspicious
   number — a wrong amount with no cue that anything was removed. Truncating a name loses a
   name; truncating a number invents one.
   So: any .fact__v CONTAINING a figure stops clipping and is allowed to wrap, while the digit
   run itself stays unbreakable, so the wrap can only land between the figure and its unit.
   Ported alongside the rental contract card, which is the surface that exposed it. */
.fact__v:has(.num),
.fact__v:has(bdi) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* A figure and its unit need a readable gap. The global .rem__unit carries only 2px, which
   at this size renders as «150.00ر.س» — the unit welded to the last digit, which reads as
   part of the number. Scoped to .fact__v so the global stays untouched everywhere else.
   Caught by the first browser render; every server-side assertion passed, because the markup
   was correct and only the pixels were wrong. */
.fact__v .rem__unit { margin-inline-start: 0.4em; }
.fact__v .num,
.fact__v bdi {
  display: inline-block;
  white-space: nowrap;                  /* the digits themselves never break mid-number */
}
@media (max-width: 480px) {
  /* The 140px label rail leaves ~94px for the value on a 320px phone, which is where the clip
     above became reachable. Below 480px the label sits on its own line and the value gets the
     full width. */
  .fact { grid-template-columns: 1fr; }
}
.fact__v--mut {
  color: var(--ink-3);                  /* muted empty "—" recedes; no --ink-4 in this app */
  font-weight: var(--fw-regular);
}
.fact--span2 {
  grid-column: auto;                    /* neutralised: the old 2-col span is now just a normal row */
}

/* الأطراف — customer | worker two-up; stacks under 720px */
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 720px) { .parties { grid-template-columns: 1fr; } }

/* a compact entity subhead: label + optional trailing badge/profile link */
.subhead { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }

/* ============================================================================
   Worker-lifecycle S2 — «دورة الحياة» card (variant A, horizontal stepper) +
   the ?phase= facet dots. Token-driven, RTL-safe (logical props), both themes,
   prefers-reduced-motion safe. Copied from .orbit/design/lifecycle-view-mockups.html.
   ========================================================================= */

/* Journey-phase pills — traffic tokens per the 4 phases (owner directive):
   مرشّحة=accent · قيد الإجراء=warn · نشطة=ok · غادرت=muted. */
.pill--phase-prospect { background: var(--accent-soft); color: var(--accent); }
.pill--phase-pre      { background: var(--warn-soft);   color: var(--warn); }
.pill--phase-active   { background: var(--ok-soft);     color: var(--ok); }
.pill--phase-departed { background: var(--surface-2);   color: var(--ink-3); }
/* a slightly larger headline pill for the two-axis head */
.pill--lg { font-size: var(--fs-sm); padding: 4px var(--sp-4) 4px var(--sp-3); }

/* a tiny phase dot before the ?phase= facet label (colour-keys to the phase pills) */
.bucket-bar__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bucket-bar__dot--prospect    { background: var(--accent); }
.bucket-bar__dot--pre_arrival { background: var(--warn); }
.bucket-bar__dot--in_service  { background: var(--ok); }
.bucket-bar__dot--departed    { background: var(--ink-3); }

/* Worker identity strip at the top of the lifecycle card */
.lc-id { display: flex; align-items: center; gap: var(--sp-3); }
.lc-id__ava { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); font-weight: var(--fw-semi); font-size: var(--fs-sm); flex: none; }
.lc-id__name { font-weight: var(--fw-semi); font-size: var(--fs-h3); }
.lc-id__meta { color: var(--ink-3); font-size: var(--fs-xs); }

/* THE TWO-AXIS HEAD — «المرحلة» and «التوفّر» as two labelled, separated facts,
   never one merged status line (the نشطة+معلّقة disambiguator). */
.lc-axes { display: flex; align-items: stretch; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-4); }
.lc-axis { display: flex; flex-direction: column; gap: var(--sp-2); }
.lc-axis__label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-3); }
.lc-axis__sep { width: 1px; align-self: stretch; background: var(--line); }

/* Shared step-node states */
.lc-node { border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--fw-semi); background: var(--surface); border: 2px solid var(--line); color: var(--ink-3); flex: none; }
.is-done .lc-node { background: var(--ok); border-color: var(--ok); color: #fff; }
.is-current .lc-node { background: var(--warn); border-color: var(--warn); color: var(--step-current-ink); box-shadow: 0 0 0 4px var(--warn-soft); }

/* Step-status legend */
.lc-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); }
.lc-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.lc-legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; font-style: normal; display: grid; place-items: center; font-size: 9px; }
.lc-legend .i-done { background: var(--ok); color: #fff; }
.lc-legend .i-current { background: var(--warn); }
.lc-legend .i-todo { background: var(--surface); border: 2px solid var(--line); }

/* الشكل أ: horizontal stepper (RTL progress rail) */
.lc-stepper { position: relative; display: flex; margin-top: var(--sp-3); }
.lc-stepper::before { content: ""; position: absolute; top: 14px; inset-inline: 15px; height: 2px; background: var(--line); z-index: 0; }
.lc-stepper__fill { position: absolute; top: 14px; inset-inline-start: 15px; height: 2px; background: var(--ok); border-radius: var(--r-pill); z-index: 0; }
.lc-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); position: relative; z-index: 1; text-align: center; padding: 0 2px; }
.lc-step .lc-node { width: 30px; height: 30px; font-size: var(--fs-xs); }
.lc-step__label { font-size: 0.6875rem; line-height: 1.35; color: var(--ink-3); }
.lc-step.is-current .lc-step__label { color: var(--ink); font-weight: var(--fw-semi); }
.lc-step.is-done .lc-step__label { color: var(--ink-2); }

/* نشطة context block (shown instead of the tracker when phase != pre_arrival) */
.lc-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); margin-top: var(--sp-4); }
.lc-context__label { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--ink-3); }
.lc-context__value { font-weight: var(--fw-semi); }

/* ----------------------------------------------------------------------------
   CV-EXTRACT UX (2026-07-09) — the "intelligent upload" experience.
   (a) .cvx-overlay: staged AI-progress theater shown while the CV uploads +
       extracts (worker_cv_upload.html). (b) .cv-propose: the accept-chip for an
       AI-proposed value on a still-empty field (worker_form.html). Tokens only —
       both themes come free from the inverted token set.
   ------------------------------------------------------------------------- */
.cvx-overlay { position: fixed; inset: 0; z-index: 90; display: none;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cvx-overlay.is-on { display: flex; }
.cvx-card { width: min(420px, calc(100vw - var(--sp-6))); padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 18px 48px rgb(0 0 0 / .25)); }
.cvx-card__title { display: flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-semi); margin-bottom: var(--sp-2); }
.cvx-card__title .ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.cvx-card__sub { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--sp-4); }
.cvx-steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.cvx-step { display: flex; align-items: center; gap: var(--sp-3);
  color: var(--ink-3); font-size: var(--fs-sm); transition: color .3s; }
.cvx-step__dot { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); display: inline-flex; align-items: center;
  justify-content: center; transition: border-color .3s, background .3s; }
.cvx-step__dot .ico { width: 12px; height: 12px; display: none; }
.cvx-step.is-active { color: var(--ink); }
.cvx-step.is-active .cvx-step__dot { border-color: var(--accent);
  border-inline-start-color: transparent; animation: cvx-spin .8s linear infinite; }
.cvx-step.is-done { color: var(--ink-2); }
.cvx-step.is-done .cvx-step__dot { border-color: var(--accent);
  background: var(--accent-soft); animation: none; }
.cvx-step.is-done .cvx-step__dot .ico { display: block; color: var(--accent); }
@keyframes cvx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cvx-step.is-active .cvx-step__dot { animation: none; border-inline-start-color: var(--accent); }
}

.cv-propose { display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-3);
  border: 1px dashed var(--accent); border-radius: var(--r-pill, 999px);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-xs); font-family: inherit; cursor: pointer;
  transition: background .15s, transform .1s; }
.cv-propose:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--accent) 12%); }
.cv-propose:active { transform: scale(.98); }
.cv-propose .ico { width: 14px; height: 14px; }
.cv-propose__use { font-weight: var(--fw-semi); text-decoration: underline;
  text-underline-offset: 3px; }

/* =============================================================================================
   Walk-in quick capture — Concept C slide-over (owner decision 2026-07-09)
   docs/design/walkin-quick-capture-concept-2026-07-09.md
   ============================================================================================= */
.walkin-btn kbd { margin-inline-start: 2px; }
kbd {
  font-family: var(--font-mono); font-size: 11px; background: var(--surface-2);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 6px; color: var(--ink-2);
}
.field__label .opt { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }

.wk-scrim {
  position: fixed; inset: 0; z-index: 58; background: rgba(16,33,29,.42);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.wk-scrim.is-open { opacity: 1; pointer-events: auto; }
.wk-scrim[hidden] { display: block; } /* stay in the layout for the fade-out; JS re-adds [hidden] after */

/* RTL is the app's only direction (html[dir=rtl]) — enters from the physical left edge. */
.wk-panel {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(420px, 94vw);
  background: var(--surface); border-inline-end: 1px solid var(--line);
  box-shadow: var(--sh-lg); z-index: 59; display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform var(--dur) var(--ease);
}
.wk-panel.is-open { transform: translateX(0); }
.wk-panel[hidden] { display: flex; }
.wk-panel__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.wk-panel__mark { width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.wk-panel__mark .ico { width: 16px; height: 16px; }
.wk-panel__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); }
.wk-panel__sub { font-size: var(--fs-xs); color: var(--ink-3); }
.wk-panel__body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
.wk-panel__foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }

.wk-banner {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3);
  margin-bottom: var(--sp-3); border-radius: var(--r-md); background: var(--accent-soft);
  color: var(--ink-1, var(--ink)); font-size: var(--fs-sm);
}
.wk-banner .ico { width: 16px; height: 16px; flex: none; color: var(--accent); margin-top: 2px; }
.wk-banner a { font-weight: var(--fw-semi); }
.wk-hint--match { color: var(--accent); }

.wk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wk-chip {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-sm);
  font-weight: var(--fw-medium); padding: 6px var(--sp-3); border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.wk-chip:hover { border-color: var(--accent); color: var(--ink); }
.wk-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent); font-weight: var(--fw-semi); }
.wk-chip:focus-visible { outline: none; box-shadow: var(--sh-focus); }

.wk-more { border: 1px dashed var(--line-strong); border-radius: var(--r-md); margin-top: var(--sp-4); }
.wk-more summary {
  list-style: none; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3);
  cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2);
}
.wk-more summary::-webkit-details-marker { display: none; }
.wk-more summary .ico { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.wk-more[open] summary .ico { transform: rotate(180deg); }
.wk-more__body { padding: 0 var(--sp-3) var(--sp-3); }

body.walkin-open { overflow: hidden; }

@media (max-width: 900px) {
  .walkin-btn__lbl, .walkin-btn__kbd { display: none; }
  .walkin-btn { width: 36px; padding: 0; }
  .wk-panel { width: 100vw; }
}

/* =============================================================================
   §27 المهام — tasks-ledger v2 («د», owner-approved; design of record
   design/tasks-ledger-v2-mockup.html). REPLACES §26 (the mywork/brich/whyline card
   idiom — superseded, ledger v2 is ONE table, not cards on a timeline). Copied
   verbatim from the mockup's candidate CSS; classes that were mockup-scoped under
   .mockD now scope under .tasks-ledger (the page wrapper). Token-only; both
   themes inherit through the vars. .filter-chip / .pager already exist elsewhere
   in this file (reused, not redeclared) — only their page-scoped states are added.
   ============================================================================= */
.thead-mk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.page-title-mk { font-size: 22px; font-weight: 800; margin: 0; }
.thead-mk .spacer { flex: 1; }
.pulse3 { display: grid; grid-template-columns: repeat(3, minmax(120px, 180px)); gap: 10px; margin-bottom: 12px; }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
/* .filter-chip already exists (applied-filter chip elsewhere); the ledger's chips are a
   TOGGLE row (inactive = surface, active = accent-soft) — mirrors .doc-report's own
   scoped variant of the same reused class. */
.tasks-ledger .filter-chip {
  background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.tasks-ledger .filter-chip:hover { border-color: var(--ink-3); color: var(--ink-1); text-decoration: none; }
.tasks-ledger .filter-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }

/* the task-rail: NEUTRAL (jade stays reserved for case rails) + labeled = two channels */
.trail2 { display: flex; flex-direction: column; gap: 3px; width: 104px; flex: none; }
.trail2 .bars { display: flex; gap: 3px; }
.trail2 .bars i { flex: 1; height: 3px; border-radius: 999px; background: var(--line); }
.trail2 .bars i.d { background: var(--ink-3); }
.trail2 .bars i.c { background: var(--ink); }
.trail2.blocked .bars i.c { background: var(--danger); }
.trail2 small { font-size: 10.5px; color: var(--ink-3); line-height: 1.3; }
.trail2.blocked small { color: var(--danger); }

/* severity: color + SHAPE (▲ حرجة، ● عالية، ○ عادية) */
.sev { font-size: 11px; width: 16px; flex: none; display: inline-block; text-align: center; }
.sev.crit { color: var(--danger); }
.sev.hi { color: var(--warn); }
.sev.nrm { color: var(--ink-3); }

/* time column: encodes TIME ONLY */
.cd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; white-space: nowrap; }
.cd.hot { color: var(--danger); font-weight: 600; }
.cd.warm { color: var(--warn); }
.cd.ok { color: var(--ink-3); }

/* the NOW divider — a static hairline INSIDE the ledger, no animation */
tr.nowrow td { padding: 0 !important; border-bottom: 0 !important; }
.nowbar { display: flex; align-items: center; gap: 10px; padding: 2px 14px; }
.nowbar hr { flex: 1; border: 0; border-top: 1px solid var(--accent); opacity: .6; margin: 0; }
.nowbar span { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); font-weight: 600; letter-spacing: .02em; }

.tasks-ledger tr.ovd td:first-child { border-inline-start: 3px solid var(--danger); }
.tasks-ledger .grp td {
  background: var(--surface-2); color: var(--ink-3); font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; padding: 5px 14px; border-bottom: 1px solid var(--line-strong);
}
.tasks-ledger .grp .n { font-family: var(--font-mono); margin-inline-start: 6px; }
.tasks-ledger table.data td { padding-block: 9px; }
.tasks-ledger .tt { font-weight: 600; font-size: 13.5px; }
.tasks-ledger .tt .num { font-size: 12px; color: var(--ink-3); }
.xrow { background: var(--surface-3); }
.xrow td { padding: 12px 16px !important; }
.kvline { display: flex; gap: 26px; flex-wrap: wrap; }
.kvline dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 0; font-size: 12.5px; }
.kvline dt { color: var(--ink-3); }
.kvline dd { margin: 0; color: var(--ink); }
.xacts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* the ledger's own expand chevron (.xtoggle) — a bare icon button, no chrome until hovered */
.xtoggle {
  flex: none; width: 20px; height: 20px; margin-inline-end: 4px; border: 0; background: transparent;
  color: var(--ink-3); cursor: pointer; display: inline-grid; place-items: center; padding: 0;
  border-radius: var(--r-sm); vertical-align: middle;
}
.xtoggle:hover { color: var(--accent); background: var(--surface-2); }
.xtoggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.xtoggle svg { transition: transform var(--dur) var(--ease); }

/* topbar bell (S4): the live my-tasks counter */
.bell-wrap { position: relative; display: inline-flex; }
.bell-count {
  position: absolute; top: -4px; inset-inline-end: -4px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px;
  font-weight: var(--fw-semi); display: grid; place-items: center; padding: 0 4px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}

/* ============================================================================
   §  Website-order desk ring — the transient toast + the per-device mute toggle.
   Fired by weblead_ring.js on the SSE `web-lead` event. Theme-aware via the
   inverting surface/ink/line/accent tokens; RTL-aware; a sheet on phones.
   ========================================================================== */
.weblead-toasts {
  position: fixed; inset-block-end: var(--sp-4); inset-inline-start: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: 200; pointer-events: none; max-width: min(360px, calc(100vw - 2 * var(--sp-4)));
}
.weblead-toast {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  text-decoration: none; pointer-events: auto;
  opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease;
}
.weblead-toast.is-in { opacity: 1; transform: translateY(0); }
.weblead-toast.is-leaving { opacity: 0; transform: translateY(8px); }
a.weblead-toast:hover { background: var(--surface-2); }
.weblead-toast__ico { color: var(--accent); display: inline-flex; flex: 0 0 auto; }
.weblead-toast__text { font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.3; flex: 1 1 auto; }
.weblead-toast__x {
  flex: 0 0 auto; background: transparent; border: 0; color: var(--ink-3);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.weblead-toast__x:hover { color: var(--ink); }

/* mute toggle: show the speaker glyph when on, the muted glyph when off */
#weblead-mute .weblead-mute__off { display: none; }
#weblead-mute.is-off .weblead-mute__on { display: none; }
#weblead-mute.is-off .weblead-mute__off { display: inline; }
#weblead-mute.is-off { color: var(--ink-3); }

/* Web Push opt-in (#push-enable): default shows the slashed bell (off); .is-on = subscribed on
   this device → plain bell in the accent. Mirrors #weblead-mute's two-glyph swap. */
#push-enable .push-enable__on { display: none; }
#push-enable.is-on .push-enable__off { display: none; }
#push-enable.is-on .push-enable__on { display: inline; }
#push-enable.is-on { color: var(--accent); }

@media (max-width: 600px) {
  .weblead-toasts { inset-inline: var(--sp-3); inset-block-end: var(--sp-3); max-width: none; }
}

/* =============================================================================
   قواعد الأتمتة — sentence builder · approval queue
   (design of record: docs/design/automation-rules-2026-08-13.md)
   The editor is a SENTENCE, not a stack of cards: ClickUp's TRIGGER/CONDITION/ACTION
   blocks are an LTR pattern, and in Arabic a supervisor should be able to verify a rule
   by reading it aloud. Everything below serves that one idea.
   ============================================================================= */
.autoedit__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-5);align-items:start;}
.autoedit__side{display:flex;flex-direction:column;gap:var(--sp-4);}
.autoedit__box{padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);}
.autoedit__h{margin:0;font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.05em;color:var(--ink-3);}
.autoedit__kv{display:flex;justify-content:space-between;gap:var(--sp-3);margin:0;font-size:var(--fs-sm);}
.autoedit__kv dt{color:var(--ink-3);} .autoedit__kv dd{margin:0;font-weight:var(--fw-semi);text-align:end;}
.autoedit__guard,.autoedit__note{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:var(--lh-body);}
.autoedit__actions{display:flex;gap:var(--sp-2);}

.autob{padding:var(--sp-6) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-1);}
.autob__block{margin:var(--sp-4) 0 var(--sp-2);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.08em;color:var(--ink-3);padding-bottom:var(--sp-2);border-bottom:1px dashed var(--line-strong);}
.autob__block:first-child{margin-top:0;}
.autob__line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;
  font-size:var(--fs-h3);line-height:2;}
.autob__kw{color:var(--accent);font-weight:var(--fw-bold);min-width:52px;}
.autob__kw--dim{color:var(--ink-3);font-weight:var(--fw-semi);min-width:auto;}
.autob__empty{color:var(--ink-3);font-size:var(--fs-sm);}
.autob__tok{appearance:none;-webkit-appearance:none;border:1px solid var(--line-strong);
  background:var(--surface-2);border-radius:var(--r-md);padding:var(--sp-1) var(--sp-6) var(--sp-1) var(--sp-3);
  font-family:inherit;font-size:var(--fs-h3);font-weight:var(--fw-semi);color:var(--ink);max-width:100%;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) calc(50% + 1px),calc(100% - 11px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color var(--dur),background-color var(--dur);}
.autob__tok:hover{border-color:var(--accent-ring);background-color:var(--accent-soft);}
.autob__tok--val{color:var(--accent);border-color:var(--accent-ring);background-color:var(--accent-soft);}
.autob__del{background:none;border:0;color:var(--ink-3);padding:var(--sp-1);border-radius:var(--r-sm);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity var(--dur);}
.autob__line:hover .autob__del,.autob__del:focus-visible{opacity:1;}
.autob__del:hover{color:var(--danger);background:var(--danger-soft);}
.autob__add{background:none;border:1px dashed var(--line-strong);color:var(--ink-3);border-radius:var(--r-md);
  padding:var(--sp-1) var(--sp-3);font-family:inherit;font-size:var(--fs-xs);font-weight:var(--fw-semi);
  align-self:flex-start;cursor:pointer;}
.autob__add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
/* The §8 line, stated where the operator is making the choice — not on a help page. */
.autob__gate{display:block;margin:0 0 var(--sp-2);margin-inline-start:60px;font-size:var(--fs-sm);
  font-weight:var(--fw-semi);color:var(--warn);background:var(--warn-soft);
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);}
.autob__gate--danger{color:var(--danger);background:var(--danger-soft);}
.autob__reads{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--sp-2);}
.autob__reads-lbl{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;color:var(--ink-3);}
.autob__reads-txt{margin:0;font-size:var(--fs-h3);line-height:1.85;background:var(--surface-2);
  border-inline-start:3px solid var(--accent);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);}

.badge--tier-a{background:var(--ok-soft);color:var(--ok);}
.badge--tier-b{background:var(--warn-soft);color:var(--warn);}
.badge--tier-c{background:var(--danger-soft);color:var(--danger);}

.autorow__sentence{display:block;max-width:52ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.queue-item{margin-bottom:var(--sp-4);}
.queue-item--blocked{border-color:var(--danger);}
.queue-item__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);background:var(--surface-2);border-bottom:1px solid var(--line);}
.queue-item__spacer{flex:1;}
.queue-item__body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--sp-5);padding:var(--sp-4) var(--sp-5);}
.queue-item__msg{margin:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);line-height:var(--lh-body);white-space:pre-wrap;}
.queue-item__msg .qvar{background:var(--accent-soft);color:var(--accent);font-weight:var(--fw-bold);
  border-radius:var(--r-sm);padding:0 var(--sp-1);}
.queue-item__why{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);}
.queue-item__why dt{color:var(--ink-3);} .queue-item__why dd{margin:0;font-weight:var(--fw-semi);}
.queue-item__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line);}

@media (max-width:900px){
  .autoedit__grid{grid-template-columns:1fr;}
  .queue-item__body{grid-template-columns:1fr;}
  .autob{padding:var(--sp-4);}
  .autob__line{font-size:var(--fs-body);}
  .autob__tok{font-size:var(--fs-body);}
  .autob__kw{min-width:auto;}
  .autob__gate{margin-inline-start:0;}
}