/* ==========================================================================
   BAKKAR ADMIN — "CONSOLE"
   --------------------------------------------------------------------------
   The dashboard for the Momentum theme. It speaks the same design language as
   the public site (same red ramp, same warm paper, same ink navy, same springy
   easing) but at admin density: tighter type, flatter radii, more rows per
   screen. A dashboard is scanned and operated, not read.

   FOUR CUSTOMISER AXES:
     data-theme    light | dark            (bakkar_theme  — SHARED with the site)
     data-font     11 Arabic faces         (bakkar_font   — SHARED with the site)
     data-sidebar  default | semidark      (bakkar_admin_sidebar)
     data-layout   vertical | rail |
                   horizontal | boxed      (bakkar_admin_layout)

   Theme, font and language ride the SAME localStorage keys as the public theme,
   so a choice made here is the choice the site makes on its next load. Sidebar
   skin and layout are admin-only concepts — the public site has no sidebar and
   no layout modes — so they get admin-scoped keys rather than feeding the theme
   a value it does not understand.

   THE SHELL IS A GRID OF NAMED AREAS. That is what lets `horizontal` move the
   nav out from beside the content to underneath the topbar without touching the
   markup, and what lets `rail` shrink it to icons.

     vertical / rail / boxed        horizontal
     ┌──────┬────────────┐          ┌───────────────────┐
     │ rail │    top     │          │        top        │
     │      ├────────────┤          ├───────────────────┤
     │      │    main    │          │       rail        │
     └──────┴────────────┘          ├───────────────────┤
                                    │       main        │
                                    └───────────────────┘

   RTL is done with LOGICAL PROPERTIES ONLY (margin-inline, inset-inline,
   padding-block, text-align: start). There is no mirrored stylesheet. The only
   physical properties in this file are the select caret's background-position
   and the two drawer transforms — all three carry an explicit [dir="rtl"]
   override.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* ---- the Bakkar red, split into three roles (see the theme's README) ----
     --brand      #ED1C24  the true logo red. 4.45:1 on white — a hair under
                           the AA floor, so: LARGE SHAPES AND SURFACES ONLY.
     --brand-ink  #C4131A  4.79:1 — the red used for SMALL TEXT.
     --grad-cta            every stop >= 4.5:1 with white, so a button label
                           passes AA anywhere along the sweep. */
  --red-50:#FEF2F2; --red-100:#FCDCDC; --red-500:#ED1C24; --red-600:#D81219;
  --red-700:#C4131A; --red-800:#A50F15;
  --amber-50:#FFF7ED; --amber-500:#F97316; --amber-700:#B45309;

  --paper-0:#FFFFFF; --paper-100:#FBF9F7; --paper-200:#F4F1EE; --paper-300:#EAE6E1;
  --ink-900:#14161F; --ink-800:#1E212C; --ink-700:#3A3E4C; --ink-500:#6B7180; --ink-300:#9AA0AD;

  --bg:var(--paper-100);
  --bg-boxed:#EDE8E3;                     /* the ground the boxed shell sits on */
  --surface:var(--paper-0);
  --surface-2:var(--paper-200);
  --surface-3:var(--paper-300);
  --text:var(--ink-900);
  --text-2:var(--ink-700);
  --text-3:var(--ink-500);
  --text-on-brand:#FFFFFF;

  --line:#E8E5E1;
  --line-strong:#D8D4CF;

  --brand:var(--red-500);
  --brand-ink:var(--red-700);
  --brand-soft:var(--red-50);
  --brand-soft-line:var(--red-100);
  --grad-cta:linear-gradient(112deg,#D40010 0%,#CE2B0B 52%,#CF4B08 100%);
  --grad-cta-h:linear-gradient(112deg,#C0000E 0%,#BB2709 52%,#BC4407 100%);

  /* Semantic state is a separate hue family from the brand red on purpose —
     a red "critical" chip must never be mistaken for a brand accent. */
  --ok:#0E8A5F;   --ok-soft:#E7F6F0;   --ok-line:#BFE5D6;
  --warn:#B45309; --warn-soft:#FEF3C7; --warn-line:#F5DFA6;
  --crit:#B91C1C; --crit-soft:#FEE2E2; --crit-line:#F7C7C7;
  --info:#1D4ED8; --info-soft:#EFF4FF; --info-line:#CBDBFB;

  --focus:#1D4ED8;
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:15px; --r-xl:20px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(20,22,31,.05), 0 1px 1px rgba(20,22,31,.03);
  --sh-2:0 4px 14px -3px rgba(20,22,31,.09), 0 2px 5px -2px rgba(20,22,31,.05);
  --sh-3:0 18px 44px -12px rgba(20,22,31,.22), 0 6px 14px -6px rgba(20,22,31,.10);
  --sh-4:0 32px 72px -18px rgba(20,22,31,.34);
  --ring:inset 0 0 0 1px rgba(20,22,31,.05);

  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.4,0,.2,1);

  --font:'Plus Jakarta Sans','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --font-num:'Manrope','Plus Jakarta Sans','Segoe UI',Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  /* The Arabic face is swapped by [data-font] further down. */
  --font-ar:var(--fam-cairo);
  --fam-sultan:'Sultan Nahia','Almarai','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-cairo:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-tajawal:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-almarai:'Almarai','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-plexar:'IBM Plex Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-notosans:'Noto Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-notokufi:'Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-vazirmatn:'Vazirmatn','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-changa:'Changa','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-elmessiri:'El Messiri','Segoe UI',Tahoma,Arial,sans-serif;
  --fam-amiri:'Amiri','Segoe UI',Tahoma,'Times New Roman',serif;

  --rail-w:252px;
  --top-h:60px;

  /* The topbar. */
  --hdr-bg:var(--surface);
  --hdr-line:var(--line);
  --hdr-fg:var(--text);
  --hdr-fg-dim:var(--text-3);
  --hdr-btn-bg:var(--surface-2);
  --hdr-btn-line:var(--line);

  /* The sidebar. `semidark` overrides ONLY these, so no component below has to
     know the plate changed colour. */
  --side-bg:var(--surface);
  --side-line:var(--line);
  --side-fg:var(--text-2);
  --side-fg-dim:var(--text-3);
  --side-hover-bg:var(--surface-2);
  --side-hover-fg:var(--text);
  --side-on-bg:var(--brand-soft);
  --side-on-fg:var(--brand-ink);
  --side-on-line:var(--brand-soft-line);
  --side-brand-fg:var(--text);
  --side-tip-bg:var(--ink-900);
  --side-tip-fg:#FFFFFF;
}

