/* ═══════════════════════════════════════════════════════════════════════
   JOE ELMASRY PORTAL — DESIGN SYSTEM
   ───────────────────────────────────────────────────────────────────────
   An internal operating system, not an admin dashboard.

   Principles applied throughout:
     · Depth over outlines. Surfaces separate by tone; borders appear on
       interaction. Fewer lines reads calmer and more expensive.
     · Gold is an accent, never a coat of paint. Icons, the active rail,
       the primary action, focus. Titles stay warm white.
     · One title block per system: English above, Arabic tight beneath.
     · Logical properties only, so RTL and LTR are the same stylesheet.

   Icons come from Portal\Core\View\Icon. Never emoji, never a second set.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Surfaces — Theme 7.5 (approved 2026-08-26, see docs/design-system/).
     Rail (sidebar) and topbar are now two distinct near-black tokens rather
     than one value blended via color-mix; the workspace and cards sit much
     closer to near-black than before. Gold tokens below are untouched. */
  --rail:        #101011;   /* sidebar / navigation rail */
  --topbar:      #0B0B0C;   /* app header bar — the darkest app-level surface */
  --bg:          #121213;   /* main app background — stays the darkest primary surface */
  --bg-soft:     #17171A;   /* quiet/roadmap shelves, table headers */
  /* Cards were only ~4 points above --bg (#161618 vs #121213) — close enough
     to read as flat, cards disappearing into the page. Re-tuned against the
     "أرشيف الشهور" reference to a ~5-6 point step per elevation tier: still
     dark charcoal, never medium gray, but the lift is now visible instead of
     theoretical. See docs/DECISIONS.md D-030. */
  --surface:     #1C1C1F;   /* cards, panels */
  --surface-2:   #222225;   /* hover / elevated surfaces */
  --surface-3:   #28282B;   /* deepest elevation — icon tiles, popovers */
  --input:       #161618;   /* recessed form fields — slightly darker than a card */
  --overlay:     rgba(4, 4, 5, .78);

  /* Borders — Theme 7.5 flat hex, not an alpha blend. An alpha-over-charcoal
     border renders visibly lighter than the approved value (measured: white
     11% over --surface lands near #303031 vs the approved #26262A) — this
     was drifted from the reference and is corrected here. --hairline stays
     as the same flat value at the quietest weight (used for the thinnest
     dividers); --line and --line-strong map onto the two approved tokens. */
  --hairline:    #212125;
  --line:        #26262A;
  --line-strong: #313136;

  /* Text — Theme 7.5 values. Also genuinely drifted before this pass: only
     surfaces/gold/radius had been migrated, not text. */
  --text:        #ECECEC;
  --text-2:      #C7C7C9;
  --text-3:      #A0A0A0;
  --text-on-gold:#171208;

  /* Brand */
  --gold:        #F4C543;
  --gold-bright: #FFDA6B;
  --gold-deep:   #D9AC2E;
  --gold-04:     rgba(244, 197, 67, .04);
  --gold-08:     rgba(244, 197, 67, .08);
  --gold-14:     rgba(244, 197, 67, .14);
  --gold-24:     rgba(244, 197, 67, .24);
  --gold-45:     rgba(244, 197, 67, .45);

  /* Status */
  --ok:          #3ED598;
  --ok-08:       rgba(62, 213, 152, .08);
  --ok-24:       rgba(62, 213, 152, .24);
  --danger:      #F2555A;
  --danger-08:   rgba(242, 85, 90, .08);
  --danger-24:   rgba(242, 85, 90, .24);
  --warn:        #E9A83C;
  --warn-08:     rgba(233, 168, 60, .08);
  --warn-24:     rgba(233, 168, 60, .24);

  /* Radius — Theme 7.5's tighter ladder (crisp, denser corners) */
  --r-xs: 4px; --r-sm: 5px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px;
  --r-pill: 999px;

  /* Spacing — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; --s11: 96px;

  /* Type */
  --font: "Cairo", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --t-2xs: 10.5px; --t-xs: 11.5px; --t-sm: 12.5px; --t-md: 13.5px;
  --t-base: 14.5px; --t-lg: 16px; --t-xl: 18px;
  --t-2xl: 22px; --t-3xl: 28px; --t-4xl: 34px;

  /* Elevation — Theme 7.5 is completely flat: cards/panels/tables carry NO
     shadow at all (separation comes from tone and border only). The one
     approved exception is a genuine floating overlay — a modal, a toast, an
     off-canvas drawer, or the auth card — which gets exactly one flat,
     uncolored shadow so it reads as elevated above the page beneath it.
     No colored glow, no fake top-edge highlight: both were decorative
     "light effects" the theme explicitly rules out. */
  --shadow-card: none;
  --shadow-float: 0 20px 50px -18px rgba(0,0,0,.65);

  /* Motion */
  --ease: cubic-bezier(.22, .68, .28, 1);
  --fast: .15s;
  --med:  .24s;

  /* Control proportions — Theme 7.5's compact density. Preserve exactly
     (THEME.md §7); applied to buttons/inputs/cards/nav where a clean swap
     doesn't require restructuring layout. */
  --control-h: 36px;
  --pad-card:  12px;
  --focus-ring: rgba(244, 197, 67, .35);

  /* Layout — rail width tested at 196/220/232px against real nav labels
     (Finance & Payroll, Booking & Queue) and a long display name at
     Desktop/1366/1024. 196 and 220 both clipped real labels; the existing
     264/232 pair already avoids that, so it stays unchanged rather than
     being replaced by a narrower Theme 7.5 proposal that real content
     didn't support. See docs/DECISIONS.md D-023. */
  --rail-w: 264px;
  --topbar-h: 48px;   /* Theme 7.5 §7 — preserved exactly */
  --content-max: 1320px;

  color-scheme: dark;
}

