/* ============================================================
   SEKERTARI DESIGN SYSTEM — shared stylesheet (M0 productionization)
   The frozen v1 tokens (prototype/design-system/sekertari-tokens.css) + a reusable
   component library. Arabic-first RTL, mobile-first, quiet-luxury navy/gold/cream.
   NO product screens here — this is the vocabulary the Owner Dashboard (and Kimi's
   designs) are built on. Import once; compose with these classes.
   Fonts: self-hosted WOFF2 (see ./fonts/README.md). Falls back to system until dropped in.
   ============================================================ */

/* ---------- @font-face — self-hosted approved fonts (WOFF2 in ./fonts, no runtime CDN) ----------
   Frozen SEKERTARI type system: Bricolage Grotesque (display/titles/metrics), Instrument Sans
   (body/UI/wordmark/tables), Space Mono (eyebrow/meta), Caveat (assistant aside, Latin only),
   IBM Plex Sans Arabic (Arabic display+body). CSP unchanged — same-origin only. */
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-style:normal;font-display:swap;src:url('./fonts/bricolage-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-style:normal;font-display:swap;src:url('./fonts/bricolage-800.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-style:normal;font-display:swap;src:url('./fonts/instrument-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-style:normal;font-display:swap;src:url('./fonts/instrument-600.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:700;font-style:normal;font-display:swap;src:url('./fonts/instrument-700.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-weight:700;font-style:normal;font-display:swap;src:url('./fonts/spacemono-700.woff2') format('woff2')}
@font-face{font-family:'Caveat';font-weight:600;font-style:normal;font-display:swap;src:url('./fonts/caveat-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:400;font-style:normal;font-display:swap;src:url('./fonts/plexarabic-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-weight:700;font-style:normal;font-display:swap;src:url('./fonts/plexarabic-700.woff2') format('woff2')}

/* ---------- TOKENS (frozen SEKERTARI identity — cream paper · navy watercolour · controlled gold)
   Legacy token NAMES are preserved so every existing page/inline-style inherits the new palette
   automatically; the frozen aliases (--ink/--paper/--gold/…) are added for new markup. ---------- */
:root{
  /* frozen core aliases */
  --ink:#0A1730; --navy-wash:#152742; --navy-dilute:#26476F;
  --paper:#F5EEE2; --paper-card:#FFFDF7; --paper-sunken:#E5DCC9;
  --gold:#E0A83A; --gold-deep:#B7811F;
  --lavender:#B7A6E0; --sky:#7FB6DE; --sage:#9CC49B; --coral:#EF8B6E;
  --danger-ink:#8E2D20; --success-ink:#254D26; --warn-ink:#6F4E13;
  --font-display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-hand:'Caveat',ui-rounded,cursive;
  --font-ar:'IBM Plex Sans Arabic','Instrument Sans',system-ui,sans-serif;
  /* hard ink shadows (offset, no blur) + gold focus ring */
  --shadow-auth:11px 11px 0 rgba(10,23,48,.30);
  --ring-focus:0 0 0 4px rgba(224,168,58,.5);
  --wash-grad:linear-gradient(160deg,var(--navy-dilute) 0%,var(--navy-wash) 42%,var(--ink) 100%);

  /* brand (legacy names → frozen values) */
  --color-primary:#0A1730; --color-primary-2:#152742; --color-primary-3:#0A1730;
  --color-accent:#E0A83A; --color-accent-2:#EFC876;
  --color-accent-line:rgba(224,168,58,.40); --color-accent-soft:rgba(224,168,58,.12);
  /* surfaces */
  --color-bg:#F5EEE2; --color-bg-2:#FBF6EC; --color-bg-3:#E5DCC9; --color-card:#FFFDF7; --color-border:rgba(10,23,48,.16);
  /* text */
  --color-text:#0A1730; --color-text-2:#4E5C73; --color-text-3:#7C8AA0; --color-text-invert:#F5EEE2;
  /* semantic (paper-tinted backgrounds + ink-weight foregrounds) */
  --color-success:#254D26; --color-success-bg:#EEF6EE;
  --color-warning:#6F4E13; --color-warning-bg:#FFF6DF;
  --color-danger:#C0402F;  --color-danger-bg:#FDF1EE;
  --color-info:#2B5F8A;    --color-info-bg:#E9F1F8;
  --color-muted:#7C8AA0;   --color-muted-bg:rgba(10,23,48,.08);
  /* typography (frozen families) */
  --font-ui:'Bricolage Grotesque','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Instrument Sans','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-num:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-brand:'Instrument Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --text-h1:22px; --text-h2:18px; --text-h3:15px; --text-body:13.5px; --text-table:13px;
  --text-label:12px; --text-caption:11px; --text-kpi:24px; --lh:1.6;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --page-pad-desktop:24px; --page-pad-mobile:16px; --card-pad-desktop:22px; --card-pad-mobile:16px;
  --grid-gap:16px; --grid-gap-tight:12px;
  /* sizing */
  --h-button:40px; --h-button-sm:32px; --h-input:44px; --h-topbar:68px; --w-sidebar:268px; --tap-min:44px;
  --h-bottomnav:60px;
  /* radius */
  --radius-card:18px; --radius-inner:12px; --radius-button:10px; --radius-pill:999px;
  /* elevation — softened (owner order 2026-08-18): quiet blur shadows carry depth; the hard
     ink offsets survive only where they are identity (auth screen, primary CTA press). */
  --shadow-card:0 2px 10px rgba(10,23,48,.07); --shadow-hover:0 6px 18px rgba(10,23,48,.12);
  --shadow-drawer:0 8px 28px rgba(10,23,48,.16); --shadow-modal:0 12px 36px rgba(10,23,48,.20);
  /* motion */
  --ease:cubic-bezier(.16,1,.3,1); --dur-fast:.25s; --dur-view:.5s;
}
/* RTL: soft shadows are symmetric — only the auth screen's hard ink offset still mirrors */
html[dir="rtl"]{
  --shadow-auth:-11px 11px 0 rgba(10,23,48,.30);
}

/* ---------- BASE / RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);
  font-size:var(--text-body);line-height:var(--lh);-webkit-font-smoothing:antialiased}
/* direction follows the actual document dir (English default = LTR); RTL only when explicitly set.
   NB: never force rtl on bare [dir] — that also hits dir="ltr" inputs (phone/OTP) and the <html> itself. */
html[dir="rtl"],html[dir="rtl"] body{direction:rtl}
html[dir="ltr"],html[dir="ltr"] body{direction:ltr}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:where(button,a,input,select,textarea):focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- TYPOGRAPHY ---------- */
.h1{font-family:var(--font-ui);font-weight:800;font-size:var(--text-h1);color:var(--color-text);line-height:1.3}
.h2{font-family:var(--font-ui);font-weight:800;font-size:var(--text-h2);color:var(--color-text);line-height:1.35}
.h3{font-family:var(--font-ui);font-weight:700;font-size:var(--text-h3);color:var(--color-text)}
.body{font-family:var(--font-body);font-size:var(--text-body);color:var(--color-text)}
.muted{color:var(--color-text-2)}
.label{font-family:var(--font-body);font-size:var(--text-label);color:var(--color-text-3);font-weight:600}
.caption{font-size:var(--text-caption);color:var(--color-text-3)}
.eyebrow{font-family:var(--font-num);font-size:var(--text-caption);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.kpi-num{font-family:var(--font-num);font-size:var(--text-kpi);font-weight:600;color:var(--color-primary);
  font-variant-numeric:tabular-nums}
/* numbers/money/ids/phones — always LTR-isolated inside RTL */
.mono{font-family:var(--font-num);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.money::after{content:" ﷼";font-family:var(--font-body)}

/* ---------- BRAND LOCKUP ---------- */
.brandmark{display:inline-flex;align-items:center;gap:var(--space-3)}
/* The Clip mark sits in a bare container — no gold box behind the logo (frozen: gold never behind logo).
   Pages inline the Clip <svg class="clip-mark"> here; the ink letter is only a transitional fallback. */
.brandmark__mk{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:22px}
.clip-mark{width:40px;height:40px;display:block}
.clip-mark path{fill:none;stroke:var(--ink);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.on-navy .brandmark__mk,.on-navy .clip-mark path{color:var(--paper);stroke:var(--paper)}
.brandmark__t{font-family:var(--font-brand);font-weight:700;letter-spacing:.04em;font-size:15px;color:var(--ink);line-height:1.2}
.brandmark__t small{display:block;font-family:var(--font-num);letter-spacing:.12em;text-transform:uppercase;font-size:9.5px;color:var(--gold-deep);margin-top:3px}
.on-navy .brandmark__t{color:var(--paper)}
.on-navy .brandmark__t small{color:var(--gold)}

/* ---------- APP SHELL (desktop rail + topbar + content; mobile bottom nav) ---------- */
.app{min-height:100vh}
.rail{position:fixed;inset-block:0;inset-inline-end:0;width:var(--w-sidebar);
  background:linear-gradient(180deg,var(--color-primary-2),var(--color-primary-3));color:var(--color-text-invert);
  border-inline-start:1px solid var(--color-accent-line);display:flex;flex-direction:column;z-index:40}
.rail__brand{padding:22px 22px 16px;border-bottom:1px solid rgba(200,161,90,.14)}
.rail__nav{padding:12px 10px;overflow-y:auto;flex:1}
.rail__lab{font-size:var(--text-caption);color:rgba(233,227,214,.55);letter-spacing:.08em;padding:14px 12px 6px}
.navitem{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-inner);
  color:var(--color-text-invert);font-family:var(--font-ui);font-weight:500;font-size:13.5px;cursor:pointer;
  position:relative;min-height:var(--tap-min);transition:background var(--dur-fast) var(--ease)}
.navitem:hover{background:rgba(255,255,255,.05)}
.navitem svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.85}
.navitem.is-active{background:rgba(200,161,90,.12);color:#fff}
.navitem.is-active svg{color:var(--color-accent);opacity:1}
.navitem.is-active::before{content:"";position:absolute;inset-inline-end:-10px;top:8px;bottom:8px;width:3px;
  border-radius:3px;background:var(--color-accent)}
.main{margin-inline-end:var(--w-sidebar);min-height:100vh;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:var(--h-topbar);display:flex;align-items:center;gap:var(--space-4);
  padding:0 var(--page-pad-desktop);background:rgba(246,241,231,.82);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--color-border)}
.topbar__title{font-family:var(--font-ui);font-weight:800;font-size:var(--text-h2);color:var(--color-primary);line-height:1.25}
.topbar__title small{display:block;margin-top:2px;font-family:var(--font-body);font-weight:400;font-size:var(--text-caption);color:var(--color-text-3);line-height:1.35}
.topbar__spacer{flex:1}
.iconbtn{width:40px;height:40px;border-radius:var(--radius-button);border:1px solid var(--color-border);
  background:var(--color-card);display:grid;place-items:center;color:var(--color-primary);cursor:pointer;position:relative}
.iconbtn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.iconbtn__dot{position:absolute;top:8px;inset-inline-end:8px;width:7px;height:7px;border-radius:50%;
  background:var(--color-danger);border:2px solid var(--color-card)}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,var(--color-accent-2),var(--color-accent));
  display:grid;place-items:center;color:var(--color-primary);font-family:var(--font-brand);font-weight:700}
.content{padding:var(--page-pad-desktop);flex:1}
.burger{display:none}

/* mobile bottom nav — hidden on desktop */
.bottomnav{display:none}

@media (max-width:860px){
  .rail{transform:translateX(100%);transition:transform var(--dur-fast) var(--ease);box-shadow:var(--shadow-drawer)}
  html[dir="rtl"] .rail{transform:translateX(-100%)} /* off-canvas toward the inline-end */
  .rail.is-open{transform:translateX(0)}
  .main{margin-inline-end:0}
  .topbar{padding:0 var(--page-pad-mobile)}
  .content{padding:var(--page-pad-mobile);padding-bottom:calc(var(--h-bottomnav) + var(--page-pad-mobile))}
  .burger{display:grid}
  .bottomnav{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:45;height:var(--h-bottomnav);
    background:var(--color-card);border-top:1px solid var(--color-border);
    box-shadow:0 -6px 24px rgba(13,35,71,.06);padding-bottom:env(safe-area-inset-bottom)}
  .bottomnav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--color-text-3);font-size:10px;font-family:var(--font-ui);min-height:var(--tap-min);cursor:pointer}
  .bottomnav__item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
  .bottomnav__item.is-active{color:var(--color-primary)}
  .bottomnav__item.is-active svg{color:var(--color-accent)}
  /* chat-centered emphasis: the middle item lifts into a gold disc */
  .bottomnav__item--primary .bn-disc{width:46px;height:46px;margin-top:-18px;border-radius:50%;
    background:var(--color-primary);display:grid;place-items:center;box-shadow:0 8px 20px rgba(13,35,71,.28)}
  .bottomnav__item--primary .bn-disc svg{color:var(--color-accent-2)}
}

/* scrim (shared by off-canvas rail / drawer / modal) */
.scrim{position:fixed;inset:0;z-index:38;background:rgba(13,35,71,.5);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease)}
.scrim.is-show{opacity:1;visibility:visible}

