/* ============================================================
   NAQEL TAXI · تكسي ناقل — Design System
   Fleet & dispatch console for Naqel Babylon
   Brand: #33CB98 (Naqel green) · #0B2B22 (ink) — sampled from the mark
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — one hue, five weights. --naqel is the mark green itself and
     is rationed: the emblem, one accent moment per screen, nothing more.
     It is too light to carry text on white (2.1:1), so anything that has
     to be read uses -700 (4.7:1) or -800 (6.2:1). */
  --naqel:      #33CB98;   /* the mark — emblem, dark-mode accent, highlights */
  --naqel-300:  #7EE3BE;   /* accent text on dark surfaces */
  --naqel-600:  #16A97C;   /* borders, hover on tints */
  --naqel-700:  #0C8360;   /* primary action bg — AA with white */
  --naqel-800:  #0A6E52;   /* accent text on light — AA at any size */
  --naqel-50:   #EAFBF4;   /* tint fills */

  /* Ink is green-black, not neutral black — the rail sits in the same
     hue family as the mark so the emblem belongs to it. */
  --ink:            #0B2B22;
  --ink-700:        #113A2E;
  --ink-500:        #17483A;

  /* Surfaces */
  --canvas:   #F6F7F9;
  --surface:  #FFFFFF;
  --surface-2:#FBFCFD;
  --sunken:   #F1F3F6;
  --line:     #E4E7EC;
  --line-soft:#EFF1F4;

  /* Text */
  --fg:       #10141B;
  --fg-2:     #475467;
  --fg-3:     #6C7584;
  --fg-invert:#FFFFFF;

  /* Operational states. The brand owns green now, so the separation is
     kept two ways: live is pushed to a grass green, away from the mark's
     teal, and status colour only ever appears inside a tinted pill with a
     dot — never as a button, never as a surface. */
  --st-live:    #0E7C4A;   /* available, online, completed — AA on --st-live-bg */
  --st-live-bg: #E8F6EE;
  --st-move:    #0065FE;   /* en route, in progress */
  --st-move-ink:#0057DB;   /* badge text — AA on --st-move-bg */
  --st-move-bg: #EDF4FF;
  --st-wait:    #8D6D00;   /* waiting, pending, needs attention — AA on --st-wait-bg */
  --st-wait-bg: #FFF9E0;
  --st-stop:    #CE2B1E;   /* cancelled, offline, failed — AA on --st-stop-bg */
  --st-stop-bg: #FEECEB;
  --st-idle:    #636D81;   /* draft, inactive — AA on --st-idle-bg */
  --st-idle-bg: #F0F2F5;

  /* Geometry — radius carries role, not decoration */
  --r-control: 8px;    /* buttons, inputs, chips */
  --r-panel:   12px;   /* cards, tables, panels */
  --r-pill:    999px;  /* badges, dots */

  /* Elevation — only things that truly float get a shadow */
  --lift-pop:  0 4px 12px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --lift-over: 0 16px 32px -8px rgba(16,24,40,.18), 0 4px 8px -4px rgba(16,24,40,.08);

  /* Metrics */
  --rail:        248px;
  --rail-narrow: 68px;
  --topbar:      56px;
  --gutter:      24px;
  --shell-max:   1560px;

  --ease: cubic-bezier(.4,0,.2,1);

  /* ---- Legacy aliases -------------------------------------
     Page-level <style> blocks still reference these names. They were
     used for BOTH dark backgrounds (with white text) and accent text,
     so the replacement has to clear 4.5:1 in both roles — which is why
     they map to --naqel-700 and not to the mark green itself. ---- */
  --orange:     #0C8360;
  --orange-d:   #0A6E52;
  --blue:       #0C8360;
  --blue-l:     #0A6E52;
  --ink-bg:     #0B2B22;
  --blue-dim:   rgba(51,203,152,.12);
  --orange-dim: rgba(51,203,152,.16);
  --bg:         #F6F7F9;
  --border:     #E4E7EC;
  --text:       #10141B;
  --muted:      #475467;
  --success:    #0E7C4A;
  --warning:    #B98F00;
  --danger:     #D92D20;
  --sidebar-w:  248px;
  --header-h:   56px;
  --radius:     12px;
  --shadow:     0 1px 2px rgba(16,24,40,.05);
  --shadow-lg:  0 4px 12px -2px rgba(16,24,40,.10);

  color-scheme: light;
}

[data-theme="dark"] {
  --canvas:   #08211A;
  --surface:  #0E2C24;
  --surface-2:#12352B;
  --sunken:   #061C16;
  --line:     #1D4638;
  --line-soft:#163A2E;
  --fg:       #E8EBF0;
  --fg-2:     #98A2B3;
  --fg-3:     #6D7787;
  --naqel-50: #0C2A22;
  --st-live-bg: #0C2A1B; --st-move-bg: #10203A;
  --st-wait-bg: #2A2209;  --st-stop-bg: #2E1412; --st-idle-bg: #1E242E;
  --st-live: #4ADE80; --st-wait: #FDCF07; --st-stop: #F97066; --st-idle: #98A2B3;
  --st-move-ink: #6BA5FF;
  --bg: #0B2B22; --border: #262D38; --text: #E8EBF0; --muted: #98A2B3;
  --blue: #5FE0B5; --blue-l: #33CB98; --orange: #5FE0B5; --orange-d: #33CB98;
  --blue-dim: rgba(51,203,152,.18); --orange-dim: rgba(51,203,152,.18);
  --success: #4ADE80; --warning: #FDCF07; --danger: #F97066;
  color-scheme: dark;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'Naqel Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--canvas);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
svg { flex-shrink: 0; }

:focus-visible {
  outline: 2px solid var(--naqel-700);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--naqel-700); color: #fff; }

/* Scrollbars — thin, unobtrusive */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-3); background-clip: content-box; }

