/* ═══════════════════════════════════════════════════════════════════════════
   ELBAKRI OVERSEAS — DESIGN SYSTEM
   ───────────────────────────────────────────────────────────────────────────
   Built the way the dashboards that hold up are built (Stripe, Linear,
   Vercel): a neutral surface system doing ~95% of the work, ONE accent used
   with restraint, and colour otherwise reserved for state and meaning.

     NEUTRALS  cool greys, very slightly blue — carry every surface, border
               and label. Hierarchy comes from type weight and spacing.
     ACCENT    #2D4AA8 — the Elbakri navy raised to an interactive lightness.
               Same hue as the mark (#0B1F52), so the identity is the brand's
               own colour rather than an invented one. Used only for: primary
               action, focus, active nav, selection, links.
     STATUS    emerald / amber / rose / azure — never decorative, only meaning.

   Deliberately absent: gradients, glows, coloured washes, and a decorative
   second hue. Those read as ornament, and ornament is what makes an interface
   look generated. Everything is a token, which is what makes dark mode a
   value swap instead of a rewrite.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Neutrals — the actual substance of the UI ───────────────────────── */
  --n-0:   #FFFFFF;
  --n-25:  #FCFCFD;
  --n-50:  #F8F9FC;
  --n-100: #F1F3F9;
  --n-200: #E4E8F0;
  --n-300: #D2D8E4;
  --n-400: #9AA4B8;
  --n-500: #6C7789;
  --n-600: #4E5867;
  --n-700: #3A424E;
  --n-800: #252B34;
  --n-900: #171B22;
  --n-950: #0E1116;

  /* ── Brand ramp — one hue, anchored on the logo navy at 900 ──────────── */
  --navy-50:  #EEF2FC;
  --navy-100: #DCE4F8;
  --navy-200: #BBC9F1;
  --navy-300: #8FA6E5;
  --navy-400: #6180D6;   /* accent on dark — 4.8:1 on --surface */
  --navy-500: #3D5FC4;   /* focus ring — 5.8:1 on white */
  --navy-600: #2D4AA8;   /* accent on light — 7.9:1 on white */
  --navy-700: #233C89;
  --navy-800: #1A2E6B;
  --navy-900: #0B1F52;   /* ← the logo navy */
  --navy-950: #071335;

  /* ── Surfaces (light) ────────────────────────────────────────────────── */
  --bg-base: #F6F7FA;
  --surface: #FFFFFF;
  --surface-raised: var(--n-50);
  --surface-muted: var(--n-100);
  --surface-sunken: var(--n-200);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --border-soft: rgba(23, 27, 34, 0.08);

  /* ── Text (light) ────────────────────────────────────────────────────── */
  --text-primary: #171B22;     /* neutral ink, 16.1:1 — navy is for accents */
  --text-secondary: #4E5867;   /* 8.1:1 on white */
  --text-muted: #6C7789;       /* 4.9:1 on white */
  --text-inverse: #FFFFFF;

  /* ── Brand aliases (kept stable so every component keeps working) ─────── */
  --brand-navy: var(--navy-900);
  --brand-navy-2: var(--navy-800);
  --brand-navy-3: var(--navy-700);
  --brand-indigo: var(--navy-600);
  --brand-accent: var(--navy-600);
  --brand-accent-2: var(--navy-500);
  --brand-accent-soft: var(--navy-50);
  --brand-accent-text: var(--navy-600);
  /* Legacy teal/cyan/gold names all resolve into the single brand ramp — one
     swap re-skins every rule that still calls them, with no missed selector. */
  --accent-teal: var(--navy-600);
  --accent-cyan: var(--navy-500);
  --brand-teal: var(--navy-600);
  --brand-teal-2: var(--navy-700);
  --brand-cyan: var(--navy-600);
  --brand-cyan-2: var(--navy-700);
  --gold-50:  var(--navy-50);
  --gold-100: var(--navy-50);
  --gold-200: var(--navy-100);
  --gold-300: var(--navy-300);
  --gold-400: var(--navy-400);
  --gold-500: var(--navy-600);
  --gold-600: var(--navy-700);
  --gold-700: var(--navy-600);
  --gold-800: var(--navy-800);
  --gold-900: var(--navy-900);
  --accent-glow: rgba(61, 95, 196, 0.24);
  --accent-tint: rgba(45, 74, 168, 0.055);
  --accent-tint-strong: rgba(45, 74, 168, 0.10);

  /* ── Status ──────────────────────────────────────────────────────────── */
  --success: #0E7C58;
  --success-soft: #D7F2E5;
  --success-hover: #0A6446;
  --warning: #B45309;
  --warning-soft: #FBEBCF;
  --danger: #C42B2B;
  --danger-soft: #FBE0E0;
  --danger-hover: #A32222;
  --info: #1D4FD8;
  --info-soft: #E1E9FE;
  --purple: #6941C6;
  --purple-soft: #EFEAFC;

  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  /* Flat. The previous build layered two radial washes behind every page;
     they added nothing a reader could use and were the loudest ornament in
     the app. A plain neutral ground lets the cards define the structure. */
  --bg-wash: none;
  /* Chrome is near-black neutral with a navy undertone — not a saturated
     brand slab. Same reason a Vercel or Linear sidebar is grey, not brand. */
  --sidebar-bg: #12151C;
  --sidebar-edge: rgba(255, 255, 255, 0.08);
  --sidebar-text: rgba(255, 255, 255, 0.72);
  --sidebar-text-dim: rgba(255, 255, 255, 0.38);
  --sidebar-active-bg: rgba(255, 255, 255, 0.07);
  --skeleton-sheen: rgba(255, 255, 255, 0.72);

  /* ── Elevation. Light = shadows; dark swaps these for luminance steps. ── */
  --shadow-subtle: 0 1px 2px rgba(11, 31, 82, 0.06);
  --shadow-soft: 0 1px 2px rgba(11, 31, 82, 0.05), 0 2px 8px rgba(11, 31, 82, 0.05);
  --shadow-card: 0 2px 6px rgba(11, 31, 82, 0.07), 0 8px 20px rgba(11, 31, 82, 0.07);
  --shadow-float: 0 8px 20px rgba(11, 31, 82, 0.10), 0 20px 44px rgba(11, 31, 82, 0.12);
  --shadow-popover: 0 8px 28px rgba(11, 31, 82, 0.16);
  --shadow-modal: 0 24px 64px rgba(5, 13, 36, 0.24);
  --shadow-glow-teal: 0 6px 18px var(--accent-glow);   /* legacy name */
  --shadow-glow-accent: 0 6px 18px var(--accent-glow);
  --ring: 0 0 0 3px var(--accent-glow);
  --focus-ring: var(--navy-600);

  /* ── Glass ───────────────────────────────────────────────────────────── */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --surface-glass: rgba(255, 255, 255, 0.74);
  --glass-border: rgba(255, 255, 255, 0.62);
  --glass-dark-bg: rgba(255, 255, 255, 0.07);
  --glass-dark-border: rgba(255, 255, 255, 0.13);
  --glass-shadow: 0 8px 30px rgba(11, 31, 82, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --blur-glass: blur(18px) saturate(150%);
  --glass-blur: 16px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --r-4: 6px;
  --r-6: 8px;
  --r-8: 10px;
  --r-10: 12px;
  --r-12: 14px;
  --r-16: 18px;
  --r-20: 22px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── Motion (Material 3 easing/duration tokens) ──────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-out: var(--ease-standard);        /* legacy alias */
  --dur-1: 100ms;
  --dur-2: 150ms;
  --dur-3: 200ms;
  --dur-4: 260ms;
  --dur-5: 340ms;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --sidebar-width: 272px;
  --sidebar-collapsed-width: 76px;
  --sidebar-w: var(--sidebar-width);
  --topbar-h: 64px;

  /* ── Type ────────────────────────────────────────────────────────────── */
  --font-en: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --font-ar: "Cairo", "Tajawal", system-ui, sans-serif;
  --font: var(--font-en);
  --font-num: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  /* Legacy names still referenced by older rules */
  --bg-app: var(--bg-base);
  --bg-glass: var(--glass-bg);
  --bg-glass-strong: var(--glass-bg-strong);
  --glass-white: rgba(255, 255, 255, 0.82);
  --glass-surface: rgba(248, 250, 252, 0.72);
  --navy-glow: rgba(11, 31, 82, 0.12);
  --border-glass: rgba(255, 255, 255, 0.55);
  --shadow-glow: 0 0 0 3px rgba(11, 31, 82, 0.08);
  --stat-icon-bg: var(--gold-100);
  --dest-bg: var(--surface-muted);
}

/* ═══ DARK THEME ═══════════════════════════════════════════════════════════
   Four surface levels, each ~6% lighter than the last and tinted toward navy,
   because drop shadows carry no signal on dark ground — luminance does.
   Text is off-white (#E8ECF5), never #FFF, to keep glare down over long ops
   shifts. Gold lightens to --gold-400 so it holds its perceptual weight.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-base: #0B0D12;          /* L0 — app ground */
  --surface: #12151C;          /* L1 — cards, panels, sidebar */
  --surface-raised: #191D26;   /* L2 — nested cards, table heads, hover */
  --surface-muted: #212630;    /* L2.5 — chips, inset wells */
  --surface-sunken: #0E1116;
  --border: #262B35;
  --border-strong: #363D49;
  --border-soft: rgba(255, 255, 255, 0.07);

  --text-primary: #E9EBEF;     /* 15.0:1 on --surface */
  --text-secondary: #A8AFBC;   /* 8.3:1 */
  --text-muted: #7B838F;       /* 4.9:1 */
  --text-inverse: #0B0D12;

  /* Same hue, raised until it carries on a dark ground. */
  --brand-navy: #0B0D12;
  --brand-navy-2: #161A22;
  --brand-navy-3: var(--navy-500);
  --brand-indigo: var(--navy-400);
  --brand-accent: var(--navy-400);
  --brand-accent-2: var(--navy-300);
  --brand-accent-soft: rgba(97, 128, 214, 0.14);
  --brand-accent-text: #8FA6E5;
  --accent-teal: var(--navy-400);
  --accent-cyan: var(--navy-300);
  --brand-teal: var(--navy-400);
  --brand-teal-2: #8FA6E5;
  --brand-cyan: var(--navy-400);
  --brand-cyan-2: #8FA6E5;
  --gold-50:  rgba(97, 128, 214, 0.14);
  --gold-100: rgba(97, 128, 214, 0.14);
  --gold-200: var(--navy-800);
  --gold-300: var(--navy-300);
  --gold-400: var(--navy-400);
  --gold-500: var(--navy-400);
  --gold-600: var(--navy-500);
  --gold-700: #8FA6E5;
  --gold-800: var(--navy-700);
  --gold-900: var(--navy-800);
  --accent-glow: rgba(97, 128, 214, 0.28);
  --accent-tint: rgba(97, 128, 214, 0.08);
  --accent-tint-strong: rgba(97, 128, 214, 0.16);

  --success: #34D399;
  --success-soft: rgba(52, 211, 153, 0.16);
  --success-hover: #10B981;
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, 0.16);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.16);
  --danger-hover: #EF4444;
  --info: #60A5FA;
  --info-soft: rgba(96, 165, 250, 0.16);
  --purple: #A78BFA;
  --purple-soft: rgba(167, 139, 250, 0.16);

  /* On dark the sidebar can't out-darken the page, so it goes the other way:
     one step lighter than the ground, which is how elevation reads here. */
  --bg-wash: none;
  --sidebar-bg: #12151C;
  --sidebar-edge: rgba(255, 255, 255, 0.07);
  --sidebar-text: rgba(233, 235, 239, 0.74);
  --sidebar-text-dim: rgba(233, 235, 239, 0.38);
  --sidebar-active-bg: rgba(255, 255, 255, 0.06);
  --skeleton-sheen: rgba(255, 255, 255, 0.05);

  /* Shadows stay, but shallow — they add contact, not elevation. */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.32);
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.44), 0 10px 24px rgba(0, 0, 0, 0.34);
  --shadow-float: 0 10px 24px rgba(0, 0, 0, 0.50), 0 24px 52px rgba(0, 0, 0, 0.42);
  --shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 28px 70px rgba(0, 0, 0, 0.66);
  --shadow-glow-teal: 0 6px 20px var(--accent-glow);
  --shadow-glow-accent: 0 6px 20px var(--accent-glow);
  --focus-ring: var(--gold-400);

  --glass-bg: rgba(22, 32, 54, 0.72);
  --glass-bg-strong: rgba(22, 32, 54, 0.90);
  --surface-glass: rgba(22, 32, 54, 0.74);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-white: rgba(22, 32, 54, 0.82);
  --glass-surface: rgba(14, 21, 38, 0.72);
  --border-glass: rgba(255, 255, 255, 0.10);
  --navy-glow: rgba(0, 0, 0, 0.5);
  --stat-icon-bg: var(--accent-tint-strong);
  --dest-bg: var(--surface-raised);
}

html[lang="ar"] {
  --font: var(--font-ar);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background-color: var(--bg-base);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Keyboard accessibility: visible focus ring for interactive controls */
.btn:focus-visible,
.nav-item:focus-visible,
.icon-button:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible,
.pager button:focus-visible,
.link-btn:focus-visible,
.sort-btn:focus-visible,
.lang-toggle button:focus-visible,
a.btn:focus-visible {
  outline: 2px solid var(--brand-navy-3);
  outline-offset: 2px;
}

.sidebar .nav-item:focus-visible {
  outline-color: var(--brand-accent);
  outline-offset: -2px;
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  overflow-y: auto;
  background:
    radial-gradient(130% 70% at 0% 0%, var(--accent-tint-strong) 0%, transparent 48%),
    linear-gradient(180deg, var(--brand-navy-2), var(--brand-navy));
  color: #fff;
  z-index: 40;
  display: flex;
  flex-direction: column;
}

[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
}

.main-content {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  padding-top: var(--topbar-h);
}

[dir="rtl"] .main-content {
  margin-left: 0;
  margin-right: var(--sidebar-w);
}

.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  height: var(--topbar-h);
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-subtle);
  backdrop-filter: blur(10px);
}

[dir="rtl"] .topbar {
  left: 0;
  right: var(--sidebar-w);
}

.brand-block {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--r-8);
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  background: var(--brand-accent);
  color: var(--brand-navy);
  font-weight: 800;
  box-shadow: 0 8px 18px var(--accent-glow);
}

/* Real logo image in sidebar / login */
.brand-logo {
  height: 28px;
  width: auto;
  max-width: calc(var(--sidebar-w) - 60px);
  flex: 1 1 auto;
  min-width: 0;
  object-fit: contain;
  object-position: left center;
}

.login-logo-img {
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
}

.brand-name {
  font-size: 13px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.brand-sub {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

html[lang="ar"] .brand-name,
html[lang="ar"] .brand-sub {
  letter-spacing: 0;
}

.tier-chip,
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: var(--r-4);
  background: var(--accent-tint-strong);
  color: var(--brand-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-scroll {
  flex: 1;
  padding: 10px 8px 16px;
}

.nav-group {
  margin-top: 8px;
}

.nav-label {
  padding: 10px 10px 6px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[lang="ar"] .nav-label {
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--r-8);
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 600;
  text-align: start;
  transition: background 140ms ease, color 140ms ease;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--brand-accent);
}

[dir="rtl"] .nav-item.active::before {
  left: auto;
  right: -8px;
  border-radius: 4px 0 0 4px;
}

.nav-item i,
.nav-item svg,
.icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.nav-count {
  margin-inline-start: auto;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-accent);
  color: var(--brand-navy);
  font-size: 10px;
  font-weight: 800;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.account-mini {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.06);
}

.avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-8);
  background: var(--brand-accent);
  color: var(--brand-navy);
  font-size: 12px;
  font-weight: 800;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-name {
  font-size: 12px;
  font-weight: 800;
}

.account-role {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
}

.breadcrumb {
  min-width: 190px;
}

.breadcrumb-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.breadcrumb-title {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 800;
}

.topbar-spacer {
  flex: 1;
}

.quick-search {
  width: min(420px, 34vw);
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface-raised);
  color: var(--text-muted);
}

.quick-search:focus-within {
  border-color: var(--focus-ring);
  background: var(--surface);
}

.quick-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL SEARCH RESULTS
   The top-bar box searches bookings, invoices, quotes, clients and
   hotels; its results drop beneath the field. Anchored with logical
   offsets so it hangs off the correct edge in Arabic too.
   ═══════════════════════════════════════════════════════════ */

.quick-search { position: relative; }

.gs-results {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 120;
  width: 100%;
  min-width: 320px;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-10);
  background: var(--surface);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(11, 31, 82, 0.16));
}

.gs-group {
  padding: 8px 10px 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[lang="ar"] .gs-group { text-transform: none; letter-spacing: 0; }

.gs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  text-align: start;
  cursor: pointer;
}

.gs-item:hover,
.gs-item.active {
  background: var(--surface-raised);
}

.gs-item svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--brand-accent);
}

.gs-item-text { min-width: 0; flex: 1; }

.gs-item-title {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-item-sub {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon font unreachable (blocked CDN / CSP / offline): collapse the icon
   elements so buttons fall back to their text label instead of showing an
   empty box where the glyph should be. Every icon in this portal sits beside
   a real label or an aria-label, so nothing becomes unreachable. */
html.icons-unavailable [data-icon],
html.icons-unavailable i.ph {
  display: none !important;
}

/* Pulse the row a search result points at, so the eye lands on it. */
@keyframes rowFlash {
  0%, 100% { background: transparent; }
  20%, 60% { background: var(--brand-accent-soft); }
}

.row-flash {
  animation: rowFlash 1.8s ease;
}

.gs-empty {
  padding: 16px 12px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 720px) {
  .gs-results { min-width: 0; }
}

.quick-search kbd {
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
}

.wallet-pill,
.refresh-pill {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(4, 120, 87, 0.24);
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-weight: 800;
  white-space: nowrap;
}

.refresh-pill {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  color: var(--text-muted);
}

.icon-button:hover,
.icon-button.active {
  border-color: var(--border);
  background: var(--surface-raised);
  color: var(--brand-navy-2);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
}

.lang-toggle button {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.lang-toggle button.active {
  background: var(--brand-navy-2);
  color: #fff;
}

.page-wrap {
  width: min(100%, 1480px);
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.page-kicker {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[lang="ar"] .page-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.page-title {
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
}

.page-subtitle {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.page-actions,
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

[dir="rtl"] .page-actions,
[dir="rtl"] .toolbar-actions {
  justify-content: flex-start;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface);
  box-shadow: var(--shadow-subtle);
  transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.stat-ico {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-8);
  background: var(--surface-muted);
  color: var(--brand-navy-2);
}

.stat-ico svg {
  width: 16px;
  height: 16px;
}

.stat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.stat-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

html[lang="ar"] .stat-label {
  text-transform: none;
}

.stat-value {
  margin-top: 8px;
  color: var(--text-primary);
  font-size: 24px;
  line-height: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.stat-sub {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--r-4);
  background: var(--success-soft);
  color: var(--success);
  font-size: 10px;
  font-weight: 800;
}

.trend.down {
  background: var(--danger-soft);
  color: var(--danger);
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr);
  gap: 16px;
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

.panel-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.panel-title {
  font-size: 15px;
  font-weight: 800;
}

.panel-subtitle {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 12px;
}

.panel-body {
  padding: 16px;
}

.workbench {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

[dir="rtl"] .workbench {
  grid-template-columns: minmax(0, 1fr) 236px;
}

[dir="rtl"] .filter-rail {
  grid-column: 2;
}

[dir="rtl"] .workbench-main {
  grid-column: 1;
  grid-row: 1;
}

.filter-rail {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

.filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 800;
}

.filter-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.field {
  display: grid;
  gap: 5px;
}

.field label,
.form-field label {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.required {
  color: var(--danger);
}

/* Request Form Builder — dynamic field helpers */
.rf-help {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.rf-price {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand-navy-2);
  padding: 8px 0;
}

.rf-ages > label {
  display: block;
  margin-bottom: 6px;
}

.input,
.select,
.textarea,
.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  background: var(--surface);
  color: var(--text-primary);
  outline: 0;
}

.textarea,
.field textarea,
.form-field textarea {
  min-height: 76px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--brand-navy-3);
  box-shadow: 0 0 0 3px rgba(36, 56, 132, 0.1);
}

.help-text,
.error-text {
  color: var(--text-muted);
  font-size: 11px;
}

.error-text {
  color: var(--danger);
}

.btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-4);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.btn i,
.btn svg {
  width: 15px;
  height: 15px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand-navy-3) 0%, var(--brand-navy) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(15,27,71,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
  border-radius: inherit;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-navy-2) 0%, var(--brand-navy) 100%);
  box-shadow: 0 4px 14px rgba(15,27,71,0.32), inset 0 1px 0 rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(15,27,71,0.2);
}

.request-cta {
  min-height: 42px;
  padding: 0 16px;
  border-radius: var(--r-8);
  letter-spacing: 0;
  box-shadow: 0 8px 20px rgba(15, 27, 71, 0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}

.request-cta svg {
  width: 17px;
  height: 17px;
}

.request-cta-sm {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--r-6);
  box-shadow: 0 4px 12px rgba(15, 27, 71, 0.14), inset 0 1px 0 rgba(255,255,255,0.12);
}

.btn-teal {
  background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-cyan) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 3px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.18);
}