/* ---------- LAYOUT PRIMITIVES ---------- */
.grid{display:grid;gap:var(--grid-gap)}
.grid--kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid--2{grid-template-columns:1.6fr 1fr}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media (max-width:1080px){.grid--2{grid-template-columns:1fr}}

/* ---------- PANEL / CARD ---------- */
.panel{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-card);
  padding:var(--card-pad-desktop);box-shadow:var(--shadow-card)}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.panel__head h3{font-family:var(--font-ui);font-weight:700;font-size:var(--text-h3);color:var(--color-primary)}
@media (max-width:520px){.panel{padding:var(--card-pad-mobile)}}

/* KPI / stat card — supports trend · comparison period · last-updated · clickable drill-down.
   Interactive emphasis is NAVY (gold stays a restrained accent: the icon well tint + a thin dot). */
.kpi{position:relative;background:var(--color-card);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:var(--space-5);box-shadow:var(--shadow-card)}
.kpi__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.kpi__ic{width:38px;height:38px;border-radius:var(--radius-inner);background:var(--color-accent-soft);
  display:grid;place-items:center;color:var(--ink);margin-bottom:var(--space-3)}
.kpi__ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.kpi__k{font-size:var(--text-label);color:var(--color-text-3)}
.kpi__v{font-family:var(--font-num);font-size:var(--text-kpi);font-weight:600;color:var(--color-primary);
  font-variant-numeric:tabular-nums;margin-top:2px}