/* ---------- 3. The Naqel mark ---------- */
/* The emblem is four shapes cut at one slope (2 across, 1 down): a chevron,
   two wings, a chevron. That slope is the system's geometric atom — the
   nav active-indicator, the empty-state glyph and the loader all reuse it.
   Nothing in the UI draws a diagonal at any other angle. */
/* One size knob drives the whole lockup: the tile, its corner radius, the
   wordmark and the Arabic sub-line all derive from --mark, so the
   proportions of the supplied artwork hold at every scale. */
.naqel-mark {
  --mark: 18px;                      /* wordmark size — the only knob */
  display: inline-flex; align-items: center;
  gap: calc(var(--mark) * .46);
  line-height: 1;
}

/* The tile keeps the artwork's own ratio: the emblem sits at 62% of a
   square whose radius is 0.22 of its side, exactly as supplied. */
.naqel-emblem {
  width:  calc(var(--mark) * 1.78);
  height: calc(var(--mark) * 1.78);
  border-radius: calc(var(--mark) * .39);
  background: var(--emblem-bg, var(--naqel));
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.naqel-emblem svg {
  width: 62%; height: auto; display: block;
  color: var(--emblem-fg, #fff);
}

.naqel-word { display: inline-flex; flex-direction: column; gap: calc(var(--mark) * .14); }
.naqel-word b {
  font-family: 'Naqel Display', 'Naqel Sans', system-ui, sans-serif;
  font-weight: 700; font-size: var(--mark);
  letter-spacing: -.02em; line-height: 1;
  color: var(--mark-fg, #fff);
}
/* The Arabic line is the name as it is actually said — تكسي ناقل. No
   letter-spacing: Arabic joins, and spacing it breaks the joins. */
.naqel-word i {
  font-family: 'Naqel Sans', system-ui, sans-serif;
  font-style: normal; font-weight: 500;
  font-size: calc(var(--mark) * .46); line-height: 1;
  letter-spacing: 0;
  color: var(--mark-sub, var(--naqel));
}

/* On a light surface the wordmark goes ink and the Arabic line takes the
   deep green: the mark green is 2.1:1 on white and would not be readable.
   The tile keeps the mark green either way — it is a fill, not text. */
.naqel-mark--ink { --mark-fg: var(--fg); --mark-sub: var(--naqel-800); }

/* Size scale */
.naqel-mark--lg   { --mark: 26px; }
.naqel-mark--xl   { --mark: 34px; }
.naqel-mark--hero { --mark: 46px; }

/* ---------- 4. Shell ---------- */
.shell { display: flex; min-height: 100vh; }

/* --- Navigation rail --- */
.rail {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: var(--rail);
  background: var(--ink);
  display: flex; flex-direction: column;
  z-index: 60;
  transition: width .22s var(--ease);
  border-inline-end: 1px solid rgba(255,255,255,.06);
}
.rail-head {
  height: var(--topbar);
  display: flex; align-items: center; gap: 10px;
  padding-inline: 18px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rail-org {
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.rail-org-name { color: #fff; font-size: 12.5px; font-weight: 600; }
.rail-org-meta { color: rgba(255,255,255,.55); font-size: 11px; margin-top: 1px; }

.rail-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 12px; }
.rail-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); background-clip: content-box; }

.nav-group + .nav-group { margin-top: 14px; }
.nav-group-label {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.52);
  padding: 0 10px 6px; white-space: nowrap;
}

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  height: 36px; padding-inline: 10px;
  border-radius: var(--r-control);
  color: rgba(255,255,255,.72);
  font-size: 13.5px; font-weight: 400;
  white-space: nowrap;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.6; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { background: rgba(51,203,152,.20); color: #fff; font-weight: 600; }
.nav-item.active svg { color: var(--naqel-300); opacity: 1; }
.nav-item.active::before {
  content: ''; position: absolute; inset-inline-start: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--naqel-700);
}
[dir="rtl"] .nav-item.active::before { border-radius: 3px 0 0 3px; }

.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-count {
  font-size: 11px; font-weight: 600;
  min-width: 20px; height: 18px; padding-inline: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.13); color: rgba(255,255,255,.9);
  font-variant-numeric: tabular-nums;
}
.nav-count[data-alert="1"] { background: var(--naqel-700); color: #fff; }

.rail-foot { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.07); }
.rail-user {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-control);
  transition: background .14s;
}
.rail-user:hover { background: rgba(255,255,255,.07); }
.rail-user-name { display: block; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.rail-user-role { display: block; color: rgba(255,255,255,.55); font-size: 11px; line-height: 1.3; }
.rail-user-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.rail-user-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed rail */
.rail-toggle {
  margin-inline-start: auto;
  width: 28px; height: 28px; border-radius: 6px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,.5); transition: background .14s, color .14s;
}
.rail-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.rail-toggle svg { width: 16px; height: 16px; }

body.rail-collapsed { --rail: var(--rail-narrow); }
body.rail-collapsed .naqel-word,
body.rail-collapsed .nav-label,
body.rail-collapsed .nav-count,
body.rail-collapsed .nav-group-label,
body.rail-collapsed .rail-org,
body.rail-collapsed .rail-user-text,
body.rail-collapsed .rail-toggle { display: none; }
body.rail-collapsed .rail-head { justify-content: center; padding-inline: 0; }
body.rail-collapsed .nav-item { justify-content: center; padding-inline: 0; }
body.rail-collapsed .rail-user { justify-content: center; }
/* Collapsed, the emblem is the whole mark — it is already square and
   already legible at 28px, which is why the lockup is a tile and not a
   wordmark that would have to be truncated. */