.btn-teal:hover {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  box-shadow: 0 4px 14px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

.btn-outline {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
}

.btn-outline:hover {
  border-color: var(--brand-navy-3);
  color: var(--brand-navy-2);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-muted {
  background: var(--surface-raised);
  color: var(--text-secondary);
}

.btn-icon {
  width: 30px;
  min-height: 30px;
  padding: 0;
}

.table-card {
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
}

.table-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.bulk-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--info-soft);
  color: var(--brand-navy-2);
  font-weight: 800;
}

.bulk-bar.show {
  display: flex;
}

.table-scroll {
  max-width: 100%;
  overflow: auto;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

html[lang="ar"] .data-table thead th {
  text-transform: none;
  letter-spacing: 0;
}

.data-table tbody td {
  height: 44px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table tbody tr:hover td {
  background: var(--accent-tint);
}

.data-table tbody tr.selected td {
  background: var(--accent-tint-strong);
}

.data-table .numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: inherit;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-pending,
.badge-unpaid,
.badge-warning,
.badge-submitted,
.badge-under_review {
  background: var(--warning-soft);
  color: var(--warning);
}

.badge-confirmed,
.badge-paid,
.badge-approved,
.badge-active,
.badge-success,
.badge-completed {
  background: var(--success-soft);
  color: var(--success);
}

.badge-cancelled,
.badge-rejected,
.badge-overdue,
.badge-inactive,
.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-info,
.badge-ticketed {
  background: var(--info-soft);
  color: var(--info);
}

.badge-standard {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.badge-silver {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.badge-teal {
  background: var(--brand-accent-soft);
  color: var(--brand-cyan-2);
}

.badge-platinum {
  background: var(--purple-soft);
  color: var(--purple);
}

.company-cell {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.logo-cell {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-raised);
  color: var(--brand-navy-2);
  font-weight: 900;
}

.logo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.primary-text {
  color: var(--text-primary);
  font-weight: 900;
}

.secondary-text {
  color: var(--text-muted);
  font-size: 11.5px;
}

.table-foot {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

.pager {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pager button {
  min-width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 800;
}

.pager button.active {
  border-color: var(--brand-navy-2);
  background: var(--brand-navy-2);
  color: #fff;
}

.empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 32px;
  color: var(--text-muted);
  text-align: center;
}

.empty-illustration {
  width: 64px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background:
    linear-gradient(90deg, transparent 0 18%, var(--accent-tint-strong) 18% 22%, transparent 22% 100%),
    linear-gradient(var(--surface-raised), var(--surface));
  box-shadow: var(--shadow-subtle);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-muted);
  border-radius: var(--r-4);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent);
  animation: shimmer 1.2s infinite;
}

[dir="rtl"] .skeleton::after {
  animation-name: shimmer-rtl;
}

@keyframes shimmer {
  to { transform: translateX(100%); }
}

@keyframes shimmer-rtl {
  to { transform: translateX(-100%); }
}

/* Button submit spinner */
.btn-spin svg {
  animation: btnspin 0.7s linear infinite;
}

@keyframes btnspin {
  to { transform: rotate(360deg); }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 40, 0.55);
  backdrop-filter: blur(3px);
}

.modal-overlay.open {
  display: flex;
}

.modal {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-12);
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.modal.modal-wide {
  width: min(1040px, calc(100vw - 32px));
}

.modal-header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 16px;
  font-weight: 900;
}

.modal-body {
  padding: 18px;
  overflow: auto;
}

.modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

[dir="rtl"] .modal-footer {
  justify-content: flex-start;
}

.form-section {
  margin-bottom: 16px;
}

.form-section-title {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 900;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface-raised);
}

.tab {
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--r-4);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.tab.active {
  background: var(--surface);
  color: var(--brand-navy-2);
  box-shadow: var(--shadow-subtle);
}

.detail-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}

.detail-tabs .tab {
  border-radius: var(--r-4) var(--r-4) 0 0;
}

.detail-pane {
  display: none;
}

.detail-pane.active {
  display: block;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.info-item {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface-raised);
}

.info-label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.info-value {
  margin-top: 3px;
  color: var(--text-primary);
  font-weight: 900;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  max-width: 420px;
  display: none;
  padding: 12px 14px;
  border-radius: var(--r-8);
  background: var(--brand-navy-2);
  color: #fff;
  box-shadow: var(--shadow-popover);
  font-weight: 800;
}

[dir="rtl"] .toast {
  right: auto;
  left: 24px;
}

.toast.show {
  display: block;
}

.toast.success {
  background: var(--success);
}

.toast.error {
  background: var(--danger);
}

.toast.warning {
  background: var(--warning);
}

.hidden {
  display: none !important;
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background:
    linear-gradient(115deg, rgba(12, 30, 66, 0.94), rgba(12, 30, 66, 0.74)),
    url("https://images.unsplash.com/photo-1539650116574-75c0c6d73f6e?auto=format&fit=crop&w=1800&q=80") center/cover;
}

.login-shell {
  width: min(1040px, 100%);
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-16);
  overflow: hidden;
  box-shadow: var(--shadow-modal);
  background: rgba(255, 255, 255, 0.08);
}

.login-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 40px;
  color: #fff;
  background: linear-gradient(145deg, rgba(12, 30, 66, 0.62), rgba(12, 30, 66, 0.18));
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-brand strong,
.login-brand span {
  display: block;
}

.login-brand strong {
  font-size: 15px;
  font-weight: 900;
}

.login-brand span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
}

.login-brand .brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-8);
  background: var(--brand-accent);
  color: var(--brand-navy);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.login-copy {
  max-width: 560px;
}

.login-copy h1 {
  margin: 0 0 12px;
  font-size: 42px;
  line-height: 50px;
}

.login-copy p:last-child {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 24px;
}

.login-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.login-metrics div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.1);
}

.login-metrics strong,
.login-metrics span {
  display: block;
}

.login-metrics strong {
  font-size: 22px;
  line-height: 28px;
}

.login-metrics span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11.5px;
  font-weight: 800;
}

.login-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 36px;
  background: var(--surface);
}

.login-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.login-card-head h2 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
}

.login-foot {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 18px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form-row.between {
  justify-content: space-between;
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.check-row input {
  accent-color: var(--brand-navy-2);
}

.link-btn {
  border: 0;
  background: transparent;
  color: var(--brand-navy-2);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.input-action {
  position: relative;
  display: block;
}

.input-action input {
  padding-inline-end: 42px;
}

.input-action .icon-btn {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.field-error {
  min-height: 16px;
  color: var(--danger);
  font-size: 11.5px;
  font-weight: 800;
}

.btn-block {
  width: 100%;
}

.login-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(140deg, rgba(15, 27, 71, 0.2), rgba(15, 27, 71, 0.92)),
    url("https://images.unsplash.com/photo-1553913861-c0fddf2619ee?auto=format&fit=crop&w=1600&q=80") center/cover;
}

.login-art-card {
  max-width: 560px;
}

.login-art h1 {
  margin: 0;
  font-size: 38px;
  line-height: 46px;
}

.login-art p {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.76);
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.login-title {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 900;
}

.login-subtitle {
  margin: 0 0 24px;
  color: var(--text-muted);
}

.login-form {
  display: grid;
  gap: 14px;
}

.alert {
  display: none;
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: var(--r-8);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 800;
}

.alert.show {
  display: block;
}

.mobile-menu {
  display: none;
}

.sidebar-close,
.sidebar-backdrop {
  display: none;
}

@media (max-width: 1180px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  [dir="rtl"] .filter-rail,
  [dir="rtl"] .workbench-main {
    grid-column: auto;
    grid-row: auto;
  }

  .filter-rail {
    position: static;
  }
}

@media (max-width: 860px) {
  :root {
    --sidebar-w: 0px;
    --topbar-h: 108px;
  }

  .sidebar {
    transform: translateX(-100%);
    width: min(280px, 86vw);
    transition: transform 180ms ease;
    z-index: 90;
    box-shadow: var(--shadow-popover);
  }

  [dir="rtl"] .sidebar {
    transform: translateX(100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  body.sidebar-open {
    overflow: hidden;
  }

  .sidebar-close {
    display: inline-grid;
    margin-inline-start: auto;
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.82);
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(15, 27, 71, 0.52);
    transition: opacity 180ms ease;
  }

  .sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar {
    left: 0;
    right: 0;
    height: var(--topbar-h);
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }

  [dir="rtl"] .topbar {
    left: 0;
    right: 0;
  }

  .main-content {
    margin-left: 0;
    margin-right: 0;
  }

  .mobile-menu {
    display: inline-grid;
  }

  .breadcrumb {
    display: none;
  }

  .quick-search {
    order: 10;
    width: 100%;
    flex: 0 0 100%;
    height: 36px;
  }

  .quick-search kbd {
    display: none;
  }

  .topbar-spacer {
    display: none;
  }

  .wallet-pill {
    height: 34px;
    margin-inline-start: auto;
    padding: 0 9px;
    gap: 5px;
    font-size: 12px;
  }

  .wallet-pill span,
  .refresh-pill {
    display: none;
  }

  .lang-toggle {
    height: 34px;
  }

  .lang-toggle button {
    height: 26px;
    padding: 0 8px;
  }

  .topbar-actions {
    gap: 2px;
  }

  .topbar-actions .icon-button {
    width: 34px;
    height: 34px;
  }

  .page-wrap {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    overflow-x: hidden;
  }

  .page-header {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  .page-title {
    font-size: 21px;
    line-height: 28px;
  }

  .page-subtitle {
    font-size: 12px;
  }

  .page-actions,
  .toolbar-actions {
    width: 100%;
    justify-content: stretch;
  }

  .page-actions .btn,
  .toolbar-actions .btn {
    flex: 1 1 auto;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  .stat-card {
    min-height: 92px;
    padding: 10px;
  }

  .stat-label,
  .stat-sub {
    font-size: 10.5px;
  }

  .stat-value {
    margin-top: 6px;
    font-size: 19px;
    line-height: 25px;
  }

  .grid-2,
  .workbench {
    gap: 12px;
  }

  .panel-header,
  .table-toolbar {
    display: grid;
    align-items: start;
    gap: 8px;
    min-height: auto;
    padding: 10px 12px;
  }

  .panel-body {
    padding: 12px;
  }

  .filter-head,
  .filter-body {
    padding: 10px 12px;
  }

  .filter-body {
    gap: 10px;
  }

  .table-card,
  .panel,
  .filter-rail {
    border-radius: var(--r-8);
  }

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    min-width: 760px;
  }

  .data-table thead th {
    height: 36px;
    padding: 0 8px;
  }

  .data-table tbody td {
    height: 42px;
    padding: 6px 8px;
  }

  .table-foot {
    display: grid;
    justify-content: stretch;
    gap: 8px;
  }

  .pager {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .bulk-bar.show {
    display: grid;
    grid-template-columns: 1fr;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 8px;
  }

  .modal,
  .modal.modal-wide {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: var(--r-12) var(--r-12) 0 0;
  }

  .modal-header {
    min-height: 50px;
    padding: 12px 14px;
  }

  .modal-body {
    padding: 14px;
  }

  .modal-footer {
    flex-wrap: wrap;
    justify-content: stretch;
    padding: 10px 14px;
  }

  [dir="rtl"] .modal-footer {
    justify-content: stretch;
  }

  .modal-footer .btn {
    flex: 1 1 140px;
  }

  .tabs,
  .detail-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .form-grid,
  .info-grid {
    grid-template-columns: 1fr;
  }

  .login-page {
    padding: 16px;
  }

  .login-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    max-width: 480px;
  }

  .login-panel {
    order: 2;
    padding: 28px;
    gap: 28px;
  }

  .login-card {
    order: 1;
    padding: 28px;
  }

  .login-copy h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .login-metrics {
    grid-template-columns: 1fr;
  }

  .login-art {
    min-height: 280px;
    order: -1;
  }

  .login-art h1 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media (max-width: 640px) {
  :root {
    --topbar-h: 104px;
  }

  body {
    font-size: 12.5px;
  }

  .topbar {
    padding: 7px 10px;
  }

  .topbar-actions {
    display: none;
  }

  .wallet-pill strong {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .icon-button {
    width: 34px;
    height: 34px;
  }

  .page-wrap {
    padding: 10px;
  }

  .page-title {
    font-size: 20px;
    line-height: 26px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .btn {
    min-height: 34px;
    padding: 0 10px;
  }

  .table-toolbar .toolbar-actions,
  .page-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .table-toolbar .toolbar-actions .btn,
  .page-actions .btn {
    width: 100%;
  }

  .data-table {
    min-width: 720px;
    font-size: 12px;
  }

  .login-page {
    min-height: 100dvh;
    align-items: stretch;
    padding: 0;
    background: var(--surface-muted);
  }

  .login-shell {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }

  .login-panel {
    display: none;
  }

  .login-card {
    justify-content: flex-start;
    gap: 18px;
    padding: 28px 18px 22px;
  }

  .login-card-head h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .form-row.between {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 420px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .table-toolbar .toolbar-actions,
  .page-actions {
    grid-template-columns: 1fr;
  }

  .wallet-pill {
    max-width: 150px;
  }

  .wallet-pill strong {
    max-width: 78px;
  }

  .login-card {
    padding-inline: 16px;
  }
}

/* ─── Destination cards (hotels first-step) ───────────────────────────────── */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.dest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-12);
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms, box-shadow 160ms, transform 120ms;
  min-height: 120px;
}

.dest-card:hover {
  border-color: var(--brand-navy-3);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.dest-card:active {
  transform: translateY(0);
}

.dest-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--info-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--info);
}

.dest-card-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--info-soft);
  flex-shrink: 0;
}

.dest-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dest-card-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.3;
}

.dest-card-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.dest-card-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ─── Hotel gallery ───────────────────────────────────────────────────────── */
.hotel-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
}

.hotel-gallery a {
  display: block;
  border-radius: var(--r-8);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.hotel-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms;
}

.hotel-gallery a:hover img {
  transform: scale(1.05);
}

/* ─── Offer popup enhancements ────────────────────────────────────────────── */
.modal-overlay.open .modal {
  animation: modalSlideIn 200ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── SIM card package cards ─────────────────────────────────────────────── */
.stat-card {
  transition: box-shadow 150ms, transform 130ms;
}

.stat-card:hover {
  box-shadow: var(--shadow-card);
}

/* ─── Mobile destination grid ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .dest-card {
    min-height: 100px;
    padding: 14px 8px;
  }

  .dest-card-icon {
    width: 36px;
    height: 36px;
  }
}

/* ============================================================
   UI/UX polish — glassmorphism + micro-animations
   (tasteful for dense B2B; honors prefers-reduced-motion)
   ============================================================ */

/* — Refined glass surfaces — */
.topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

.modal-overlay {
  background: rgba(16, 24, 40, 0.42);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

.wallet-pill,
.refresh-pill,
.lang-toggle {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Glassy frosted header strip inside modals */
.modal-header {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.65));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-footer {
  background: linear-gradient(0deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.82));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* — Hotel gallery grid (admin review + agent detail) — */
.hotel-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}

.hotel-gallery img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-8);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.hotel-gallery a:hover img {
  transform: translateY(-2px) scale(1.02);
  border-color: var(--brand-navy-3);
  box-shadow: var(--shadow-card);
}

.hotel-media-showcase {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.hotel-media-main-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100%, 100%);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  border-radius: var(--r-12);
}

.hotel-media-slide {
  display: block;
  height: 220px;
  border-radius: var(--r-12);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.hotel-media-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hotel-media-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.hotel-media-thumbs a {
  display: block;
  width: 72px;
  height: 54px;
  border-radius: var(--r-8);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.hotel-media-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 160ms ease;
}

.hotel-media-thumbs a:hover img {
  transform: scale(1.06);
}

.hotel-media-empty {
  height: 150px;
  border-radius: var(--r-12);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--brand-cyan), var(--brand-indigo));
}

/* — Micro-animations — */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .stat-card,
  .panel,
  .table-card,
  .filter-rail {
    animation: fadeInUp 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .modal-overlay.open {
    animation: overlayIn 160ms ease;
  }

  .modal-overlay.open .modal {
    animation: modalIn 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .toast.show {
    animation: toastIn 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .data-table tbody tr {
    transition: background 140ms ease;
  }

  /* Tactile press feedback — transform only, never shifts layout bounds */
  .btn:active,
  .icon-button:active,
  .nav-item:active,
  .pager button:active {
    transform: translateY(1px);
  }

  .btn,
  .icon-button,
  .pager button {
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease, box-shadow 140ms ease;
  }

  .btn-primary:hover,
  .btn-teal:hover,
  .btn-success:hover,
  .btn-danger:hover {
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .panel,
  .table-card,
  .filter-rail,
  .modal-overlay.open,
  .modal-overlay.open .modal,
  .toast.show {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM B2B REFINEMENTS — layered on top of base styles
   ═══════════════════════════════════════════════════════════ */

/* Token block removed — these are now defined once, theme-aware, in the design
   system at the top of this file. Re-declaring them here would pin them to
   light-mode values and break the dark theme. */

/* ─── Topbar refinement ────────────────────────────────────── */
.topbar {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.94) 0%,
    rgba(248,250,252,0.88) 100%);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter:          saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(216, 222, 234, 0.7);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9), var(--shadow-subtle);
}

/* ─── Sidebar accent line ──────────────────────────────────── */
.sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--accent-glow) 0%, transparent 40%);
  pointer-events: none;
}

/* ─── Stat cards ───────────────────────────────────────────── */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: 16px 18px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-subtle);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 60%, var(--accent-tint) 100%);
  pointer-events: none;
}

.stat-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-float);
  transform: translateY(-2px);
}

.stat-ico {
  background: var(--stat-icon-bg);
  border-radius: var(--r-8);
  border: 1px solid rgba(23, 92, 211, 0.08);
  width: 32px;
  height: 32px;
}

/* ─── Destination cards ─────────────────────────────────────── */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.dest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-12);
  cursor: pointer;
  text-align: center;
  transition: border-color 180ms, box-shadow 180ms, transform 140ms;
  min-height: 130px;
  overflow: hidden;
}

.dest-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-navy-2), var(--brand-accent));
  opacity: 0;
  transition: opacity 200ms;
}

.dest-card:hover {
  border-color: var(--brand-navy-3);
  box-shadow: var(--shadow-float);
  transform: translateY(-3px);
}

.dest-card:hover::before {
  opacity: 1;
}

.dest-card:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.dest-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--info-soft), rgba(23,92,211,0.10));
  border: 1px solid rgba(23, 92, 211, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--info);
  margin-bottom: 10px;
  flex-shrink: 0;
}

.dest-card-icon svg {
  width: 20px;
  height: 20px;
}

.dest-card-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
}

.dest-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.dest-card-count {
  font-size: 11px;
  color: var(--brand-navy-3);
  font-weight: 700;
  background: var(--info-soft);
  border-radius: var(--r-20);
  padding: 2px 9px;
  margin-top: 4px;
}

.dest-card.has-bg {
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 164px;
  padding: 18px;
  text-align: left;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(5, 19, 54, 0.10) 0%, rgba(5, 19, 54, 0.78) 72%, rgba(5, 19, 54, 0.90) 100%),
    var(--dest-bg) center / cover no-repeat;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-card);
}

[dir="rtl"] .dest-card.has-bg {
  text-align: right;
}

.dest-card.has-bg::before {
  height: 100%;
  opacity: 1;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.25), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,0.16), transparent 42%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.dest-card.has-bg:hover {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 16px 36px rgba(8, 18, 44, 0.22);
}

.dest-card.has-bg .dest-card-media {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  margin: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
}

[dir="rtl"] .dest-card.has-bg .dest-card-media {
  right: auto;
  left: 14px;
}

.dest-card.has-bg .dest-card-name,
.dest-card.has-bg .dest-card-sub {
  position: relative;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.dest-card.has-bg .dest-card-name {
  max-width: calc(100% - 40px);
  font-size: 15px;
}

.dest-card.has-bg .dest-card-count {
  position: relative;
  color: #fff;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
}

/* ─── Info grid items ───────────────────────────────────────── */
.info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-muted);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[lang="ar"] .info-label {
  text-transform: none;
  letter-spacing: 0;
}

.info-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ─── Offer popup enhanced ──────────────────────────────────── */
.modal-overlay.open .modal:has(.offer-popup-body) {
  border-top: 3px solid var(--brand-accent);
}

/* ─── Wallet remaining balance accent ────────────────────────── */
.wallet-remaining {
  background: linear-gradient(135deg, var(--success-soft), rgba(4,120,87,0.06));
  border: 1px solid rgba(4,120,87,0.18);
  border-radius: var(--r-12);
  padding: 14px 16px;
}

/* ─── Table refinements ─────────────────────────────────────── */
.data-table tbody tr:hover {
  background: rgba(23, 92, 211, 0.03);
}

.data-table .primary-text {
  color: var(--brand-navy-2);
  font-weight: 700;
}

/* ─── Badge refinements ─────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-20);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.badge-confirmed, .badge-active, .badge-paid, .badge-approved, .badge-completed {
  background: var(--success-soft);
  color: var(--success);
}
.badge-pending, .badge-in_review, .badge-quoted, .badge-new {
  background: var(--warning-soft);
  color: var(--warning);
}
.badge-cancelled, .badge-rejected, .badge-inactive, .badge-overdue {
  background: var(--danger-soft);
  color: var(--danger);
}
.badge-credit { background: var(--success-soft); color: var(--success); }
.badge-debit  { background: var(--danger-soft);  color: var(--danger); }
.badge-refund { background: var(--purple-soft);  color: var(--purple); }
.badge-outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

/* ─── Empty state refinement ────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--text-muted);
  text-align: center;
}

.empty-state svg {
  width: 36px;
  height: 36px;
  opacity: 0.3;
  margin-bottom: 8px;
}

.empty-state strong {
  font-size: 14px;
  color: var(--text-secondary);
}

.empty-state span {
  font-size: 12px;
}

/* ─── Page header kicker ─────────────────────────────────────── */
.page-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