/* ---- self-hosted Arabic, shared with the theme ---- */
@font-face {
  font-family:'Sultan Nahia';
  src:url('../../assets/fonts/SultanNahia.ttf') format('truetype');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---- DARK ----------------------------------------------------------------
   The red ramp is re-lit, not re-hued: on a dark ground a red has to come UP
   the scale to stay legible. #ED1C24 on #171A22 is only ~4.3:1. */
:root[data-theme="dark"] {
  color-scheme:dark;

  --bg:#0E1015;
  --bg-boxed:#07080B;
  --surface:#171A22;
  --surface-2:#1F232D;
  --surface-3:#282D38;
  --text:#F2F3F5;
  --text-2:#C3C7D0;
  --text-3:#8A90A0;

  --line:#272B36;
  --line-strong:#343945;

  --brand:#FF1F2B;
  --brand-ink:#FF6B72;                 /* small red text on dark — 5.9:1 */
  --brand-soft:rgba(255,0,16,.13);
  --brand-soft-line:rgba(255,60,72,.26);

  --ok:#34D399;   --ok-soft:rgba(16,185,129,.14);   --ok-line:rgba(52,211,153,.3);
  --warn:#FBBF24; --warn-soft:rgba(251,191,36,.14); --warn-line:rgba(251,191,36,.3);
  --crit:#F87171; --crit-soft:rgba(248,113,113,.14);--crit-line:rgba(248,113,113,.3);
  --info:#93B4FF; --info-soft:rgba(147,180,255,.13);--info-line:rgba(147,180,255,.3);

  --focus:#93B4FF;
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 6px 18px -4px rgba(0,0,0,.5);
  --sh-3:0 20px 48px -14px rgba(0,0,0,.65);
  --sh-4:0 36px 80px -20px rgba(0,0,0,.8);
  --ring:inset 0 0 0 1px rgba(255,255,255,.05);

  --hdr-bg:var(--surface);
  --hdr-btn-bg:var(--surface-2);

  --side-bg:var(--surface);
  --side-tip-bg:#000000;
}

/* ---- SIDEBAR = SEMI-DARK -------------------------------------------------
   Dark rail, whatever the mode. In dark mode these values are what the sidebar
   already is, so the two agree and there is nothing to reconcile. It must come
   AFTER the dark block: identical specificity, so source order decides. */
:root[data-sidebar="semidark"] {
  --side-bg:#171A22;
  --side-line:#272B36;
  --side-fg:#C3C7D0;
  --side-fg-dim:#8A90A0;
  --side-hover-bg:#1F232D;
  --side-hover-fg:#F2F3F5;
  --side-on-bg:rgba(255,0,16,.14);
  --side-on-fg:#FF6B72;                /* the lifted red — legible on the dark plate */
  --side-on-line:rgba(255,60,72,.26);
  --side-brand-fg:#F2F3F5;
  --side-tip-bg:#000000;
}

/* ---- ARABIC FACE (driven by the customiser) ---- */
:root[data-font="sultan"]    { --font-ar:var(--fam-sultan); }
:root[data-font="cairo"]     { --font-ar:var(--fam-cairo); }
:root[data-font="tajawal"]   { --font-ar:var(--fam-tajawal); }
:root[data-font="almarai"]   { --font-ar:var(--fam-almarai); }
:root[data-font="plexar"]    { --font-ar:var(--fam-plexar); }
:root[data-font="notosans"]  { --font-ar:var(--fam-notosans); }
:root[data-font="notokufi"]  { --font-ar:var(--fam-notokufi); }
:root[data-font="vazirmatn"] { --font-ar:var(--fam-vazirmatn); }
:root[data-font="changa"]    { --font-ar:var(--fam-changa); }
:root[data-font="elmessiri"] { --font-ar:var(--fam-elmessiri); }
:root[data-font="amiri"]     { --font-ar:var(--fam-amiri); }

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

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

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Arabic: swap the face, drop the negative tracking (it breaks the joining),
   and open the leading up — Arabic needs more room between lines than Latin. */
[dir="rtl"] body, [dir="rtl"] {
  font-family:var(--font-ar);
  letter-spacing:normal;
  line-height:1.72;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .stat__v, [dir="rtl"] .page__t { letter-spacing:normal; }

a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; color:inherit; }
button { background:none; border:0; cursor:pointer; padding:0; }
img { max-width:100%; display:block; }
h1,h2,h3,h4,p { margin:0; }

:focus-visible {
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--r-xs);
}

::selection { background:#FFDDDF; color:var(--ink-900); }

/* Numerals, phones, emails, slugs, sizes: LTR-safe inside Arabic text and
   aligned in columns. */
.num, .mono {
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
}
.mono { font-family:var(--font-mono); font-size:.92em; }
[dir="rtl"] .num, [dir="rtl"] .mono { direction:ltr; display:inline-block; text-align:start; }

.sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   3. SHELL — a grid of named areas. The layout modes rearrange the areas;
   nothing inside them has to change.
   ========================================================================== */
.shell {
  display:grid;
  min-height:100vh;
  grid-template-columns:var(--rail-w) minmax(0,1fr);
  grid-template-rows:var(--top-h) minmax(0,1fr);
  grid-template-areas:
    "rail top"
    "rail main";
}
.top  { grid-area:top;  position:sticky; top:0; z-index:25; }
.rail { grid-area:rail; position:sticky; top:0; height:100vh; align-self:start; z-index:30; }
.main { grid-area:main; min-width:0; }

.skip {
  position:absolute; inset-inline-start:12px; top:-60px; z-index:100;
  background:var(--surface); color:var(--text); padding:10px 16px;
  border-radius:var(--r-sm); box-shadow:var(--sh-3); font-weight:700;
  transition:top .2s var(--ease);
}
.skip:focus { top:12px; }

/* ==========================================================================
   4. SIDEBAR
   ========================================================================== */
.rail {
  background:var(--side-bg);
  border-inline-end:1px solid var(--side-line);
  display:flex; flex-direction:column;
  transition:background .25s var(--ease);
}

.rail__brand {
  display:flex; align-items:center; gap:11px;
  padding-inline:18px; height:var(--top-h); flex:none;
  border-bottom:1px solid var(--side-line);
  color:var(--side-brand-fg);
  overflow:hidden;
}
/* The real logo mark, not a CSS approximation of it. */
.rail__logo { width:34px; height:34px; flex:none; object-fit:contain; }
.rail__txt { min-width:0; }
.rail__name {
  display:block;
  font-weight:800; font-size:14.5px; letter-spacing:-.02em; line-height:1.25;
  white-space:nowrap;
}
.rail__sub {
  display:block;
  font-size:10.5px; color:var(--side-fg-dim); letter-spacing:.03em;
  text-transform:uppercase; font-weight:700;
  white-space:nowrap;
}
[dir="rtl"] .rail__sub { letter-spacing:normal; }

.rail__nav {
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:12px 10px 16px;
  display:flex; flex-direction:column; gap:1px;
}
.rail__nav::-webkit-scrollbar { width:6px; height:6px; }
.rail__nav::-webkit-scrollbar-thumb { background:var(--side-hover-bg); border-radius:99px; }

.navgrp {
  font-size:9.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--side-fg-dim); padding:16px 10px 6px;
  white-space:nowrap;
}
.navgrp:first-child { padding-top:2px; }
[dir="rtl"] .navgrp { letter-spacing:normal; }