/* ── 2. Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

input, select, textarea, button { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { background: none; border: none; padding: 0; cursor: pointer; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--gold-24); color: var(--text); }

/* ── 3. Icons ──────────────────────────────────────────────────────── */
.icon { display: block; flex: none; color: inherit; }

.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--gold-08);
  color: var(--gold);
  flex: none;
  transition: background var(--med) var(--ease), color var(--med) var(--ease),
              transform var(--med) var(--ease);
}
.icon-tile.is-sm    { width: 34px; height: 34px; border-radius: var(--r-sm); }
.icon-tile.is-lg    { width: 54px; height: 54px; border-radius: var(--r-lg); }
.icon-tile.is-muted { background: rgba(255,255,255,.045); color: var(--text-3); }

/* ── 4. Utilities ──────────────────────────────────────────────────── */
.hidden      { display: none !important; }
.grow        { flex: 1; }
.muted       { color: var(--text-3); }
.nowrap      { white-space: nowrap; }
.text-gold   { color: var(--gold); }
.text-ok     { color: var(--ok); }
.text-danger { color: var(--danger); }
.m-0 { margin: 0; }
.mt-4 { margin-block-start: var(--s4); }
.mt-6 { margin-block-start: var(--s6); }
.gap-2 { gap: var(--s2); }
.row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.row-center { justify-content: center; }
.select-all { user-select: all; }
.w-password { width: 220px; max-width: 100%; }
.divider { border: none; border-block-start: 1px solid var(--hairline); margin-block: var(--s6); }
.trace { overflow: auto; max-height: 260px; font-size: 11px; line-height: 1.6; white-space: pre-wrap; }

/* Latin inside Arabic needs isolation or bidi reorders the punctuation. */
.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--text-on-gold);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700; font-size: var(--t-md);
}
.skip-link:focus { inset-inline-start: 16px; }

/* ── 5. Typography ─────────────────────────────────────────────────── */
.display { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -.022em; line-height: 1.15; margin: 0; }
.h1      { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 0; }
.h2      { font-size: var(--t-lg);  font-weight: 700; letter-spacing: -.008em; margin: 0; }
.lede    { font-size: var(--t-md); color: var(--text-3); margin: var(--s2) 0 0; }

/* Section label: small, wide-tracked, uppercase. Latin-only styling. */
.section-label {
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); margin: 0;
}

.section-head {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-block-end: var(--s5);
}
.section-head .count {
  font-size: var(--t-2xs); font-weight: 700; color: var(--text-3);
  background: rgba(255,255,255,.04); padding: 2px 8px; border-radius: var(--r-pill);
}

/* ── 6. App shell: fixed rail + content ────────────────────────────── */
/* A sidebar, not a top bar: the Portal is a launcher that will keep gaining
   systems, and a horizontal nav degrades into a scroll strip once it does. */

.app { min-height: 100vh; }

.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--rail-w); z-index: 60;
  display: flex; flex-direction: column;
  background: var(--rail);
  border-inline-end: 1px solid var(--hairline);
  padding: var(--s6) var(--s4) var(--s4);
  overflow-y: auto; overscroll-behavior: contain;
}

.rail-brand {
  display: flex; align-items: center; gap: var(--s3);
  padding-inline: var(--s2); margin-block-end: var(--s7);
}
.rail-brand img { height: 34px; width: auto; object-fit: contain; }
.rail-brand .tag {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3); line-height: 1.3;
}

