/* ============================================================
   FEH Kuwait — Design System
   Dawoodi Bohra inspired · Minimal · Elegant · Desktop-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Primary — Dawoodi Bohra Emerald */
  --c-primary:        #1D6644;
  --c-primary-dk:     #134D31;
  --c-primary-h:      #155A3A;
  --c-primary-lite:   #4A9B73;
  --c-primary-pale:   #DFF2EA;
  --c-primary-ghost:  #F0FAF5;

  /* Gold accent */
  --c-gold:           #C8A05A;
  --c-gold-dk:        #A07A38;
  --c-gold-lite:      #E8D090;
  --c-gold-pale:      #FBF5E6;

  /* Backgrounds */
  --c-bg:             #F8F5EF;   /* warm ivory — page bg */
  --c-surface:        #FFFFFF;   /* card / panel */
  --c-surface-2:      #F4F0E8;   /* subtle tint */
  --c-sidebar:        #112E1E;   /* deep forest — sidebar */
  --c-sidebar-h:      #1D4F31;   /* sidebar hover */
  --c-sidebar-active: #1D6644;   /* sidebar active */

  /* Text */
  --c-text:           #1C1917;
  --c-text-2:         #44403C;
  --c-text-muted:     #78716C;
  --c-text-light:     #A8A29E;
  --c-text-inv:       #FFFFFF;

  /* Borders */
  --c-border:         #E7E2D8;
  --c-border-strong:  #C9C3B7;

  /* Semantic. --c-success deliberately equals --c-primary so "success = on-brand
     confirmation" reads visually as the brand colour, not a second green. Do NOT
     swap to a generic Bootstrap-style green. --c-success-bg = --c-primary-pale. */
  --c-success:        #1D6644;
  --c-success-bg:     #DFF2EA;
  --c-warning:        #B45309;
  --c-warning-bg:     #FEF3C7;
  --c-danger:         #B91C1C;
  --c-danger-bg:      #FEE2E2;
  --c-info:           #0E5067;    /* deep teal — was bright corporate blue */
  --c-info-bg:        #E0EEF0;    /* matching pale teal fill */
  --c-neutral-bg:     #F5F3EF;

  /* Cool slate scale (added 2026-05-17) — for data-heavy UI (Finance tables, GL
     drill panels, accountant surfaces). The existing emerald/gold/ivory palette
     is warm; finance data needs a cool counterpoint so the eye gets rest and
     the section reads as "data" rather than "marketing".
     Used alongside, not instead of, the warm palette:
       Page chrome (accordions, headers)  → warm (emerald stripe + ivory)
       Data shelves (tables, drill panel) → cool slate
       Actions / CTAs                     → emerald (unchanged)
       Roles / eyebrow accents            → gold (unchanged)
     Rationale: emerald (HSL 150°) + warm ivory (HSL 38°) is an analogous warm
     pairing; lacks visual rest. Cool slate (HSL ~215°) is roughly the
     split-complement, providing balance without competing with brand emerald. */
  /* "Slate" scale kept under the same token names for code stability, but the
     values are now warm-tinted greys to match the rest of the site's earth
     palette. The old cool slate-blue undertone was the source of the residual
     "blue feel" the user flagged on finance pages. */
  --c-slate-50:       #F6F3EC;    /* paper — data card / table body bg */
  --c-slate-100:      #EBE5D6;    /* divider — group-row band, accordion header */
  --c-slate-200:      #D5CCB9;    /* border — table & panel borders inside data zones */
  --c-slate-300:      #B8AE99;    /* hairline / inactive icon */
  --c-slate-400:      #877D69;    /* muted text */
  --c-slate-500:      #6E6654;    /* secondary meta text (interpolated 400↔600) */
  --c-slate-600:      #56503F;    /* body text on data surfaces */
  --c-slate-700:      #423C2F;    /* emphasis text on data surfaces (interpolated 600↔800) */
  --c-slate-800:      #2E2820;    /* heading text on data surfaces */

  /* --c-ink-* — DEPRECATED ALIASES. Kept identical to --c-primary-* so existing
     rules keep working, but new code MUST use --c-primary-* instead. The "ink"
     family was an earlier experiment (slate-blue, then deep forest) that was
     ultimately collapsed back into the brand emerald. Do not add new --c-ink-*
     usages; gradually migrate existing references to --c-primary-* as files
     are touched. */
  --c-ink:            #1D6644;    /* DEPRECATED — use --c-primary */
  --c-ink-h:          #134D31;    /* DEPRECATED — use --c-primary-dk */
  --c-ink-lite:       #4A9B73;    /* DEPRECATED — use --c-primary-lite */
  --c-ink-pale:       #DFF2EA;    /* DEPRECATED — use --c-primary-pale */
  --c-ink-ghost:      #F0FAF5;    /* DEPRECATED — use --c-primary-ghost */

  /* Typography — system font stack (SF Pro on Apple, Segoe UI on Windows, Inter elsewhere).
     --font-display and --font-body are intentionally identical: one type voice,
     no headline-vs-body split. Kept as separate tokens for future flexibility. */
  --font-display:     -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --font-body:        -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --font-mono:        ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs:  0.72rem;
  --text-sm:  0.82rem;
  --text-base: 1rem;
  --text-lg:  1.15rem;
  --text-xl:  1.35rem;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Border radius */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill:999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.06);
  --sh-sm: 0 2px 6px rgba(0,0,0,0.08);
  --sh-md: 0 4px 16px rgba(0,0,0,0.10);
  --sh-lg: 0 8px 32px rgba(0,0,0,0.12);
  --sh-xl: 0 16px 48px rgba(0,0,0,0.16);

  /* Transitions */
  --t-fast:   120ms ease;
  --t-normal: 200ms ease;
  --t-slow:   320ms ease;

  /* Easing curves */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-w:           268px;
  --sidebar-w-collapsed: 68px;
  --header-h:            60px;
  --content-max:         1280px;
}

/* ── Animation Keyframes ────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(29,102,68,0.35); }
  70%  { box-shadow: 0 0 0 8px rgba(29,102,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(29,102,68,0); }
}

/* ── Animation Utilities ────────────────────────────────────── */
.anim-fade-in   { animation: fadeIn  280ms var(--ease-out) both; }
.anim-slide-up  { animation: slideUp 320ms var(--ease-out) both; }
.anim-scale-in  { animation: scaleIn 220ms var(--ease-out) both; }

/* Stagger children (add to parent, children get sequential delays) */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
}

img, svg { display: block; max-width: 100%; }
/* Default link style — color-only hover. Modern, subtle, no underline noise. */
a { color: var(--c-primary); text-decoration: none; transition: color .15s ease, opacity .15s ease; }
a:hover { color: var(--c-primary-dk); }
a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 2px; }

/* In-body prose links — persistent thin underline that strengthens on hover (no jarring jump) */
.prose a,
.lp-post-page__prose a,
.lp-legal p a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .18s ease, color .15s ease;
}
.prose a:hover,
.lp-post-page__prose a:hover,
.lp-legal p a:hover { text-decoration-color: currentColor; }
button { cursor: pointer; font-family: var(--font-body); }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ── Unified focus-visible ──────────────────────────────────── */
/* Single source of truth for keyboard focus rings. Applies to every
   interactive element unless a component opts out with a more specific rule. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Defensive global rule — ensure the HTML [hidden] attribute is honoured
   even when a component CSS explicitly sets display. JS toggles on
   popovers, drill-down sections, conditional form fields etc. all
   depend on this. */
[hidden] { display: none !important; }
.btn:focus-visible,
.sidebar__item:focus-visible,
.sidebar__collapse-btn:focus-visible,
.seg__item:focus-visible,
.notif-btn:focus-visible,
.icon-btn:focus-visible,
.tour-card:focus-visible,
.ws-card:focus-visible,
.wizard-card:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.settings-nav a:focus-visible,
[role="tab"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--c-primary-ghost), 0 0 0 4px var(--c-primary);
}
/* Form controls keep their existing inset glow */
.form-control:focus-visible { outline: none; }

/* ── Typography ─────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}
h1 { font-size: 2.133rem;  }  /* ~32px */
h2 { font-size: 1.6rem;    }  /* ~24px */
h3 { font-size: 1.2rem;    }  /* ~18px */
h4 { font-size: 1.067rem;  }  /* ~16px */

p { margin: 0 0 var(--sp-4); }
small { font-size: 0.8rem; }

.text-muted    { color: var(--c-text-muted); }
.text-light    { color: var(--c-text-light); }
.text-primary  { color: var(--c-primary); }
.text-gold     { color: var(--c-gold); }
.text-danger   { color: var(--c-danger); }
.text-success  { color: var(--c-success); }
.text-sm       { font-size: 0.867rem; }
.text-xs       { font-size: 0.8rem; }
.text-lg       { font-size: 1.067rem; }
.text-xl       { font-size: 1.2rem; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.error-list { margin: 0; padding-left: 16px; }
.error-list li + li { margin-top: 2px; }

/* ── Portal Layout ──────────────────────────────────────────── */
.portal-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--c-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--t-slow) var(--ease-out);
}

/* Subtle geometric pattern overlay on sidebar */
.sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/pattern-star.svg');
  background-size: 72px 72px;
  opacity: 0.22;
  pointer-events: none;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}

.sidebar__logo {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.sidebar__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sidebar__brand-text { flex: 1; }

.sidebar__org {
  display: block;
  font-family: var(--font-display);
  font-size: 1.067rem;
  font-weight: 600;
  color: #F0EDE8;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.sidebar__tagline {
  display: block;
  font-size: 0.733rem;
  color: var(--c-gold-lite);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* Navigation */
.sidebar__nav {
  flex: 1;
  padding: var(--sp-4) 0;
  position: relative;
}

.sidebar__section {
  padding: 0;
}

.sidebar__section-label {
  font-size: 0.673rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  /* Gold tint — clearly different from white nav items */
  color: rgba(200,158,70,0.80);
  padding: 0 var(--sp-2);
}

/* Collapsible sidebar section toggle */
.sidebar__section--toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
  cursor: pointer;
  /* Thin gold-tinted separator instead of dark overlay */
  border-top: 1px solid rgba(185,140,60,0.20);
  transition: color var(--t-fast);
}

.sidebar__section--toggle:hover .sidebar__section-label {
  color: rgba(220,178,90,0.95);
}

.sidebar__section-chevron {
  width: 14px;
  height: 14px;
  color: rgba(200,158,70,0.45);
  flex-shrink: 0;
  transition: transform var(--t-fast), color var(--t-fast);
}

.sidebar__section--toggle:hover .sidebar__section-chevron {
  color: rgba(220,178,90,0.75);
}

.sidebar__section--toggle.is-collapsed .sidebar__section-chevron {
  transform: rotate(-90deg);
}

/* Collapsible sub-group inside a sidebar group (e.g. "Configuration" within
   Finance). The header is a button with a chevron — clicking it slides
   the contained sub-items in/out. State persists in localStorage. */
.sidebar__sub {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: calc(100% - var(--sp-4));
  margin: 10px var(--sp-2) 4px;
  padding: 10px 10px 4px;
  font-family: inherit;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: color var(--t-fast);
}
.sidebar__sub:hover { color: rgba(255,255,255,0.62); }
.sidebar__sub:focus-visible {
  outline: 1px dashed rgba(255,255,255,0.4);
  outline-offset: 2px;
}
.sidebar__sub-chevron {
  width: 11px; height: 11px;
  opacity: .55;
  transition: transform 180ms var(--ease-out), opacity var(--t-fast);
}
.sidebar__sub:hover .sidebar__sub-chevron { opacity: .85; }
.sidebar__sub[aria-expanded="false"] .sidebar__sub-chevron {
  transform: rotate(-90deg);
}

/* Container for the collapsible items.
   Animates max-height (rather than display:none) for a smooth open/close. */
.sidebar__subgroup {
  display: flex; flex-direction: column;
  overflow: hidden;
  max-height: 600px;          /* roomy enough for 4-6 items */
  transition: max-height 220ms var(--ease-out);
}
.sidebar__subgroup[hidden] {
  display: flex;              /* override the implicit display:none from [hidden] */
  max-height: 0;
}

/* No divider on the very first section */
.sidebar__nav > .sidebar__section--toggle:first-child {
  border-top: none;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-6);
  color: rgba(255,255,255,0.68);
  font-size: 0.875rem;
  font-weight: 400;
  transition: background var(--t-fast), color var(--t-fast), padding var(--t-slow);
  text-decoration: none;
  position: relative;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.005em;
}

.sidebar__item:hover {
  background: rgba(255,255,255,0.07);
  color: #FFFFFF;
  text-decoration: none;
}
/* Subtle left-glow on hover */
.sidebar__item:hover::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(232,208,144,0.40);
  border-radius: 0 2px 2px 0;
}

.sidebar__item.is-active {
  background: linear-gradient(90deg, rgba(29,102,68,0.9) 0%, rgba(29,102,68,0.65) 100%);
  color: #FFFFFF;
  font-weight: 500;
}

.sidebar__item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c-gold);
  border-radius: 0 2px 2px 0;
}

/* Subtle right-edge glow on active */
.sidebar__item.is-active::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(200,160,90,0.25);
}

.sidebar__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}

.sidebar__item.is-active svg,
.sidebar__item:hover svg { opacity: 1; }

.sidebar__badge {
  margin-left: auto;
  background: var(--c-danger);
  color: white;
  font-size: 0.693rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

.finance-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Sidebar Footer ──────────────────────────────────────────── */
.sidebar__foot {
  margin-top: auto;
  flex-shrink: 0;
}

/* Collapse button is the entire footer — full-width, clean */
.sidebar__collapse-btn {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px var(--sp-6);
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.38);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sidebar__collapse-btn:hover {
  background: rgba(0,0,0,0.32);
  color: rgba(255,255,255,0.72);
  border-top-color: rgba(200,160,90,0.22);
}
.sidebar__collapse-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.sidebar__collapse-label {
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ── Collapsed sidebar (desktop icon-only mode) ───────────────── */
.sidebar--collapsed {
  width: var(--sidebar-w-collapsed);
}

/* Adjust main-wrap margin when sidebar is collapsed */
.portal-layout.sidebar-collapsed .main-wrap {
  margin-left: var(--sidebar-w-collapsed);
}
.portal-layout.sidebar-collapsed .main-wrap::before {
  left: var(--sidebar-w-collapsed);
}

/* Hide text elements when collapsed */
.sidebar--collapsed .sidebar__brand-text,
.sidebar--collapsed .sidebar__section--toggle,
.sidebar--collapsed .sidebar__collapse-label {
  display: none;
}

.sidebar--collapsed .sidebar__brand {
  justify-content: center;
  padding: var(--sp-5) 0;
}

/* Icon-only items */
.sidebar--collapsed .sidebar__item {
  justify-content: center;
  padding: 10px 0;
  font-size: 0;        /* hides text node */
  gap: 0;
}
.sidebar--collapsed .sidebar__item svg {
  width: 20px;
  height: 20px;
  opacity: 0.80;
}
.sidebar--collapsed .sidebar__item:hover svg { opacity: 1; }
.sidebar--collapsed .sidebar__item::before { display: none; }
.sidebar--collapsed .sidebar__item.is-active::before {
  display: block;
  width: 3px;
}
.sidebar--collapsed .sidebar__badge { display: none; }

/* Tooltip labels for collapsed items */
.sidebar--collapsed .sidebar__item[title] {
  position: relative;
}
.sidebar--collapsed .sidebar__item::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-text);
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: 999;
}
.sidebar--collapsed .sidebar__item:hover::after { opacity: 1; }

.sidebar--collapsed .sidebar__collapse-btn {
  justify-content: center;
  padding: 13px 0;
}

/* ── Main Content Area ──────────────────────────────────────── */
.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  transition: margin-left var(--t-slow) var(--ease-out);
}

/* Subtle geometric pattern overlay on main content */
.main-wrap::before {
  content: '';
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  background-image: url('../img/bg_pattern.svg');
  background-size: 120px 120px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.main-wrap > * {
  position: relative;
  z-index: 1;
}

/* Top header bar */
.topbar {
  height: var(--header-h);
  background: #FFFFFF;
  border-bottom: 2px solid var(--c-gold);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-8);
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 4px rgba(185,140,60,0.10);
}

.topbar__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
}

.topbar__crumb {
  font-size: 0.867rem;
  color: var(--c-text-muted);
}

.topbar__crumb:last-child { color: var(--c-text); font-weight: 500; }

.topbar__sep {
  color: var(--c-border-strong);
  font-size: 0.8rem;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.topbar__icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}

.topbar__icon-btn:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
}

.topbar__icon-btn svg { width: 20px; height: 20px; }

.topbar__notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-danger);
  border: 2px solid white;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Topbar vertical divider */
.topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--c-border);
  flex-shrink: 0;
}

/* Topbar user info chip */
.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 4px var(--sp-3) 4px var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
}
.topbar__user:hover {
  background: var(--c-surface-2);
  text-decoration: none;
}

.topbar__user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-primary-pale);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.733rem;
  flex-shrink: 0;
  overflow: hidden;
  border: 1.5px solid rgba(29,102,68,0.15);
}
.topbar__user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.topbar__user-meta { display: flex; flex-direction: column; line-height: 1.2; }

.topbar__user-name {
  font-size: 0.833rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

.topbar__user-role {
  font-size: 0.68rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Breadcrumb link hover */
a.topbar__crumb {
  transition: color var(--t-fast);
}
a.topbar__crumb:hover {
  color: var(--c-primary);
  text-decoration: none;
}

/* ── Notifications dropdown ─────────────────────────────────── */
.notif { position: relative; display: inline-flex; }

.notif__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px -8px rgba(28, 25, 23, 0.18), 0 2px 6px rgba(28, 25, 23, 0.05);
  z-index: 60;
  display: none;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 100px));
  overflow: hidden;
}
.notif.is-open .notif__panel { display: flex; }

.notif__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border);
}
.notif__title { font-weight: 600; font-size: 14px; color: var(--c-text); }
.notif__headform { margin: 0; }
.notif__markall {
  border: none;
  background: none;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
}
.notif__markall:hover { background: var(--c-surface-2); }

.notif__list { flex: 1; overflow-y: auto; }

.notif__item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border-soft, #F1ECE0);
  color: var(--c-text);
  text-decoration: none;
  transition: background var(--t-fast);
  align-items: flex-start;
}
.notif__item:last-child { border-bottom: none; }
.notif__item:hover { background: var(--c-surface-2); text-decoration: none; }

.notif__item-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  margin-top: 6px;
}
.notif__item.is-unread .notif__item-dot { background: var(--c-primary); }
.notif__item.is-unread .notif__item-title { color: var(--c-text); font-weight: 600; }

.notif__item-body { flex: 1; min-width: 0; }
.notif__item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-muted);
  line-height: 1.35;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif__item-snippet {
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.4;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif__item-meta {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: var(--c-muted);
  align-items: center;
}
.notif__item-cat {
  font-weight: 500;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}

.notif__empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--c-muted);
}
.notif__empty p { margin: 8px 0 0; font-size: 13px; }

.notif__foot {
  display: block;
  padding: 12px 16px;
  text-align: center;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.notif__foot:hover { background: var(--c-surface-2); text-decoration: none; }

@media (max-width: 560px) {
  .notif__panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 80vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -8px 32px rgba(28, 25, 23, 0.2);
  }
}

/* ── Radio cards (audience picker, etc.) ───────────────────── */
.radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.radio-card {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
  align-items: flex-start;
  background: #fff;
}
.radio-card:hover { border-color: var(--c-primary-weak, #8FB7A1); background: var(--c-surface-2); }
.radio-card input[type="radio"] {
  accent-color: var(--c-primary);
  margin-top: 3px;
  flex-shrink: 0;
}
.radio-card:has(input[type="radio"]:checked) {
  border-color: var(--c-primary);
  background: rgba(29, 102, 68, 0.05);
  box-shadow: 0 0 0 1px var(--c-primary) inset;
}
.radio-card__title { font-weight: 600; font-size: 13px; color: var(--c-text); }
.radio-card__meta  { font-size: 12px; color: var(--c-muted); margin-top: 2px; }

.chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.chk input[type="checkbox"] { accent-color: var(--c-primary); }

/* ── Prefs table (grouped rows by category) ────────────────── */
.table--prefs { width: 100%; border-collapse: collapse; }
.table--prefs thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
}
.table--prefs tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-border-soft, #F1ECE0);
  vertical-align: top;
  font-size: 13px;
}
.table--prefs tbody tr:last-child td { border-bottom: none; }
.table__group-row td {
  background: var(--c-surface);
  padding: 8px 16px !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--c-primary);
  border-top: 1px solid var(--c-border);
}

/* ── Notifications full-page list ──────────────────────────── */
.notif-list { list-style: none; margin: 0; padding: 0; }

.notif-row {
  border-bottom: 1px solid var(--c-border-soft, #F1ECE0);
  transition: background var(--t-fast);
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--c-surface-2); }
.notif-row.is-unread { background: linear-gradient(to right, rgba(29, 102, 68, 0.04), transparent 60%); }

.notif-row__link {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  color: var(--c-text);
  text-decoration: none;
  align-items: flex-start;
}
.notif-row__link:hover { text-decoration: none; }

.notif-row__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: transparent;
  margin-top: 8px;
  flex-shrink: 0;
}
.notif-row.is-unread .notif-row__dot { background: var(--c-primary); }

.notif-row__body { flex: 1; min-width: 0; }

.notif-row__title {
  font-size: 14px;
  color: var(--c-text-muted);
  line-height: 1.4;
  margin-bottom: 4px;
  font-weight: 500;
}
.notif-row.is-unread .notif-row__title { color: var(--c-text); font-weight: 600; }

.notif-row__snippet {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
  margin-bottom: 6px;
}

.notif-row__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--c-muted);
}
.notif-row__cat {
  font-weight: 600;
  color: var(--c-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.notif-row__sep { opacity: 0.6; }

/* ── Page Content ───────────────────────────────────────────── */
.page-content {
  flex: 1;
  padding: var(--sp-8) var(--sp-6) var(--sp-8) var(--sp-8);
  max-width: var(--content-max);
  width: 100%;
  /* Prevent the main area from causing body-level horizontal scroll */
  overflow-x: hidden;
}

.page-header {
  margin-bottom: var(--sp-8);
}

.page-header__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  margin: var(--sp-1) 0 0;
}

.page-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  margin-bottom: var(--sp-2);
  transition: color var(--t-fast);
}
.page-back:hover { color: var(--c-primary); text-decoration: none; }
.page-back svg { width: 13px; height: 13px; }

/* Decorative arch divider under page titles */
.arch-divider {
  display: flex;
  align-items: flex-end;
  height: 16px;
  gap: 0;
  margin: var(--sp-3) 0 var(--sp-6);
  overflow: hidden;
}

.arch-divider svg {
  width: 100%;
  height: 16px;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t-normal), border-color var(--t-normal);
}

.card--elevated { box-shadow: var(--sh-sm); }
.card--flat { box-shadow: none; }

.card__header {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.133rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 0;
}

.card__subtitle {
  font-size: 0.8rem;
  color: var(--c-text-muted);
  margin: 2px 0 0;
}

.card__header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.card__body { padding: var(--sp-6); flex: 1; }
.card__body--sm { padding: var(--sp-4); }
.card__body--lg { padding: var(--sp-8); }
.card__body--narrow { padding: var(--sp-6); max-width: 480px; }
.card__body--flush { padding: 0; }

.card__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ── Card-footer pager (JS in-card pagination — dot + prev/next) ── */
.card__footer--pager {
  justify-content: space-between;
  padding: 10px 16px;
}
/* Card with left accent (for important items) */
.card--accent-left {
  border-left: 3px solid var(--c-gold);
}

.card--accent-primary {
  border-left: 3px solid var(--c-primary);
}

/* ── Stat Cards ─────────────────────────────────────────────── */
/* ── Stat Grid ─────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: var(--sp-8);
}

/* ── Stat Card — elevated dashboard card ─────────────────── */
.stat-card {
  background: var(--c-surface);
  border-radius: 12px;
  border: 1px solid var(--c-border);
  padding: 22px 24px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow: hidden;
  transition: box-shadow 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1);
  position: relative;
  border-top: 3px solid var(--c-border);
}
.stat-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-3px);
}

/* Per-variant top accent — uses :has() for color matching */
.stat-card:has(.stat-card__icon--primary) { border-top-color: var(--c-primary-pale); }
.stat-card:has(.stat-card__icon--gold)    { border-top-color: var(--c-gold-pale); }
.stat-card:has(.stat-card__icon--success) { border-top-color: var(--c-success-bg); }
.stat-card:has(.stat-card__icon--warning) { border-top-color: var(--c-warning-bg); }
.stat-card:has(.stat-card__icon--danger)  { border-top-color: var(--c-danger-bg); }
.stat-card:has(.stat-card__icon--info)    { border-top-color: var(--c-info-bg); }

.stat-card:has(.stat-card__icon--primary):hover { border-top-color: var(--c-primary); }
.stat-card:has(.stat-card__icon--gold):hover    { border-top-color: var(--c-gold); }
.stat-card:has(.stat-card__icon--success):hover { border-top-color: var(--c-success); }
.stat-card:has(.stat-card__icon--warning):hover { border-top-color: var(--c-warning); }
.stat-card:has(.stat-card__icon--danger):hover  { border-top-color: var(--c-danger); }
.stat-card:has(.stat-card__icon--info):hover    { border-top-color: var(--c-info); }

/* Icon */
.stat-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-card__icon--primary { background: var(--c-primary-pale); color: var(--c-primary); }
.stat-card__icon--gold    { background: var(--c-gold-pale);    color: var(--c-gold-dk); }
.stat-card__icon--success { background: var(--c-success-bg);   color: var(--c-success); }
.stat-card__icon--warning { background: var(--c-warning-bg);   color: var(--c-warning); }
.stat-card__icon--danger  { background: var(--c-danger-bg);    color: var(--c-danger);  }
.stat-card__icon--info    { background: var(--c-info-bg);      color: var(--c-info);    }
.stat-card__icon svg { width: 22px; height: 22px; }

.stat-card__info { flex: 1; min-width: 0; }

.stat-card__value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat-card__value--sm { font-size: 1.1rem; }

.stat-card__label {
  font-size: 0.78rem;
  color: var(--c-text-muted);
  font-weight: 500;
}

/* Card footer — subtle separator, links/actions */
.stat-card__footer {
  padding: 10px 22px;
  border-top: 1px solid var(--c-border);
  background: rgba(0,0,0,0.01);
  font-size: 0.75rem;
}
.stat-card__footer a {
  color: var(--c-primary);
  text-decoration: none;
  font-weight: 500;
}
.stat-card__footer a:hover { text-decoration: underline; }

.stat-card__delta {
  font-size: 0.75rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.stat-card__delta--up   { color: var(--c-success); }
.stat-card__delta--down { color: var(--c-danger); }

/* ── Dashboard entrance animation ─────────────────────────── */
@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-enter > * {
  opacity: 0;
  animation: dashFadeUp 0.4s cubic-bezier(.4,0,.2,1) forwards;
}
.dash-enter > *:nth-child(1)  { animation-delay: 0.04s; }
.dash-enter > *:nth-child(2)  { animation-delay: 0.08s; }
.dash-enter > *:nth-child(3)  { animation-delay: 0.12s; }
.dash-enter > *:nth-child(4)  { animation-delay: 0.16s; }
.dash-enter > *:nth-child(5)  { animation-delay: 0.20s; }
.dash-enter > *:nth-child(6)  { animation-delay: 0.24s; }
.dash-enter > *:nth-child(7)  { animation-delay: 0.28s; }
.dash-enter > *:nth-child(8)  { animation-delay: 0.32s; }
.dash-enter > *:nth-child(9)  { animation-delay: 0.36s; }
.dash-enter > *:nth-child(10) { animation-delay: 0.40s; }

/* Fade-up for individual sections (cards outside stat-grid) */
@keyframes sectionFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-section {
  opacity: 0;
  animation: sectionFadeUp 0.5s cubic-bezier(.4,0,.2,1) forwards;
}
.dash-section:nth-of-type(1) { animation-delay: 0.15s; }
.dash-section:nth-of-type(2) { animation-delay: 0.25s; }
.dash-section:nth-of-type(3) { animation-delay: 0.35s; }
.dash-section:nth-of-type(4) { animation-delay: 0.45s; }
.dash-section:nth-of-type(5) { animation-delay: 0.55s; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast),
              transform var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.is-loading { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Primary */
.btn--primary {
  background: var(--c-primary);
  color: white;
  border-color: var(--c-primary);
  box-shadow: 0 1px 3px rgba(29,102,68,0.30);
}
.btn--primary:hover {
  background: var(--c-primary-h);
  border-color: var(--c-primary-h);
  color: #fff;
  box-shadow: 0 3px 10px rgba(29,102,68,0.35);
}

/* Gold / accent */
.btn--gold {
  background: var(--c-gold);
  color: var(--c-text);
  border-color: var(--c-gold);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-gold) 35%, transparent);
}
.btn--gold:hover {
  background: var(--c-gold-dk);
  border-color: var(--c-gold-dk);
  color: white;
}

/* Outline primary */
.btn--outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--outline:hover {
  background: var(--c-primary-ghost);
}

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

/* Danger */
.btn--danger {
  background: var(--c-danger);
  color: white;
  border-color: var(--c-danger);
}
.btn--danger:hover { background: color-mix(in srgb, var(--c-danger) 85%, #000); color: #fff; }

/* Danger outline */
.btn--danger-outline {
  background: transparent;
  color: var(--c-danger);
  border-color: var(--c-danger);
}
.btn--danger-outline:hover { background: var(--c-danger-bg); }

/* Danger ghost — text-only danger button */
.btn--danger-ghost { background: transparent; color: var(--c-danger); border-color: transparent; }
.btn--danger-ghost:hover { background: var(--c-danger-bg); border-color: var(--c-danger-bg); }
.btn--danger-text { color: var(--c-danger); }
.btn--danger-text:hover { background: var(--c-danger-bg); }

/* Sizes */
.btn--sm  { padding: 6px var(--sp-3); font-size: 0.8rem; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg  { padding: 12px var(--sp-8); font-size: 1rem; }
.btn--lg svg { width: 18px; height: 18px; }
.btn--xl  { padding: 15px var(--sp-10); font-size: 1.067rem; }
.btn--block { width: 100%; }

/* Icon-only button */
.btn--icon {
  padding: 8px;
  width: 36px;
  height: 36px;
}
.btn--icon.btn--sm { width: 30px; height: 30px; padding: 6px; }
.btn--icon.btn--lg { width: 44px; height: 44px; padding: 11px; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--sp-5);
}

.form-label {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.867rem;
  font-weight: 500;
  color: var(--c-text-2);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}

.form-label-hint,
.form-label .form-hint {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--c-text-muted);
  margin-top: 0;                /* cancel standalone .form-hint margin */
  margin-left: auto;            /* push aside notes to the right of the label row */
}

/* Required marker: tight next to its label text, no visual isolation */
.form-required {
  color: var(--c-danger);
  margin-left: 0;
  font-weight: 600;
  line-height: 1;
}

.form-control {
  display: block;
  width: 100%;
  padding: 10px var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 0.933rem;
  line-height: 1.5;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

.form-control::placeholder { color: var(--c-text-light); }

.form-control:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(29,102,68,0.12);
}

.form-control:disabled {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  cursor: not-allowed;
}

.form-control--error {
  border-color: var(--c-danger);
}
.form-control--error:focus {
  box-shadow: 0 0 0 3px rgba(185,28,28,0.12);
}

textarea.form-control { min-height: 100px; resize: vertical; }

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2378716C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-hint {
  font-size: 0.74rem;            /* tighter to reduce wrap risk */
  line-height: 1.35;
  color: var(--c-text-muted);
  margin-top: var(--sp-1);
  display: block;                /* take full input width even from <span> */
}

.form-error {
  font-size: 0.8rem;
  color: var(--c-danger);
  margin-top: var(--sp-1);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Input with icon */
.input-wrap {
  position: relative;
}

.input-wrap .form-control { padding-left: 40px; }
.input-wrap .form-control.has-right { padding-right: 40px; }

.form-control--search { padding-left: 32px; height: 34px; font-size: var(--text-sm); }

.input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}
.input-icon svg { width: 16px; height: 16px; }

.input-icon-right {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  color: var(--c-text-muted);
  border-radius: var(--r-sm);
  transition: color var(--t-fast);
}
.input-icon-right:hover { color: var(--c-text); }
.input-icon-right svg { width: 16px; height: 16px; }

/* ── Toggle Switch ───────────────────────────────────────────── */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--c-border-strong);
  border-radius: 10px;
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.switch__track::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch__input:checked + .switch__track { background: var(--c-primary); }
.switch__input:checked + .switch__track::after { transform: translateX(16px); }
.switch__input:focus-visible + .switch__track { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.switch__label { font-size: .83rem; color: var(--c-text); }

/* Form row / grid */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
.form-row--3 { grid-template-columns: repeat(3, 1fr); }
.form-row--4 { grid-template-columns: repeat(4, 1fr); }
.form-row--auto { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ── Alerts / Flash ──────────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  border: 1px solid;
  margin-bottom: var(--sp-5);
}

.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.alert--success { background: var(--c-success-bg); border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-surface)); color: var(--c-success); }
.alert--error   { background: var(--c-danger-bg);  border-color: color-mix(in srgb, var(--c-danger)  35%, var(--c-surface)); color: var(--c-danger);  }
.alert--warning { background: var(--c-warning-bg); border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-surface)); color: var(--c-warning); }
.alert--info    { background: var(--c-info-bg);    border-color: color-mix(in srgb, var(--c-info) 30%, var(--c-surface)); color: var(--c-info); }

/* Dismiss X */
.alert > span { flex: 1; }
.alert__close {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin: -2px -6px -2px 0;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: inherit; opacity: 0.55;
  cursor: pointer; border-radius: 50%;
  transition: opacity .15s, background .15s;
}
.alert__close svg { width: 14px; height: 14px; margin-top: 0; }
.alert__close:hover { opacity: 1; background: rgba(0,0,0,0.07); }

/* Smooth dismissal transition */
.alert.is-dismissible { transition: opacity .25s ease, transform .25s ease, margin .25s ease, padding .25s ease, max-height .25s ease; overflow: hidden; max-height: 200px; }
.alert.is-dismissing { opacity: 0; transform: translateY(-4px); margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; max-height: 0; border-width: 0; }

/* ── Toast notifications (flash messages) ────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  pointer-events: all;
  transform: translateX(16px);
  opacity: 0;
  transition: transform 240ms ease, opacity 240ms ease;
  font-family: 'Inter', sans-serif;
  max-width: 360px;
}
.toast.is-visible  { transform: translateX(0); opacity: 1; }
.toast.is-hiding   { transform: translateX(16px); opacity: 0; }
.toast--success { background: var(--c-success-bg); border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-surface)); color: var(--c-success); }
.toast--error   { background: var(--c-danger-bg);  border-color: color-mix(in srgb, var(--c-danger)  35%, var(--c-surface)); color: var(--c-danger);  }
.toast--warning { background: var(--c-warning-bg); border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-surface)); color: var(--c-warning); }
.toast--info    { background: var(--c-info-bg);    border-color: color-mix(in srgb, var(--c-info) 30%, var(--c-surface)); color: var(--c-info); }
.toast__icon         { flex-shrink: 0; margin-top: 1px; }
.toast__icon svg     { width: 16px; height: 16px; display: block; }
.toast__msg          { flex: 1; line-height: 1.45; }
.toast__close        { flex-shrink: 0; background: none; border: 0; cursor: pointer; opacity: 0.5; color: inherit; padding: 0; margin: -1px -2px -1px 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; transition: opacity .15s, background .15s; }
.toast__close svg    { width: 13px; height: 13px; }
.toast__close:hover  { opacity: 1; background: rgba(0,0,0,0.08); }

/* Collapsible group toggle (itinerary "Show all X days", etc.) */
.itin-card__toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px 20px;
  border: 0; border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-primary);
  font-size: 0.83rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.itin-card__toggle:hover { background: var(--c-primary-ghost); color: var(--c-primary-dk); }
.itin-card__toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }

/* Add Traveller modal — picker rows */
.add-trav-list { display: flex; flex-direction: column; gap: 6px; }
.add-trav-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.add-trav-row:hover { border-color: var(--c-primary); background: var(--c-primary-ghost); }
.add-trav-row:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-pale); }
.add-trav-row > input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--c-primary); flex-shrink: 0; }
.add-trav-row__avatar { flex-shrink: 0; }
.add-trav-row__body { flex: 1; min-width: 0; }
.add-trav-row__name { font-size: .87rem; font-weight: 600; color: var(--c-text); }
.add-trav-row__meta { font-size: .72rem; color: var(--c-text-muted); margin-top: 2px; }
.add-trav-row__price { font-size: .78rem; font-weight: 600; color: var(--c-primary-dk); white-space: nowrap; }

/* Itinerary day rows */
.itin-day { display: flex; gap: 16px; padding: 14px 20px; }
.itin-day--sep { border-top: 1px solid var(--c-border); }
.itin-day[hidden] { display: none !important; }
.itin-day__daynum { width: 46px; flex-shrink: 0; text-align: center; }
.itin-day__daynum-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-muted); }
.itin-day__daynum-val { font-size: 1.15rem; font-weight: 700; color: var(--c-primary); line-height: 1.2; }
.itin-day__body { flex: 1; min-width: 0; }
.itin-day__title { font-size: .88rem; font-weight: 600; color: var(--c-text); margin-bottom: 3px; }
.itin-day__descr { font-size: .8rem; color: var(--c-text-muted); line-height: 1.5; }
.itin-day__chips { display: flex; gap: 10px; margin-top: 6px; font-size: .7rem; color: var(--c-text-muted); flex-wrap: wrap; }

/* ── Seat lock countdown bar ────────────────────────────────────── */
.seat-lock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin-bottom: 12px; border-radius: var(--r-md);
  background: var(--c-primary-ghost); border: 1px solid var(--c-primary-light, var(--c-primary));
  font-size: .82rem; color: var(--c-text);
}
.seat-lock-bar--warn {
  background: var(--c-warning-bg); border-color: color-mix(in srgb, var(--c-warning) 50%, var(--c-surface)); color: var(--c-warning);
}
.seat-lock-bar--expired {
  background: var(--c-danger-bg); border-color: var(--c-danger); color: var(--c-danger);
}
.seat-lock-bar a { color: inherit; font-weight: 600; }