/* meta row: a trend pill + the comparison period it's measured against */
.kpi__meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}
.kpi__trend{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-num);font-weight:600;
  font-size:var(--text-caption);padding:2px 8px;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums}
.kpi__trend svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6}
/* direction color is chosen by the CONSUMER (revenue↑=good→is-up; expense↑=bad→is-down) */
.kpi__trend.is-up{color:var(--color-success);background:var(--color-success-bg)}
.kpi__trend.is-down{color:var(--color-danger);background:var(--color-danger-bg)}
.kpi__trend.is-flat{color:var(--color-text-3);background:var(--color-muted-bg)}
.kpi__cmp{font-size:var(--text-caption);color:var(--color-text-3)}
.kpi__updated{margin-top:var(--space-3);font-size:var(--text-caption);color:var(--color-text-3)}
/* clickable drill-down: navy-forward hover/focus + a chevron affordance */
.kpi--link{display:block;text-decoration:none;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.kpi--link:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);border-color:var(--color-accent-line)}
.kpi--link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.kpi__more{color:var(--color-text-3);display:grid;place-items:center;transition:color var(--dur-fast) var(--ease)}
.kpi__more svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
html[dir="rtl"] .kpi__more svg{transform:scaleX(-1)}
.kpi--link:hover .kpi__more{color:var(--color-primary)}
/* legacy delta line (still supported) */
.kpi__d{font-size:var(--text-caption);margin-top:var(--space-1)}
.kpi__d.is-up{color:var(--color-success)} .kpi__d.is-warn{color:var(--color-warning)} .kpi__d.is-down{color:var(--color-danger)}