body.rail-collapsed .naqel-mark { --mark: 16px; gap: 0; }

/* --- Top bar --- */
.topbar {
  position: fixed; top: 0; inset-inline-end: 0; inset-inline-start: var(--rail);
  height: var(--topbar);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
  padding-inline: var(--gutter);
  z-index: 50;
  transition: inset-inline-start .22s var(--ease);
}
.topbar-heading { min-width: 0; }
.topbar-heading h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.topbar-heading p  { font-size: 11.5px; color: var(--fg-3); line-height: 1.3; }
.topbar-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

/* Command search */
.cmd-open {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding-inline: 10px 8px;
  min-width: 220px;
  background: var(--sunken); border: 1px solid transparent;
  border-radius: var(--r-control);
  color: var(--fg-3); font-size: 13px; cursor: pointer;
  transition: border-color .14s, background .14s;
}
.cmd-open:hover { border-color: var(--line); background: var(--surface); }
.cmd-open svg { width: 15px; height: 15px; }
.cmd-open kbd {
  margin-inline-start: auto;
  font-family: inherit; font-size: 11px; font-weight: 600;
  padding: 2px 5px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--line); color: var(--fg-3);
}

/* Live pulse — the brand dot, doing work */
.livestate { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.livestate .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--st-live); position: relative; }
.livestate .dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--st-live); animation: ping 2s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .55 } 70%,100% { transform: scale(2.6); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .livestate .dot::after { animation: none; } }

/* Icon button */
.iconbtn {
  width: 34px; height: 34px; border-radius: var(--r-control);
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--fg-2); cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.iconbtn:hover { background: var(--sunken); border-color: var(--line); color: var(--fg); }
.iconbtn svg { width: 17px; height: 17px; }

/* Market picker */
.market-select {
  height: 34px; padding-inline: 10px 28px;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--surface); color: var(--fg);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23737D8C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
[dir="rtl"] .market-select { background-position: left 9px center; padding-inline: 28px 10px; }
.market-select:hover { border-color: var(--fg-3); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--naqel-700); color: #fff;
  font-size: 12.5px; font-weight: 650; letter-spacing: .01em;
  flex-shrink: 0; cursor: pointer;
}
.avatar-sm { width: 26px; height: 26px; font-size: 11px; }
.avatar-lg { width: 40px; height: 40px; font-size: 15px; }
.rail-user .avatar { background: rgba(255,255,255,.14); }

/* --- Canvas --- */
.canvas {
  flex: 1;
  margin-inline-start: var(--rail);
  padding-top: var(--topbar);
  min-width: 0;
  transition: margin-inline-start .22s var(--ease);
}
.page { max-width: var(--shell-max); padding: 22px var(--gutter) 64px; margin-inline: auto; }

/* Section head inside a page */
.section-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.section-head h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.section-head p  { font-size: 12.5px; color: var(--fg-3); }
.section-head-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }

/* Legacy page-header (templates still use it) */
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.page-header h1 { font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.page-header p  { font-size: 13px; color: var(--fg-3); margin-top: 1px; }
.page-header-actions { margin-inline-start: auto; display: flex; gap: 8px; }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding-inline: 14px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background .14s var(--ease), border-color .14s, color .14s, opacity .14s;
}
.btn svg { width: 16px; height: 16px; stroke-width: 1.8; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-primary { background: var(--naqel-700); color: #fff; }
.btn-primary:hover { background: var(--naqel-800); }

/* Accent = the yellow moment. Rationed: one per screen, max. */
.btn-accent { background: var(--naqel); color: #062019; }
.btn-accent:hover { background: #E8BE04; }

.btn-ghost { background: transparent; color: var(--fg-2); border-color: var(--line); }
.btn-ghost:hover { background: var(--sunken); color: var(--fg); border-color: var(--fg-3); }

.btn-outline { background: var(--surface); color: var(--fg); border-color: var(--line); }
.btn-outline:hover { background: var(--sunken); border-color: var(--fg-3); }

.btn-quiet { background: transparent; color: var(--fg-2); }
.btn-quiet:hover { background: var(--sunken); color: var(--fg); }

.btn-danger { background: var(--st-stop); color: #fff; }
.btn-danger:hover { background: #B42318; }

.btn-sm { height: 30px; padding-inline: 10px; font-size: 12.5px; gap: 5px; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg { height: 44px; padding-inline: 20px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ---------- 6. Panels & cards ---------- */
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 18px;
}
.card-flush { padding: 0; overflow: hidden; }

.card-header, .panel-head {
  display: flex; align-items: center; gap: 10px;
  margin: -18px -18px 16px; padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
}
.card-flush .card-header, .card-flush .panel-head { margin: 0 0 0; }
.card-title, .panel-title {
  font-size: 13px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: 8px;
}
.card-title svg, .panel-title svg { width: 16px; height: 16px; color: var(--fg-3); }
.card-actions, .panel-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.panel-body { padding: 18px; }

/* ---------- 7. Metrics ---------- */
.stats-grid, .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card, .metric {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: 15px 16px;
  transition: border-color .16s var(--ease);
}
.stat-card:hover, .metric:hover { border-color: var(--fg-3); }

.stat-icon, .metric-icon {
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--sunken); color: var(--fg-2);
  margin-bottom: 11px; font-size: 15px;
}
.stat-icon svg, .metric-icon svg { width: 16px; height: 16px; }

.stat-num, .metric-value {
  font-size: 25px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}
.stat-label, .metric-label { font-size: 12.5px; color: var(--fg-2); font-weight: 400; }
.stat-delta, .metric-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; margin-top: 7px;
}
.delta-up   { color: var(--st-live); }
.delta-down { color: var(--st-stop); }
.delta-flat { color: var(--fg-3); }

/* Tone accents — a hairline, not a whole colored card */
.stat-card.c-blue   .stat-icon, .metric.t-move { }
.stat-card.c-blue   .stat-icon { background: var(--st-move-bg); color: var(--st-move); }
.stat-card.c-orange .stat-icon { background: var(--st-move-bg); color: var(--st-move); }
.stat-card.c-green  .stat-icon { background: var(--st-live-bg); color: var(--st-live); }
.stat-card.c-yellow .stat-icon { background: var(--st-wait-bg); color: var(--st-wait); }
.stat-card.c-red    .stat-icon { background: var(--st-stop-bg); color: var(--st-stop); }
.stat-card::after { content: none; }

/* Trend track */
.trend-bar, .track { height: 4px; background: var(--sunken); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.trend-fill, .track > i { display: block; height: 100%; border-radius: 99px; background: var(--naqel-700); }

/* ---------- 8. Status ---------- */
/* Dots — the same shape as the mark */
.sdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--st-idle); }
.sdot.live { background: var(--st-live); }
.sdot.move { background: var(--st-move); }
.sdot.wait { background: var(--st-wait); }
.sdot.stop { background: var(--st-stop); }

.badge, .status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding-inline: 9px;
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0;
  text-transform: none;
  background: var(--st-idle-bg); color: var(--st-idle);
  white-space: nowrap;
}
.badge::before, .status-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge-nodot::before { content: none; }

.badge-green,  .status-badge.completed  { background: var(--st-live-bg); color: var(--st-live); }
.badge-blue,   .status-badge.on-the-way { background: var(--st-move-bg); color: var(--st-move-ink); }
.badge-orange                            { background: var(--st-move-bg); color: var(--st-move-ink); }
.badge-yellow, .status-badge.arrived    { background: var(--st-wait-bg); color: var(--st-wait); }
.badge-red,    .status-badge.cancelled  { background: var(--st-stop-bg); color: var(--st-stop); }
.badge-gray                              { background: var(--st-idle-bg); color: var(--st-idle); }
.badge-dot::before { content: ''; }

/* ---------- 9. Tables ---------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
}
.card .table-wrap, .card-flush .table-wrap { border: 0; border-radius: 0; }

table, .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }

thead th, .data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  color: var(--fg-2);
  padding: 10px 14px;
  text-align: start;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
thead th:first-child, thead th:last-child { border-radius: 0; }

tbody tr, .data-table tbody tr { border-bottom: 1px solid var(--line-soft); transition: background .1s; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover, .data-table tbody tr:hover { background: var(--surface-2); }
tbody td, .data-table tbody td { padding: 11px 14px; vertical-align: middle; }

td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }
.cell-strong { font-weight: 600; color: var(--fg); }
.cell-sub { font-size: 11.5px; color: var(--fg-3); }

/* Identifiers get the mono face — per-character scanning matters here */
.ref, .font-mono, .mono {
  font-family: 'Naqel Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; letter-spacing: -.01em;
}
.ref { color: var(--fg-2); }

/* Row-lead: avatar + name + secondary */
.rowlead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rowlead-text { min-width: 0; }
.rowlead-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 10. Forms ---------- */
.form-row { display: grid; gap: 14px; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--fg); display: block; }
.form-label .req { color: var(--st-stop); margin-inline-start: 2px; }

.form-control {
  width: 100%;
  height: 36px; padding: 0 11px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font-size: 13.5px; color: var(--fg);
  outline: none;
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
textarea.form-control { height: auto; min-height: 88px; padding: 9px 11px; resize: vertical; line-height: 1.55; }
select.form-control {
  appearance: none; cursor: pointer; padding-inline-end: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23737D8C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
[dir="rtl"] select.form-control { background-position: left 10px center; padding-inline: 30px 11px; }
.form-control::placeholder { color: var(--fg-3); }
.form-control:hover { border-color: var(--fg-3); }
.form-control:focus {
  border-color: var(--naqel-700);
  box-shadow: 0 0 0 3px rgba(51,203,152,.13);
}
.form-control:disabled { background: var(--sunken); color: var(--fg-3); cursor: not-allowed; }
.form-control.is-invalid { border-color: var(--st-stop); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217,45,32,.13); }
.form-hint { font-size: 11.5px; color: var(--fg-3); }
.form-error { font-size: 11.5px; color: var(--st-stop); font-weight: 500; }

/* Input with a leading icon */
.field { position: relative; display: flex; align-items: center; }
.field svg { position: absolute; inset-inline-start: 11px; width: 16px; height: 16px; color: var(--fg-3); pointer-events: none; }
.field .form-control { padding-inline-start: 34px; }

/* Toolbar of filters above a table */
.filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.filterbar .form-control { width: auto; min-width: 150px; }
.filterbar .field .form-control { min-width: 230px; }
.filterbar-end { margin-inline-start: auto; display: flex; gap: 8px; }

/* Segmented control */
.segment { display: inline-flex; background: var(--sunken); border-radius: var(--r-control); padding: 3px; gap: 2px; }
.segment a, .segment button {
  height: 28px; padding-inline: 11px; border: 0; background: transparent;
  border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s, color .14s;
}
.segment a:hover, .segment button:hover { color: var(--fg); }
.segment a.active, .segment button.active { background: var(--surface); color: var(--fg); box-shadow: var(--lift-pop); }

/* Toggle */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--line); border-radius: 99px; transition: background .18s var(--ease);
}
.switch span::before {
  content: ''; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .18s var(--ease);
  box-shadow: 0 1px 3px rgba(16,24,40,.2);
}
.switch input:checked + span { background: var(--naqel-700); }
.switch input:checked + span::before { transform: translateX(16px); }
[dir="rtl"] .switch input:checked + span::before { transform: translateX(-16px); }
.switch input:focus-visible + span { outline: 2px solid var(--naqel-700); outline-offset: 2px; }

/* ---------- 11. Alerts ---------- */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-control);
  border: 1px solid;
  font-size: 13px;
  margin-bottom: 14px;
}
.alert svg { width: 17px; height: 17px; margin-top: 1px; }
.alert-success { background: var(--st-live-bg); border-color: color-mix(in srgb, var(--st-live) 30%, transparent); color: var(--st-live); }
.alert-error, .alert-danger { background: var(--st-stop-bg); border-color: color-mix(in srgb, var(--st-stop) 30%, transparent); color: var(--st-stop); }
.alert-warning { background: var(--st-wait-bg); border-color: color-mix(in srgb, var(--st-wait) 30%, transparent); color: var(--st-wait); }
.alert-info, .alert-debug { background: var(--st-move-bg); border-color: color-mix(in srgb, var(--st-move) 30%, transparent); color: var(--st-move); }