/* ── Review & Pay — first panel ────────────────────────────────── */
/* Disciplined type scale: only 3 sizes. Title / body / meta. */
.review-hero {
  padding: 20px 24px;
  background: linear-gradient(180deg, var(--c-primary-ghost) 0%, var(--c-surface) 100%);
  border-bottom: 1px solid var(--c-border);
}
.review-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 6px;
}
.review-hero__code {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
}
.review-hero__type {
  padding: 2px 8px;
  background: var(--c-gold-pale); color: var(--c-gold-dk);
  border-radius: var(--r-pill);
  letter-spacing: .04em;
}
.review-hero__title {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 600;
  color: var(--c-text); margin: 0 0 16px;
  line-height: 1.25;
}
.review-hero__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 20px;
}
.review-hero__fact {
  display: flex; align-items: flex-start; gap: 10px;
}
.review-hero__fact > svg {
  width: 18px; height: 18px; color: var(--c-primary); flex-shrink: 0; margin-top: 1px;
}
.review-hero__fact-value {
  font-size: .88rem; font-weight: 600; color: var(--c-text); line-height: 1.2;
}
.review-hero__fact-sub {
  font-size: .72rem; color: var(--c-text-muted); margin-top: 2px; line-height: 1.2;
}

/* Traveller line items */
.review-travs { padding: 8px 0; }
.review-trav {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--c-border-soft, #F3EFE8);
}
.review-trav:last-child { border-bottom: 0; }
.review-trav__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-primary-pale); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.review-trav__body { flex: 1; min-width: 0; }
.review-trav__name {
  font-size: .88rem; font-weight: 600; color: var(--c-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.review-trav__meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; margin-top: 2px;
}
.review-trav__type {
  padding: 1px 8px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  background: var(--c-surface-2); color: var(--c-text-2);
}
.review-trav__type--adult  { background: var(--c-primary-pale); color: var(--c-primary-dk); }
.review-trav__type--child  { background: var(--c-info-bg);      color: var(--c-info); }
.review-trav__type--infant { background: var(--c-warning-bg);   color: var(--c-warning); }
.review-trav__amt {
  font-size: .88rem; font-weight: 600; color: var(--c-text);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}

/* Total */
.review-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  margin-top: 4px;
  background: var(--c-primary-ghost);
  border-top: 1px solid var(--c-border);
}
.review-total__label-main {
  font-size: .88rem; font-weight: 600; color: var(--c-text);
  display: block;
}
.review-total__label-sub {
  font-size: .72rem; color: var(--c-text-muted);
  display: block; margin-top: 2px;
}
.review-total__amt {
  font-size: 1.35rem; font-weight: 700; color: var(--c-primary-dk);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* ══════════════════════════════════════════════════════════════════════════
   Booking detail (portal) — hero, stats strip, tab content
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero — banner strip on top + clean content area below */
.bkg-hero {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  margin-bottom: 16px;
}

/* Banner: 180px image strip with top-overlay ref + actions and bottom route caption */
.bkg-hero__banner {
  position: relative;
  height: 180px;
  background: var(--c-primary-dk);
  overflow: hidden;
}
.bkg-hero__banner--plain {
  height: auto;
  background: linear-gradient(180deg, var(--c-primary-ghost) 0%, var(--c-surface) 100%);
  border-bottom: 1px solid var(--c-border);
}
.bkg-hero__banner .tour-card__slides { position: absolute; inset: 0; }
.bkg-hero__banner .tour-card__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .5s ease;
}
.bkg-hero__banner .tour-card__slide.is-active { opacity: 1; }
.bkg-hero__banner-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.bkg-hero__banner-top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
}
.bkg-hero__banner--plain .bkg-hero__banner-top { padding: 18px 24px; }

.bkg-hero__ref {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill);
  padding: 5px 12px 5px 10px;
  color: #fff;
}
.bkg-hero__banner--plain .bkg-hero__ref {
  background: var(--c-surface); border-color: var(--c-border); color: var(--c-text);
}
.bkg-hero__ref-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; opacity: .78; font-weight: 600; }
.bkg-hero__ref-code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }

.bkg-hero__actions { display: flex; gap: 8px; }
.bkg-hero__btn--ghost {
  background: rgba(255,255,255,.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.35); color: #fff;
}
.bkg-hero__btn--ghost:hover { background: rgba(255,255,255,.32); color: #fff; }
.bkg-hero__banner--plain .bkg-hero__btn--ghost { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }

.bkg-hero__banner-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px 12px;
  color: #fff;
}
.bkg-hero__banner-route {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.bkg-hero__banner-sep { opacity: .7; font-weight: 400; }
.bkg-hero__banner .tour-card__dots { position: static; }

/* Content area — clean white, properly readable */
.bkg-hero__body {
  padding: 20px 24px 22px;
  background: var(--c-surface);
}
.bkg-hero__eyebrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.bkg-hero__chip {
  background: var(--c-gold-pale); color: var(--c-gold-dk);
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.bkg-hero__tourcode {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: .72rem; font-weight: 600; color: var(--c-text-muted); letter-spacing: .04em;
}
.bkg-hero__status { font-size: .7rem; padding: 3px 10px; }
.bkg-hero__countdown {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 600;
  background: var(--c-primary-ghost); color: var(--c-primary-dk);
  border: 1px solid var(--c-border);
}
.bkg-hero__countdown svg { width: 12px; height: 12px; }

.bkg-hero__titlerow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 14px;
}
.bkg-hero__title {
  font-family: var(--font-display);
  font-size: 1.55rem; font-weight: 700;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-text);
}
.bkg-hero__link {
  font-size: .78rem; font-weight: 600;
  color: var(--c-primary); text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.bkg-hero__link:hover { color: var(--c-primary-dk); text-decoration: underline; }

.bkg-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 20px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}
.bkg-hero__fact { display: flex; flex-direction: column; gap: 2px; }
.bkg-hero__fact-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-muted); font-weight: 700; }
.bkg-hero__fact-value { font-size: .92rem; font-weight: 600; line-height: 1.2; color: var(--c-text); }
.bkg-hero__fact-sub { font-size: .7rem; color: var(--c-text-muted); line-height: 1.2; }

/* Stats strip — 5 tight cards */
.bkg-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px 4px;
  margin-bottom: 16px;
}
.bkg-stats__item {
  padding: 0 16px;
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: 4px;
}
.bkg-stats__item:last-child { border-right: 0; }
.bkg-stats__label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-text-muted); font-weight: 700;
}
.bkg-stats__value {
  font-size: 1.05rem; font-weight: 700; color: var(--c-text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.005em;
}
.bkg-stats__value--success { color: var(--c-primary-dk); }
.bkg-stats__value--danger  { color: var(--c-danger); }
.bkg-stats__value--warning { color: var(--c-warning); }
.bkg-stats__sub { font-size: .7rem; color: var(--c-text-muted); }
.bkg-stats__bar {
  margin-top: 4px;
  height: 3px; background: var(--c-surface-2); border-radius: var(--r-pill);
  overflow: hidden;
}
.bkg-stats__bar span { display: block; height: 100%; background: var(--c-primary); border-radius: inherit; }

@media (max-width: 768px) {
  .bkg-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px; }
  .bkg-stats__item { border-right: 0; border-bottom: 1px solid var(--c-border); padding: 0 0 10px; }
  .bkg-stats__item:last-child { border-bottom: 0; }
}

/* Destination rows on Overview tab */
.bkg-dest-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
}
.bkg-dest-row--sep { border-top: 1px solid var(--c-border); }
.bkg-dest-row__img {
  position: relative; width: 64px; height: 48px; flex-shrink: 0;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 1px 3px rgba(17,46,30,.1);
}
.bkg-dest-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkg-dest-row__num {
  position: absolute; top: 4px; left: 4px;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: rgba(17,46,30,.85); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  font-size: .65rem; font-weight: 700;
  backdrop-filter: blur(4px);
}
.bkg-dest-row__num--solo {
  position: static; width: 36px; height: 36px; padding: 0;
  background: var(--c-primary-pale); color: var(--c-primary);
  font-size: .85rem;
}
.bkg-dest-row__body { flex: 1; min-width: 0; }
.bkg-dest-row__name { font-size: .9rem; font-weight: 600; color: var(--c-text); }
.bkg-dest-row__meta {
  font-size: .72rem; color: var(--c-text-muted);
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px;
}

/* Traveller rows on Travellers tab */
.bkg-trav-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--c-border-soft, #F3EFE8);
}
.bkg-trav-row:last-child { border-bottom: 0; }
.bkg-trav-row--gl { background: linear-gradient(90deg, var(--c-gold-pale) 0%, transparent 30%); }
.bkg-trav-row__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-primary-pale); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; flex-shrink: 0;
}
.bkg-trav-row--gl .bkg-trav-row__avatar { background: var(--c-gold-pale); color: var(--c-gold-dk); }
.bkg-trav-row__body { flex: 1; min-width: 0; }
.bkg-trav-row__name {
  font-size: .9rem; font-weight: 600; color: var(--c-text);
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bkg-trav-row__meta {
  font-size: .75rem; color: var(--c-text-muted);
  display: inline-flex; gap: 6px; align-items: center; margin-top: 2px; flex-wrap: wrap;
}
.bkg-trav-row__docs {
  display: flex; flex-direction: column; gap: 2px;
  align-items: flex-end; flex-shrink: 0;
}
.bkg-trav-row__docs-label { font-size: .62rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.bkg-trav-row__amt {
  text-align: right; flex-shrink: 0;
  min-width: 90px;
}
.bkg-trav-row__amt-val { font-size: .9rem; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }
.bkg-trav-row__amt-adj { font-size: .7rem; color: var(--c-text-muted); }

/* Formality / tour doc rows */
.bkg-formality-row, .bkg-doc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
}
.bkg-formality-row--sep, .bkg-doc-row--sep { border-top: 1px solid var(--c-border); }
.bkg-formality-row__icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--c-warning-bg); color: var(--c-warning);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bkg-formality-row__icon svg { width: 16px; height: 16px; }
.bkg-formality-row__body { flex: 1; min-width: 0; }
.bkg-formality-row__title { font-size: .87rem; font-weight: 600; color: var(--c-text); }
.bkg-formality-row__meta { font-size: .72rem; color: var(--c-text-muted); margin-top: 2px; }
.bkg-formality-row__amt { font-size: .9rem; font-weight: 600; color: var(--c-text); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.bkg-doc-row__icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--c-primary-ghost); color: var(--c-primary);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bkg-doc-row__icon svg { width: 16px; height: 16px; }
.bkg-doc-row__body { flex: 1; min-width: 0; }
.bkg-doc-row__title { font-size: .87rem; font-weight: 600; color: var(--c-text); }
.bkg-doc-row__meta {
  font-size: .72rem; color: var(--c-text-muted);
  display: inline-flex; gap: 10px; align-items: center; margin-top: 2px; flex-wrap: wrap;
}

/* Advisory card */
.advisory-card { margin-bottom: 12px; }
.advisory-card__icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.advisory-card__icon svg { width: 18px; height: 18px; }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: 0.733rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--danger  { background: var(--c-danger-bg);  color: var(--c-danger);  }
.badge--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge--info    { background: var(--c-info-bg);    color: var(--c-info);    }
.badge--gold    { background: var(--c-gold-pale);  color: var(--c-gold-dk); }
.badge--neutral { background: var(--c-surface-2);  color: var(--c-text-muted); }
.badge--locked  { background: var(--c-surface-2);  color: var(--c-text-muted); border: 1px dashed var(--c-border-strong); display: inline-flex; align-items: center; gap: 4px; }
.badge--muted   { background: var(--c-surface-2);  color: var(--c-text-light); }
.badge--xs      { font-size: 0.653rem; padding: 2px var(--sp-1); }

/* Opt-in dot for status indicators that want a leading bullet */
.badge--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ── Filter Bar + Pill Tabs ──────────────────────────────────── */
/* Generic horizontal filter row used on list pages */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* ── Listing filter bar: primary context + secondary filters ─────────── */
.listing-filters{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.listing-filters__primary{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.listing-filters__secondary{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Context picker — single-filter dropdown (tour, group, package, etc.).
   In Phase-B harmonisation the visual was unified with the chip filter:
   same slate-200 border, forest-ink active accents, same shadow + radii.
   HTML/JS unchanged; pages that use it (mumineen, bookings list, portal book)
   pick up the new look automatically. */
.ctx-picker { position: relative; display: inline-flex; flex: 0 0 auto; }
.ctx-picker__trigger {
  display: inline-flex; align-items: center; gap: 0;
  min-width: 320px; padding: 0;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s;
  text-align: left;
  color: var(--c-text);
}
.ctx-picker__trigger:hover { border-color: var(--c-slate-300); }
.ctx-picker__trigger:focus-visible,
.ctx-picker.is-open .ctx-picker__trigger {
  outline: 0;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
}
.ctx-picker.is-active .ctx-picker__trigger {
  border-color: var(--c-ink);
  background: var(--c-ink-pale);
}
.ctx-picker__icon { display: flex; align-items: center; justify-content: center; padding: 0 10px 0 14px; color: var(--c-ink); flex-shrink: 0; }
.ctx-picker__icon svg { width: 16px; height: 16px; }
.ctx-picker__label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-slate-500); font-weight: 700;
  padding-right: 8px; white-space: nowrap; flex-shrink: 0;
}
.ctx-picker__value {
  flex: 1; min-width: 0; padding: 10px 0;
  font-size: var(--text-sm); font-weight: 600; color: var(--c-slate-800);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.ctx-picker__chevron { display: flex; align-items: center; padding: 0 12px; color: var(--c-slate-400); flex-shrink: 0; transition: transform .15s; }
.ctx-picker__chevron svg { width: 14px; height: 14px; }
.ctx-picker.is-open .ctx-picker__chevron { transform: rotate(180deg); }

/* Menu panel — same shadow + radii as .fpop / .pay-widget__pop */
.ctx-picker__menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 100%; max-width: 440px; max-height: 420px;
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
  z-index: 50; overflow: hidden;
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s, transform .12s;
}
.ctx-picker.is-open .ctx-picker__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ctx-picker__search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-slate-100);
  background: var(--c-slate-50);
}
.ctx-picker__search input {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--c-slate-200); border-radius: var(--r-sm);
  font-size: var(--text-sm); font-family: inherit;
  background: var(--c-surface); color: var(--c-slate-800);
}
.ctx-picker__search input:focus {
  outline: 0;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 2px var(--c-ink-pale);
}
.ctx-picker__list { flex: 1; overflow-y: auto; padding: 6px 0; }
.ctx-picker__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  font-size: var(--text-sm); color: var(--c-slate-700);
  text-decoration: none; cursor: pointer;
  transition: background .08s;
  border: 0; background: transparent;
  width: 100%; text-align: left; font-family: inherit; line-height: 1.35;
}
.ctx-picker__item:hover,
.ctx-picker__item.is-highlighted {
  background: var(--c-slate-50);
  text-decoration: none; color: var(--c-slate-800);
}
.ctx-picker__item.is-selected {
  background: var(--c-ink-pale);
  color: var(--c-ink);
  font-weight: 600;
}
.ctx-picker__item.is-selected:hover,
.ctx-picker__item.is-selected.is-highlighted {
  background: color-mix(in srgb, var(--c-ink) 16%, var(--c-surface));
}
.ctx-picker__item-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-picker__item-meta {
  font-size: var(--text-xs); color: var(--c-slate-400); font-weight: 400;
  margin-left: 8px; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.ctx-picker__item.is-selected .ctx-picker__item-meta { color: var(--c-ink-lite); }
.ctx-picker__empty { padding: 24px 16px; text-align: center; font-size: var(--text-xs); color: var(--c-slate-400); }

/* Table actions cell — keeps <td> as a proper table cell (no display:flex on td) and
   lays children out inline. Root cause of the misaligned row-border bug. */
.table__actions{white-space:nowrap;text-align:right}
.table__actions form{display:inline-block;margin:0}
.table__actions > .btn, .table__actions form > .btn{vertical-align:middle}
.table__actions .btn + .btn,
.table__actions .btn + form,
.table__actions form + .btn,
.table__actions form + form{margin-left:6px}

/* ── Booking Wizard ──────────────────────────────────────────────────────── */
.wiz{max-width:860px;margin:0 auto;padding-bottom:40px}
.wiz__header{display:flex;align-items:flex-start;gap:12px;margin-bottom:24px}
.wiz__back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text-muted);flex-shrink:0;transition:background .12s,color .12s}
.wiz__back:hover{background:var(--c-surface-2);color:var(--c-text)}
.wiz__back svg{width:16px;height:16px}
.wiz__title{flex:1;min-width:0}
.wiz__eyebrow{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-primary);font-weight:600;margin-bottom:4px}
.wiz__title h1{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--c-text);margin:0 0 4px;line-height:1.2}
.wiz__sub{font-size:.82rem;color:var(--c-text-muted)}

/* Stepper */
.wiz__steps{list-style:none;display:flex;gap:0;padding:0;margin:0 0 24px;counter-reset:step;position:relative}
.wiz__step{flex:1;display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--c-surface);border:1px solid var(--c-border);border-right:0;font-size:.85rem;color:var(--c-text-muted);min-width:0;transition:background .15s,color .15s}
.wiz__step:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}
.wiz__step:last-child{border-radius:0 var(--r-md) var(--r-md) 0;border-right:1px solid var(--c-border)}
.wiz__step.is-active{background:var(--c-primary-ghost);color:var(--c-primary);font-weight:600}
.wiz__step.is-done{color:var(--c-primary)}
.wiz__step-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--c-surface-2);color:var(--c-text-muted);font-size:.78rem;font-weight:700;flex-shrink:0;transition:background .15s,color .15s}
.wiz__step.is-active .wiz__step-num{background:var(--c-primary);color:#fff}
.wiz__step.is-done .wiz__step-num{background:var(--c-primary-lite);color:#fff}
.wiz__step-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Panels */
.wiz__panel{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px;margin-bottom:16px}
.wiz__panel-head{margin-bottom:18px}
.wiz__panel-head h2{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--c-text);margin:0 0 4px}
.wiz__panel-sub{font-size:.85rem;color:var(--c-text-muted);line-height:1.5;margin:0}
.wiz__empty{padding:32px;text-align:center;color:var(--c-text-muted);font-size:.88rem}

/* Group picker — chip row that filters traveller cards */
.wiz__group-filter{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;overflow-x:auto;scrollbar-width:thin}
.wiz__group-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-pill);font-size:.82rem;font-weight:500;color:var(--c-text-muted);cursor:pointer;transition:all .12s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.wiz__group-chip:hover{border-color:var(--c-primary-lite);color:var(--c-text)}
.wiz__group-chip.is-active{background:var(--c-primary-ghost);border-color:var(--c-primary);color:var(--c-primary);font-weight:600}
.wiz__group-chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;background:var(--c-surface-2);color:var(--c-text-muted);font-size:.7rem;font-weight:700;border-radius:var(--r-pill)}
.wiz__group-chip.is-active .wiz__group-chip-count{background:var(--c-primary);color:#fff}
.wiz__group-hint{font-size:.82rem;color:var(--c-text-muted);margin-bottom:14px}
.wiz__group-hint strong{color:var(--c-text);font-weight:600}

/* Traveller cards */
.wiz__travellers{display:grid;grid-template-columns:1fr;gap:10px}
.trav-card{display:flex;gap:14px;padding:14px 16px;border:1.5px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);cursor:pointer;align-items:center;transition:border-color .12s,background .12s,box-shadow .12s;position:relative}
.trav-card:hover{border-color:var(--c-primary-lite)}
.trav-card.is-selected{border-color:var(--c-primary);background:var(--c-primary-ghost);box-shadow:0 0 0 3px var(--c-primary-ghost)}
.trav-card.is-disabled{opacity:.55;cursor:not-allowed;background:var(--c-surface-2)}
.trav-card.is-disabled:hover{border-color:var(--c-border)}
.trav-card input[type=checkbox]{margin:0;flex-shrink:0;width:18px;height:18px;accent-color:var(--c-primary);cursor:pointer}
.trav-card__body{flex:1;min-width:0}
.trav-card__name{font-weight:600;font-size:.95rem;color:var(--c-text);display:flex;align-items:center;gap:8px}
.trav-card__self{display:inline-block;padding:1px 8px;background:var(--c-primary);color:#fff;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--r-pill)}
.trav-card__meta{font-size:.78rem;color:var(--c-text-muted);margin-top:2px}
.trav-card__booked{color:var(--c-warning);font-weight:500}
.trav-card.has-warning{border-color:var(--c-warning);background:linear-gradient(0deg,var(--c-warning-bg) 0%,var(--c-surface) 40%)}
.trav-card__warn{display:flex;align-items:center;gap:6px;margin-top:6px;padding:6px 10px;background:var(--c-warning-bg);color:var(--c-warning);border-radius:var(--r-sm);font-size:.75rem;font-weight:500}
.trav-card__warn svg{width:13px;height:13px;flex-shrink:0}
.trav-card__warn a{color:var(--c-warning);font-weight:600;text-decoration:underline}
.trav-card__price{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trav-card__price-label{font-size:.78rem;color:var(--c-text-muted)}
.trav-card__price-amt{font-weight:600;color:var(--c-text);font-variant-numeric:tabular-nums}
.trav-card__price-select{padding:6px 10px;border:1px solid var(--c-border);border-radius:var(--r-sm);font-size:.82rem;background:var(--c-surface);color:var(--c-text);font-family:inherit;font-weight:500}
.trav-card__price-select:focus{outline:0;border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary-ghost)}
.trav-card__check{width:22px;height:22px;color:var(--c-primary);flex-shrink:0;opacity:0;transition:opacity .15s}
.trav-card.is-selected .trav-card__check{opacity:1}

/* Total strip */
.wiz__total{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--c-surface-2);border-radius:var(--r-md);font-size:.9rem;margin-bottom:16px;border:1px solid var(--c-border)}
.wiz__total strong{font-size:1.1rem;color:var(--c-primary);font-variant-numeric:tabular-nums}
.wiz__total--lg{padding:18px 22px;background:var(--c-primary-ghost);border-color:var(--c-primary-pale)}
.wiz__total--lg strong{font-size:1.4rem}

/* Actions — sticky on mobile */
.wiz__actions{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:18px 0 0}
.wiz__actions .btn{flex:0 0 auto}
.wiz__actions .btn--primary{margin-left:auto}
/* Admin "documents pending" note in the booking wizard (admin-on-behalf only) */
.wiz__docnote{margin:14px 0 0;padding:12px 16px;font-size:.82rem;line-height:1.55;
  color:var(--c-warning);background:var(--c-warning-bg);
  border:1px solid color-mix(in srgb,var(--c-warning) 25%,var(--c-surface));border-radius:var(--r-md)}
.wiz__docnote--inset{margin:18px 0 2px}        /* sits between pay options and the action buttons */
.wiz__docnote strong{font-weight:700}

/* Stepper: "Documents pending" flag (admin booking-on-behalf only) */
.wiz__step--alert .wiz__step-num{background:var(--c-warning);color:#fff}
.wiz__step-flag{margin-left:auto;flex-shrink:0;font-size:.6rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-warning);background:var(--c-warning-bg);
  padding:2px 7px;border-radius:var(--r-pill)}

/* Admin in-office payment-capture block in the booking wizard (step 3) */
.wiz-pay{display:flex;flex-direction:column;gap:16px}
.wiz-pay__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wiz-pay__field{display:flex;flex-direction:column;gap:6px;min-width:0}
.wiz-pay__label{font-size:.82rem;font-weight:600;color:var(--c-text-2)}
.wiz-pay__label .req{color:var(--c-danger);font-weight:700}
.wiz-pay__hint{margin:6px 0 0;font-size:.74rem;color:var(--c-text-muted);line-height:1.45}
.wiz-pay__hint strong{color:var(--c-text-2);font-weight:600}
/* Give the method chips + ledger hint room to breathe under the account picker
   (wizard-scoped — the finance voucher's tighter widget is left as-is). */
.wiz-pay .pay-widget__method-row{margin-top:12px;gap:8px}
.wiz-pay .pay-widget__method-set{gap:8px}
.wiz-pay .pay-widget__method-btn{padding:6px 14px;font-size:.78rem}
@media (max-width:640px){.wiz-pay__row{grid-template-columns:1fr}}

/* ── Booking wizard step 1 — shopping cart pattern ───────────────────────── */
.wiz-pickers{display:flex;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.wiz-pickers .ctx-picker{flex:1;min-width:280px}
.wiz-pickers .ctx-picker__trigger{width:100%}

.cart-stack{display:flex;flex-direction:column;gap:16px}

/* Catalogue */
.cart-cat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.cart-cat__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--c-border);background:var(--c-surface-2);flex-wrap:wrap}
.cart-cat__title{margin:0;font-family:var(--font-display);font-size:.95rem;font-weight:600;color:var(--c-text)}
.cart-cat__head-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cart-cat__its-form{display:flex;gap:6px;align-items:center;margin:0}
.cart-cat__its-input{position:relative}
.cart-cat__its-input svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--c-text-muted);pointer-events:none}
.cart-cat__its-input input{padding:7px 10px 7px 30px;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);font-family:inherit;font-size:.82rem;width:150px}
.cart-cat__its-input input:focus{outline:0;border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary-ghost)}
.cart-cat__meta{font-size:.78rem;color:var(--c-text-muted);font-weight:500;font-variant-numeric:tabular-nums}

.cart-cat__list{list-style:none;padding:0;margin:0;max-height:540px;overflow-y:auto}
.cart-cat__empty{padding:40px 24px;text-align:center;color:var(--c-text-muted);font-size:.88rem}

.cart-cat-row{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--c-border);transition:background .12s}
.cart-cat-row:last-child{border-bottom:0}
.cart-cat-row:hover:not(.is-disabled){background:var(--c-surface-2)}
.cart-cat-row.is-disabled{opacity:.6}
.cart-cat-row__main{flex:1;display:flex;align-items:center;gap:12px;cursor:pointer;min-width:0}
.cart-cat-row.is-disabled .cart-cat-row__main{cursor:not-allowed}
.cart-cat-row__cb{margin:0;width:17px;height:17px;accent-color:var(--c-primary);flex-shrink:0}
.cart-cat-row__cb:disabled{cursor:not-allowed}
.cart-cat-row__avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--c-primary-ghost);color:var(--c-primary);font-size:.78rem;font-weight:600;flex-shrink:0}
.cart-cat-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cart-cat-row__name{font-weight:600;font-size:.92rem;color:var(--c-text);display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-cat-row__meta{font-size:.74rem;color:var(--c-text-muted);font-variant-numeric:tabular-nums}
.cart-cat-row__action{flex-shrink:0}

.cart-cat__foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid var(--c-border);background:var(--c-surface)}
.cart-cat__sel-count{font-size:.82rem;color:var(--c-text-muted)}

/* Cart (stacks below catalogue, full width) */
.cart-side{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.cart-side__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--c-border);background:var(--c-surface-2)}
.cart-side__head h2{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--c-text)}
.cart-side__count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 8px;background:var(--c-primary);color:#fff;font-size:.74rem;font-weight:700;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}

.cart-side__empty{padding:40px 24px;text-align:center;color:var(--c-text-muted)}
.cart-side__empty svg{width:36px;height:36px;color:var(--c-text-light);margin-bottom:10px}
.cart-side__empty p{margin:4px 0;font-size:.88rem;color:var(--c-text)}
.cart-side__empty-sub{font-size:.78rem !important;color:var(--c-text-muted) !important}

/* Cart traveller table — one line per traveller */
.cart-table{width:100%;border-collapse:collapse;table-layout:auto}
.cart-table__row{border-bottom:1px solid var(--c-border);transition:background .1s}
.cart-table__row:last-child{border-bottom:0}
.cart-table__row:hover{background:var(--c-surface-2)}
.cart-table td{padding:10px 14px;vertical-align:middle;font-size:.86rem;color:var(--c-text)}
.cart-table td:first-child{padding-left:18px}
.cart-table td:last-child{padding-right:18px}

.cart-table__avatar{width:32px}
.cart-table__avatar span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--c-primary-ghost);color:var(--c-primary);font-size:.7rem;font-weight:600}

.cart-table__name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.cart-table__name-text{margin-right:8px}

.cart-table__id{color:var(--c-text-muted);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}

.cart-table__tier{white-space:nowrap}
.cart-table__tier form{margin:0}
.cart-table__tier select{padding:5px 24px 5px 10px;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);font-family:inherit;font-size:.78rem;color:var(--c-text);font-weight:500;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23667085'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:12px}
.cart-table__tier select:focus{outline:0;border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary-ghost)}
.cart-table__tier-label{font-size:.78rem;color:var(--c-text-muted)}

.cart-table__amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}

.cart-table__rm{width:32px;text-align:center}
.cart-table__rm form{margin:0;display:inline-flex}
.cart-table__rm button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:transparent;border:0;color:var(--c-text-light);cursor:pointer;padding:0;transition:background .12s,color .12s}
.cart-table__rm button:hover{background:var(--c-danger-bg);color:var(--c-danger)}
.cart-table__rm svg{width:14px;height:14px}

.cart-side__total{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-top:1px solid var(--c-border);background:var(--c-primary-ghost)}
.cart-side__total span{font-size:.85rem;color:var(--c-text);font-weight:500}
.cart-side__total strong{font-size:1.1rem;color:var(--c-primary);font-variant-numeric:tabular-nums}

.cart-side__continue{padding:14px 18px;border-top:1px solid var(--c-border);margin:0}
.cart-side__btn{width:100%;justify-content:center}
.cart-side__cancel{display:block;text-align:center;padding:8px 18px 16px;font-size:.78rem;color:var(--c-text-muted);text-decoration:none}
.cart-side__cancel:hover{color:var(--c-danger);text-decoration:underline}

/* Self pill — small primary tag for the booker themself */
.cart-self{display:inline-block;padding:1px 8px;background:var(--c-primary);color:#fff;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--r-pill);line-height:1.4}

/* Floating cart count — visible while scrolling, jumps to cart on click */
.cart-float{position:fixed;bottom:24px;right:24px;display:inline-flex;align-items:center;gap:6px;padding:10px 16px 10px 12px;background:var(--c-primary);color:#fff;border-radius:var(--r-pill);box-shadow:0 8px 24px -8px rgba(17,46,30,.35),0 4px 8px -4px rgba(17,46,30,.2);text-decoration:none;font-weight:600;z-index:40;transition:transform .15s,box-shadow .15s;scroll-behavior:smooth}
.cart-float:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px rgba(17,46,30,.45),0 6px 12px -4px rgba(17,46,30,.25);color:#fff;text-decoration:none}
.cart-float svg{width:18px;height:18px}
.cart-float__count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;background:rgba(255,255,255,.22);border-radius:var(--r-pill);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums}
html{scroll-behavior:smooth}

/* Documents step */
.wiz__docs{display:flex;flex-direction:column;gap:12px}
.doc-card{background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;transition:border-color .15s}
.doc-card.is-ready{border-color:var(--c-success)}
.doc-card[open]{box-shadow:0 2px 8px -2px rgba(17,46,30,.08)}
.doc-card__head{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;list-style:none;user-select:none}
.doc-card__head::-webkit-details-marker{display:none}
.doc-card__head:hover{background:var(--c-surface-2)}
.doc-card__status{flex-shrink:0}
.doc-card__dot{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:50%;font-size:.72rem;font-weight:700}
.doc-card__dot--ok{background:var(--c-success-bg);color:var(--c-success)}
.doc-card__dot--ok svg{width:16px;height:16px}
.doc-card__dot--pending{background:var(--c-warning-bg);color:var(--c-warning);padding:0 8px}
.doc-card__body{flex:1;min-width:0}
.doc-card__name{font-weight:600;color:var(--c-text);font-size:.95rem}
.doc-card__meta{font-size:.78rem;color:var(--c-text-muted);margin-top:2px}
.doc-card__chev{width:16px;height:16px;color:var(--c-text-muted);flex-shrink:0;transition:transform .2s}
.doc-card[open] .doc-card__chev{transform:rotate(180deg)}
.doc-card__inner{padding:0 18px 18px;border-top:1px solid var(--c-border);display:flex;flex-direction:column;gap:14px;padding-top:16px}

/* Doc requirement row */
.doc-req{padding:14px 16px;background:var(--c-surface-2);border-radius:var(--r-md);border:1px solid var(--c-border)}
.doc-req.is-uploaded{border-color:var(--c-primary-pale);background:var(--c-primary-ghost)}
.doc-req__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.doc-req__label{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.doc-req__name{font-weight:600;color:var(--c-text);font-size:.88rem}
.doc-req__badge{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:2px 8px;border-radius:var(--r-pill)}
.doc-req__badge--missing{background:var(--c-warning-bg);color:var(--c-warning)}
.doc-req__badge--uploaded{background:var(--c-info-bg);color:var(--c-info)}
.doc-req__badge--verified{background:var(--c-success-bg);color:var(--c-success)}
.doc-req__badge--rejected{background:var(--c-danger-bg);color:var(--c-danger)}
.doc-req__view{font-size:.8rem;color:var(--c-primary);font-weight:500;text-decoration:none}
.doc-req__view:hover{text-decoration:underline}
.doc-req__sample{display:flex;align-items:center;gap:12px;margin:10px 0;padding:10px;background:var(--c-surface);border-radius:var(--r-sm);border:1px dashed var(--c-primary-pale)}
.doc-req__sample img{width:70px;height:50px;object-fit:cover;border-radius:var(--r-sm);flex-shrink:0}
.doc-req__sample-doc{display:inline-flex;align-items:center;justify-content:center;width:70px;height:50px;background:var(--c-primary-ghost);color:var(--c-primary);font-size:.72rem;font-weight:600;border-radius:var(--r-sm);flex-shrink:0}
.doc-req__sample-cap{font-size:.75rem;color:var(--c-text-muted);line-height:1.4}
.doc-req__form{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.doc-req__file{position:relative;cursor:pointer;display:block}
.doc-req__file input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.doc-req__file-label{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:var(--c-surface);border:1px dashed var(--c-border);border-radius:var(--r-sm);font-size:.82rem;color:var(--c-text-muted);font-weight:500;width:100%;transition:background .15s,border-color .15s,color .15s}
.doc-req__file-label svg{width:14px;height:14px;flex-shrink:0}
.doc-req__file-label .doc-req__file-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-req__file:hover .doc-req__file-label{border-color:var(--c-primary);color:var(--c-primary)}

/* Selected state — file chosen */
.doc-req__file-icon-selected,
.doc-req__file-clear{display:none}
.doc-req__file.is-selected .doc-req__file-label{
  background:var(--c-success-bg);
  border:1px solid color-mix(in srgb, var(--c-success) 30%, var(--c-surface));
  color:var(--c-success);
}
.doc-req__file.is-selected .doc-req__file-icon-default{display:none}
.doc-req__file.is-selected .doc-req__file-icon-selected{display:inline-block;color:var(--c-success)}
.doc-req__file.is-selected .doc-req__file-clear{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:0;margin-left:6px;
  border:0;background:transparent;color:var(--c-success);opacity:.6;
  border-radius:50%;cursor:pointer;
  transition:opacity .15s,background .15s;
  pointer-events:auto; position:relative; z-index:2;
}
.doc-req__file.is-selected .doc-req__file-clear:hover{opacity:1;background:color-mix(in srgb, var(--c-success) 10%, transparent)}
.doc-req__file.is-selected .doc-req__file-clear svg{width:12px;height:12px}
.doc-req__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.doc-req__meta-field{display:flex;flex-direction:column;gap:4px}
.doc-req__meta-field label{font-size:.72rem;color:var(--c-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.doc-req__meta-field input{padding:8px 10px;font-size:.85rem;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);font-family:inherit;color:var(--c-text)}
.doc-req__meta-field input:focus{outline:0;border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary-ghost)}
.doc-req__submit{align-self:flex-start}
@media (max-width: 640px) {
  .doc-req__meta{grid-template-columns:1fr}
  .doc-req__submit{width:100%;align-self:stretch}
}

/* Review step */
.wiz__summary{display:flex;flex-direction:column;gap:0;margin-bottom:16px}
.wiz__summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-border)}
.wiz__summary-row:last-child{border-bottom:0}
.wiz__summary-row span{font-size:.85rem;color:var(--c-text-muted)}
.wiz__summary-row strong{font-weight:600;color:var(--c-text)}
.wiz__travellers-mini{display:flex;flex-direction:column;gap:1px;background:var(--c-border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:16px}
.trav-mini{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--c-surface);gap:12px}
.trav-mini__name{font-weight:500;color:var(--c-text);font-size:.88rem;flex:1;min-width:0}
.trav-mini__meta{font-size:.78rem;color:var(--c-text-muted)}
.trav-mini__amt{font-weight:600;font-variant-numeric:tabular-nums;color:var(--c-text)}

/* Payment options */
.pay-options{display:flex;flex-direction:column;gap:10px}
.pay-option{display:flex;gap:14px;padding:16px 18px;border:1.5px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;background:var(--c-surface);transition:border-color .12s,background .12s}
.pay-option:hover{border-color:var(--c-primary-lite)}
.pay-option:has(input:checked){border-color:var(--c-primary);background:var(--c-primary-ghost);box-shadow:0 0 0 3px var(--c-primary-ghost)}
.pay-option input[type=radio]{margin-top:2px;accent-color:var(--c-primary);flex-shrink:0;width:18px;height:18px;cursor:pointer}
.pay-option__title{font-weight:600;color:var(--c-text);font-size:.95rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pay-option__sub{font-size:.82rem;color:var(--c-text-muted);margin-top:4px;line-height:1.45}
.pay-option__badge{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-warning-bg);color:var(--c-warning)}

.wiz__discard{background:none;border:0;color:var(--c-text-muted);font-size:.82rem;cursor:pointer;font-family:inherit;padding:6px 12px;text-decoration:underline;text-underline-offset:3px}
.wiz__discard:hover{color:var(--c-danger)}

/* Tour info sections (step 3 — informational, no agreement required) */
.wiz__panel--info{padding:0;overflow:hidden}
.tour-info-sec{padding:16px 22px}
.tour-info-sec+.tour-info-sec{border-top:1px solid var(--c-border)}
.tour-info-sec__label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-muted);margin-bottom:7px}
.tour-info-sec__body{font-size:.88rem;line-height:1.7;color:var(--c-text-2)}