.rail-group { margin-block-end: var(--s6); }
.rail-group > .section-label { padding-inline: var(--s3); margin-block-end: var(--s3); }

.rail-link {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s3);
  border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-md); font-weight: 600;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.rail-link .icon { color: var(--text-3); transition: color var(--fast) var(--ease); }
.rail-link:hover { background: rgba(255,255,255,.04); color: var(--text); }
.rail-link:hover .icon { color: var(--text-2); }

.rail-link.is-active { color: var(--text); background: var(--gold-08); }
.rail-link.is-active .icon { color: var(--gold); }
/* The active marker is a gold rail on the inline edge — a quieter, more
   deliberate signal than filling the whole row with colour. */
.rail-link.is-active::before {
  content: ""; position: absolute;
  inset-inline-start: 0; inset-block: 8px;
  width: 3px; border-radius: var(--r-pill);
  background: var(--gold);
}

/* If a future label doesn't fit here, the fix is a two-line wrap or another
   in-place readable treatment for THIS rule — never widening --rail-w as
   the first move. Widen the rail only if a genuine two-line/wrap attempt
   still isn't readable for real content. See docs/DECISIONS.md D-023. */
.rail-link .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-link .ext { margin-inline-start: auto; color: var(--text-3); opacity: .7; }

.rail-foot { margin-block-start: auto; padding-block-start: var(--s5); }

/* Two rows: identity, then actions. A single row left the name roughly
   80px between the avatar and two buttons, which forced mid-word breaks on
   any real full name. Stacking gives the name the full rail width. */
.rail-user {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.035);
}
.rail-user-id { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.rail-user-acts { display: flex; gap: var(--s2); }
.rail-user-acts .icon-btn { flex: 1; }
.rail-user-acts form { flex: 1; display: flex; }
.rail-user-acts form .icon-btn { width: 100%; }
.avatar {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-14); color: var(--gold);
  font-weight: 700; font-size: var(--t-md); flex: none;
  text-transform: uppercase;
}
/* The account block must survive any name length — "Joe Elmasry" through
   "Abdelrahman Mohamed El Sayed" — without clipping the role beneath it or
   pushing the buttons out of the rail. The name wraps to at most two lines
   and then ellipses; the full value is always on the title attribute. The
   role line never shrinks, so "Admin" stays visible in every case. */
.rail-user .who { min-width: 0; flex: 1; line-height: 1.3; }
.rail-user .who b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  /* break-word, not anywhere: wrap at spaces first and only split a token
     that genuinely cannot fit, so "Abdelrahman Mohamed El Sayed" breaks
     between words rather than mid-name. */
  overflow-wrap: break-word;
  font-size: var(--t-sm); font-weight: 700; line-height: 1.35;
}
.rail-user .who span {
  display: block; font-size: var(--t-2xs); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Buttons keep their footprint whatever the name does. */
.rail-user .icon-btn, .rail-user form { flex: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  color: var(--text-3);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.icon-btn.is-danger:hover { background: var(--danger-08); color: var(--danger); }

/* Content column */
.main {
  margin-inline-start: var(--rail-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s3);
  height: var(--topbar-h);
  padding-inline: clamp(20px, 3vw, 40px);
  background: var(--topbar);
  border-block-end: 1px solid var(--line);
}
.topbar .crumb { font-size: var(--t-md); font-weight: 600; color: var(--text-2); }

.content {
  flex: 1;
  width: 100%; max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--s8) clamp(20px, 3vw, 40px) var(--s11);
}

/* Mobile drawer trigger — hidden on desktop */
.rail-toggle { display: none; }
.rail-scrim  { display: none; }

/* ── 7. Masthead ───────────────────────────────────────────────────── */
/* Sets the tone of the page: a large greeting, the date, and a single
   honest line about availability. No decorative widgets. */
.masthead {
  display: flex; align-items: flex-end; gap: var(--s6);
  flex-wrap: wrap;
  padding-block-end: var(--s7);
  margin-block-end: var(--s7);
  border-block-end: 1px solid var(--hairline);
}
.masthead .lead { min-width: 0; flex: 1; }
.masthead .eyebrow {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  margin-block-end: var(--s3);
}
.masthead .display { margin-block-end: var(--s2); }
.masthead .sub { margin: 0; font-size: var(--t-md); color: var(--text-3); }

.masthead-meta { display: flex; gap: var(--s7); flex-wrap: wrap; }
.meta-item { min-width: 0; }
.meta-item .k {
  display: block; font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
  margin-block-end: 4px;
}
.meta-item .v { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); font-weight: 600; color: var(--text); }
.meta-item .v .icon { color: var(--gold); }
.meta-item .v.is-ok .icon { color: var(--ok); }