/* compact fact tile (ivory) */
.tile{background:var(--color-bg-2);border:1px solid var(--color-border);border-radius:var(--radius-inner);padding:var(--space-4);text-align:center}
.tile__v{font-family:var(--font-num);font-weight:600;color:var(--color-primary);font-size:18px}
.tile__k{font-size:var(--text-caption);color:var(--color-text-3);margin-top:2px}

/* ---------- BUTTONS (exactly 3 variants + sizes) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--h-button);
  padding:0 var(--space-5);border-radius:var(--radius-button);font-family:var(--font-body);font-weight:700;
  font-size:14px;cursor:pointer;border:1px solid var(--color-border);min-height:var(--tap-min);box-shadow:var(--shadow-card);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
/* hard-shadow lift on hover, press-into-page on active (frozen micro-interaction) */
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hover)}
html[dir="rtl"] .btn:hover{transform:translate(2px,-2px)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn--primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--secondary{background:var(--color-card);border-color:var(--color-border);color:var(--ink)}
.btn--secondary:hover{background:var(--color-bg-2)}
.btn--danger{background:var(--color-danger-bg);border-color:var(--color-danger);color:var(--danger-ink)}
.btn--danger:hover{background:#F8DCD5}
/* light CTA — the ONE primary action on a navy surface. Gold fill, ink text/border, ink shadow. */
.btn--light{background:var(--gold);border-color:var(--ink);color:var(--ink)}
.btn--light svg{color:var(--ink)}
.btn--sm{height:var(--h-button-sm);padding:0 var(--space-4);font-size:13px;min-height:var(--h-button-sm)}
.btn--block{display:flex;width:100%}
.btn:disabled,.btn.is-disabled{opacity:.5;pointer-events:none;box-shadow:var(--shadow-card);transform:none}

/* ---------- STATUS BADGES (the only 12) ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);font-size:var(--text-caption);
  font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);border:2px solid var(--ink)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge--confirmed,.badge--active{background:var(--color-success-bg);color:var(--color-success)}
.badge--completed{background:rgba(13,35,71,.08);color:var(--color-primary)}
.badge--pending-availability,.badge--waiting-admin{background:var(--color-info-bg);color:var(--color-info)}
.badge--pending-payment,.badge--needs-review{background:var(--color-warning-bg);color:var(--color-warning)}
.badge--waiting-business{background:var(--color-accent-soft);color:#9C7A35}
.badge--cancelled,.badge--failed,.badge--past-due{background:var(--color-danger-bg);color:var(--color-danger)}
.badge--suspended{background:var(--color-muted-bg);color:var(--color-muted)}

/* ---------- TABS / FILTER PILLS ---------- */
.tabs{display:flex;gap:var(--space-2);flex-wrap:wrap}
.tab{padding:6px 14px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:13px;font-weight:700;
  color:var(--ink);background:var(--color-card);border:2px solid var(--ink);cursor:pointer;min-height:var(--h-button-sm)}
.tab.is-active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- FORMS ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.field > .label{font-weight:600;color:var(--color-text-2)}
.input,.textarea,.select{width:100%;min-height:var(--h-input);padding:0 var(--space-4);border-radius:var(--radius-inner);
  border:2px solid var(--ink);background:var(--color-card);color:var(--color-text);
  font-family:var(--font-body);font-size:var(--text-body);transition:box-shadow var(--dur-fast) var(--ease)}
.textarea{padding:var(--space-3) var(--space-4);min-height:96px;resize:vertical;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--color-text-3)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--ink);box-shadow:var(--ring-focus);outline:none}
.field--error .input,.field--error .textarea,.field--error .select{border-color:var(--color-danger);box-shadow:0 0 0 4px rgba(192,64,47,.28)}
.field__help{font-size:var(--text-caption);color:var(--color-text-3)}
.field--error .field__help{color:var(--color-danger)}
.switch{position:relative;width:46px;height:26px;border-radius:var(--radius-pill);background:var(--color-border);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:inset-inline-start var(--dur-fast) var(--ease)}
.switch.is-on{background:var(--color-success)} .switch.is-on::after{inset-inline-start:23px}