/* T&C acceptance block (step 3 — agreement required before submit) */
.tnc-block{margin:20px 0 4px;border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden}
.tnc-block__head{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--c-bg);border-bottom:1px solid var(--c-border)}
.tnc-block__head svg{width:14px;height:14px;color:var(--c-text-muted);flex-shrink:0}
.tnc-block__head span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-muted)}
.tnc-block__scroll{max-height:160px;overflow-y:auto;padding:14px;font-size:.85rem;line-height:1.7;color:var(--c-text-2);white-space:pre-wrap;background:var(--c-surface)}
.tnc-block__agree{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--c-primary-ghost);border-top:1px solid var(--c-primary-pale);cursor:pointer;user-select:none}
.tnc-block__agree input[type=checkbox]{margin-top:2px;flex-shrink:0;width:15px;height:15px;accent-color:var(--c-primary)}
.tnc-block__agree>span{font-size:.88rem;font-weight:500;color:var(--c-text);line-height:1.4}

/* T&C acceptance toggle switch (tour detail page) */
.tnc-toggle{display:flex;align-items:flex-start;gap:12px;padding:14px 20px;cursor:pointer;user-select:none;border-top:1px solid var(--c-border);background:var(--c-primary-ghost)}
.tnc-toggle__input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.tnc-toggle__track{flex-shrink:0;width:36px;height:20px;border-radius:10px;background:var(--c-border-strong);position:relative;transition:background .2s;margin-top:1px}
.tnc-toggle__input:checked+.tnc-toggle__track{background:var(--c-primary)}
.tnc-toggle__thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .2s}
.tnc-toggle__input:checked+.tnc-toggle__track .tnc-toggle__thumb{transform:translateX(16px)}
.tnc-toggle__label{font-size:.88rem;font-weight:500;color:var(--c-text);line-height:1.45}

/* Mobile: sticky Continue bar, single-column, tighter panels */
@media (max-width: 640px) {
  .wiz{padding-bottom:92px}
  .wiz__header{flex-wrap:wrap}
  .wiz__title h1{font-size:1.25rem}
  .wiz__steps{gap:4px;margin-bottom:16px}
  .wiz__step{flex:1;padding:10px 8px;border-radius:var(--r-sm)!important;border-right:1px solid var(--c-border);flex-direction:column;gap:4px;font-size:.68rem;text-align:center}
  .wiz__step-num{width:20px;height:20px;font-size:.68rem}
  .wiz__step-label{font-size:.68rem}
  .wiz__panel{padding:16px;border-radius:var(--r-md)}
  .wiz__actions{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--c-surface);border-top:1px solid var(--c-border);padding:12px 16px;box-shadow:0 -4px 16px -8px rgba(0,0,0,.12);margin:0}
  .wiz__actions .btn{flex:1;justify-content:center;padding:12px}
  .doc-req__form{flex-direction:column;align-items:stretch}
  .doc-req__form .btn{width:100%;justify-content:center}
}

/* Doc-type field configuration block (admin settings modal) */
.doctype-fieldcfg{margin-top:14px;padding:14px 16px;background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--r-md)}
.doctype-fieldcfg__head{font-size:.78rem;font-weight:600;color:var(--c-text);text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.doctype-fieldcfg__hint{font-size:.75rem;color:var(--c-text-muted);margin:0 0 12px;line-height:1.45}
.doctype-fieldcfg__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--c-border)}
.doctype-fieldcfg__row:first-of-type{border-top:0}
.doctype-fieldcfg__label{font-size:.85rem;font-weight:500;color:var(--c-text);flex:1;min-width:0}
.doctype-fieldcfg__toggle{display:inline-flex;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-pill);padding:2px;gap:0;flex-shrink:0}
.doctype-fieldcfg__toggle label{display:inline-flex;align-items:center;cursor:pointer;padding:5px 12px;font-size:.72rem;font-weight:600;color:var(--c-text-muted);border-radius:var(--r-pill);transition:all .12s;user-select:none}
.doctype-fieldcfg__toggle input{position:absolute;opacity:0;pointer-events:none}
.doctype-fieldcfg__toggle label:has(input:checked){background:var(--c-primary);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (max-width: 640px) {
  .doctype-fieldcfg__row{flex-direction:column;align-items:stretch;gap:8px}
  .doctype-fieldcfg__toggle{justify-content:center}
}

/* ── File viewer lightbox ──────────────────────────────────────────
   Generic inline preview for images / PDFs / videos. Triggered by any
   anchor with data-viewer; unsupported types fall back to new-tab. */
.viewer-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,20,18,.82);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .18s}
.viewer-overlay.is-open{opacity:1;pointer-events:auto}
.viewer{position:relative;max-width:min(1100px,100%);max-height:100%;width:100%;display:flex;flex-direction:column;background:var(--c-surface);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);transform:scale(.96);transition:transform .2s var(--ease-out,cubic-bezier(.2,.7,.3,1))}
.viewer-overlay.is-open .viewer{transform:scale(1)}
.viewer__head{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 18px;border-bottom:1px solid var(--c-border);background:var(--c-surface-2)}
.viewer__title{flex:1;min-width:0;font-size:.88rem;font-weight:600;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer__actions{display:inline-flex;align-items:center;gap:6px}
.viewer__btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--c-text-muted);cursor:pointer;transition:background .12s,color .12s}
.viewer__btn:hover{background:var(--c-surface);color:var(--c-text)}
.viewer__btn svg{width:16px;height:16px}
.viewer__body{flex:1;display:flex;align-items:center;justify-content:center;background:#111;min-height:200px;max-height:calc(100vh - 120px);overflow:auto}
.viewer__body img{max-width:100%;max-height:100%;display:block;object-fit:contain}
.viewer__body iframe{width:100%;height:calc(100vh - 120px);border:0;background:#fff}
.viewer__body video{max-width:100%;max-height:calc(100vh - 120px);outline:0}
.viewer__fallback{padding:60px 30px;text-align:center;color:var(--c-text-inv);background:var(--c-sidebar)}
.viewer__fallback svg{width:48px;height:48px;color:var(--c-gold);margin:0 auto 14px;display:block}
.viewer__fallback h4{font-size:1rem;font-weight:600;margin:0 0 4px;color:var(--c-text-inv)}
.viewer__fallback p{font-size:.85rem;margin:0 0 18px;color:var(--c-text-light)}
@media (max-width: 640px) {
  .viewer-overlay{padding:0}
  .viewer{border-radius:0;max-width:100%;height:100vh;max-height:100vh}
  .viewer__body iframe,.viewer__body video{height:calc(100vh - 58px);max-height:calc(100vh - 58px)}
}

/* ── Tour Cards (portal listing) ───────────────────────────────────────
   A primary UI surface. Treats each tour as a single clickable object with
   clear hierarchy: type → name → dates → availability → price/CTA.           */
.tour-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}

.tour-card{
  display:flex;flex-direction:column;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .18s var(--ease-out,cubic-bezier(.2,.7,.3,1)),
             box-shadow .18s var(--ease-out,cubic-bezier(.2,.7,.3,1)),
             border-color .18s;
  position:relative;
}
.tour-card:hover{
  transform:translateY(-3px);
  border-color:var(--c-primary-lite);
  box-shadow:0 14px 28px -14px rgba(17,46,30,.16),0 4px 10px -4px rgba(17,46,30,.08);
  text-decoration:none;color:inherit;
}
.tour-card:focus-visible{outline:0;border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-ghost)}

/* Booked state — subtle tint only, no loud left stripe */
.tour-card.is-booked{background:linear-gradient(180deg,var(--c-primary-ghost) 0%,var(--c-surface) 28%)}
.tour-card.is-booked .tour-card__head{background:var(--c-primary-ghost)}

/* Header: type chip + tour code */
.tour-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 18px;
  border-bottom:1px solid var(--c-border-strong);
  box-shadow:0 1px 0 rgba(17,46,30,.04);
  background:var(--c-surface-2);
  position:relative;
  z-index:1;
}
.tour-card__type{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--c-surface);border:1px solid var(--c-border);
  font-size:.68rem;font-weight:600;color:var(--c-text);
  letter-spacing:.04em;text-transform:uppercase;
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tour-card__code{
  font-size:.7rem;font-weight:500;color:var(--c-text-muted);
  letter-spacing:.04em;font-family:var(--font-mono,ui-monospace,Menlo,monospace);
  flex-shrink:0;
}

/* Destination hero slider — soft watercolor images cycle, name is on the image itself */
.tour-card__hero{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  background:var(--c-surface-2);
  overflow:hidden;
  border-bottom:1px solid var(--c-border);
}
.tour-card__slides{position:absolute;inset:0}
.tour-card__slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.tour-card__slide.is-active{opacity:1;pointer-events:auto}

/* Subtle arrow buttons — hidden until card hover */
.tour-card__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;padding:0;margin:0;
  border-radius:50%;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(6px);
  color:var(--c-text);
  cursor:pointer;
  opacity:0;
  transition:opacity .18s ease, background .15s, transform .15s;
  box-shadow:0 2px 8px rgba(17,46,30,.18);
  z-index:2;
}
.tour-card__arrow svg{width:14px;height:14px}
.tour-card__arrow--prev{left:10px}
.tour-card__arrow--next{right:10px}
.tour-card__hero:hover .tour-card__arrow,
.tour-card:hover .tour-card__arrow{opacity:1}
.tour-card__arrow:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.tour-card__arrow:active{transform:translateY(-50%) scale(0.97)}

/* Dot indicators */
.tour-card__dots{
  position:absolute;left:0;right:0;bottom:10px;
  display:flex;align-items:center;justify-content:center;gap:5px;
  z-index:2;pointer-events:none;
}
.tour-card__dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:background .2s, transform .2s;
}
.tour-card__dot.is-active{
  background:#fff;
  transform:scale(1.35);
}

/* Body: name, dest, dates, availability */
.tour-card__body{display:flex;flex-direction:column;padding:16px 20px 14px;flex:1}
.tour-card__name{
  font-family:var(--font-display);font-size:1.1rem;font-weight:600;
  color:var(--c-text);margin:0 0 6px;line-height:1.25;
  letter-spacing:-.005em;
}
.tour-card:hover .tour-card__name{color:var(--c-primary-dk)}
.tour-card__dest{
  display:flex;align-items:center;gap:6px;
  font-size:.82rem;color:var(--c-text-muted);margin-bottom:14px;
}
.tour-card__dest svg{width:13px;height:13px;color:var(--c-primary);flex-shrink:0}

/* Dates — two cells separated by an arrow, equal weight */
.tour-card__dates{
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;
  padding:12px 14px;margin-bottom:14px;
  background:var(--c-surface-2);border-radius:var(--r-md);
}
.tour-card__date{display:flex;flex-direction:column;gap:1px;min-width:0}
.tour-card__date-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-muted);font-weight:600}
.tour-card__date strong{font-size:.88rem;color:var(--c-text);font-weight:600;line-height:1.2}
.tour-card__date-hijri{font-size:.68rem;color:var(--c-text-muted);font-weight:400}
.tour-card__date-sep{color:var(--c-text-light);font-size:1rem;flex-shrink:0;font-weight:300}

/* Availability — status pill + progress stat + bar */
.tour-card__avail{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.tour-card__avail-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:.72rem;font-weight:600;
}
.tour-card__avail-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:currentColor}
.tour-card__avail-pill--ok     {background:var(--c-success-bg);color:var(--c-success)}
.tour-card__avail-pill--warning{background:var(--c-warning-bg);color:var(--c-warning)}
.tour-card__avail-pill--danger {background:var(--c-danger-bg); color:var(--c-danger)}
.tour-card__avail-pill--primary{background:var(--c-primary-pale);color:var(--c-primary-dk)}
.tour-card__avail-fill{font-size:.72rem;color:var(--c-text-muted);font-variant-numeric:tabular-nums}
.tour-card__bar{height:4px;background:var(--c-surface-2);border-radius:2px;overflow:hidden}
.tour-card__bar-fill{height:100%;background:var(--c-primary);border-radius:2px;transition:width .35s var(--ease-out,cubic-bezier(.2,.7,.3,1))}
.tour-card__bar-fill.is-warning{background:var(--c-warning)}
.tour-card__bar-fill.is-danger {background:var(--c-danger)}

/* Footer: price + CTA (or booking ref + Manage CTA) */
.tour-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-top:1px solid var(--c-border);
  background:var(--c-surface);
}
.tour-card.is-booked .tour-card__foot{background:transparent}

.tour-card__price{display:flex;flex-direction:column;min-width:0}
.tour-card__price-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--c-text-muted);font-weight:600}
.tour-card__price-amt{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--c-primary);font-variant-numeric:tabular-nums;line-height:1.1}

.tour-card__booking{display:flex;flex-direction:column;gap:2px;min-width:0}
.tour-card__booking-ref{font-size:.72rem;font-weight:600;color:var(--c-text);font-family:var(--font-mono,ui-monospace,Menlo,monospace);letter-spacing:.02em}
.tour-card__booking-status{
  font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  color:var(--c-text-muted);
}
.tour-card__booking-status--pending  {color:var(--c-warning)}
.tour-card__booking-status--confirmed{color:var(--c-success)}
.tour-card__booking-status--completed{color:var(--c-primary-dk)}
.tour-card__booking-status--waitlist {color:var(--c-info)}

.tour-card__cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;border-radius:var(--r-md);
  font-size:.82rem;font-weight:600;
  text-decoration:none;
  transition:background .12s,color .12s;
}
.tour-card__cta svg{width:14px;height:14px;transition:transform .15s var(--ease-out,cubic-bezier(.2,.7,.3,1))}
.tour-card:hover .tour-card__cta svg{transform:translateX(2px)}
.tour-card__cta--primary{background:var(--c-primary);color:#fff}
.tour-card:hover .tour-card__cta--primary{background:var(--c-primary-dk)}
.tour-card__cta--ghost{background:transparent;color:var(--c-primary);border:1px solid var(--c-border)}
.tour-card:hover .tour-card__cta--ghost{background:var(--c-primary-ghost);border-color:var(--c-primary-pale)}

/* Mobile tweak */
@media (max-width: 480px) {
  .tour-grid{grid-template-columns:1fr;gap:14px}
  .tour-card__name{font-size:1.05rem}
  .tour-card__dates{padding:10px 12px}
  .tour-card__price-amt{font-size:1.1rem}
}

/* Destination thumbnail on tour detail (portal) — image with a numbered badge */
.dest-thumb{position:relative;display:block;width:88px;height:72px;flex-shrink:0;border-radius:var(--r-md);overflow:hidden;box-shadow:0 2px 6px -2px rgba(17,46,30,.12);transition:transform .15s}
.dest-thumb:hover{transform:scale(1.03)}
.dest-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dest-thumb__num{position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:rgba(17,46,30,.85);color:#fff;font-size:.72rem;font-weight:700;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
@media (max-width: 480px) { .dest-thumb{width:64px;height:52px} }

/* Document-type sample thumbnail chip */
.doctype-sample-chip{display:inline-block;width:36px;height:36px;border-radius:var(--r-sm);overflow:hidden;background:var(--c-surface-2);border:1px solid var(--c-border);transition:transform .12s,border-color .12s;vertical-align:middle}
.doctype-sample-chip:hover{transform:scale(1.08);border-color:var(--c-primary)}
.doctype-sample-chip img{width:100%;height:100%;object-fit:cover;display:block}
.doctype-sample-chip svg{width:18px;height:18px;margin:9px;color:var(--c-primary)}

/* ── Mobile polish — listing filters, modals, pickers, tabs ────────── */
@media (max-width: 768px) {
  /* Listing filter bar: each control on its own row */
  .listing-filters__primary { gap: 10px }
  .ctx-picker { width: 100% }
  .ctx-picker__trigger { min-width: 0; width: 100% }
  .ctx-picker__value { font-size: var(--text-sm) }
  .ctx-picker__menu { min-width: 100%; max-width: 100%; max-height: 60vh }
  .listing-search { width: 100%; max-width: none; min-width: 0; margin-left: 0 }

  /* Segmented control scrolls horizontally rather than wrapping awkwardly */
  .seg { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin }
  .seg::-webkit-scrollbar { height: 4px }
  .seg::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px }
  .seg__item { flex-shrink: 0; white-space: nowrap }

  /* Modals become near-full-screen sheets, anchored at the bottom */
  .modal-overlay { padding: 0; align-items: flex-end }
  .modal { max-width: 100% !important; max-height: 96vh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(100%) }
  .modal-overlay.is-open .modal { transform: translateY(0) }
  .modal__header { padding: var(--sp-4) var(--sp-4); position: relative }
  .modal__header::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 2px; background: var(--c-border) }
  .modal__title { font-size: 1.05rem }
  .modal__body { padding: var(--sp-4) }
  .modal__footer { padding: var(--sp-3) var(--sp-4); flex-direction: column-reverse; gap: var(--sp-2); position: sticky; bottom: 0 }
  .modal__footer .btn { width: 100%; justify-content: center }

  /* Form rows always single-column on mobile */
  .form-row, .form-row--3, .form-row--4 { grid-template-columns: 1fr !important }

  /* Hotel picker — same treatment as ctx-picker */
  .hotel-picker { max-height: 280px }
  .hotel-picker__row { padding: 12px 14px }

  /* Tables: tighter cell padding so horizontal scroll shows more before scroll */
  .table th, .table td { padding: 10px 12px }
}

/* Search with icon, aligned right */
.listing-search{position:relative;flex:1;min-width:240px;max-width:340px;margin-left:auto}
.listing-search__icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--c-text-muted);pointer-events:none}
.listing-search__input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--c-border);border-radius:var(--r-md);font-size:var(--text-sm);background:var(--c-surface);font-family:inherit;color:var(--c-text);transition:border-color .12s,box-shadow .12s}
.listing-search__input:focus{outline:0;border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-ghost)}
.listing-search__input::placeholder{color:var(--c-text-light)}
/* ── Segmented Control ─────────────────────────────────────── */
/* Refined segmented control — emerald active + gold accent    */
.seg {
  display: inline-flex;
  align-items: stretch;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-bottom: var(--sp-5);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.seg__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  font-size: .83rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(.4,0,.2,1);
  position: relative;
}

.seg__item:hover {
  color: var(--c-text-2);
  background: rgba(255,255,255,0.7);
  text-decoration: none;
}

.seg__item.is-active {
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  border-color: var(--c-primary-dk);
  box-shadow:
    0 1px 3px rgba(29,102,68,0.3),
    0 0 0 1px rgba(29,102,68,0.1),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Subtle emerald shine on the active segment top edge */
.seg__item.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 8px; right: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-primary-lite), transparent);
  border-radius: 2px;
  opacity: 0.5;
}

/* Count badge */
.seg__count {
  font-size: .69rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,0.06);
  color: var(--c-text-light);
  line-height: 1.5;
  transition: all 0.22s cubic-bezier(.4,0,.2,1);
}

.seg__item.is-active .seg__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.seg__item:not(.is-active):hover .seg__count {
  background: rgba(0,0,0,0.08);
  color: var(--c-text-muted);
}

/* Count accent variants */
.seg__count--good {
  background: var(--c-success-bg);
  color: var(--c-success);
}
.seg__count--warn {
  background: var(--c-warning-bg);
  color: var(--c-warning);
}
.seg__count--danger {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}
.seg__item.is-active .seg__count--good,
.seg__item.is-active .seg__count--warn,
.seg__item.is-active .seg__count--danger {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* Compact variant */
.seg--sm { padding: 2px; }
.seg--sm .seg__item {
  padding: 5px 14px;
  font-size: .78rem;
  border-radius: 6px;
}
.seg--sm .seg__count {
  font-size: .65rem;
  padding: 0 5px;
  min-width: 16px;
}

/* Full-width variant */
.seg--block { display: flex; }
.seg--block .seg__item { flex: 1; justify-content: center; }

/* ── Empty State ─────────────────────────────────────────────── */
/* .empty-section styles moved to .empty-state section below (single source) */

/* ── Tables ─────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  /* Scroll within card, don't push page width */
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0;
}

.table th {
  background: var(--c-surface-2);
  font-size: 0.773rem;
  font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.th-sortable{cursor:pointer;user-select:none;transition:color .12s,background .12s}
.th-sortable:hover{color:var(--c-text);background:color-mix(in srgb,var(--c-primary-ghost) 60%,var(--c-surface-2))}
.th-sortable[data-sort-dir]{color:var(--c-primary)}
.th-si{opacity:.7;font-size:.85em;font-style:normal;margin-left:2px}
.th-sortable[data-sort-dir] .th-si{opacity:1}

.table td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-2);
  vertical-align: middle;
  overflow-wrap: break-word;
  max-width: 320px;
}

.table tr:last-child td { border-bottom: none; }

.table tbody tr:hover { background: var(--c-primary-ghost); }

.table__empty {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  color: var(--c-text-muted);
}

.table__empty svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  color: var(--c-border-strong);
}

.table-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ── Tabs (notebook/folder style — tabs rise from a tinted strip) ─ */
.tabs,
.tabs__list {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-6);
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: transparent;
}
.tabs::-webkit-scrollbar,
.tabs__list::-webkit-scrollbar { display: none; }

/* ── Tabbed section: tabs + panels in one bordered+rounded container ─ */
.tabbed-section {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  margin-bottom: var(--sp-6);
}

/* Tab nav bar inside the container — tinted strip, active tab lifts out */
.tabbed-section > .tabs__list {
  margin: 0;
  padding: 5px 8px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  gap: 2px;
}

/* Scrollable single-row tabs — never wrap */
.tabs__list--wrap {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.tabs__break {
  flex-basis: 100%;
  height: 0;
  border: none;
  margin: 0;
  padding: 0;
}
/* Secondary tabs are smaller / quieter */
.tabs__item--secondary {
  font-size: .80rem;
  padding: 10px 12px 12px;
}
.tabs__item--secondary svg { width: 13px; height: 13px; }

/* Strip card decoration — the .tabbed-section border/radius is enough */
.tabbed-section [data-tab-panel] > .card,
.tabbed-section > .card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}
/* Separator between stacked cards within one panel */
.tabbed-section [data-tab-panel] > .card + .card,
.tabbed-section > .card + .card {
  border-top: 1px solid var(--c-border);
}
/* URL-based tab panels (tour-config style) — the active card is the panel */
.tabs__list--url {
  margin: 0;
  padding: var(--sp-2) var(--sp-3) 0;
  border-radius: 0;
  border-bottom: 2px solid var(--c-border);
  background: var(--c-bg);
}

.tab,
.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px 10px;
  font-size: 0.80rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;       /* overlap the strip's bottom border */
  position: relative;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}

.tab:hover,
.tabs__item:hover {
  color: var(--c-text);
  text-decoration: none;
  background: rgba(17, 46, 30, 0.05);
}

.tab.is-active,
.tabs__item.is-active {
  color: var(--c-primary-dk);
  font-weight: 600;
  background: var(--c-surface);
  border-top: 2px solid var(--c-primary);
  padding-top: 7px;            /* compensate for the 2px top bar */
  z-index: 2;
  box-shadow: 0 -1px 0 var(--c-border) inset;
  box-shadow: none;            /* keep it clean */
}
.tab.is-active:hover,
.tabs__item.is-active:hover {
  background: var(--c-surface);
}

/* Icon treatment — muted when inactive, primary when active */
.tab svg,
.tabs__item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity .12s ease, color .12s ease;
}
.tab.is-active svg,
.tabs__item.is-active svg { opacity: 1; color: var(--c-primary); }
.tab:hover svg,
.tabs__item:hover svg { opacity: 0.8; }

.tab__count,
.tabs__count {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  line-height: 1.4;
  min-width: 16px;
  text-align: center;
  transition: background .12s, color .12s;
}

.tab.is-active .tab__count,
.tabs__item.is-active .tabs__count {
  background: var(--c-primary-pale);
  color: var(--c-primary-dk);
}

/* Alert variant for tab counts that demand attention (e.g. pending queue items) */
.tabs__count--alert {
  background: var(--c-danger-bg, #FEE2E2);
  color: var(--c-danger, #B91C1C);
}
.tabs__item.is-active .tabs__count--alert {
  background: var(--c-danger, #B91C1C);
  color: #fff;
}

/* ── Pagination (notebook-consistent, elegant) ─────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* Summary (left side): "1–25 of 295 results" */
.pagination__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--c-text-muted);
  white-space: nowrap;
}
.pagination__summary-range {
  color: var(--c-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pagination__summary-sep {
  color: var(--c-text-light);
  font-weight: 400;
}
.pagination__summary-total {
  color: var(--c-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pagination__summary-label {
  color: var(--c-text-muted);
}

/* Nav (right side): Prev · pages · Next */
.pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Prev / Next pill */
.pagination__step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  height: 32px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.pagination__step svg { width: 14px; height: 14px; opacity: 0.7; transition: opacity .15s; }
.pagination__step:hover {
  border-color: var(--c-primary);
  color: var(--c-primary-dk);
  background: var(--c-primary-ghost);
  text-decoration: none;
}
.pagination__step:hover svg { opacity: 1; }
.pagination__step:active { transform: translateY(0.5px); }
.pagination__step.is-disabled {
  color: var(--c-text-light);
  border-color: var(--c-border);
  background: var(--c-surface);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Page numbers group — subtle pill container */
.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
}

/* Individual page number */
.pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-muted);
  background: transparent;
  text-decoration: none;
  transition: color .12s, background .12s;
}
.pagination__page:hover {
  color: var(--c-text);
  background: rgba(255,255,255,0.75);
  text-decoration: none;
}
.pagination__page.is-active {
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(17,46,30,0.15);
  cursor: default;
}
.pagination__page.is-active:hover {
  background: var(--c-primary);
  color: #fff;
}
.pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--c-text-light);
  font-size: 0.9rem;
  line-height: 1;
  user-select: none;
}

/* Responsive: hide "Prev/Next" labels on small screens, keep arrows */
@media (max-width: 640px) {
  .pagination { flex-direction: column; gap: 10px; padding: 12px 14px; }
  .pagination__step span { display: none; }
  .pagination__step { padding: 6px 8px; }
  .pagination__summary-label { display: none; }
}


/* ── Progress bars ──────────────────────────────────────────── */
.progress-wrap {
  background: var(--c-surface-2);
  border-radius: var(--r-pill);
  height: 6px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  transition: width 0.5s ease;
}

.progress-bar--gold    { background: var(--c-gold); }
.progress-bar--warning { background: var(--c-warning); }
.progress-bar--danger  { background: var(--c-danger); }

/* ── Dropdown ───────────────────────────────────────────────── */
.dropdown { position: relative; }

.dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  min-width: 180px;
  z-index: 200;
  padding: var(--sp-2) 0;
  display: none;
}

.dropdown__menu.is-open { display: block; }

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9rem;
  color: var(--c-text-2);
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
}

.dropdown__item:hover {
  background: var(--c-primary-ghost);
  color: var(--c-primary);
  text-decoration: none;
}

.dropdown__item svg { width: 16px; height: 16px; flex-shrink: 0; }

.dropdown__sep {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-2) 0;
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--t-normal);
  overflow: hidden;         /* keeps the rounded corners clean when body scrolls */
  min-height: 0;            /* allow child flex to shrink below content height */
}

/* Any <form> nested directly in .modal inherits the column-flex behaviour so
   .modal__body can actually scroll + .modal__footer stays sticky at the bottom.
   Without this, form-wrapped modals overflow the viewport. */
.modal > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal--sm { max-width: 420px; }
.modal--lg { max-width: 720px; }
.modal--xl { max-width: 960px; }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}

.modal__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-text);
  margin: 0;
  line-height: 1.3;
}

/* ── Voucher modal header — coloured accent stripe + subtitle ── */
.voucher-modal-header {
  position: relative;
  align-items: center;
}
.voucher-modal-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--vmh-accent, var(--c-primary));
  border-radius: var(--r-xl) 0 0 0;
}
.voucher-modal-header--payment { --vmh-accent: var(--c-danger); }
.voucher-modal-header--receipt { --vmh-accent: var(--c-success); }
.voucher-modal-header__title {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.voucher-modal-header__sub {
  font-size: .76rem;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: .01em;
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal__close:hover { background: var(--c-surface-2); color: var(--c-text); }
.modal__close svg { width: 18px; height: 18px; }

.modal__body { padding: var(--sp-6); overflow-y: auto; flex: 1; }

.modal__footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* ── Modal form components ───────────────────────────────────
   Shared widgets used in the financial modals (Add Expense, Record
   Income, Record Payment) to keep them visually consistent. */

/* Segmented toggle at the top of a form — first decision drives the
   rest of the layout. Two icons + labels, full-width row. */
.seg-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}
.seg-toggle--3 { grid-template-columns: repeat(3, 1fr); }
.seg-toggle--4 { grid-template-columns: repeat(4, 1fr); }
.seg-toggle--5 { grid-template-columns: repeat(5, 1fr); }
.seg-toggle__opt {
  all: unset;
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  padding: 9px 8px;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: .78rem; font-weight: 600;
  color: var(--c-slate-600);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  min-width: 0;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.seg-toggle__opt svg { width: 12px; height: 12px; opacity: .6; flex-shrink: 0; }
.seg-toggle__opt:hover { color: var(--c-ink); background: rgba(255,255,255,.4); }
.seg-toggle__opt.is-active {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 0 0 1px var(--c-ink-pale);
}
.seg-toggle__opt.is-active svg { opacity: 1; color: var(--c-primary); }
.seg-toggle__tag {
  display: inline-block; font-size: .58rem; font-weight: 700;
  padding: 1px 5px;
  background: var(--c-warning-bg);
  color: var(--c-warning);
  border-radius: 999px;
  margin-left: 1px;
  letter-spacing: .02em;
}

@media (max-width: 760px) {
  .seg-toggle--4, .seg-toggle--5 { grid-template-columns: repeat(2, 1fr); }
  .seg-toggle__opt { font-size: .82rem; padding: 10px 12px; }
}

/* Joined amount + currency selector — visually a single input with
   currency split out by a divider on the right side. */
.amt-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.amt-input:focus-within {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
}
.amt-input__num {
  flex: 1;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.amt-input__num:focus-visible { outline: 0 !important; }
.amt-input__ccy {
  flex-shrink: 0;
  width: auto;
  min-width: 76px;
  border: 0;
  border-left: 1px solid var(--c-slate-100);
  background: var(--c-slate-50);
  padding: 0 22px 0 10px;
  font-family: ui-monospace, monospace;
  font-size: .8rem; font-weight: 600;
  color: var(--c-slate-700);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23877D69'><path fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
}
.amt-input__ccy:focus-visible { outline: 0; }

/* Visually grouped payment section — labelled block that contains the
   pay-widget. Visible only when "Paid now" is selected. The slight
   cream background + emerald accent stripe makes it clear this is the
   "cash side" of the voucher. */
.pay-section {
  position: relative;
  margin: var(--sp-4) 0 var(--sp-4);
  padding: 14px 16px 14px 18px;
  background: var(--c-primary-ghost);
  border: 1px solid color-mix(in srgb, var(--c-primary) 18%, var(--c-surface));
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 8px;
}
.pay-section::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--c-primary);
  border-radius: 0 2px 2px 0;
}
.pay-section .form-label {
  margin-bottom: 0;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-primary-dk); font-weight: 700;
}

/* Tighter form rhythm inside voucher modals — form-groups stack more
   densely so the modal feels less sprawling. */
form[data-payment-voucher-form] .form-group,
form[data-receipt-voucher-form] .form-group {
  margin-bottom: var(--sp-4);
}
form[data-payment-voucher-form] .form-row,
form[data-receipt-voucher-form] .form-row {
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
form[data-payment-voucher-form] .form-row .form-group,
form[data-receipt-voucher-form] .form-row .form-group {
  margin-bottom: 0;
}

/* ── Tour-split sub-table ─────────────────────────────────────────
   Optional sub-section. Hidden subtly when no rows are added — the
   "+ Add a tour" link is the only visible affordance. */
.tour-split {
  margin-bottom: var(--sp-4);
  padding: 12px 14px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}
.tour-split__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.tour-split__rows:not(:empty) + .tour-split__actions,
.tour-split__head + .tour-split__rows:not(:empty) {
  /* Padding adjustments when rows exist */
}
.tour-split__head + .tour-split__rows:empty + .tour-split__actions {
  margin-top: 0;
}
.tour-split__label {
  margin: 0;
  font-size: .82rem; font-weight: 600;
  color: var(--c-text);
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
}
.tour-split__optional {
  font-weight: 400; font-size: .74rem;
  color: var(--c-text-muted);
}
.tour-split__hint {
  font-size: .72rem; font-weight: 400;
  color: var(--c-text-muted);
}
.tour-split__balance {
  font-size: .76rem; font-weight: 600;
  font-family: ui-monospace, monospace;
  letter-spacing: -.01em;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  color: var(--c-text-muted);
}
.tour-split__balance.is-balanced {
  color: var(--c-success);
  background: var(--c-success-bg);
  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-surface));
}
.tour-split__balance.is-over {
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-surface));
}
.tour-split__balance.is-under {
  color: var(--c-warning);
  background: var(--c-warning-bg);
  border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-surface));
}
.tour-split__rows {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.tour-split__rows:empty { margin-top: 0; }
.tour-split__row {
  display: grid;
  grid-template-columns: 1fr 140px 32px;
  gap: 8px;
  align-items: center;
}
.tour-split__row .tour-split__tour,
.tour-split__row .tour-split__amt {
  margin-bottom: 0;
  height: 38px;
}
.tour-split__amt {
  font-family: ui-monospace, monospace;
  text-align: right;
}
.tour-split__remove {
  all: unset;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--c-text-muted);
  cursor: pointer;
}
.tour-split__remove:hover {
  background: var(--c-danger-bg);
  color: var(--c-danger);
}
.tour-split__row.is-invalid .tour-split__tour,
.tour-split__row.is-invalid .tour-split__amt {
  border-color: var(--c-warning);
}
.tour-split__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 10px;
}
.tour-split__rows:empty ~ .tour-split__actions { margin-top: 6px; }

/* "+ New account" link sits tight under the dropdown it relates to, not
   as a separate full-button. Subtle text-link with icon. */
.acct-newlink {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit; font-size: .76rem; font-weight: 500;
  color: var(--c-primary);
}
.acct-newlink:hover { color: var(--c-primary-dk); text-decoration: underline; }
.acct-newlink svg { width: 11px; height: 11px; }

/* Settle Bill modal — read-only context panel showing vendor / description /
   amount for the bill being settled. Sits above the "Paid from" pay-widget. */
.settle-summary {
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  display: flex; flex-direction: column; gap: 8px;
}
.settle-summary__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: .85rem;
}
.settle-summary__row--total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--c-slate-200);
}
.settle-summary__label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-600); font-weight: 700;
  flex-shrink: 0;
}
.settle-summary__value {
  color: var(--c-text); font-weight: 500;
  text-align: right;
  overflow: hidden; text-overflow: ellipsis;
}
.settle-summary__value--amt {
  font-family: ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 700;
  color: var(--c-danger);
}

/* AP hint — shown in place of the payment section when "Bill — pay later"
   is selected. Subtle info chip explaining what happens next. */
.ap-hint {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-5);
  padding: 12px 16px;
  background: var(--c-warning-bg);
  border: 1px solid color-mix(in srgb, var(--c-warning) 25%, var(--c-surface));
  border-radius: var(--r-md);
  font-size: .82rem; color: var(--c-warning);
}
.ap-hint svg { width: 16px; height: 16px; flex-shrink: 0; }
.ap-hint strong { font-weight: 700; }

/* Stack to single column on narrow viewports — already covered by the
   global .form-row breakpoint, but the form-row--3 special case is here
   too for the Add Expense modal where Amount/Date/Due-Date sit on one row. */
@media (max-width: 640px) {
  .seg-toggle { grid-template-columns: 1fr; }
  .amt-input__ccy { min-width: 64px; padding: 0 18px 0 8px; }
}

/* ── Empty states ───────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
}

.empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.empty-state__icon svg { width: 32px; height: 32px; color: var(--c-text-light); }

.empty-state__title {
  font-family: var(--font-display);
  font-size: 1.133rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.empty-state__desc {
  font-size: 0.9rem;
  color: var(--c-text-muted);
  max-width: 360px;
  margin-bottom: var(--sp-6);
}

/* Compact empty state — for inline use inside cards, tabs, sub-sections */
.empty-state--sm { padding: 36px 20px; }
.empty-state--sm .empty-state__icon { width: 44px; height: 44px; margin-bottom: 12px; }
.empty-state--sm .empty-state__icon svg { width: 22px; height: 22px; }
.empty-state--sm .empty-state__title { font-size: 0.95rem; margin-bottom: 4px; }
.empty-state--sm .empty-state__desc  { font-size: 0.82rem; margin-bottom: 0; }

/* Alias for legacy .empty-section — same visual behaviour as .empty-state--sm */
.empty-section {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 20px; text-align: center;
  color: var(--c-text-muted); font-size: .85rem;
}
.empty-section svg { width: 32px; height: 32px; color: var(--c-border-strong); margin-bottom: 10px; opacity: .6; display: block; }
.empty-section p { margin: 0; }

/* ── Section Divider ────────────────────────────────────────── */
.section-divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-8) 0;
}

/* ── Ornamental Header (Dawoodi Bohra motif) ────────────────── */
.ornament-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.ornament-bar__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-gold-lite), transparent);
}

.ornament-bar__star {
  color: var(--c-gold);
  flex-shrink: 0;
}

/* ── Avatar (canonical) ─────────────────────────────────────────
   Single component used everywhere. Sizes via modifiers.
   Variants: .avatar--gold (group leaders), .avatar--primary-solid (emphasis).
   Image children automatically fit; otherwise renders initials/letter. */