html[lang="ar"] .page-kicker {
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Skeleton loading refined ──────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--surface-muted) 25%,
    rgba(238, 242, 247, 0.6) 50%,
    var(--surface-muted) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--r-4);
}

@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ═══════════════════════════════════════════════════════════
   TRANSPORT BOOKING FORM
   ═══════════════════════════════════════════════════════════ */

.tr-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: 18px 20px;
  box-shadow: var(--shadow-subtle);
  animation: fadeInUp 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.tr-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-navy-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

html[lang="ar"] .tr-section-title {
  text-transform: none;
  letter-spacing: 0;
}

.tr-section-title svg {
  width: 15px;
  height: 15px;
  color: var(--brand-accent);
}

.tr-toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-20);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 160ms ease;
}

.tr-toggle.active {
  background: var(--brand-navy-2);
  border-color: var(--brand-navy-2);
  color: #fff;
  box-shadow: 0 3px 10px rgba(15,27,71,0.22);
}

.tr-toggle:hover:not(.active) {
  border-color: var(--brand-navy-3);
  color: var(--brand-navy-2);
}

.tr-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  transition: border-color 140ms, color 140ms;
}

.tr-radio-label:has(input:checked) {
  border-color: var(--info);
  color: var(--info);
  background: var(--info-soft);
}

.tr-radio-label svg {
  width: 13px;
  height: 13px;
}

/* Price summary card */
.tr-price-card {
  background: linear-gradient(135deg, var(--brand-navy-2) 0%, var(--brand-navy-3) 100%);
  color: #fff;
  border-radius: var(--r-12);
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(15,27,71,0.28);
}

.tr-price-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.72;
  margin-bottom: 4px;
}

.tr-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tr-price-route {
  font-weight: 700;
  max-width: 200px;
  text-align: right;
}

.tr-price-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 4px;
  font-size: 14px;
  font-weight: 700;
}

.tr-price-amount {
  font-size: 26px;
  font-weight: 900;
  color: var(--brand-accent);
  font-variant-numeric: tabular-nums;
}

/* Transport action buttons inside dark card */
.tr-price-card .btn-success {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  font-weight: 700;
}

.tr-price-card .btn-success:hover {
  background: rgba(255,255,255,0.26);
  box-shadow: 0 4px 14px rgba(255,255,255,0.2);
}

.tr-price-card .btn-outline {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.72);
}

/* ═══════════════════════════════════════════════════════════
   AT-DISPOSAL TRANSPORT
   The third trip shape: a car held for a block of time inside an
   area rather than driven along a route. It needs its own panel
   because there is no "to" to show — the choices are an AREA and a
   DURATION. Logical properties throughout so the Arabic RTL layout
   mirrors without a second rule set; colours are tokens only, so
   dark mode follows the theme.
   ═══════════════════════════════════════════════════════════ */

.tr-disposal-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: var(--r-10);
  background: var(--brand-accent-soft);
  border-inline-start: 3px solid var(--brand-accent);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.tr-disposal-intro svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--brand-accent);
}

.tr-disposal-intro strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text-primary);
  font-weight: 700;
}

/* A duration package — the client picks one block of time. */
.tr-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.tr-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-12);
  background: var(--surface);
  cursor: pointer;
  text-align: start;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tr-pkg:hover:not(.active) {
  border-color: var(--brand-accent);
  transform: translateY(-1px);
}

.tr-pkg.active {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

/* The tick that marks the chosen package, pinned to the inline end
   so it lands top-right in English and top-left in Arabic. */
.tr-pkg.active::after {
  content: "✓";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-accent);
}

.tr-pkg-dur {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.tr-pkg-name {
  font-size: 12px;
  color: var(--text-muted);
}

.tr-pkg-price {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-accent);
}

.tr-pkg-price .tr-pkg-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Configured but unpriced in this currency — offered, not hidden. */
.tr-pkg-price.on-request {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.tr-disposal-empty {
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-10);
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

/* "No fixed route" chip on the At Disposal toggle. */
.tr-toggle-tag {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: var(--r-20);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}

.tr-toggle.active .tr-toggle-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

@media (max-width: 640px) {
  .tr-pkg-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* The hotel Basic tab's price/currency pair is only a fallback — the real
   money lives in the per-market rate rows. This note says so, and lists the
   markets that actually carry a rate, so an admin can see at a glance whether
   a Gulf or Local client would be quoted from a row or from the fallback. */
.he-fallback-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-10);
  background: var(--brand-accent-soft);
  border-inline-start: 3px solid var(--brand-accent);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
}

.he-fallback-note svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--brand-accent);
}

.he-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.he-coverage-none { color: var(--text-muted); font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   ACTIVITY DETAILS POPUP
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   ACTIVITY DETAIL — description, includes / excludes, prices
   Operators paste their write-up with real line breaks; HTML
   collapses those, which turned a tidy list of lines into one
   unreadable run-on. pre-line keeps their formatting.
   ═══════════════════════════════════════════════════════════ */

.act-description {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-10);
  background: var(--surface-raised);
  border-inline-start: 3px solid var(--brand-accent);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-line;      /* keep the author's own line breaks */
  overflow-wrap: anywhere;    /* never let a long word push the modal wide */
}

.act-list-block { margin-top: 12px; }

.act-list-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[lang="ar"] .act-list-title { text-transform: none; letter-spacing: 0; }

.act-list-title svg { width: 14px; height: 14px; }
.act-list-title.act-inc { color: var(--success); }
.act-list-title.act-exc { color: var(--text-muted); }

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

/* How the client wants to be charged: per head, or one flat party rate. */
.act-basis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.act-basis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-10);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.act-basis:hover { border-color: var(--brand-accent); }

.act-basis:has(input:checked) {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

.act-basis input { margin-top: 3px; }
.act-basis span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-basis b { font-size: 13px; color: var(--text-primary); }
.act-basis small { font-size: 11px; color: var(--text-muted); }

/* Party prices (1 / 2 / 3 people) beside the per-person price. */
.act-party-prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

.act-party-prices b {
  color: var(--text-primary);
  font-size: 12px;
}

/* Duration / Time card */
.act-time-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(23,92,211,0.06), rgba(23,92,211,0.03));
  border: 1px solid rgba(23,92,211,0.14);
  border-radius: var(--r-12);
  margin: 12px 0;
}

.act-time-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--info-soft);
  border: 1px solid rgba(23,92,211,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--info);
  flex-shrink: 0;
  margin-top: 2px;
}

.act-time-icon svg {
  width: 17px;
  height: 17px;
}

.act-time-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--info);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

html[lang="ar"] .act-time-label {
  text-transform: none;
  letter-spacing: 0;
}

.act-time-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Time slot selector buttons */
.act-slot-btn {
  padding: 6px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-20);
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.act-slot-btn.active {
  background: var(--info);
  border-color: var(--info);
  color: #fff;
  box-shadow: 0 3px 10px rgba(23,92,211,0.28);
}

.act-slot-btn:hover:not(.active) {
  border-color: var(--info);
  color: var(--info);
}

/* Activity detail card */
.act-detail-card {
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   HOTEL FILTERS — amenity chips, area chips, attribute badges
   ═══════════════════════════════════════════════════════════ */

.amenity-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-20);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}

.amenity-chip svg {
  width: 13px;
  height: 13px;
}

.amenity-chip:hover {
  border-color: var(--brand-navy-3);
  color: var(--brand-navy-2);
}

.amenity-chip.active {
  background: var(--brand-navy-2);
  border-color: var(--brand-navy-2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,27,71,0.2);
}

.area-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.area-chip {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-20);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 140ms ease;
}

.area-chip:hover { border-color: var(--info); color: var(--info); }

.area-chip.active {
  background: var(--info-soft);
  border-color: var(--info);
  color: var(--info);
}

/* Hotel structured attribute badges (in the table) */
.hotel-attr-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--r-20);
  font-size: 10px;
  font-weight: 600;
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid rgba(4,120,87,0.16);
}

.hotel-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-navy-2);
}

.hotel-rating svg {
  width: 11px;
  height: 11px;
  fill: var(--brand-cyan);
  color: var(--brand-cyan);
}

/* Context chip (e.g. selected destination in toolbar) */
.ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-navy-3);
  background: var(--info-soft);
  border-radius: var(--r-20);
  padding: 2px 9px;
}

.ctx-chip svg { width: 12px; height: 12px; }

/* ═══════════════════════════════════════════════════════════
   UI BUILDER (admin)
   ═══════════════════════════════════════════════════════════ */
.ui-builder-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.ui-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.ui-block-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 4px;
}

.ui-block-item {
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  padding: 12px;
  background: var(--surface-raised);
}

.ui-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-block-row strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.ui-block-row strong svg { width: 14px; height: 14px; }

.ui-preview {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-12);
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(248,250,252,0.4)),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.012) 10px, rgba(0,0,0,0.012) 20px);
  min-height: 200px;
}

@media (max-width: 860px) {
  .ui-builder-grid { grid-template-columns: 1fr; }
}

/* ─── Request Form Builder ───────────────────────────────────────── */
.rfb-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  align-items: start;
}

.rfb-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.rfb-field {
  border: 1px solid var(--border);
  border-radius: var(--r-10, var(--r-8));
  padding: 12px;
  margin-bottom: 10px;
  background: var(--surface-raised);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.rfb-field:hover { box-shadow: var(--shadow-card); }

.rfb-field--hidden {
  opacity: 0.6;
  border-style: dashed;
}

.rfb-field-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rfb-field-head strong { font-size: 13px; }

.rfb-grip {
  display: inline-flex;
  color: var(--text-muted);
  cursor: grab;
}
.rfb-grip svg { width: 14px; height: 14px; }

.rfb-field-actions {
  margin-inline-start: auto;
  display: flex;
  gap: 2px;
}

.rfb-preview {
  position: sticky;
  top: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-12);
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(248,250,252,0.45)),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.012) 10px, rgba(0,0,0,0.012) 20px);
}

.rfb-preview-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

.rfb-preview-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.rfb-preview-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 980px) {
  .rfb-grid { grid-template-columns: 1fr; }
  .rfb-preview { position: static; }
}

/* ─── Mobile destination grid ────────────────────────────────── */
@media (max-width: 640px) {
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .dest-card {
    min-height: 108px;
    padding: 16px 10px;
  }

  .dest-card-icon {
    width: 40px;
    height: 40px;
  }

  .stat-card {
    min-height: 96px;
    padding: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM REDESIGN v3.0 — softer palette, real logo, glass UI
   ═══════════════════════════════════════════════════════════════ */

/* ─── Stat card entry stagger ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .stats-grid .stat-card:nth-child(1) { animation-delay: 0ms; }
  .stats-grid .stat-card:nth-child(2) { animation-delay: 55ms; }
  .stats-grid .stat-card:nth-child(3) { animation-delay: 110ms; }
  .stats-grid .stat-card:nth-child(4) { animation-delay: 165ms; }
  .stats-grid .stat-card:nth-child(5) { animation-delay: 220ms; }
  .stats-grid .stat-card:nth-child(6) { animation-delay: 275ms; }
  .grid-2 > section:nth-child(1), .grid-2 > .panel:nth-child(1) { animation-delay: 100ms; }
  .grid-2 > section:nth-child(2), .grid-2 > .panel:nth-child(2) { animation-delay: 170ms; }
}

/* ─── Price pulse animation (transport / activities live price) ── */
@keyframes pricePulse {
  0%   { background: transparent; border-radius: 4px; }
  25%  { background: rgba(4, 120, 87, 0.14); }
  70%  { background: rgba(4, 120, 87, 0.07); }
  100% { background: transparent; }
}

@keyframes walletUpdate {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes highlightFade {
  from { background: var(--accent-tint-strong); }
  to   { background: transparent; }
}

.price-pulse {
  animation: pricePulse 900ms cubic-bezier(0.2,0.7,0.2,1) both;
}

.wallet-update {
  animation: walletUpdate 420ms cubic-bezier(0.2,0.7,0.2,1) both;
}

/* ─── Wallet metrics panel ─────────────────────────────────────── */
.wallet-metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.wallet-metric {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-10, var(--r-8));
  background: var(--surface-raised);
  transition: box-shadow 160ms ease;
}

.wallet-metric:hover {
  box-shadow: var(--shadow-card);
}

.wallet-metric__icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-8);
  flex-shrink: 0;
}

.wallet-metric__icon svg {
  width: 16px;
  height: 16px;
}

.wallet-metric__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

html[lang="ar"] .wallet-metric__label {
  text-transform: none;
  letter-spacing: 0;
}

.wallet-metric__value {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  transition: color 160ms ease;
}

/* Deposited variant */
.wallet-metric--deposit .wallet-metric__icon {
  background: rgba(15,27,71,0.06);
  color: var(--brand-navy-2);
}
.wallet-metric--deposit .wallet-metric__value {
  color: var(--brand-navy-2);
}

/* Used / Deducted variant */
.wallet-metric--used .wallet-metric__icon {
  background: var(--danger-soft);
  color: var(--danger);
}
.wallet-metric--used .wallet-metric__value {
  color: var(--danger);
}

/* Balance variant */
.wallet-metric--balance {
  border-color: rgba(4, 120, 87, 0.22);
  background: linear-gradient(135deg, var(--success-soft) 0%, var(--surface-raised) 100%);
}
.wallet-metric--balance .wallet-metric__icon {
  background: var(--success-soft);
  color: var(--success);
}
.wallet-metric--balance .wallet-metric__value {
  color: var(--success);
  font-size: 24px;
  font-weight: 900;
}

/* Negative balance warning */
.wallet-metric--negative {
  border-color: rgba(180, 35, 24, 0.22);
  background: var(--danger-soft);
}
.wallet-metric--negative .wallet-metric__icon {
  background: rgba(180,35,24,0.1);
  color: var(--danger);
}
.wallet-metric--negative .wallet-metric__value {
  color: var(--danger);
}

.wallet-metric__warning {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: var(--r-4);
  background: rgba(180,35,24,0.12);
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  width: fit-content;
}

/* ─── Glass wallet panel ────────────────────────────────────────── */
.wallet-panel {
  position: relative;
  overflow: hidden;
}

.wallet-panel::before {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-tint) 0%, transparent 70%);
  pointer-events: none;
}

/* ─── Premium topbar refinement ─────────────────────────────────── */
.topbar {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.97) 0%,
    rgba(247,249,252,0.93) 100%);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(226,230,238,0.8);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95), 0 2px 8px rgba(15,27,71,0.04);
}

/* ─── Sidebar accent polish ─────────────────────────────────────── */
.sidebar {
  background:
    radial-gradient(130% 70% at 0% 0%, var(--accent-tint-strong) 0%, transparent 42%),
    radial-gradient(60% 40% at 100% 100%, rgba(255,255,255,0.04) 0%, transparent 60%),
    linear-gradient(180deg, var(--brand-navy-2), var(--brand-navy));
}

/* ─── Offer popup glass ─────────────────────────────────────────── */
.modal-overlay.open .modal:has(.offer-popup-body) {
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 20px 60px rgba(16,24,40,0.18), 0 8px 24px var(--accent-tint);
}

/* ─── Transport price card glass ────────────────────────────────── */
.tr-price-card {
  background: linear-gradient(135deg,
    var(--brand-navy-2) 0%,
    var(--brand-navy-3) 55%,
    var(--brand-navy) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(15,27,71,0.32), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ─── Active filter chip animation ──────────────────────────────── */
@keyframes chipPop {
  from { transform: scale(0.88); opacity: 0.6; }
  to   { transform: scale(1); opacity: 1; }
}

.amenity-chip.active,
.area-chip.active,
.tr-toggle.active {
  animation: chipPop 200ms cubic-bezier(0.34,1.4,0.64,1) both;
}

/* ─── Modal entrance polish ─────────────────────────────────────── */
@keyframes modalPremium {
  from { opacity: 0; transform: translateY(18px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .modal-overlay.open .modal {
    animation: modalPremium 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
}

/* ─── Offer popup entrance ─────────────────────────────────────── */
@keyframes offerEntrance {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Button loading spinner ────────────────────────────────────── */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnspin 0.65s linear infinite;
}

.btn-loading.btn-outline::after,
.btn-loading.btn-muted::after {
  border-color: rgba(52,64,84,0.25);
  border-top-color: var(--text-secondary);
}

/* ─── Table row hover improvement ───────────────────────────────── */
.data-table tbody tr:hover td {
  background: rgba(15,27,71,0.03);
}

/* ─── Stat icon accent by position ──────────────────────────────── */
.stats-grid .stat-card:nth-child(1) .stat-ico { background: rgba(15,27,71,0.08); color: var(--brand-navy-2); }
.stats-grid .stat-card:nth-child(2) .stat-ico { background: var(--danger-soft); color: var(--danger); }
.stats-grid .stat-card:nth-child(3) .stat-ico { background: rgba(15,27,71,0.06); color: var(--brand-navy-3); }
.stats-grid .stat-card:nth-child(4) .stat-ico { background: var(--warning-soft); color: var(--warning); }
.stats-grid .stat-card:nth-child(5) .stat-ico { background: var(--brand-accent-soft); color: var(--brand-accent); }
.stats-grid .stat-card:nth-child(6) .stat-ico { background: var(--success-soft); color: var(--success); }

/* ─── Mobile logo shrink ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .brand-logo {
    max-width: calc(100vw - 100px);
    height: 26px;
  }
}

/* ─── Wallet panel grid on larger screens ───────────────────────── */
@media (min-width: 1280px) {
  .wallet-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Typography refinements ─────────────────────────────────────── */
.stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.stat-value {
  margin-top: 10px;
  font-size: 26px;
  line-height: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* ─── Softer borders throughout ─────────────────────────────────── */
.panel, .table-card, .filter-rail, .stat-card {
  border-color: var(--border);
}

/* ─── Login logo on mobile ─────────────────────────────────────── */
@media (max-width: 640px) {
  .login-logo-img {
    height: 30px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   HOTEL ENRICHMENT DASHBOARD
   ══════════════════════════════════════════════════════════════════ */
.enrich-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* Stats row ──────────────────────────────────────────────────────── */
.enrich-stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.enrich-stat {
  flex: 1 1 60px;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px 8px;
  border-radius: var(--r-10, var(--r-8));
  border: 1px solid var(--border);
  background: var(--surface-raised);
}
.enrich-stat span {
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.enrich-stat small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.enrich-stat--ok     { border-color: var(--success); background: var(--success-soft); }
.enrich-stat--ok span     { color: var(--success); }
.enrich-stat--cross  { border-color: var(--brand-cyan); background: var(--brand-accent-soft); }
.enrich-stat--cross span  { color: var(--brand-cyan-2); }
.enrich-stat--manual { border-color: var(--warning); background: var(--warning-soft); }
.enrich-stat--manual span { color: var(--warning); }
.enrich-stat--error  { border-color: var(--danger); background: var(--danger-soft); }
.enrich-stat--error span  { color: var(--danger); }
.enrich-stat--total  { border-color: var(--border-strong); }
.enrich-stat--total span  { color: var(--text-primary); }

/* Progress bar ────────────────────────────────────────────────────── */
.enrich-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin: 0 12px;
}
.enrich-progress-bar > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-teal));
  transition: width 300ms ease;
  border-radius: 999px;
}

/* Booking media 3-step workflow ─────────────────────────────────── */
.bk-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.bk-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  border-radius: 999px;
  font: 600 13px var(--font);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 150ms ease;
}
.bk-tab:hover { border-color: var(--brand-cyan); color: var(--text-primary); }
.bk-tab.active {
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-teal));
  border-color: transparent;
  color: #fff;
}
.bk-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  font-size: 11px;
  font-weight: 800;
}
.bk-tab.active .bk-tab-num { background: rgba(255,255,255,0.25); }
.bkf.active { font-weight: 800; border-color: var(--brand-cyan); color: var(--brand-cyan-2, var(--brand-cyan)); }

.bk-fetch-grid { display: flex; flex-direction: column; gap: 10px; }
.bk-thumb-card {
  border: 1px solid var(--border);
  border-radius: var(--r-12, 12px);
  padding: 10px;
  background: var(--surface, #fff);
}
.bk-thumb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.bk-thumb-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.bk-thumb-row img {
  width: 84px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--border);
}

/* Live feed ──────────────────────────────────────────────────────── */
.enrich-feed {
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: thin;
  font-size: 12px;
  font-family: var(--font);
}

.enrich-feed-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-8);
  line-height: 1.4;
}

.enrich-feed-icon { flex-shrink: 0; margin-top: 1px; }
.enrich-feed-icon svg { width: 14px; height: 14px; }
.enrich-feed-msg { word-break: break-word; color: var(--text-secondary); }

.enrich-row--ok     { background: rgba(14,159,110,0.07); }
.enrich-row--ok     .enrich-feed-icon { color: var(--success); }
.enrich-row--cross  { background: var(--accent-tint); }
.enrich-row--cross  .enrich-feed-icon { color: var(--brand-cyan); }
.enrich-row--manual { background: rgba(217,119,6,0.08); }
.enrich-row--manual .enrich-feed-icon { color: var(--warning); }
.enrich-row--error  { background: rgba(224,36,36,0.07); }
.enrich-row--error  .enrich-feed-icon { color: var(--danger); }
.enrich-row--fetch  { opacity: 0.65; }
.enrich-row--fetch  .enrich-feed-icon { color: var(--brand-cyan); }
.enrich-row--info   .enrich-feed-icon { color: var(--info); }
.enrich-row--done   { background: var(--success-soft); font-weight: 700; }
.enrich-row--done   .enrich-feed-icon { color: var(--success); }