/* ---------- TABLES (RTL; entity on the start side, actions on the end) ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-card)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-table);background:var(--color-card)}
.table th{text-align:start;font-family:var(--font-body);font-weight:600;color:var(--color-text-3);
  font-size:var(--text-label);padding:12px 14px;border-bottom:1px solid var(--color-border);white-space:nowrap}
.table td{padding:12px 14px;border-bottom:1px solid var(--color-border);color:var(--color-text)}
.table tbody tr:hover{background:var(--color-bg-2)}
.table td.num{font-family:var(--font-num);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.table .actions{text-align:end;white-space:nowrap}
.who{display:flex;align-items:center;gap:10px}
.who__av{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--color-accent-soft);display:grid;place-items:center;
  color:var(--color-primary);font-family:var(--font-brand);font-weight:700;font-size:14px}
.who__n{font-weight:600;color:var(--color-text)}
.who__sub{font-family:var(--font-num);direction:ltr;unicode-bidi:isolate;font-size:var(--text-caption);color:var(--color-text-3)}

/* ---------- STATES: empty · loading (skeleton) · error · locked ---------- */
.empty{text-align:center;padding:var(--space-8) var(--space-5);color:var(--color-text-2)}
.empty{border:1px dashed rgba(10,23,48,.35);border-radius:var(--radius-card)}
.empty__ic{width:56px;height:56px;border-radius:var(--radius-inner);background:var(--color-accent-soft);
  border:2px solid var(--ink);display:grid;place-items:center;color:var(--ink);margin:0 auto var(--space-4)}