.avatar {
  border-radius: 50%;
  background: var(--c-primary-pale);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--xs  { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar--sm  { width: 36px; height: 36px; font-size: 0.78rem; }
.avatar--md  { width: 48px; height: 48px; font-size: 0.95rem; }
.avatar--lg  { width: 64px; height: 64px; font-size: 1.2rem; }
.avatar--xl  { width: 96px; height: 96px; font-size: 1.6rem; }
.avatar--gold { background: var(--c-gold-pale); color: var(--c-gold-dk); }
.avatar--primary-solid { background: var(--c-primary); color: #fff; }

/* Legacy aliases — same styles as .avatar, so old templates keep working */
.trav-avatar,
.mumin-list__avatar,
.bkg-trav-row__avatar,
.review-trav__avatar,
.tour-leader-strip__avatar {
  border-radius: 50%;
  background: var(--c-primary-pale);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 1;
}
.trav-avatar img,
.mumin-list__avatar img,
.bkg-trav-row__avatar img,
.review-trav__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Document card (compact) ────────────────────────────────── */
.doc-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: box-shadow var(--t-normal);
}
.doc-card:hover { box-shadow: var(--sh-sm); }

.doc-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-primary-ghost);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-primary);
}
.doc-card__icon svg { width: 20px; height: 20px; }

.doc-card__info { flex: 1; min-width: 0; }
.doc-card__type { font-size: 0.867rem; font-weight: 600; color: var(--c-text); }
.doc-card__meta { font-size: 0.773rem; color: var(--c-text-muted); margin-top: 2px; }

.doc-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Old .tour-card ruleset removed — see canonical .tour-card block above (near line 2378). */

/* ── Profile Banner ─────────────────────────────────────────── */
.profile-banner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  margin-bottom: var(--sp-6);
  background: var(--c-surface);
}

.profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-lite));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 6px 22px -8px rgba(29,102,68,0.24), 0 0 0 4px var(--c-surface), 0 0 0 5px var(--c-primary-pale);
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Editable avatar (profile page) — clickable form wraps a file input */
.profile-avatar--edit { padding: 0; border: 0; cursor: pointer; position: relative; }
.profile-avatar--edit .profile-avatar__label {
  display: block; width: 100%; height: 100%;
  position: relative; cursor: pointer; border-radius: var(--r-pill); overflow: hidden;
}
.profile-avatar--edit input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.profile-avatar--edit .profile-avatar__initials {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-lite));
}
.profile-avatar__overlay {
  position: absolute; inset: 0; background: rgba(17,46,30,.72);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: #fff; font-size: .7rem; font-weight: 600;
  opacity: 0; transition: opacity .15s ease; z-index: 1; text-align: center; padding: 6px;
}
.profile-avatar--edit:hover .profile-avatar__overlay,
.profile-avatar--edit:focus-within .profile-avatar__overlay { opacity: 1; }
.profile-avatar__overlay svg { width: 18px; height: 18px; }

.profile-banner__info { flex: 1; min-width: 0; }

.profile-banner__name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text);
  margin: 0 0 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tier 1 — system identity: ITS id + role pill, same baseline as name */
.profile-banner__id {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.profile-banner__its {
  font-size: .74rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Role pill — pastel tint keyed by role, with a leading coloured dot */
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid transparent;
  line-height: 1;
}
.role-pill__dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.role-pill--mumin        { background: var(--c-primary-ghost); color: var(--c-primary-dk); }
.role-pill--admin        { background: var(--c-info-bg);       color: var(--c-info); }
.role-pill--super_admin  { background: var(--c-gold-pale);     color: var(--c-gold-dk); }
.role-pill--tour_mgr     { background: var(--c-info-bg);       color: var(--c-info); }
.role-pill--finance      { background: var(--c-warning-bg);    color: var(--c-warning); }
.role-pill--support      { background: var(--c-neutral-bg);    color: var(--c-text-2); }

/* Tier 2 — bio facts (nationality, jamaat, mohalla …) */
.profile-banner__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: .88rem;
  color: var(--c-text-2);
  line-height: 1.2;
}
.profile-banner__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-2);
}
.profile-banner__meta-item svg {
  width: 15px; height: 15px; color: var(--c-primary); flex-shrink: 0; opacity: .75;
}

/* Aside: a small stat strip */
.profile-banner__aside {
  text-align: right;
  flex-shrink: 0;
  padding-left: 20px;
  margin-left: 8px;
  display: flex;
  align-items: center;
}
.profile-banner__aside-stat { display: flex; flex-direction: column; gap: 4px; }
.profile-banner__aside-label {
  font-size: .68rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.profile-banner__aside-value {
  font-size: 1rem;
  color: var(--c-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.profile-banner__aside-hint {
  font-size: .75rem;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Mobile: stack banner cleanly */
@media (max-width: 640px) {
  .profile-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .profile-banner__aside { text-align: left; border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--c-border); padding-top: 14px; width: 100%; align-self: stretch; }
  .profile-banner__name { font-size: 1.35rem; white-space: normal; }
  .profile-avatar { width: 72px; height: 72px; font-size: 1.5rem; }
}

/* ── Action Items (dashboard alerts) ───────────────────────── */
.action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
  transition: background var(--t-fast);
  cursor: pointer;
}
.action-item:last-child { border-bottom: none; }
.action-item:hover { background: var(--c-surface-2); text-decoration: none; }

.action-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.action-item__body { flex: 1; min-width: 0; }

.action-item__title {
  font-size: 0.867rem;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-item--danger  .action-item__title { color: var(--c-danger); }
.action-item--warning .action-item__title { color: var(--c-warning); }

.action-item__meta {
  font-size: 0.773rem;
  color: var(--c-text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.action-item__due {
  font-size: 0.733rem;
  font-weight: 600;
  color: var(--c-warning);
  white-space: nowrap;
  flex-shrink: 0;
}

.action-item__arrow {
  width: 16px;
  height: 16px;
  color: var(--c-border-strong);
  flex-shrink: 0;
  transition: color var(--t-fast), transform var(--t-fast);
}
.action-item:hover .action-item__arrow {
  color: var(--c-primary);
  transform: translateX(2px);
}

/* ── Booking State Stepper ──────────────────────────────────── */
.booking-stepper-card { padding: 0; }
.booking-stepper {
  display: flex;
  align-items: flex-start;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
}
.booking-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.booking-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 2px;
  background: var(--c-border);
}
.booking-step--done:not(:last-child)::after { background: var(--c-primary); }
.booking-step__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  background: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  font-size: 0.733rem;
  font-weight: 700;
  color: var(--c-text-muted);
  transition: border-color 0.2s, background 0.2s;
}
.booking-step--done   .booking-step__dot { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.booking-step--active .booking-step__dot { border-color: var(--c-primary); background: #fff; color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-ghost); }
.booking-step__label {
  font-size: 0.733rem;
  font-weight: 500;
  color: var(--c-text-muted);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
}
.booking-step--done   .booking-step__label,
.booking-step--active .booking-step__label { color: var(--c-text); font-weight: 600; }
.booking-step__hint {
  font-size: 0.667rem;
  color: var(--c-warning);
  margin-top: 2px;
  font-weight: 600;
  text-align: center;
}
.booking-stepper__note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--c-border);
  font-size: 0.793rem;
  color: var(--c-warning);
  background: var(--c-warning-bg, #fef9ec);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── Page Entry & Micro-Interactions ─────────────────────────── */

/* Main content area fades + slides up on load */
.main-wrap .page-header {
  animation: slideDown 380ms var(--ease-out) both;
}

/* Cards in main content animate in with stagger */
.main-wrap > .card,
.main-wrap > .stat-grid > .stat-card,
.main-wrap > .grid-2 > .card,
.main-wrap > [style] > .card {
  animation: slideUp 340ms var(--ease-out) both;
}

/* Table rows reveal nicely */
.table tbody tr {
  transition: background var(--t-fast);
}

/* Sidebar items micro-hover */
.sidebar__item {
  position: relative;
  overflow: hidden;
}
.sidebar__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--t-fast);
  pointer-events: none;
}
.sidebar__item:hover::after { background: rgba(255,255,255,0.04); }

/* Badge pulse for danger indicators */
.badge--danger { animation: none; }
.badge--danger.is-pulsing { animation: pulse-ring 2s infinite; }

/* Skeleton loading animation */
.skeleton {
  background: linear-gradient(90deg, var(--c-border) 25%, var(--c-surface-2) 50%, var(--c-border) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-md);
}
.skeleton--text  { height: 14px; width: 60%; }
.skeleton--title { height: 20px; width: 40%; }
.skeleton--block { height: 80px; width: 100%; }

/* Progress bars animate width on load */
.progress-bar {
  transition: width 800ms var(--ease-out);
}

/* ── Utilities ──────────────────────────────────────────────── */
.flex       { display: flex; }
.flex-col   { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2      { gap: var(--sp-2); }
.gap-3      { gap: var(--sp-3); }
.gap-4      { gap: var(--sp-4); }
.gap-5      { gap: var(--sp-5); }
.gap-6      { gap: var(--sp-6); }
.flex-1     { flex: 1; }
.w-full     { width: 100%; }
.min-w-0    { min-width: 0; }
.mt-2       { margin-top: var(--sp-2); }
.mt-3       { margin-top: var(--sp-3); }
.mt-4       { margin-top: var(--sp-4); }
.mt-6       { margin-top: var(--sp-6); }
.mt-8       { margin-top: var(--sp-8); }
.mb-4       { margin-bottom: var(--sp-4); }
.mb-6       { margin-bottom: var(--sp-6); }
.mb-8       { margin-bottom: var(--sp-8); }
.p-4        { padding: var(--sp-4); }
.p-6        { padding: var(--sp-6); }
.sr-only    { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Skip-link — visible only on keyboard focus, allows tab-users to jump past
   the sidebar nav and topbar straight to <main id="main-content">. */
.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--c-primary);
  color: var(--c-text-inv);
  font-weight: 600;
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--sh-md, 0 4px 12px rgba(0,0,0,.18));
  transition: top .15s ease;
}
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
:focus-visible#main-content { outline: none; }
.overflow-hidden { overflow: hidden; }
.rounded    { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Amount / financial value — never wraps, tabular digits */
.amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.nowrap { white-space: nowrap; }

/* ── Main content footer bar ─────────────────────────────────── */
.main-footer {
  padding: 14px var(--sp-8);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: 0.773rem;
  color: var(--c-text-muted);
  flex-shrink: 0;
}

/* ── Grid layouts ───────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6); }

/* ── Tooltip ────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: default;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-text);
  color: white;
  font-size: 0.773rem;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: 999;
}

[data-tooltip]:hover::after { opacity: 1; }

/* ── Scrollbar (subtle) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-text-light); }

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .btn, .no-print { display: none !important; }
  .main-wrap { margin-left: 0; }
  .page-content { padding: 0; }
  body { background: white; }
}

/* ── Section link (card header "View all →" links) ─────────────── */
.section-link       { font-size: .78rem; color: var(--c-primary); font-weight: 500; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.section-link:hover { text-decoration: underline; }

/* ── Admin Dashboard Components ─────────────────────────────────── */

/* KPI grid */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 14px;
}

.kpi-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: box-shadow var(--t-normal);
}
.kpi-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.07); }
a.kpi-card      { cursor: pointer; color: inherit; }
a.kpi-card:hover { transform: translateY(-2px); }

.kpi-icon     { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon svg { width: 22px; height: 22px; }
/* KPI icon tint variants — every one now uses a palette token, never a
   hardcoded Tailwind value. Standard convention site-wide:
     emerald → positive / primary metric
     gold    → secondary / highlight metric (operational counts, etc.)
     amber   → attention / warning state (queues, expiring, etc.)
     red     → critical / blocked state
     blue / purple variants kept for backward compat — aliased to gold
     since this app's palette doesn't carry corporate blue or purple. */
.kpi-icon--emerald { background: var(--c-primary-pale); color: var(--c-primary); }
.kpi-icon--gold    { background: var(--c-gold-pale);    color: var(--c-gold-dk); }
.kpi-icon--blue    { background: var(--c-gold-pale);    color: var(--c-gold-dk); }
.kpi-icon--red     { background: var(--c-danger-bg);    color: var(--c-danger);  }
.kpi-icon--amber   { background: color-mix(in srgb, var(--c-warning) 12%, var(--c-surface)); color: var(--c-warning); }
.kpi-icon--purple  { background: var(--c-gold-pale);    color: var(--c-gold-dk); }

.kpi-meta        { flex: 1; min-width: 0; }
.kpi-label       { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 4px; }
.kpi-value       { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--c-text); margin-bottom: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-sub         { font-size: .78rem; color: var(--c-text-muted); }
.kpi-sub strong  { color: var(--c-text-2); font-weight: 600; }

/* Dashboard layout grids */
.admin-two-col   { display: grid; grid-template-columns: 1fr 380px; gap: 20px; margin-bottom: 20px; }
.admin-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }

/* Doc queue list items (inside .card) */
.doc-queue-item            { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-bottom: 1px solid var(--c-border); transition: background 120ms; }
.doc-queue-item:last-child { border-bottom: none; }
a.doc-queue-item:hover     { background: var(--c-primary-ghost); color: inherit; }
.doc-avatar                { width: 34px; height: 34px; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-border); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--c-primary); flex-shrink: 0; }
.doc-queue-info            { flex: 1; min-width: 0; }
.doc-queue-name            { font-size: .83rem; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-queue-meta            { font-size: .72rem; color: var(--c-text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-queue-age             { font-size: .72rem; color: var(--c-text-muted); text-align: right; white-space: nowrap; flex-shrink: 0; }

/* Activity feed — connected timeline rail */
/* Dashboard "Updates" card — recent CMS posts with a New-post CTA */
.dash-updates{list-style:none;margin:0;padding:6px 0 4px;display:flex;flex-direction:column}
.dash-update{margin:0}
.dash-update__link{
    display:flex;align-items:center;gap:12px;padding:9px 24px;
    color:var(--c-text);text-decoration:none;
    transition:background .12s;
}
.dash-update__link:hover{background:var(--c-surface-2);color:var(--c-text)}
.dash-update__dot{
    width:7px;height:7px;border-radius:50%;background:var(--c-primary);
    flex-shrink:0;margin-top:1px;
}
.dash-update__dot.is-draft{background:var(--c-text-light);outline:1.5px solid var(--c-text-muted);outline-offset:-1px;background:transparent}
.dash-update__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dash-update__title{
    font-size:.85rem;font-weight:500;color:var(--c-text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    line-height:1.3;
}
.dash-update__meta{
    font-size:.7rem;color:var(--c-text-muted);
    font-variant-numeric:tabular-nums;
}

.activity-feed                          { padding: 6px 0 8px; }
.activity-feed .activity-item           { padding: 9px 24px 9px 44px; border-bottom: none; position: relative; }
.activity-feed .activity-item::before   { content: ''; position: absolute; left: 27px; top: 0; bottom: 0; width: 1px; background: var(--c-border); }
.activity-feed .activity-item:first-child::before { top: 14px; }
.activity-feed .activity-item:last-child::before  { bottom: calc(100% - 14px); }
.activity-feed .activity-dot            { position: absolute; left: 23px; top: 13px; margin: 0; box-shadow: 0 0 0 3px var(--c-surface); }

/* legacy fallback for any .activity-item not wrapped in .activity-feed */
.activity-item            { display: flex; align-items: flex-start; gap: 10px; padding: 9px 24px; border-bottom: 1px solid var(--c-border); }
.activity-item:last-child { border-bottom: none; }
.activity-dot             { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); margin-top: 5px; flex-shrink: 0; }
.activity-body            { flex: 1; min-width: 0; }
.activity-action          { font-size: .8rem; font-weight: 500; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-who             { font-size: .73rem; color: var(--c-text-muted); margin-top: 1px; }

/* Upcoming tour rows */
.tour-row              { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-bottom: 1px solid var(--c-border); }
.tour-row:last-child   { border-bottom: none; }
.tour-row__date        { width: 44px; height: 44px; border-radius: 8px; background: rgba(29,102,68,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.tour-row__day         { font-size: .85rem; font-weight: 700; color: var(--c-primary); line-height: 1; }
.tour-row__mon         { font-size: .6rem; font-weight: 600; text-transform: uppercase; color: var(--c-text-muted); letter-spacing: .05em; }
.tour-row__info        { flex: 1; min-width: 0; }
.tour-row__name        { font-size: .85rem; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-row__dest        { font-size: .73rem; color: var(--c-text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-row__pax         { text-align: right; flex-shrink: 0; }
.tour-row__pax-count   { font-size: .8rem; font-weight: 600; color: var(--c-text-2); }
.tour-row__pax-max     { font-size: .7rem; color: var(--c-text-muted); }

/* Priority badges */
.priority-badge         { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.priority-badge--URGENT { background: var(--c-danger-bg);                                              color: var(--c-danger); }
.priority-badge--HIGH   { background: color-mix(in srgb, var(--c-warning) 12%, var(--c-surface));      color: var(--c-warning); }
.priority-badge--MEDIUM { background: var(--c-gold-pale);                                              color: var(--c-gold-dk); }
.priority-badge--LOW    { background: color-mix(in srgb, var(--c-slate-400) 14%, var(--c-surface));    color: var(--c-slate-600); }

/* Support ticket items */
.support-item            { display: flex; align-items: flex-start; gap: 10px; padding: 10px 24px; border-bottom: 1px solid var(--c-border); }
.support-item:last-child { border-bottom: none; }
.support-info            { flex: 1; min-width: 0; }
.support-subject         { font-size: .83rem; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.support-meta            { font-size: .72rem; color: var(--c-text-muted); margin-top: 2px; }

/* Stale-document urgency dot — shown next to avatar when item has waited too long */
.doc-queue-item               { position: relative; }
.doc-queue-item--stale .doc-avatar { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-danger); }
.doc-queue-item--stale::after { content: ''; position: absolute; top: 14px; left: 49px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-danger); box-shadow: 0 0 0 2px var(--c-surface); pointer-events: none; }

/* Recent-bookings clickable row */
tr.bkg-row[data-href]         { cursor: pointer; transition: background var(--t-fast); }
tr.bkg-row[data-href]:hover   { background: var(--c-primary-ghost); }

/* Filling-fast pill on tour rows */
.tour-row__hot                { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 20px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface)); color: var(--c-warning); margin-left: 6px; vertical-align: middle; }
.tour-row__hot--full          { background: var(--c-danger-bg); color: var(--c-danger); }

/* Portal — enlarged greeting header */
.greeting-header              { margin-bottom: var(--sp-7); }
.greeting-header__top         { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.greeting-header__title       { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--c-text); margin: 0; letter-spacing: -.015em; }
.greeting-header__subtitle    { font-size: .92rem; color: var(--c-text-muted); margin: 6px 0 0; }
@media (max-width: 768px)     { .greeting-header__title { font-size: 1.55rem; } }

/* Portal — Action Required priority card */
.card--priority               { border-color: rgba(245,158,11,.45); box-shadow: 0 1px 0 rgba(245,158,11,.08), 0 8px 24px -12px rgba(245,158,11,.25); position: relative; overflow: hidden; }
.card--priority::before       { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--c-warning) 0%, var(--c-danger) 100%); }
.card--priority .card__header { background: linear-gradient(180deg, rgba(245,158,11,.06), transparent); }
.card--book { border-top: 3px solid var(--c-gold); box-shadow: 0 8px 32px rgba(0,0,0,0.09); }
.card--book .card__header { background: var(--c-gold-pale); border-bottom-color: rgba(200,160,90,.25); }
.card--book .card__title { color: var(--c-gold-dk); font-size: .95rem; letter-spacing: .02em; }
.card--book-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 20px; }
.card--book-price:not(:first-child) { border-top: 1px solid var(--c-border); }
.card--book-price__label { font-size: .8rem; color: var(--c-text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card--book-price__amt { font-size: .92rem; font-weight: 700; color: var(--c-text); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.card--book-meta { display: flex; justify-content: space-between; align-items: flex-start; font-size: .8rem; padding: 9px 20px; border-top: 1px solid var(--c-border); color: var(--c-text-muted); }
.card--book-meta strong { color: var(--c-text); font-weight: 600; }
.card--book-docs { padding: 10px 20px; border-top: 1px solid var(--c-border); }
.card--book-docs__title { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--c-text-muted); margin-bottom: 7px; }
.card--book-doc { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--c-text-2); margin-bottom: 4px; }
.card--book-doc__dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* Travel Groups stats — clean tonal strip without right-borders */
.group-stats                  { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px 24px; background: var(--c-surface-2, #FAFAF7); border-bottom: 1px solid var(--c-border); gap: 24px; }
.group-stats__item            { text-align: center; }
.group-stats__value           { font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--c-text); }
.group-stats__value--accent   { color: var(--c-primary); }
.group-stats__label           { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); margin-top: 6px; }
@media (max-width: 600px)     { .group-stats { grid-template-columns: 1fr; gap: 14px; } }

/* ── Responsive Layout ──────────────────────────────────────────── */

/* Mobile sidebar toggle button — hidden on desktop */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  border-radius: var(--r-md);
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-toggle:hover { background: var(--c-surface-2); color: var(--c-text); }
.sidebar-toggle svg { width: 20px; height: 20px; display: block; }

/* Overlay behind sidebar on mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 199;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.is-visible { display: block; }

/* Tablet: narrow sidebar */
@media (max-width: 1100px) {
  :root { --sidebar-w: 240px; }
}

/* Medium: sidebar visible, tighter padding to fit content without scroll */
@media (max-width: 1200px) {
  .page-content {
    padding: var(--sp-6) var(--sp-5) var(--sp-6) var(--sp-6);
  }
  /* Tables: allow horizontal scroll within the card only */
  .card .table-wrap,
  .card.table-wrap {
    overflow-x: auto;
  }
  /* Booking detail grid: collapse sidebar to bottom */
  .booking-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: slide-out sidebar */
@media (max-width: 768px) {
  :root { --sidebar-w: 268px; }

  html,
  body,
  .portal-layout {
    max-width: 100%;
    overflow-x: hidden;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s var(--ease-out);
    z-index: 200;
  }
  .sidebar.is-open { transform: translateX(0); }

  /* Toggle always visible on mobile — move to start of topbar */
  .sidebar-toggle {
    display: flex;
    order: -1;   /* visually first in flex row */
    margin-right: var(--sp-1);
  }

  .main-wrap {
    margin-left: 0 !important;
    transition: none;
    min-width: 0;
    width: 100%;
  }
  .main-wrap::before { left: 0 !important; }

  .page-content {
    padding: 20px 16px;
    min-width: 0;
    max-width: 100vw;
  }

  .topbar {
    padding: 0 var(--sp-4);
    gap: var(--sp-2);
    max-width: 100vw;
  }

  /* Hide the user name/role meta on mobile to save space */
  .topbar__user-meta { display: none; }
  .topbar__divider   { display: none; }

  /* Dashboard grids — stack to 2 col on tablet */
  .admin-kpi-grid    { grid-template-columns: repeat(2,1fr) !important; }
  .admin-two-col     { grid-template-columns: 1fr !important; }
  .admin-three-col   { grid-template-columns: 1fr 1fr !important; }
  .settings-grid     { grid-template-columns: 1fr !important; }
  .grid-2            { grid-template-columns: 1fr !important; }
}

/* Mobile: single column */
@media (max-width: 480px) {
  .admin-kpi-grid  { grid-template-columns: 1fr !important; }
  .admin-three-col { grid-template-columns: 1fr !important; }
  .page-content    { padding: 16px 12px; }

  .page-title { font-size: 1.375rem; }
}

/* ── Fake Payment Modal ──────────────────────────────────────── */
.pay-modal-amount {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dk) 100%);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.pay-modal-amount::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.pay-modal-amount__label {
  font-size: 0.733rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}
.pay-modal-amount__value {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.pay-modal-amount__ref {
  font-size: 0.733rem;
  color: rgba(255,255,255,0.55);
}

.pay-modal-form { margin-bottom: 16px; }

.pay-field { margin-bottom: 14px; }
.pay-label {
  display: block;
  font-size: 0.773rem;
  font-weight: 600;
  color: var(--c-text-muted);
  margin-bottom: 5px;
}
.pay-input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: 0.9375rem;
  color: var(--c-text);
  outline: none;
}
.pay-input--fake {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  background: var(--c-surface-2);
  cursor: not-allowed;
  user-select: none;
}

.pay-modal-notice {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px;
  background: var(--c-warning-bg);
  border: 1px solid color-mix(in srgb, var(--c-warning) 35%, var(--c-surface));
  border-radius: 7px;
  font-size: 0.773rem;
  color: var(--c-warning);
  line-height: 1.45;
}

/* Spinner inside pay button */
.pay-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lp-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 5px;
}

/* ── View Toggle (List / Calendar) ────────────────────────── */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface);
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 0.793rem;
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  border-right: 1px solid var(--c-border);
  transition: all var(--t-fast);
}
.view-toggle__btn:last-child { border-right: none; }
.view-toggle__btn:hover {
  background: var(--c-primary-ghost);
  color: var(--c-primary);
}
.view-toggle__btn--active {
  background: var(--c-primary);
  color: #fff;
}
.view-toggle__btn--active:hover {
  background: var(--c-primary-dk);
  color: #fff;
}
.view-toggle__btn svg { width: 14px; height: 14px; }

/* ─── Clickable Table Rows (Accessible) ─── */
.table--clickable tbody tr { position: relative; cursor: pointer; }
.table--clickable tbody tr:hover { background: var(--c-primary-ghost); }
.table--clickable .table__link {
  color: inherit;
  text-decoration: none;
}
.table--clickable .table__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
.table--clickable .table__link:focus-visible::after {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* ─── Amount Coloring ─── */
.amount--positive { color: var(--c-success); }
.amount--negative { color: var(--c-danger); }

/* ─── Tour Detail Layout (Portal) ─── */
.tour-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) {
  .tour-detail-layout { grid-template-columns: 1fr; }
}

/* ─── Sidebar List Layout ─── */
.layout-with-sidebar {
  display: grid;
  grid-template-columns: var(--layout-list-sidebar, 290px) 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 900px) {
  .layout-with-sidebar { grid-template-columns: 1fr; }
}

/* ─── Progress Fill Modifiers ─── */
.fill--low { background: var(--c-primary); }
.fill--medium { background: var(--c-warning); }
.fill--high { background: var(--c-danger); }

/* ─── Hijri Date (secondary line beneath Gregorian dates) ─── */
.hijri-date {
  font-size: .68rem;
  color: var(--c-text-muted);
  font-weight: 400;
  letter-spacing: .01em;
  margin-top: 1px;
  line-height: 1.3;
}
.hijri-date--inline {
  font-size: .68rem;
  color: var(--c-text-muted);
  font-weight: 400;
}
/* When used as a standalone meta value (e.g. tour-meta__val), inherit size */
.tour-meta__val.hijri-date {
  font-size: .82rem;
  font-weight: 500;
  margin-top: 0;
}

/* ─── Key Column (subtle primary tint on first/ref cell) ─── */
.table__key {
  background: var(--c-primary-ghost);
  border-right: 2px solid var(--c-primary-pale);
  position: relative;
}
.table--clickable tbody tr:hover .table__key { background: var(--c-primary-pale); }

/* ─── Reference Number (text style inside key cell) ─── */
/* Golden rule: ref columns are ALWAYS clickable links to detail view */
.table__ref {
  font-family: var(--font-mono, monospace);
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: .02em;
}
a.table__ref {
  text-decoration: none;
  border-bottom: 1px dashed var(--c-primary-pale);
  transition: all var(--t-fast);
}
a.table__ref:hover {
  color: var(--c-primary-dk);
  border-bottom-color: var(--c-primary);
  border-bottom-style: solid;
}

/* ─── Utility Classes ─── */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.font-mono { font-family: var(--font-mono, monospace); }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.nowrap { white-space: nowrap; }
.table__ref,
.hijri-date,
.hijri-date--inline,
.amount,
.amount--positive,
.amount--negative,
.fin-date,
.fin-amount,
.text-right,
.num,
.table th.num,
.table td.num,
.table td[style*="text-align:right"],
.table td[style*="font-variant-numeric"],
.tb-table th.text-right,
.tb-table td.text-right,
.jrn-list th.num,
.jrn-list td.num,
.jrn-list .ref,
.fin-acct-table th.num,
.fin-acct-table td.num,
.fin-acct-table .acct-code,
.cat-bar__amt,
.pay-row__amount,
.pay-row__kwd,
.pay-row__date,
.trav-amounts,
.trav-amounts__main,
.trav-amounts__extra {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.table-responsive,
.card[style*="overflow:hidden"],
.je-lines-wrap {
  overflow-x: auto;
}
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.p-4 { padding: var(--sp-4); }
.p-6 { padding: var(--sp-6); }
.d-flex { display: flex; }
.d-grid { display: grid; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.overflow-hidden { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   EXTRACTED COMPONENT STYLES (moved from inline <style> blocks)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Mumineen Detail ─── */
.mumin-detail-grid{display:grid;grid-template-columns:320px 1fr;gap:24px}
.mumin-profile-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:28px;text-align:center}
.mumin-avatar-lg { width: 72px; height: 72px; font-size: 1.6rem; background: var(--c-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; margin: 0 auto 16px; font-family: var(--font-display); }
.mumin-name-lg{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--c-text);margin-bottom:4px}
.mumin-id{font-size:.82rem;color:var(--c-text-muted);margin-bottom:16px}
.mumin-info-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--c-border-light,var(--c-border));font-size:.82rem}
.mumin-info-row:last-child{border-bottom:none}
.mumin-info-row__label{color:var(--c-text-muted);font-weight:500}
.mumin-info-row__value{color:var(--c-text);font-weight:500;text-align:right}

/* ─── Finance Stats ─── */
.fin-overview{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:28px}
.fin-stat{
  position:relative;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  padding:20px 24px;text-align:center;
  overflow:hidden;
}
.fin-stat__label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:6px;position:relative;z-index:2}
.fin-stat__value{font-family:var(--font-display);font-size:1.6rem;font-weight:600;line-height:1;position:relative;z-index:2}
.fin-stat__sub{font-size:.73rem;color:var(--c-text-muted);margin-top:4px;position:relative;z-index:2}
.fin-stat__spark{
  position:absolute;left:0;right:0;bottom:0;
  width:100%;height:38px;
  opacity:.18;
  pointer-events:none;z-index:1;
}
@media (max-width: 1100px) {
  .fin-overview { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .fin-overview { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Responsive table fallback ─────────────────────────────────────
   Bare .table elements on narrow screens are made horizontally scrollable
   when their direct parent is a .card. Templates that need finer control
   still opt-in via .table-wrap. This catches the "we forgot to wrap"
   common case without touching any individual page. */
@media (max-width: 768px) {
  .card > .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ─── Canonical breakpoint set ───────────────────────────────────────
   Use ONE of these four breakpoints in new media queries. Many older rules
   in this file use one-off pixel values (480, 520, 560, 600, 720, 880, 900,
   960, 980, 1100 etc.); leave them in place but stop adding new ones —
   migrate as files are touched. */
/* sm:  640px  — phones                    */
/* md:  768px  — small tablets             */
/* lg:  980px  — large tablets / portrait  */
/* xl: 1200px  — desktop                   */

/* ─── KPI Card (shared partial) ─────────────────────────────────────
   Used by the templates/components/kpi-card.php helper. Inherits .fin-stat
   (locked) and adds tone colour modifiers identical to the mumin-ledger
   value tones so future migrations from inline-ternary tones to the partial
   are byte-equivalent. */
.kpi-card__value--danger  { color: var(--c-danger); }
.kpi-card__value--success { color: var(--c-success); }
.kpi-card__value--warn    { color: var(--c-warning); }
.kpi-card__value--muted   { color: var(--c-text-muted); }

/* ─── Mumin Ledger (admin profile · Ledger tab) ─────────────────────
   Scoped block so padding/spacing is consistent and inline-style noise
   stays out of the template. KPI strip uses .fin-stat tokens (locked
   style) but forces 4-up + uniform heights for visual balance. */
.mumin-ledger__kpis{grid-template-columns:repeat(4,1fr)}
.mumin-ledger__kpis .fin-stat{min-height:104px;display:flex;flex-direction:column;justify-content:center;padding:18px 22px}
.mumin-ledger__val--danger{color:var(--c-danger)}
.mumin-ledger__val--success{color:var(--c-success)}
.mumin-ledger__val--warn{color:var(--c-warning)}
.mumin-ledger__val--muted{color:var(--c-text-muted)}

/* Refundable banner — sits between KPI strip and the table */
.mumin-ledger__refund-banner{
  background:var(--c-warning-bg);
  border:1px solid color-mix(in srgb,var(--c-warning) 25%,var(--c-surface));
  border-radius:var(--r-md);
  padding:14px 18px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.mumin-ledger__refund-banner-text strong{display:block;color:var(--c-warning);font-size:.95rem;margin-bottom:2px}
.mumin-ledger__refund-banner-text span{font-size:.82rem;color:var(--c-warning);opacity:.85}

/* Card wrapper around the table — flush corners, no inner padding */
.mumin-ledger__card{padding:0;overflow:hidden}

/* Ledger table — tighter, more legible than the default .table density */
.mumin-ledger__table{font-size:.85rem}
.mumin-ledger__table thead th{padding:10px 14px;font-size:.72rem}
.mumin-ledger__table tbody td{padding:11px 14px;vertical-align:middle;max-width:none}
.mumin-ledger__table tfoot th{padding:12px 14px;background:var(--c-surface-2);border-top:2px solid var(--c-border)}

/* Column widths & alignment (desc column flexes — no fixed width) */
.mumin-ledger__col-date{width:96px}
.mumin-ledger__col-ref{width:120px}
.mumin-ledger__col-num{width:108px;text-align:right}
.mumin-ledger__col-bal{width:132px;text-align:right}

/* Cell-level treatments */
.mumin-ledger__cell-date{font-size:.78rem;white-space:nowrap;color:var(--c-text-muted)}
.mumin-ledger__cell-desc{display:flex;align-items:center;gap:10px;min-width:0}
.mumin-ledger__kind{font-size:.6rem;letter-spacing:.06em;flex-shrink:0}
.mumin-ledger__descr{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mumin-ledger__cell-ref{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mumin-ledger__ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;white-space:nowrap}

.mumin-ledger__cell-num,
.mumin-ledger__cell-bal{
  text-align:right;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mumin-ledger__cell-bal{font-weight:700}
.mumin-ledger__num--danger{color:var(--c-danger)}
.mumin-ledger__num--success{color:var(--c-success)}
.mumin-ledger__num--warn{color:var(--c-warning)}
.mumin-ledger__num--muted{color:var(--c-text-muted)}
.mumin-ledger__num--blank{color:var(--c-text-light)}
.mumin-ledger__cr{font-size:.65rem;font-weight:500;color:var(--c-text-muted);margin-left:3px;letter-spacing:.04em}

/* Subtle row tinting by kind so the eye can group activity at a glance */
.mumin-ledger__row--booking td{background:var(--c-surface)}
.mumin-ledger__row--payment td{background:color-mix(in srgb,var(--c-success-bg) 35%,var(--c-surface))}
.mumin-ledger__row--refund td{background:color-mix(in srgb,var(--c-info-bg) 45%,var(--c-surface))}
.mumin-ledger__table tbody tr:hover td{background:var(--c-primary-ghost)}

/* Totals row label */
.mumin-ledger__totals-label{text-align:right;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted)}

/* Compact on narrower screens — drop reference column, stack KPI to 2-up */
@media (max-width: 980px){
  .mumin-ledger__kpis{grid-template-columns:repeat(2,1fr)}
  .mumin-ledger__col-ref,
  .mumin-ledger__cell-ref{display:none}
}
@media (max-width: 640px){
  .mumin-ledger__refund-banner{flex-direction:column;align-items:flex-start}
  .mumin-ledger__table thead th,
  .mumin-ledger__table tbody td,
  .mumin-ledger__table tfoot th{padding:9px 10px}
}

/* ─── Per-tour P&L grid ─── */
.tour-pl-row{cursor:pointer;transition:background .12s}
.tour-pl-row:hover{background:var(--c-primary-pale)}
.tour-pl-row .pl-margin--good{color:var(--c-success);font-weight:600}
.tour-pl-row .pl-margin--bad{color:var(--c-danger);font-weight:600}
.tour-pl-row .pl-margin--zero{color:var(--c-text-muted)}

/* ─── Booking Stats & Components ─── */
.bkg-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px}
.bkg-stat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px 18px;text-align:center}
.bkg-stat__label{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:4px}
.bkg-stat__value{font-family:var(--font-display);font-size:1.35rem;font-weight:600;line-height:1}
.bkg-stat__sub{font-size:.72rem;color:var(--c-text-muted);margin-top:3px}
.bkg-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:24px}
.bkg-header__ref{font-family:var(--font-mono,monospace);font-size:.85rem;font-weight:700;color:var(--c-primary);letter-spacing:.04em}
.bkg-header__tour{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--c-text);margin:4px 0 8px;line-height:1.2}
.bkg-header__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--c-text-muted)}
.trav-row{display:flex;align-items:flex-start;gap:16px;padding:16px;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);margin-bottom:10px}
.trav-row--gl{border-color:var(--c-gold);border-width:2px}
.trav-avatar { width: 44px; height: 44px; font-size: .78rem; }  /* size-only; base styles from legacy-alias rule */
.trav-info{flex:1;min-width:0}
.trav-name{font-weight:600;font-size:.9rem}
.trav-detail{font-size:.78rem;color:var(--c-text-muted);margin-top:3px;display:flex;gap:14px;flex-wrap:wrap}
.trav-amounts{text-align:right;flex-shrink:0}
.trav-amounts__main{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--c-text)}
.trav-amounts__extra{font-size:.73rem;color:var(--c-warning)}
.formality-item{display:flex;align-items:flex-start;gap:14px;padding:14px;border:1px solid var(--c-border);border-radius:var(--r-md);margin-bottom:10px;background:var(--c-surface)}
.formality-item--pending{border-left:3px solid var(--c-warning)}
.formality-item--completed{border-left:3px solid var(--c-primary);opacity:.8}
.formality-item--rejected{border-left:3px solid var(--c-danger);opacity:.8}
.formality-icon{width:36px;height:36px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.formality-icon--DOC_UPLOAD{background:var(--c-gold-pale);color:var(--c-gold-dk)}
.formality-icon--PAYMENT{background:var(--c-gold-pale);color:var(--c-gold-dk)}
.formality-icon--GENERAL{background:var(--c-surface-2);color:var(--c-text-muted)}
.formality-icon--HEALTH{background:var(--c-primary-pale);color:var(--c-primary)}
.formality-body{flex:1;min-width:0}
.formality-title{font-weight:600;font-size:.87rem}
.formality-meta{font-size:.73rem;color:var(--c-text-muted);margin-top:4px;display:flex;gap:14px;flex-wrap:wrap}
.formality-descr{font-size:.78rem;color:var(--c-text-2);margin-top:2px}
.formality-reviewer{font-size:.72rem;color:var(--c-text-muted);margin-top:4px}
.formality-actions{display:flex;gap:6px;flex-shrink:0}
.timeline{padding-left:20px;border-left:2px solid var(--c-border);margin:0}
.timeline__item{position:relative;padding:0 0 20px 16px}
.timeline__item:last-child{padding-bottom:0}
.timeline__dot{position:absolute;left:-26px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--c-surface);border:2px solid var(--c-primary)}
.timeline__status{font-weight:600;font-size:.83rem;color:var(--c-text)}
.timeline__info{font-size:.73rem;color:var(--c-text-muted);margin-top:2px}
.pay-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--c-border-light, var(--c-border))}
.pay-row:last-child{border-bottom:none}
.pay-row__info{flex:1;min-width:0}
.pay-row__name{font-weight:600;font-size:.87rem}
.pay-row__ref{font-size:.73rem;color:var(--c-text-muted);margin-top:2px}
.pay-row__amount{text-align:right}
.pay-row__kwd{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--c-primary)}
.pay-row__date{font-size:.72rem;color:var(--c-text-muted)}
.special-req-block{padding:12px 16px;background:var(--c-gold-pale);border-radius:var(--r-md);font-size:.85rem;color:var(--c-text-2);line-height:1.5}
.form-footer{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--c-border)}
.form-footer__meta{font-size:.73rem;color:var(--c-text-muted)}
@media (max-width: 768px) {
  .bkg-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Reports ─── */
.report-filters{display:flex;align-items:center;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.cat-bar{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--c-border-light, var(--c-border))}
.cat-bar:last-child{border-bottom:none}
.cat-bar__name{width:140px;font-size:.83rem;font-weight:600;color:var(--c-text);flex-shrink:0}
.cat-bar__track{flex:1;height:24px;background:var(--c-surface-2);border-radius:var(--r-md);overflow:hidden;position:relative}
.cat-bar__fill{height:100%;background:var(--c-primary);border-radius:var(--r-md);transition:width .4s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:.7rem;font-weight:600;color:#fff;min-width:40px}
.cat-bar__amt{width:100px;text-align:right;font-size:.85rem;font-weight:600;color:var(--c-text);flex-shrink:0}
/* .report-tabs / .report-tabs__item — canonical rule lives further down
   (pill-style for module-internal navigation, ~line 6510). The older
   underline-style block here was an early draft, kept being overridden,
   removed in the Phase-C harmonisation. */
.tb-table{width:100%;border-collapse:collapse;font-size:.84rem}
.tb-table th{font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c-text-muted);padding:10px 14px;border-bottom:2px solid var(--c-border);text-align:left}
.tb-table th.text-right,.tb-table td.text-right{text-align:right}
.tb-table td{padding:9px 14px;border-bottom:1px solid var(--c-border-light, var(--c-border))}
.tb-table .tb-section{font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--c-text-muted);background:var(--c-surface-2);padding:8px 14px}
.tb-table .tb-total td{font-weight:700;border-top:2px solid var(--c-border);border-bottom:none;font-size:.88rem;padding:12px 16px}
.tb-table .tb-grand td{font-weight:700;border-top:3px double var(--c-border);border-bottom:none;font-size:.95rem;padding:14px 18px}