.nav {
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--r-sm);
  color:var(--side-fg); font-weight:500; font-size:13.5px;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.nav:hover { background:var(--side-hover-bg); color:var(--side-hover-fg); }
.nav.is-on {
  background:var(--side-on-bg); color:var(--side-on-fg); font-weight:700;
  box-shadow:inset 0 0 0 1px var(--side-on-line);
}
.nav svg { width:17px; height:17px; flex:none; stroke-width:1.9; fill:none; stroke:currentColor; }
.nav__l { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav__c {
  margin-inline-start:auto; flex:none;
  font-family:var(--font-num); font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--side-fg-dim);
}
.nav.is-on .nav__c { color:var(--side-on-fg); opacity:.75; }
.nav__b {
  margin-inline-start:auto; flex:none;
  min-width:19px; height:19px; padding-inline:6px; border-radius:var(--r-pill);
  background:var(--brand); color:#fff;
  font-family:var(--font-num); font-size:10.5px; font-weight:800;
  display:grid; place-items:center;
}

/* The tooltip only ever shows in `rail` layout, where the label is gone. */
.nav__tip {
  position:absolute; inset-inline-start:calc(100% + 10px); top:50%;
  transform:translateY(-50%) scale(.92);
  background:var(--side-tip-bg); color:var(--side-tip-fg);
  font-size:12px; font-weight:600; white-space:nowrap;
  padding:5px 10px; border-radius:7px;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .15s var(--ease), transform .24s var(--spring);
  z-index:60;
}

/* ==========================================================================
   5. TOPBAR
   ========================================================================== */
.top {
  height:var(--top-h);
  background:var(--hdr-bg); color:var(--hdr-fg);
  border-bottom:1px solid var(--hdr-line);
  display:flex; align-items:center; gap:8px;
  padding-inline:16px;
}

/* The burger is NOT a mobile-only control. On the desktop it collapses the
   sidebar to icons; on mobile it slides the drawer in. Same button, same
   meaning — "show me less / more of the nav". It only disappears in the
   horizontal layout, where there is no vertical sidebar to collapse (§6). */
.burger { display:grid; }

/* Chrome that MOVES between the header and the user menu at the breakpoint.
   Each control lives in exactly ONE place at any given width — never both. */
.only-mobile  { display:none !important; }
@media (max-width:900px) {
  .only-desktop { display:none !important; }
  .only-mobile  { display:flex !important; }
}

/* Shown only in `horizontal`, where the rail has no room for a brand. */
.top__brand { display:none; align-items:center; gap:9px; flex:none; margin-inline-end:6px; }
.top__brand img { width:30px; height:30px; object-fit:contain; }
.top__brand span { font-weight:800; font-size:14px; letter-spacing:-.02em; white-space:nowrap; }

/* Every control in the header is 40px tall, so the row reads as one band rather
   than a set of differently-sized objects sharing a strip. */
.top .btn { height:40px; border-radius:var(--r-md); }
.top .btn svg { width:16px; height:16px; }
.top .btn--sm { font-size:12.5px; padding-inline:13px; }

.search {
  flex:1; max-width:420px; min-width:0; height:40px;
  display:flex; align-items:center; gap:9px;
  background:var(--hdr-btn-bg);
  border:1px solid var(--hdr-btn-line);
  border-radius:var(--r-pill);
  padding-inline:15px;
  color:var(--hdr-fg-dim); font-size:13px;
  cursor:text; text-align:start;
  transition:border-color .16s var(--ease);
}
.search:hover { border-color:var(--line-strong); }
.search svg { width:17px; height:17px; flex:none; stroke-width:1.9; fill:none; stroke:currentColor; }
.search__t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search kbd {
  flex:none; font-family:var(--font-num); font-size:10.5px; font-weight:700;
  background:var(--surface); color:var(--text-3);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}

.top__sp { flex:1; }

/* Header controls are the only icons in the app with no label next to them, so
   they carry the whole meaning on their own. They are sized for that — and for
   a thumb: 40px clears the 44px touch target once the 4px gap either side is
   counted, which is why the header is the one place the icons run larger than
   the 17px used everywhere else. */
.iconbtn {
  width:40px; height:40px; flex:none;
  border-radius:var(--r-md);
  display:grid; place-items:center;
  color:var(--hdr-fg); opacity:.8;
  border:1px solid transparent;
  transition:background .16s var(--ease), opacity .16s var(--ease);
}
.iconbtn:hover { background:var(--hdr-btn-bg); border-color:var(--hdr-btn-line); opacity:1; }
.iconbtn svg { width:21px; height:21px; stroke-width:1.8; fill:none; stroke:currentColor; }

/* Language: a two-up segmented control, not a dropdown — there are two
   languages and there will only ever be two. Each option is written in its OWN
   language ("English" / "العربية"), the way the public theme does it: you should
   never have to already read a language to find it. */
.langsw {
  display:flex; flex:none; align-items:center;
  height:40px;
  background:var(--hdr-btn-bg);
  border:1px solid var(--hdr-btn-line);
  border-radius:var(--r-pill); padding:4px;
}
.langsw__opt {
  display:flex; align-items:center; height:100%;
  padding-inline:14px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:700; white-space:nowrap;
  color:var(--hdr-fg-dim);
  transition:background .18s var(--ease), color .18s var(--ease);
}
.langsw__opt:hover { color:var(--hdr-fg); }
.langsw__opt[aria-pressed="true"] {
  background:var(--surface); color:var(--text); box-shadow:var(--sh-1);
}
/* The Arabic option renders in an Arabic face whatever the admin is set to. */
.langsw__opt[lang="ar"] { font-family:var(--font-ar); font-size:13.5px; }

/* Inside the user menu (mobile) it is full-width and skinned to the menu, not
   the header — the header tokens do not apply on that surface. */
.menu__lang {
  flex-direction:column; gap:7px;
  padding:9px 11px 11px;
}
.menu__lang .langsw {
  --hdr-btn-bg:var(--surface-2);
  --hdr-btn-line:var(--line);
  --hdr-fg-dim:var(--text-3);
  --hdr-fg:var(--text);
  width:100%;
}
.menu__lang .langsw__opt { flex:1; text-align:center; }
.menu__lab {
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3);
}
[dir="rtl"] .menu__lab { letter-spacing:.02em; }

/* user menu */
.user { position:relative; flex:none; }
.user__btn {
  display:flex; align-items:center; gap:8px;
  height:40px;
  padding-inline:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--hdr-btn-line); background:var(--hdr-btn-bg);
  color:var(--hdr-fg);
  transition:background .16s var(--ease);
}
.user__btn:hover { background:var(--surface-2); }
.avatar {
  width:32px; height:32px; border-radius:50%; flex:none;
  background:var(--grad-cta); color:#fff;
  display:grid; place-items:center;
  font-family:var(--font-num); font-size:12px; font-weight:800;
}
.user__n { font-size:13px; font-weight:600; max-width:110px; overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap; }
.user__btn svg { width:15px; height:15px; opacity:.6; stroke-width:2.3; fill:none; stroke:currentColor; }