/* ── 8. System cards ───────────────────────────────────────────────── */
/* Borderless by default — separation comes from tone and the top lip.
   The border appears in gold on hover, which is what makes the card feel
   like a control rather than a container. */

/* Live systems: auto-FIT, so a short row stretches to fill the width
   instead of leaving a hole where a third card would go. With two systems
   that reads as two deliberate panels rather than an unfinished grid. */
.sys-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Roadmap: auto-FILL and narrower, so seven items settle into an even,
   quiet block rather than three stretched banners. */
.sys-grid.is-roadmap {
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: var(--s3);
}

.sys-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: var(--pad-card);
  min-height: 190px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: background var(--med) var(--ease), border-color var(--med) var(--ease);
}

.sys-card-head { display: flex; align-items: flex-start; gap: var(--s4); margin-block-end: var(--s4); }

/* THE title block: English then Arabic, tight, unmistakably one unit.
   Both lines are display:block — they are spans so the block can sit inside
   an anchor, and without this they would run together on one line, which is
   exactly the arrangement the design forbids. */
.sys-title { display: block; min-width: 0; flex: 1; }
.sys-en {
  display: block;
  margin: 0;
  font-size: var(--t-xl); font-weight: 700;
  letter-spacing: -.014em; line-height: 1.18;
  color: var(--text);
  /* The run is LTR so "Booking & Queue" keeps its word order, but it must
     still hang off the SAME edge as the Arabic line beneath it. Without
     this the two halves of the title split to opposite sides in RTL and
     stop reading as one block. `end` of an LTR run is its right edge. */
  direction: ltr; unicode-bidi: isolate; text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--med) var(--ease);
}
[dir="rtl"] .sys-en { text-align: end; }
.sys-ar {
  display: block;
  margin: 3px 0 0;
  font-size: var(--t-md); font-weight: 500; line-height: 1.35;
  color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sys-desc {
  margin: 0;
  font-size: var(--t-md); color: var(--text-2); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sys-foot {
  display: flex; align-items: center; gap: var(--s2);
  margin-block-start: auto; padding-block-start: var(--s4);
}

/* External marker: a small glyph in the corner, not a badge. */
.sys-ext {
  position: absolute; inset-block-start: var(--s5); inset-inline-end: var(--s5);
  color: var(--text-3); opacity: .55;
  transition: color var(--med) var(--ease), opacity var(--med) var(--ease),
              transform var(--med) var(--ease);
}

/* Status expressed as a dot + word, no boxed badge. */
.sys-state {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); font-weight: 600; color: var(--text-3);
}
.sys-state::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.sys-state.is-live { color: var(--ok); }
.sys-state.is-soon { color: var(--text-3); }
.sys-state.is-maint { color: var(--warn); }
.sys-state.is-off  { color: var(--danger); }

/* Interactive state — flat: a border-color and tone change only, no lift,
   no glow, no gradient wash. Hover must never look identical to selected
   (there is no "selected" system card today, but the rule still governs:
   hover reads as "responsive to the pointer", not as a filled/active state). */
a.sys-card:hover {
  background: var(--surface-2);
  border-color: var(--gold-45);
}
a.sys-card:hover .icon-tile { background: var(--gold-24); }
a.sys-card:hover .sys-en { color: var(--gold-bright); }
a.sys-card:hover .sys-ext { color: var(--gold); opacity: 1; }
a.sys-card:active { background: var(--surface); }
a.sys-card:focus-visible { border-color: var(--gold); outline: 2px solid var(--focus-ring); outline-offset: 1px; }

/* Upcoming systems: present and legible, quietly de-emphasised. No dashes,
   no disabled styling — they are a roadmap, not a fault. */
.sys-card.is-upcoming {
  min-height: 0; padding: var(--s4) var(--s5);
  background: var(--bg-soft);
  border-color: var(--hairline);
}
.sys-card.is-upcoming .sys-card-head { margin-block-end: 0; align-items: center; }
.sys-card.is-upcoming .sys-en { font-size: var(--t-lg); color: var(--text-2); }
.sys-card.is-upcoming .sys-ar { font-size: var(--t-sm); }
.sys-card.is-upcoming .sys-foot { padding-block-start: var(--s3); }

/* ── 9. Panels & surfaces ──────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--pad-card);
}
.panel + .panel { margin-block-start: var(--s4); }
.panel-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-block-end: var(--s5); }
.panel-head .h2 { flex: none; }
.panel-head .lede { margin: 0; }
.panel-head .actions { margin-inline-start: auto; display: flex; gap: var(--s2); }

.block { margin-block-end: var(--s9); }
.block:last-child { margin-block-end: 0; }

.page-head { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; margin-block-end: var(--s7); }
.page-head .actions { margin-inline-start: auto; display: flex; gap: var(--s2); }

/* ── 10. Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--control-h); padding-inline: 16px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  font-size: var(--t-md); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.btn .icon { width: 16px; height: 16px; opacity: .9; }
.btn:hover { background: var(--surface-3); }
.btn:active { background: var(--surface); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Flat solid fill — no gradient, no glow. Pressed is a darker flat step,
   not a lighting effect. */
.btn-primary { background: var(--gold); color: var(--text-on-gold); font-weight: 700; border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-primary:active { background: var(--gold-deep); border-color: var(--gold-deep); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }

.btn-gold { background: var(--gold-08); color: var(--gold); border-color: var(--gold-24); }
.btn-gold:hover { background: var(--gold-14); border-color: var(--gold-45); color: var(--gold-bright); }

.btn-danger { background: transparent; border-color: var(--danger-24); color: var(--danger); }
.btn-danger:hover { background: var(--danger-08); }

.btn-sm { height: 30px; padding-inline: 12px; font-size: var(--t-sm); }
.btn-sm .icon { width: 14px; height: 14px; }
.btn-lg { height: 42px; padding-inline: 24px; font-size: var(--t-base); }
.btn-block { width: 100%; }
.btn-icon { width: var(--control-h); height: var(--control-h); padding: 0; }
.btn-icon.is-sm { width: 30px; height: 30px; }

/* ── 11. Forms ─────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-block-end: var(--s5); }
.field > label, .field-label { font-size: var(--t-sm); font-weight: 600; color: var(--text-2); }
.hint { font-size: var(--t-xs); color: var(--text-3); line-height: 1.55; }

.inp {
  width: 100%; min-height: var(--control-h); padding: 0 14px;
  background: var(--input); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.inp::placeholder { color: #4B4A52; }
.inp:hover { border-color: var(--line-strong); }
.inp:focus {
  outline: 2px solid var(--focus-ring); outline-offset: 0;
  border-color: var(--gold);
}
.inp.has-error { border-color: var(--danger); }
.inp:disabled { opacity: .5; cursor: not-allowed; }
.inp.ltr { direction: ltr; text-align: start; }

.inp[type="number"] { -moz-appearance: textfield; }
.inp[type="number"]::-webkit-outer-spin-button,
.inp[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A real chevron glyph (inline SVG data-URI), not a CSS gradient trick.
   A background-image cannot inherit `currentColor`, so the stroke colour
   (--text-3, #A0A0A0) is baked into the URI directly. */
select.inp {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 10px 10px; background-repeat: no-repeat;
  padding-inline-end: 36px; text-overflow: ellipsis;
}
[dir="rtl"] select.inp { background-position: left 14px center; }
select.inp option, select.inp optgroup {
  background-color: var(--surface-2); color: var(--text); font-family: var(--font); padding: 8px;
}

textarea.inp { resize: vertical; min-height: 92px; line-height: 1.7; padding-block: 10px; }
.err-msg { font-size: var(--t-xs); color: var(--danger); }

.grid   { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-2 { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }

.chk { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex: none; }

.chkgrid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.chkgrid label {
  display: flex; align-items: center; gap: var(--s2);
  padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid transparent;
  font-size: var(--t-sm); color: var(--text-3); cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.chkgrid label:hover { background: rgba(255,255,255,.06); color: var(--text-2); }
.chkgrid label.is-on { background: var(--gold-08); border-color: var(--gold-24); color: var(--text); }

/* Radio cards */
.choice-grid { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.choice {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); cursor: pointer;
  background: rgba(255,255,255,.03);
  border: 1px solid transparent; border-radius: var(--r-md);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.choice:hover { background: rgba(255,255,255,.06); }
.choice:has(input:checked) { background: var(--gold-08); border-color: var(--gold-24); }
.choice input { margin-block-start: 3px; accent-color: var(--gold); flex: none; }
.choice b { display: block; font-size: var(--t-sm); font-weight: 700; color: var(--text); }
.choice span { display: block; font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; margin-block-start: 3px; }

/* Icon picker */
.icon-picker { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
.icon-opt {
  position: relative; aspect-ratio: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.03); border: 1px solid transparent;
  border-radius: var(--r-md); color: var(--text-3);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.icon-opt:hover { background: rgba(255,255,255,.07); color: var(--text-2); }
.icon-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.icon-opt:has(input:checked) { background: var(--gold-14); border-color: var(--gold-45); color: var(--gold); }
.icon-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.search .inp { padding-inline-start: 40px; }
.search .icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

/* ── 12. Tables ────────────────────────────────────────────────────── */
.tbl-wrap {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: auto; max-height: 70vh;
}
.tbl-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.tbl-wrap::-webkit-scrollbar-track { background: transparent; }
.tbl-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: var(--r-pill); border: 3px solid var(--surface); }

table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface); color: var(--text-3);
  font-size: var(--t-2xs); font-weight: 700; text-align: start;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 12px; border-block-end: 1px solid var(--hairline); white-space: nowrap;
}
tbody td { padding: 8px 12px; border-block-end: 1px solid var(--hairline); color: var(--text-2); vertical-align: middle; }
tbody tr:last-child td { border-block-end: none; }
tbody tr:hover td { background: rgba(255,255,255,.02); }
td.nm { color: var(--text); font-weight: 600; }
td.acts { white-space: nowrap; }

/* ── 13. Status pills ──────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: rgba(255,255,255,.05); color: var(--text-2);
}
.pill .icon { width: 12px; height: 12px; }
.pill-ok   { background: var(--ok-08);     color: var(--ok); }
.pill-gold { background: var(--gold-08);   color: var(--gold); }
.pill-warn { background: var(--warn-08);   color: var(--warn); }
.pill-off  { background: var(--danger-08); color: var(--danger); }

/* ── 14. Notes & alerts ────────────────────────────────────────────── */
.note {
  display: flex; gap: var(--s3); padding: var(--s4) var(--s5);
  border: 1px solid var(--gold-24); border-radius: var(--r-md);
  background: var(--gold-04); color: var(--text-2);
  font-size: var(--t-sm); line-height: 1.65; margin-block-end: var(--s5);
}
.note .icon { color: var(--gold); margin-block-start: 2px; }
.note b { color: var(--gold); }
.note.is-warn { background: var(--danger-08); border-color: var(--danger-24); }
.note.is-warn .icon, .note.is-warn b { color: var(--danger); }

.alert {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border: 1px solid var(--danger-24); border-radius: var(--r-md);
  font-size: var(--t-md); margin-block-end: var(--s5);
  background: var(--danger-08); color: #FCA5A5;
}
.alert.is-ok { background: var(--ok-08); color: #86EFAC; border-color: var(--ok-24); }

/* ── 15. Empty states ──────────────────────────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--s10) var(--s5); }
.empty .icon-tile { width: 60px; height: 60px; border-radius: var(--r-lg); margin-block-end: var(--s5); }
.empty b { font-size: var(--t-xl); font-weight: 700; color: var(--text); margin-block-end: var(--s2); }
.empty p { margin: 0; color: var(--text-3); font-size: var(--t-md); max-width: 46ch; line-height: 1.75; }
.empty .actions { margin-block-start: var(--s6); display: flex; gap: var(--s2); }

/* ── 16. Loading ───────────────────────────────────────────────────── */
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.14); border-top-color: var(--gold);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 17. Auth — HR Staff System visual parity ────────────────────────
   These rules deliberately hardcode the live HR Staff System's exact
   values (hr.joeelmasry.com/login.php, its assets/css/app.css) instead of
   Theme 7.5 tokens. This is a one-time, explicitly-requested pixel-level
   clone of an external system's auth screens, scoped only to
   .authwrap/.authcard — nothing outside these selectors changes, and the
   rest of the Portal stays on Theme 7.5. See docs/DECISIONS.md D-029. */
.authwrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: #0A0A0B;
}
.authcard {
  width: min(410px, 100%);
  background: #141416;
  border: 1px solid #29292E;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.authcard .logo { display: block; height: 42px; width: auto; margin: 0 auto 18px; object-fit: contain; }
.authcard h1 { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: normal; text-align: center; }
.authcard .sub { margin: 0 0 20px; font-size: 12.5px; color: #71717A; text-align: center; }

.authcard .field { margin-bottom: 14px; }
.authcard .field > label { font-size: 12.5px; font-weight: 600; color: #A1A1AA; }
.authcard .hint { font-size: 11.5px; color: #71717A; }

.authcard .inp {
  min-height: 0; height: auto; padding: 10px 12px;
  background: #101012; color: #F4F4F5;
  border: 1px solid #38383F; border-radius: 8px;
}
.authcard .inp::placeholder { color: #52525b; }
.authcard .inp:hover { border-color: #45454d; }
.authcard .inp:focus { outline: none; border-color: #F4C543; background: #0c0c0e; }

.authcard .btn {
  height: auto; padding: 9px 15px; border-radius: 8px;
  border: 1px solid #38383F; background: #1A1A1D; color: #F4F4F5;
  font-size: 13px; font-weight: 600;
}
.authcard .btn:hover { background: #232327; border-color: #45454d; }
.authcard .btn-primary { background: #F4C543; border-color: #F4C543; color: #191307; }
.authcard .btn-primary:hover { background: #FFD75E; border-color: #FFD75E; }
.authcard .btn-quiet { background: transparent; border-color: #38383F; color: #A1A1AA; }
.authcard .btn-quiet:hover { background: #1A1A1D; color: #F4F4F5; }

.authcard .alert {
  padding: 11px 13px; border: 1px solid rgba(239,68,68,.35); border-radius: 10px;
  font-size: 13px; margin-bottom: 14px;
  background: rgba(239,68,68,.12); color: #fca5a5;
}
.authcard .alert.is-ok { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #86efac; }

.authcard .authlink {
  display: block; margin-top: 14px; text-align: center;
  font-size: 12.5px; font-weight: 600; color: #71717A;
  text-decoration: underline; text-underline-offset: 3px;
}
.authcard .authlink:hover { color: #F4C543; }

/* ── 18. Connectivity ──────────────────────────────────────────────── */
/* Colour AND icon change together — colour alone is unreadable in sunlight
   on a phone, which is where staff actually work. */
.conn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .02em;
  background: rgba(255,255,255,.05); color: var(--text-2); white-space: nowrap;
}
.conn .icon { width: 13px; height: 13px; }
.conn[data-state="online"], .conn[data-state="synced"]   { background: var(--ok-08);     color: var(--ok); }
.conn[data-state="offline"], .conn[data-state="error"]   { background: var(--danger-08); color: var(--danger); }
.conn[data-state="pending"], .conn[data-state="conflict"]{ background: var(--warn-08);   color: var(--warn); }
.conn[data-state="syncing"] { background: var(--gold-08); color: var(--gold); }
.conn[data-state="syncing"] .icon { animation: spin 1.4s linear infinite; }

.offline-banner {
  display: none; align-items: center; gap: var(--s2);
  padding: 11px clamp(20px, 3vw, 40px);
  background: var(--danger-08); color: #FCA5A5;
  border-block-end: 1px solid var(--danger-24);
  font-size: var(--t-sm); font-weight: 600;
}
.offline-banner.is-visible { display: flex; }

/* ── 19. Modal ─────────────────────────────────────────────────────── */
.mask { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
        padding: var(--s4); background: var(--overlay); }
.mask.is-open { display: flex; }
.modal { width: min(720px, 100%); max-height: 92vh; overflow-y: auto;
         background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-float); }
.modal-h { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: var(--s3);
           padding: var(--s5) var(--s6); background: var(--surface); border-block-end: 1px solid var(--line); }
.modal-b { padding: var(--s6); }
.modal-f { position: sticky; bottom: 0; display: flex; gap: var(--s2); flex-wrap: wrap;
           padding: var(--s4) var(--s6); background: var(--surface); border-block-start: 1px solid var(--line); }

/* ── 20. Toasts ────────────────────────────────────────────────────── */
.toasts { position: fixed; inset-inline-start: var(--s5); bottom: var(--s5); z-index: 200;
          display: flex; flex-direction: column; gap: var(--s2); }
.toast { min-width: 240px; max-width: 360px; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
         background: var(--surface-3); font-size: var(--t-md); box-shadow: var(--shadow-float);
         border-inline-start: 3px solid var(--gold); animation: toast-in var(--med) var(--ease); }
.toast.is-ok  { border-inline-start-color: var(--ok); }
.toast.is-err { border-inline-start-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── 21. Mobile card lists (tables become cards) ───────────────────── */
.cards { display: none; }
.dcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pad-card);
         margin-block-end: var(--s2); box-shadow: var(--shadow-card); }
.dcard-top { display: flex; align-items: center; gap: var(--s3); padding-block-end: var(--s3);
             margin-block-end: var(--s3); border-block-end: 1px solid var(--hairline); }
.dcard-top .nm { flex: 1; font-weight: 700; font-size: var(--t-base); color: var(--text);
                 min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dcard-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); font-size: var(--t-sm); }
.dcard-body > div { display: flex; justify-content: space-between; gap: var(--s2); }
.dcard-body > div.full { grid-column: 1 / -1; }
.dcard-body span:first-child { color: var(--text-3); }
.dcard-body span:last-child  { font-weight: 600; color: var(--text-2); }
.dcard-acts { display: flex; gap: var(--s2); margin-block-start: var(--s4); }
.dcard-acts .btn { flex: 1; }

/* ── 22. System Manager ────────────────────────────────────────────── */
.sys-row {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  background: var(--surface); border-radius: var(--r-md);
  margin-block-end: var(--s2);
  border: 1px solid transparent;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sys-row:hover { border-color: var(--line); background: var(--surface-2); }
.sys-row.is-off { opacity: .5; }
.sys-row .sys-title { flex: 1; }
.sys-row .sys-en { font-size: var(--t-lg); }
.sys-row .sys-ar { font-size: var(--t-sm); }
.sys-row-meta { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sys-row-acts { display: flex; align-items: center; gap: var(--s1); }
.perm-code { font-size: var(--t-xs); color: var(--text-3); font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.reorder { display: flex; flex-direction: column; gap: 2px; }
.reorder .btn-icon { width: 28px; height: 21px; border-radius: var(--r-xs); }

.preview-pane {
  position: sticky; top: calc(var(--topbar-h) + var(--s5));
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s6);
}
.preview-note { margin: var(--s5) 0 0; font-size: var(--t-xs); color: var(--text-3); line-height: 1.65; }

.form-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: var(--s6); align-items: start; }

/* ── 23. Responsive ────────────────────────────────────────────────── */
@media (max-width: 1400px) { :root { --content-max: 1180px; } }

@media (max-width: 1180px) {
  :root { --rail-w: 232px; }
  .sys-grid { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
  .form-split { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
}

/* Below this the rail becomes an off-canvas drawer. */
@media (max-width: 940px) {
  .rail {
    inset-inline-start: 0;
    transform: translateX(-100%);
    transition: transform var(--med) var(--ease);
    box-shadow: var(--shadow-float);
    width: 280px;
  }
  [dir="rtl"] .rail { transform: translateX(100%); }
  .rail.is-open, [dir="rtl"] .rail.is-open { transform: translateX(0); }

  .rail-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: var(--overlay); opacity: 0; pointer-events: none;
    transition: opacity var(--med) var(--ease);
  }
  .rail-scrim.is-open { opacity: 1; pointer-events: auto; }

  .main { margin-inline-start: 0; }
  .rail-toggle { display: inline-flex; }

  .content { padding: var(--s6) var(--s5) var(--s10); }

  .masthead { padding-block-end: var(--s6); margin-block-end: var(--s6); gap: var(--s5); }
  .masthead .display { font-size: var(--t-3xl); }
  .masthead-meta { gap: var(--s6); }

  .sys-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }

  .tbl-wrap { display: none; }
  .cards { display: block; }

  .grid-2 { grid-template-columns: 1fr; }

  .sys-row { flex-wrap: wrap; }
  .sys-row-acts { width: 100%; justify-content: flex-end; }

  .toasts { inset-inline: var(--s4); }
  .toast { max-width: none; }
}

@media (max-width: 620px) {
  .sys-grid { grid-template-columns: 1fr; }
  .sys-card { min-height: 0; }
  .masthead { flex-direction: column; align-items: stretch; }
  .masthead-meta { gap: var(--s5); }
  .page-head .actions { margin-inline-start: 0; width: 100%; }
  .page-head .actions .btn { flex: 1; }
}

@media (max-width: 430px) {
  /* Below 16px iOS zooms the viewport on focus and breaks the layout. */
  .inp { font-size: 16px; }
  .content { padding: var(--s5) var(--s4) var(--s9); }
  .masthead .display { font-size: var(--t-2xl); }
  .conn .label { display: none; }
  .conn { padding: 7px; }
  .icon-picker { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
  .choice-grid { grid-template-columns: 1fr; }
}

/* ── 24. Preferences ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  a.sys-card:hover { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --hairline: rgba(255,255,255,.18); --line: rgba(255,255,255,.28); --text-2: #D2D0D6; --text-3: #A2A0A8; }
}

/* ── 25. Print ─────────────────────────────────────────────────────── */
@media print {
  .rail, .topbar, .toasts, .offline-banner, .btn, .sys-row-acts, .dcard-acts { display: none !important; }
  .main { margin-inline-start: 0; }
  body { background: #fff; color: #000; }
  .panel, .tbl-wrap, .sys-card { background: #fff; box-shadow: none; border: 1px solid #ddd; }
  .tbl-wrap { max-height: none; overflow: visible; }
}