/* ─── Support / SR Detail ─── */
.priority-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.priority-dot--URGENT{background:var(--c-danger)}
.priority-dot--HIGH{background:var(--c-warning)}
.priority-dot--MEDIUM{background:var(--c-info)}
.priority-dot--LOW{background:var(--c-slate-400)}
.sr-detail-grid{display:grid;grid-template-columns:1fr 300px;gap:24px}
.msg-thread{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.msg-bubble{padding:14px 18px;border-radius:var(--r-lg);max-width:85%;font-size:.87rem;line-height:1.6;position:relative}
.msg-bubble--user{background:var(--c-surface-2);align-self:flex-start;border-bottom-left-radius:4px}
.msg-bubble--admin{background:var(--c-primary-pale);align-self:flex-end;border-bottom-right-radius:4px}
.msg-bubble--internal{background:var(--c-warning-bg);align-self:flex-end;border-bottom-right-radius:4px;border:1px dashed color-mix(in srgb, var(--c-warning) 40%, var(--c-surface))}
.msg-sender{font-size:.72rem;font-weight:600;color:var(--c-text-muted);margin-bottom:4px}
.msg-time{font-size:.68rem;color:var(--c-text-light);margin-top:6px}
.sr-sidebar-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:20px;margin-bottom:16px}
.sr-sidebar-card h4{font-family:var(--font-display);font-size:.95rem;font-weight:600;margin:0 0 12px;color:var(--c-text)}
.sr-info-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.82rem;border-bottom:1px solid var(--c-border-light,var(--c-border))}
.sr-info-row:last-child{border-bottom:none}
@media (max-width: 900px) {
  .sr-detail-grid { grid-template-columns: 1fr; }
}

/* ─── Document Review Cards ─── */
.doc-check{margin-top:14px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--c-primary)}
.doc-review-card{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface);margin-bottom:12px;transition:box-shadow .15s}
.doc-review-card:hover{box-shadow:var(--sh-sm)}
.doc-review-card__icon{width:48px;height:48px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.doc-review-card__icon--PASSPORT{background:var(--c-gold-pale);color:var(--c-gold-dk)}
.doc-review-card__icon--VISA{background:var(--c-gold-pale);color:var(--c-gold-dk)}
.doc-review-card__icon--CIVIL_ID{background:color-mix(in srgb, var(--c-warning) 12%, var(--c-surface));color:var(--c-warning)}
.doc-review-card__icon--PHOTO{background:var(--c-gold-pale);color:var(--c-gold-dk)}
.doc-review-card__icon--VACCINE{background:var(--c-primary-pale);color:var(--c-primary)}
.doc-review-card__icon--DL{background:color-mix(in srgb, var(--c-slate-400) 12%, var(--c-surface));color:var(--c-slate-600)}
.doc-review-card__icon--default{background:var(--c-surface-2);color:var(--c-text-muted)}
.doc-review-card__body{flex:1;min-width:0}
.doc-review-card__type{font-weight:600;font-size:.9rem;color:var(--c-text);margin-bottom:2px}
.doc-review-card__owner{font-size:.82rem;color:var(--c-text-2)}
.doc-review-card__meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.73rem;color:var(--c-text-muted);margin-top:8px}
.doc-review-card__actions{display:flex;gap:6px;flex-shrink:0;align-items:flex-start}

/* ─── Tour Packages Layout ─── */
.pkg-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.pkg-list{display:flex;flex-direction:column;gap:6px}
.pkg-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:11px 14px 11px 12px;cursor:pointer;text-decoration:none;display:block;border-left:3px solid transparent;transition:border-color .15s, box-shadow .15s, background .15s}
.pkg-card:hover{border-color:var(--c-primary-muted,#c5d5f5);background:var(--c-surface-hover,var(--c-surface));text-decoration:none}
.pkg-card.is-active{border-color:var(--c-primary);border-left-color:var(--c-primary);box-shadow:0 1px 6px rgba(0,0,0,.06);text-decoration:none}
.pkg-card.is-inactive{opacity:.52}
.pkg-card__code{font-size:.67rem;font-weight:600;letter-spacing:.04em;color:var(--c-primary);text-transform:uppercase;margin-bottom:3px}
.pkg-card__name{font-size:.85rem;font-weight:600;color:var(--c-text);line-height:1.3}
.pkg-card__pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}
.pkg-card__pill{font-size:.67rem;color:var(--c-text-muted);background:var(--c-surface-2);border-radius:var(--r-pill);padding:2px 7px;white-space:nowrap}
.pkg-stats{display:flex;gap:0;border-top:1px solid var(--c-border)}
.pkg-stat{flex:1;padding:10px 14px;text-align:center;border-right:1px solid var(--c-border)}
.pkg-stat:last-child{border-right:none}
.pkg-stat__val{font-size:1.1rem;font-weight:700;color:var(--c-text);line-height:1}
.pkg-stat__lbl{font-size:.68rem;color:var(--c-text-muted);margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.inline-form{background:var(--c-surface-2);border-top:1px solid var(--c-border);padding:16px 20px;display:none}
.inline-form.is-open{display:block}
.inline-form__title{font-size:.78rem;font-weight:600;color:var(--c-text);margin:0 0 12px}
#pkg-edit-section{display:none;border-top:1px solid var(--c-border);padding:20px 24px;background:var(--c-surface-2)}
#pkg-edit-section.is-open{display:block}
.day-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:start;padding:12px 16px;border-bottom:1px solid var(--c-border)}
.day-row:last-child{border-bottom:none}
.day-badge{background:var(--c-primary);color:#fff;font-size:.68rem;font-weight:700;border-radius:var(--r-pill);padding:4px 8px;text-align:center;white-space:nowrap;display:inline-block}
@media (max-width: 900px) {
  .pkg-layout { grid-template-columns: 1fr; }
  .mumin-detail-grid { grid-template-columns: 1fr; }
}

/* ─── Tour Detail (Admin) ─── */
.tour-table-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.tour-table-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--c-border)}
.tour-table-header__search{position:relative;width:260px}
.tour-table-header__search input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--c-border);border-radius:var(--r-md);font-size:.83rem;background:var(--c-bg)}
.tour-table-header__search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--c-text-muted)}
.tour-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:14px}
.tour-header__info{flex:1;min-width:0}
.tour-header__code{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary);margin-bottom:6px}
.tour-header__name{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--c-text);margin:0 0 12px;line-height:1.2}
/* Flex strip — items wrap when content overflows, but grow:1 makes every row
   fully populated (no half-empty rows). 1px gap on a border-coloured background
   gives crisp separators that auto-adjust to the wrap. */
.tour-header__meta{
  display:flex;flex-wrap:wrap;
  gap:1px;
  font-size:.81rem;margin:0 0 24px;
  border:1px solid var(--c-border);border-radius:var(--r-md);
  overflow:hidden;background:var(--c-border);
}
.tour-meta__item{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:10px 16px;min-width:0;
  flex:1 1 130px;
  background:var(--c-surface);
}
.tour-meta__label{font-size:.63rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);line-height:1;white-space:nowrap}
.tour-meta__val{font-size:.88rem;font-weight:600;color:var(--c-text);white-space:nowrap;line-height:1.2}
.tour-meta__hint{font-size:.7rem;color:var(--c-text-muted);white-space:nowrap;line-height:1}
.tour-header__actions{display:flex;gap:8px;flex-shrink:0;align-items:flex-start}
.tour-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.tour-stat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px 20px;text-align:left}
.tour-stat--link{text-decoration:none;cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.tour-stat--link:hover{border-color:var(--c-primary);box-shadow:0 2px 12px rgba(29,102,68,0.10);transform:translateY(-1px);text-decoration:none}
.tour-stat--warn{border-color:rgba(245,158,11,0.5);background:rgba(254,243,199,0.35)}
.tour-stat--warn:hover{border-color:var(--c-warning);box-shadow:0 2px 12px rgba(245,158,11,0.12)}
.tour-stat__label{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:8px;display:flex;align-items:center;gap:5px}
.tour-stat__label svg{width:13px;height:13px;opacity:.6}
.tour-stat__value{font-family:var(--font-display);font-size:1.5rem;font-weight:600;line-height:1;color:var(--c-text)}
.tour-stat__sub{font-size:.72rem;color:var(--c-text-muted);margin-top:6px}
.tour-leader-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:12px 20px;margin-bottom:20px}
.tour-leader-strip__info{display:flex;align-items:center;gap:12px;flex:1}
.tour-leader-strip__avatar { width: 34px; height: 34px; font-size: .9rem; }  /* size-only; base styles from legacy-alias rule */
.tour-leader-strip__label{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-muted)}
.tour-leader-strip__name{font-weight:600;font-size:.9rem;color:var(--c-text);margin-top:1px}
.tour-leader-strip__contact{font-size:.8rem;color:var(--c-primary);text-decoration:none;margin-left:16px}
.tour-leader-strip__contact:hover{text-decoration:underline}
.detail-tabs{margin-bottom:0}
.detail-tabs .tabs__list{margin-bottom:0}
.dest-card{display:flex;align-items:flex-start;gap:16px;padding:16px;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);margin-bottom:12px}
.dest-card__order{width:32px;height:32px;border-radius:50%;background:var(--c-primary-pale);color:var(--c-primary);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.dest-card__body{flex:1;min-width:0}
.dest-card__name{font-weight:600;font-size:.9rem;color:var(--c-text)}
.dest-card__detail{font-size:.78rem;color:var(--c-text-muted);margin-top:4px;display:flex;gap:16px;flex-wrap:wrap}
.dest-card__actions{flex-shrink:0}
.itin-row{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px solid var(--c-border-light, var(--c-border))}
.itin-row:last-child{border-bottom:none}
.itin-daybadge{width:48px;height:48px;border-radius:var(--r-md);background:rgba(200,160,90,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.itin-daybadge__num{font-size:1rem;font-weight:700;color:var(--c-gold-dk);line-height:1}
.itin-daybadge__label{font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--c-text-muted)}
.itin-body{flex:1;min-width:0}
.itin-title{font-weight:600;font-size:.87rem;color:var(--c-text)}
.itin-desc{font-size:.8rem;color:var(--c-text-muted);margin-top:3px;line-height:1.5}
.itin-tags{display:flex;gap:8px;margin-top:6px}
.itin-tag{font-size:.7rem;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-surface-2);color:var(--c-text-muted);font-weight:500}
.price-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.price-tile{border:1px solid var(--c-border);border-radius:var(--r-md);padding:16px;background:var(--c-surface);position:relative}
.price-tile--default{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary)}
.price-tile__label{font-weight:600;font-size:.87rem;color:var(--c-text);margin-bottom:4px}
.price-tile__amt{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--c-primary)}
.price-tile__meta{font-size:.73rem;color:var(--c-text-muted);margin-top:6px;display:flex;flex-direction:column;gap:2px}
.price-tile__badge{position:absolute;top:10px;right:10px;font-size:.65rem;padding:2px 8px;border-radius:var(--r-pill);background:var(--c-primary-pale);color:var(--c-primary);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.price-tile__actions{margin-top:10px;padding-top:10px;border-top:1px solid var(--c-border)}
@media (max-width: 768px) {
  .tour-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Group Member Card ─── */
.grp-member-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.grp-member-card:hover {
  border-color: var(--c-border-strong);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.grp-member-card__info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.grp-member-card__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.grp-member-card__contact {
  font-size: 0.72rem;
  color: var(--c-text-muted);
  display: flex;
  gap: 12px;
  margin-top: 2px;
}
.grp-member-card__tiles {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}

/* Individual info tile */
.grp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--tile-bg, var(--c-surface-2));
  border: 1px solid transparent;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: default;
}
a.grp-tile { cursor: pointer; }
a.grp-tile:hover, .grp-tile:hover {
  border-color: var(--tile-accent, var(--c-border));
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  text-decoration: none;
}
.grp-tile__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tile-accent, var(--c-text));
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.grp-tile__label {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--tile-accent, var(--c-text-muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
  white-space: nowrap;
  opacity: 0.8;
}

/* Action tile (remove/leave button) */
.grp-tile--action {
  cursor: pointer;
  border: none;
  min-width: 40px;
  padding: 8px;
  color: var(--tile-accent);
  opacity: 0.4;
  font-family: inherit;
}
.grp-tile--action:hover { opacity: 1; }

/* ─── Portal Calendar ─── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-nav__title{font-size:1.15rem;font-weight:600;color:var(--c-text);letter-spacing:-0.01em}
.cal-nav__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text-2);cursor:pointer;text-decoration:none;transition:all 0.15s ease}
.cal-nav__btn:hover{background:var(--c-primary-pale);border-color:var(--c-primary-lite);color:var(--c-primary)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;background:var(--c-surface)}
.cal-grid__head{background:var(--c-primary);color:var(--c-text-inv);font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;padding:10px 4px;text-align:center}
.cal-grid__cell{min-height:100px;border-top:1px solid var(--c-border);border-right:1px solid var(--c-border);padding:6px 8px;position:relative;background:var(--c-surface);vertical-align:top}
.cal-grid__cell:nth-child(7n){border-right:none}
.cal-grid__cell--empty{background:var(--c-neutral-bg)}
.cal-grid__cell--today{background:var(--c-primary-ghost)}
.cal-grid__cell--today .cal-day{background:var(--c-primary);color:#fff;border-radius:var(--r-pill);width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
/* Day header row: Gregorian + Hijri side by side */
.cal-day-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.cal-day{font-size:0.793rem;font-weight:600;color:var(--c-text-2);line-height:1}
.cal-hijri{font-size:0.6rem;font-weight:400;color:var(--c-text-light);letter-spacing:0.01em}
.cal-grid__cell--today .cal-hijri{color:var(--c-primary-lite)}

/* Tour spans container */
.cal-tours{display:flex;flex-direction:column;gap:2px}

/* Multi-day tour span — the core block */
.cal-span{
  display:block;font-size:0.66rem;font-weight:600;line-height:1.3;
  padding:3px 0;height:20px;
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity 0.15s ease;
  border:none;
}
.cal-span:hover{opacity:0.8;text-decoration:none}

/* Position variants — controls border-radius and padding */
.cal-span--start{border-radius:10px 0 0 10px;padding-left:8px;margin-right:-8px}
.cal-span--mid{border-radius:0;margin-left:-8px;margin-right:-8px;padding-left:4px}
.cal-span--end{border-radius:0 10px 10px 0;margin-left:-8px;padding-left:4px}
.cal-span--single{border-radius:10px;padding-left:8px;padding-right:8px}

/* Status colors — base (overridden by tour-color rotation below) */
.cal-span--open{background:var(--span-bg, var(--c-primary-pale));color:var(--span-fg, var(--c-primary-dk))}
.cal-span--almost{background:var(--c-warning-bg);color:var(--c-warning)}
.cal-span--full{background:var(--c-surface-2);color:var(--c-text-light);text-decoration:line-through;opacity:0.6}
.cal-span--closed{background:var(--c-surface-2);color:var(--c-text-light);opacity:0.5}
.cal-span--booked{background:var(--c-primary);color:#fff;opacity:0.85}
.cal-span--start.cal-span--booked{border-left:3px solid var(--c-primary-dk)}
.cal-span--single.cal-span--booked{border-left:3px solid var(--c-primary-dk)}
.cal-span--end.cal-span--booked{border-right:3px solid var(--c-primary-dk)}

/* Start accent (left border) */
.cal-span--start.cal-span--open{border-left:3px solid var(--span-accent, var(--c-primary))}
.cal-span--single.cal-span--open{border-left:3px solid var(--span-accent, var(--c-primary))}
.cal-span--start.cal-span--almost{border-left:3px solid var(--c-warning)}
.cal-span--single.cal-span--almost{border-left:3px solid var(--c-warning)}

/* End accent (right border — mirrors start) */
.cal-span--end.cal-span--open{border-right:3px solid var(--span-accent, var(--c-primary))}
.cal-span--end.cal-span--almost{border-right:3px solid var(--c-warning)}

/* Color rotation for overlapping tours — 6 distinct warm-palette swatches.
   Picked to remain distinguishable while staying inside the site's earth /
   emerald / gold / teal family (no cool blue or purple). */
.cal-span[data-tour-color="0"]{--span-bg:var(--c-primary-pale); --span-fg:var(--c-primary-dk);  --span-accent:var(--c-primary)}
.cal-span[data-tour-color="1"]{--span-bg:var(--c-info-bg);      --span-fg:var(--c-info);        --span-accent:var(--c-info)}
.cal-span[data-tour-color="2"]{--span-bg:var(--c-gold-pale);    --span-fg:var(--c-gold-dk);     --span-accent:var(--c-gold)}
.cal-span[data-tour-color="3"]{--span-bg:#EFE9DA;               --span-fg:#564838;              --span-accent:#7A6A50}
.cal-span[data-tour-color="4"]{--span-bg:var(--c-danger-bg);    --span-fg:var(--c-danger);      --span-accent:var(--c-danger)}
.cal-span[data-tour-color="5"]{--span-bg:var(--c-warning-bg);   --span-fg:var(--c-warning);     --span-accent:var(--c-warning)}

/* Legend */
.cal-legend{display:flex;gap:16px;margin-top:14px;font-size:0.75rem;color:var(--c-text-muted)}
.cal-legend__dot{display:inline-block;width:10px;height:10px;border-radius:var(--r-pill);margin-right:5px;vertical-align:middle}
.cal-legend__dot--open{background:var(--c-primary-pale);border:1px solid var(--c-primary-lite)}
.cal-legend__dot--almost{background:var(--c-warning-bg);border:1px solid var(--c-warning)}
.cal-legend__dot--full{background:var(--c-surface-2);border:1px solid var(--c-border)}

/* ─── Groups ─── */
.group-row{transition:background 120ms}
.group-row__head:hover{background:var(--c-bg)}
.group-row--inactive .group-row__head{opacity:0.65}

/* ─── Inventory ─── */
/* ── Inventory — cool palette to match the finance section ────────────── */
.inv-summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 24px;
}
.inv-stat {
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  padding: 16px 18px;
  text-align: left;
  position: relative;
  box-shadow: 0 1px 2px rgba(17,46,30,.03);
}
.inv-stat__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-slate-400); margin-bottom: 6px;
}
.inv-stat__value {
  font-family: ui-monospace, monospace;
  font-size: 1.5rem; font-weight: 700; line-height: 1.05;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  margin-bottom: 4px;
}
.inv-stat__sub { font-size: .72rem; color: var(--c-slate-600); }

/* Inventory accordion — same identity as fin-accordion */
.inv-accordion {
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgba(17,46,30,.03);
  overflow: hidden;
  margin-bottom: 12px;
}
.inv-accordion__header {
  position: relative;
  padding: 12px 16px 12px 22px;
  background: var(--c-surface);
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  transition: background var(--t-fast);
}
.inv-accordion__header:hover { background: var(--c-slate-50); }
.inv-accordion__header::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-primary);
}
.inv-accordion.is-open .inv-accordion__header {
  background: var(--c-slate-50);
  border-bottom: 1px solid var(--c-slate-200);
}
.inv-accordion__title {
  color: var(--c-slate-800); font-weight: 700; font-size: .98rem;
  letter-spacing: .01em;
}
.inv-accordion__meta {
  font-size: .76rem; color: var(--c-slate-600);
  display: flex; gap: 16px; font-variant-numeric: tabular-nums;
}
.inv-accordion__meta strong { color: var(--c-ink); font-weight: 700; }
.inv-accordion__body { background: var(--c-surface); display: none; }
.inv-accordion.is-open .inv-accordion__body { display: block; }
.inv-accordion__chevron {
  transition: transform var(--t-fast);
  color: var(--c-slate-400);
  width: 16px; height: 16px; flex-shrink: 0;
}
.inv-accordion.is-open .inv-accordion__chevron {
  transform: rotate(180deg); color: var(--c-ink);
}

/* Inventory tables inside accordion bodies — slate header + 38px rows to
   match the rest of the finance section */
.inv-accordion__body .table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.inv-accordion__body .table thead th {
  text-align: left; padding: 9px 14px;
  background: var(--c-slate-100); color: var(--c-slate-800);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700;
  border-bottom: 1px solid var(--c-slate-200);
  white-space: nowrap;
}
.inv-accordion__body .table tbody td {
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--c-slate-100);
  vertical-align: middle;
  white-space: nowrap;
}
.inv-accordion__body .table tbody tr:last-child td { border-bottom: none; }
.inv-accordion__body .table tbody tr:hover td { background-color: var(--c-ink-ghost); }

/* Low-stock row treatment — danger-tinted left border */
.low-stock-row td { background: var(--c-danger-bg); }
.low-stock-row td:first-child { box-shadow: inset 3px 0 0 var(--c-danger); }

@media (max-width: 768px) {
  .inv-summary { grid-template-columns: 1fr; }
}

/* ─── Settings ─── */
.settings-grid{display:grid;grid-template-columns:200px 1fr;gap:24px}
.settings-nav{display:flex;flex-direction:column;gap:2px}
.settings-nav a{padding:8px 14px;font-size:.83rem;font-weight:500;color:var(--c-text-muted);border-radius:var(--r-md);text-decoration:none;transition:all .12s}
.settings-nav a:hover{background:var(--c-surface-2);color:var(--c-text);text-decoration:none}
.settings-nav a.is-active{background:var(--c-primary-pale);color:var(--c-primary);font-weight:600}
.settings-nav .settings-nav__divider{height:1px;background:var(--c-border);margin:6px 0}
@media (max-width: 768px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ── Hotel picker ──────────────────────────────────────────── */
.hotel-picker{border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);max-height:220px;overflow-y:auto}
.hotel-picker__empty{padding:20px 16px;text-align:center;font-size:var(--text-xs);color:var(--c-text-muted)}
.hotel-picker__row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--c-border);cursor:pointer;transition:background .12s;margin:0}
.hotel-picker__row:last-child{border-bottom:0}
.hotel-picker__row:hover{background:var(--c-surface-2)}
.hotel-picker__row input[type=checkbox]{margin:0;flex-shrink:0;accent-color:var(--c-primary)}
.hotel-picker__row:has(input:checked){background:var(--c-primary-ghost)}
.hotel-picker__row-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hotel-picker__name{font-weight:600;font-size:var(--text-sm);color:var(--c-text);line-height:1.2}
.hotel-picker__stars{color:var(--c-gold);font-size:var(--text-xs);letter-spacing:1px}
.hotel-picker__dest{font-size:var(--text-xs);color:var(--c-text-muted);white-space:nowrap}
.hotel-picker__row.is-hidden{display:none}