/* ---------- 12. Empty & loading ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 56px 24px; color: var(--fg-2);
}
.empty-state .icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--sunken); color: var(--fg-3);
  margin-bottom: 14px; font-size: 20px;
}
.empty-state .icon svg { width: 21px; height: 21px; }
.empty-state h3 { font-size: 14.5px; font-weight: 600; color: var(--fg); margin-bottom: 5px; }
.empty-state p { font-size: 13px; max-width: 380px; color: var(--fg-3); }
.empty-state .btn { margin-top: 16px; }

.skeleton {
  background: linear-gradient(90deg, var(--sunken) 25%, var(--line-soft) 37%, var(--sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s infinite linear;
  border-radius: 6px;
}
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: -100% 0 } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none } }

/* ---------- 13. Pagination ---------- */
.pagination { display: flex; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.page-btn {
  min-width: 32px; height: 32px; padding-inline: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); color: var(--fg-2);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.page-btn:hover { background: var(--sunken); color: var(--fg); }
.page-btn.active { background: var(--naqel-700); border-color: var(--naqel-700); color: #fff; }
.page-info { font-size: 12.5px; color: var(--fg-3); margin-inline-start: auto; }

/* ---------- 14. Timeline ---------- */
.trip-timeline { display: flex; flex-direction: column; }
.timeline-step { display: flex; align-items: flex-start; gap: 13px; padding-bottom: 18px; position: relative; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step:not(:last-child)::before {
  content: ''; position: absolute; inset-inline-start: 12px; top: 26px;
  width: 2px; height: calc(100% - 26px);
  background: var(--line);
}
.timeline-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--sunken); color: var(--fg-3);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  font-size: 12px; z-index: 1;
}
.timeline-dot svg { width: 13px; height: 13px; }
.timeline-dot.done { background: var(--st-live); color: #fff; box-shadow: 0 0 0 1px var(--st-live); }
.timeline-dot.active { background: var(--naqel-700); color: #fff; box-shadow: 0 0 0 1px var(--naqel-700), 0 0 0 5px rgba(51,203,152,.15); }
.timeline-dot.upcoming { background: var(--sunken); }
.timeline-body { padding-top: 3px; min-width: 0; }
.timeline-title { font-size: 13px; font-weight: 600; }
.timeline-meta { font-size: 11.5px; color: var(--fg-3); }

/* ---------- 15. Map chips ---------- */
.map-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 11px;
  font-size: 12px; font-weight: 600;
  box-shadow: var(--lift-pop);
}
.map-chip.available  { color: var(--st-live); }
.map-chip.busy       { color: var(--st-wait); }
.map-chip.on-the-way { color: var(--st-move); }

/* ---------- 16. Command palette ---------- */
.cmd-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,12,16,.5);
  backdrop-filter: blur(3px);
  display: grid; place-items: start center;
  padding-top: 12vh;
}
.cmd-scrim[hidden] { display: none; }
.cmd-panel {
  width: min(560px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--lift-over);
  overflow: hidden;
}
.cmd-field { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.cmd-field svg { width: 17px; height: 17px; color: var(--fg-3); }
.cmd-field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14.5px; }
.cmd-field input::placeholder { color: var(--fg-3); }
.cmd-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.cmd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: var(--r-control);
  font-size: 13.5px; cursor: pointer; color: var(--fg-2);
}
.cmd-row svg { width: 16px; height: 16px; }
.cmd-row[aria-selected="true"] { background: var(--naqel-50); color: var(--naqel-700); }
[data-theme="dark"] .cmd-row[aria-selected="true"] { color: var(--naqel-300); }
.cmd-row .cmd-group { margin-inline-start: auto; font-size: 11.5px; color: var(--fg-3); }
.cmd-none { padding: 26px; text-align: center; color: var(--fg-3); font-size: 13px; }

/* ---------- 17. Layout helpers ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-sidebar { display: grid; grid-template-columns: 1fr 330px; gap: 16px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.ms-auto { margin-inline-start: auto; }
.gap-4 { gap: 4px } .gap-6 { gap: 6px } .gap-8 { gap: 8px } .gap-10 { gap: 10px }
.gap-12 { gap: 12px } .gap-16 { gap: 16px } .gap-20 { gap: 20px }
.mb-4 { margin-bottom: 4px } .mb-8 { margin-bottom: 8px } .mb-12 { margin-bottom: 12px }
.mb-16 { margin-bottom: 16px } .mb-20 { margin-bottom: 20px } .mb-24 { margin-bottom: 24px }
.mt-8 { margin-top: 8px } .mt-12 { margin-top: 12px } .mt-16 { margin-top: 16px } .mt-24 { margin-top: 24px }
.text-muted { color: var(--fg-2) } .text-faint { color: var(--fg-3) }
.text-xs { font-size: 11.5px } .text-sm { font-size: 12.5px } .text-base { font-size: 14px }
.text-lg { font-size: 16px } .fw-500 { font-weight: 500 } .fw-600 { font-weight: 600 }
.text-orange, .text-blue { color: var(--naqel-800) }
/* On dark the mark green itself is the legible one (7.3:1); the deep
   greens are reserved for solid fills there. */