/* Results table row colouring */
tr.enrich-row--ok     td { background: rgba(14,159,110,0.04); }
tr.enrich-row--manual td { background: rgba(217,119,6,0.05); }
tr.enrich-row--error  td { background: rgba(224,36,36,0.05); }

/* Spinning loader icon for "fetching" rows */
@media (prefers-reduced-motion: no-preference) {
  .enrich-row--fetch .enrich-feed-icon svg { animation: spin 1s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .enrich-layout { grid-template-columns: 1fr; }
}

/* ─── RTL logo alignment ────────────────────────────────────────── */
[dir="rtl"] .brand-logo {
  object-position: right center;
}

[dir="rtl"] .login-logo-img {
  object-position: right center;
}

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS SYSTEM v4 — navy/cyan, subtle blur, calm motion
   Reusable utilities + component refinements + tasteful animation.
   All blur effects degrade to solid surfaces via @supports.
   ═══════════════════════════════════════════════════════════════ */

/* Glass tokens moved to the theme-aware design system at the top of the file. */

/* ─── Reusable glass utilities ──────────────────────────────────── */
.glass-panel,
.glass-card,
.glass-modal,
.glass-pill {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.glass-card { border-radius: var(--r-12); }
.glass-modal { border-radius: var(--r-16); background: var(--glass-bg-strong); }
.glass-pill { border-radius: 999px; }

/* Glass tuned for dark navy surfaces (sidebar / nav) */
.glass-dark {
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  background: var(--glass-dark-bg);
  border: 1px solid var(--glass-dark-border);
}

/* ─── Wallet pill: navy/cyan glass (was a green blob) ────────────── */
.wallet-pill {
  border: 1px solid var(--accent-glow);
  background: linear-gradient(135deg, rgba(16, 42, 104, 0.06), var(--accent-tint-strong));
  color: var(--brand-navy-2);
}
.wallet-pill i,
.wallet-pill svg { color: var(--brand-cyan); }
.wallet-pill strong {
  color: var(--brand-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Tabular, evenly-spaced figures for all money readouts */
.stat-value,
.wallet-metric__value,
.tr-price-amount,
.info-value { font-variant-numeric: tabular-nums; }

/* ─── @supports fallback — solid surfaces without backdrop-filter ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel,
  .glass-card { background: var(--surface); }
  .glass-modal,
  .modal { background: var(--surface); }
  .topbar { background: rgba(255, 255, 255, 0.98); }
  .glass-pill,
  .wallet-pill,
  .refresh-pill,
  .lang-toggle,
  .quick-search { background: var(--surface-raised); }
  .modal-overlay { background: rgba(16, 24, 40, 0.55); }
  .glass-dark { background: rgba(255, 255, 255, 0.12); }
}

/* ═══ Tasteful, professional motion (no bounce) ═══════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Sidebar nav — icon nudges, calm background fade, cyan active glow */
  .nav-item {
    transition: background 160ms ease, color 160ms ease, box-shadow 200ms ease;
  }
  .nav-item i,
  .nav-item svg {
    transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .nav-item:hover i,
  .nav-item:hover svg { transform: translateX(2px); }
  [dir="rtl"] .nav-item:hover i,
  [dir="rtl"] .nav-item:hover svg { transform: translateX(-2px); }
  .nav-item.active {
    box-shadow: inset 0 0 0 1px var(--accent-tint-strong);
  }
  .nav-item.active::before {
    box-shadow: 0 0 10px 1px var(--accent-glow);
    transition: box-shadow 220ms ease;
  }

  /* Icon buttons / pills press feedback */
  .icon-button,
  .wallet-pill,
  .refresh-pill,
  .lang-toggle button { transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 90ms ease; }
  .icon-button:active,
  .refresh-pill:active { transform: translateY(1px); }

  /* Dropdowns / popovers / menus */
  .pop-in,
  .menu-pop,
  .dropdown-menu {
    animation: glassPopIn 170ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transform-origin: top center;
  }

  /* Table rows */
  .data-table tbody tr { transition: background 130ms ease; }
}

@keyframes glassPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Cyan row hover (replaces navy tint for a calmer feel) */
.data-table tbody tr:hover td {
  background: var(--accent-tint);
}

/* Soft focus ring in brand cyan */
.quick-search:focus-within {
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

/* Honor reduced-motion for every animated surface added here */
@media (prefers-reduced-motion: reduce) {
  .nav-item i,
  .nav-item svg,
  .pop-in,
  .menu-pop,
  .dropdown-menu { animation: none !important; transition: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HOTEL GALLERY v2 — premium hero + thumbnail rail + in-portal lightbox
   (Overrides the older <a>-based showcase rules above.)
   ═══════════════════════════════════════════════════════════════ */
.hotel-media-showcase {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.hotel-media-stage {
  position: relative;
  border-radius: var(--r-16);
  overflow: hidden;
  background: var(--surface-muted);
  box-shadow: 0 10px 30px rgba(11, 31, 82, 0.12);
}

.hotel-media-main-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
  border-radius: var(--r-16);
}
.hotel-media-main-scroll::-webkit-scrollbar { display: none; }

/* slides are now <button> (open lightbox) — reset native button look */
.hotel-media-slide {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  height: clamp(240px, 42vh, 380px);
  border-radius: var(--r-16);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--surface-muted);
  cursor: zoom-in;
}

.hotel-media-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hotel-media-slide:hover img { transform: scale(1.03); }

/* glass prev/next arrows */
.hms-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  color: var(--brand-navy-2);
  box-shadow: 0 4px 14px rgba(11, 31, 82, 0.18);
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease;
  z-index: 2;
}
.hms-nav:hover { background: var(--surface); }
.hms-nav:active { transform: translateY(-50%) scale(0.94); }
.hms-nav svg { width: 18px; height: 18px; }
.hms-prev { left: 12px; }
.hms-next { right: 12px; }
[dir="rtl"] .hms-prev { left: auto; right: 12px; }
[dir="rtl"] .hms-next { right: auto; left: 12px; }

.hms-count {
  position: absolute;
  bottom: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(11, 31, 82, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  z-index: 2;
}
[dir="rtl"] .hms-count { right: auto; left: 12px; }

/* thumbnail rail — buttons, active = cyan ring */
.hotel-media-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84px;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.hms-thumb {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  width: 84px;
  height: 60px;
  border-radius: var(--r-8);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--surface-muted);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.hms-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hms-thumb:hover { opacity: 1; }
.hms-thumb.active {
  opacity: 1;
  border-color: var(--brand-cyan);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

/* ── Full-screen lightbox (stays inside the portal) ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(8, 16, 38, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: lbFade 180ms ease both;
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lightbox-img {
  max-width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: var(--r-12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: lbZoom 200ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes lbZoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

.lightbox-nav,
.lightbox-close {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: background 140ms ease, transform 120ms ease;
}
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-nav:hover,
.lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox-nav:active { transform: translateY(-50%) scale(0.92); }
.lightbox-nav svg { width: 24px; height: 24px; }
.lb-prev { left: 3vw; }
.lb-next { right: 3vw; }
.lightbox-close { top: 3vh; right: 3vw; width: 42px; height: 42px; }
.lightbox-close svg { width: 22px; height: 22px; }

.lightbox-count {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .hms-nav { width: 32px; height: 32px; }
  .lightbox-nav { width: 40px; height: 40px; }
  .hotel-media-slide { height: clamp(200px, 34vh, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .hotel-media-slide img,
  .lightbox-overlay,
  .lightbox-img { animation: none !important; transition: none !important; transform: none !important; }
}

/* Hotel detail modal polish: compact travel-card presentation */
.hotel-detail-shell {
  display: grid;
  gap: 16px;
  min-width: 0;
  color: var(--text-primary);
}

.hotel-detail-shell .hotel-media-showcase,
.hotel-detail-shell .hotel-media-stage,
.hotel-detail-shell .hotel-media-main-scroll {
  max-width: 100%;
  min-width: 0;
}

.hotel-detail-shell .hotel-media-stage {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    radial-gradient(circle at 18% 18%, var(--accent-tint-strong), transparent 36%),
    linear-gradient(135deg, var(--surface-raised), var(--surface-muted));
}

.hotel-detail-shell .hotel-media-main-scroll {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

.hotel-detail-shell .hotel-media-slide {
  height: clamp(280px, 46vh, 500px);
}

.hotel-detail-shell .hotel-media-slide img {
  object-position: center;
  transform: translateZ(0);
}

.hotel-detail-shell .hotel-media-thumbs {
  padding: 2px 2px 6px;
  grid-auto-columns: 94px;
}

.hotel-detail-shell .hms-thumb {
  width: 94px;
  height: 66px;
  border-color: rgba(148, 163, 184, 0.35);
  background: #fff;
}

.hotel-detail-shell > div:nth-child(2) {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.86));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.hotel-detail-shell > div:nth-child(2) [style*="font-size:20px"] {
  font-size: 24px !important;
  line-height: 1.15;
  letter-spacing: 0;
}

.hotel-detail-shell > p {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background: #fff;
  color: var(--text-secondary) !important;
  line-height: 1.65 !important;
}

.hotel-amenity-cloud,
.hotel-detail-shell > div[style*="flex-wrap:wrap"] {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.hotel-detail-shell .badge-outline {
  background: #fff;
  border-color: rgba(100, 116, 139, 0.28);
  color: var(--text-primary);
}

.hotel-detail-shell .info-grid,
.hotel-detail-shell .hotel-detail-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0 !important;
}

.hotel-detail-shell .info-item {
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055);
}

.hotel-detail-shell .info-label {
  font-size: 11px;
  letter-spacing: .04em;
}

.hotel-detail-shell .info-value {
  font-size: 17px;
}

.hotel-detail-shell .form-section {
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background: #fff;
  padding: 14px;
}

@media (max-width: 820px) {
  .hotel-detail-shell .info-grid,
  .hotel-detail-shell .hotel-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotel-detail-shell .hotel-media-slide {
    height: clamp(220px, 36vh, 340px);
  }
}

@media (max-width: 520px) {
  .hotel-detail-shell .info-grid,
  .hotel-detail-shell .hotel-detail-kpis {
    grid-template-columns: 1fr;
  }

  .hotel-detail-shell > div:nth-child(2) {
    padding: 12px;
  }
}

/* Dynamic service types */
.service-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.service-type-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease;
}

.service-type-option:hover {
  border-color: color-mix(in srgb, var(--brand-navy-2) 38%, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, var(--info-soft));
  transform: translateY(-1px);
}

.service-type-option:has(input:checked) {
  border-color: var(--brand-navy-2);
  background: color-mix(in srgb, var(--surface) 86%, var(--info-soft));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-navy-2) 16%, transparent);
}

.service-type-option:focus-within {
  outline: 2px solid color-mix(in srgb, var(--brand-navy-2) 32%, transparent);
  outline-offset: 2px;
}

.service-type-option input {
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  accent-color: var(--brand-navy-2);
}

.service-type-option__body {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.service-type-option__title {
  font-size: 13px;
  font-weight: 800;
}

.service-type-option__desc {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.35;
}

.service-type-option__price {
  color: var(--success);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Consolidated invoice picker */
.consolidated-picker {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-8);
  background: var(--surface-muted);
  overflow: hidden;
}

.consolidated-picker__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.consolidated-picker__list {
  max-height: 320px;
  overflow: auto;
}

.consolidated-invoice-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.consolidated-invoice-option:last-child {
  border-bottom: 0;
}

.consolidated-invoice-option:hover {
  background: color-mix(in srgb, var(--surface) 82%, var(--info-soft));
}

.consolidated-invoice-option span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.consolidated-invoice-option small {
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-inline {
  padding: 24px 16px;
  color: var(--text-muted);
  text-align: center;
}

[dir="rtl"] .service-type-option,
[dir="rtl"] .consolidated-invoice-option {
  text-align: right;
}

@media (max-width: 640px) {
  .service-type-grid {
    grid-template-columns: 1fr;
  }

  .consolidated-picker__toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .consolidated-invoice-option {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .consolidated-invoice-option > .numeric,
  .consolidated-invoice-option > .badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-type-option {
    transition: none;
  }

  .service-type-option:hover {
    transform: none;
  }
}

/* Final responsive and RTL guardrails */
body {
  overflow-x: hidden;
}

.quick-search,
.quick-search input,
.field,
.form-field,
.form-grid > *,
.panel,
.table-card,
.workbench-main {
  min-width: 0;
}

.quick-search input,
.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea {
  max-width: 100%;
}

.stat-value {
  overflow-wrap: anywhere;
  word-break: normal;
}

.data-table th,
.data-table td,
.field label,
.form-field label,
.modal-title {
  text-align: start;
}

.data-table .numeric,
.data-table th.numeric {
  text-align: end;
}

[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
  text-align: start;
}

[dir="rtl"] .row-actions {
  justify-content: flex-start;
}

.modal-body {
  overscroll-behavior: contain;
}

.modal-body img,
.panel-body img {
  max-width: 100%;
}

@media (max-width: 860px) {
  .stat-value {
    font-size: 18px;
    line-height: 24px;
  }

  .table-scroll {
    scrollbar-gutter: stable;
  }

  .modal-body {
    padding-bottom: 20px;
  }
}

@media (max-width: 640px) {
  .table-toolbar .toolbar-actions,
  .page-actions {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .modal-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .modal-footer .btn {
    width: 100%;
  }

  .service-type-option__price {
    white-space: normal;
    text-align: end;
  }
}

@media (max-width: 420px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-card {
    min-height: 88px;
    padding: 9px;
  }

  .stat-value {
    font-size: 17px;
    line-height: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   UX refinement pass (2026-06-13) — appended so the cascade wins without
   disturbing existing rules. Floating bulk-action bar, clearer selected
   states, consistent button feedback, reduced-motion support.
   ───────────────────────────────────────────────────────────────────────── */

/* Floating bulk-action bar — fixed so it survives the table card's
   overflow:hidden and stays reachable while scrolling. Shown only when rows
   are selected (JS toggles display:flex). */
.bulk-toolbar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 10px 12px 10px 18px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.22);
  animation: bulkBarIn 180ms ease-out;
}
@keyframes bulkBarIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.bulk-toolbar .bulk-info { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.bulk-toolbar .bulk-info .primary-text { font-weight: 800; font-size: 13px; color: var(--text-primary); }
.bulk-toolbar .bulk-info .secondary-text { font-size: 12px; }
.bulk-toolbar .bulk-actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 600px) {
  .bulk-toolbar { left: 14px; right: 14px; transform: none; width: auto; justify-content: space-between; }
  @keyframes bulkBarIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}

/* Sidebar active item — subtle teal-tinted gradient instead of a flat block,
   so the selected destination reads clearly; hover stays a neutral overlay. */
.sidebar .nav-item.active {
  background: linear-gradient(90deg, var(--accent-tint-strong) 0%, var(--accent-tint) 100%);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--accent-tint-strong);
}
[dir="rtl"] .sidebar .nav-item.active {
  background: linear-gradient(270deg, var(--accent-tint-strong) 0%, var(--accent-tint) 100%);
}
.sidebar .nav-item.active::before { top: 7px; bottom: 7px; width: 3px; }

/* Consistent press/hover feedback on all button variants */
.btn-danger:hover { background: var(--danger-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(224, 36, 36, 0.30); }
.btn-success:hover { background: var(--success-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(14, 159, 110, 0.30); }
.btn-outline:active, .btn-teal:active, .btn-danger:active, .btn-success:active { transform: translateY(0); }

/* Clickable summary cards get a subtle lift (data-dense dashboard pattern) */
.mode-card { transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }
.mode-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--brand-accent); }

/* Accessibility — honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .btn-primary:hover, .btn-teal:hover, .btn-danger:hover, .btn-success:hover, .mode-card:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PREMIUM GLASS PASS (2026-06-13b) — appended last so it wins the cascade.
   Soft glassmorphism + depth for a B2B travel SaaS feel. Navy/teal palette,
   no gold. Glass only on chrome (sidebar, topbar, cards, modals, bulk bar);
   data tables & forms stay solid for readability.
   ═════════════════════════════════════════════════════════════════════════ */

/* Token block moved to the theme-aware design system at the top of the file. */

/* ── App background: calm, layered, cool ── */
body {
  background-color: var(--bg-base);
  background-image: var(--bg-wash);
}

/* ── Sidebar: layered navy glass + premium active state ───────────────── */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-edge);
  box-shadow: 1px 0 0 rgba(5, 13, 36, 0.55), 18px 0 44px rgba(11, 31, 82, 0.10);
}
[dir="rtl"] .sidebar {
  border-right: 0;
  border-left: 1px solid var(--sidebar-edge);
  box-shadow: -1px 0 0 rgba(5, 13, 36, 0.55), -18px 0 44px rgba(11, 31, 82, 0.10);
}
.brand-block { border-bottom-color: rgba(255, 255, 255, 0.08); padding-bottom: 14px; }

/* Nav items get an icon tile + a responsive hover nudge */
.sidebar .nav-item { gap: 11px; padding: 7px 10px; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .16s var(--ease-out); }
.sidebar .nav-item > svg,
.sidebar .nav-item > i {
  width: 28px; height: 28px; flex: 0 0 28px; padding: 6px; box-sizing: border-box;
  border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.82);
  transition: background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(2px); }
[dir="rtl"] .sidebar .nav-item:hover { transform: translateX(-2px); }
.sidebar .nav-item:hover > svg,
.sidebar .nav-item:hover > i { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sidebar .nav-item.active {
  background: linear-gradient(90deg, var(--accent-tint-strong) 0%, var(--accent-tint) 100%);
  color: #fff; box-shadow: inset 0 0 0 1px var(--accent-tint-strong);
}
[dir="rtl"] .sidebar .nav-item.active {
  background: linear-gradient(270deg, var(--accent-tint-strong) 0%, var(--accent-tint) 100%);
}
.sidebar .nav-item.active > svg,
.sidebar .nav-item.active > i {
  background: linear-gradient(135deg, var(--brand-teal), var(--brand-cyan));
  color: #fff; box-shadow: var(--shadow-glow-teal);
}
.sidebar .nav-item.active::before {
  top: 8px; bottom: 8px; left: -8px; width: 3px;
  background: linear-gradient(var(--brand-cyan), var(--brand-teal));
}
[dir="rtl"] .sidebar .nav-item.active::before { left: auto; right: -8px; }
.nav-label { color: rgba(255, 255, 255, 0.40); }
.nav-count {
  margin-inline-start: auto; min-width: 18px; height: 18px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-teal), var(--brand-cyan));
  color: #fff; font-size: 10px; font-weight: 800; box-shadow: 0 2px 6px var(--accent-glow);
}
.tier-chip { background: var(--accent-tint-strong); color: var(--gold-300); box-shadow: inset 0 0 0 1px var(--accent-glow); }
.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.account-mini { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--r-md); padding: 8px; }

/* ── Topbar: glass + refined controls ─────────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 10px 26px rgba(11, 24, 58, 0.05);
}
.quick-search {
  border-radius: 999px; border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 1px 2px rgba(11, 24, 58, 0.04);
  transition: box-shadow .18s var(--ease-out), border-color .18s, background .18s;
}
.quick-search:focus-within { background: var(--surface); border-color: var(--focus-ring); box-shadow: var(--ring); }
.quick-search kbd { background: var(--surface); border-color: var(--border-soft); }
.wallet-pill {
  border-radius: 999px; border-color: var(--accent-glow);
  background: linear-gradient(135deg, var(--accent-tint-strong), var(--accent-tint-strong));
  color: var(--brand-accent-text); box-shadow: var(--shadow-subtle);
}
.wallet-pill svg { color: var(--brand-teal); }
.wallet-pill strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.refresh-pill { border-radius: 999px; background: rgba(255, 255, 255, 0.6); border-color: var(--border-soft); }
.lang-toggle { background: rgba(255, 255, 255, 0.6); border-color: var(--border-soft); }
.lang-toggle button.active { background: linear-gradient(135deg, var(--brand-navy-3), var(--brand-navy-2)); box-shadow: 0 2px 6px rgba(11, 31, 82, 0.28); }
.icon-button { border-radius: 10px; background: rgba(255, 255, 255, 0.5); border-color: var(--border-soft); transition: background .16s, border-color .16s, color .16s, box-shadow .16s; }
.icon-button:hover, .icon-button.active { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); box-shadow: var(--shadow-soft); }
.role-chip { background: var(--accent-tint-strong); color: var(--brand-cyan-2); }

/* ── Page header hierarchy ────────────────────────────────────────────── */
.page-kicker { color: var(--brand-cyan-2); }
.page-title { letter-spacing: -0.015em; }

/* ── Stat cards: subtle glass + colourful icon badges + hover lift ────── */
.stat-card {
  border-color: var(--border-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.76));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent-glow); }