/* ── Mumin list (admin) — avatar + identity cell ─────────────────── */
.mumin-list td{vertical-align:middle;padding:9px 14px}
.mumin-list th{padding:9px 14px}
.mumin-list__cell{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.mumin-list__last-login{font-size:.78rem;color:var(--c-text-muted);white-space:nowrap}
.mumin-list__identity{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.mumin-list__identity:hover{text-decoration:none}
.mumin-list__identity:hover .mumin-list__name{color:var(--c-primary)}
.mumin-list__avatar { width: 32px; height: 32px; font-size: .72rem; }  /* size-only; base styles from legacy-alias rule */
.mumin-list__initials{line-height:1}
.mumin-list__identity-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.mumin-list__name{font-weight:600;font-size:.85rem;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;transition:color .12s;line-height:1.25}
.mumin-list__meta{font-size:.7rem;color:var(--c-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.mumin-list__meta .table__ref{font-family:var(--font-mono,monospace);font-size:.7rem;color:var(--c-primary);font-weight:600}
.mumin-list__family{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--c-text-2);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mumin-list__hof-badge{display:inline-flex;align-items:center;padding:1px 6px;font-size:.62rem;font-weight:700;letter-spacing:.04em;background:var(--c-gold-pale);color:#7C5E1A;border-radius:var(--r-pill);flex-shrink:0}

/* ── Profile form sections ──────────────────────────────────────── */
.profile-form{display:flex;flex-direction:column;gap:14px}
/* Form sections — restrained but visibly distinct */
.form-section{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(17,46,30,.04);
  margin-bottom:14px;
}
.form-section:last-child{margin-bottom:0}
.form-section__head{
  display:flex;align-items:baseline;gap:8px;
  padding:14px 20px;
  border-bottom:1px solid var(--c-border);
  background:var(--c-surface-2);
}
/* Hide the per-section icon entirely — too noisy */
.form-section__icon{display:none}
.form-section__title{
  margin:0;
  font-size:.74rem;font-weight:700;
  color:var(--c-text);line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;
}
.form-section__sub{
  margin:0;
  font-size:.72rem;color:var(--c-text-muted);
  line-height:1.2;font-weight:400;
  text-transform:none;letter-spacing:0;
}
.form-section__body{padding:20px}
/* Accent variants — distinct top edge plus matching tinted header for clear semantic identity */
.form-section--accent{box-shadow:0 1px 2px rgba(17,46,30,.04), inset 0 3px 0 var(--c-gold-lite,#E9C87F)}
.form-section--accent .form-section__head{background:linear-gradient(180deg,var(--c-gold-pale) 0%,var(--c-surface-2) 100%);border-bottom-color:var(--c-gold-lite,#E9C87F)}
.form-section--accent-danger{box-shadow:0 1px 2px rgba(17,46,30,.04), inset 0 3px 0 rgba(185,28,28,0.55)}
.form-section--accent-danger .form-section__head{background:linear-gradient(180deg,var(--c-danger-bg) 0%,var(--c-surface-2) 100%);border-bottom-color:rgba(185,28,28,0.25)}
.profile-form__footer{display:flex;justify-content:flex-end;padding-top:4px}

/* Flat sub-section divider — small uppercase label inside a card body, no nested boxed look */
.form-subsection{
  display:flex;align-items:baseline;gap:8px;
  margin:24px 0 14px;
  padding-top:18px;
  border-top:1px solid var(--c-border);
}
.form-subsection:first-child{margin-top:0;padding-top:0;border-top:none}
.form-subsection__title{
  margin:0;
  font-size:.74rem;font-weight:700;
  color:var(--c-text);line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;
}
.form-subsection__sub{
  margin:0;
  font-size:.72rem;color:var(--c-text-muted);
  line-height:1.2;font-weight:400;
}

/* ── Click-through table rows (mumin groups + docs tabs) ────────── */
.table--clickable tbody tr{transition:background .12s}
.table--clickable tbody tr:hover{background:var(--c-surface-2);cursor:pointer}
.table__link-row{color:inherit;text-decoration:none;display:contents}
.table__link-row:hover{text-decoration:none}

/* Notification channel indicators (also sent via email/WA/SMS) */
.notif-row__channels{display:inline-flex;align-items:center;gap:4px;color:var(--c-text-muted)}
.notif-row__channels svg{width:13px;height:13px;display:block}

/* Trip leader inline toggle button */
.trav-gl-btn{padding:4px 8px;color:var(--c-text-muted);transition:color .12s,background .12s}
.trav-gl-btn:hover:not(:disabled){color:var(--c-gold);background:var(--c-gold-pale)}
.trav-gl-btn.is-active{color:var(--c-gold-dk,#7C5E1A);background:var(--c-gold-pale);cursor:default}
.trav-gl-btn.is-active svg{filter:drop-shadow(0 0 1px rgba(0,0,0,.15))}

/* ── Traveller-document accordion ──────────────────────────────────────── */
.trav-doc-list{display:flex;flex-direction:column;gap:8px}

.trav-accordion{border:1.5px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;transition:border-color .15s}
.trav-accordion--done{border-color:color-mix(in srgb,var(--c-success) 35%,var(--c-border))}

.trav-accordion__head{display:flex;align-items:center;gap:12px;padding:14px 18px;width:100%;background:var(--c-surface);border:none;cursor:pointer;text-align:left;transition:background .12s}
.trav-accordion__head:hover{background:var(--c-surface-2)}

.trav-accordion__avatar{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--c-primary-ghost);color:var(--c-primary);font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.trav-accordion--done .trav-accordion__avatar{background:color-mix(in srgb,var(--c-success) 12%,white);color:var(--c-success)}

.trav-accordion__name{flex:1;font-weight:600;font-size:.95rem;color:var(--c-text)}

.trav-accordion__pill{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px}
.trav-accordion__pill--done{background:color-mix(in srgb,var(--c-success) 12%,white);color:var(--c-success)}
.trav-accordion__pill--done svg{width:12px;height:12px}
.trav-accordion__pill--pending{background:var(--c-warning-bg);color:var(--c-warning)}

.trav-accordion__caret{width:16px;height:16px;color:var(--c-text-muted);flex-shrink:0;transition:transform .2s}
.trav-accordion__head[aria-expanded="true"] .trav-accordion__caret{transform:rotate(180deg)}

.trav-accordion__body{padding:18px;border-top:1px solid var(--c-border);display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;background:var(--c-surface)}
.trav-accordion__body[hidden]{display:none}
.trav-accordion__body--wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.trav-accordion__empty{font-size:.85rem;color:var(--c-text-muted);margin:0;grid-column:1/-1}

/* ── Document slot (one required doc type per traveller) ─────────────── */
.doc-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
@media (max-width:480px){.doc-cards-grid{gap:10px}}
.doc-slot{border:1.5px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;background:var(--c-surface);display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.doc-slot:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(17,46,30,.08)}
.doc-slot--linked{border-color:color-mix(in srgb,var(--c-success) 40%,var(--c-border))}
.doc-slot--has-docs{border-color:color-mix(in srgb,var(--c-info,#0369a1) 30%,var(--c-border))}
.doc-slot--missing{border-color:var(--c-border)}
.doc-slot--rejected{border-color:color-mix(in srgb,var(--c-danger) 40%,var(--c-border))}
.doc-slot--warning{border-color:color-mix(in srgb,var(--c-warning) 40%,var(--c-border))}

.doc-slot__head{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--c-surface-2)}
.doc-slot--linked .doc-slot__head{background:color-mix(in srgb,var(--c-success) 7%,var(--c-surface))}
.doc-slot--has-docs .doc-slot__head{background:color-mix(in srgb,var(--c-info,#0369a1) 5%,var(--c-surface))}
.doc-slot--missing .doc-slot__head{background:var(--c-surface-2)}
.doc-slot--rejected .doc-slot__head{background:color-mix(in srgb,var(--c-danger) 6%,var(--c-surface))}
.doc-slot--warning .doc-slot__head{background:color-mix(in srgb,var(--c-warning) 7%,var(--c-surface))}

/* Status dot with icon inside — universal across cards, legend, hover */
.doc-status-dot{display:inline-flex;width:14px;height:14px;border-radius:50%;align-items:center;justify-content:center;color:#fff;flex-shrink:0;line-height:0}
.doc-status-dot svg{width:9px;height:9px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.doc-status-dot--verified{background:var(--c-success)}
.doc-status-dot--uploaded{background:var(--c-info,#0E5067);animation:doc-dot-pulse 2.4s ease-in-out infinite}
@keyframes doc-dot-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-info,#0E5067) 50%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--c-info,#0E5067) 0%,transparent)}}
.doc-status-dot--warning{background:var(--c-warning)}
.doc-status-dot--rejected{background:var(--c-danger)}
.doc-status-dot--missing{background:var(--c-text-light);color:#fff}
/* Legacy alias for booking-context "linked" — same visual as verified */
.doc-slot__dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.doc-slot__dot svg{width:9px;height:9px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.doc-slot--linked .doc-slot__dot{background:var(--c-success)}
.doc-slot--has-docs .doc-slot__dot{background:var(--c-info,#0E5067)}
.doc-slot--missing .doc-slot__dot{background:var(--c-text-light)}
.doc-slot--rejected .doc-slot__dot{background:var(--c-danger)}
.doc-slot--warning .doc-slot__dot{background:var(--c-warning)}

.doc-slot__type{font-weight:600;font-size:.82rem;color:var(--c-text);flex:1}
.doc-slot__hint{color:var(--c-text-muted);cursor:help;margin-left:auto}
.doc-slot__hint svg{width:13px;height:13px;vertical-align:middle}

.doc-slot__body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:84px}
.doc-slot__doc-no-big{font-size:.95rem;font-weight:600;color:var(--c-text);font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:.01em}
.doc-slot__line{font-size:.78rem;color:var(--c-text-2);display:flex;align-items:center;gap:6px}
.doc-slot__line--muted{color:var(--c-text-muted);font-size:.74rem}
.doc-slot__line--warn{color:var(--c-warning);font-weight:500}
.doc-slot__line svg{width:11px;height:11px;flex-shrink:0;color:var(--c-warning)}
.doc-slot__empty-msg{font-size:.85rem;color:var(--c-text-muted);margin:0;font-style:italic}
.doc-slot__instructions-line{font-size:.72rem;color:var(--c-text-muted);margin:0}
.doc-slot__doc-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.8rem}
.doc-slot__doc-no{font-weight:600;color:var(--c-text);font-size:.85rem}
.doc-slot__expiry{color:var(--c-text-muted);font-size:.75rem}
.doc-slot__expiry--warn{color:var(--c-warning)}
.doc-slot__lock{color:var(--c-success);flex-shrink:0}
.doc-slot__lock svg{width:12px;height:12px;vertical-align:middle}
.doc-slot__reject-note{font-size:.75rem;color:var(--c-danger);margin:0}
.doc-slot__validity-warn{font-size:.7rem;color:var(--c-warning);font-weight:500}
.doc-slot__empty-msg{font-size:.78rem;color:var(--c-text-muted);margin:0}
.doc-slot__instructions{font-size:.78rem;color:var(--c-text-muted);margin:0}
.doc-slot__sample-link{font-size:.76rem;color:var(--c-primary)}

.doc-slot__actions{display:flex;align-items:center;gap:6px;padding:10px 14px;border-top:1px solid var(--c-border);background:var(--c-surface);flex-wrap:wrap;row-gap:6px}
.doc-slot__upload-link{font-size:.75rem;color:var(--c-primary);cursor:pointer;background:none;border:none;padding:0;text-decoration:underline;text-underline-offset:2px;margin-left:auto}

/* Checkbox in doc-slot header */
.doc-slot__check-form{margin-left:auto;display:flex;align-items:center;line-height:0}
.doc-slot__check{position:relative;display:inline-flex;cursor:pointer;width:20px;height:20px}
.doc-slot__check-input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.doc-slot__check-input:disabled{cursor:not-allowed}
.doc-slot__check-box{width:20px;height:20px;border:1.5px solid var(--c-border-strong);border-radius:5px;background:var(--c-surface);display:flex;align-items:center;justify-content:center;color:var(--c-text-inv);transition:all .15s}
.doc-slot__check-box svg{width:14px;height:14px;opacity:0;transition:opacity .12s}
.doc-slot__check-input:not(:disabled):hover ~ .doc-slot__check-box{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-pale)}
.doc-slot__check-input:checked ~ .doc-slot__check-box{background:var(--c-primary);border-color:var(--c-primary)}
.doc-slot__check-input:checked ~ .doc-slot__check-box svg{opacity:1}
.doc-slot__check-input:disabled ~ .doc-slot__check-box{opacity:.45;background:var(--c-surface-2);border-style:dashed}

/* ── Document instance (one specific document within a slot) ─────────── */
.doc-instance{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--c-border)}
.doc-instance:last-of-type{border-bottom:none}
.doc-instance__info{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.doc-instance__no{font-weight:600;color:var(--c-text);font-size:.82rem}
.doc-instance__expiry{color:var(--c-text-muted);font-size:.73rem}
.doc-instance__expiry--warn{color:var(--c-warning)}
.doc-instance__lock{width:12px;height:12px;color:var(--c-success);flex-shrink:0}
.doc-instance__actions{display:flex;align-items:center;gap:5px;flex-shrink:0}

/* Use-btn disabled state — enabled by JS after View click */
.doc-use-btn:disabled{opacity:.4;cursor:not-allowed}
.doc-use-btn:disabled:hover{background:var(--c-primary-ghost);color:var(--c-primary)}

/* Upload instructions block inside modal */
.doc-upload-instructions{padding:10px 12px;background:var(--c-info-bg,#EFF6FF);border-radius:var(--r-sm);margin-bottom:4px}
.doc-upload-instructions__text{font-size:.83rem;color:var(--c-info,#0E5067);margin:0}

/* Shared selected-file feedback for native file inputs outside the dropzone. */
.file-feedback{margin-top:6px;padding:7px 10px;border:1px dashed var(--c-border);border-radius:var(--r-sm);background:var(--c-surface-2);color:var(--c-text-muted);font-size:.78rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-feedback.has-file{border-style:solid;border-color:color-mix(in srgb,var(--c-success) 42%,var(--c-border));background:color-mix(in srgb,var(--c-success) 7%,var(--c-surface));color:var(--c-success)}
input[type=file].form-control.has-file{border-color:color-mix(in srgb,var(--c-success) 45%,var(--c-border));background:color-mix(in srgb,var(--c-success) 5%,var(--c-surface))}

/* ── Dropzone (drag-and-drop file upload) ─────────────────────────────── */
.dropzone{position:relative;border:2px dashed var(--c-border-strong);border-radius:var(--r-md);background:var(--c-surface-2);padding:28px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--c-primary);background:var(--c-primary-ghost)}
.dropzone.is-dragging{border-color:var(--c-primary);background:var(--c-primary-pale);transform:scale(1.005)}
.dropzone__input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dropzone__placeholder{display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.dropzone.is-selected .dropzone__placeholder{display:none}
.dropzone__icon{width:36px;height:36px;color:var(--c-primary);margin-bottom:6px}
.dropzone__primary{font-weight:600;font-size:.95rem;color:var(--c-text)}
.dropzone__secondary{font-size:.85rem;color:var(--c-text-muted)}
.dropzone__browse-link{color:var(--c-primary);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.dropzone__hint{font-size:.72rem;color:var(--c-text-light);margin-top:6px}
.dropzone__selected{display:none;align-items:center;gap:14px;padding:6px 4px;text-align:left}
.dropzone.is-selected{border-style:solid;border-color:color-mix(in srgb,var(--c-success) 40%,var(--c-border));background:color-mix(in srgb,var(--c-success) 6%,var(--c-surface));padding:14px 16px;cursor:default}
.dropzone.is-selected .dropzone__input{cursor:default;pointer-events:none}
.dropzone.is-selected .dropzone__selected{display:flex}
.dropzone__file-thumb{flex-shrink:0;width:48px;height:48px;border-radius:var(--r-sm);background:var(--c-surface);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;color:var(--c-primary);overflow:hidden}
.dropzone__file-thumb svg{width:24px;height:24px}
.dropzone__file-image{display:none;width:100%;height:100%;object-fit:cover}
.dropzone--image .dropzone__file-thumb svg{display:none}
.dropzone--image .dropzone__file-image{display:block}
.dropzone__file-info{flex:1;min-width:0}
.dropzone__file-name{font-weight:500;color:var(--c-text);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropzone__file-size{font-size:.75rem;color:var(--c-text-muted);margin-top:2px}
.dropzone__clear{position:relative;z-index:1;background:var(--c-surface);border:1px solid var(--c-border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-text-muted);flex-shrink:0;transition:all .12s;pointer-events:all}
.dropzone__clear svg{width:14px;height:14px}
.dropzone__clear:hover{background:var(--c-danger-bg);color:var(--c-danger);border-color:var(--c-danger)}

/* Doc info modal (admin verify) */
.doc-info-grid{display:grid;gap:0;border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden}
.doc-info-row{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid var(--c-border)}
.doc-info-row:last-child{border-bottom:none}
.doc-info-row__label{padding:9px 12px;background:var(--c-surface-2);font-size:.75rem;font-weight:600;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.05em}
.doc-info-row__value{padding:9px 12px;font-size:.88rem;color:var(--c-text)}

/* Booking group rows on the tour-travellers table */
/* Booking accordion row — distinct band so the start/end of each booking is obvious */
.bkg-group-row > td{
    background:color-mix(in srgb,var(--c-surface-2) 55%,var(--c-primary-ghost));
    padding:10px 14px 10px 18px !important;
    border-top:2px solid var(--c-border-strong) !important;
    border-bottom:1px solid var(--c-border-strong) !important;
    cursor:pointer;position:relative;font-size:.78rem;transition:background .12s
}
.bkg-group-row:hover > td{background:color-mix(in srgb,var(--c-surface-2) 35%,var(--c-primary-pale))}
.bkg-group-row > td::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--bkg-accent,var(--c-text-light))}
/* First booking accordion in the table doesn't need the extra top divider */
.bkg-group-row:first-of-type > td{border-top-width:1px !important}

/* ── Travel-detail trigger (per-traveller (+) icon in tour > travellers) ── */
.td-trigger{display:inline-flex;align-items:center;justify-content:center;position:relative;width:28px;height:28px;padding:0;border:1px solid var(--c-border);border-radius:50%;background:var(--c-surface);color:var(--c-text-muted);cursor:pointer;transition:all .12s}
.td-trigger:hover{border-color:var(--c-primary);color:var(--c-primary);background:var(--c-primary-ghost)}
.td-trigger svg{width:14px;height:14px}
.td-trigger--set{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.td-trigger--set:hover{background:var(--c-primary-dk,var(--c-primary));color:#fff}
.td-trigger__count{position:absolute;top:-4px;right:-4px;display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--c-warning);color:#fff;font-size:.62rem;font-weight:700;line-height:1}

/* ── Travel-detail card (per-traveller blob view in booking detail) ── */
.td-card{border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);margin-bottom:12px;overflow:hidden}
.td-card__head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--c-border);background:var(--c-surface-2)}
.td-card__avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--c-primary-ghost);color:var(--c-primary);font-size:.75rem;font-weight:600;flex-shrink:0}
.td-card__name{flex:1;min-width:0;font-weight:600;color:var(--c-text);font-size:.92rem;display:flex;flex-direction:column;gap:2px}
.td-card__meta{font-size:.72rem;color:var(--c-text-muted);font-weight:400}
.td-card__edit{flex-shrink:0}
.td-card__body{padding:12px 14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.td-card__block-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-muted);font-weight:600;margin-bottom:3px}
.td-card__block-text{font-size:.85rem;color:var(--c-text);line-height:1.45;white-space:pre-wrap;word-break:break-word}
.td-card__docs{display:flex;flex-direction:column;gap:6px}
.td-card__doc{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface-2);color:var(--c-primary);font-size:.78rem;text-decoration:none;width:fit-content}
.td-card__doc:hover{background:var(--c-primary-ghost);text-decoration:underline}
.td-card__doc svg{width:14px;height:14px}
.td-card__empty{padding:14px;color:var(--c-text-muted);font-size:.82rem;font-style:italic}

/* ── Travel-detail modal customisations ── */
.td-modal{max-width:680px}
.td-modal__body{display:flex;flex-direction:column;gap:10px}
.td-modal__footer{flex-direction:column;align-items:stretch;gap:10px}
.td-modal__copy{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--c-border);flex-wrap:wrap}
.td-modal__copy-label{font-size:.78rem;color:var(--c-text-muted);font-weight:500;margin-right:4px}
.td-modal__actions{display:flex;justify-content:flex-end;gap:8px}
.modal__subtitle{font-size:.78rem;color:var(--c-text-muted);margin:2px 0 0}
.td-disclosure{border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);overflow:hidden}
.td-disclosure summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;cursor:pointer;color:var(--c-text);font-size:.86rem;font-weight:600}
.td-disclosure summary::-webkit-details-marker{display:none}
.td-disclosure summary svg{width:16px;height:16px;color:var(--c-text-muted);transition:transform .16s;flex-shrink:0}
.td-disclosure[open] summary{border-bottom:1px solid var(--c-border);background:var(--c-surface-2)}
.td-disclosure[open] summary svg{transform:rotate(180deg)}
.td-disclosure textarea{border:0;border-radius:0;box-shadow:none;resize:vertical}
.td-disclosure textarea:focus{box-shadow:inset 0 0 0 1px var(--c-primary)}

/* Docs section inside the travel-detail modal */
.td-docs{padding:12px;border:1px solid var(--c-border);border-radius:var(--r-md);background:linear-gradient(180deg,var(--c-surface) 0%,color-mix(in srgb,var(--c-bg) 45%,var(--c-surface)) 100%);margin-top:0}
.td-docs .form-label{margin-bottom:3px}
.td-docs .form-hint{margin-bottom:9px;font-size:.76rem}
.td-docs__list{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:6px}
.td-docs__item{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-sm)}
.td-docs__link{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--c-primary);text-decoration:none;font-size:.83rem}
.td-docs__link:hover{text-decoration:underline}
.td-docs__link svg{width:15px;height:15px;flex-shrink:0}
.td-docs__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-docs__meta{font-size:.7rem;color:var(--c-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.td-docs__rm button{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;background:transparent;color:var(--c-text-light);cursor:pointer;border-radius:50%;padding:0}
.td-docs__rm button:hover{background:var(--c-danger-bg);color:var(--c-danger)}
.td-docs__rm svg{width:12px;height:12px}
.td-docs__empty{display:flex;align-items:center;gap:10px;padding:10px;background:color-mix(in srgb,var(--c-surface-2) 78%,var(--c-surface));border:1px dashed var(--c-border);border-radius:var(--r-sm);color:var(--c-text-muted);list-style:none}
.td-docs__empty-icon{width:30px;height:30px;border-radius:50%;background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text-light);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.td-docs__empty-icon svg{width:16px;height:16px}
.td-docs__empty strong{display:block;color:var(--c-text);font-size:.84rem;font-weight:600;font-style:normal}
.td-docs__empty em{display:block;margin-top:1px;color:var(--c-text-muted);font-size:.75rem;font-style:normal;line-height:1.3}
.td-docs__upload-form{display:grid;grid-template-columns:170px minmax(0,1fr) 88px;align-items:center;gap:8px;padding:8px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-sm);box-shadow:0 1px 2px rgba(17,46,30,.04)}
.td-docs__file-label{position:relative;display:inline-flex;align-items:center;cursor:pointer;min-width:0}
.td-docs__file-label input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.td-docs__file-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:36px;padding:8px 12px;border:1px dashed color-mix(in srgb,var(--c-primary) 55%,var(--c-border));border-radius:var(--r-sm);color:var(--c-primary);font-size:.8rem;font-weight:600;background:var(--c-primary-ghost);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-docs__file-cta svg{width:13px;height:13px;flex-shrink:0}
.td-docs__file-label:hover .td-docs__file-cta{background:var(--c-primary-ghost)}
.td-docs__file-label.has-file .td-docs__file-cta{
    background:color-mix(in srgb,var(--c-success) 7%,var(--c-surface));border-style:solid;border-color:color-mix(in srgb,var(--c-success) 45%,var(--c-border));color:var(--c-success);font-weight:600;
}
.td-docs__label-in{min-width:0;font-size:.82rem;padding:8px 10px;height:36px}
.td-docs__upload-form .btn{height:36px;width:100%;justify-content:center}
@media(max-width:720px){.td-docs{padding:12px}.td-docs__upload-form{grid-template-columns:1fr}.td-docs__upload-form .btn{width:100%;justify-content:center}}
.bkg-group-row__inner{display:flex;align-items:center;gap:14px;width:100%}
.bkg-group-row__chevron{width:14px;height:14px;color:var(--c-text-muted);transition:transform .18s;flex-shrink:0}
.bkg-group-row.is-collapsed .bkg-group-row__chevron{transform:rotate(-90deg)}
.bkg-group-row__ref{font-weight:600;color:var(--c-text);letter-spacing:.02em}
.bkg-group-row__meta{color:var(--c-text-muted)}
.bkg-group-row__meta strong{color:var(--c-text);font-weight:500}
.bkg-group-row__status{margin-left:auto;padding-right:6px}

/* Traveller rows under a booking group — collapse hidden state only */
.trav-row-group.is-hidden{display:none}

/* Action button styled to match a .seg control's height/border */
.seg-action{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;font-size:.83rem;font-weight:500;color:var(--c-text);background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:10px;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}
.seg-action:hover{background:var(--c-surface);border-color:var(--c-border-strong);color:var(--c-text)}
.seg-action svg{flex-shrink:0}

/* ── Download dropdown (native <details>) ─────────────────────────────
   Consolidates Export-to-Excel / Download-docs / Iraq-pack into one menu.
   Zero JS — uses <details>/<summary>; the summary is styled as a .seg-action. */
.dl-dd{position:relative;display:inline-block}
.dl-dd > summary{list-style:none;user-select:none}
.dl-dd > summary::-webkit-details-marker{display:none}
.dl-dd__chev{width:13px;height:13px;transition:transform .15s}
.dl-dd[open] > summary .dl-dd__chev{transform:rotate(180deg)}
.dl-dd__menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:40;
  min-width:248px;padding:6px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-md);box-shadow:var(--sh-lg,0 10px 30px rgba(0,0,0,.12));
}
.dl-dd__item{
  display:block;padding:9px 12px;border-radius:var(--r-sm);
  text-decoration:none;color:var(--c-text);font-size:.86rem;font-weight:600;
  transition:background .12s;
}
.dl-dd__item:hover{background:var(--c-primary-ghost)}
.dl-dd__item .dl-dd__sub{display:block;font-size:.72rem;font-weight:400;color:var(--c-text-muted);margin-top:1px}
.dl-dd__item--accent{color:var(--c-primary)}
.dl-dd__item--accent:hover{background:var(--c-primary-pale)}

/* Per-traveller verified-doc icon pills */
.doc-icons{display:inline-flex;gap:4px;flex-wrap:wrap;align-items:center}
.doc-icon-pill{display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border-radius:5px;background:color-mix(in srgb,var(--c-success) 14%,var(--c-surface));color:var(--c-success);border:1px solid color-mix(in srgb,var(--c-success) 30%,var(--c-border));font-size:.65rem;font-weight:700;letter-spacing:.02em;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.doc-icon-pill:hover{transform:translateY(-1px);box-shadow:0 2px 6px color-mix(in srgb, var(--c-success) 28%, transparent)}

/* Pill-style inline status selector */
.status-pill{position:relative;display:inline-flex;align-items:center;gap:2px;cursor:pointer;font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.04em;user-select:none;transition:transform .12s,box-shadow .12s}
.status-pill:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(17,46,30,.1)}
.status-pill.is-open{box-shadow:0 4px 14px rgba(17,46,30,.15)}
.status-pill__menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:6px;display:flex;flex-direction:column;gap:4px;box-shadow:0 6px 18px rgba(17,46,30,.12);z-index:50;min-width:110px;animation:status-pill-open .15s ease}
@keyframes status-pill-open{from{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.status-pill__option{cursor:pointer;border:none;text-align:center;font-size:.7rem;padding:4px 10px}
.status-pill__option:hover{filter:brightness(.95)}
.status-pill__option.is-current{outline:2px solid currentColor;outline-offset:1px}

/* Legend bar — shown atop every docs page */
.doc-legend{display:flex;align-items:center;gap:18px;padding:10px 14px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);margin-bottom:18px;flex-wrap:wrap;font-size:.78rem;color:var(--c-text-muted)}
.doc-legend--compact{margin-bottom:0;flex:1;min-width:0}
.doc-legend__item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* Doc info popup (formerly modal-doc-info) — polished smaller dialog */
.doc-popup{max-width:520px;width:92vw}
.doc-popup .modal__header{padding:14px 18px;border-bottom:1px solid var(--c-border)}
.doc-popup .modal__title{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:8px}
.doc-popup .modal__body{padding:0;display:flex;flex-direction:column}

.doc-popup__hero{position:relative;background:var(--c-surface-2);min-height:120px;max-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in;transition:background .15s}
.doc-popup__hero:hover{background:var(--c-primary-ghost)}
.doc-popup__hero img{max-width:100%;max-height:280px;object-fit:contain;display:block}
.doc-popup__hero-pdf{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px;color:var(--c-primary)}
.doc-popup__hero-pdf svg{width:48px;height:48px}
.doc-popup__hero-pdf-text{font-size:.85rem;color:var(--c-text-muted);font-weight:500}
.doc-popup__hero-zoom{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:white;padding:4px 8px;border-radius:4px;font-size:.7rem;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s}
.doc-popup__hero-zoom svg{width:11px;height:11px}
.doc-popup__hero:hover .doc-popup__hero-zoom{opacity:1}

.doc-popup__info{padding:16px 20px;display:grid;grid-template-columns:90px 1fr;gap:8px 14px;font-size:.85rem}
.doc-popup__info dt{margin:0;color:var(--c-text-muted);font-size:.78rem;font-weight:500}
.doc-popup__info dd{margin:0;color:var(--c-text);font-weight:500}
.doc-popup__info dd .badge{margin-left:0}

.doc-popup__reject-note{margin:0 20px 14px;padding:10px 12px;background:var(--c-danger-bg);color:var(--c-danger);border-radius:var(--r-sm);font-size:.82rem}
.doc-popup__reject-note strong{font-weight:600}

.doc-popup__meta{padding:0 20px 14px;font-size:.74rem;color:var(--c-text-muted);line-height:1.55}

.doc-popup .modal__footer{padding:12px 18px;border-top:1px solid var(--c-border);background:var(--c-surface)}

/* Compact info list in verify-admin doc cards */
.doc-info-list{margin:0;display:flex;flex-direction:column;gap:3px}
.doc-info-list__row{display:grid;grid-template-columns:78px 1fr;gap:6px;align-items:baseline;font-size:.82rem}
.doc-info-list__row dt{margin:0;font-size:.7rem;font-weight:500;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.04em}
.doc-info-list__row dd{margin:0;color:var(--c-text);font-weight:500}
.doc-info-list__row--meta{font-size:.74rem}
.doc-info-list__row--meta dd{color:var(--c-text-muted);font-weight:400}

/* Inline upload panel (replaces modal) */
.upload-panel{grid-column:1/-1;margin-top:6px;border:1.5px solid var(--c-primary);border-radius:var(--r-md);background:var(--c-surface);box-shadow:0 4px 16px rgba(29,102,68,.08);overflow:hidden;animation:upload-panel-slide .25s ease}
.upload-panel[hidden]{display:none}
@keyframes upload-panel-slide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.upload-panel__head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--c-border);background:var(--c-primary-ghost)}
.upload-panel__title{margin:0;font-size:1rem;font-weight:600;color:var(--c-primary)}
.upload-panel__close{background:none;border:none;cursor:pointer;color:var(--c-text-muted);padding:4px;border-radius:var(--r-sm);display:flex;transition:background .12s,color .12s}
.upload-panel__close:hover{background:var(--c-surface-2);color:var(--c-text)}
.upload-panel__close svg{width:18px;height:18px}
.upload-panel__form{padding:16px;display:flex;flex-direction:column;gap:12px}
.upload-panel__divider{margin:6px 0 2px;font-size:.72rem;font-weight:600;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.06em}
.upload-panel__actions{display:flex;justify-content:flex-end;gap:8px;padding-top:8px;border-top:1px solid var(--c-border)}

/* ── Refund status card ────────────────────────────────────────── */
.refund-status-card{margin-bottom:16px}
.refund-status-card__body{padding:0}
.refund-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:14px 18px;border-bottom:1px solid var(--c-border)}
.refund-row:last-child{border-bottom:0}
.refund-row--pending{background:linear-gradient(90deg,#fff8e1 0%,transparent 60%)}
.refund-row--processed{background:linear-gradient(90deg,var(--c-success-bg,#e7f5ec) 0%,transparent 60%)}
.refund-row--cancelled{background:transparent;opacity:.72}
.refund-row__main{flex:1;min-width:0}
.refund-row__line1{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.refund-row__amt{font-weight:600;color:var(--c-text);font-size:1rem}
.refund-row__ref{font-family:ui-monospace,SFMono-Regular,monospace;font-size:.7rem;color:var(--c-text-muted);background:var(--c-surface-2);padding:2px 6px;border-radius:var(--r-sm)}
.refund-row__line2{font-size:.78rem;color:var(--c-text-muted);line-height:1.5}
.refund-row__reason{margin-top:6px;font-size:.78rem;color:var(--c-text-muted)}
.refund-row__reason strong{color:var(--c-text);font-weight:600}
.refund-row__meta{flex-shrink:0;text-align:right;font-size:.74rem;color:var(--c-text-muted);line-height:1.7;min-width:170px}
.refund-row__meta-lbl{display:inline-block;color:var(--c-text-faint,#888);text-transform:uppercase;letter-spacing:.05em;font-size:.66rem;margin-right:4px;font-weight:500}
@media(max-width:640px){.refund-row{flex-direction:column;gap:8px}.refund-row__meta{text-align:left;min-width:0}}

/* ── Scroll-to-top button (injected dynamically by app.js) ─────── */
.scroll-top-btn{position:fixed;bottom:28px;right:24px;width:40px;height:40px;border-radius:var(--r-pill);background:var(--c-primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s ease,transform .22s ease,background .15s ease;z-index:200}
.scroll-top-btn.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top-btn:hover{background:var(--c-primary-dk);box-shadow:0 4px 14px rgba(0,0,0,.22)}
.scroll-top-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px}
.scroll-top-btn svg{width:18px;height:18px;flex-shrink:0}
@media(prefers-reduced-motion:reduce){.scroll-top-btn{transition:opacity .1s ease}}


/* ── Finance period filter (mandatory on every finance page) ──────────────── */
.fin-filter { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(17,46,30,.04); }
.fin-filter--compact { padding: 8px 12px; margin-bottom: 12px; }
.fin-filter__row { display: grid; grid-template-columns: repeat(2, minmax(136px, 160px)) repeat(auto-fit, minmax(150px, 1fr)) auto; gap: 10px; align-items: end; }
.fin-filter__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fin-filter__field--search { min-width: 220px; }
.fin-filter__field label { font-size: .68rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.fin-filter__field input,
.fin-filter__field select { width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: .85rem; font-family: inherit; color: var(--c-text); background: var(--c-surface); box-sizing: border-box; }
.fin-filter__field input:focus-visible,
.fin-filter__field select:focus-visible { outline-offset: 0; }
.fin-filter__actions { display: flex; align-items: end; justify-content: flex-end; }
.fin-filter__presets { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border); }
.fin-filter__presets .btn { min-height: 26px; }
@media (max-width: 900px) {
  .fin-filter__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-filter__field--search,
  .fin-filter__actions { grid-column: 1 / -1; }
  .fin-filter__actions .btn { width: 100%; }
}

/* ── Finance accordion (mirrors inv-accordion, used by CoA + Reports) ─────── */
.fin-accordion { border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 12px; background: var(--c-surface); }
.fin-accordion__header { padding: 14px 20px; background: var(--c-surface-2); display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; gap: 12px; transition: background var(--t-fast); }
.fin-accordion__header:hover { background: var(--c-bg); }
.fin-accordion__title { font-weight: 600; font-size: .95rem; color: var(--c-primary-dk); display: flex; align-items: center; gap: 10px; }
.fin-accordion__title small { font-weight: 400; color: var(--c-text-muted); font-size: .75rem; }
.fin-accordion__meta { font-size: .78rem; color: var(--c-text-muted); display: flex; gap: 16px; font-variant-numeric: tabular-nums; }
.fin-accordion__meta strong { color: var(--c-text); font-weight: 600; }
.fin-accordion__chevron { transition: transform var(--t-fast); color: var(--c-text-muted); width: 18px; height: 18px; flex-shrink: 0; }
.fin-accordion.is-open .fin-accordion__chevron { transform: rotate(180deg); }
.fin-accordion__body { border-top: 1px solid var(--c-border); background: var(--c-surface); display: none; }
.fin-accordion.is-open .fin-accordion__body { display: block; }

/* ── Chart of Accounts table — hierarchical tree-table ──────────────────────
   Visual contract:
     • Page bg = warm ivory (existing site identity)
     • Accordion shell = white card + emerald left stripe (warm section identity)
     • Table data zone = COOL SLATE (visual rest from warm chrome; "this is data")
     • L2 group rows = slate-100 band + ink-tone left accent + expand chevron
     • L3 sub-ledger = white, medium weight, drillable
     • L4+ deep leaf = white, lighter weight, drillable
     • Drill chevron + hover use ink-blue (cool), not emerald (action color)
   Hierarchy:
     • Two-level expansion: accordion (per type) AND L2 group rows.
     • All collapsed by default. JS persists open state to sessionStorage.
   ─────────────────────────────────────────────────────────────────────── */
.fin-acct-table { width: 100%; border-collapse: collapse; font-size: .85rem; }

.fin-acct-table thead th {
  text-align: left; padding: 9px 14px;
  background: var(--c-slate-100); color: var(--c-slate-800);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  border-bottom: 1px solid var(--c-slate-200);
  position: sticky; top: 0; z-index: 1;
}
.fin-acct-table th.num, .fin-acct-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.fin-acct-table th.act, .fin-acct-table td.act { text-align: center; width: 80px; }
.fin-acct-table th.exp, .fin-acct-table td.exp { width: 28px; padding-left: 8px; padding-right: 0; }

.fin-acct-table tbody td {
  /* All rows share the same vertical metrics — hierarchy is conveyed by
     bg tint + font weight + tree connector, never by row height. */
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--c-slate-100);
  background: var(--c-surface);
  vertical-align: middle;
  transition: background var(--t-fast);
  /* Global no-wrap default: small columns (date, code, status, amount) must
     never break across two lines. Opt-in wrap below for long-text columns. */
  white-space: nowrap;
}
.fin-acct-table tbody tr:last-child td { border-bottom: none; }

/* Long-text cells: keep nowrap + ellipsis so they truncate cleanly rather
   than ever wrapping. The hover/drill panel reveals the full value. */
.fin-acct-table tbody td.cell-truncate {
  overflow: hidden; text-overflow: ellipsis;
  max-width: 0;  /* combined with flexible table layout, ellipsis kicks in */
}

/* ── Hidden descendants (default state when parent is collapsed) ───────── */
.fin-acct-table tr.is-hidden { display: none; }

/* ── Tree connector (file-explorer style) ──────────────────────────────────
   Renders a continuous vertical stem down a column of siblings, with a
   horizontal branch ("L" tail) entering each row at its centre. The last
   sibling's stem stops at row-centre so the line resolves to an L.
   Implementation: two pseudo-elements on the code column.
     • ::before = vertical stem (top→bottom for middle siblings;
                                  top→50% for last sibling).
     • ::after  = horizontal branch at row-centre.
   Indent step is per level (L3/L4/L5) — different left-offsets so deeper
   sub-accounts indent further than their parents.
   Hidden on L2 (group anchor) rows.
   ─────────────────────────────────────────────────────────────────────── */
.fin-acct-table tr.row-l3 td.tl-col,
.fin-acct-table tr.row-l4 td.tl-col,
.fin-acct-table tr.row-l5 td.tl-col { position: relative; padding-left: 0; }

/* Indent — the inner content (.tl-inner) is pushed right past the connector */
.fin-acct-table tr.row-l3 td.tl-col .tl-inner { padding-left: 36px; }
.fin-acct-table tr.row-l4 td.tl-col .tl-inner { padding-left: 54px; }
.fin-acct-table tr.row-l5 td.tl-col .tl-inner { padding-left: 72px; }

/* Vertical stem */
.fin-acct-table tr.row-l3 td.tl-col::before,
.fin-acct-table tr.row-l4 td.tl-col::before,
.fin-acct-table tr.row-l5 td.tl-col::before {
  content: ''; position: absolute;
  top: 0; bottom: 0;
  width: 1px; background: var(--c-slate-300);
}
.fin-acct-table tr.row-l3 td.tl-col::before { left: 22px; }
.fin-acct-table tr.row-l4 td.tl-col::before { left: 40px; }
.fin-acct-table tr.row-l5 td.tl-col::before { left: 58px; }

/* Last sibling: stem terminates at row centre, forming the L */
.fin-acct-table tr.is-last-sibling td.tl-col::before { bottom: 50%; }

/* Horizontal branch into the row */
.fin-acct-table tr.row-l3 td.tl-col::after,
.fin-acct-table tr.row-l4 td.tl-col::after,
.fin-acct-table tr.row-l5 td.tl-col::after {
  content: ''; position: absolute;
  top: 50%; height: 1px; width: 9px;
  background: var(--c-slate-300);
}
.fin-acct-table tr.row-l3 td.tl-col::after { left: 22px; }
.fin-acct-table tr.row-l4 td.tl-col::after { left: 40px; }
.fin-acct-table tr.row-l5 td.tl-col::after { left: 58px; }

/* Ancestor continuation: when an L4 row's L3 ancestor still has more siblings
   below, the L3-level stem must continue down through THIS row. Same for L5
   passing through L4 + L3. Driven by data-has-l3-stem / data-has-l4-stem
   attributes set in the template. */
.fin-acct-table tr[data-has-l3-stem="1"] td.tl-col {
  background-image: linear-gradient(var(--c-slate-300), var(--c-slate-300));
  background-size: 1px 100%;
  background-position: 22px 0;
  background-repeat: no-repeat;
}
.fin-acct-table tr[data-has-l4-stem="1"] td.tl-col {
  background-image: linear-gradient(var(--c-slate-300), var(--c-slate-300)),
                    linear-gradient(var(--c-slate-300), var(--c-slate-300));
  background-size: 1px 100%, 1px 100%;
  background-position: 22px 0, 40px 0;
  background-repeat: no-repeat;
}
/* L3 + L4 ancestor stems both continuing through an L5 row */
.fin-acct-table tr[data-has-l3-stem="1"][data-has-l4-stem="1"] td.tl-col {
  background-image: linear-gradient(var(--c-slate-300), var(--c-slate-300)),
                    linear-gradient(var(--c-slate-300), var(--c-slate-300));
  background-size: 1px 100%, 1px 100%;
  background-position: 22px 0, 40px 0;
  background-repeat: no-repeat;
}

/* Stronger hover: connector turns ink-blue when row is interactive + hovered */
.fin-acct-table tr.is-drillable:hover td.tl-col::before,
.fin-acct-table tr.is-drillable:hover td.tl-col::after { background: var(--c-ink-lite); }

/* ── Expand-toggle chevron on parent rows ──────────────────────────────── */
.fin-acct-table .row-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--c-slate-400); cursor: pointer;
  transition: transform var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.fin-acct-table .row-toggle:hover { color: var(--c-ink); background: var(--c-ink-ghost); }
.fin-acct-table .row-toggle svg { width: 11px; height: 11px; }
.fin-acct-table tr.is-expanded .row-toggle { transform: rotate(90deg); color: var(--c-ink); }
.fin-acct-table .row-toggle--placeholder { visibility: hidden; }

/* ── Row weight by hierarchy level ─────────────────────────────────────── */
/* L2 — group header band (same height as data rows; weight comes from bg + font) */
.fin-acct-table tr.row-l2 td {
  background: var(--c-slate-50);
  font-weight: 600; color: var(--c-slate-800);
  border-bottom: 1px solid var(--c-slate-200);
}
.fin-acct-table tr.row-l2 td.exp { background: var(--c-slate-100); }
.fin-acct-table tr.row-l2 td:nth-child(2) { box-shadow: inset 3px 0 0 var(--c-ink-lite); padding-left: 16px; }
.fin-acct-table tr.row-l2.is-expanded td { border-bottom-color: var(--c-slate-100); }
.fin-acct-table tr.row-l2 .acct-code { color: var(--c-ink); font-weight: 600; font-size: .74rem; }
.fin-acct-table tr.row-l2 td.num     { color: var(--c-ink); font-weight: 700; font-size: .86rem; }
.fin-acct-table tr.row-l2 .roll-tag  { color: var(--c-ink-lite); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; font-weight: 700; vertical-align: 1px; }
/* Hover tints use background-color (not shorthand) so background-image
   ancestor stems on .tl-col stay drawn through the dim overlay. */
.fin-acct-table tr.row-l2:hover td:not(.exp) { background-color: var(--c-slate-100); }

/* L3 — sub-ledger / standard row */
.fin-acct-table tr.row-l3 td { font-weight: 500; color: var(--c-text); }
.fin-acct-table tr.row-l3 .acct-code { color: var(--c-slate-600); }

/* L4+ — deep leaf */
.fin-acct-table tr.row-l4 td,
.fin-acct-table tr.row-l5 td { font-weight: 400; color: var(--c-text-2); }
.fin-acct-table tr.row-l4 .acct-code,
.fin-acct-table tr.row-l5 .acct-code { color: var(--c-slate-400); }

/* ── Drillable affordance: cool hover bg + ink chevron on hover ───────── */
.fin-acct-table tr.is-drillable { cursor: pointer; }
.fin-acct-table tr.is-drillable:hover td:not(.exp) { background-color: var(--c-ink-ghost); }
.fin-acct-table tr.is-drillable:focus-visible { outline: 0; }
.fin-acct-table tr.is-drillable:focus-visible td:not(.exp) { background-color: var(--c-ink-pale); box-shadow: inset 0 0 0 1px var(--c-ink-lite); }

/* Chevron in the rightmost numeric cell. Cool ink to read as "drill into data". */
.fin-acct-table tr.is-drillable td.num { position: relative; padding-right: 28px; }
.fin-acct-table tr.is-drillable td.num::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  width: 10px; height: 10px; transform: translateY(-50%) translateX(-4px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237B8699'><path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat; background-position: right center; background-size: 10px;
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast);
}
.fin-acct-table tr.is-drillable:hover td.num::after,
.fin-acct-table tr.is-drillable:focus-visible td.num::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231E3A5F'><path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'/></svg>");
}

/* ── Shared bits ───────────────────────────────────────────────────────── */
.fin-acct-table .acct-code { font-family: ui-monospace, monospace; color: var(--c-slate-400); font-size: .76rem; }
.fin-acct-table .acct-role { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-gold-pale); color: var(--c-gold-dk); font-size: .64rem; font-family: ui-monospace, monospace; margin-left: 8px; letter-spacing: .02em; line-height: 1.3; }
.fin-acct-table .acct-indent { display: none; /* indent is now driven by the tree-line connector */ }
.fin-acct-table .icon-btn { background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px; cursor: pointer; color: var(--c-slate-400); display: inline-flex; vertical-align: middle; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.fin-acct-table .icon-btn:hover { color: var(--c-ink); border-color: var(--c-slate-200); background: var(--c-surface); }
.fin-acct-table .icon-btn svg { width: 14px; height: 14px; }
.fin-acct-table .row-inactive { opacity: .55; }
.fin-acct-table .row-inactive .acct-code, .fin-acct-table .row-inactive td.num { color: var(--c-slate-300); }
.fin-acct-table .parent-count { font-size: .68rem; color: var(--c-slate-400); font-weight: 500; }
.fin-acct-table .postable-tag { display: inline-flex; align-items: center; font-size: .64rem; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-success-bg); color: var(--c-success); font-weight: 600; letter-spacing: .02em; line-height: 1.3; }

/* ── Accordion shell — warm emerald identity (section card) ───────────── */
.fin-accordion {
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: 0 1px 2px rgba(17,46,30,.03);
  overflow: hidden;
  margin-bottom: 12px;
}
.fin-accordion__header {
  position: relative;
  padding: 12px 16px 12px 22px;
  background: var(--c-surface);
  cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: background var(--t-fast);
}
.fin-accordion__header:hover { background: var(--c-slate-50); }
.fin-accordion__header::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 4px; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--c-primary);
}
.fin-accordion.is-open .fin-accordion__header { background: var(--c-slate-50); border-bottom: 1px solid var(--c-slate-200); }
.fin-accordion__title {
  display: flex; align-items: center; gap: 10px;
  color: var(--c-slate-800); font-weight: 700; font-size: .98rem; letter-spacing: .01em;
}
.fin-accordion__title small { color: var(--c-slate-400); font-weight: 500; font-size: .72rem; }
.fin-accordion__meta { font-size: .76rem; color: var(--c-slate-600); display: flex; gap: 16px; font-variant-numeric: tabular-nums; }
.fin-accordion__meta strong { color: var(--c-ink); font-weight: 700; }
.fin-accordion__chevron { transition: transform var(--t-fast); color: var(--c-slate-400); width: 16px; height: 16px; flex-shrink: 0; }
.fin-accordion.is-open .fin-accordion__chevron { transform: rotate(180deg); color: var(--c-ink); }
.fin-accordion__body { display: none; background: var(--c-surface); }
.fin-accordion.is-open .fin-accordion__body { display: block; }

/* ── Page-level expand-all / collapse-all toolbar ─────────────────────── */
.fin-tree-toolbar {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--c-surface); border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md); padding: 3px;
}
.fin-tree-toolbar button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: .75rem; font-weight: 500;
  color: var(--c-slate-600); background: transparent; border: 0;
  border-radius: var(--r-sm); cursor: pointer;
  font-family: inherit; transition: background var(--t-fast), color var(--t-fast);
}
.fin-tree-toolbar button:hover { background: var(--c-slate-100); color: var(--c-ink); }
.fin-tree-toolbar button svg { width: 11px; height: 11px; }
.fin-tree-toolbar button + button { border-left: 1px solid var(--c-slate-100); }

/* ── Journal entry form ────────────────────────────────────────────────────
   Cool-slate palette to match the rest of the finance UI. Identity band is
   a slate card with ink-blue eyebrow + ink stat strip; lines table uses the
   same slate header band + ink focus rings as the Journals list; totals
   foot uses ink for emphasis with semantic colors for balanced/unbalanced.
   ─────────────────────────────────────────────────────────────────────── */
.je-identity {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px; margin-bottom: 16px;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  background: var(--c-slate-50);
  position: relative;
}
.je-identity::before {
  /* slim ink accent stripe on the left edge, mirroring the accordion identity */
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-ink);
}
.je-identity > div:first-child { display: grid; gap: 2px; color: var(--c-slate-600); font-size: .84rem; }
.je-identity strong { color: var(--c-slate-800); font-size: 1rem; font-weight: 700; }
.je-identity__kicker { color: var(--c-ink); text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; font-weight: 700; }
.je-identity__metrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.je-identity__metrics span {
  display: inline-flex; gap: 6px; align-items: center; min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--c-slate-200); border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-slate-600);
  font-size: .72rem; letter-spacing: .01em;
}
.je-identity__metrics strong { font-size: .72rem; color: var(--c-ink); font-weight: 700; }

.je-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 16px; }
.je-grid .form-group { margin-bottom: 0; }
.je-grid--full { grid-column: 1 / -1; }

/* The form-card around the JE — slate border + soft shadow to match the
   other finance surfaces. We rely on .card existing in theme; we just
   override its accent so it doesn't read as warm. */
.je-card {
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(17,46,30,.03);
}
.je-card h3 {
  margin: 0 0 4px 0; font-size: 1rem; color: var(--c-slate-800);
  font-weight: 700; letter-spacing: -.01em;
}
.je-card p.hint {
  margin: 0 0 14px 0; color: var(--c-slate-600); font-size: .82rem;
}
.je-card p.hint strong { color: var(--c-ink); font-weight: 700; }

.je-lines-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--c-slate-200); border-radius: var(--r-md); }
.je-lines { width: 100%; border-collapse: collapse; font-size: .85rem; }
.je-lines thead th {
  text-align: left; padding: 9px 12px;
  background: var(--c-slate-100); color: var(--c-slate-800);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  border-bottom: 1px solid var(--c-slate-200);
  white-space: nowrap;
}
.je-lines th.num, .je-lines td.num { text-align: right; }
.je-lines tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-slate-100);
  vertical-align: top;
  background: var(--c-surface);
  white-space: nowrap;
}
.je-lines tbody tr:last-child td { border-bottom: none; }
.je-lines tbody tr:hover td { background-color: var(--c-ink-ghost); }
.je-lines input, .je-lines select {
  width: 100%; padding: 7px 9px;
  border: 1px solid var(--c-slate-200); border-radius: var(--r-sm);
  font-size: .85rem; font-family: inherit;
  background: var(--c-surface); color: var(--c-text);
  box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.je-lines input:focus, .je-lines select:focus {
  outline: 0; border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
}
.je-lines input[type=number] {
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  text-align: right; font-weight: 600;
}
.je-lines input[type=number]:not([value=""]):not([value="0"]):not([value="0.000"]) {
  color: var(--c-ink);
}
.je-lines .acct-cell { position: relative; }
.je-lines .acct-opts {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: 240px; overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200); border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 12px 28px -12px rgba(17,46,30,.18), 0 4px 10px -4px rgba(17,46,30,.08);
  z-index: 50; display: none;
}
.je-lines .acct-opts.is-open { display: block; }
.je-lines .acct-opt {
  padding: 8px 12px; cursor: pointer; font-size: .85rem;
  border-bottom: 1px solid var(--c-slate-100);
  display: flex; align-items: center; gap: 8px;
  transition: background var(--t-fast);
}
.je-lines .acct-opt:last-child { border-bottom: none; }
.je-lines .acct-opt:hover { background: var(--c-ink-ghost); }
.je-lines .acct-opt.is-selected { background: var(--c-ink-pale); color: var(--c-ink); font-weight: 600; }
.je-lines .acct-opt .code {
  font-family: ui-monospace, monospace; color: var(--c-ink);
  font-weight: 600; font-size: .76rem; flex-shrink: 0;
}
.je-line-tags {
  display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 4px; margin-top: 4px;
}
.je-line-tags select { font-size: .74rem; padding: 5px 7px; color: var(--c-slate-600); }

.je-row-remove {
  background: transparent; border: none; cursor: pointer;
  color: var(--c-slate-400); padding: 6px; border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.je-row-remove:hover { color: var(--c-danger); background: var(--c-danger-bg); }
.je-row-remove svg { width: 14px; height: 14px; display: block; }

/* Add-line + auto-balance bar between the lines table and totals */
.je-line-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; gap: 8px;
}
.je-line-actions .btn--ghost {
  color: var(--c-ink);
}
.je-line-actions .btn--ghost:hover {
  background: var(--c-ink-ghost);
  color: var(--c-ink-h);
}

.je-totals {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px; margin-top: 16px;
  padding: 12px 18px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  align-items: center;
  font-size: .85rem; color: var(--c-slate-600);
}
.je-totals > div:first-child {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-slate-400);
}
.je-totals strong {
  font-family: ui-monospace, monospace; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; color: var(--c-ink);
  font-weight: 700; margin-left: 6px;
}
.je-totals .balanced { color: var(--c-success); }
.je-totals .unbalanced { color: var(--c-danger); }
.je-totals .balanced strong { color: var(--c-success); }
.je-totals .unbalanced strong { color: var(--c-danger); }

@media (max-width: 960px) {
  .je-identity { align-items: flex-start; flex-direction: column; }
  .je-identity__metrics { justify-content: flex-start; }
  .je-grid { grid-template-columns: 1fr; }
  .je-lines { min-width: 920px; }
  .je-totals { grid-template-columns: 1fr; gap: 6px; }
}

/* ── GL / Trial Balance report table ─────────────────────────────────────
   Three-column financial table: Account / Debit / Credit + drill-chev.
   Sectioned by AcctType (Assets / Liabilities / Equity / Income / Expense),
   with a closing balance row per type and a grand-total footer that should
   always tie to zero. Hover/click an account row → drill panel ledger view.
   ─────────────────────────────────────────────────────────────────────── */
.gl-table {
  width: 100%; border-collapse: collapse; font-size: .85rem;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  overflow: hidden;
}
.gl-table thead th {
  text-align: left; padding: 9px 14px;
  background: var(--c-slate-100); color: var(--c-slate-800);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  border-bottom: 1px solid var(--c-slate-200);
}
.gl-table th.num, .gl-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.gl-table tbody td {
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--c-slate-100);
  background: var(--c-surface);
  vertical-align: middle;
  white-space: nowrap;
  transition: background var(--t-fast);
}
.gl-table tr:last-child td { border-bottom: none; }
.gl-table tr.clickable { cursor: pointer; }
.gl-table tr.clickable:hover td { background-color: var(--c-ink-ghost); }
.gl-table .acct-code { font-family: ui-monospace, monospace; color: var(--c-ink); font-weight: 600; font-size: .78rem; margin-right: 6px; }
.gl-table .acct-name { color: var(--c-text); }
.gl-table .line-count { color: var(--c-slate-400); font-size: .72rem; }
.gl-table tr.clickable td.num { position: relative; padding-right: 28px; }
.gl-table tr.clickable td.num::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  width: 10px; height: 10px; transform: translateY(-50%) translateX(-4px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237B8699'><path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat; background-position: right center; background-size: 10px;
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast);
}
.gl-table tr.clickable:hover td.num:last-of-type::after,
.gl-table tr.clickable:focus-visible td.num:last-of-type::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231E3A5F'><path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'/></svg>");
}