[data-theme="dark"] .text-orange, [data-theme="dark"] .text-blue { color: var(--naqel-300) }
.text-success { color: var(--st-live) } .text-danger { color: var(--st-stop) }
.text-warning { color: var(--st-wait) }
.bg-blue { background: var(--ink) } .bg-orange { background: var(--naqel-700) }
.rounded { border-radius: var(--r-panel) } .shadow { box-shadow: var(--lift-pop) }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.divider { height: 1px; background: var(--line); margin: 14px 0; border: 0; }
.nowrap { white-space: nowrap }
.hide { display: none !important }

/* ---------- 18. Auth pages ---------- */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside {
  background: var(--ink); color: #fff;
  padding: 40px; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.auth-aside::after {
  content: ''; position: absolute; inset-inline-end: -140px; bottom: -140px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(51,203,152,.30), transparent 68%);
}
.auth-aside-body { margin-top: auto; position: relative; z-index: 1; max-width: 440px; }
.auth-aside-body h2 { font-size: 27px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; margin-bottom: 12px; }
.auth-aside-body p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.6; }
.auth-stats { display: flex; gap: 32px; margin-top: 30px; }
.auth-stat b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.auth-stat span { font-size: 12px; color: rgba(255,255,255,.62); }
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--surface); }
.auth-card { width: 100%; max-width: 368px; }
.auth-card h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 6px; }
.auth-card > p { font-size: 13.5px; color: var(--fg-2); margin-bottom: 26px; }
.auth-card .form-group { margin-bottom: 15px; }
.auth-foot { margin-top: 22px; font-size: 12.5px; color: var(--fg-3); text-align: center; }
/* The aside carries the brand on wide screens. Below that it is
   dropped, so the form column shows the mark itself — otherwise a
   phone user signs into an unbranded form. */
.auth-card-mark { display: none; }
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-main { align-items: start; padding-top: 56px; }
  .auth-card-mark {
    display: inline-flex;
    --mark: 40px; --mark-fg: var(--fg); --mark-sub: var(--naqel-800);
    margin-bottom: 30px;
  }
}

/* ---------- 19. Responsive ---------- */
@media (max-width: 1100px) {
  .grid-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  :root { --gutter: 16px; --topbar: 104px; }
  .grid-2, .grid-3, .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
  .stats-grid, .metric-grid { grid-template-columns: repeat(2, 1fr); }

  /* Rail becomes a drawer */
  .rail { transform: translateX(-100%); box-shadow: var(--lift-over); }
  [dir="rtl"] .rail { transform: translateX(100%); }
  body.rail-open .rail { transform: none; }
  .canvas { margin-inline-start: 0; }
  .rail-scrim { position: fixed; inset: 0; background: rgba(10,12,16,.45); z-index: 55; }
  body:not(.rail-open) .rail-scrim { display: none; }

  /* Topbar becomes two rows so nothing is pushed off-screen:
     identity on top, controls beneath. */
  .topbar {
    inset-inline-start: 0;
    height: var(--topbar);
    flex-wrap: wrap;
    align-content: center;
    row-gap: 8px;
    padding-block: 8px;
  }
  .topbar-heading { flex: 1 1 auto; order: 1; }
  .topbar-heading p { display: none; }
  .rail-mobile-btn { order: 0; }
  .topbar > .avatar, .topbar-tools > .avatar { display: none; }
  .topbar-tools {
    order: 2; flex-basis: 100%; margin-inline-start: 0;
    gap: 6px; overflow-x: auto; scrollbar-width: none;
  }
  .topbar-tools::-webkit-scrollbar { display: none; }
  .topbar-tools > * { flex-shrink: 0; }
  .cmd-open { min-width: 0; }
  .cmd-open span, .cmd-open kbd { display: none; }
  .livestate span:not(.dot) { display: none; }
  .market-select { max-width: 150px; }
}
@media (min-width: 901px) { .rail-scrim, .rail-mobile-btn { display: none !important; } }
@media (max-width: 560px) {
  .stats-grid, .metric-grid { grid-template-columns: 1fr; }
  .today-split { grid-template-columns: repeat(3, 1fr); }
  .page-header, .section-head { flex-wrap: wrap; }
  .page-header-actions, .section-head-actions { margin-inline-start: 0; width: 100%; }
  .page-header-actions .btn, .section-head-actions .btn { flex: 1; }
  .filterbar > * { width: 100%; }
  .filterbar .form-control, .filterbar .field, .filterbar .field .form-control { width: 100%; min-width: 0; }
  .filterbar-end { width: 100%; margin-inline-start: 0; }
  .today-hero-value { font-size: 28px; }
}