.empty__ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.empty__t{font-family:var(--font-ui);font-weight:700;font-size:15px;color:var(--color-text)}
.empty__d{margin-top:6px;font-size:var(--text-body);color:var(--color-text-2);max-width:34ch;margin-inline:auto}
.empty .btn{margin-top:var(--space-5)}

.skeleton{position:relative;overflow:hidden;background:var(--color-bg-3);border-radius:var(--radius-inner)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:sk 1.3s infinite}
html[dir="rtl"] .skeleton::after{transform:translateX(100%);animation-name:sk-rtl}
.skeleton--line{height:12px;margin:8px 0} .skeleton--title{height:18px;width:52%;margin:6px 0 12px}
.skeleton--block{height:88px} .skeleton--avatar{width:34px;height:34px;border-radius:50%}
@keyframes sk{100%{transform:translateX(100%)}}
@keyframes sk-rtl{100%{transform:translateX(-100%)}}

.error-state{text-align:center;padding:var(--space-8) var(--space-5)}
.error-state__ic{width:56px;height:56px;border-radius:var(--radius-inner);background:var(--color-danger-bg);
  display:grid;place-items:center;color:var(--color-danger);margin:0 auto var(--space-4)}
.error-state__ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.error-state__t{font-family:var(--font-ui);font-weight:700;color:var(--color-text)}
.error-state__d{margin-top:6px;color:var(--color-text-2);font-size:var(--text-body)}

/* "not in your plan" — a calm locked state, never an error */
.locked{text-align:center;padding:var(--space-8) var(--space-5);border:1px dashed var(--color-accent-line);
  border-radius:var(--radius-card);background:var(--color-accent-soft)}
.locked__ic{width:52px;height:52px;border-radius:50%;background:var(--color-card);display:grid;place-items:center;
  color:var(--color-accent);margin:0 auto var(--space-4);box-shadow:var(--shadow-card)}
.locked__ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7}

/* offline banner */
.offline{display:flex;align-items:center;gap:10px;justify-content:center;padding:10px;background:var(--color-primary-3);
  color:var(--color-text-invert);font-size:var(--text-label)}

/* ---------- INSIGHT PANEL ("رؤى سكرتيري") ---------- */
.insight{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--color-primary),var(--color-primary-3));
  color:var(--color-text-invert);border-radius:var(--radius-card);padding:var(--space-6)}
.insight__glow{position:absolute;width:220px;height:160px;top:-60px;inset-inline-end:-30px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,161,90,.35),transparent 70%);filter:blur(10px)}
.insight__head{display:flex;align-items:center;gap:10px;position:relative;margin-bottom:var(--space-4)}
.insight__list{display:flex;flex-direction:column;gap:10px;position:relative}
.insight__item{display:flex;gap:10px;font-size:var(--text-body)}
.insight__item::before{content:"";flex:0 0 6px;height:6px;margin-top:8px;border-radius:50%;background:var(--color-accent)}

/* ---------- EXECUTIVE ASSISTANT HERO (chat-first homepage hero) ----------
   The first thing the owner sees: a calm greeting, today's priorities in ≤3 lines, and ONE primary
   action — "تحدّث إلى سكرتيري / Talk to SEKERTARI". Analytics/KPIs sit BELOW and support the
   conversation; they never replace it. Premium executive-assistant feel, not an ERP dashboard. */
.hero{position:relative;overflow:hidden;border-radius:var(--radius-card);padding:var(--space-8) var(--space-6);
  color:var(--color-text-invert);background:linear-gradient(150deg,var(--color-primary),var(--color-primary-3))}
.hero__glow{position:absolute;width:260px;height:190px;top:-70px;inset-inline-end:-40px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,161,90,.30),transparent 70%);filter:blur(12px);pointer-events:none}
.hero__greeting{position:relative;font-size:var(--text-label);color:rgba(233,227,214,.72)}
.hero__headline{position:relative;font-family:var(--font-ui);font-weight:800;font-size:20px;line-height:1.4;
  margin-top:6px;max-width:30ch;text-wrap:balance}