/* Section header row per AcctType */
.gl-table tr.gl-section td {
  background: var(--c-slate-50);
  font-weight: 700; color: var(--c-slate-800);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
  padding-top: 11px; padding-bottom: 11px;
  border-bottom: 1px solid var(--c-slate-200);
  border-top: 1px solid var(--c-slate-200);
  box-shadow: inset 3px 0 0 var(--c-ink-lite);
}
.gl-table tr.gl-section:first-child td { border-top: none; }
.gl-table tr.gl-section td.num { color: var(--c-ink); font-size: .82rem; }

/* Grand-total footer — should always tie if books are balanced */
.gl-table tfoot tr td {
  background: var(--c-slate-100);
  border-top: 2px solid var(--c-ink-lite);
  font-weight: 700; color: var(--c-ink);
  height: 44px;
  font-size: .82rem;
  padding: 0 16px;          /* explicit both sides — was right-only */
}
.gl-table tfoot td.num { font-size: .95rem; padding-right: 16px; }
.gl-table tfoot tr.gl-variance td { background: var(--c-slate-50); border-top: 1px solid var(--c-slate-200); font-weight: 600; }
.gl-table tfoot tr.gl-variance .balanced { color: var(--c-success); }
.gl-table tfoot tr.gl-variance .unbalanced { color: var(--c-danger); }

/* ── Balance Sheet two-column layout + Profit&Loss two-column layout ──── */
.bs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .bs-grid { grid-template-columns: 1fr; } }

.bs-column {
  display: flex; flex-direction: column; min-width: 0;
}
.bs-column__hdr {
  margin: 0 0 8px 0;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-slate-600); font-weight: 700;
  padding: 6px 14px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}
.bs-pnl-row td {
  background: color-mix(in srgb, var(--c-ink) 6%, var(--c-surface)) !important;
  border-top: 1px dashed var(--c-slate-200);
  padding: 10px 18px !important;
}
.bs-pnl-row td.num { color: var(--c-ink); font-weight: 700; }
.bs-grand-total td {
  background: var(--c-ink-pale) !important;
  border-top: 2px solid var(--c-ink) !important;
  color: var(--c-ink) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .03em;       /* tightened from .04em — less crowded */
  font-size: .82rem !important; /* fits "Total Liabilities + Equity" in narrow column */
  height: 50px !important;
  padding: 0 18px !important;   /* explicit breathing room on both sides */
}
.bs-grand-total--loss td { background: var(--c-danger-bg) !important; color: var(--c-danger) !important; border-top-color: var(--c-danger) !important; }

/* P&L headline cards — three KPI tiles above the breakdown */
.pnl-headline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 760px) { .pnl-headline { grid-template-columns: 1fr; } }
.pnl-headline__item {
  padding: 16px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}
.pnl-headline__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-slate-400); font-weight: 700; margin-bottom: 6px;
}
.pnl-headline__value {
  font-family: ui-monospace, monospace;
  font-size: 1.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1.05;
  margin-bottom: 4px;
}
.pnl-headline__value--good { color: var(--c-success); }
.pnl-headline__value--bad  { color: var(--c-danger); }
.pnl-headline__sub { font-size: .72rem; color: var(--c-slate-400); }

/* Status pill at top of the GL tab */
.gl-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--c-success-bg); color: var(--c-success);
  border: 1px solid var(--c-success);
  border-radius: var(--r-md);
  font-size: .82rem; font-weight: 600;
  margin-bottom: 14px;
}
.gl-status--unbalanced { background: var(--c-danger-bg); color: var(--c-danger); border-color: var(--c-danger); }
.gl-status svg { width: 14px; height: 14px; }

/* Report tabs — cool palette. Wraps onto two lines once 8 tabs overflow. */
.report-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: var(--c-surface); border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md); padding: 3px;
  margin-bottom: 18px;
  max-width: 100%;
}
.report-tabs__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: var(--text-sm); font-weight: 500;
  color: var(--c-slate-600); text-decoration: none;
  border-radius: var(--r-sm); cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.report-tabs__item:hover { background: var(--c-slate-50); color: var(--c-ink); text-decoration: none; }
.report-tabs__item.is-active { background: var(--c-ink); color: #fff; font-weight: 600; }

/* ── Cash Flow tab additions ──────────────────────────────────────────────
   Reuses .pnl-headline for the 3 KPI cards (opening / change / closing)
   and .gl-table for the per-cash-account & per-counterpart tables. Adds
   a section header for each activity bucket and inflow/outflow colouring. */
.cf-section__hdr {
  display: flex; align-items: baseline; gap: 12px;
  margin: 20px 0 8px;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-700);
}
.cf-section__sub {
  text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: .76rem;
  color: var(--c-slate-400);
}
.cf-table tbody tr td { padding: 8px 16px; }
.cf-in  { color: var(--c-success); font-weight: 600; }
.cf-out { color: var(--c-danger);  font-weight: 600; }
.cf-table tfoot tr td {
  background: var(--c-slate-50);
  border-top: 1px solid var(--c-slate-200);
  font-weight: 700;
  padding: 10px 16px;
}

.fin-empty--soft {
  border-style: dashed; background: var(--c-surface);
  padding: 18px 22px; margin-bottom: 18px;
}

/* ── AR / AP Aging tabs ──────────────────────────────────────────────────
   4-bucket headline strip (Current / 31-60 / 61-90 / 90+) coloured by age,
   followed by per-bucket grouped tables. */
.aging-headline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .aging-headline { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .aging-headline { grid-template-columns: 1fr; } }
.aging-headline__item {
  padding: 14px 16px;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-slate-300);
}
.aging-headline__item--ok     { border-left-color: var(--c-success); }
.aging-headline__item--warn   { border-left-color: var(--c-gold-dk); }
.aging-headline__item--alert  { border-left-color: var(--c-warning); }
.aging-headline__item--danger { border-left-color: var(--c-danger); }
.aging-headline__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-500); font-weight: 700; margin-bottom: 6px;
}
.aging-headline__value {
  font-family: ui-monospace, monospace;
  font-size: 1.32rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-slate-800);
  line-height: 1.1; margin-bottom: 4px;
}
.aging-headline__sub { font-size: .72rem; color: var(--c-slate-400); }

.aging-overview {
  display: flex; align-items: baseline; gap: 14px;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--c-ink-pale);
  border: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
  border-radius: var(--r-md);
}
.aging-overview__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-ink); font-weight: 700;
}
.aging-overview__value {
  font-family: ui-monospace, monospace;
  font-size: 1.6rem; font-weight: 800;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.aging-overview__sub {
  font-size: .78rem; color: var(--c-slate-500);
  margin-left: auto;
}

.aging-section {
  display: flex; align-items: baseline; gap: 8px;
  margin: 20px 0 6px;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-700);
  padding-left: 10px;
  border-left: 3px solid var(--c-slate-300);
}
.aging-section--current { border-left-color: var(--c-success); }
.aging-section--b1      { border-left-color: var(--c-gold-dk); }
.aging-section--b2      { border-left-color: var(--c-warning); }
.aging-section--b3      { border-left-color: var(--c-danger); }
.aging-section__count {
  font-weight: 400; color: var(--c-slate-400);
  text-transform: none; letter-spacing: 0;
}
.aging-section__total {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--c-slate-800); font-weight: 700;
  text-transform: none; letter-spacing: 0;
}

.aging-table tbody tr td { padding: 10px 14px; }

.ap-note {
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-left: 3px solid var(--c-ink);
  border-radius: var(--r-md);
  font-size: .82rem;
  color: var(--c-slate-600);
  line-height: 1.45;
}
.ap-note strong { color: var(--c-slate-800); }

/* ── Approvals queue ──────────────────────────────────────────────────────
   Cards listing items awaiting a second eye: refunds, scheduled JEs (tour
   revenue recognition), large manual journals. Each card carries entity-type
   pill, amount, context, and approve/reject actions. Uses slate body + ink
   accent + semantic colours for severity.
   ─────────────────────────────────────────────────────────────────────── */
.appr-tabs {
  display: inline-flex; align-items: stretch; gap: 4px;
  background: var(--c-surface); border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md); padding: 3px;
  margin-bottom: var(--sp-4);
}
.appr-tabs__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: var(--text-sm); font-weight: 500;
  color: var(--c-slate-600); background: transparent; border: 0;
  border-radius: var(--r-sm); cursor: pointer; font-family: inherit;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.appr-tabs__item:hover { background: var(--c-slate-50); color: var(--c-ink); }
.appr-tabs__item.is-active { background: var(--c-ink); color: #fff; font-weight: 600; }
.appr-tabs__item.is-active .appr-tabs__count { background: rgba(255,255,255,.18); color: #fff; }
.appr-tabs__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--c-slate-100); color: var(--c-slate-600);
  border-radius: var(--r-pill);
}

.appr-list { display: flex; flex-direction: column; gap: 10px; }

.appr-card {
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-left: 4px solid var(--c-slate-200);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px 18px;
  align-items: start;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.appr-card:hover { box-shadow: 0 2px 8px -2px rgba(17,46,30,.08); }
.appr-card--refund    { border-left-color: var(--c-warning); }
.appr-card--reco      { border-left-color: var(--c-ink); }
.appr-card--je        { border-left-color: var(--c-primary); }
.appr-card--overdue   { border-left-color: var(--c-danger); background: linear-gradient(to right, var(--c-danger-bg) 0, var(--c-surface) 60px); }

.appr-card__main { min-width: 0; }
.appr-card__head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.appr-card__type {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-pill);
  font-family: ui-monospace, monospace; font-size: .64rem;
  font-weight: 700; letter-spacing: .04em;
  background: var(--c-slate-100); color: var(--c-slate-800);
}
.appr-card__type svg { width: 11px; height: 11px; }
.appr-card--refund  .appr-card__type { background: var(--c-warning-bg); color: var(--c-warning); }
.appr-card--reco    .appr-card__type { background: var(--c-ink-pale); color: var(--c-ink); }
.appr-card--je      .appr-card__type { background: var(--c-primary-pale); color: var(--c-primary-dk); }

.appr-card__age {
  margin-left: auto;
  font-size: .7rem; color: var(--c-slate-400);
  font-variant-numeric: tabular-nums;
}
.appr-card__age--urgent { color: var(--c-danger); font-weight: 600; }

.appr-card__title {
  font-size: .98rem; font-weight: 600; color: var(--c-slate-800);
  margin: 0 0 6px 0; line-height: 1.3;
}
.appr-card__title a { color: var(--c-ink); text-decoration: none; }
.appr-card__title a:hover { text-decoration: underline; }

.appr-card__meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: .8rem; color: var(--c-slate-600);
}
.appr-card__meta dt { display: inline; color: var(--c-slate-400); margin-right: 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.appr-card__meta dd { display: inline; margin: 0; color: var(--c-slate-800); font-weight: 500; }
.appr-card__meta .ref { font-family: ui-monospace, monospace; color: var(--c-ink); font-weight: 600; }
.appr-card__meta .amt { font-family: ui-monospace, monospace; color: var(--c-slate-800); font-weight: 700; font-variant-numeric: tabular-nums; }

.appr-card__reason {
  margin-top: 6px;
  font-size: .82rem; color: var(--c-slate-600);
  font-style: italic;
  padding-left: 8px;
  border-left: 2px solid var(--c-slate-200);
}

.appr-card__amount {
  font-family: ui-monospace, monospace;
  font-size: 1.4rem; font-weight: 700;
  color: var(--c-slate-800);
  text-align: right;
  font-variant-numeric: tabular-nums;
  align-self: center;
  white-space: nowrap;
}
.appr-card--refund  .appr-card__amount { color: var(--c-warning); }
.appr-card--reco    .appr-card__amount { color: var(--c-ink); }
.appr-card__amount-curr {
  display: block; font-size: .68rem; color: var(--c-slate-400);
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  margin-top: -2px;
}

.appr-card__actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--c-slate-100);
  justify-content: flex-end;
  flex-wrap: wrap;
}
.appr-card__actions form { display: inline-flex; }
.appr-card__actions .btn { white-space: nowrap; }

/* Empty state for the queue tab */
.appr-empty { padding: var(--sp-8) var(--sp-4); }
.appr-empty svg { color: var(--c-success); }
.appr-empty .fin-empty__headline { color: var(--c-slate-800); }

/* ── Journal list ──────────────────────────────────────────────────────────── */
/* Journals list — uses the same cool-slate language as the CoA table */
.jrn-list {
  width: 100%; border-collapse: collapse; font-size: .85rem;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md); overflow: hidden;
}
.jrn-list thead th {
  text-align: left; padding: 9px 14px;
  background: var(--c-slate-100); color: var(--c-slate-800);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  border-bottom: 1px solid var(--c-slate-200);
}
.jrn-list th.num, .jrn-list td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.jrn-list tbody td {
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--c-slate-100);
  background: var(--c-surface);
  vertical-align: middle;
  transition: background var(--t-fast);
  white-space: nowrap;  /* dates / refs / amounts / status never wrap */
}
/* Narration cell keeps its existing ellipsis treatment */
.jrn-list td.narration { overflow: hidden; text-overflow: ellipsis; }
.jrn-list tr:last-child td { border-bottom: none; }
.jrn-list tr.clickable { cursor: pointer; }
.jrn-list tr.clickable:hover td { background-color: var(--c-ink-ghost); }
.jrn-list tr.clickable:focus-visible { outline: 0; }
.jrn-list tr.clickable:focus-visible td { background-color: var(--c-ink-pale); box-shadow: inset 0 0 0 1px var(--c-ink-lite); }
/* Ref column gets ink-blue emphasis — drillable identity */
.jrn-list .ref { font-family: ui-monospace, monospace; color: var(--c-ink); font-weight: 600; font-size: .82rem; }
.jrn-list .narration { color: var(--c-slate-600); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chevron-on-hover on the rightmost numeric cell (the totals column) */
.jrn-list tr.clickable td.num { position: relative; padding-right: 28px; }
.jrn-list tr.clickable td.num::after {
  content: '';
  position: absolute; right: 10px; top: 50%;
  width: 10px; height: 10px; transform: translateY(-50%) translateX(-4px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237B8699'><path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat; background-position: right center; background-size: 10px;
  opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast);
}
.jrn-list tr.clickable:hover td.num::after,
.jrn-list tr.clickable:focus-visible td.num::after {
  opacity: 1; transform: translateY(-50%) translateX(0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231E3A5F'><path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'/></svg>");
}
/* Type column — muted slate badge instead of grey muted text */
.jrn-list .jrn-type {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--c-slate-100); color: var(--c-slate-600);
  font-family: ui-monospace, monospace; font-size: .64rem; font-weight: 600;
  letter-spacing: .02em; line-height: 1.3;
}

/* Journal detail card — uses cool slate accents matching CoA drill panel */
.jrn-detail {
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  margin-bottom: 24px;
  overflow: hidden;
}
.jrn-detail__hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--c-slate-50);
  border-bottom: 1px solid var(--c-slate-200);
}
.jrn-detail__hdr h2 {
  margin: 0; font-family: ui-monospace, monospace;
  font-size: 1.3rem; color: var(--c-ink); font-weight: 700;
  letter-spacing: -.01em;
}
.jrn-detail__meta {
  margin-top: 4px; display: flex; gap: 10px; align-items: center;
  font-size: .82rem; color: var(--c-slate-600); flex-wrap: wrap;
}
.jrn-detail__meta strong { color: var(--c-slate-800); font-weight: 600; }
.jrn-detail__meta .sep { color: var(--c-slate-300); }
.jrn-detail__actions { display: flex; gap: 6px; flex-shrink: 0; }
.jrn-detail__row {
  padding: 10px 18px;
  border-bottom: 1px solid var(--c-slate-100);
  font-size: .85rem;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.jrn-detail__row strong { color: var(--c-slate-800); font-weight: 600; min-width: 88px; }
.jrn-detail__row code { font-family: ui-monospace, monospace; font-size: .78rem; color: var(--c-slate-600); background: var(--c-slate-50); padding: 1px 6px; border-radius: 3px; }
.jrn-detail__row a { color: var(--c-ink); font-weight: 600; text-decoration: none; }
.jrn-detail__row a:hover { text-decoration: underline; }
.jrn-detail__row--source { background: var(--c-ink-ghost); border-bottom-color: var(--c-ink-pale); }
.jrn-detail__row--reversed { background: var(--c-warning-bg); color: var(--c-warning); }
.jrn-detail__row--reversed strong { color: var(--c-warning); }
.jrn-detail__lines { width: 100%; border-collapse: collapse; font-size: .85rem; }
.jrn-detail__lines thead th {
  text-align: left; padding: 9px 14px;
  background: var(--c-slate-50); color: var(--c-slate-600);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  border-top: 1px solid var(--c-slate-200);
  border-bottom: 1px solid var(--c-slate-200);
}
.jrn-detail__lines th.num, .jrn-detail__lines td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.jrn-detail__lines td {
  height: 38px; padding: 0 14px;
  border-bottom: 1px solid var(--c-slate-100);
  vertical-align: middle;
  white-space: nowrap;
}
.jrn-detail__lines td.cell-wrap { white-space: normal; }
.jrn-detail__lines tr:last-child td { border-bottom: none; }
.jrn-detail__lines .line-seq { color: var(--c-slate-400); font-family: ui-monospace, monospace; font-size: .76rem; }
.jrn-detail__lines .acct-code { color: var(--c-ink); font-family: ui-monospace, monospace; font-size: .78rem; font-weight: 600; margin-right: 6px; }
.jrn-detail__lines .acct-name { color: var(--c-text); font-weight: 500; }
.jrn-detail__lines .line-memo { color: var(--c-slate-600); font-size: .8rem; margin-right: 6px; }
.jrn-detail__lines .dim-tag {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--c-slate-100); color: var(--c-slate-600);
  font-family: ui-monospace, monospace; font-size: .62rem; font-weight: 600;
  letter-spacing: .02em; line-height: 1.3;
  margin-left: 4px;
}
.jrn-detail__lines .totals-row td {
  border-top: 2px solid var(--c-ink-lite);
  background: var(--c-slate-50);
  font-weight: 700; color: var(--c-ink);
  height: 42px;
}

/* ── Drill panel ───────────────────────────────────────────────────────────
   Right-sliding inspector for "click anywhere in the finance UI to see
   detail". Used by CoA (account → ledger → journal → source), Journals
   detail, BS/P&L drill-through. Single instance per page; content swapped
   via JS. Markup contract:
     <aside class="drill-panel" id="drillPanel" hidden>
       <header class="drill-panel__hdr">
         <button class="drill-panel__back" data-drill-back>‹</button>
         <nav class="drill-panel__crumbs" data-drill-crumbs></nav>
         <button class="drill-panel__close" data-drill-close>×</button>
       </header>
       <div class="drill-panel__body" data-drill-body></div>
     </aside>
     <div class="drill-panel__backdrop" data-drill-backdrop></div>
   JS: feh_drill_open(title, html, sourceUrl); feh_drill_push(...); feh_drill_close().
   ────────────────────────────────────────────────────────────────────────── */
.drill-panel{
  position:fixed; top:0; right:0; bottom:0; width:min(560px, 92vw);
  background:var(--c-surface); border-left:1px solid var(--c-border);
  box-shadow:-12px 0 32px -16px rgba(17,46,30,.18);
  z-index:80; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 220ms var(--ease-out);
  visibility:hidden;
}
.drill-panel.is-open{transform:translateX(0); visibility:visible}
.drill-panel__backdrop{
  position:fixed; inset:0; background:rgba(17,46,30,.22); z-index:79;
  opacity:0; pointer-events:none; transition:opacity 180ms var(--t-fast);
}
.drill-panel__backdrop.is-open{opacity:1; pointer-events:auto}

.drill-panel__hdr{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-bottom:1px solid var(--c-border);
  background:var(--c-surface-2); min-height:48px; flex-shrink:0;
}
.drill-panel__back, .drill-panel__close{
  width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--c-text-muted); cursor:pointer; flex-shrink:0;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.drill-panel__back:hover, .drill-panel__close:hover{
  background:var(--c-surface); border-color:var(--c-border); color:var(--c-primary);
}
.drill-panel__back svg, .drill-panel__close svg{width:14px; height:14px}
.drill-panel__back[disabled]{opacity:.35; pointer-events:none}

.drill-panel__crumbs{
  flex:1; min-width:0; display:flex; align-items:center; gap:6px;
  font-size:var(--text-sm); color:var(--c-text-2);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.drill-panel__crumbs a, .drill-panel__crumbs button{
  color:var(--c-text-muted); background:transparent; border:0; padding:0;
  font:inherit; cursor:pointer; text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; max-width:160px; flex-shrink:0;
}
.drill-panel__crumbs a:hover, .drill-panel__crumbs button:hover{color:var(--c-primary)}
.drill-panel__crumbs .crumb-sep{color:var(--c-text-light); font-size:.7rem; flex-shrink:0}
.drill-panel__crumbs .crumb-current{color:var(--c-text); font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis}

.drill-panel__body{flex:1; overflow-y:auto; padding:16px}
.drill-panel__body .drill-empty{
  padding:32px 16px; text-align:center; color:var(--c-text-muted); font-size:var(--text-sm);
}
.drill-panel__body .drill-loading{
  padding:32px 16px; text-align:center;
}
.drill-panel__body .drill-loading::before{
  content:''; display:inline-block; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--c-border-strong); border-top-color:var(--c-primary);
  animation:spin .8s linear infinite;
}

/* Drill content sections — used by every drill renderer for consistent typography */
.drill-section{margin-bottom:18px}
.drill-section:last-child{margin-bottom:0}
.drill-section__hdr{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--c-text-muted); font-weight:700; margin-bottom:8px;
}
.drill-meta{
  display:grid; grid-template-columns:auto 1fr; gap:6px 14px;
  font-size:var(--text-sm); align-items:baseline;
}
.drill-meta dt{color:var(--c-text-muted); font-weight:500}
.drill-meta dd{margin:0; color:var(--c-text); font-variant-numeric:tabular-nums}
.drill-meta dd.num{font-family:ui-monospace,monospace; font-weight:600}
.drill-meta dd.ref{font-family:ui-monospace,monospace; color:var(--c-primary-dk)}

/* Drill mini-table (ledger rows, journal lines, etc.) */
.drill-table{width:100%; border-collapse:collapse; font-size:var(--text-sm)}
.drill-table th{
  text-align:left; padding:6px 8px; background:var(--c-surface-2);
  color:var(--c-text-muted); font-size:.62rem; text-transform:uppercase;
  letter-spacing:.06em; font-weight:700; border-bottom:1px solid var(--c-border);
  position:sticky; top:0; z-index:1;
}
.drill-table th.num{text-align:right}
.drill-table td{
  padding:7px 8px; border-bottom:1px solid var(--c-border); vertical-align:top;
  white-space:nowrap;
}
.drill-table td.cell-wrap{ white-space:normal }
.drill-table td.num{
  text-align:right; font-variant-numeric:tabular-nums;
  font-family:ui-monospace,monospace; font-weight:500;
}
.drill-table td.ref{font-family:ui-monospace,monospace; color:var(--c-primary-dk)}
.drill-table td.muted{color:var(--c-text-muted); font-size:.78rem}
.drill-table tr.clickable{cursor:pointer; transition:background var(--t-fast)}
.drill-table tr.clickable:hover td{background:var(--c-primary-ghost)}
.drill-table tfoot td{
  padding-top:10px; font-weight:600; border-top:2px solid var(--c-border-strong);
  background:var(--c-surface-2);
}

/* Drill action footer (e.g. "View full ledger" / "Open source doc") */
.drill-actions{
  display:flex; gap:6px; padding-top:14px; margin-top:14px;
  border-top:1px solid var(--c-border); flex-wrap:wrap;
}
.drill-actions .btn{flex:0 0 auto}

/* Account header tile shown inside drill panel for CoA drilldown */
.drill-acct-hdr{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:14px;
  background:var(--c-primary-ghost); border:1px solid var(--c-primary-pale);
  border-radius:var(--r-md);
}
.drill-acct-hdr__code{
  font-family:ui-monospace,monospace; font-size:.78rem; color:var(--c-text-muted);
  background:var(--c-surface); padding:2px 8px; border-radius:var(--r-sm);
  border:1px solid var(--c-border); flex-shrink:0;
}
.drill-acct-hdr__name{
  flex:1; min-width:0; font-weight:600; color:var(--c-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.drill-acct-hdr__balance{
  font-family:ui-monospace,monospace; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--c-primary-dk);
  font-size:var(--text-sm); flex-shrink:0;
}
.drill-acct-hdr__type{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--c-text-muted); padding:2px 6px; border-radius:var(--r-pill);
  background:var(--c-surface); border:1px solid var(--c-border);
}

/* Mobile: drill panel becomes full-width sheet */
@media (max-width: 720px){
  .drill-panel{width:100vw; border-left:0}
  .drill-panel__hdr{padding:8px 10px; min-height:44px}
}

/* ── Health panel (10 checks tile grid on Finance Dashboard) ──────────── */
.health-panel{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-md); margin-bottom:var(--sp-6); overflow:hidden;
}
.health-panel__hdr{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:10px var(--sp-4); background:var(--c-surface-2);
  border-bottom:1px solid var(--c-border);
}
.health-panel__hdr svg{width:14px; height:14px; color:var(--c-primary)}
.health-panel__title{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--c-text-muted); font-weight:700;
}
.health-panel__summary{
  font-size:var(--text-xs); color:var(--c-text-light); margin-left:var(--sp-2);
}
.health-panel__summary strong{color:var(--c-text-2); font-weight:500}
.health-panel__refresh{
  margin-left:auto; font-size:var(--text-xs); color:var(--c-text-muted);
  background:transparent; border:0; cursor:pointer; padding:4px 8px;
  border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:4px;
}
.health-panel__refresh:hover{color:var(--c-primary)}
.health-panel__refresh svg{width:11px; height:11px}

.health-panel__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1px; background:var(--c-border);
}
.health-tile{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--c-surface); cursor:pointer; min-height:60px;
  border:0; text-align:left; font:inherit; color:var(--c-text);
  transition:background var(--t-fast);
}
.health-tile:hover{background:var(--c-surface-2)}
.health-tile:disabled{cursor:default}
.health-tile__dot{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--c-text-light); box-shadow:0 0 0 3px var(--c-surface-2);
}
.health-tile--green  .health-tile__dot{background:var(--c-success);  box-shadow:0 0 0 3px var(--c-success-bg)}
.health-tile--amber  .health-tile__dot{background:var(--c-warning);  box-shadow:0 0 0 3px var(--c-warning-bg)}
.health-tile--red    .health-tile__dot{background:var(--c-danger);   box-shadow:0 0 0 3px var(--c-danger-bg)}
.health-tile__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.health-tile__label{
  font-size:var(--text-xs); color:var(--c-text-2); font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.health-tile__count{
  font-size:var(--text-sm); font-weight:600; font-variant-numeric:tabular-nums;
}
.health-tile--green .health-tile__count{color:var(--c-success)}
.health-tile--amber .health-tile__count{color:var(--c-warning)}
.health-tile--red   .health-tile__count{color:var(--c-danger)}
.health-tile__chev{
  width:11px; height:11px; color:var(--c-text-light); flex-shrink:0;
  transition:transform var(--t-fast), color var(--t-fast);
}
.health-tile:hover .health-tile__chev{color:var(--c-primary); transform:translateX(2px)}

/* ── Empty state (consistent across every finance list/report) ────────── */
.fin-empty{
  padding:var(--sp-8) var(--sp-4); text-align:center;
  background:var(--c-surface); border:1px dashed var(--c-border);
  border-radius:var(--r-md); color:var(--c-text-muted);
}
.fin-empty svg{
  width:36px; height:36px; color:var(--c-text-light); margin-bottom:10px;
}
.fin-empty__headline{font-size:var(--text-sm); color:var(--c-text-2); font-weight:500; margin-bottom:4px}
.fin-empty__sub{font-size:var(--text-xs); color:var(--c-text-muted); margin-bottom:14px}
.fin-empty .btn{margin-top:4px}

/* ── Filter Panel (chip-style filters) ──────────────────────────────────────
   The new finance filter chrome. Form-mode auto-submits on chip change; can
   also run non-form (fires 'filterchange' event). See app.js for the binder.
   Markup contract: see [data-filter-panel] in finance-ui.php (fin_render_period_filter).
   Colors lean cool-slate so the filter belongs to the finance "data zone"
   rather than competing with emerald CTAs.
   ─────────────────────────────────────────────────────────────────────── */
.filter-panel{
  background:var(--c-surface);
  border:1px solid var(--c-slate-200);
  border-radius:var(--r-md);
  margin-bottom:var(--sp-6);
  overflow:visible;
  transition: opacity var(--t-fast);
}
.filter-panel.is-submitting { opacity: 0.55; pointer-events: none; }

/* Top progress bar shown while a filter submit is in flight */
.fp-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 999;
  background: linear-gradient(90deg, var(--c-ink) 0%, var(--c-ink-lite) 50%, var(--c-ink) 100%);
  background-size: 200% 100%;
  animation: fpProgressSlide 1.2s linear infinite;
}
@keyframes fpProgressSlide {
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
.filter-panel__head{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:8px var(--sp-4);
  background:var(--c-slate-50);
  border-bottom:1px solid var(--c-slate-200);
  border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md);
}
.filter-panel__head .head-icon{ width:13px; height:13px; color:var(--c-ink); flex-shrink:0 }
.filter-panel__head .head-label{
  font-size:.64rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--c-slate-600); font-weight:700;
}
.filter-panel__head .head-summary{
  font-size:var(--text-xs); color:var(--c-slate-400); margin-left:var(--sp-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.filter-panel__head .head-summary strong{ color:var(--c-slate-600); font-weight:600 }
.filter-panel__reset{
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  font-size:.66rem; color:var(--c-slate-400);
  padding:4px 8px; border-radius:var(--r-sm); font-family:inherit;
  transition:color var(--t-fast), background var(--t-fast);
  text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  text-decoration:none; flex-shrink:0;
}
.filter-panel__reset:hover{ color:var(--c-ink); background:var(--c-ink-ghost) }
.filter-panel__reset.is-hidden{ display:none }
.filter-panel__body{
  display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:10px var(--sp-3);
}

/* Chip — compact rectangle: optional icon + uppercase label + bold value + chevron */
.fchip{
  position:relative;
  display:inline-flex; align-items:stretch; gap:0;
  border:1px solid var(--c-slate-200);
  border-radius:var(--r-md);
  background:var(--c-surface);
  cursor:pointer; font-family:inherit;
  transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  text-align:left; color:var(--c-text);
  height:34px; padding:0;
}
.fchip:hover{ border-color:var(--c-ink-lite) }
.fchip:focus-visible{ outline:0; border-color:var(--c-ink); box-shadow:0 0 0 3px var(--c-ink-pale) }
.fchip[aria-expanded="true"]{ border-color:var(--c-ink); box-shadow:0 0 0 3px var(--c-ink-pale) }
.fchip.is-active{ border-color:var(--c-ink); background:var(--c-ink-ghost) }
.fchip.is-active .fchip__value{ color:var(--c-ink) }
.fchip__icon{
  display:flex; align-items:center; justify-content:center;
  padding:0 6px 0 10px; color:var(--c-slate-400); flex-shrink:0;
}
.fchip__icon svg{ width:13px; height:13px }
.fchip.is-active .fchip__icon{ color:var(--c-ink) }
.fchip__label{
  display:inline-flex; align-items:center;
  font-size:.6rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--c-slate-400); font-weight:700;
  padding:0 6px 0 10px; white-space:nowrap; flex-shrink:0;
}
.fchip__icon + .fchip__label{ padding-left:0 }
.fchip.is-active .fchip__label{ color:var(--c-ink-lite) }
.fchip__value{
  display:inline-flex; align-items:center;
  padding:0 4px; font-size:var(--text-sm); font-weight:600;
  color:var(--c-slate-800); white-space:nowrap;
  max-width:240px; overflow:hidden; text-overflow:ellipsis;
}
.fchip__chev{
  display:flex; align-items:center; padding:0 9px 0 6px;
  color:var(--c-slate-300); flex-shrink:0;
  transition:transform var(--t-fast);
}
.fchip__chev svg{ width:11px; height:11px }
.fchip[aria-expanded="true"] .fchip__chev{ transform:rotate(180deg) }
.fchip.is-active .fchip__chev{ color:var(--c-ink) }

/* Search input inside filter panel */
.fsearch{
  position:relative; display:flex; align-items:center;
  min-width:240px; flex:1; max-width:360px; margin-left:auto;
}
.fsearch__icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:13px; height:13px; color:var(--c-slate-400); pointer-events:none;
}
.fsearch__input{
  width:100%; height:34px; padding:0 36px 0 32px;
  border:1px solid var(--c-slate-200); border-radius:var(--r-md);
  font-size:var(--text-sm); background:var(--c-surface); color:var(--c-text);
  font-family:inherit;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.fsearch__input:focus{
  outline:0; border-color:var(--c-ink);
  box-shadow:0 0 0 3px var(--c-ink-pale);
}
.fsearch__input::placeholder{ color:var(--c-slate-400) }
.fsearch__kbd{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:ui-monospace,monospace; font-size:.6rem;
  color:var(--c-slate-400); background:var(--c-slate-50);
  border:1px solid var(--c-slate-200); border-radius:3px;
  padding:1px 5px; line-height:1.2; pointer-events:none;
}

/* Popover */
.fpop{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:200px; max-width:440px;
  max-height: 380px; overflow-y: auto;  /* long option lists scroll cleanly */
  background:var(--c-surface);
  border:1px solid var(--c-slate-200);
  border-radius:var(--r-md);
  box-shadow:0 12px 28px -12px rgba(17,46,30,.18), 0 4px 10px -4px rgba(17,46,30,.08);
  z-index:50; padding:6px;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity var(--t-fast), transform var(--t-fast);
  scrollbar-width: thin;
  scrollbar-color: var(--c-slate-300) transparent;
}
.fpop::-webkit-scrollbar { width: 8px; }
.fpop::-webkit-scrollbar-thumb { background: var(--c-slate-300); border-radius: 4px; }
.fpop::-webkit-scrollbar-track { background: transparent; }

/* Date popover stays uncapped (it's a fixed 2-column layout) */
.fpop--date { max-height: none; overflow: hidden; }

/* Searchable popover variant — wider, sticky search input on top, options
   scroll beneath. Used when there are >10 options (Accounts, Tours, etc.)
   so the user can filter by typing instead of scrolling. */
.fpop--searchable {
  min-width: 380px;
  max-width: 620px;     /* wide enough for long tour / account names */
  padding: 0;            /* search bar + list manage their own padding */
  overflow: hidden;      /* outer hides, inner list scrolls */
  max-height: 460px;
  display: flex;
  flex-direction: column;
}
.fpop--multi.fpop--searchable { max-width: 640px; }
.fpop--searchable .fpop__search {
  position: sticky; top: 0; z-index: 2;
  padding: 8px;
  background: var(--c-slate-50);
  border-bottom: 1px solid var(--c-slate-200);
  flex-shrink: 0;
}
.fpop--searchable .fpop__search-input {
  width: 100%;
  height: 32px;
  padding: 4px 10px 4px 30px;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-sm);
  font-size: .85rem;
  font-family: inherit;
  background: var(--c-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237B8699'><path fill-rule='evenodd' d='M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.817-4.817A6 6 0 012 8z' clip-rule='evenodd'/></svg>") no-repeat 9px center;
  background-size: 13px;
  color: var(--c-text);
}
.fpop--searchable .fpop__search-input:focus {
  outline: 0; border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
}
.fpop--searchable .fpop__list {
  flex: 1; overflow-y: auto; padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-slate-300) transparent;
}
.fpop--searchable .fpop__list::-webkit-scrollbar { width: 8px; }
.fpop--searchable .fpop__list::-webkit-scrollbar-thumb { background: var(--c-slate-300); border-radius: 4px; }
.fpop--searchable .fpop__list::-webkit-scrollbar-track { background: transparent; }
.fpop--searchable .fpop__opt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fpop--searchable .fpop__empty {
  padding: 18px 12px;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--c-slate-400);
  display: none;
}
.fpop--searchable.is-empty .fpop__empty { display: block; }
.fpop--searchable.is-empty .fpop__list { padding-bottom: 0; }