/* ---------- 20. Print ---------- */
@media print {
  .rail, .topbar, .rail-scrim, .cmd-scrim, .page-header-actions, .btn { display: none !important; }
  .canvas { margin: 0; padding: 0; }
  .page { padding: 0; max-width: none; }
  .card, .panel, .table-wrap { border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* ---------- 21. Inline icon default ---------- */
.ic { width: 16px; height: 16px; vertical-align: -3px; }
.stat-icon .ic, .metric-icon .ic { width: 16px; height: 16px; vertical-align: 0; }
.empty-state .icon .ic { width: 21px; height: 21px; }
.nav-item .ic { width: 18px; height: 18px; }

/* ---------- 22. Today band (dashboard hero) ---------- */
/* Revenue is the number this business is run on, so it gets the
   weight; everything else supports it at a quieter scale. */
.today { display: grid; grid-template-columns: minmax(320px, 1.05fr) 2fr; gap: 12px; }

.today-hero {
  background: var(--ink); color: #fff;
  border: 1px solid transparent;
  border-radius: var(--r-panel);
  padding: 20px 22px;
  position: relative; overflow: hidden;
}
.today-hero::after {
  content: ''; position: absolute; inset-inline-end: -90px; top: -90px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(51,203,152,.35), transparent 70%);
  pointer-events: none;
}
.today-hero > * { position: relative; z-index: 1; }
.today-hero-label { font-size: 12.5px; color: rgba(255,255,255,.66); margin-bottom: 8px; }
.today-hero-value {
  font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.today-hero-value .cur { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: 0; }
.today-hero-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; }
.today-hero-meta .text-faint { color: rgba(255,255,255,.58); }
.today-hero-meta .delta-up { color: #4ADE9E; }

.today-split {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.today-split b {
  display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.today-split span { font-size: 11.5px; color: rgba(255,255,255,.62); }

.today-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.today-grid .metric { display: flex; flex-direction: column; }
.today-grid .metric .metric-icon { margin-bottom: auto; }
.today-grid .metric .metric-value { margin-top: 14px; }

.metric-icon.t-move { background: var(--st-move-bg); color: var(--st-move); }
.metric-icon.t-live { background: var(--st-live-bg); color: var(--st-live); }
.metric-icon.t-wait { background: var(--st-wait-bg); color: var(--st-wait); }
.metric-icon.t-stop { background: var(--st-stop-bg); color: var(--st-stop); }

@media (max-width: 1180px) {
  .today { grid-template-columns: 1fr; }
  .today-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 760px) { .today-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 23. Auth extras ---------- */
.auth-aside .naqel-mark { position: relative; z-index: 1; margin-bottom: 26px; }
.auth-aside-note {
  position: relative; z-index: 1;
  margin-top: 28px; font-size: 11.5px; color: rgba(255,255,255,.55);
}
.auth-stat b { font-variant-numeric: tabular-nums; }

.field .reveal {
  position: absolute; inset-inline-end: 4px;
  width: 30px; height: 30px; border: 0; background: transparent;
  border-radius: 6px; cursor: pointer; color: var(--fg-3);
  display: grid; place-items: center;
}
.field .reveal:hover { background: var(--sunken); color: var(--fg); }
.field .reveal svg { position: static; }
.field:has(.reveal) .form-control { padding-inline-end: 38px; }

.checkline {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--fg-2); cursor: pointer;
  margin-top: 4px;
}
.checkline input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--naqel-700); cursor: pointer; flex-shrink: 0;
}

/* ---------- 24. Public booking ---------- */
.loc-ico.loc-start { color: var(--st-live); }
.loc-ico.loc-end   { color: var(--st-stop); }

.ok-mark {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 16px;
  background: var(--st-live-bg); color: var(--st-live);
}
.ok-mark svg { width: 30px; height: 30px; }

/* An empty badge should collapse, not render as a lone dot */
.badge:empty, .status-badge:empty { display: none; }
.badge:empty::before, .status-badge:empty::before { content: none; }

[data-theme="dark"] .today-hero { border-color: var(--line); background: var(--surface); }
[data-theme="dark"] .auth-aside { border-inline-end: 1px solid var(--line); }

/* ---------- 25. Bidi isolation ---------- */
/* The layout mirrors in Arabic, but these do not: a logo lockup is a
   fixed mark, and signed numbers, codes and identifiers read
   left-to-right in every locale. Without this, "+12.4%" renders as
   "12.4%+" and "⌘K" as "K⌘". */
.naqel-mark,
.cmd-open kbd,
.metric-delta, .stat-delta,
.today-hero-value, .today-split b,
.ref, .font-mono, .mono,
.livestate {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] .naqel-mark { flex-direction: row; }

/* Numbers inside table cells and metrics stay LTR but keep their
   alignment from the surrounding block. */
[dir="rtl"] td.num, [dir="rtl"] .metric-value, [dir="rtl"] .stat-num {
  unicode-bidi: plaintext;
}

/* Icons that encode direction must mirror with the layout. */
[dir="rtl"] .rail-user > svg,
[dir="rtl"] .btn svg[data-flip],
[dir="rtl"] .nav-item svg[data-flip] { transform: scaleX(-1); }

@media (max-width: 700px) {
  .card-header, .panel-head { flex-wrap: wrap; row-gap: 8px; }
  .card-title, .panel-title { flex: 1 1 100%; }
  .card-actions, .panel-actions { margin-inline-start: 0; flex-wrap: wrap; }
}

/* ---------- 26. Mixed-script copy ---------- */
/* The page direction is Arabic, but individual strings may still be
   English — during rollout, and permanently for names, addresses and
   plate numbers. `plaintext` lets each block take its direction from
   its own first strong character, so an English sentence keeps its
   full stop at the end instead of throwing it to the left, while
   Arabic copy in the same layout still reads right-to-left.
   Alignment continues to follow the page. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt,
.form-label, .form-hint, .form-error,
.card-title, .panel-title, .section-head h2, .section-head p,
.topbar-heading h1, .topbar-heading p,
.page-header h1, .page-header p,
.nav-label, .nav-group-label,
.rail-org-name, .rail-org-meta,
.rail-user-name, .rail-user-role,
.stat-label, .metric-label,
.empty-state h3, .empty-state p,
.timeline-title, .timeline-meta,
.cell-strong, .cell-sub,
.auth-card > p, .auth-aside-body p, .auth-aside-note,
.today-hero-label, .today-split span, .auth-stat span,
td, th, label, option, .badge, .alert {
  unicode-bidi: plaintext;
}

/* Inputs too: a placeholder or value in either script reads correctly. */
.form-control, .cmd-field input { unicode-bidi: plaintext; }

/* Buttons centre their label, so plaintext alone is enough. */
.btn { unicode-bidi: plaintext; }

/* ============================================================
   27. Loader — the emblem assembling itself
   The two wings fly in from the sides, then the chevrons close the
   shape top and bottom. Once the mark is whole the same four pieces
   pulse in that order forever, so the logo is the spinner. No separate
   spinner graphic exists anywhere in the system.

   Every duration and delay below is multiplied by --nl-speed, so the
   whole sequence retimes from one number. 1 = the original pace.
   ============================================================ */
.naqel-loader {
  --nl-speed: 1.75;
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ink);
  opacity: 1;
  transition: opacity .5s var(--ease), visibility .5s;
}
.naqel-loader[hidden] { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; }

.nl-mark {
  --mark: 84px;                     /* emblem width; the wordmark follows */
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--mark) * .26);
  direction: ltr;
}
.nl-emblem { width: var(--mark); height: auto; display: block; overflow: visible; }