.menu {
  position:absolute; inset-inline-end:0; top:calc(100% + 8px);
  min-width:250px; z-index:60;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  padding:6px;
  opacity:0; transform:translateY(-6px) scale(.97); transform-origin:top right;
  pointer-events:none;
  transition:opacity .16s var(--ease), transform .24s var(--spring);
}
[dir="rtl"] .menu { transform-origin:top left; }
.menu.is-open { opacity:1; transform:none; pointer-events:auto; }
.menu__head { padding:10px 11px 11px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.menu__n { font-weight:700; font-size:13.5px; }
.menu__e { font-size:12px; color:var(--text-3); margin-top:1px; }
.menu__i {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; border-radius:var(--r-sm);
  font-size:13.5px; color:var(--text-2); text-align:start;
  transition:background .14s var(--ease);
}
.menu__i:hover { background:var(--surface-2); color:var(--text); }
.menu__i svg { width:16px; height:16px; flex:none; stroke-width:1.9; fill:none; stroke:currentColor; }
.menu__i--danger { color:var(--crit); }
.menu__i--danger:hover { background:var(--crit-soft); }
.menu__sep { height:1px; background:var(--line); margin:6px 0; }

/* ==========================================================================
   6. LAYOUT MODES

   `data-nav` is DERIVED — by applyPrefs() and by the pre-paint script, from the
   same two lines of logic — out of the layout and the collapsed flag:

       horizontal            ->  bar
       rail, OR collapsed    ->  icons
       anything else         ->  full

   That derivation exists so the CSS below never has to spell out
   `[data-layout="rail"], [data-collapsed="true"]:not([data-layout="horizontal"])`
   on every single rule. A collapsed sidebar and the rail layout are the SAME
   visual state — there is no reason to express it twice.

   `icons` and `bar` only make sense with room to spare, so they are scoped to
   the desktop. Below 901px every layout collapses to the same off-canvas
   drawer — see §23 — and there is nothing to unwind.
   ========================================================================== */

/* ---- BOXED: vertical, but the whole shell is a slab on a deeper ground.
   The max-width has to be NARROWER THAN A LAPTOP or the mode does nothing
   visible on the machine most people will look at it on. 1200px leaves a real
   gutter at 1280 and up; below that it stops binding, which is the right
   no-op. --- */
:root[data-layout="boxed"] body { background:var(--bg-boxed); }
:root[data-layout="boxed"] .shell {
  max-width:1200px;
  margin-inline:auto;
  background:var(--bg);
  border-inline:1px solid var(--line);
  box-shadow:var(--sh-3);
}

@media (min-width:901px) {

  /* ---- ICONS: the rail layout, or a sidebar the burger has collapsed.
     The label is gone, so the tooltip earns its keep. --- */
  :root[data-nav="icons"] { --rail-w:74px; }
  :root[data-nav="icons"] .rail__brand { justify-content:center; padding-inline:0; gap:0; }
  :root[data-nav="icons"] .rail__txt { display:none; }
  :root[data-nav="icons"] .rail__nav { padding-inline:12px; }
  :root[data-nav="icons"] .nav { justify-content:center; padding-inline:0; }
  :root[data-nav="icons"] .nav__l,
  :root[data-nav="icons"] .nav__c { display:none; }
  /* The badge rides the icon's corner instead of the row's end. */
  :root[data-nav="icons"] .nav__b {
    position:absolute; top:2px; inset-inline-end:6px;
    margin:0; min-width:16px; height:16px; padding-inline:4px; font-size:9.5px;
    box-shadow:0 0 0 2px var(--side-bg);
  }
  /* A group heading with no room for words becomes what it always was: a rule. */
  :root[data-nav="icons"] .navgrp {
    height:1px; padding:0; margin:12px 8px 8px;
    background:var(--side-line);
    font-size:0; line-height:0; overflow:hidden;
  }
  :root[data-nav="icons"] .navgrp:first-child { display:none; }
  :root[data-nav="icons"] .nav:hover .nav__tip,
  :root[data-nav="icons"] .nav:focus-visible .nav__tip {
    opacity:1; visibility:visible; transform:translateY(-50%) scale(1);
  }

  /* ---- BAR: horizontal. The nav moves under the topbar and runs across. */
  :root[data-nav="bar"] .shell {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--top-h) auto minmax(0,1fr);
    grid-template-areas:
      "top"
      "rail"
      "main";
  }
  :root[data-nav="bar"] .rail {
    position:sticky; top:var(--top-h); height:auto;
    border-inline-end:0;
    border-bottom:1px solid var(--side-line);
    flex-direction:row; align-items:center;
  }
  :root[data-nav="bar"] .rail__brand { display:none; }
  :root[data-nav="bar"] .top__brand { display:flex; }
  :root[data-nav="bar"] .rail__nav {
    flex-direction:row; align-items:center; gap:3px;
    padding:8px 16px;
    overflow-x:auto; overflow-y:hidden;
  }
  :root[data-nav="bar"] .nav { flex:none; white-space:nowrap; }
  /* The group heading becomes a divider — the grouping survives, the words go. */
  :root[data-nav="bar"] .navgrp {
    flex:none; align-self:center;
    width:1px; height:20px; padding:0; margin-inline:9px;
    background:var(--side-line);
    font-size:0; line-height:0; overflow:hidden;
  }
  :root[data-nav="bar"] .navgrp:first-child { display:none; }

  /* There is no vertical sidebar to collapse, so there is no burger. */
  :root[data-nav="bar"] .burger { display:none; }
}

/* ==========================================================================
   7. PAGE
   ========================================================================== */
.page { padding:22px; }
.page__in { max-width:1280px; margin-inline:auto; }

.page__head {
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}
.page__t { font-size:23px; font-weight:800; letter-spacing:-.03em; text-wrap:balance; }
.page__s { color:var(--text-3); font-size:13px; margin-top:3px; max-width:70ch; }
.page__a { margin-inline-start:auto; display:flex; gap:8px; flex-wrap:wrap; }

.crumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3);
         margin-bottom:6px; }
.crumb a:hover { color:var(--brand-ink); }
.crumb svg { width:12px; height:12px; stroke-width:2.4; fill:none; stroke:currentColor; opacity:.6; }

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-sm);
  font-size:13px; font-weight:700; letter-spacing:-.005em;
  white-space:nowrap;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line-strong);
  box-shadow:var(--sh-1);
  transition:background .16s var(--ease), border-color .16s var(--ease),
             transform .3s var(--spring), box-shadow .2s var(--ease);
}
.btn:hover { background:var(--surface-2); border-color:var(--text-3); }
.btn:active { transform:translateY(1px); }
.btn svg { width:15px; height:15px; flex:none; stroke-width:2.3; fill:none; stroke:currentColor; }
.btn[disabled] { opacity:.5; pointer-events:none; }