/* Group dividers inside a searchable list (e.g. "Assets", "Liabilities") */
.fpop--searchable .fpop__group {
  padding: 8px 12px 3px;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-slate-400);
  position: sticky; top: 0;        /* sticky within scroll area; not above search */
  background: var(--c-surface);
  z-index: 1;
}

/* ── Multi-select popover variant ────────────────────────────────────────
   Adds a checkbox to every option + a sticky action bar at the bottom with
   Clear / Apply. Selecting an option does NOT auto-submit — the user picks
   the set they want, then clicks Apply. The chip's displayed value updates
   live to show the count or list of selected items.
   ───────────────────────────────────────────────────────────────────── */
.fpop--multi .fpop__opt {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 7px 12px;
}
.fpop--multi .fpop__opt:hover { background: var(--c-slate-50); color: var(--c-text); }
.fpop--multi .fpop__opt input[type=checkbox] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--c-ink);
  cursor: pointer;
  margin: 0;
}
.fpop--multi .fpop__opt input[type=checkbox]:checked + .fpop__opt-text {
  color: var(--c-ink); font-weight: 600;
}
.fpop--multi .fpop__opt-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--c-text);
}
.fpop--multi .fpop__opt-meta {
  margin-left: auto;
  font-size: .68rem; color: var(--c-slate-400);
  font-variant-numeric: tabular-nums;
}
.fpop--multi .fpop__opt:has(input:checked) { background: var(--c-ink-pale); }

/* Sticky action bar at the bottom of a multi popover */
.fpop__actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--c-slate-50);
  border-top: 1px solid var(--c-slate-200);
  flex-shrink: 0;
}
.fpop__actions__count {
  font-size: .76rem; color: var(--c-slate-600);
}
.fpop__actions__count strong { color: var(--c-ink); font-weight: 700; }
.fpop__actions__buttons { display: flex; gap: 6px; }
.fpop__actions .btn { font-size: .78rem; padding: 6px 14px; }

/* "Select all" + "Clear" buttons at top of the list (above options, below search) */
.fpop--multi .fpop__top-actions {
  display: flex; gap: 4px; padding: 6px 10px 4px;
  font-size: .72rem;
}
.fpop--multi .fpop__top-actions button {
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-ink); font-family: inherit; font-size: .72rem;
  font-weight: 600; padding: 3px 6px; border-radius: var(--r-sm);
}
.fpop--multi .fpop__top-actions button:hover { background: var(--c-ink-ghost); }
.fpop--multi .fpop__top-actions .sep { color: var(--c-slate-300); align-self: center; }
.fchip[aria-expanded="true"] > .fpop{ opacity:1; transform:translateY(0); pointer-events:auto }
.fpop__opt{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; font-size:var(--text-sm);
  color:var(--c-text); cursor:pointer;
  border-radius:var(--r-sm); transition:background var(--t-fast);
  line-height:1.35; text-decoration:none; font-family:inherit;
  border:0; background:transparent; width:100%; text-align:left;
}
.fpop__opt:hover{ background:var(--c-slate-50); color:var(--c-text); text-decoration:none }
.fpop__opt.is-selected{ background:var(--c-ink-pale); color:var(--c-ink); font-weight:600 }
.fpop__opt.is-selected:hover{ background:var(--c-ink-pale) }
.fpop__opt .meta{
  margin-left:auto; font-size:var(--text-xs); color:var(--c-slate-400);
  font-weight:400; font-variant-numeric:tabular-nums;
}
.fpop__opt.is-selected .meta{ color:var(--c-ink-lite) }
.fpop__hr{ height:1px; background:var(--c-slate-100); margin:6px 4px }

/* Date popover — wider, two-column: preset rail + custom range form */
.fpop--date{ min-width:520px; max-width:540px; padding:0; overflow:hidden }
.fpop--date .pop-grid{ display:grid; grid-template-columns:180px 1fr }
.fpop--date .pop-presets{
  padding:8px 6px; background:var(--c-slate-50);
  border-right:1px solid var(--c-slate-200);
}
.fpop--date .pop-presets .fpop__opt{ padding:7px 10px }
.fpop--date .pop-custom{ padding:16px }
.fpop--date .pop-custom h4{
  margin:0 0 12px; font-size:.6rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--c-slate-400); font-weight:700;
}
.fpop--date .pop-row{ display:flex; gap:10px; align-items:flex-end }
.fpop--date .pop-col{ flex:1; display:flex; flex-direction:column; gap:5px }
.fpop--date .pop-col label{
  font-size:var(--text-xs); color:var(--c-slate-400);
  text-transform:uppercase; letter-spacing:.05em; font-weight:600;
}
.fpop--date .pop-col input{
  padding:8px 10px; border:1px solid var(--c-slate-200); border-radius:var(--r-sm);
  font-size:var(--text-sm); font-family:inherit; color:var(--c-text);
  background:var(--c-surface);
}
.fpop--date .pop-col input:focus{
  outline:none; border-color:var(--c-ink); box-shadow:0 0 0 3px var(--c-ink-pale);
}
.fpop--date .pop-arrow{ color:var(--c-slate-400); padding-bottom:10px }
.fpop--date .pop-actions{
  display:flex; justify-content:flex-end; gap:6px; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--c-slate-100);
}
.fpop--date .pop-actions .btn{ padding:6px 12px; font-size:var(--text-sm) }

@media (max-width: 768px){
  .filter-panel__body{ padding:10px 10px }
  .fsearch{ margin-left:0; width:100%; max-width:none; flex-basis:100% }
  .fpop--date{ min-width:280px; max-width:calc(100vw - 32px) }
  .fpop--date .pop-grid{ grid-template-columns:1fr }
  .fpop--date .pop-presets{ border-right:0; border-bottom:1px solid var(--c-slate-200) }
}

/* ── Posting Rules tab (Settings → Posting Rules, Phase 3.8) ──────────────
   Each rule is a <details> card grouped by EventCode prefix. Header shows
   status dot + code + journal type + trigger + usage stats; body expands
   to show legs (read-only), metadata, and inline edit form. */
.pr-group {
  display: flex; align-items: baseline; gap: 10px;
  margin: 22px 0 10px 0;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-700); font-weight: 700;
}
.pr-group:first-of-type { margin-top: 10px; }
.pr-group__sub {
  text-transform: none; letter-spacing: 0;
  font-weight: 400; color: var(--c-slate-400); font-size: .76rem;
}
.pr-group__count {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  font-size: .68rem; font-weight: 700;
  background: var(--c-slate-100); color: var(--c-slate-600);
  border-radius: var(--r-pill);
  text-transform: none; letter-spacing: 0;
}

.pr-rule-list { display: flex; flex-direction: column; gap: 6px; }

.pr-rule {
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pr-rule[open] { box-shadow: 0 1px 3px rgba(15, 23, 42, .08); border-color: var(--c-ink-pale); }
.pr-rule--inactive { background: var(--c-slate-50); opacity: .82; }
.pr-rule--inactive .pr-rule__code { color: var(--c-slate-500); }

.pr-rule__hdr {
  display: grid;
  grid-template-columns: 14px 220px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
}
.pr-rule__hdr::-webkit-details-marker { display: none; }
.pr-rule__hdr:hover { background: var(--c-slate-50); }
.pr-rule[open] .pr-rule__hdr { background: var(--c-slate-50); border-bottom: 1px solid var(--c-slate-200); }

.pr-rule__dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.pr-rule__dot--on  { background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 18%, transparent); }
.pr-rule__dot--off { background: var(--c-slate-300); }

.pr-rule__code {
  font-family: ui-monospace, monospace;
  font-size: .78rem; font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -.01em;
}
.pr-rule__desc {
  color: var(--c-slate-700); font-size: .82rem;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-rule__meta { display: inline-flex; gap: 4px; align-items: center; }
.pr-rule__stats {
  font-size: .72rem; color: var(--c-slate-500);
  font-variant-numeric: tabular-nums;
  text-align: right; min-width: 130px;
  font-family: ui-monospace, monospace;
}
.pr-rule__stats strong { color: var(--c-slate-800); font-weight: 700; }

.pr-rule__body { padding: 14px 18px 18px; }
.pr-rule__section-hdr {
  margin: 14px 0 8px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-400); font-weight: 700;
}
.pr-rule__section-hdr:first-child { margin-top: 0; }
.pr-rule__empty {
  padding: 10px 12px;
  background: var(--c-warning-bg); color: var(--c-warning);
  border-radius: var(--r-sm);
  font-size: .82rem; font-style: italic;
}

.pr-lines {
  width: 100%; border-collapse: collapse; font-size: .82rem;
  background: var(--c-surface);
}
.pr-lines thead th {
  padding: 7px 14px;
  background: var(--c-slate-50);
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-500); font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--c-slate-200);
}
.pr-lines tbody td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-slate-100);
  vertical-align: top;
}
.pr-lines tbody tr:last-child td { border-bottom: 0; }
.pr-lines__seq {
  font-family: ui-monospace, monospace;
  color: var(--c-slate-400); font-size: .76rem;
}
.pr-side {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 2px 6px;
  font-size: .68rem; font-weight: 700; font-family: ui-monospace, monospace;
  border-radius: var(--r-sm);
}
.pr-side--dr { background: color-mix(in srgb, var(--c-success) 14%, var(--c-surface)); color: var(--c-success); }
.pr-side--cr { background: color-mix(in srgb, var(--c-danger) 14%, var(--c-surface)); color: var(--c-danger); }
.pr-role, .pr-token {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: .74rem;
  padding: 2px 6px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-sm);
  color: var(--c-ink);
}
.pr-token { background: var(--c-ink-pale); border-color: color-mix(in srgb, var(--c-ink) 18%, transparent); }
.pr-resolve-miss {
  display: inline-block;
  font-size: .74rem; color: var(--c-warning); font-style: italic;
}
.pr-tpl {
  font-family: ui-monospace, monospace;
  font-size: .74rem; color: var(--c-slate-600);
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis;
}

.pr-meta-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: .82rem;
}
.pr-meta-grid dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-slate-400); font-weight: 700;
  padding-top: 3px;
}
.pr-meta-grid dd {
  margin: 0;
  color: var(--c-slate-700);
}
.pr-meta-grid dd code {
  font-family: ui-monospace, monospace; font-size: .78rem;
  padding: 2px 6px; background: var(--c-slate-50); border-radius: var(--r-sm);
  color: var(--c-ink);
}

.pr-meta-form {
  margin-top: 4px;
  padding: 14px 16px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}
.pr-meta-form__row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pr-meta-form__row label,
.pr-meta-form__split label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-slate-500); font-weight: 700;
}
.pr-meta-form__row input,
.pr-meta-form__split input,
.pr-meta-form__split select {
  height: 32px; padding: 4px 10px;
  border: 1px solid var(--c-slate-200); border-radius: var(--r-sm);
  background: var(--c-surface); font-family: inherit; font-size: .82rem;
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--c-slate-800);
}
.pr-meta-form__row input:focus,
.pr-meta-form__split input:focus,
.pr-meta-form__split select:focus {
  outline: 0; border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
}
.pr-meta-form__split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 10px;
}
@media (max-width: 600px) { .pr-meta-form__split { grid-template-columns: 1fr; } }
.pr-meta-form__actions { display: flex; justify-content: flex-end; }

.pr-toggle-form {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--c-surface);
  border: 1px dashed var(--c-slate-200);
  border-radius: var(--r-md);
}
.pr-toggle-hint { font-size: .76rem; color: var(--c-slate-500); }
.pr-toggle-hint strong { color: var(--c-slate-800); }

/* ── Year-End Close wizard (Phase 4) ──────────────────────────────────────
   Vertical 3-step layout: FY picker → Prerequisites → Closing JE Preview →
   Post & Lock. Numbered step headers with status badges, clean prereq list
   with pass/fail icons + resolve links, line-level JE preview, and a final
   "post" form gated by all prereqs passing. */
.ye-fy-picker {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}
.ye-fy-picker__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-500); font-weight: 700;
  white-space: nowrap;
}
.ye-fy-picker__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.ye-fy-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.ye-fy-chip:hover { background: var(--c-slate-50); text-decoration: none; }
.ye-fy-chip.is-active {
  background: var(--c-ink-pale);
  border-color: var(--c-ink);
}
.ye-fy-chip__year {
  font-family: ui-monospace, monospace;
  font-size: .88rem; font-weight: 700; color: var(--c-ink);
}
.ye-fy-chip__range {
  font-size: .74rem; color: var(--c-slate-500);
}

.ye-done {
  display: flex; align-items: flex-start; gap: 18px;
  margin-bottom: 24px;
  padding: 22px 26px;
  background: linear-gradient(135deg, var(--c-success-bg), color-mix(in srgb, var(--c-success) 8%, var(--c-surface)));
  border: 1px solid var(--c-success);
  border-radius: var(--r-md);
}
.ye-done__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-success); color: #fff;
  border-radius: 50%;
}
.ye-done__icon svg { width: 24px; height: 24px; }
.ye-done__title {
  margin: 0 0 6px; font-size: 1.18rem; color: var(--c-slate-800); font-weight: 700;
}
.ye-done__sub {
  margin: 0 0 14px; color: var(--c-slate-600); font-size: .9rem;
}
.ye-done__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ye-step {
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 18px;
}
.ye-step__hdr {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-slate-100);
}
.ye-step__num {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--c-ink-pale);
  color: var(--c-ink);
  border: 1px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
  border-radius: 50%;
  font-family: ui-monospace, monospace;
  font-size: .98rem; font-weight: 700;
}
.ye-step__title {
  margin: 0 0 2px; font-size: 1.02rem; color: var(--c-slate-800); font-weight: 700;
}
.ye-step__sub {
  margin: 0; color: var(--c-slate-600); font-size: .82rem;
}
.ye-step__status { margin-left: auto; }
.ye-step__count {
  font-size: .76rem;
  font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
  color: var(--c-slate-500);
  padding: 4px 10px;
  background: var(--c-slate-50);
  border-radius: var(--r-pill);
}

.ye-prereqs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ye-prereq {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}
.ye-prereq--pass {
  background: color-mix(in srgb, var(--c-success) 6%, var(--c-surface));
  border-color: color-mix(in srgb, var(--c-success) 28%, var(--c-slate-200));
}
.ye-prereq--fail {
  background: color-mix(in srgb, var(--c-warning) 8%, var(--c-surface));
  border-color: color-mix(in srgb, var(--c-warning) 36%, var(--c-slate-200));
  border-left: 3px solid var(--c-warning);
}
.ye-prereq__icon { width: 22px; height: 22px; flex-shrink: 0; }
.ye-prereq__icon svg { width: 22px; height: 22px; }
.ye-prereq--pass .ye-prereq__icon { color: var(--c-success); }
.ye-prereq--fail .ye-prereq__icon { color: var(--c-warning); }
.ye-prereq__body { flex: 1; min-width: 0; }
.ye-prereq__label {
  font-size: .88rem; font-weight: 600; color: var(--c-slate-800);
  margin-bottom: 2px;
}
.ye-prereq__detail {
  font-size: .78rem; color: var(--c-slate-600);
}

.ye-netprofit {
  margin-bottom: 18px;
  padding: 16px 20px;
  background: var(--c-ink-pale);
  border: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
  border-radius: var(--r-md);
}
.ye-netprofit__row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 0;
  font-size: .9rem; color: var(--c-slate-700);
}
.ye-netprofit__row--minus { color: var(--c-danger); }
.ye-netprofit__row--final {
  border-top: 2px solid var(--c-ink);
  padding-top: 12px; margin-top: 6px;
  font-size: 1.05rem; font-weight: 800;
  color: var(--c-ink);
  text-transform: uppercase; letter-spacing: .04em;
}
.ye-netprofit__row--final .ye-num { font-size: 1.4rem; color: var(--c-ink); }
.ye-netprofit__row--loss { color: var(--c-danger); }
.ye-netprofit__row--loss .ye-num { color: var(--c-danger); }
.ye-num {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ye-lines {
  width: 100%; border-collapse: collapse; font-size: .85rem;
}
.ye-lines thead th {
  padding: 8px 10px;
  background: var(--c-slate-50);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-500); font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--c-slate-200);
}
.ye-lines thead th.num { text-align: right; }
.ye-lines tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--c-slate-100);
}
.ye-lines tbody td.num {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
  color: var(--c-slate-800);
}
.ye-lines__seq {
  font-family: ui-monospace, monospace;
  color: var(--c-slate-400); font-size: .76rem;
}
.ye-lines__reason {
  font-size: .76rem; color: var(--c-slate-500); font-style: italic;
}
.ye-lines__retained td {
  background: var(--c-ink-pale);
  font-weight: 700;
  border-top: 1px dashed var(--c-ink);
  padding: 11px 14px;
}
.ye-lines tfoot td {
  padding: 12px 16px;
  background: var(--c-slate-50);
  border-top: 2px solid var(--c-slate-200);
  font-weight: 700;
}
.ye-lines thead th { padding: 8px 14px; }

.ye-post-form {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.ye-post-form__caveat {
  font-size: .76rem; color: var(--c-slate-500);
  max-width: 720px; line-height: 1.55;
  margin: 0;
}

.ye-blocked, .ye-already-done {
  padding: 14px 18px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  font-size: .88rem; color: var(--c-slate-600);
}
.ye-blocked { border-left: 3px solid var(--c-warning); }
.ye-blocked strong { color: var(--c-slate-800); }
.ye-already-done { border-left: 3px solid var(--c-success); }

/* ── Inventory item drill fragment ───────────────────────────────────────
   Loaded into .drill-panel__body via fetch when an item row is clicked.
   Header summarises the item + key stats; body lists every stock movement
   with a running balance column. */
.drill-frag { padding: 18px 22px; }
.drill-frag__hdr {
  display: flex; flex-direction: column; gap: 14px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--c-slate-200);
}
.drill-frag__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center;
  padding-top: 4px;
}
.drill-frag__actions .btn { font-size: .76rem; padding: 6px 12px; }
.drill-frag__actions .btn svg { vertical-align: -2px; }

/* Inventory row: clickable item name (opens Edit) + icon-button cluster */
.inv-row-name {
  all: unset;
  cursor: pointer;
  font-weight: 500;
  color: var(--c-slate-800);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.inv-row-name:hover { color: var(--c-ink); border-bottom-color: currentColor; }
.inv-row-name:focus-visible {
  outline: 2px solid var(--c-ink-pale); outline-offset: 2px; border-radius: 2px;
}

.inv-items-table .is-inactive { opacity: .55; }
.inv-items-table .is-inactive .inv-row-name { font-style: italic; }

.inv-row-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  margin-left: 2px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--c-slate-500);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.inv-row-act:hover {
  background: var(--c-slate-50);
  border-color: var(--c-slate-200);
  color: var(--c-ink);
  text-decoration: none;
}
.inv-row-act:focus-visible {
  outline: 0;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
}
.inv-row-act svg { width: 14px; height: 14px; }

/* ── Bulk multi-row table (Receive Stock / Issue to Tour modals) ──────── */
.bulk-tbl__h {
  margin: 18px 0 8px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-slate-500);
  font-weight: 700;
}
.bulk-tbl-wrap {
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  overflow: hidden;
}
.bulk-tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  font-size: .85rem;
}
.bulk-tbl thead th {
  padding: 8px 12px;
  background: var(--c-slate-50);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-slate-500);
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--c-slate-200);
}
.bulk-tbl thead th.num { text-align: right; }
.bulk-tbl__hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-slate-400);
  font-size: .68rem;
  font-weight: 500;
  margin-left: 4px;
}
.bulk-tbl tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-slate-100);
  vertical-align: middle;
}
.bulk-tbl tbody tr:last-child td { border-bottom: 0; }
.bulk-tbl tbody td .form-control {
  margin: 0;
  height: 32px;
  padding: 4px 10px;
  font-size: .85rem;
}
.bulk-tbl tbody td .form-control.num {
  text-align: right;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.bulk-tbl .bulk-tbl__sub,
.bulk-tbl .bulk-tbl__unitcost {
  text-align: right;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-slate-800);
  padding-right: 14px;
}
.bulk-tbl .bulk-tbl__unitcost { color: var(--c-slate-500); font-weight: 500; }
.bulk-tbl__rm {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--c-slate-400);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.bulk-tbl__rm:hover {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border-color: var(--c-danger-bg);
}
.bulk-tbl tfoot td {
  padding: 10px 12px;
  background: var(--c-slate-50);
  border-top: 1px solid var(--c-slate-200);
}
.bulk-tbl__total {
  text-align: right;
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-slate-800);
}
.bulk-paid-toggle {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}

/* ── Pay-widget: custom account picker + contextual method selector ──────
   Replaces the native <select> on payment / expense / income forms.
   Trigger looks like a form input. Click opens a popover with grouped
   account list + optional search. After an account is chosen, a method
   segmented control appears IF the account category needs it (BANK only). */
.pay-widget {
  position: relative;
  display: flex; flex-direction: column;
  gap: 0;
}
.pay-widget--empty {
  padding: 10px 14px;
  font-size: .82rem; color: var(--c-slate-400); font-style: italic;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}

/* Trigger — single-line, styled like .form-control. The face span owns the
   text and clips with ellipsis so the trigger never wraps to a 2nd line, no
   matter how narrow the parent column is. */
.pay-widget__trigger {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 10px 0 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  overflow: hidden;
}
.pay-widget__trigger:hover { border-color: var(--c-slate-400); }
.pay-widget.is-open .pay-widget__trigger,
.pay-widget__trigger:focus-visible {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
  outline: 0;
}

.pay-widget__face {
  flex: 1;
  min-width: 0;
  display: flex; align-items: baseline; gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pay-widget__placeholder {
  font-size: .85rem; color: var(--c-slate-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block; max-width: 100%;
}
.pay-widget__display {
  display: inline-flex; align-items: baseline; gap: 8px; min-width: 0;
  overflow: hidden;
}
.pay-widget__display-code {
  font-family: ui-monospace, monospace;
  font-size: .78rem; font-weight: 700;
  color: var(--c-ink);
  flex-shrink: 0;
}
.pay-widget__display-name {
  font-size: .85rem; color: var(--c-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.pay-widget__caret {
  width: 12px; height: 12px;
  color: var(--c-slate-400);
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 180ms var(--t-fast);
}
.pay-widget.is-open .pay-widget__caret { transform: rotate(180deg); }

/* Popover */
.pay-widget__pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 50;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
  max-height: 380px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* The trigger toggles the [hidden] attribute on selection / outside-click.
   Without this override the CSS display:flex above would override the
   browser default `[hidden]{display:none}` and the popover would stay open
   after the user picked an account — root cause of the "dropdown doesn't
   close" bug. */
.pay-widget__pop[hidden] { display: none !important; }
.pay-widget__search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--c-slate-100);
}
.pay-widget__search-icon { width: 14px; height: 14px; color: var(--c-slate-400); flex-shrink: 0; }
.pay-widget__search {
  flex: 1;
  border: 0; outline: 0;
  background: transparent;
  font-family: inherit; font-size: .85rem;
  color: var(--c-slate-800);
}
.pay-widget__search::placeholder { color: var(--c-slate-400); }

.pay-widget__list {
  overflow-y: auto;
  padding: 4px 0 6px;
  flex: 1;
}
.pay-widget__group { padding: 4px 0; }
.pay-widget__group + .pay-widget__group { border-top: 1px solid var(--c-slate-100); margin-top: 2px; padding-top: 6px; }
.pay-widget__group-label {
  padding: 6px 14px 4px;
  font-size: .58rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--c-slate-400); font-weight: 700;
}
.pay-widget__opt {
  all: unset;
  box-sizing: border-box;
  display: flex; align-items: baseline; gap: 10px;
  width: 100%;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--t-fast);
}
.pay-widget__opt:hover { background: var(--c-ink-pale); }
.pay-widget__opt:focus-visible { background: var(--c-ink-pale); outline: 0; }
.pay-widget__opt-code {
  font-family: ui-monospace, monospace;
  font-size: .78rem; font-weight: 700;
  color: var(--c-ink);
  min-width: 42px;
}
.pay-widget__opt-name {
  font-size: .85rem; color: var(--c-slate-700);
}
.pay-widget__empty {
  padding: 14px;
  text-align: center;
  font-size: .82rem; color: var(--c-slate-400); font-style: italic;
}

/* Method chip strip — appears below trigger only for BANK accounts.
   Inline pills, no header. Wraps to 2 rows in narrow columns. */
.pay-widget__method-row {
  margin-top: 6px;
  display: flex; align-items: center; gap: 4px;
}
.pay-widget__method-set {
  display: flex; flex-wrap: wrap; gap: 4px;
  width: 100%;
}
.pay-widget__method-btn {
  all: unset;
  box-sizing: border-box;
  padding: 4px 10px;
  font-family: inherit; font-size: .74rem; font-weight: 500;
  color: var(--c-slate-600);
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.pay-widget__method-btn:hover {
  background: var(--c-ink-ghost);
  border-color: var(--c-ink-lite);
  color: var(--c-ink);
}
.pay-widget__method-btn.is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: #fff;
}
.drill-frag__title { min-width: 0; }
.drill-frag__name {
  font-size: 1.1rem; font-weight: 700;
  color: var(--c-slate-800); line-height: 1.2;
  margin-bottom: 4px;
}
.drill-frag__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .76rem;
}
.drill-frag__code {
  font-family: ui-monospace, monospace;
  font-size: .74rem;
  padding: 2px 8px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-sm);
  color: var(--c-ink);
}
.drill-frag__cat {
  font-size: .74rem;
  color: var(--c-slate-500);
}
.drill-frag__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.drill-frag__stat {
  padding: 10px 12px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.drill-frag__stat-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-400); font-weight: 700;
}
.drill-frag__stat-value {
  font-family: ui-monospace, monospace;
  font-size: 1.1rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-slate-800);
  line-height: 1.1;
}
.drill-frag__stat-value.is-low { color: var(--c-danger); }
.drill-frag__unit {
  font-family: inherit;
  font-size: .68rem; font-weight: 500;
  color: var(--c-slate-500);
  margin-left: 4px;
}

.drill-frag__section-hdr {
  margin: 0 0 8px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-400); font-weight: 700;
}

.drill-frag__table {
  width: 100%; border-collapse: collapse; font-size: .8rem;
}
.drill-frag__table thead th {
  padding: 7px 12px;
  background: var(--c-slate-50);
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-500); font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--c-slate-200);
  white-space: nowrap;
}
.drill-frag__table thead th.num { text-align: right; }
.drill-frag__table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--c-slate-100);
  vertical-align: top;
}
.drill-frag__table tbody td.num {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.drill-frag__date {
  font-size: .76rem; white-space: nowrap;
  color: var(--c-slate-700);
}
.drill-frag__notes { font-size: .76rem; color: var(--c-slate-600); }
.drill-frag__tour {
  font-family: ui-monospace, monospace;
  font-size: .72rem; font-weight: 600;
  color: var(--c-ink);
  padding: 1px 6px;
  background: var(--c-ink-pale);
  border-radius: var(--r-sm);
  margin-right: 4px;
}
.drill-frag__tourname {
  font-size: .74rem; color: var(--c-slate-600);
}
.drill-frag__noteline {
  margin-top: 3px;
  font-size: .72rem; color: var(--c-slate-500); font-style: italic;
}
.drill-frag__by {
  font-size: .76rem; color: var(--c-slate-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 110px;
}

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

/* ── Bank Reconciliation (Phase 3.4) ─────────────────────────────────────
   Statement-entry strip + formula readout + journal-line table with a
   "cleared" tick column. Reuses .pnl-headline + .gl-table. */
.bank-rec-stmt {
  margin-bottom: 14px;
  padding: 14px 18px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
}
.bank-rec-stmt__row {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
}
.bank-rec-stmt__row label {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px;
}
.bank-rec-stmt__row label span {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-500); font-weight: 700;
}
.bank-rec-stmt__row label input {
  height: 34px; padding: 4px 10px;
  border: 1px solid var(--c-slate-200); border-radius: var(--r-sm);
  background: var(--c-surface); font-family: ui-monospace, monospace;
  font-size: .9rem; color: var(--c-slate-800);
}
.bank-rec-stmt__row label input:focus {
  outline: 0; border-color: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-ink-pale);
}

.bank-rec-formula {
  margin: 14px 0;
  padding: 14px 20px;
  background: var(--c-ink-pale);
  border: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
  border-radius: var(--r-md);
}
.bank-rec-formula__row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 0;
  font-size: .88rem; color: var(--c-slate-700);
}
.bank-rec-formula__row--total {
  border-top: 1px solid color-mix(in srgb, var(--c-ink) 18%, transparent);
  padding-top: 10px; margin-top: 6px;
  font-weight: 700; color: var(--c-slate-800);
}
.bank-rec-formula__row--check {
  border-top: 2px solid var(--c-ink);
  padding-top: 10px; margin-top: 4px;
  font-weight: 800; color: var(--c-ink);
}
.bank-rec-formula__val {
  font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.bank-rec-opening td {
  background: var(--c-slate-50);
  font-style: italic;
  color: var(--c-slate-500);
}
.bank-rec-cleared td {
  background: color-mix(in srgb, var(--c-success) 4%, var(--c-surface));
}
.bank-rec-tick {
  background: transparent; border: 0; padding: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bank-rec-tick svg { width: 18px; height: 18px; }

/* ── KNET 3-way Reconciliation (Phase 3.5) ───────────────────────────── */
.knet-st--pending  td { background: color-mix(in srgb, var(--c-warning) 6%, var(--c-surface)); }
.knet-st--cleared  td { background: color-mix(in srgb, var(--c-ink) 4%, var(--c-surface)); }
.knet-st--settled  td { background: color-mix(in srgb, var(--c-success) 4%, var(--c-surface)); }
.knet-jelink {
  display: inline-block;
  font-family: ui-monospace, monospace; font-size: .78rem;
  color: var(--c-ink); text-decoration: none; font-weight: 600;
}
.knet-jelink:hover { text-decoration: underline; }
.knet-jedate {
  margin-top: 2px;
  font-size: .7rem; color: var(--c-slate-400);
}
.knet-jenull {
  font-size: .76rem; color: var(--c-slate-400); font-style: italic;
}

/* ── Month-End Hub (Phase 3.7) ────────────────────────────────────────── */
.me-month-picker {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.me-month-picker label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-slate-500); font-weight: 700;
}
.me-period {
  margin-left: auto;
  font-size: .8rem; color: var(--c-slate-500);
  font-family: ui-monospace, monospace;
}

.me-readiness {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  margin-bottom: 22px;
}
.me-readiness--ready {
  background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface));
  border: 1px solid var(--c-success);
}
.me-readiness--pending {
  background: var(--c-ink-pale);
  border: 1px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
}
.me-readiness__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.me-readiness--ready  .me-readiness__icon { background: var(--c-success); color: #fff; }
.me-readiness--pending .me-readiness__icon { background: var(--c-ink); color: #fff; }
.me-readiness__icon svg { width: 22px; height: 22px; }
.me-readiness__title { font-size: 1.05rem; font-weight: 700; color: var(--c-slate-800); margin-bottom: 4px; }
.me-readiness__sub   { font-size: .82rem; color: var(--c-slate-600); }

.me-steps { display: flex; flex-direction: column; gap: 12px; }

.me-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.me-card:hover {
  border-color: var(--c-ink-pale);
  background: var(--c-slate-50);
  text-decoration: none;
}
.me-card--done   { border-left: 3px solid var(--c-success); }
.me-card--todo   { border-left: 3px solid var(--c-warning); }
.me-card--accent { border-left: 3px solid var(--c-ink); background: var(--c-ink-pale); }
.me-card__num {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-slate-50);
  color: var(--c-ink);
  border: 1px solid var(--c-slate-200);
  border-radius: 50%;
  font-family: ui-monospace, monospace; font-size: .92rem; font-weight: 700;
}
.me-card__body { flex: 1; min-width: 0; }
.me-card__title { font-size: .95rem; font-weight: 700; color: var(--c-slate-800); margin-bottom: 3px; }
.me-card__sub {
  font-size: .8rem; color: var(--c-slate-600);
  line-height: 1.45;
}
.me-card__sub strong { color: var(--c-slate-800); }
.me-card__detail {
  display: block; margin-top: 2px;
  font-size: .74rem; color: var(--c-slate-400);
}
.me-card__status { flex-shrink: 0; }

.me-card-group {
  background: var(--c-surface);
  border: 1px solid var(--c-slate-200);
  border-left: 3px solid var(--c-slate-300);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.me-card-group__hdr { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.me-card-group__items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 760px) { .me-card-group__items { grid-template-columns: 1fr; } }
.me-card-group__empty {
  padding: 12px; font-size: .82rem; color: var(--c-slate-400); font-style: italic;
}

.me-subcard {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--c-slate-50);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.me-subcard:hover {
  background: var(--c-surface);
  border-color: var(--c-ink-pale);
  text-decoration: none;
}
.me-subcard__name { flex: 1; min-width: 0; font-size: .84rem; }
.me-subcard__amt {
  font-family: ui-monospace, monospace;
  font-size: .9rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--c-slate-800);
}
.me-subcard__arrow {
  font-size: .9rem; color: var(--c-slate-400);
  margin-left: 4px;
}