.stat-ico {
  width: 38px; height: 38px; border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, var(--brand-navy-3), var(--brand-navy));
  box-shadow: 0 5px 14px rgba(11, 31, 82, 0.22);
}
.stat-ico svg { width: 18px; height: 18px; }
.stats-grid .stat-card:nth-child(5n+1) .stat-ico { background: linear-gradient(135deg, var(--brand-teal), var(--brand-cyan)); box-shadow: var(--shadow-glow-teal); }
.stats-grid .stat-card:nth-child(5n+2) .stat-ico { background: linear-gradient(135deg, var(--navy-500), var(--navy-700)); }
.stats-grid .stat-card:nth-child(5n+3) .stat-ico { background: linear-gradient(135deg, var(--brand-cyan), var(--brand-cyan-2)); box-shadow: 0 5px 14px var(--accent-glow); }
.stats-grid .stat-card:nth-child(5n+4) .stat-ico { background: var(--success-soft); color: var(--success); }
.stats-grid .stat-card:nth-child(5n+5) .stat-ico { background: var(--purple-soft); color: var(--purple); }
.stat-value { font-size: 26px; line-height: 32px; }

/* Wallet card: keep Remaining Balance as the hero ── */
.wallet-metric--balance {
  background: linear-gradient(135deg, var(--accent-tint-strong), var(--accent-tint));
  border-color: var(--accent-glow); box-shadow: inset 0 0 0 1px var(--accent-tint-strong);
}
.wallet-metric--balance .wallet-metric__value { color: var(--brand-accent-text); }

/* ── Cards & panels: soft depth ───────────────────────────────────────── */
.table-card, .panel, .filter-rail { border-color: var(--border-soft); border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.table-toolbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 253, 0.92)); }

/* ── Tables: softer header, clear hover + selected-row state ──────────── */
.data-table thead th { background: var(--surface-raised); color: var(--text-secondary); border-bottom-color: var(--border-soft); }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--accent-tint); }
.data-table tbody tr:has(.inv-check:checked),
.data-table tbody tr.is-selected { background: var(--accent-tint-strong); box-shadow: inset 3px 0 0 var(--brand-cyan); }
[dir="rtl"] .data-table tbody tr:has(.inv-check:checked),
[dir="rtl"] .data-table tbody tr.is-selected { box-shadow: inset -3px 0 0 var(--brand-cyan); }
.data-table input[type="checkbox"], .inv-check {
  width: 16px; height: 16px; accent-color: var(--brand-cyan); cursor: pointer; vertical-align: middle;
}

/* ── Buttons: consistent feedback + states ────────────────────────────── */
.btn { border-radius: 10px; transition: transform .14s var(--ease-out), box-shadow .18s, background .18s, border-color .18s, color .18s; }
.btn:disabled { opacity: .55; box-shadow: none !important; transform: none !important; }
.btn-outline { background: rgba(255, 255, 255, 0.82); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface); border-color: var(--brand-accent); color: var(--text-primary); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.btn-success:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(14, 159, 110, 0.30); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(224, 36, 36, 0.30); }
.btn-sm { min-height: 32px; }

/* Tier badge variants — refined, never flashy gold */
.badge-gold { background: var(--brand-accent-soft); color: var(--brand-accent-text); }
.badge-gold::before { background: var(--brand-accent); }

/* ── Modals: glass shell + sticky footer ──────────────────────────────── */
.modal { border-radius: var(--r-lg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-float); }
.modal-header { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.modal-footer { position: sticky; bottom: 0; }

/* ═══ Bulk action bar — bold floating glass dock, centred in content area,
       never clipped, content padded so it never hides rows ═══ */
.bulk-toolbar {
  position: fixed; z-index: 90; /* above page chrome (sidebar 40 / topbar 35), below modals (100) + toasts (120) */
  bottom: 24px; left: var(--sidebar-w); right: 0; margin-inline: auto; transform: none;
  width: max-content; max-width: calc(100vw - 48px);
  display: none; align-items: center; gap: 0;
  padding: 0; border-radius: 16px;
  background: var(--bg-glass-strong);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--accent-tint-strong);
  animation: bulkUp .22s var(--ease-out);
}
[dir="rtl"] .bulk-toolbar { left: 0; right: var(--sidebar-w); }
.bulk-toolbar .bulk-info {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.25;
  padding: 11px 18px; position: relative;
}
.bulk-toolbar .bulk-info::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px;
  border-radius: 0 4px 4px 0; background: linear-gradient(var(--brand-cyan), var(--brand-teal));
}
[dir="rtl"] .bulk-toolbar .bulk-info::before { left: auto; right: 0; border-radius: 4px 0 0 4px; }
.bulk-toolbar .bulk-info .primary-text { font-weight: 800; font-size: 14px; color: var(--text-primary); }
.bulk-toolbar .bulk-info .secondary-text { font-size: 12px; font-weight: 700; color: var(--brand-teal); font-variant-numeric: tabular-nums; }
.bulk-toolbar .bulk-actions {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px; border-inline-start: 1px solid var(--border-soft);
}
.bulk-toolbar .bulk-actions .btn-primary { box-shadow: 0 6px 18px rgba(11, 31, 82, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
@keyframes bulkUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* Keep page content reachable above the docked bar while it's shown */
body.has-bulkbar .page-wrap { padding-bottom: 104px; }

@media (max-width: 600px) {
  .bulk-toolbar { left: 12px; right: 12px; margin: 0; width: auto; max-width: none; bottom: 12px; flex-wrap: wrap; }
  [dir="rtl"] .bulk-toolbar { left: 12px; right: 12px; }
  .bulk-toolbar .bulk-info { flex: 1 1 100%; }
  .bulk-toolbar .bulk-actions { flex: 1 1 100%; border-inline-start: 0; border-top: 1px solid var(--border-soft); }
  .bulk-toolbar .bulk-actions .btn { flex: 1; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-item:hover, .stat-card:hover, .btn-outline:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   TRAVEL TEAL LAYER (2026-06-13c) — shift the dominant interactive colour
   from navy to teal/cyan: CTAs, focus rings, links, stat icons. Navy stays
   the brand base (sidebar, headings). Refined SOFT tinted icon badges
   (clean SaaS chips, not saturated rainbow gradients).
   ═════════════════════════════════════════════════════════════════════════ */

/* Primary CTA = teal→deep-teal (was navy). */
.btn-primary {
  background: linear-gradient(135deg, var(--accent-teal) 0%, var(--brand-teal-2) 100%);
  color: #fff;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.btn-primary::after { background: rgba(255, 255, 255, 0.10); }
.btn-primary:hover {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-800) 100%);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(13, 148, 136, 0.30); }
.request-cta { box-shadow: 0 8px 20px var(--accent-tint-strong), inset 0 1px 0 rgba(255, 255, 255, 0.18); }

/* Secondary glass button variant */
.btn-glass {
  background: var(--surface-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border); color: var(--text-secondary); box-shadow: var(--shadow-soft);
}
.btn-glass:hover { background: var(--surface); border-color: var(--brand-accent); color: var(--brand-accent-text); transform: translateY(-1px); }

/* Teal focus rings on inputs (was navy) */
.input:focus, .select:focus, .textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--brand-teal); box-shadow: 0 0 0 3px var(--accent-glow);
}
.link-btn, a.link { color: var(--brand-teal-2); }
.link-btn:hover { color: var(--brand-teal); }

/* Refined stat-card icon badges — soft tinted chips, restrained on-palette set.
   Overrides the earlier saturated gradients. Better contrast, cleaner SaaS look. */
.stat-ico {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-accent-soft); color: var(--brand-teal-2);
  box-shadow: inset 0 0 0 1px var(--accent-tint-strong);
}
.stat-ico svg { width: 19px; height: 19px; stroke-width: 2.1; }
.stats-grid .stat-card:nth-child(5n+1) .stat-ico { background: var(--brand-accent-soft); color: var(--brand-accent-text); box-shadow: inset 0 0 0 1px var(--accent-tint-strong); }
.stats-grid .stat-card:nth-child(5n+2) .stat-ico { background: var(--info-soft); color: var(--info); box-shadow: inset 0 0 0 1px rgba(29, 79, 216, 0.14); }
.stats-grid .stat-card:nth-child(5n+3) .stat-ico { background: var(--navy-100); color: var(--navy-700); box-shadow: inset 0 0 0 1px rgba(26, 60, 135, 0.12); }
.stats-grid .stat-card:nth-child(5n+4) .stat-ico { background: var(--success-soft); color: var(--success); box-shadow: inset 0 0 0 1px rgba(14, 124, 88, 0.14); }
.stats-grid .stat-card:nth-child(5n+5) .stat-ico { background: var(--purple-soft); color: var(--purple); box-shadow: inset 0 0 0 1px rgba(105, 65, 198, 0.14); }

/* Sidebar active icon tile now reads teal→cyan (tokens updated) + glow */
.sidebar .nav-item.active > svg, .sidebar .nav-item.active > i {
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-cyan));
}
/* Wallet metric "remaining" hero stays teal */
.wallet-metric--balance { background: linear-gradient(135deg, var(--accent-tint-strong), var(--accent-tint-strong)); border-color: var(--accent-glow); }
.wallet-metric--balance .wallet-metric__value { color: var(--brand-teal-2); }

/* ═══ Dashboard hero + service quick-actions ═══ */
.dash-hero {
  display: flex; align-items: stretch; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 22px 24px; border-radius: var(--r-lg); color: #fff;
  position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-float);
  background:
    radial-gradient(120% 150% at 100% 0%, var(--accent-glow), transparent 55%),
    radial-gradient(120% 170% at 0% 110%, var(--accent-glow), transparent 52%),
    linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%);
}
.dash-hero__main { min-width: 260px; flex: 1 1 360px; }
.dash-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); }
html[lang="ar"] .dash-hero__eyebrow { letter-spacing: 0; text-transform: none; }
.dash-hero__title { margin: 5px 0 5px; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.dash-hero__sub { margin: 0 0 16px; max-width: 54ch; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.80); }
.dash-hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero__cta .btn-glass { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dash-hero__cta .btn-glass:hover { background: rgba(255, 255, 255, 0.24); color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.dash-hero__metrics { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: center; min-width: 248px; flex: 0 1 280px; }
.hero-metric {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.16s var(--ease-out);
}
.hero-metric:hover { background: rgba(255, 255, 255, 0.16); }
.hero-metric__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); color: #fff; flex: 0 0 34px; }
.hero-metric__ico svg { width: 17px; height: 17px; }
.hero-metric__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.70); }
html[lang="ar"] .hero-metric__label { text-transform: none; letter-spacing: 0; }
.hero-metric__num { font-size: 18px; font-weight: 800; }
.hero-metric--balance { display: block; background: linear-gradient(135deg, var(--accent-glow), var(--accent-tint-strong)); border-color: rgba(255, 255, 255, 0.24); }
.hero-metric--balance .hero-metric__value { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 3px; }

.quick-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.qa-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 88px; padding: 14px 8px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-soft);
  color: var(--text-secondary); font-size: 12px; font-weight: 700;
  transition: transform 0.16s var(--ease-out), box-shadow 0.16s, border-color 0.16s, color 0.16s;
}
.qa-tile:hover { transform: translateY(-3px); border-color: var(--accent-glow); box-shadow: var(--shadow-card); color: var(--brand-navy-2); }
.qa-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--brand-accent-soft); color: var(--brand-teal-2); transition: background 0.16s, color 0.16s, box-shadow 0.16s; }
.qa-ico svg { width: 21px; height: 21px; }
.qa-tile:hover .qa-ico { background: linear-gradient(135deg, var(--accent-teal), var(--accent-cyan)); color: #fff; box-shadow: var(--shadow-glow-teal); }
.qa-label { text-align: center; line-height: 1.2; }

@media (max-width: 920px) {
  .quick-actions { grid-template-columns: repeat(3, 1fr); }
  .dash-hero { padding: 18px; }
  .dash-hero__metrics { flex: 1 1 100%; min-width: 0; grid-template-columns: 1fr 1fr; }
  .hero-metric--balance { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .dash-hero__title { font-size: 22px; }
  .dash-hero__metrics { grid-template-columns: 1fr; }
  .qa-tile { min-height: 80px; }
}

/* Destination cards — teal-consistent icon chip + accent (match quick-actions) */
.dest-card-icon { background: var(--brand-accent-soft); border-color: var(--accent-tint-strong); color: var(--brand-teal-2); transition: background 0.18s var(--ease-out), color 0.18s, box-shadow 0.18s; }
.dest-card::before { background: linear-gradient(90deg, var(--accent-teal), var(--accent-cyan)); }
.dest-card:hover { border-color: var(--accent-glow); }
.dest-card:hover .dest-card-icon { background: linear-gradient(135deg, var(--accent-teal), var(--accent-cyan)); color: #fff; box-shadow: var(--shadow-glow-teal); }
/* Destination cards WITH a background image: darken for legible white text */
.dest-card.has-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,31,92,0.20), rgba(7,31,92,0.78)); z-index: 0; }
.dest-card.has-bg > * { position: relative; z-index: 1; }
.dest-card.has-bg .dest-card-name, .dest-card.has-bg .dest-card-sub, .dest-card.has-bg .dest-card-count { color: #fff; }
.dest-card.has-bg .dest-card-count { color: rgba(255,255,255,0.85); }

/* ═════════════════════════════════════════════════════════════════════════
   COLLAPSIBLE DESKTOP SIDEBAR (2026-06-13d) — icons-only at 76px, smooth
   resize of shell via the shared --sidebar-w var. Mobile keeps the overlay
   drawer (collapse disabled <=860px).
   ═════════════════════════════════════════════════════════════════════════ */
.sidebar-collapse-btn { display: none; }   /* desktop-only; shown in the desktop media query */

@media (min-width: 861px) {
  .sidebar, .topbar, .main-content { transition: width .22s var(--ease-out), margin .22s var(--ease-out), left .22s var(--ease-out), right .22s var(--ease-out); }
  .sidebar-collapse-btn { display: inline-grid; }

  body.sidebar-collapsed { --sidebar-w: var(--sidebar-collapsed-width); }

  /* Hide text-y bits when collapsed → icons only */
  body.sidebar-collapsed .brand-name,
  body.sidebar-collapsed .brand-sub,
  body.sidebar-collapsed .tier-chip,
  body.sidebar-collapsed .role-chip,
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav-item > span,
  body.sidebar-collapsed .nav-item .nav-count,
  body.sidebar-collapsed .account-mini .truncate,
  body.sidebar-collapsed .sidebar-footer .btn span { display: none; }

  /* Compact brand → teal "E" mark */
  body.sidebar-collapsed .brand-block { padding: 16px 0 14px; }
  body.sidebar-collapsed .brand-logo { display: none; }
  body.sidebar-collapsed .brand-row { justify-content: center; }
  body.sidebar-collapsed .brand-row::before {
    content: "E"; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-cyan)); color: var(--brand-navy);
    font-weight: 800; font-size: 19px; box-shadow: var(--shadow-glow-teal);
  }

  body.sidebar-collapsed .nav-scroll { padding: 10px 8px 16px; }
  body.sidebar-collapsed .nav-group { margin-top: 6px; }
  body.sidebar-collapsed .nav-item { justify-content: center; padding: 7px; gap: 0; }
  body.sidebar-collapsed .nav-item.active::before { display: none; }
  body.sidebar-collapsed .account-mini { justify-content: center; padding: 8px 0; }
  body.sidebar-collapsed .sidebar-footer .btn { justify-content: center; }

  /* Hover tooltip for collapsed nav items (label pulled into data-tip by JS) */
  body.sidebar-collapsed .nav-item[data-tip]::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--brand-navy); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s var(--ease-out); z-index: 120; box-shadow: var(--shadow-popover);
  }
  body.sidebar-collapsed .nav-item[data-tip]:hover::after { opacity: 1; }
  [dir="rtl"] body.sidebar-collapsed .nav-item[data-tip]::after { left: auto; right: calc(100% + 12px); }
}

/* ═════════════════════════════════════════════════════════════════════════
   HOTELS: card view, view toggle, mobile filter drawer, active chips
   ═════════════════════════════════════════════════════════════════════════ */
.hotel-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.hotel-view-btn { width: 34px; height: 34px; display: grid; place-items: center; color: var(--text-muted); transition: background .14s, color .14s; }
.hotel-view-btn svg { width: 17px; height: 17px; }
.hotel-view-btn.active { background: var(--brand-accent-soft); color: var(--brand-teal-2); }
.hotel-filter-btn { display: none; }            /* mobile only */
.filter-close, .filter-apply { display: none; } /* mobile only */
.filter-backdrop { display: none; }
.filter-actions { display: flex; gap: 8px; }
.filter-actions .btn { flex: 1; }

.hotel-gallery-ind { color: var(--brand-cyan-2); display: inline-flex; }
.hotel-gallery-ind svg { width: 14px; height: 14px; }

.hotel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; padding: 12px; }
.hotel-card { display: flex; gap: 12px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-16); box-shadow: var(--shadow-soft); transition: transform .16s var(--ease-out), box-shadow .16s, border-color .16s; }
.hotel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--accent-glow); }
.hotel-card__media { position: relative; width: 92px; height: 92px; flex: 0 0 92px; border-radius: 12px; overflow: hidden; background: var(--surface-muted); padding: 0; cursor: pointer; }
.hotel-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-card__initials { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-teal), var(--accent-cyan)); color: #fff; font-weight: 800; font-size: 22px; }
.hotel-gallery-badge { position: absolute; bottom: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(7, 31, 92, 0.72); color: #fff; }
[dir="rtl"] .hotel-gallery-badge { right: auto; left: 5px; }
.hotel-gallery-badge svg { width: 13px; height: 13px; }
.hotel-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hotel-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.hotel-card__name { font-weight: 800; font-size: 14px; color: var(--text-primary); line-height: 1.25; }
.hotel-card__meta { font-size: 12px; color: var(--text-secondary); }
.hotel-card__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hotel-attr-more { background: var(--surface-muted); color: var(--text-secondary); }
.hotel-card__price { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); margin-top: 2px; }
.hotel-card__actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.hotel-card__actions .btn { flex: 1; min-height: 38px; }

.hotel-active-chips { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--brand-accent-soft); color: var(--brand-teal-2); font-size: 12px; font-weight: 700; }
.filter-chip svg { width: 13px; height: 13px; }
.filter-chip--clear { background: var(--surface-muted); color: var(--text-secondary); }

/* ≤768px: cards forced, filters become a slide-in drawer, active chips visible */
@media (max-width: 768px) {
  .hotel-view-toggle { display: none; }
  .hotel-filter-btn { display: inline-flex; }
  .hotel-cards { grid-template-columns: 1fr; }
  .workbench { display: block; }
  .filter-rail {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(330px, 90vw); z-index: 95;
    transform: translateX(-100%); transition: transform .2s var(--ease-out);
    border-radius: 0; max-height: 100vh; overflow-y: auto; box-shadow: var(--shadow-float);
    animation: none !important; /* defeat fadeInUp's lingering transform that traps the drawer */
  }
  [dir="rtl"] .filter-rail { left: auto; right: 0; transform: translateX(100%); }
  .filter-rail.open { transform: translateX(0); }
  .filter-backdrop { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(7, 31, 92, 0.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .filter-backdrop.open { opacity: 1; pointer-events: auto; }
  .filter-close { display: inline-grid; }
  .filter-apply { display: inline-flex; }
  .filter-head { justify-content: space-between; }
  .hotel-active-chips:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 2px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   UX POLISH PASS (2026-06-24) — readability + grouping for data-dense screens.
   Background/border/color/shadow only; NO transforms on fixed-element ancestors
   (would re-trap the floating bulk bar / drawers — see earlier notes).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Data tables: larger, higher-contrast, brand-consistent row feedback ── */
.data-table { font-size: 13px; }
.data-table thead th {
  height: 40px;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-strong);
  background: var(--surface-raised);
}
.data-table tbody td { height: 48px; color: var(--text-secondary); }
.data-table tbody tr:hover td { background: var(--brand-accent-soft); }
.data-table tbody tr.selected td,
.data-table tbody tr:has(.inv-check:checked) td { background: var(--brand-accent-soft); }
.data-table .primary-text { color: var(--text-primary); font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.data-table .secondary-text { color: var(--text-muted); font-size: 11.5px; }
.data-table .numeric { color: var(--text-primary); }
/* Keep number columns aligned across rows (prices, balances) */
.data-table td.numeric, .data-table th.numeric { font-variant-numeric: tabular-nums; }

/* ── Table cards: a touch more presence so data sits on a clear surface ── */
.table-card { box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.table-toolbar { padding: 12px 14px; border-bottom: 1px solid var(--border); }

/* ── Modal form sections: group fields into labelled cards (no flat walls) ── */
.modal-body .form-section {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.modal-body .form-section-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--brand-navy);
  font-size: 14px;
}
.modal-body .form-section-title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--brand-teal);
}
html[dir="rtl"] .modal-body .form-section-title::before { order: 2; }

/* ── Tabbed editor panels (hotel) + endpoint blocks (transport) ── */
.he-body { min-height: 320px; }
.he-panel { padding: 2px; }
.he-rate, .he-supp, .tr-ep, .mp-row, .mp-block {
  transition: border-color .15s, box-shadow .15s;
}
.he-rate:hover, .tr-ep:hover { border-color: var(--border-strong); }
.he-rate { background: var(--surface-raised); }
.he-supp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-8); padding: 8px 10px; }

/* ── Form fields: clearer labels + comfortable inputs ── */
.form-field label { font-weight: 600; color: var(--text-secondary); }
.form-field input, .form-field select, .form-field textarea {
  min-height: 40px;
}

/* ── Stat cards: subtle lift + clearer value hierarchy ── */
.stat-card { border: 1px solid var(--border); box-shadow: var(--shadow-subtle); }
.stat-card .stat-value, .stat-value { color: var(--text-primary); font-weight: 800; letter-spacing: -0.01em; }

/* ── Empty states: friendlier, less "broken/lost" feeling ── */
.empty-state { min-height: 180px; color: var(--text-secondary); }
.empty-state strong { color: var(--text-primary); }