.hero__priorities{position:relative;display:flex;flex-direction:column;gap:10px;margin-top:var(--space-5)}
.hero__pri{display:flex;align-items:center;gap:10px;font-size:var(--text-body);color:var(--color-text-invert)}
.hero__pri__dot{flex:0 0 7px;height:7px;border-radius:50%;background:var(--color-accent)}
.hero__pri .badge{margin-inline-start:auto}
.hero__cta{position:relative;margin-top:var(--space-6);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.hero__hint{font-size:var(--text-caption);color:rgba(233,227,214,.6)}
@media (max-width:520px){.hero{padding:var(--space-6) var(--space-5)} .hero__cta .btn{width:100%}}

/* ---------- DRAWER (row → detail) ---------- */
.drawer{position:fixed;inset-block:0;inset-inline-start:0;width:min(440px,92vw);z-index:50;background:var(--color-card);
  box-shadow:var(--shadow-drawer);transform:translateX(-100%);transition:transform var(--dur-view) var(--ease);
  display:flex;flex-direction:column}
/* RTL: anchored at the inline-end (physical left) — hide OFF the left edge (-100%, transforms are physical).
   The RTL override outweighs .drawer.is-open (html+[dir]+class beats class+class), so the open state
   must be restated at RTL specificity or the drawer can never slide in. */
html[dir="rtl"] .drawer{inset-inline-start:auto;inset-inline-end:0;transform:translateX(-100%)}
html[dir="rtl"] .drawer.is-open{transform:translateX(0)}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5);border-bottom:1px solid var(--color-border)}
.drawer__body{padding:var(--space-5);overflow-y:auto;flex:1}
.drawer__foot{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);display:flex;gap:var(--space-3);justify-content:flex-start}

/* ---------- MODAL (confirmation, max-w 420) ---------- */
.modal{position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:var(--space-5);
  opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease)}
.modal.is-open{opacity:1;visibility:visible}
.modal__card{width:100%;max-width:420px;background:var(--color-card);border-radius:var(--radius-card);
  box-shadow:var(--shadow-modal);padding:var(--space-8) var(--space-6);text-align:center;
  transform:translateY(16px) scale(.97);transition:transform var(--dur-fast) var(--ease)}
.modal.is-open .modal__card{transform:none}
.modal__ic{width:56px;height:56px;border-radius:var(--radius-inner);background:var(--color-primary);color:var(--color-accent-2);
  display:grid;place-items:center;margin:0 auto var(--space-4)}
.modal__actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);justify-content:center}

/* ---------- TOAST ---------- */
.toast-wrap{position:fixed;inset-block-end:calc(var(--h-bottomnav) + 12px);inset-inline:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{pointer-events:auto;max-width:420px;width:100%;display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-radius:var(--radius-inner);background:var(--color-primary);color:var(--color-text-invert);
  box-shadow:0 14px 30px rgba(13,35,71,.28);font-size:var(--text-body);
  animation:toast-in var(--dur-fast) var(--ease)}
.toast--success{background:var(--color-success)} .toast--danger{background:var(--color-danger)}
.toast svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;flex:0 0 18px}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- utilities ---------- */
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.row{display:flex;align-items:center;gap:var(--space-3)}
.between{justify-content:space-between}
.wrap-x{overflow-x:auto}

/* ============================================================
   FROZEN PRIMITIVES — WashSurface · AuthCard · OTP · Language menu · Doodles
   ============================================================ */

/* ---------- WashSurface: navy watercolour ground, edge-to-edge, never an unpainted gap ----------
   Layer 1 solid ground · Layer 2 oversized SVG pigment (inline, filtered) · Layer 3 grain ·
   Layer 4 content(z-index:1). Wrapper clips with BOTH overflow:hidden AND clip-path. */
.wash{position:relative;isolation:isolate;background:var(--navy-wash);color:var(--paper);
  overflow:hidden;clip-path:inset(0 round var(--radius-card))}
.wash--sharp{clip-path:inset(0)}
.wash__pigment{position:absolute;left:-20%;top:-20%;width:140%;height:140%;z-index:0;pointer-events:none}
.wash__grain{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.45}
.wash > :not(.wash__pigment):not(.wash__grain){position:relative;z-index:1}