/* Each piece is positioned and scaled relative to its own bounding box,
   not the SVG viewport, so the four animations stay independent. */
.nl-emblem path {
  fill: var(--naqel);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    nl-in calc(460ms * var(--nl-speed)) cubic-bezier(.22,1,.36,1) forwards,
    nl-pulse calc(1400ms * var(--nl-speed)) var(--ease) infinite;
}
/* Order of assembly: left wing, right wing, crown, keel — and the loop
   afterwards runs in the same order, so the eye learns one rhythm. */
.nl-emblem .nl-wing-l { --nl-from: translateX(-46%); animation-delay: calc(0ms   * var(--nl-speed)), calc(1180ms * var(--nl-speed)); }
.nl-emblem .nl-wing-r { --nl-from: translateX(46%);  animation-delay: calc(110ms * var(--nl-speed)), calc(1290ms * var(--nl-speed)); }
.nl-emblem .nl-crown  { --nl-from: translateY(-70%); fill: #fff; animation-delay: calc(240ms * var(--nl-speed)), calc(1400ms * var(--nl-speed)); }
.nl-emblem .nl-keel   { --nl-from: translateY(70%);  fill: #fff; animation-delay: calc(340ms * var(--nl-speed)), calc(1510ms * var(--nl-speed)); }

@keyframes nl-in {
  from { opacity: 0; transform: var(--nl-from) scale(.82); }
  to   { opacity: 1; transform: none; }
}
/* The pulse is a breath, not a blink — the mark never drops below 55%,
   so a slow connection does not read as a broken image. */
@keyframes nl-pulse {
  0%, 100% { opacity: 1; }
  22%      { opacity: .55; }
  55%      { opacity: 1; }
}

.nl-word {
  display: inline-flex; align-items: baseline;
  gap: calc(var(--mark) * .13);
  opacity: 0;
  animation: nl-fade calc(520ms * var(--nl-speed)) var(--ease) calc(520ms * var(--nl-speed)) forwards;
}
.nl-word b {
  font-family: 'Naqel Display', 'Naqel Sans', system-ui, sans-serif;
  font-weight: 700; font-size: calc(var(--mark) * .30);
  letter-spacing: -.02em; line-height: 1; color: #fff;
}
.nl-word i {
  font-family: 'Naqel Sans', system-ui, sans-serif;
  font-style: normal; font-weight: 500;
  font-size: calc(var(--mark) * .17); line-height: 1;
  color: var(--naqel);
}

.nl-note {
  margin-top: 22px; text-align: center;
  font-size: 12.5px; color: rgba(255,255,255,.5);
  opacity: 0;
  animation: nl-fade calc(500ms * var(--nl-speed)) var(--ease) calc(820ms * var(--nl-speed)) forwards;
}
@keyframes nl-fade { to { opacity: 1; } }

/* Reduced motion: no assembly, no pulse — the mark is simply there, and
   a single hairline under it sweeps to show work is still happening. */
@media (prefers-reduced-motion: reduce) {
  .nl-emblem path { opacity: 1; transform: none; animation: none; }
  .nl-word, .nl-note { opacity: 1; animation: none; }
  .nl-mark::after {
    content: ""; display: block;
    width: calc(var(--mark) * .6); height: 2px; border-radius: 2px;
    background: var(--naqel);
    animation: nl-sweep 1.4s steps(1, end) infinite;
  }
  @keyframes nl-sweep { 0%,50% { opacity: 1 } 50.01%,100% { opacity: .25 } }
}

/* Inline variant — same mark at panel size, for one card that is still
   loading rather than the whole page. */
.naqel-loader-inline {
  position: static; inset: auto; background: none;
  min-height: 180px; padding: 32px;
}
.naqel-loader-inline .nl-mark { --mark: 46px; }
.naqel-loader-inline .nl-word b { color: var(--fg); }
.naqel-loader-inline .nl-note { color: var(--fg-3); }

/* ---------- 28. Form pages ---------- */
/* A create/edit page is a single column of grouped cards with the actions
   pinned at the end — never a wall of inputs. */
.form-page { max-width: 780px; }
.form-page-narrow { max-width: 560px; }
.form-page .card-header { background: transparent; }

.form-actions {
  display: flex; gap: 10px; align-items: center;
  padding-top: 4px;
}
.form-actions .btn-ghost { margin-inline-start: auto; }

.form-group.has-error .form-control { border-color: var(--st-stop); }
.form-group.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(206,43,30,.13); }

@media (max-width: 560px) {
  .form-actions { flex-wrap: wrap; }
  .form-actions .btn { flex: 1; }
  .form-actions .btn-ghost { margin-inline-start: 0; }
}