/* ── Desktop: give data tables more room by trimming the filter rail ── */
@media (min-width: 1024px) {
  .filter-rail { max-width: 248px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE ADMIN FIXES (2026-06-27) — sub-tab bars + dense tables on phones.
   ════════════════════════════════════════════════════════════════════════════ */

/* Admin sub-tab bars (Transport / Activities: Rates · Bookings · Service Types
   · Airports). Was an inline `display:flex` row that shrank the buttons until
   the active pill clipped to just its icon. Desktop layout is unchanged. */
.admin-tab-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.admin-tab-bar .btn { white-space: nowrap; }

@media (max-width: 860px) {
  .admin-tab-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-tab-bar .btn {
    /* two equal tabs per row — never shrink a tab down to its icon */
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding-inline: 10px;
    font-size: 13px;
  }
}

/* Dense admin tables on mobile keep their identifying first column pinned while
   the rest scrolls horizontally, so the row is never lost off-screen. */
@media (max-width: 860px) {
  .table-scroll { position: relative; }
  .data-table thead th:first-child,
  .data-table tbody td:first-child {
    position: sticky;
    left: 0;
  }
  .data-table tbody td:first-child {
    z-index: 1;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .data-table thead th:first-child {
    z-index: 3; /* corner cell: above both the sticky header row and body column */
    box-shadow: 1px 0 0 var(--border);
  }
  .data-table tbody tr:hover td:first-child { background: var(--brand-accent-soft); }
  .data-table tbody tr.selected td:first-child,
  .data-table tbody tr:has(.inv-check:checked) td:first-child { background: var(--brand-accent-soft); }
}

/* Multi-column form grids (e.g. the 4-up dual-currency price inputs in the
   transport-rate, hotel-rate and market-price editors) collapse to 2 columns on
   phones so number inputs stay tappable instead of ~70px slivers. Targets the
   inline grid-template so it overrides the element's style attribute. */
@media (max-width: 860px) {
  .form-grid[style*="repeat(4"],
  .form-grid[style*="repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MERIDIAN LAYER — the authoritative surface pass.
   ───────────────────────────────────────────────────────────────────────────
   Appended last, so this is what the cascade actually resolves to. Everything
   above is either the structural base or a historical patch; this section is
   where the identity, the motion, and the dark theme are decided.

   Rules of the layer:
     · colour only via tokens — never a literal, so both themes stay in sync
     · elevation via luminance in dark, shadow in light
     · gold marks state (active / selected / focused), navy marks structure
     · every transition names its properties; nothing animates `all`
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Motion floor ─────────────────────────────────────────────────────────
   One easing curve and four durations across the whole app. Interfaces feel
   "smooth" when timings agree, not when individual widgets are fancy. */

.btn, .icon-button, .icon-btn, .nav-item, .tab, .stat-card, .qa-tile,
.hotel-card, .dest-card, .panel, .table-card, .filter-chip, .badge,
.pager button, .lang-toggle button, .theme-toggle, .mode-card, .he-amenity,
.he-tabbtn, .bk-tab, .link-btn, .sort-btn, .row-actions button {
  transition-property: background-color, background-image, border-color, color,
                       box-shadow, transform, opacity;
  transition-duration: var(--dur-2);
  transition-timing-function: var(--ease-standard);
}

/* Theme swaps animate the big flat planes only. Animating every element makes
   the switch feel laggy; animating nothing makes it feel like a page reload. */
html.theme-transition,
html.theme-transition body,
html.theme-transition .sidebar,
html.theme-transition .topbar,
html.theme-transition .panel,
html.theme-transition .table-card,
html.theme-transition .stat-card,
html.theme-transition .modal {
  transition: background-color var(--dur-4) var(--ease-standard),
              color var(--dur-4) var(--ease-standard),
              border-color var(--dur-4) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .stat-card:hover, .qa-tile:hover, .hotel-card:hover,
  .dest-card:hover, .sidebar .nav-item:hover, .icon-button:hover {
    transform: none !important;
  }
}

/* ── Type ─────────────────────────────────────────────────────────────────
   Arabic needs a touch more size and line-height than Latin at the same
   optical weight; Cairo's x-height runs small in dense tables. */

body { font-size: 13.5px; letter-spacing: -0.002em; }
html[lang="ar"] body { font-size: 14.5px; line-height: 1.62; }
html[lang="ar"] .data-table { font-size: 13.5px; }
html[lang="ar"] .btn { font-size: 13px; }

.page-title { letter-spacing: -0.022em; font-weight: 800; }
.stat-value, .numeric, .hero-metric__num, .hero-metric__value,
.wallet-metric__value, .rf-price, .hotel-card__price, .dash-hero__title {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ── Focus. One ring, always visible, always 3:1 against its surround. ──── */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-4);
}
.sidebar :where(button, a):focus-visible {
  outline-color: var(--brand-accent);
  outline-offset: -2px;
}
.input:focus, .select:focus, .textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--brand-accent);
  box-shadow: var(--ring);
  outline: none;
}

/* ── Chrome: sidebar ──────────────────────────────────────────────────── */

.sidebar { border-inline-end: 1px solid var(--sidebar-edge); }
.brand-block { border-bottom-color: var(--sidebar-edge); }
.nav-label { color: var(--sidebar-text-dim); font-weight: 700; }
.sidebar .nav-item { color: var(--sidebar-text); }

/* Nav icons sit bare on the chrome. The old build gave every item a rounded
   tile, which turned a 25-item menu into 25 competing boxes; the icon alone
   is enough to scan by. */
.sidebar .nav-item > svg,
.sidebar .nav-item > i {
  width: 17px; height: 17px; flex: 0 0 17px;
  padding: 0; background: none; border-radius: 0; box-shadow: none;
  color: rgba(255, 255, 255, 0.58);
  stroke-width: 1.9;
}
.sidebar .nav-item { gap: 11px; padding: 8px 11px; border-radius: 7px; }
.sidebar .nav-item:hover { background: rgba(255, 255, 255, 0.05); transform: none; }
[dir="rtl"] .sidebar .nav-item:hover { transform: none; }
.sidebar .nav-item:hover > svg,
.sidebar .nav-item:hover > i { background: none; color: rgba(255, 255, 255, 0.85); }

/* Active state: a lifted surface and full-strength text. One quiet signal,
   not a coloured pill — the item you're on is the only lit row on screen. */
.sidebar .nav-item.active {
  background: var(--sidebar-active-bg);
  color: #fff;
  box-shadow: none;
  font-weight: 650;
}
[dir="rtl"] .sidebar .nav-item.active { background: var(--sidebar-active-bg); }
.sidebar .nav-item.active > svg,
.sidebar .nav-item.active > i { background: none; color: #fff; box-shadow: none; }
.sidebar .nav-item.active::before {
  top: 9px; bottom: 9px; left: 0; width: 2px;
  background: var(--navy-400);
  box-shadow: none;
  border-radius: 0 2px 2px 0;
}
[dir="rtl"] .sidebar .nav-item.active::before { left: auto; right: 0; border-radius: 2px 0 0 2px; }

/* Counts are data, so they stay neutral until there is something to act on. */
.nav-count {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
  box-shadow: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sidebar-footer { border-top-color: var(--sidebar-edge); }
.account-mini {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.07);
}
.avatar { background: rgba(255, 255, 255, 0.10); color: #fff; font-weight: 650; }
.brand-mark { background: rgba(255, 255, 255, 0.10); color: #fff; box-shadow: none; }
.tier-chip, .sidebar .role-chip {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: none;
  font-weight: 600;
}

/* ── Chrome: topbar ───────────────────────────────────────────────────── */

.topbar {
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--glass-border) inset, 0 8px 24px rgba(11, 31, 82, 0.04);
}
:root[data-theme="dark"] .topbar { box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35); }

.breadcrumb-label { color: var(--text-muted); }
.breadcrumb-title { color: var(--text-primary); }
.quick-search { background: var(--surface-raised); border-color: var(--border); }
.quick-search input { color: var(--text-primary); }
.quick-search input::placeholder { color: var(--text-muted); }
.quick-search kbd { color: var(--text-muted); }
.refresh-pill { background: var(--surface-raised); border-color: var(--border); color: var(--text-secondary); }
.refresh-pill:hover { border-color: var(--border-strong); color: var(--text-primary); }
.icon-button { background: transparent; border-color: transparent; color: var(--text-muted); }
.icon-button:hover, .icon-button.active { background: var(--surface-raised); border-color: var(--border); color: var(--text-primary); }

/* Wallet pill — a value readout, not a badge. The number does the work; the
   container just groups it. */
.wallet-pill {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: 600;
  box-shadow: none;
}
.wallet-pill svg { color: var(--text-muted); }
.wallet-pill strong { color: var(--text-primary); font-weight: 650; }

.lang-toggle { background: var(--surface-raised); border-color: var(--border); }
.lang-toggle button { color: var(--text-muted); font-weight: 600; }
.lang-toggle button.active {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-subtle);
}
:root[data-theme="dark"] .lang-toggle button.active { background: var(--surface-muted); color: var(--text-primary); }
.topbar .role-chip { background: var(--surface-raised); color: var(--text-muted); border: 1px solid var(--border); }

/* ── Theme toggle ─────────────────────────────────────────────────────────
   A two-state segmented switch rather than a single icon button: with one
   icon you can never tell whether it shows the current theme or the one
   you'd get by clicking. Two slots with a moving thumb removes the guess. */

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  flex: 0 0 auto;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 30px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-subtle);
  transition: transform var(--dur-3) var(--ease-standard), background-color var(--dur-3) var(--ease-standard);
}
:root[data-theme="dark"] .theme-toggle::before {
  transform: translateX(30px);
  background: var(--surface-muted);
}
/* `dir` sits on <html>, which is also :root — so this is one element, not two. */
:root[data-theme="dark"][dir="rtl"] .theme-toggle::before { transform: translateX(-30px); }
.theme-toggle button {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
}
.theme-toggle button svg { width: 15px; height: 15px; }
.theme-toggle button:hover { color: var(--text-secondary); }
:root:not([data-theme="dark"]) .theme-toggle button[data-theme-set="light"] { color: var(--text-primary); }
:root[data-theme="dark"] .theme-toggle button[data-theme-set="dark"] { color: var(--text-primary); }

/* ── Buttons ──────────────────────────────────────────────────────────────
   Two weights of "primary": navy is the workhorse (save, confirm, submit),
   gold is the invitation (request a quote, new booking). Gold carries navy
   text at 6.7:1 — the pairing is accessible, which is why it can be used
   at full saturation instead of being watered down. */

/* Flat fills, one hairline, a real press. No gradients, no glow, no hover
   float — those three are what made the old buttons read as generated rather
   than drawn. Weight is carried by colour and size instead. */

.btn {
  min-height: 38px;
  padding: 0 15px;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
}
.btn i, .btn svg { width: 16px; height: 16px; stroke-width: 2; }
.btn:active { transform: none; }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; }
.btn-sm i, .btn-sm svg { width: 14px; height: 14px; }
.btn-icon { width: 34px; min-height: 34px; padding: 0; border-radius: 8px; }
.btn-block { width: 100%; }

/* Primary — the accent, solid. One per screen: the action that commits. */
.btn-primary {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: #fff;
}
.btn-primary::after { content: none; }
.btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.btn-primary:active { background: var(--navy-800); border-color: var(--navy-800); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24); }
:root[data-theme="dark"] .btn-primary { background: var(--navy-500); border-color: var(--navy-500); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--navy-400); border-color: var(--navy-400); }
:root[data-theme="dark"] .btn-primary:active { background: var(--navy-600); border-color: var(--navy-600); }

/* Was a second accent colour. It is now the same accent — a second saturated
   hue for "also important" is exactly the ornament this system avoids. */
.btn-teal, .request-cta {
  background: var(--navy-600);
  border-color: var(--navy-600);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.btn-teal:hover, .request-cta:hover {
  background: var(--navy-700);
  border-color: var(--navy-700);
  box-shadow: none;
}
.btn-teal:active, .request-cta:active { background: var(--navy-800); border-color: var(--navy-800); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.24); }
:root[data-theme="dark"] .btn-teal,
:root[data-theme="dark"] .request-cta { background: var(--navy-500); border-color: var(--navy-500); }
:root[data-theme="dark"] .btn-teal:hover,
:root[data-theme="dark"] .request-cta:hover { background: var(--navy-400); border-color: var(--navy-400); }
.request-cta { min-height: 42px; padding: 0 18px; border-radius: 9px; }
.request-cta-sm { min-height: 34px; padding: 0 13px; border-radius: 7px; box-shadow: none; }
.request-cta svg, .btn-teal svg { color: currentColor; }

/* Secondary — a hairline and nothing else until you touch it. */
.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
.btn-outline:hover {
  background: var(--surface-raised);
  border-color: var(--text-muted);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}
.btn-outline:active { background: var(--surface-muted); }

.btn-muted { background: var(--surface-muted); border-color: transparent; color: var(--text-secondary); }
.btn-muted:hover { background: var(--surface-sunken); color: var(--text-primary); }
.btn-muted:active { box-shadow: inset 0 2px 4px rgba(11, 31, 82, 0.12); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); box-shadow: none; transform: none; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: var(--success-hover); border-color: var(--success-hover); box-shadow: none; transform: none; }
:root[data-theme="dark"] .btn-danger,
:root[data-theme="dark"] .btn-success { color: var(--navy-950); font-weight: 700; }

.btn-glass { background: var(--surface-glass); border-color: var(--glass-border); color: var(--text-secondary); box-shadow: none; }
.btn-glass:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); transform: none; }

.btn:disabled { opacity: 0.45; box-shadow: none !important; transform: none !important; }
.link-btn { color: var(--brand-accent-text); font-weight: 600; }
.link-btn:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Buttons sitting on the dark hero get their own light treatment. */
.dash-hero__cta .btn-glass {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.dash-hero__cta .btn-glass:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.dash-hero__cta .btn-primary { background: #fff; border-color: #fff; color: var(--n-900); font-weight: 600; }
.dash-hero__cta .btn-primary:hover { background: var(--n-100); border-color: var(--n-100); }

/* Icon-only row actions in tables: quiet until hovered, never a coloured blob. */
.row-actions .btn, .row-actions button {
  width: 30px; min-height: 30px; padding: 0;
  border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
}
.row-actions .btn:hover, .row-actions button:hover {
  background: var(--surface-muted); border-color: var(--border); color: var(--text-primary);
}
.row-actions .btn-danger, .row-actions button.btn-danger { background: transparent; color: var(--text-muted); }
.row-actions .btn-danger:hover, .row-actions button.btn-danger:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

/* Pills in the topbar keep the same button geometry so the bar reads as one row. */
.refresh-pill, .wallet-pill { height: 38px; border-radius: 8px; }
.lang-toggle, .theme-toggle { height: 38px; border-radius: 8px; }
.lang-toggle button, .theme-toggle button { border-radius: 6px; height: 30px; }
.theme-toggle::before { height: 30px; border-radius: 6px; }
.icon-button { width: 38px; height: 38px; border-radius: 8px; }

/* ── Surfaces ─────────────────────────────────────────────────────────── */

.panel, .table-card, .filter-rail, .stat-card, .qa-tile, .hotel-card, .modal {
  background: var(--surface);
  border: 1px solid var(--border);
}
/* Flat surfaces with a hairline. Shadows on every card produce a page of
   floating tiles with no depth order; the border is enough to separate a
   card from the ground, and real elevation is reserved for things that
   actually float (modals, popovers, the bulk dock). */
.panel, .table-card, .filter-rail { box-shadow: none; border-radius: var(--r-sm); }
.panel-header, .filter-head, .table-toolbar, .table-foot {
  background: var(--surface);
  border-color: var(--border);
}
.panel-title, .modal-title, .filter-head { color: var(--text-primary); }
.panel-subtitle, .page-subtitle { color: var(--text-muted); }
.page-kicker { color: var(--brand-accent-text); letter-spacing: 0.10em; }

.stat-card {
  border-radius: var(--r-sm);
  box-shadow: none;
  background: var(--surface);
}
.stat-card:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}
/* Stat icons were five different hues cycling by position, which implied a
   categorical meaning that does not exist. They are all one neutral chip now;
   the label and the number are what differ. */
.stat-ico,
.stats-grid .stat-card:nth-child(5n+1) .stat-ico,
.stats-grid .stat-card:nth-child(5n+2) .stat-ico,
.stats-grid .stat-card:nth-child(5n+3) .stat-ico,
.stats-grid .stat-card:nth-child(5n+4) .stat-ico,
.stats-grid .stat-card:nth-child(5n+5) .stat-ico {
  width: 32px; height: 32px;
  border-radius: var(--r-6);
  background: var(--surface-muted);
  color: var(--text-muted);
  box-shadow: none;
}
.stat-ico svg { width: 16px; height: 16px; stroke-width: 1.8; }
.stat-label { color: var(--text-muted); letter-spacing: 0.06em; }
.stat-value { color: var(--text-primary); }
.stat-sub { color: var(--text-muted); }

.info-item { background: var(--surface-raised); border-color: var(--border); }
.info-label { color: var(--text-muted); }
.info-value { color: var(--text-primary); }
.tabs { background: var(--surface-raised); border-color: var(--border); }
.tab { color: var(--text-muted); }
.tab:hover { color: var(--text-secondary); }
.tab.active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-subtle); }
.detail-tabs { border-bottom-color: var(--border); }

/* ── Tables ───────────────────────────────────────────────────────────────
   The densest surface in the product — agents read these for hours. Header
   is a flat raised plane (no gradient: gradients fight sticky headers when
   rows scroll under them), rows separate by hairline, and the selected row
   is marked by a gold rail so selection survives colour-blindness. */

.data-table thead th {
  background: var(--surface-raised);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
  font-weight: 800;
  letter-spacing: 0.05em;
}
.data-table tbody td { border-bottom-color: var(--border); color: var(--text-secondary); }
.data-table tbody tr:hover td { background: var(--accent-tint); }
.data-table tbody tr.selected td,
.data-table tbody tr:has(.inv-check:checked) td { background: var(--accent-tint-strong); }
.data-table tbody tr.selected td:first-child,
.data-table tbody tr:has(.inv-check:checked) td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-accent);
}
[dir="rtl"] .data-table tbody tr.selected td:first-child,
[dir="rtl"] .data-table tbody tr:has(.inv-check:checked) td:first-child {
  box-shadow: inset -3px 0 0 var(--brand-accent);
}
.data-table .primary-text { color: var(--text-primary); }
.data-table .secondary-text, .secondary-text { color: var(--text-muted); }
.data-table input[type="checkbox"], .inv-check, .check-row input { accent-color: var(--brand-accent); }
.logo-cell { background: var(--surface-raised); border-color: var(--border); color: var(--text-secondary); }
.pager button { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.pager button:hover:not(.active) { border-color: var(--border-strong); color: var(--text-primary); }
.pager button.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
:root[data-theme="dark"] .pager button.active { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); }

@media (max-width: 860px) {
  .data-table tbody td:first-child { background: var(--surface); box-shadow: 1px 0 0 var(--border); }
  .data-table thead th:first-child { background: var(--surface-raised); box-shadow: 1px 0 0 var(--border); }
  .data-table tbody tr:hover td:first-child,
  .data-table tbody tr.selected td:first-child { background: var(--accent-tint-strong); }
}

/* ── Badges. Status must survive both themes and greyscale, so each carries
      a dot as well as a hue. ─────────────────────────────────────────────── */

.badge { font-weight: 700; letter-spacing: 0.01em; }
.badge-standard { background: var(--surface-muted); color: var(--text-secondary); }
.badge-teal { background: var(--brand-accent-soft); color: var(--brand-accent-text); }
.badge-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); background: transparent; }
.badge-platinum { background: var(--purple-soft); color: var(--purple); }
.badge-credit { background: var(--success-soft); color: var(--success); }
.badge-debit { background: var(--danger-soft); color: var(--danger); }
.badge-refund { background: var(--info-soft); color: var(--info); }

/* ── Forms ────────────────────────────────────────────────────────────── */

.field label, .form-field label, .field > span { color: var(--text-secondary); font-weight: 700; }
.input, .select, .textarea,
.field input, .field select, .field textarea,
.form-field input, .form-field select, .form-field textarea {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
  border-radius: var(--r-6);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard);
}
.input::placeholder, .textarea::placeholder,
.field input::placeholder, .field textarea::placeholder,
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-muted); }
.field input:hover, .field select:hover, .field textarea:hover,
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--border-strong); }
.help-text, .rf-help { color: var(--text-muted); }
.form-section-title { color: var(--text-primary); border-bottom-color: var(--border); }
.modal-body .form-section { background: var(--surface-raised); border-color: var(--border); }
.modal-body .form-section-title { color: var(--text-primary); }
.modal-body .form-section-title::before { background: var(--brand-accent); }
.rf-price { color: var(--brand-accent-text); }

/* Native controls follow the theme (date pickers, select arrows, scrollbars) */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
}

/* ── Modals & overlays ────────────────────────────────────────────────── */