/* ---------- AuthCard: cream card, 3px ink frame, 11px hard ink shadow ---------- */
.authcard{background:var(--paper-card);border:3px solid var(--ink);border-radius:var(--radius-card);
  box-shadow:var(--shadow-auth);padding:var(--space-8) var(--space-6)}
@media (max-width:520px){.authcard{padding:var(--space-6) var(--space-5)}}

/* ---------- OTP: six ink-outlined cells (visual layer over one hidden numeric input) ---------- */
.otp{display:flex;gap:var(--space-3);justify-content:center;direction:ltr}
.otp__cell{width:44px;height:56px;border:2px solid var(--ink);border-radius:var(--radius-inner);
  background:var(--paper-card);display:grid;place-items:center;font-family:var(--font-num);font-weight:700;
  font-size:26px;color:var(--ink);transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.otp__cell.is-filled{background:#fff}
.otp__cell.is-active{box-shadow:var(--ring-focus)}
.otp__input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
@media (max-width:400px){.otp__cell{width:38px;height:50px;font-size:22px}}

/* ---------- Language / globe control (the ONLY language affordance) ---------- */
.langbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:2px solid var(--ink);
  border-radius:var(--radius-pill);background:var(--paper-card);color:var(--ink);cursor:pointer;
  font-family:var(--font-body);font-weight:700;font-size:12px;box-shadow:2px 2px 0 rgba(10,23,48,.16)}
.langbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.on-navy .langbtn{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:none}
.langmenu{position:absolute;z-index:70;min-width:150px;background:var(--paper-card);border:2px solid var(--ink);
  border-radius:var(--radius-inner);box-shadow:var(--shadow-card);padding:6px;display:none}
.langmenu.is-open{display:block}
.langmenu button{display:flex;width:100%;align-items:center;gap:8px;padding:8px 10px;border:0;background:none;
  border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink);text-align:start}
.langmenu button:hover{background:var(--color-bg-2)}
.langmenu button.is-current{background:var(--color-accent-soft)}
/* the GLOBAL 16-language selector (i18n.js mountSelector): searchable native-script list */
.lang-host{position:relative}
.langmenu--list{min-width:200px;max-height:320px;display:none;flex-direction:column;top:calc(100% + 6px);inset-inline-end:0;position:absolute;z-index:70}
.langmenu--list.is-open{display:flex}
.langmenu__search{margin:2px 2px 6px;min-height:34px;padding:0 10px;border:2px solid var(--ink);border-radius:8px;
  background:var(--color-card);color:var(--color-text);font-family:var(--font-body);font-size:13px}
.langmenu__search:focus{outline:none;box-shadow:var(--ring-focus)}
.langmenu__items{overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.langmenu__none{padding:10px;text-align:center;color:var(--color-text-3);font-size:12px}

/* ---------- Hand-drawn ink doodle (decorative; hidden from AT + reduced-motion safe) ---------- */
.doodle{position:absolute;pointer-events:none;z-index:0;stroke:var(--ink);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.on-navy .doodle,.wash .doodle{stroke:var(--paper);opacity:.5}

/* assistant aside — Caveat, Latin only; Arabic drops the hand font (frozen §type) */
.aside-hand{font-family:var(--font-hand);font-size:19px;color:var(--gold-deep);line-height:1.3}
html[lang="ar"] .aside-hand{font-family:var(--font-ar);font-size:14px}

/* ---------- Arabic: IBM Plex Sans Arabic, +1px body, looser line-height; numerals stay LTR ---------- */
html[lang="ar"] body{font-family:var(--font-ar)}
html[lang="ar"] .h1,html[lang="ar"] .h2,html[lang="ar"] .h3,
html[lang="ar"] .topbar__title,html[lang="ar"] .panel__head h3{font-family:var(--font-ar);font-weight:700}
html[lang="ar"] body{font-size:14.5px;line-height:1.75}
.ltr{direction:ltr;unicode-bidi:isolate}

/* watercolour SVG filters live in one hidden inline <svg> per page; this keeps it out of layout */
.wash-defs{position:absolute;width:0;height:0;overflow:hidden}

/* extra reduced-motion safety for the Clip draw-on animation */
@media (prefers-reduced-motion:reduce){
  .clip-draw path{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
}