.btn--brand {
  background:var(--grad-cta); color:#fff; border-color:transparent;
  box-shadow:0 8px 20px -10px rgba(216,18,25,.75);
}
.btn--brand:hover { background:var(--grad-cta-h); border-color:transparent; }

.btn--ghost { background:transparent; border-color:transparent; box-shadow:none; color:var(--text-2); }
.btn--ghost:hover { background:var(--surface-2); border-color:transparent; color:var(--text); }

.btn--danger { color:var(--crit); border-color:var(--crit-line); background:var(--crit-soft); box-shadow:none; }
.btn--danger:hover { background:var(--crit); color:#fff; border-color:transparent; }

.btn--sm { padding:6px 11px; font-size:12px; border-radius:var(--r-xs); }
.btn--sm svg { width:13px; height:13px; }
.btn--icon { padding:0; width:32px; height:32px; }
.btn--icon.btn--sm { width:28px; height:28px; }

/* ==========================================================================
   9. PANELS
   ========================================================================== */
.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
.panel + .panel { margin-top:16px; }

.panel__h {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:13px 16px;
  border-bottom:1px solid var(--line);
}
.panel__t { font-size:14px; font-weight:800; letter-spacing:-.015em; }
.panel__s { font-size:12px; color:var(--text-3); margin-top:1px; }
.panel__a { margin-inline-start:auto; display:flex; align-items:center; gap:8px; }
.panel__link { font-size:12.5px; font-weight:700; color:var(--brand-ink); }
.panel__link:hover { text-decoration:underline; }
.panel__b { padding:16px; }
.panel__f {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--line); background:var(--surface-2);
}
.panel__f .grow { flex:1; }

.grid2 { display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }

/* ==========================================================================
   10. STATS
   ========================================================================== */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }

.stat {
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:15px 16px;
  box-shadow:var(--sh-1);
  transition:transform .3s var(--spring), box-shadow .2s var(--ease);
}
.stat:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.stat__l {
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3);
}
[dir="rtl"] .stat__l { letter-spacing:.02em; }
.stat__v {
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:29px; font-weight:800; letter-spacing:-.035em; line-height:1;
  margin-top:7px;
}
.stat__v small { font-size:16px; font-weight:700; color:var(--text-3); letter-spacing:0; }
.stat__f { display:flex; align-items:center; gap:6px; margin-top:9px;
           font-size:12px; color:var(--text-3); }
.stat--crit .stat__v { color:var(--crit); }
.stat--warn .stat__v { color:var(--warn); }
.stat--ok   .stat__v { color:var(--ok); }

.stat__spark { position:absolute; inset-inline-end:14px; top:14px; width:68px; height:28px; }

.trend { display:inline-flex; align-items:center; gap:3px; font-weight:800;
         font-family:var(--font-num); }
.trend--up { color:var(--ok); }
.trend--down { color:var(--crit); }
.trend svg { width:12px; height:12px; stroke-width:2.8; fill:none; stroke:currentColor; }

/* ==========================================================================
   11. TABLES
   ========================================================================== */
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
thead th {
  text-align:start;
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3);
  background:var(--surface-2);
  padding:9px 16px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
[dir="rtl"] thead th { letter-spacing:.03em; }
tbody td { padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr { transition:background .14s var(--ease); }
tbody tr:hover { background:var(--surface-2); }
tbody tr.is-unread td { background:var(--brand-soft); }
tbody tr.is-unread:hover td { background:var(--brand-soft-line); }
td.shrink { width:1%; white-space:nowrap; }
td.actions { text-align:end; }
td.actions .row-a { display:inline-flex; gap:4px; opacity:0; transition:opacity .14s var(--ease); }
tr:hover td.actions .row-a, tr:focus-within td.actions .row-a { opacity:1; }
@media (hover:none) { td.actions .row-a { opacity:1; } }

.cellmain { font-weight:700; display:flex; align-items:center; gap:7px; }
.cellsub  { font-size:12px; color:var(--text-3); margin-top:2px; }

.thumb {
  width:38px; height:38px; border-radius:var(--r-sm); flex:none;
  object-fit:cover; background:var(--surface-2);
  box-shadow:var(--ring);
}
.thumb--lg { width:52px; height:52px; }

/* the little monogram the theme uses for agents (there is no photo field) */
.mono-av {
  width:36px; height:36px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink);
  font-family:var(--font-num); font-size:12px; font-weight:800;
  box-shadow:inset 0 0 0 1px var(--brand-soft-line);
}

/* ==========================================================================
   12. CHIPS / BADGES / DOTS
   ========================================================================== */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.01em;
  padding:3px 9px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-2);
  border:1px solid var(--line);
  white-space:nowrap;
}
.chip--brand { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand-soft-line); }
.chip--ok    { background:var(--ok-soft);   color:var(--ok);   border-color:var(--ok-line); }
.chip--warn  { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.chip--crit  { background:var(--crit-soft); color:var(--crit); border-color:var(--crit-line); }
.chip--info  { background:var(--info-soft); color:var(--info); border-color:var(--info-line); }
.chip--dot::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }

.chips { display:flex; flex-wrap:wrap; gap:6px; }

/* the translation-state dot — the single most repeated signal in this UI */
.tdot { width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }
.tdot--ok   { background:var(--ok); }
.tdot--warn { background:var(--warn); }

/* ==========================================================================
   13. FORMS
   ========================================================================== */
.form { display:grid; gap:16px; }

.field { display:flex; flex-direction:column; min-width:0; }
.field__l {
  display:flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:5px;
}
[dir="rtl"] .field__l { letter-spacing:.02em; }
.field__l .req { color:var(--brand-ink); }
.field__h { font-size:12px; color:var(--text-3); margin-top:5px; }
.field__e { font-size:12px; color:var(--crit); margin-top:5px; font-weight:600; }

.flag {
  font-family:var(--font-num);
  font-size:9px; font-weight:800; letter-spacing:.05em;
  padding:1px 5px; border-radius:4px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-3);
}
.flag--ar { background:var(--brand-soft); border-color:var(--brand-soft-line); color:var(--brand-ink); }

.input, .select, .textarea {
  width:100%;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:9px 12px;
  font-size:13.5px; font-family:inherit; color:var(--text);
  box-shadow:var(--sh-1);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color:var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
}
.input::placeholder, .textarea::placeholder { color:var(--text-3); }
.textarea { resize:vertical; min-height:80px; line-height:1.6; }
.textarea--tall { min-height:180px; }
.textarea--code { font-family:var(--font-mono); font-size:12.5px; line-height:1.7; }

/* Arabic inputs carry their own face AND their own direction, whatever the
   admin chrome is currently set to. You can be reading the UI in English and
   still type Arabic into the right box.
   `direction: rtl` is set here, so `text-align: start` already resolves to the
   right edge — no physical value needed. */