.modal-overlay { background: rgba(5, 13, 36, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
:root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.68); }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal);
}
.modal-header, .modal-footer { background: var(--surface); border-color: var(--border); }
.modal-overlay.open .modal { animation: modalIn var(--dur-4) var(--ease-decel); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.toast {
  background: var(--navy-900);
  color: #fff;
  border: 1px solid var(--sidebar-edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  animation: toastIn var(--dur-4) var(--ease-decel);
}
:root[data-theme="dark"] .toast { background: var(--surface-overlay, var(--surface-muted)); color: var(--text-primary); }
.toast.success { background: var(--success); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
.toast.warning { background: var(--warning); color: #fff; }
:root[data-theme="dark"] .toast.success,
:root[data-theme="dark"] .toast.error,
:root[data-theme="dark"] .toast.warning { color: var(--navy-950); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.alert { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); border-radius: var(--r-8); }

/* Offer popup — a drawn medallion instead of the 🎁 emoji it used to render.
   Emoji pick up the OS font, so the same modal looked different on every
   machine and had no relationship to the rest of the icon set. */
.offer-medallion {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-accent-soft);
  color: var(--brand-accent-text);
  box-shadow: inset 0 0 0 1px var(--accent-tint-strong);
}
.offer-medallion svg { width: 30px; height: 30px; stroke-width: 1.8; }
.offer-validity {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-muted); color: var(--text-muted);
  font-size: 11px; font-weight: 600;
}

/* ── Empty & loading states ───────────────────────────────────────────────
   An empty table should read as "nothing here yet", not as "something
   broke" — so it keeps the page's own surface and never uses danger red. */

.empty-state { color: var(--text-muted); }
.empty-state strong { color: var(--text-primary); }
.empty-illustration { border-color: var(--border); background: var(--surface-raised); box-shadow: var(--shadow-subtle); }
.empty-state svg { color: var(--text-muted); opacity: 0.6; }

.skeleton { background: var(--surface-muted); }
.skeleton::after { background: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent); }

/* ── Dashboard hero ───────────────────────────────────────────────────── */

/* One flat dark plane. The previous version stacked two radial washes and a
   diagonal gradient behind the copy — three light sources on a panel whose
   job is to state a name and a balance. */
.dash-hero {
  border-radius: var(--r-md);
  border: 1px solid transparent;
  box-shadow: none;
  background: var(--n-900);
}
:root[data-theme="dark"] .dash-hero { background: var(--surface-raised); border-color: var(--border); }
.dash-hero__eyebrow { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.dash-hero__sub { color: rgba(255, 255, 255, 0.68); }
.dash-hero__title { letter-spacing: -0.025em; }
.hero-metric { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); border-radius: var(--r-sm); }
.hero-metric:hover { background: rgba(255, 255, 255, 0.10); }
.hero-metric__ico { background: rgba(255, 255, 255, 0.10); }
.hero-metric__label { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
/* The balance is the number the page exists to show. It earns emphasis from
   size and a lighter surface — not from being the only coloured object. */
.hero-metric--balance {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.hero-metric--balance:hover { background: rgba(255, 255, 255, 0.15); }
.hero-metric--balance .hero-metric__value { font-size: 27px; }

/* ── Quick actions / destination cards / hotel cards ──────────────────── */

.qa-tile { background: var(--surface); border-color: var(--border); color: var(--text-secondary); border-radius: var(--r-sm); box-shadow: none; }
.qa-tile:hover { transform: none; border-color: var(--border-strong); background: var(--surface-raised); box-shadow: none; color: var(--text-primary); }
.qa-ico { background: var(--surface-muted); color: var(--text-secondary); border-radius: var(--r-sm); box-shadow: none; }
.qa-ico svg { stroke-width: 1.7; }
.qa-tile:hover .qa-ico { background: var(--brand-accent-soft); color: var(--brand-accent-text); box-shadow: none; }

.dest-card { background: var(--surface); border-color: var(--border); }
.dest-card::before { background: var(--brand-accent); }
.dest-card:hover { border-color: var(--border-strong); }
.dest-card-icon { background: var(--surface-muted); border-color: var(--border); color: var(--text-secondary); }
.dest-card:hover .dest-card-icon { background: var(--brand-accent-soft); color: var(--brand-accent-text); box-shadow: none; }
.dest-card-name { color: var(--text-primary); }
.dest-card-sub, .dest-card-count { color: var(--text-muted); }

.hotel-card { border-radius: var(--r-md); box-shadow: var(--shadow-soft); }
.hotel-card:hover { border-color: var(--accent-tint-strong); box-shadow: var(--shadow-card); }
.hotel-card__media { background: var(--surface-muted); }
.hotel-card__initials { background: linear-gradient(140deg, var(--navy-700), var(--navy-900)); color: #fff; }
.hotel-card__name, .hotel-card__price { color: var(--text-primary); }
.hotel-card__meta { color: var(--text-secondary); }
.hotel-view-toggle { background: var(--surface); border-color: var(--border); }
.hotel-view-btn { color: var(--text-muted); }
.hotel-view-btn.active { background: var(--brand-accent-soft); color: var(--brand-accent-text); }
.filter-chip { background: var(--brand-accent-soft); border-color: var(--accent-tint-strong); color: var(--brand-accent-text); }
.filter-chip--clear { background: var(--surface-muted); border-color: var(--border); color: var(--text-secondary); }
.hotel-attr-chip, .hotel-attr-more, .amenity-chip, .area-chip {
  background: var(--surface-muted); color: var(--text-secondary); border-color: var(--border);
}

/* ── Collapsed-sidebar brand mark + tooltips ──────────────────────────── */

@media (min-width: 861px) {
  body.sidebar-collapsed .brand-row::before {
    background: linear-gradient(140deg, var(--gold-400), var(--gold-600));
    color: var(--navy-900);
    box-shadow: 0 6px 16px var(--accent-glow);
  }
  body.sidebar-collapsed .nav-item[data-tip]::after {
    background: var(--navy-900);
    color: #fff;
    border: 1px solid var(--sidebar-edge);
    box-shadow: var(--shadow-popover);
  }
  :root[data-theme="dark"] body.sidebar-collapsed .nav-item[data-tip]::after {
    background: var(--surface-muted); color: var(--text-primary);
  }
}

/* ── Bulk bar / glass utilities in dark ───────────────────────────────── */

.bulk-toolbar { background: var(--glass-bg-strong); border-color: var(--glass-border); box-shadow: var(--shadow-float); }
.bulk-toolbar .bulk-info::before { background: linear-gradient(var(--gold-400), var(--gold-600)); }
.bulk-toolbar .bulk-info .primary-text { color: var(--text-primary); }
.bulk-toolbar .bulk-info .secondary-text { color: var(--brand-accent-text); }
.bulk-bar { background: var(--brand-accent-soft); color: var(--text-primary); border-bottom-color: var(--border); }
.glass-panel, .glass-card, .glass-modal, .glass-pill {
  background: var(--glass-bg); border-color: var(--glass-border); box-shadow: var(--glass-shadow);
}

/* ── Scrollbars follow the theme (otherwise dark mode gets white gutters) ─ */

* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }
.sidebar { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); background-clip: content-box; }

/* ── Selection ────────────────────────────────────────────────────────── */

::selection { background: var(--accent-tint-strong); color: var(--text-primary); }

/* ── Entry choreography ───────────────────────────────────────────────────
   Cards fade up in a short stagger on page render. Capped at six children:
   beyond that the last card arrives late enough to feel like lag. */

@keyframes meridianRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.stats-grid > *, .quick-actions > *, .dest-grid > * {
  animation: meridianRise var(--dur-4) var(--ease-decel) both;
}
.stats-grid > *:nth-child(1), .quick-actions > *:nth-child(1), .dest-grid > *:nth-child(1) { animation-delay: 0ms; }
.stats-grid > *:nth-child(2), .quick-actions > *:nth-child(2), .dest-grid > *:nth-child(2) { animation-delay: 40ms; }
.stats-grid > *:nth-child(3), .quick-actions > *:nth-child(3), .dest-grid > *:nth-child(3) { animation-delay: 80ms; }
.stats-grid > *:nth-child(4), .quick-actions > *:nth-child(4), .dest-grid > *:nth-child(4) { animation-delay: 120ms; }
.stats-grid > *:nth-child(5), .quick-actions > *:nth-child(5), .dest-grid > *:nth-child(5) { animation-delay: 160ms; }
.stats-grid > *:nth-child(n+6), .quick-actions > *:nth-child(n+6), .dest-grid > *:nth-child(n+6) { animation-delay: 200ms; }

/* ── Login ────────────────────────────────────────────────────────────────
   The remote Unsplash photo is gone: it was a third-party request on the
   critical path of the one page every session starts with, and it rendered
   as a grey box whenever the CDN was slow. Replaced with a composed navy
   field — a horizon glow, a starfield of route dots, and a gold meridian
   arc — which ships inside the stylesheet and paints immediately. */

.login-page { background: var(--n-950); padding: 24px; }
:root[data-theme="dark"] .login-page { background: #06080C; }
.login-shell {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.40);
  overflow: hidden;
}
.login-panel {
  position: relative;
  background: var(--n-900);
  border-inline-end: 1px solid rgba(255, 255, 255, 0.07);
}
.login-panel > * { position: relative; z-index: 1; }
.login-copy h1 { letter-spacing: -0.03em; font-weight: 700; }
.login-copy p:last-child { color: rgba(255, 255, 255, 0.62); }
.login-copy .eyebrow, .login-card-head .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
html[lang="ar"] .login-copy .eyebrow,
html[lang="ar"] .login-card-head .eyebrow { letter-spacing: 0; text-transform: none; }
.login-card-head .eyebrow { color: var(--text-muted); }
.login-metrics div {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: var(--r-sm);
}
.login-metrics strong { color: #fff; font-weight: 650; }
.login-metrics span { color: rgba(255, 255, 255, 0.52); font-weight: 500; }
.login-card { background: var(--surface); }
.login-card-head h2 { color: var(--text-primary); letter-spacing: -0.02em; }
.login-foot { color: var(--text-muted); }
.login-card-controls { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.login-card-controls .btn-sm { min-height: 36px; padding: 0 12px; }

/* The only action on the page — sized up, same accent as everywhere else. */
#btnLogin.btn-primary { min-height: 44px; font-size: 14px; }

/* ── Brand artwork ────────────────────────────────────────────────────────
   The logo only ever sits on a navy plane (sidebar, login panel) in both
   themes, so the white lockup is the only file needed — no recolouring, no
   theme variant, no filters touching the artwork. Sized by height so the
   supplied asset's own aspect ratio is preserved exactly as delivered. */
.brand-logo, .login-logo-img {
  width: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.brand-logo { height: 34px; max-width: calc(var(--sidebar-w) - 56px); }
.login-brand .login-logo-img { height: 44px; max-width: 260px; }
@media (max-width: 900px) { .login-brand .login-logo-img { height: 36px; } }

/* The panel used to be three blocks pushed to the corners of a 620px column,
   which left two large voids. Grouping the mark with the copy and letting the
   metrics sit at the foot removes them. */
.login-shell { min-height: 560px; }
.login-panel { justify-content: flex-end; gap: 28px; }
.login-brand { margin-bottom: auto; }
.login-copy h1 { margin-bottom: 10px; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; min-height: 0; }
  .login-panel { gap: 20px; padding: 28px; justify-content: flex-start; }
  .login-brand { margin-bottom: 0; }
  .login-copy h1 { font-size: 28px; line-height: 36px; }
  .login-card { padding: 26px; }
  .login-metrics { gap: 6px; }
}

/* ── Dark-mode corrections for surfaces that assumed a white page ──────── */

:root[data-theme="dark"] {
  /* modal / popover level — one step above --surface-raised */
  --surface-overlay: #1E2A45;
}
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .bulk-toolbar { background: var(--surface-overlay); }
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { background: var(--surface-overlay); }
:root[data-theme="dark"] .modal-body .form-section { background: var(--surface-raised); }
:root[data-theme="dark"] .he-supp,
:root[data-theme="dark"] .he-rate,
:root[data-theme="dark"] .tr-ep,
:root[data-theme="dark"] .he-thumb,
:root[data-theme="dark"] .he-main-preview { background: var(--surface-raised); border-color: var(--border); }
:root[data-theme="dark"] .he-tabbtn { color: var(--text-secondary); }
:root[data-theme="dark"] .he-thumb-actions button { background: rgba(232, 236, 245, 0.90); color: var(--navy-900); }
:root[data-theme="dark"] .hd-policy { background: var(--surface-raised); }
:root[data-theme="dark"] .empty-illustration { background: var(--surface-raised); }
:root[data-theme="dark"] img.hotel-card__media,
:root[data-theme="dark"] .dest-card-img { filter: brightness(0.92); }
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .login-logo-img { filter: none; }

/* Ensure anything still painting a literal white plane in dark mode is caught. */
:root[data-theme="dark"] .table-toolbar,
:root[data-theme="dark"] .panel-header,
:root[data-theme="dark"] .table-foot,
:root[data-theme="dark"] .tab.active,
:root[data-theme="dark"] .pager button,
:root[data-theme="dark"] .quick-search kbd,
:root[data-theme="dark"] .hms-nav:hover { background: var(--surface-raised); }

/* ── Print: never print the dark theme or the app chrome ──────────────── */

@media print {
  .sidebar, .topbar, .bulk-toolbar, .toast, .page-actions, .filter-rail { display: none !important; }
  .main-content { margin: 0 !important; padding-top: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .panel, .table-card { box-shadow: none !important; border-color: #ccc !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   IDENTITY PASS — navy chrome, drawn status colours, Phosphor sizing.
   ───────────────────────────────────────────────────────────────────────────
   Three corrections to the layer above:

   1. CHROME IS NAVY, NOT BLACK. Neutral-grey chrome is the right call for a
      product whose brand is neutral. Elbakri's mark is #0B1F52, so grey chrome
      throws the identity away. The sidebar is the logo navy, flat — brand
      colour, none of the gradient/glow ornament it used to carry.

   2. STATUS COLOURS ARE DRAWN, NOT DEFAULTED. #22c55e / #ef4444 are the stock
      framework values; they read as a template and they clash with navy.
      These are mixed for this palette: pine green, oxblood red, ochre amber —
      each held to >=4.9:1 on its own surface.

   3. BADGES ARE TAGS, NOT PILLS. A saturated capsule per row is the loudest
      thing in a table it is only annotating. Squared tag, hairline, dot.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Chrome — the logo navy itself. */
  --sidebar-bg: #0B1F52;
  --sidebar-edge: rgba(255, 255, 255, 0.09);
  --sidebar-text: rgba(255, 255, 255, 0.74);
  --sidebar-text-dim: rgba(255, 255, 255, 0.40);
  --sidebar-active-bg: rgba(255, 255, 255, 0.10);

  /* Page ground picks up a trace of the brand so white cards read as warm-cool
     against it rather than floating on flat grey. */
  --bg-base: #F4F6FA;
  --border: #E1E6EF;
  --border-strong: #C7CFDE;

  /* Status — mixed for this palette, not taken from a framework default. */
  --success: #17795E;        /* pine — 5.3:1 on white */
  --success-soft: #E1F1EB;
  --success-hover: #12634C;
  --danger: #B0392F;         /* oxblood — 6.1:1 on white */
  --danger-soft: #FAE7E5;
  --danger-hover: #932E26;
  --warning: #9A6414;        /* ochre — 5.0:1 on white */
  --warning-soft: #F7EDDC;
  --info: var(--navy-600);
  --info-soft: var(--navy-50);
}

:root[data-theme="dark"] {
  /* Deep navy, not neutral black — same reasoning as light. */
  --sidebar-bg: #081432;
  --bg-base: #060A14;

  --surface: #0C1222;
  --surface-raised: #131A2C;
  --surface-muted: #1A2338;
  --surface-sunken: #080D18;
  --surface-overlay: #1B2439;
  --border: #232D44;
  --border-strong: #35415C;

  --success: #3FB98C;
  --success-soft: rgba(63, 185, 140, 0.15);
  --success-hover: #2FA57A;
  --danger: #E8695C;
  --danger-soft: rgba(232, 105, 92, 0.15);
  --danger-hover: #D9564A;
  --warning: #D9A441;
  --warning-soft: rgba(217, 164, 65, 0.15);
  --info: var(--navy-400);
  --info-soft: rgba(97, 128, 214, 0.15);
}

/* ── Phosphor sizing ──────────────────────────────────────────────────────
   Phosphor renders as a font, so the `svg { width: … }` rules throughout this
   file no longer bite. Size is font-size; the box follows it. */

.ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
.btn .ph { font-size: 16px; }
.btn-sm .ph { font-size: 15px; }
.nav-item .ph, .sidebar .nav-item > .ph { font-size: 17px; width: 17px; height: 17px; flex: 0 0 17px; }
.icon-button .ph, .icon-btn .ph { font-size: 17px; }
.stat-ico .ph { font-size: 17px; }
.qa-ico .ph { font-size: 21px; }
.hero-metric__ico .ph { font-size: 17px; }
.dest-card-icon .ph { font-size: 19px; }
.quick-search .ph { font-size: 16px; color: var(--text-muted); }
.badge .ph { font-size: 12px; }
.row-actions .ph { font-size: 16px; }
.empty-state .ph { font-size: 34px; }
.offer-medallion .ph { font-size: 30px; }
.modal-header .icon-button .ph { font-size: 18px; }
.table-toolbar .ph, .filter-head .ph { font-size: 16px; }
.he-tabbtn .ph, .bk-tab .ph { font-size: 16px; }
.login-card .ph { font-size: 17px; }
/* The submit spinner is a glyph now, so rotate the element itself. */
.btn-spin .ph { animation: btnspin 0.7s linear infinite; }

/* ── Navy chrome ──────────────────────────────────────────────────────── */

.sidebar { background: var(--sidebar-bg); }
.brand-block { border-bottom-color: var(--sidebar-edge); }
.sidebar .nav-item > .ph { color: rgba(255, 255, 255, 0.60); }
.sidebar .nav-item:hover > .ph { color: rgba(255, 255, 255, 0.88); }
.sidebar .nav-item.active > .ph { color: #fff; }
.sidebar .nav-item.active::before { background: #fff; }

.topbar { background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }

/* ── Status as tags ───────────────────────────────────────────────────── */

.badge {
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.badge::before { width: 5px; height: 5px; }

.badge-pending, .badge-unpaid, .badge-warning, .badge-submitted, .badge-under_review {
  background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}
.badge-confirmed, .badge-paid, .badge-approved, .badge-active, .badge-success, .badge-completed {
  background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent);
}
.badge-cancelled, .badge-rejected, .badge-overdue, .badge-inactive, .badge-danger {
  background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.badge-info, .badge-ticketed {
  background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent);
}
.badge-standard, .badge-silver {
  background: var(--surface-muted); color: var(--text-secondary); border-color: var(--border);
}
.badge-teal, .badge-gold, .badge-platinum {
  background: var(--brand-accent-soft); color: var(--brand-accent-text); border-color: color-mix(in srgb, var(--brand-accent) 22%, transparent);
}
.badge-credit { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.badge-debit { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.badge-refund { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
/* Older engines ignore color-mix; the tinted fill alone still reads. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .badge { border-color: transparent; }
}

.trend { border-radius: 6px; background: var(--success-soft); color: var(--success); }
.trend.down { background: var(--danger-soft); color: var(--danger); }

/* Six stat cards across 1440px leaves ~150px of usable width. A fixed 26px
   value broke "EGP 412,300.50" across two lines mid-number, which is unreadable
   for a balance. Fluid size keeps the whole figure on one line down to ~1100px,
   and the grid drops to three columns below that. */
.stat-value {
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: keep-all;
}
.hero-metric__value { font-size: clamp(19px, 1.7vw, 27px); overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 1180px) { .stat-value { font-size: 22px; } }

/* ── Shapes ───────────────────────────────────────────────────────────────
   One radius family: 6px for controls and tags, 8px for buttons and inputs,
   10px for cards and panels. The old file mixed 4/8/10/12/14/16/20/999 with
   no rule, which is what made the surfaces feel unrelated. */

.panel, .table-card, .filter-rail, .stat-card, .qa-tile, .hotel-card, .info-item,
.modal-body .form-section, .he-rate, .he-supp, .tr-ep, .dest-card { border-radius: 10px; }
.modal { border-radius: 12px; }
.tabs, .lang-toggle, .theme-toggle, .wallet-pill, .refresh-pill { border-radius: 8px; }
.tab, .filter-chip, .amenity-chip, .area-chip, .hotel-attr-chip, .ctx-chip { border-radius: 6px; }
.avatar, .logo-cell, .stat-ico, .qa-ico, .dest-card-icon, .hero-metric__ico { border-radius: 8px; }
.filter-chip, .amenity-chip, .area-chip, .hotel-attr-chip { border-radius: 6px; }

/* ── Table density ────────────────────────────────────────────────────── */

.data-table thead th { background: var(--surface-raised); border-bottom: 1px solid var(--border); }
.data-table tbody tr:hover td { background: var(--surface-raised); }
.data-table tbody tr.selected td,
.data-table tbody tr:has(.inv-check:checked) td { background: var(--brand-accent-soft); }
:root[data-theme="dark"] .data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }

/* ── Dark: keep the login and hero on navy, not black ─────────────────── */

.login-page { background: #06101F; }
:root[data-theme="dark"] .login-page { background: #04090F; }
.login-panel { background: var(--sidebar-bg); }
:root[data-theme="dark"] .login-panel { background: #081432; }
.dash-hero { background: var(--sidebar-bg); }
:root[data-theme="dark"] .dash-hero { background: var(--surface-raised); border-color: var(--border); }
.toast { background: var(--sidebar-bg); }

/* ═══════════════════════════════════════════════════════════════════════════
   CONTRAST CORRECTIONS
   ───────────────────────────────────────────────────────────────────────────
   Every value here comes from an automated audit of the rendered pages, not
   from arithmetic on paper: each text node was measured against its real
   composited background in both themes. Seven root causes accounted for all
   107 failures.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* 1. Muted text cleared 4.5:1 on white but not on --surface-raised or the
        page ground, where most of it actually sits (table headers, subtitles,
        chips). Measured on --bg-base now: 4.96:1. */
  --text-muted: #626B7C;

  /* 2. Sidebar group labels were 3.6:1 on the navy. */
  --sidebar-text-dim: rgba(255, 255, 255, 0.55);

  /* 3. Ochre on its own soft fill was 4.30:1. */
  --warning: #8A5810;
}

:root[data-theme="dark"] {
  --sidebar-text-dim: rgba(255, 255, 255, 0.55);
  /* 4. Info at navy-400 on its 15% fill was 4.15:1; navy-300 is 6.5:1. */
  --info: var(--navy-300);
}

/* 5. Pager's current page put navy-900 ink on a navy-400 chip in dark (4.18:1).
      White on navy-500 instead. */
:root[data-theme="dark"] .pager button.active {
  background: var(--navy-500);
  border-color: var(--navy-500);
  color: #fff;
}

/* 6. The hero's white CTA lost its background to the dark .btn-primary rule
      (higher specificity) but kept its dark ink — 2.99:1, on the most
      prominent button on the page. Restated at matching specificity. */
:root[data-theme="dark"] .dash-hero__cta .btn-primary {
  background: #fff;
  border-color: #fff;
  color: var(--n-900);
}
:root[data-theme="dark"] .dash-hero__cta .btn-primary:hover {
  background: var(--n-200);
  border-color: var(--n-200);
}

/* 7. The wallet "Deposited" figure was painted with --brand-navy-2, which is
      near-black in dark mode — 1.01:1 against its own card, i.e. invisible.
      All four wallet variants are restated against theme-aware tokens. */
.wallet-metric--deposit .wallet-metric__value { color: var(--text-primary); }
.wallet-metric--deposit .wallet-metric__icon { background: var(--surface-muted); color: var(--text-secondary); }
.wallet-metric--used .wallet-metric__value { color: var(--danger); }
.wallet-metric--balance {
  border-color: color-mix(in srgb, var(--success) 26%, transparent);
  background: var(--success-soft);
}
.wallet-metric--balance .wallet-metric__value { color: var(--success); }
.wallet-metric--balance .wallet-metric__icon { background: var(--surface); color: var(--success); }
.wallet-metric--negative { border-color: color-mix(in srgb, var(--danger) 26%, transparent); background: var(--danger-soft); }
.wallet-metric--negative .wallet-metric__value,
.wallet-metric--negative .wallet-metric__icon { color: var(--danger); }
.wallet-metric__label { color: var(--text-muted); }
/* Muted grey on the tinted balance card was 3.86:1 in dark — the card's own
   fill lifts the floor, so its label needs the next step up. */
.wallet-metric--balance .wallet-metric__label,
.wallet-metric--negative .wallet-metric__label { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT CORRECTIONS
   ───────────────────────────────────────────────────────────────────────────
   From an automated sweep of 15 pages x 3 widths x 2 themes x 2 directions.
   Four root causes produced all 788 occurrences.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. The topbar overflowed by up to 136px between 861px and desktop ─────
   There was a desktop layout and an ≤860px wrapped layout, and nothing in
   between — so at tablet width the bar simply ran past its own right edge,
   taking the search field (62px over) with it. The cause is rigid children:
   a 190px breadcrumb floor and a fixed-width search that could not give up
   space. Both now shrink, and non-essential text drops out in tiers. */

.topbar { gap: 10px; min-width: 0; }
.topbar > * { min-width: 0; }
.breadcrumb { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.breadcrumb-label, .breadcrumb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The search absorbs whatever slack is left instead of forcing an overflow. */
.quick-search {
  width: auto;
  flex: 1 1 clamp(120px, 26vw, 380px);
  max-width: 380px;
  min-width: 0;
}
.quick-search input { min-width: 0; }
.wallet-pill, .refresh-pill, .lang-toggle, .theme-toggle, .topbar-actions { flex: 0 0 auto; }
.wallet-pill { min-width: 0; }
.wallet-pill strong { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1400px) {
  /* "Just now" is a nicety; the refresh affordance is the icon. The base rule
     carries gap:8px, which kept 19px of empty track once the label was gone. */
  .refresh-pill { width: 38px; padding: 0; gap: 0; justify-content: center; }
  .refresh-pill span { display: none; }
}

/* Toolbars above tables held their buttons on one nowrap line and overran the
   card by up to 18px at tablet width. */
.table-toolbar, .toolbar-actions, .page-actions { flex-wrap: wrap; min-width: 0; }
.table-toolbar { row-gap: 8px; }

@media (max-width: 1240px) {
  .quick-search kbd { display: none; }
  .topbar .role-chip { display: none; }
  /* Keep the balance, drop the word in front of it. */
  .wallet-pill > span { display: none; }
}

@media (max-width: 1080px) {
  .breadcrumb-label { display: none; }
  .topbar-actions .icon-button:nth-child(n + 2) { display: none; }
  .topbar { padding: 0 14px; }
}

@media (max-width: 940px) and (min-width: 861px) {
  /* Last resort before the wrapped layout takes over: the search collapses to
     its icon, which still opens the same field on focus. */
  .quick-search { flex: 0 0 42px; max-width: 42px; padding: 0; justify-content: center; }
  .quick-search input { display: none; }
}

/* ── 2. Icon boxes were 9px narrower than their own glyph ─────────────────
   `.ph` was pinned to width:1em/height:1em, but a Phosphor glyph's advance
   width is not exactly 1em — so every icon reported horizontal overflow, and
   the button and row-action boxes around them inherited it. Letting the box
   size to the glyph removes the overflow without changing the optical size,
   which is set by font-size. */
.ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: auto;
  height: auto;
  flex: 0 0 auto;
}
.nav-item .ph, .sidebar .nav-item > .ph { width: auto; height: auto; flex: 0 0 auto; }
/* Icon-only controls centre their glyph on a fixed box instead. */
.icon-button, .btn-icon, .row-actions .btn, .row-actions button { flex: 0 0 auto; }

/* ── 3. Row actions clipped their own buttons in the invoices table ─────── */
.row-actions { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: visible; }
td .row-actions { min-width: max-content; }
.data-table td:last-child { white-space: nowrap; }

/* ── 4. Touch targets ─────────────────────────────────────────────────────
   WCAG 2.2 (2.5.8) sets a 24x24 floor; 16px checkboxes and 13px inputs were
   under it, and 30px controls are legal but uncomfortable on a phone. Below
   640px every interactive control gets a real target — checkboxes keep their
   drawn size and gain the hit area through padding, so nothing gets chunky. */
@media (max-width: 640px) {
  .btn, .btn-sm, .icon-button, .btn-icon, .icon-btn,
  .row-actions .btn, .row-actions button, .pager button {
    min-height: 38px;
  }
  .icon-button, .btn-icon, .icon-btn, .row-actions .btn, .row-actions button { min-width: 38px; }
  .btn-sm { padding: 0 12px; }
  .lang-toggle, .theme-toggle { height: 38px; }
  .lang-toggle button, .theme-toggle button { height: 30px; min-height: 30px; }
  .theme-toggle::before { height: 30px; }

  /* .data-table input[type=checkbox] pins these to 16px at a higher
     specificity, so the mobile size has to match it to win. */
  .data-table input[type="checkbox"],
  .data-table .inv-check,
  input[type="checkbox"],
  .inv-check,
  #rememberMe {
    width: 22px;
    height: 22px;
  }
  .check-row { min-height: 38px; align-items: center; }
  .link-btn, .sort-btn { min-height: 38px; display: inline-flex; align-items: center; }
  .badge { min-height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS
   ───────────────────────────────────────────────────────────────────────────
   Glass is a *material*, not a colour wash. What makes it read as glass rather
   than "a translucent box" is four things happening together:

     · refraction — blur AND saturation lift, so colour bleeds through
     · specular edge — a bright hairline on the lit (top/leading) edge only
     · contact shadow — a dark hairline on the opposite edge
     · a cast shadow that is softer and wider than a solid card's

   Applied to CHROME ONLY: topbar, mobile sidebar, modals, popovers, pills, the
   bulk dock, toasts, drawers. Data tables and form fields stay opaque — text
   over a live-blurred background is the single fastest way to make a dense
   ops screen unreadable, and it is what most "glassmorphism" passes get wrong.

   backdrop-filter is expensive; each rule below is on an element that already
   has its own compositing layer (fixed / transformed), so this adds no new
   layer promotions. Everything degrades to an opaque surface via @supports.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --glass-blur-amount: 20px;
  --glass-saturate: 180%;
  --glass-film: rgba(255, 255, 255, 0.62);
  --glass-film-strong: rgba(255, 255, 255, 0.78);
  --glass-hairline: rgba(255, 255, 255, 0.75);   /* specular, lit edge */
  --glass-contact: rgba(11, 31, 82, 0.06);       /* opposite edge */
  --glass-rim: rgba(11, 31, 82, 0.10);
  --glass-cast: 0 12px 40px rgba(11, 31, 82, 0.12);
}

:root[data-theme="dark"] {
  --glass-film: rgba(18, 24, 40, 0.60);
  --glass-film-strong: rgba(18, 24, 40, 0.80);
  --glass-hairline: rgba(255, 255, 255, 0.14);
  --glass-contact: rgba(0, 0, 0, 0.40);
  --glass-rim: rgba(255, 255, 255, 0.09);
  --glass-cast: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* The material itself, as one reusable definition. */
.topbar,
.modal,
.bulk-toolbar,
.toast,
.wallet-pill,
.refresh-pill,
.lang-toggle,
.theme-toggle,
.quick-search {
  -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur-amount)) saturate(var(--glass-saturate));
}

/* ── Topbar: the largest pane, so the lightest film ─────────────────────── */
.topbar {
  background: var(--glass-film-strong);
  border-bottom: 1px solid var(--glass-rim);
  box-shadow:
    inset 0 1px 0 var(--glass-hairline),
    0 1px 0 var(--glass-contact);
}
:root[data-theme="dark"] .topbar {
  box-shadow: inset 0 1px 0 var(--glass-hairline), 0 1px 0 var(--glass-contact);
}

/* ── Topbar controls: small panes read as one continuous surface ────────── */
.quick-search,
.wallet-pill,
.refresh-pill,
.lang-toggle,
.theme-toggle {
  background: var(--glass-film);
  border-color: var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-hairline);
}
.quick-search:focus-within {
  background: var(--glass-film-strong);
  border-color: var(--brand-accent);
  box-shadow: inset 0 1px 0 var(--glass-hairline), var(--ring);
}
.icon-button:hover, .icon-button.active {
  background: var(--glass-film);
  border-color: var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-hairline);
}
/* The moving thumb is the brightest pane in the group — it is "closer". */
.theme-toggle::before,
.lang-toggle button.active,
.tab.active {
  background: var(--glass-film-strong);
  box-shadow: inset 0 1px 0 var(--glass-hairline), 0 1px 2px var(--glass-contact);
}

/* ── Modals & floating docks: heaviest blur, full rim ───────────────────── */
.modal {
  background: var(--glass-film-strong);
  border: 1px solid var(--glass-rim);
  box-shadow:
    inset 0 1px 0 var(--glass-hairline),
    inset 0 -1px 0 var(--glass-contact),
    var(--shadow-modal);
}
.modal-header, .modal-footer { background: transparent; border-color: var(--glass-rim); }
.modal-body .form-section { background: var(--surface); }
.modal-overlay {
  background: rgba(11, 31, 82, 0.26);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
:root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.50); }

.bulk-toolbar {
  background: var(--glass-film-strong);
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-hairline), var(--glass-cast);
}

.toast {
  background: var(--glass-film-strong);
  color: var(--text-primary);
  border: 1px solid var(--glass-rim);
  box-shadow: inset 0 1px 0 var(--glass-hairline), var(--glass-cast);
}
/* Status toasts keep their meaning colour — glass would dilute the signal. */
.toast.success { background: var(--success); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
.toast.warning { background: var(--warning); color: #fff; }

/* ── Drawers over content on mobile ─────────────────────────────────────── */
@media (max-width: 860px) {
  .sidebar {
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: var(--glass-cast);
  }
  .sidebar-backdrop, .filter-backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
}
@media (max-width: 768px) {
  .filter-rail {
    background: var(--glass-film-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-amount)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur-amount)) saturate(var(--glass-saturate));
    box-shadow: inset 0 1px 0 var(--glass-hairline), var(--glass-cast);
  }
}

/* ── Sidebar: glass over navy, so the specular edge is the only lift ────── */
.sidebar .brand-block { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07); }
.sidebar .nav-item.active {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.account-mini {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

/* ── Fallback: no backdrop-filter → opaque surfaces, same geometry ──────── */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topbar, .modal, .bulk-toolbar, .toast, .filter-rail { background: var(--surface); }
  .quick-search, .wallet-pill, .refresh-pill, .lang-toggle, .theme-toggle { background: var(--surface-raised); }
  .theme-toggle::before, .lang-toggle button.active, .tab.active { background: var(--surface); }
  .modal-overlay { background: rgba(11, 31, 82, 0.55); }
}

/* Blur is the most expensive thing on the page; drop it when the user has
   asked for less motion/effects, and on very small screens where the chrome
   covers most of the viewport anyway. */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .modal, .bulk-toolbar, .toast, .filter-rail,
  .quick-search, .wallet-pill, .refresh-pill, .lang-toggle, .theme-toggle {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND LOCKUP
   ───────────────────────────────────────────────────────────────────────────
   The mark was sitting alone on a large flat navy field — it read as an
   unfinished blue panel rather than a brand area. It now sits on a glass
   plate: the plate gives the mark an edge to belong to, and the panel gets
   structure instead of a void.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-brand {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 28px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.login-brand .login-logo-img { height: 46px; max-width: 230px; }

/* A quiet field behind the panel so the plate has something to sit on: a fine
   rule grid at 3% — structure you read as depth, not as decoration. */
.login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 20% 15%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 15%, #000 0%, transparent 72%);
}

/* Metric tiles pick up the same material so the panel reads as one system. */
.login-metrics div {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.brand-block { padding: 16px 14px 14px; }
.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.brand-logo { height: 30px; max-width: calc(var(--sidebar-w) - 84px); }

@media (min-width: 861px) {
  /* Collapsed rail: the plate becomes the mark's container. */
  body.sidebar-collapsed .brand-row { padding: 8px; justify-content: center; }
}

@media (max-width: 900px) {
  .login-brand { padding: 12px 16px; gap: 10px; }
  .login-brand .login-logo-img { height: 34px; }
  .login-panel::before { display: none; }
}

/* ── Final layout corrections ─────────────────────────────────────────────
   Two elements were genuinely clipping their own content (overflow:hidden with
   more inside than fits), plus checkboxes still sat under the WCAG 2.2 24px
   target floor on phones. */

/* The invoices toolbar's primary button clipped its label by 25px: it was
   inheriting a fixed .btn-icon-ish width while carrying text. */
.table-toolbar .btn-primary.btn-sm,
.toolbar-actions .btn-primary.btn-sm { width: auto; min-width: max-content; overflow: visible; }

/* The wallet panel clipped its widest row by 24px because the card hides
   overflow to keep its rounded corners; the row scrolls instead. */
.wallet-panel { overflow: hidden; }
.wallet-panel > .wallet-metrics,
.wallet-panel .table-scroll { overflow-x: auto; }

@media (max-width: 640px) {
  /* WCAG 2.2 §2.5.8 sets a 24x24 CSS-px minimum for pointer targets. */
  .data-table input[type="checkbox"],
  .data-table .inv-check,
  input[type="checkbox"],
  .inv-check,
  #rememberMe,
  #invSelectAll { width: 24px; height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Topbar: reclaim the dead space on the wrapped bar ─────────────────
   `.wallet-pill` carries `margin-inline-start: auto` so it sits right on the
   desktop bar. Once the bar wraps, that auto margin became a real 89px hole
   between the menu button and the pill, and the controls bunched against the
   far edge with nothing on the left. On a wrapped bar the row should simply
   read left to right. */
@media (max-width: 860px) {
  .wallet-pill {
    margin-inline-start: 0;
  }

  /* Which page you are on is worth more than the section label on a phone,
     and the bar has room for it now. */
  .breadcrumb {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }

  .breadcrumb-label {
    display: none;
  }

  .breadcrumb-title {
    font-size: 15px;
    line-height: 20px;
  }

  /* Push the controls to the end of the row, so the title owns the left. */
  .topbar .wallet-pill {
    margin-inline-start: auto;
  }
}

/* ── 2. Phone: tables as cards ────────────────────────────────────────────
   Below this width a row cannot be read across. The bookings table is 1015px
   against a 368px viewport, so two thirds of every row sits off-screen behind
   a sideways drag — and because the header scrolls away with the columns,
   there is nothing left to say which number is the amount and which the date.

   Each row becomes a card and each cell becomes a "label: value" line, with
   the label taken from that cell's column header by assets/responsive-tables.js.
   Nothing is hidden: every column that existed still reads, vertically.

   Kept as a separate tier from the 860px tablet rules — a tablet in landscape
   still reads a real table fine, and only the phone needs the rewrite. */
@media (max-width: 720px) {
  /* The horizontal scroller has nothing left to scroll. */
  .table-scroll {
    overflow: visible;
    max-width: 100%;
  }

  /* `min-width: 760px` from the tablet tier is what forced the sideways drag. */
  .data-table {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 13px;
  }

  /* The column names now live on the cells themselves. */
  .data-table thead {
    display: none;
  }

  .data-table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .data-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--r-8);
    background: var(--surface);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
  }

  /* Hover and selection styling was written for full-width rows; on a card the
     tint belongs to the whole card, not to each line inside it.

     The hover tint is dropped outright: a touch screen has no hover, so it
     only ever appears as a stain left on whichever card was tapped last, which
     reads as "this one is selected" when nothing is. */
  .data-table tbody tr:hover {
    background: var(--surface);
  }

  .data-table tbody tr:hover td,
  .data-table tbody tr.selected td,
  .data-table tbody tr.is-selected td {
    background: transparent;
  }

  .data-table tbody tr.selected,
  .data-table tbody tr.is-selected {
    border-color: var(--brand-cyan);
    background: var(--accent-tint);
  }

  .data-table tbody td {
    display: grid;
    grid-template-columns: minmax(84px, 34%) 1fr;
    align-items: baseline;
    gap: 10px;
    height: auto;
    min-height: 0;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .data-table tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  html[lang="ar"] .data-table tbody td::before {
    text-transform: none;
    letter-spacing: 0;
    font-size: 11.5px;
  }

  .data-table tbody tr td:last-child {
    border-bottom: 0;
  }

  /* A cell with no value would otherwise render as a label pointing at nothing.
     `:empty` does not catch these on its own: an absent value still renders as
     an empty <span>, so assets/responsive-tables.js marks them instead. */
  .data-table tbody td:empty,
  .data-table tbody td[data-cell="blank"] {
    display: none;
  }

  /* Numbers align with their label rather than against a right edge that no
     longer exists, but keep the tabular figures and weight that mark them out. */
  .data-table .numeric,
  .data-table td.numeric {
    text-align: start;
  }

  /* Empty states and loading skeletons span the table and name nothing. */
  .data-table tbody td[data-cell="wide"] {
    display: block;
    padding: 14px 12px;
    text-align: center;
  }

  .data-table tbody td[data-cell="wide"]::before {
    content: none;
  }

  /* The row checkbox reads as the card's own control, at the top. */
  .data-table tbody td[data-cell="select"] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--surface-raised);
  }

  .data-table tbody td[data-cell="select"]::before {
    content: none;
  }

  /* Actions become a full-width strip of real tap targets at the foot of the
     card, instead of icons crushed into a 40px column. */
  .data-table tbody td[data-cell="actions"] {
    display: block;
    padding: 10px 12px;
    background: var(--surface-raised);
  }

  .data-table tbody td[data-cell="actions"]::before {
    content: none;
  }

  .data-table td[data-cell="actions"] .row-actions {
    display: flex;
    /* The base rule is inline-flex, which lets the cell's own alignment centre
       the strip; on a card the actions should start where the values do. */
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    white-space: normal;
  }

  .data-table td[data-cell="actions"] .row-actions > * {
    min-height: 36px;
  }

  /* The card carries the border now; the wrapper's own frame would double it. */
  .table-card .table-scroll {
    border: 0;
  }

  /* Sticky headers have nothing to stick to once the header is gone. */
  .data-table thead th {
    position: static;
  }
}

/* ── 3. Phone: the surrounding page ──────────────────────────────────────── */
@media (max-width: 720px) {
  /* Toolbar controls were sharing a row with the title and each ended up too
     narrow to read; stacked, each gets the full width. */
  .table-toolbar {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .table-toolbar > * {
    min-width: 0;
  }

  /* A pager that scrolls sideways is easy to miss entirely. */
  .table-foot {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  .pager {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ── 4. Phone: the sign-in screen keeps its logo ──────────────────────────
   The branded panel that carries the logo is hidden below 860px, so on a phone
   the sign-in screen showed an unbranded form. This is the navy logo on the
   white card, shown only where the panel is gone. */
.login-card-logo {
  display: none;
}

@media (max-width: 860px) {
  .login-card-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: min(210px, 60vw);
    margin-bottom: 14px;
    object-fit: contain;
    object-position: left center;
  }

  [dir="rtl"] .login-card-logo {
    object-position: right center;
  }
}

:root[data-theme="dark"] .login-card-logo {
  /* The card goes dark too, and a navy logo on it would disappear. */
  filter: brightness(0) invert(1);
}