.input--ar, .textarea--ar {
  font-family:var(--font-ar); direction:rtl; text-align:start;
  line-height:1.75;
}
.input--missing, .textarea--missing {
  border-color:var(--warn-line); background:var(--warn-soft);
}
.input--missing::placeholder, .textarea--missing::placeholder { color:var(--warn); opacity:.85; font-weight:600; }

.select {
  appearance:none; -webkit-appearance:none;
  padding-inline-end:32px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7180' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;      /* PHYSICAL — flipped for RTL below */
  background-size:15px;
}
[dir="rtl"] .select { background-position:left 11px center; }
:root[data-theme="dark"] .select {
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A90A0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* THE BILINGUAL PAIR — the most repeated component in this dashboard.
   EN and AR sit side by side so a gap is visible without clicking anything. */
.pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pair > .field { min-width:0; }

/* switch / toggle */
.switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch__t {
  width:38px; height:22px; border-radius:var(--r-pill); flex:none;
  background:var(--surface-3); position:relative;
  transition:background .22s var(--ease);
  box-shadow:var(--ring);
}
.switch__t::after {
  content:""; position:absolute; top:3px; inset-inline-start:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1);
  transition:transform .28s var(--spring);
}
.switch input:checked + .switch__t { background:var(--ok); }
.switch input:checked + .switch__t::after { transform:translateX(16px); }
[dir="rtl"] .switch input:checked + .switch__t::after { transform:translateX(-16px); }
.switch input:focus-visible + .switch__t { box-shadow:var(--focus-ring); }
.switch__l { font-size:13px; font-weight:600; }

/* checkbox grid (tags, extras, categories) */
.checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px; }
.check {
  display:flex; align-items:center; gap:9px;
  padding:8px 11px; border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--surface);
  cursor:pointer; font-size:13px;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.check:hover { background:var(--surface-2); }
.check input { position:absolute; opacity:0; width:0; height:0; }
.check__b {
  width:16px; height:16px; border-radius:5px; flex:none;
  border:1.5px solid var(--line-strong);
  display:grid; place-items:center;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.check__b svg { width:11px; height:11px; stroke-width:3.2; fill:none; stroke:#fff;
                opacity:0; transition:opacity .14s var(--ease); }
.check input:checked + .check__b { background:var(--brand); border-color:var(--brand); }
.check input:checked + .check__b svg { opacity:1; }
.check:has(input:checked) { border-color:var(--brand-soft-line); background:var(--brand-soft); }
.check input:focus-visible + .check__b { box-shadow:var(--focus-ring); }
.check__ar { color:var(--text-3); font-family:var(--font-ar); font-size:12px;
             margin-inline-start:auto; direction:rtl; }

/* repeater — for hours, addresses, specs, process steps, capabilities, stats */
.rep { display:grid; gap:8px; }
.rep__row {
  display:grid; gap:8px;
  padding:11px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-2);
}
.rep__hd {
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3);
}
[dir="rtl"] .rep__hd { letter-spacing:normal; }
.rep__hd .n {
  width:20px; height:20px; border-radius:6px; flex:none;
  background:var(--surface); border:1px solid var(--line);
  display:grid; place-items:center;
  font-family:var(--font-num); font-size:10.5px; font-weight:800; color:var(--text-2);
}
.rep__tools { margin-inline-start:auto; display:flex; gap:3px; }
.rep__row .pair { gap:8px; }
.rep__row .input, .rep__row .textarea { background:var(--surface); }

/* ==========================================================================
   14. EMPTY STATE
   ========================================================================== */
.empty { padding:44px 24px; text-align:center; }
.empty__i {
  width:44px; height:44px; border-radius:var(--r-md); margin:0 auto 12px;
  display:grid; place-items:center;
  background:var(--surface-2); color:var(--text-3);
}
.empty__i svg { width:21px; height:21px; stroke-width:1.7; fill:none; stroke:currentColor; }
.empty__t { font-weight:700; font-size:14px; }
.empty__d { font-size:13px; color:var(--text-3); margin-top:4px; max-width:44ch;
            margin-inline:auto; }
.empty .btn { margin-top:14px; }

/* ==========================================================================
   15. HEALTH LIST
   ========================================================================== */
.health { padding:6px; display:flex; flex-direction:column; gap:1px; }
.hrow {
  display:flex; align-items:flex-start; gap:11px;
  padding:11px; border-radius:var(--r-md);
  transition:background .14s var(--ease);
}
.hrow:hover { background:var(--surface-2); }
.hicon { width:28px; height:28px; border-radius:var(--r-sm); flex:none; display:grid; place-items:center; }
.hicon svg { width:15px; height:15px; stroke-width:2.2; fill:none; stroke:currentColor; }
.hicon--crit { background:var(--crit-soft); color:var(--crit); }
.hicon--warn { background:var(--warn-soft); color:var(--warn); }
.hicon--ok   { background:var(--ok-soft);   color:var(--ok); }
.hrow__t { font-weight:600; font-size:13px; line-height:1.4; }
.hrow__d { font-size:12px; color:var(--text-3); margin-top:2px; }
.hrow__a {
  margin-inline-start:auto; align-self:center; flex:none;
  font-size:11.5px; font-weight:700; color:var(--brand-ink); white-space:nowrap;
}
.hrow__a:hover { text-decoration:underline; }

/* ==========================================================================
   16. BAR LIST (demand by category)
   ========================================================================== */
.bars { display:grid; gap:11px; padding:16px; }
.bar__h { display:flex; align-items:baseline; gap:8px; font-size:12.5px; margin-bottom:5px; }
.bar__n { font-weight:600; }
.bar__v { margin-inline-start:auto; font-family:var(--font-num); font-weight:800;
          font-variant-numeric:tabular-nums; }
.bar__t { height:7px; border-radius:var(--r-pill); background:var(--surface-2); overflow:hidden; }
.bar__f { height:100%; border-radius:var(--r-pill); background:var(--grad-cta);
          transition:width .6s var(--ease); }

/* ==========================================================================
   17. TOOLBAR (list filters)
   ========================================================================== */
.toolbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:11px 16px; border-bottom:1px solid var(--line);
  background:var(--surface);
}
.toolbar .grow { flex:1; }
.filt {
  display:flex; align-items:center; gap:7px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:6px 12px;
  flex:1; min-width:180px; max-width:320px;
}
.filt svg { width:14px; height:14px; flex:none; stroke-width:2; fill:none; stroke:var(--text-3); }
.filt input { flex:1; min-width:0; border:0; background:none; outline:none; font-size:13px; }
.fchips { display:flex; gap:5px; flex-wrap:wrap; }
.fchip {
  font-size:12px; font-weight:700;
  padding:5px 11px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--text-3);
  border:1px solid var(--line);
  transition:background .14s var(--ease), color .14s var(--ease);
}
.fchip:hover { color:var(--text); }
.fchip[aria-pressed="true"] { background:var(--ink-900); color:#fff; border-color:transparent; }
:root[data-theme="dark"] .fchip[aria-pressed="true"] { background:#fff; color:var(--ink-900); }
.fchip .n { font-family:var(--font-num); opacity:.7; margin-inline-start:3px; }

/* ==========================================================================
   18. SCRIM / DIALOG / DRAWER
   ========================================================================== */
.scrim {
  position:fixed; inset:0; z-index:80;
  background:rgba(11,12,18,.55);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease);
}
.scrim.is-open { opacity:1; pointer-events:auto; }

.dlg {
  position:fixed; z-index:90;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.96);
  width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-4);
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .34s var(--spring);
}
.dlg.is-open { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.dlg--wide { width:min(880px,calc(100vw - 32px)); }
.dlg__h {
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line); flex:none;
}
.dlg__t { font-size:15px; font-weight:800; letter-spacing:-.02em; }
.dlg__s { font-size:12px; color:var(--text-3); margin-top:2px; }
.dlg__x { margin-inline-start:auto; }
.dlg__b { padding:18px; overflow-y:auto; flex:1; }
.dlg__f {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--line);
  background:var(--surface-2); flex:none;
}
.dlg__f .grow { flex:1; }

/* ==========================================================================
   19. CUSTOMISER — a drawer on the END side, opposite the nav rail.
   The nav lives at the start edge; settings live at the other one. Nothing is
   ever hidden behind the thing it configures.
   ========================================================================== */
.cust {
  position:fixed; z-index:90;
  inset-block:0; inset-inline-end:0;
  width:min(370px,100vw);
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--text);
  border-inline-start:1px solid var(--line);
  box-shadow:var(--sh-4);
  transform:translateX(100%);           /* PHYSICAL — mirrored for RTL below */
  visibility:hidden;
  transition:transform .38s var(--spring), visibility 0s linear .38s;
}
[dir="rtl"] .cust { transform:translateX(-100%); }
.cust.is-open {
  transform:none;
  visibility:visible;
  transition:transform .38s var(--spring), visibility 0s;
}

.cust__h {
  display:flex; align-items:center; gap:12px; flex:none;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.cust__t { font-size:15px; font-weight:800; letter-spacing:-.02em; }
.cust__s { font-size:12px; color:var(--text-3); margin-top:2px; }
.cust__x { margin-inline-start:auto; }

.cust__b { flex:1; overflow-y:auto; padding:18px; }

.cust__f {
  display:flex; align-items:center; gap:9px; flex:none;
  padding:14px 18px; border-top:1px solid var(--line);
  background:var(--surface-2);
}
.cust__f .grow { flex:1; }

.cust__g + .cust__g { margin-top:20px; }
.cust__l {
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:8px;
}
[dir="rtl"] .cust__l { letter-spacing:.02em; }
.cust__d { font-size:12px; color:var(--text-3); margin-top:8px; line-height:1.55; }

/* a segmented radiogroup — 2 or 3 up */
.seg {
  display:flex; gap:4px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md); padding:4px;
}
.seg__opt {
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 8px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:700; color:var(--text-3);
  white-space:nowrap;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.seg__opt:hover { color:var(--text); }
.seg__opt svg { width:14px; height:14px; flex:none; stroke-width:2; fill:none; stroke:currentColor; }
.seg__opt[aria-checked="true"] {
  background:var(--surface); color:var(--text); box-shadow:var(--sh-1);
}

/* the layout picker — four little wireframes, because four words would not
   tell you what "rail" or "boxed" actually looks like */
.lay { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.lay__opt {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:11px 8px 9px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface-2);
  font-size:12px; font-weight:700; color:var(--text-3);
  transition:border-color .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.lay__opt:hover { color:var(--text); border-color:var(--line-strong); }
.lay__opt[aria-checked="true"] {
  background:var(--brand-soft); border-color:var(--brand-soft-line); color:var(--brand-ink);
}
.lay__fig {
  width:100%; height:42px; border-radius:6px;
  background:var(--surface);
  box-shadow:var(--ring);
  display:block;
}
.lay__opt[aria-checked="true"] .lay__fig { box-shadow:inset 0 0 0 1px var(--brand-soft-line); }
/* the figure is an inline SVG; these are the parts it paints */
.lay__fig .f-side { fill:var(--text-3); opacity:.75; }
.lay__fig .f-top  { fill:var(--text-3); opacity:.45; }
.lay__fig .f-body { fill:var(--text-3); opacity:.16; }
.lay__opt[aria-checked="true"] .lay__fig .f-side { fill:var(--brand); opacity:.85; }
.lay__opt[aria-checked="true"] .lay__fig .f-top  { fill:var(--brand); opacity:.4; }
.lay__opt[aria-checked="true"] .lay__fig .f-body { fill:var(--brand); opacity:.14; }
[dir="rtl"] .lay__fig { transform:scaleX(-1); }

/* the Arabic font picker */
.fontpick {
  display:grid; gap:4px;
  max-height:264px; overflow-y:auto;
  padding:4px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
}
.fontpick__opt {
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:var(--r-sm);
  text-align:start; width:100%;
  transition:background .14s var(--ease);
}
.fontpick__opt:hover { background:var(--surface); }
.fontpick__opt[aria-checked="true"] { background:var(--surface); box-shadow:var(--sh-1); }
.fontpick__tick {
  width:16px; height:16px; border-radius:50%; flex:none;
  border:1.5px solid var(--line-strong);
  display:grid; place-items:center;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.fontpick__tick svg { width:10px; height:10px; stroke-width:3.4; fill:none; stroke:#fff; opacity:0; }
.fontpick__opt[aria-checked="true"] .fontpick__tick { background:var(--brand); border-color:var(--brand); }
.fontpick__opt[aria-checked="true"] .fontpick__tick svg { opacity:1; }
.fontpick__name { font-size:13px; font-weight:600; }
.fontpick__sample {
  margin-inline-start:auto; font-size:16px; color:var(--text-2);
  direction:rtl; white-space:nowrap;
}
.fontpick__badge {
  font-size:9.5px; font-weight:800; letter-spacing:.04em;
  padding:2px 6px; border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand-ink);
  border:1px solid var(--brand-soft-line);
  flex:none;
}
/* each preview renders in its OWN face — the list has to be honest */
.fp-sultan    { font-family:var(--fam-sultan); }
.fp-cairo     { font-family:var(--fam-cairo); }
.fp-tajawal   { font-family:var(--fam-tajawal); }
.fp-almarai   { font-family:var(--fam-almarai); }
.fp-plexar    { font-family:var(--fam-plexar); }
.fp-notosans  { font-family:var(--fam-notosans); }
.fp-notokufi  { font-family:var(--fam-notokufi); }
.fp-vazirmatn { font-family:var(--fam-vazirmatn); }
.fp-changa    { font-family:var(--fam-changa); }
.fp-elmessiri { font-family:var(--fam-elmessiri); }
.fp-amiri     { font-family:var(--fam-amiri); }

/* ==========================================================================
   20. COMMAND PALETTE
   ========================================================================== */
.cmdk {
  position:fixed; z-index:95;
  top:12vh; left:50%; transform:translateX(-50%) scale(.97);
  width:min(580px,calc(100vw - 32px));
  max-height:70vh; display:flex; flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-4);
  overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity .18s var(--ease), transform .3s var(--spring);
}
.cmdk.is-open { opacity:1; transform:translateX(-50%) scale(1); pointer-events:auto; }
.cmdk__in {
  display:flex; align-items:center; gap:11px;
  padding:14px 17px; border-bottom:1px solid var(--line); flex:none;
}
.cmdk__in svg { width:17px; height:17px; flex:none; stroke-width:2; fill:none; stroke:var(--text-3); }
.cmdk__in input {
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-size:15px; color:var(--text);
}
.cmdk__b { overflow-y:auto; padding:6px; flex:1; }
.cmdk__gt {
  font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3); padding:9px 11px 4px;
}
.cmdk__i {
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 11px; border-radius:var(--r-sm);
  font-size:13.5px; color:var(--text-2); text-align:start;
}
.cmdk__i:hover, .cmdk__i.is-on {
  background:var(--brand-soft); color:var(--brand-ink); font-weight:600;
}
.cmdk__i svg { width:16px; height:16px; flex:none; stroke-width:1.9; fill:none; stroke:currentColor; }
.cmdk__i .sub { margin-inline-start:auto; font-size:11.5px; color:var(--text-3); font-weight:500; }

/* ==========================================================================
   21. TOASTS
   ========================================================================== */
.toasts {
  position:fixed; z-index:110;
  bottom:20px; inset-inline-end:20px;
  display:flex; flex-direction:column; gap:9px;
  pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:10px;
  min-width:260px; max-width:min(400px,calc(100vw - 40px));
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  font-size:13px; font-weight:600;
  pointer-events:auto;
  animation:toast-in .38s var(--spring);
}
.toast.is-out { animation:toast-out .24s var(--ease) forwards; }
@keyframes toast-in  { from { opacity:0; transform:translateY(14px) scale(.96); } }
@keyframes toast-out { to   { opacity:0; transform:translateY(8px) scale(.97); } }
.toast__i { width:20px; height:20px; border-radius:6px; flex:none; display:grid; place-items:center; }
.toast__i svg { width:12px; height:12px; stroke-width:3; fill:none; stroke:currentColor; }
.toast--ok   .toast__i { background:var(--ok-soft);   color:var(--ok); }
.toast--warn .toast__i { background:var(--warn-soft); color:var(--warn); }
.toast--crit .toast__i { background:var(--crit-soft); color:var(--crit); }
.toast__x { margin-inline-start:auto; color:var(--text-3); display:grid; place-items:center; }
.toast__x svg { width:13px; height:13px; stroke-width:2.4; fill:none; stroke:currentColor; }

/* ==========================================================================
   22. LOGIN
   ========================================================================== */
.login { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.login__aside {
  background:linear-gradient(112deg,#D81219 0%,#C7000C 100%); color:#fff;
  padding:48px; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.login__aside::after {
  content:""; position:absolute; inset-inline-end:-140px; bottom:-140px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 68%);
}
.login__mark {
  width:56px; height:56px; border-radius:16px;
  background:#fff; display:grid; place-items:center; padding:8px;
}
.login__mark img { width:100%; height:100%; object-fit:contain; }
.login__q { font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1.28;
            max-width:20ch; text-wrap:balance; }
.login__by { font-size:13px; opacity:.8; margin-top:12px; }
.login__foot { font-size:12px; opacity:.7; }
.login__main { display:grid; place-items:center; padding:24px; }
.login__card { width:min(390px,100%); }
.login__t { font-size:24px; font-weight:800; letter-spacing:-.03em; }
.login__s { font-size:13px; color:var(--text-3); margin-top:5px; margin-bottom:24px; }

/* ==========================================================================
   23. MOBILE
   Below 900px every layout collapses to the same thing: an off-canvas drawer.
   `rail` and `horizontal` are scoped to min-width:901px, so there is nothing to
   unwind here — only the shell itself changes.
   ========================================================================== */
@media (max-width:1180px) {
  .stats { grid-template-columns:repeat(2,1fr); }
  .grid2, .grid3 { grid-template-columns:1fr; }
}

@media (max-width:900px) {
  .shell {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--top-h) minmax(0,1fr);
    grid-template-areas:
      "top"
      "main";
  }
  .rail {
    position:fixed; grid-area:auto;
    inset-block:0; inset-inline-start:0;
    width:252px; height:100vh; z-index:85;
    transform:translateX(-100%);          /* PHYSICAL — mirrored for RTL below */
    box-shadow:var(--sh-4);
    transition:transform .34s var(--spring);
  }
  [dir="rtl"] .rail { transform:translateX(100%); }
  .rail.is-open { transform:none; }

  /* On mobile the sidebar is a drawer at full width — never the icon rail, and
     never the horizontal bar. So `data-nav` is ignored down here entirely, and
     the drawer always shows its labels. */
  .rail { --rail-w:252px; }

  /* The search collapses to its glyph, and the user button to its avatar. Both
     stay 40px so the header band keeps its rhythm on a phone. */
  .search { flex:none; width:40px; justify-content:center; padding-inline:0; }
  .search__t, .search kbd { display:none; }
  .user__n, .user__btn svg { display:none; }
  .user__btn { padding-inline:3px; }

  .page { padding:16px; }
  .login { grid-template-columns:1fr; }
  .login__aside { display:none; }
}

@media (max-width:640px) {
  .stats { grid-template-columns:1fr; }
  .pair { grid-template-columns:1fr; }
  /* The layout picker STAYS two-up. The customiser goes full-width down here
     (below), so there is plenty of room — and stacking four wireframes in a
     single column pushes the font picker off the screen for no reason. */
  .page__a { width:100%; }
  .page__a .btn { flex:1; }
  .dlg { width:calc(100vw - 20px); }
  .cust { width:100vw; }
  .toasts { inset-inline:12px; bottom:12px; }
  .toast { max-width:none; }
}

/* ==========================================================================
   24. RTL — the only physical properties in the file, all mirrored above:
   the select caret (§13), the customiser drawer (§19), the mobile rail (§23).
   These three flip a glyph rather than a box.
   ========================================================================== */
[dir="rtl"] .icon-flip   { transform:scaleX(-1); }
[dir="rtl"] .stat__spark { transform:scaleX(-1); }
[dir="rtl"] .crumb svg   { transform:scaleX(-1); }

@media print {
  .rail, .top, .toasts, .page__a, .cust { display:none !important; }
  .shell { grid-template-columns:1fr; grid-template-areas:"main"; }
  .panel { break-inside:avoid; box-shadow:none; }
}