/* ============================================================================
   EduzPortal — custom-admin.css
   One global stylesheet that turns plain Bootstrap markup into a premium,
   modern SaaS CRM dashboard. Light + dark themes, reusable components, no
   inline styles required in the pages. Drop this in and the app "just looks
   premium".
   ============================================================================ */

/* ---------- Design tokens — Material Design 3, seeded from the Sneater red ----------
   The component vocabulary below (buttons, cards, tabs, nav, fields) follows M3: tonal
   containers instead of tints, on-colors paired with every fill, flat surfaces with tonal
   elevation, pill buttons, 16px cards, 28px dialogs. Type stays Plus Jakarta Sans by the
   user's standing instruction — M3 permits a brand typeface in place of Roboto. */
:root {
  /* SNEATER design language: crisp red primary, navy sidebar, neutral grey plane. */
  --brand: #EF4444;
  --on-brand: #ffffff;
  --brand-600: #DC2626;
  --brand-700: #B91C1C;
  --brand-container: #FEE2E2;
  --on-brand-container: #B91C1C;
  --brand-soft: #FEF2F2;
  --on-brand-soft: #B91C1C;
  --brand-glow: rgba(239, 68, 68, .18);

  --ok: #0E9F6E;
  --warn: #F59E0B;
  --danger: #DC2626;
  --info: #0EA5E9;

  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --sidebar: #0f1f47;
  --sidebar-2: #17305f;
  --sidebar-text: #8FA0B5;
  --sidebar-active: #FFFFFF;

  --text: #111827;
  --heading: #0C1322;
  --text-muted: #6B7280;
  --border: #E7E9EE;
  --ink: #0C1322;

  --inverse-surface: #0C1322;
  --on-inverse: #F1F5F9;

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow: 0 4px 10px -2px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 28px -6px rgba(16, 24, 40, .16);

  --fs-2xs: .6875rem;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  --sidebar-w: 242px;
  --topbar-h: 62px;
  --font: "Manrope", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  --glass-1: #FFFFFF;
  --glass-2: #FAFBFC;
  --glass-solid: rgba(255, 255, 255, .92);
}

[data-theme="dark"] {
  --bg: #0A0F1A;
  --surface: #101827;
  --surface-2: #16203304;      /* replaced below */
  --surface-2: #172033;
  --sidebar: #080D16;
  --sidebar-2: #101827;
  --sidebar-text: #8FA0B5;
  --sidebar-active: #FFFFFF;

  --brand: #F87171;
  --on-brand: #ffffff;
  --brand-600: #FCA5A5;
  --brand-700: #FECACA;
  --brand-container: rgba(239, 68, 68, .18);
  --on-brand-container: #FECACA;
  --brand-soft: rgba(239, 68, 68, .16);
  --on-brand-soft: #FECACA;
  --brand-glow: rgba(239, 68, 68, .16);

  --text: #E5E9F0;
  --heading: #F1F5F9;
  --text-muted: #94A3B8;
  --border: rgba(148, 163, 184, .16);
  --ink: #101827;

  --inverse-surface: #E5E9F0;
  --on-inverse: #111827;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow: 0 4px 10px -2px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, .6);

  --glass-1: #101827;
  --glass-2: #0D1420;
  --glass-solid: rgba(16, 24, 39, .92);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(circle at top left, rgba(239, 68, 68, .10), transparent 32%),
    radial-gradient(circle at bottom right, rgba(6, 182, 212, .10), transparent 28%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

[data-theme="dark"] body {
  background-image: radial-gradient(circle at top left, rgba(239, 68, 68, .14), transparent 30%),
                    radial-gradient(circle at bottom right, rgba(6, 182, 212, .12), transparent 35%);
}

[data-theme="dark"] .content,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .toast-msg,
[data-theme="dark"] .noti-panel,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .table,
[data-theme="dark"] table.data {
  color: var(--text);
}

/* Bootstrap's own --bs-dropdown-bg stays white regardless of data-theme, so
   every dropdown (Settings menu, table row actions, …) rendered pale text on
   a white panel in dark mode. Give it the app's surface explicitly. */
[data-theme="dark"] .dropdown-menu {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: rgba(255, 255, 255, .04);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] table.data thead th {
  color: var(--text-muted);
  background: rgba(255, 255, 255, .04);
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] table.data td,
[data-theme="dark"] table.data th {
  color: var(--text);
  border-color: var(--border);
}

[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] table.data tbody tr:hover {
  background: rgba(239, 68, 68, .16);
}

/* ---------- Scrollbar polish ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(239, 68, 68, .45), rgba(220, 38, 38, .72));
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(239, 68, 68, .6), rgba(220, 38, 38, .85));
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(239, 68, 68, .7) transparent;
}

a { text-decoration: none; color: var(--brand); }

/* ============================================================================
   Layout: sidebar + topbar + content
   ============================================================================ */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  color: var(--text);
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 1030;
  transition: transform .25s ease;
  border-right: 1px solid var(--border);
}

.sidebar__brand {
  height: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  color: var(--text);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: .2px;
  border-bottom: 1px solid var(--border);
}
.sidebar__brand .logo {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--ink);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--fs-lg);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .22);
  flex-shrink: 0;
}
.sidebar__brand small { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); letter-spacing: .2px; }

.sidebar__nav { padding: 14px 12px; overflow-y: auto; flex: 1; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .3); }
.sidebar__section {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); margin: 18px 12px 8px; font-weight: 700;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; margin: 3px 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-weight: 600; font-size: var(--fs-base);
  transition: background .18s ease, color .18s ease;
  cursor: pointer;
}
.nav-item i { font-size: var(--fs-lg); width: 22px; text-align: center; }
/* Dark, not brand-tinted — a pale/pastel branch colour made this unreadable on hover. */
.nav-item:hover { background: var(--brand-soft); color: var(--text); }
.nav-item.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .20);
}
.nav-item.active:hover { background: var(--ink); color: #fff; }
.nav-item.active i { color: #fff; }
/* Count badge on a nav item (e.g. Leads · 12) */
.nav-badge { margin-left: auto; background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); font-size: var(--fs-xs); font-weight: 800; padding: 1px 9px; border-radius: var(--radius-pill); }
.nav-item.active .nav-badge { background: rgba(255,255,255,.25); color: #fff; }

.nav-group { display: flex; flex-direction: column; gap: 0; }
.nav-toggle {
  background: none;
  border: none;
  padding: 11px 14px;
  margin: 3px 0;
  width: 100%;
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .18s ease, color .18s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-toggle i:first-child { font-size: var(--fs-lg); width: 22px; text-align: center; }
.nav-toggle:hover {
  background: var(--brand-soft);
  color: var(--text);
}
.nav-toggle i:last-child {
  transition: transform .2s ease;
}
.nav-toggle[aria-expanded="true"] i:last-child {
  transform: rotate(90deg);
}

.nav-submenu {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 0 8px 0;
  margin: 0;
}
.nav-submenu.show {
  display: flex;
}

.nav-subitem {
  display: flex;
  align-items: center;
  padding: 10px 14px 10px 44px;
  margin: 0;
  border-radius: 0 12px 12px 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: 500;
  transition: background .18s ease, color .18s ease;
  cursor: pointer;
  border: none;
  background: none;
  text-decoration: none;
}
.nav-subitem:hover {
  background: var(--brand-soft);
  color: var(--text);
}
.nav-subitem.active {
  background: var(--brand-soft);
  color: var(--on-brand-soft, var(--brand-600));
  font-weight: 600;
  border-left: 3px solid var(--brand);
  padding-left: 41px;
}

/* ---------- Drag & drop upload zone (media video thumbnail / banner) ---------- */
.dropzone {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.dragover { border-color: var(--on-brand-soft, var(--brand)); background: var(--brand-soft); }
.dropzone__hint { color: var(--text-muted); font-weight: 700; }
.dropzone__name { color: var(--text); font-weight: 600; font-size: var(--fs-base); }
.dropzone__thumb { width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border); }

/* Sidebar footer — "Settings · Manage workspace" card (PDF look). */
.sidebar__foot { padding: 12px; border-top: 1px solid var(--border); flex: 0 0 auto; }
.settings-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.settings-card:hover { background: var(--brand-soft); border-color: var(--on-brand-soft, var(--brand)); color: var(--text); box-shadow: var(--shadow-sm); }
.settings-card__ic {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--fs-lg);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
}
.settings-card:hover .settings-card__ic { color: var(--brand); border-color: var(--brand); }
.settings-card__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.settings-card__title { font-weight: 700; font-size: var(--fs-base); }
.settings-card__sub { font-size: var(--fs-xs); color: var(--text-muted); }

.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition: margin-left .25s ease;
}

/* Collapsed (drawer closed) on desktop — hide the sidebar, content fills width.
   Scoped to desktop so it never conflicts with the mobile off-canvas .open state. */
@media (min-width: 769px) {
  .app.sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .app.sidebar-collapsed .main { margin-left: 0; }
}

/* ============================================================================
   Horizontal top navigation (replaces the left sidebar app-wide)
   ============================================================================ */
.app.horizontal-nav .sidebar { display: none; }
.app.horizontal-nav .main { margin-left: 0; }
.app.horizontal-nav .topbar { height: auto; padding: 0; display: block; gap: 0; }

.topnav { display: flex; flex-direction: column; width: 100%; }
.topnav__bar { display: flex; align-items: center; gap: 20px; padding: 12px 24px; }
.topnav__brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; flex-shrink: 0; }
.topnav__brand .logo {
  width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--ink);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-lg);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .22);
}
.topnav__brandtxt { display: flex; flex-direction: column; line-height: 1.05; }
.topnav__name { font-weight: 800; font-size: var(--fs-lg); }
.topnav__tag { font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); }
/* "Agent" tag on a lead the branch received from a referral partner. */
.agent-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 700;
  color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
}
@media (prefers-color-scheme: dark) {
  .agent-tag { color: #fde68a; background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .35); }
}
:root[data-theme="dark"] .agent-tag { color: #fde68a; background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .35); }
:root[data-theme="light"] .agent-tag { color: #92400e; background: #fef3c7; border-color: #fcd34d; }

/* A branch's own uploaded logo in the top bar. Constrained so any aspect ratio sits cleanly. */
.topnav__brand .brand-logo-img { max-height: 44px; max-width: 200px; object-fit: contain; display: block; }
/* "Your Logo" placeholder mark — a dashed, muted version of the brand tile. */
.topnav__brand .logo--ghost {
  background: transparent; color: var(--text-muted);
  border: 1.5px dashed var(--border); box-shadow: none; font-size: var(--fs-lg);
}
.topnav__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.topnav__user {
  display: flex; align-items: center; gap: 10px; background: none; border: none;
  cursor: pointer; padding: 5px 8px; border-radius: var(--radius-sm); color: var(--text);
  transition: background .15s ease;
}
.topnav__user:hover { background: var(--surface-2); }

.topnav__menu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 2px 16px; border-top: 1px solid var(--border);
}
.topnav__item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 13px 15px; border-radius: 10px 10px 0 0; font-weight: 600; font-size: var(--fs-base);
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color .15s ease, background .15s ease;
}
.topnav__item i:first-child { font-size: var(--fs-md); }
.topnav__item:hover { color: var(--brand-600); }
.topnav__item.active { color: var(--brand-600); border-bottom-color: var(--brand); }
.topnav__group { position: relative; }
/* The dropdown inherited Bootstrap's 1rem, which read a size larger than the nav item that
   opens it. Everything below matches .topnav__item's typography so the menu reads as part of
   the nav rather than as a separate control. */
.topnav__menu .dropdown-menu {
  border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  padding: 6px; min-width: 210px; font-size: var(--fs-base);
}
.topnav__menu .dropdown-item {
  display: flex; align-items: center; gap: 8px;
  border-radius: var(--radius-xs); padding: 9px 12px;
  font-size: var(--fs-base); font-weight: 600; line-height: 1.35;
}
.topnav__menu .dropdown-item i { font-size: var(--fs-md); width: 18px; text-align: center; }
.topnav__menu .dropdown-item.active { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }

/* Group labels inside the Settings menu ("Accounts", "Universities & Boards"…). */
.topnav__menu .dropdown-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 4px; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.topnav__menu .dropdown-header i { font-size: var(--fs-base); }

.topbar {
  height: var(--topbar-h);
  background: var(--glass-solid);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  position: sticky; top: 0; z-index: 1020;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .04);
}
.topbar__title { font-weight: 700; font-size: var(--fs-md); }
.topbar__spacer { flex: 1; }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); display: grid; place-items: center;
  cursor: pointer; transition: .15s;
}
.icon-btn:hover { color: var(--on-brand-soft, var(--brand)); border-color: var(--on-brand-soft, var(--brand)); background: var(--brand-soft); }

.avatar {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff; display: grid; place-items: center; font-weight: 700;
}

.content { padding: 28px 24px 44px; max-width: 1520px; margin: 0 auto; width: 100%; }
/* Opt-in for pages that should use the full viewport width instead of the centered 1520px column. */
.content.content-fluid { max-width: none; }
.page-head {
  margin-bottom: 16px;
  padding: 2px 2px 14px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Breadcrumb above the page title (e.g. "Leads › Academic Leads"). */
.crumb { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.crumb a { color: var(--brand-600); font-weight: 600; }
.crumb i { font-size: var(--fs-xs); }
.page-head h1 {
  font-size: var(--fs-xl);
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -.02em;
  position: relative;
  display: inline-block;
}
.page-head h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 64px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand), #22d3ee);
}
.page-head p { color: var(--text-muted); margin: 8px 0 0; font-size: var(--fs-md); }

/* ============================================================================
   Cards
   ============================================================================ */
.card {
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
/* Cards that only wrap a table sit flush — the table supplies its own padding. */
.card:has(> .table-wrap:only-child) { padding: 0; overflow: hidden; }
/* Cards using an explicit .card-body / .card-header keep their own padding. */
.card:has(> .card-body) { padding: 0; }
.card-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  font-weight: 700; display: flex; align-items: center; justify-content: space-between;
}
.card-body { padding: 20px; }

/* Stat widgets */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.stat__top { display: flex; align-items: flex-start; justify-content: space-between; }
.stat__icon {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: var(--fs-lg);
  flex-shrink: 0;
}
.stat__icon.b { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }
.stat__icon.g { background: rgba(16, 185, 129, .12); color: #059669; }
.stat__icon.o { background: rgba(245, 158, 11, .14); color: #b45309; }
.stat__icon.r { background: rgba(239, 68, 68, .12); color: #dc2626; }
.stat__trend { font-size: var(--fs-xs); font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 3px; }
.stat__trend.up { background: rgba(16, 185, 129, .12); color: #059669; }
.stat__trend.flat { background: var(--surface-2); color: var(--text-muted); }
.stat__value { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat__label { color: var(--text-muted); font-size: var(--fs-base); font-weight: 600; margin-top: 5px; }

/* Same card, shrunk. For rows that carry a tile per stream (followups: 5 streams x today/overdue),
   where ten full-size tiles cost a whole screen to say what fits in two rows. */
.stat--sm { padding: 14px 16px; gap: 10px; border-radius: var(--radius-sm); }
.stat--sm .stat__icon { width: 32px; height: 32px; font-size: var(--fs-base); border-radius: 9px; }
.stat--sm .stat__trend { font-size: 10px; padding: 2px 7px; }
.stat--sm .stat__value { font-size: 1.6rem; }
.stat--sm .stat__label { font-size: var(--fs-sm); margin-top: 3px; }
.stat--sm:hover { transform: translateY(-2px); }
/* Laid out in a Bootstrap row/col — stretch to the column so tiles in a row share one height
   whether the label runs to one line or two. */
.stat--sm { height: 100%; }

/* ---------- Topbar search ---------- */
.topbar__search { flex: 1; max-width: 520px; position: relative; }
.topbar__search input {
  width: 100%; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); padding: 0 46px 0 42px; font-size: var(--fs-base); font-family: var(--font);
}
.topbar__search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface); }
.topbar__search input::placeholder { color: var(--text-muted); }
.topbar__search .tsi { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--fs-md); pointer-events: none; }
.topbar__search kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: var(--fs-2xs); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 2px 6px; font-family: var(--font); }

/* ---------- Dashboard bar chart ---------- */
.barchart { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 230px; padding-top: 20px; }
.barchart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.barchart .bar__val { font-size: var(--fs-sm); font-weight: 700; color: var(--brand-600); }
.barchart .bar__fill { width: 100%; max-width: 46px; border-radius: 10px 10px 4px 4px; background: color-mix(in srgb, var(--brand) 22%, transparent); transition: height .4s ease; min-height: 6px; }
.barchart .bar.peak .bar__fill { background: linear-gradient(180deg, var(--brand), var(--brand-600)); }
.barchart .bar__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }

/* ---------- Dashboard donut ---------- */
.donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.donut { position: relative; width: 180px; height: 180px; border-radius: 50%; }
.donut__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut__center b { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.donut__center span { font-size: var(--fs-sm); color: var(--text-muted); }
.legend { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.legend__row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); }
.legend__row .swatch { width: 11px; height: 11px; border-radius: 3px; }
.legend__row .legend__val { margin-left: auto; font-weight: 800; }

/* ============================================================================
   Tables
   ============================================================================ */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-base);
}
table.data thead th {
  text-align: left; padding: 13px 16px;
  color: var(--text-muted); font-weight: 800; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .09em;
  background: linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.96));
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
table.data tbody tr {
  transition: background .15s ease, transform .15s ease;
}
table.data tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 9%, transparent);
}
table.data tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--brand) 3.5%, transparent);
}
table.data tbody tr.selected {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
}

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

.table-actions .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  padding: 0;
}

.table-actions .icon-btn:hover {
  transform: translateY(-1px);
}
table.data tbody tr.selected { background: color-mix(in srgb, var(--brand) 14%, transparent); }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-primary { font-weight: 600; }
.cell-sub { color: var(--text-muted); font-size: var(--fs-sm); }

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

.table-actions .icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  padding: 0;
}

.table-actions .icon-btn:hover {
  transform: translateY(-1px);
}

/* ============================================================================
   Badges / status labels
   ============================================================================ */
.badge-soft {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1;
}
.badge-soft .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-b { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }
.badge-g { background: rgba(16, 185, 129, .12); color: #059669; }
.badge-o { background: rgba(245, 158, 11, .14); color: #b45309; }
.badge-r { background: rgba(239, 68, 68, .12); color: #dc2626; }
.badge-n { background: rgba(100, 116, 139, .14); color: #475569; }
/* status label whose colour comes from the DB (inline custom prop) */
.status-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700;
  background: color-mix(in srgb, var(--c, #64748b) 14%, transparent);
  color: var(--c, #64748b);
}
.status-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #64748b); }
.country-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; margin: 2px; border-radius: var(--radius-xs);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 600;
}

/* ============================================================================
   Buttons / forms  (extend Bootstrap without inline styles)
   ============================================================================ */
.btn { border-radius: var(--radius-pill); font-weight: 700; padding: .62rem 1.1rem; letter-spacing: .01em; }
.btn-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 10px 24px var(--brand-glow);
}
.btn-brand:hover {
  background: linear-gradient(135deg, var(--brand-600), var(--brand));
  border-color: var(--brand-600);
  color: #fff;
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--glass-solid);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--on-brand-soft, var(--brand)); color: var(--on-brand-soft, var(--brand)); background: var(--brand-soft); }

.form-control, .form-select {
  border-radius: var(--radius); border: 1px solid var(--border);
  background: rgba(255,255,255,.94); color: var(--text); padding: .7rem .85rem;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); background: var(--surface);
}
.form-label { font-weight: 600; font-size: var(--fs-base); margin-bottom: 6px; color: var(--text); }

/* Tabs (segmented) */
.tabs {
  display: inline-flex; gap: 4px; padding: 6px;
  background: linear-gradient(180deg, var(--glass-2), var(--glass-1));
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  /* A strip can be wider than a phone (Document Settings' four tabs are 551px on a 365px screen).
     Scroll it inside its own pill rather than let it push the whole page sideways. No effect on
     wider screens, where the tabs already fit and no scrollbar appears. */
  max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-base);
  color: var(--text-muted); cursor: pointer; border: none; background: transparent;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
  flex: 0 0 auto; white-space: nowrap;   /* never squash a tab to fit — the strip scrolls instead */
}
.tab i { font-size: var(--fs-md); }
.tab:hover:not(.active) { color: var(--text); background: color-mix(in srgb, var(--brand) 8%, transparent); transform: translateY(-1px); }
.tab.active { background: var(--surface); color: var(--brand-600); box-shadow: var(--shadow-sm); }
/* Per-tab count pill. Hidden until it has a number. */
.tab-badge {
  display: none; min-width: 18px; padding: 0 6px; margin-left: 4px;
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 800; line-height: 18px; text-align: center;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-600);
}
.tab-badge:not(:empty) { display: inline-block; }
.tab.active .tab-badge { background: color-mix(in srgb, var(--brand) 22%, transparent); }

/* ============================================================================
   Login
   ============================================================================ */
.auth {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 10% -10%, var(--brand) 0%, transparent 55%),
              radial-gradient(1000px 700px at 110% 110%, var(--brand-container) 0%, transparent 50%),
              var(--bg);
}
.auth__card {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 34px;
}
.auth__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; color: var(--brand); font-weight: 800; font-size: var(--fs-xl); }
.auth__brand .logo {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: var(--fs-xl);
  box-shadow: 0 12px 28px var(--brand-glow);
  flex-shrink: 0;
}
.auth__brand--logo-only {
  justify-content: center;
  margin-bottom: 24px;
}
.auth__logo-img {
  display: block;
  width: min(260px, 100%);
  max-height: 92px;
  object-fit: contain;
}

/* Utilities */
.muted { color: var(--text-muted); }
.grid-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* Long labels ("Counselling · Overdue") must wrap inside the narrow tile, never push it wider. */
.stat--sm .stat__label { overflow-wrap: anywhere; }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.mt-18 { margin-top: 18px; }
.spinner-wrap { display: grid; place-items: center; padding: 40px; color: var(--text-muted); }
.empty { text-align: center; color: var(--text-muted); padding: 40px 20px; }
.toast-host { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast-msg {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 12px 16px; min-width: 240px; font-weight: 500;
}
.toast-msg.err { border-left-color: var(--danger); }
.toast-msg.ok { border-left-color: var(--ok); }

/* Connection-lost banner (api.js's auto-retry) — one persistent, centered bar above everything
   (including modals) while the API is unreachable; hides itself the moment a retry gets through. */
.conn-lost-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--danger); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); padding: 10px 12px 10px 18px;
  z-index: 2500; font-weight: 600; font-size: var(--fs-base);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.conn-lost-banner.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.conn-lost-banner i { color: var(--danger); font-size: var(--fs-lg); }
.conn-lost-banner__msg { color: var(--text); white-space: nowrap; }
.conn-lost-banner__count { color: var(--danger); }
.conn-lost-banner__btn { white-space: nowrap; }

/* The drawer toggle is always available (desktop collapse + mobile off-canvas). */
.sidebar__toggle { display: grid; }

/* Floating row-action menu (body-anchored so the table's overflow never clips it). */
.action-menu {
  position: fixed; z-index: 3000; min-width: 172px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px;
}
.action-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius-xs); color: var(--text);
  font-size: var(--fs-base); font-weight: 600;
}
.action-menu button i { font-size: var(--fs-md); width: 18px; text-align: center; }
.action-menu button:hover { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }
.action-menu button.danger:hover { background: rgba(239, 68, 68, .12); color: #dc2626; }

/* ---------- User dropdown ---------- */
#userDropdownBtn:hover {
  background: var(--surface-2) !important;
}

.dataTables_wrapper {
  padding: 16px 14px 8px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 16px;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-base);
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.93));
  color: var(--text);
  padding: 0.62rem 0.9rem;
  min-height: 40px;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03), var(--shadow-sm);
  cursor: pointer;
  transition: all .15s ease;
}

.dataTables_wrapper .dataTables_length select:hover {
  border-color: var(--brand);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03), 0 0 0 3px var(--brand-soft);
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.93));
  color: var(--text);
  padding: 0.62rem 1rem;
  min-height: 40px;
  font-weight: 500;
  font-size: var(--fs-base);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03), var(--shadow-sm);
  transition: all .15s ease;
  min-width: 260px;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
  color: var(--text-muted);
}

.dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03), 0 0 0 4px var(--brand-soft);
}

.dataTables_wrapper .dataTables_info {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-base);
  margin-bottom: 14px;
}

.dataTables_wrapper .dataTables_paginate {
  margin-bottom: 0;
  text-align: right;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94)) !important;
  color: var(--text) !important;
  margin: 0 3px;
  padding: 0.5rem 0.8rem !important;
  font-weight: 700;
  font-size: var(--fs-base);
  box-shadow: var(--shadow-sm) !important;
  transition: all .15s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  border-color: var(--brand) !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-600)) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px var(--brand-glow) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, var(--brand), var(--brand-600)) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px var(--brand-glow) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .15);
  color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .15) !important;
}
.dropdown-item {
  color: var(--text) !important;
}
.dropdown-item:hover {
  background: var(--brand-soft) !important;
  color: var(--on-brand-soft, var(--brand)) !important;
}
#logoutBtn:hover {
  background: #fef2f2 !important;
  color: var(--danger) !important;
}
[data-theme="dark"] #logoutBtn:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* ---------- SweetAlert2 (themed to match the app) ---------- */
.swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .5); }
.swal2-popup.ep-swal {
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  font-family: var(--font);
  padding: 28px 26px 24px;
  width: 32em; max-width: 94vw;
}
.ep-swal .swal2-title { color: var(--text); font-weight: 800; font-size: var(--fs-xl); padding: 6px 0 0; }
.ep-swal .swal2-html-container { color: var(--text-muted); font-size: var(--fs-md); margin-top: 8px; }
.ep-swal .swal2-actions { gap: 10px; margin-top: 22px; width: 100%; }
.ep-swal .swal2-actions .btn { min-width: 120px; padding: .6rem 1.2rem; }
.ep-swal .swal2-input,
.ep-swal .swal2-textarea,
.ep-swal .swal2-select {
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: none;
  font-size: var(--fs-md); margin: 10px 0 0; padding: .6rem .85rem; font-family: var(--font);
}
.ep-swal .swal2-input:focus,
.ep-swal .swal2-textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none;
}
.ep-swal .swal2-input::placeholder { color: var(--text-muted); }
.ep-swal .swal2-validation-message {
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger); font-weight: 600;
}
.ep-swal .swal2-close { color: var(--text-muted); box-shadow: none !important; }
.ep-swal .swal2-close:hover { color: var(--danger); }
/* Status icons recoloured to the theme palette */
.ep-swal .swal2-icon { border-width: 3px; }
.ep-swal .swal2-icon.swal2-success { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.ep-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ep-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ok); }
.ep-swal .swal2-icon.swal2-warning { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.ep-swal .swal2-icon.swal2-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.ep-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--danger); }
.ep-swal .swal2-icon.swal2-info { border-color: color-mix(in srgb, var(--info) 45%, transparent); color: var(--info); }
.ep-swal .swal2-icon.swal2-question { border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: var(--brand); }

/* ---------- Notifications (bell + dropdown) ---------- */
.noti { position: relative; }
.noti-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--danger); color: #fff;
  font-size: var(--fs-2xs); font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface); pointer-events: none;
}
.noti-panel {
  position: absolute; top: calc(100% + 12px); right: 0; width: 384px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); overflow: hidden; display: none; z-index: 1000;
}
.noti-panel.open { display: block; animation: notiIn .16s ease; }
@keyframes notiIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.noti-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.noti-panel__title { font-weight: 800; font-size: var(--fs-md); }
.noti-markall {
  border: none; background: transparent; color: var(--text-muted); cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--radius-xs); display: grid; place-items: center; font-size: var(--fs-lg);
}
.noti-markall:hover { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); }
.noti-list { max-height: 62vh; overflow-y: auto; }
.noti-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s;
}
.noti-item:last-child { border-bottom: none; }
.noti-item:hover { background: var(--surface-2); }
.noti-item.unread { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.noti-ic {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: var(--fs-lg);
}
.noti-ic.b { background: linear-gradient(135deg, var(--brand), #818cf8); }
.noti-ic.g { background: linear-gradient(135deg, var(--ok), #34d399); }
.noti-ic.o { background: linear-gradient(135deg, var(--warn), #fbbf24); }
.noti-ic.r { background: linear-gradient(135deg, var(--danger), #fb7185); }
.noti-body { flex: 1; min-width: 0; }
.noti-title { font-weight: 700; font-size: var(--fs-base); color: var(--text); }
.noti-msg { color: var(--text-muted); font-size: var(--fs-sm); margin: 2px 0; line-height: 1.35; }
.noti-time { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 500; }
.noti-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); margin-top: 7px; flex-shrink: 0; }
.noti-item:not(.unread) .noti-dot { visibility: hidden; }
.noti-panel__foot { padding: 13px; text-align: center; border-top: 1px solid var(--border); background: var(--surface-2); }
.noti-panel__foot a { font-weight: 700; font-size: var(--fs-base); color: var(--brand); }
.noti-panel__foot a:hover { color: var(--brand-600); }
@media (max-width: 480px) {
  .noti-panel { position: fixed; top: var(--topbar-h); right: 8px; left: 8px; width: auto; }
}

/* ---------- Workflow pipeline ---------- */
/* Flex and grid children default to min-width:auto, so they refuse to shrink below their content's
   min-content width. A wide child (the 10-step .pipeline is 1200px min-content) therefore drags its
   whole card past the viewport on a phone instead of scrolling inside its own overflow-x container.
   Letting these shrink to 0 is what makes overflow-x:auto actually engage. */
.card-body,
.detail-grid > * { min-width: 0; }

.pipeline { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 8px 0; max-width: 100%; }
.pipe-step { display: flex; flex-direction: column; align-items: center; min-width: 120px; position: relative; text-align: center; }
.pipe-step:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 3px;
  background: var(--border); z-index: 0;
}
.pipe-step.done::after { background: var(--ok); }
.pipe-dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 3px solid var(--border); color: var(--text-muted);
  font-weight: 700; font-size: var(--fs-base); z-index: 1; position: relative;
}
.pipe-step.done .pipe-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.pipe-step.current .pipe-dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.pipe-label { margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; max-width: 110px; }
/* A completed step is clickable — it opens a read-only review of what was done there. */
.pipe-step--link { cursor: pointer; }
.pipe-step--link:hover .pipe-dot,
.pipe-step--link:focus-visible .pipe-dot { transform: scale(1.12); box-shadow: 0 0 0 4px var(--ok-soft, rgba(16, 185, 129, .22)); }
.pipe-step--link .pipe-dot { transition: transform .12s ease, box-shadow .12s ease; }
.pipe-step--link:hover .pipe-label { text-decoration: underline; }

/* --- Move-to-step / Status / Note / Advance bar (visa application "Manage" panel) --- */
.advance-bar {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
}
.advance-field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.advance-field--note { flex: 1 1 240px; }
.advance-field .form-label {
  margin-bottom: 0; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.advance-field .form-select, .advance-field .form-control { background: var(--surface); }
.advance-btn {
  white-space: nowrap; padding: 11px 22px; border-radius: var(--radius-sm); font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.advance-btn i { font-size: .9em; }

/* --- Step document checklist (Document Settings wired to the current pipeline step) --- */
.doc-checklist { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--surface); }
.doc-req-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.doc-req-row:first-of-type { border-top: 0; padding-top: 2px; }
.doc-req-info { min-width: 200px; flex: 1; }
.doc-req-name { font-weight: 600; font-size: var(--fs-base); display: flex; align-items: center; flex-wrap: wrap; }
.doc-req-status { flex: 0 0 auto; }
.doc-req-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pipe-step.current .pipe-label { color: var(--brand-600); }

/* Detail two-column */
.detail-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-base); }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--text-muted); }
.info-row .v { font-weight: 600; text-align: right; }
.timeline { position: relative; padding-left: 22px; }
.timeline-item { position: relative; padding: 0 0 16px 14px; border-left: 2px solid var(--border); }
.timeline-item:last-child { border-left-color: transparent; }
.timeline-item::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface); }
@media (max-width: 992px) { .detail-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   Global component polish — default look for every page (no inline styles)
   ============================================================================ */
/* Modals inherit the app theme automatically */
.modal-content {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--glass-1), var(--glass-2));
  color: var(--text); box-shadow: var(--shadow-lg); backdrop-filter: blur(16px);
}
.modal-header, .modal-footer { border-color: var(--border); padding: 18px 22px; }
.modal-title { font-weight: 800; letter-spacing: -.01em; }
.modal-header .btn-close { filter: none; opacity: .8; }
.modal-backdrop.show { backdrop-filter: blur(6px); background: rgba(15, 23, 42, .55); }
[data-theme="dark"] .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* Brand-coloured checkboxes / switches */
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* Selects get a custom caret so they match text inputs */
select.form-control, .form-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 15px;
  padding-right: 2.2rem;
}

/* Section bar: a title with an action button on the right, inside a pane */
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-bar h2 { font-size: var(--fs-md); font-weight: 800; margin: 0; }
.section-bar .cell-sub { max-width: 640px; }

/* Vertical rhythm so pages don't need inline margins between blocks */
.card + .card { margin-top: 16px; }
.stack > * + * { margin-top: 16px; }
.tabs + * { margin-top: 4px; }

/* Icon buttons line up a touch tighter in action cells */
table.data td .icon-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .grid-stats { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .dataTables_wrapper {
    padding: 10px 6px 6px;
  }

  .dataTables_wrapper .dataTables_filter {
    float: none;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: center;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 3px 2px;
  }

  table.data thead {
    display: none;
  }

  table.data tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  table.data tbody td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

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

  table.data tbody td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: .06em;
  }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .sidebar__toggle { display: grid; }
  .grid-stats { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   Colleges & Universities — the Add Uni & Programs form
   ============================================================================ */

/* The small "+" that sits inside a field's label and adds a missing dropdown value. */
.linkplus {
  border: 0; background: none; padding: 0 0 0 4px; cursor: pointer;
  color: var(--brand); font-weight: 800; font-size: var(--fs-md); line-height: 1;
}
.linkplus:hover { color: var(--ink, #16224a); }

/* The black "+" that appends another program block, per the design. */
.btn-ink { background: #111827; color: #fff; min-width: 44px; }
.btn-ink:hover { background: #1f2937; color: #fff; }

.program-block { position: relative; }
.program-remove { position: absolute; top: 10px; right: 10px; }

/* Language-score grid: a test per row, its components as labelled cells. */
.score-grid { display: flex; flex-direction: column; gap: 10px; }
.score-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px;
}
.score-test {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  font-weight: 700; text-align: center; border-right: 1px solid var(--border); padding-right: 8px;
}
.score-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.score-cell { min-width: 0; }
.score-head {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.score-cell .form-control { padding: 6px 8px; }

/* Radio "cards" (Full day / Half day / Custom, Yes / No …). The whole card is the label,
   so the click target is the card rather than the 14px dot. */
.opt-card {
  display: flex; align-items: center; gap: 10px; cursor: pointer; height: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px;
  font-weight: 600; transition: border-color .15s, background .15s;
}
.opt-card:hover { background: var(--surface-2, #fafafa); }
.opt-card input { margin: 0; flex: none; }
.opt-card.checked { border-color: var(--brand, #EF4444); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.opt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.opt-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px) { .opt-grid, .opt-grid.two { grid-template-columns: 1fr; } }

/* ---------- Agreements ---------- */
/* Form on the left, counters + per-country groups on the right. */
.agreement-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .agreement-layout { grid-template-columns: 1fr; } }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat-tile { text-align: center; }
.stat-tile .icon {
  width: 62px; height: 62px; margin: 0 auto 10px; border-radius: var(--radius);
  display: grid; place-items: center; font-size: var(--fs-xl);
}
.stat-tile .label { font-size: var(--fs-base); color: var(--text-muted, #6b7280); font-weight: 600; }
.stat-tile .value { font-size: var(--fs-xl); font-weight: 800; margin-top: 2px; }

/* One hue per state, used by both the tile and the row badge. */
.tone-total  { background: #e7f6ee; color: #0f7a45; }
.tone-active { background: #e3f4fb; color: #0e7fa8; }
.tone-expired{ background: #fdeaea; color: #c0392b; }
.tone-expiring{ background: #fef6e0; color: #b7791f; }

.country-group + .country-group { margin-top: 14px; }
.country-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; background: none; border: 0; padding: 4px 2px; text-align: left;
}
.country-head .flag { font-size: var(--fs-xl); line-height: 1; }
.country-head .name { font-weight: 700; font-size: var(--fs-md); }
.country-head .count { text-align: right; font-size: var(--fs-sm); color: var(--text-muted, #6b7280); }
.country-head .count b { display: block; font-size: var(--fs-md); color: var(--text, #111); }
.country-head .chev { transition: transform .18s; }
.country-head[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* ---------- Search field (icon inside the input + a clear button) ---------- */
.search-field { position: relative; display: block; }
.search-field > i.bi-search {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: var(--fs-base); pointer-events: none;
}
.search-field .form-control { padding-left: 40px; padding-right: 38px; }
/* The native search "x" is inconsistent across browsers — we render our own. */
.search-field input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--text-muted);
  width: 26px; height: 26px; border-radius: var(--radius-pill); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs);
}
.search-clear:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Per-user permission matrix ---------- */
.perm-legend {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-muted);
}
.perm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.perm-dot--role { background: var(--text-muted); }
.perm-dot--allow { background: var(--ok); }
.perm-dot--deny { background: var(--danger); }
/* A cell whose state differs from the role gets tinted, so overrides are obvious at a glance. */
.perm-cell { text-align: center; }
.perm-cell.is-allow { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.perm-cell.is-deny { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.perm-mod { font-weight: 700; }
.perm-mod small { display: block; font-weight: 500; color: var(--text-muted); font-size: var(--fs-2xs); }

/* Date-range preset pill ("Last 15 days ▾") that sits with the filter row. */
.range-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--brand, #EF4444); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand, #EF4444);
  font-weight: 700; font-size: var(--fs-base); padding: 9px 16px; white-space: nowrap;
}
.range-pill:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.range-pill::after { margin-left: 2px; }
/* When the pill fills a filter-grid cell, centre its label and match the selects' height. */
.range-pill.w-100 { justify-content: center; min-height: 44px; }
#rangeMenu .dropdown-item.active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand, #EF4444); font-weight: 600; }

/* The "— / Total Leave Duration" summary strip under the date pickers. */
.duration-strip {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 18px;
}
.duration-strip .val { font-size: var(--fs-lg); font-weight: 800; color: var(--brand, #EF4444); }

/* Eligibility is a short checkbox list, while the score grid carries five columns per test.
   The generic .grid-2 splits 2fr/1fr — the wrong way round here — so this pair has its own. */
.program-panels {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.65fr);
  gap: 18px;
  align-items: start;
}

@media (max-width: 992px) {
  .program-panels { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .score-row { grid-template-columns: 1fr; }
  .score-test { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 6px; }
  .score-cells { grid-template-columns: repeat(2, 1fr); }
}

/* Position number beside a document in the Document Settings requirement list. */
.pos-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-xs);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted);
}

/* Multi-pick document list in the Add Documents modal. */
.doc-picklist {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px;
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
}
.doc-pick { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: var(--fs-base); }
.doc-pick input { width: 16px; height: 16px; }
@media (max-width: 560px) { .doc-picklist { grid-template-columns: 1fr; } }

/* ---------- Daily Material ---------- */
.material-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.material-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease;
}
.material-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* Posts are square by design, so reserve the space and never let a stray size shift the grid. */
.material-card__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--brand-soft); }
.material-card__body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.material-card__body .btn { margin-top: auto; }
.material-card__caption {
  margin: 6px 0 0; font-size: var(--fs-base); color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============================================================================
   DataTables — dressed as part of the panel, not as a library
   ----------------------------------------------------------------------------
   DataTables 2.x wraps the table in .dt-container and injects a length select, a
   search box, an info line and paging buttons. Left alone these carry the library's
   own chrome, which reads as unfinished next to the rest of the admin. Everything
   below re-skins those five pieces with the panel's own inputs, ghost buttons and
   header typography — no markup changes, so it applies to every table we mount.
   ============================================================================ */
.dt-container { --dt-row-selected: 99, 91, 255; }

/* --- layout: controls above and below, breathing room around the table --- */
.dt-container .dt-layout-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.dt-container .dt-layout-row.dt-layout-table { display: block; }
.dt-container > .dt-layout-row:first-child { margin: 0 0 16px; }
.dt-container > .dt-layout-row:last-child {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
}
.dt-container .dt-layout-cell { display: flex; align-items: center; gap: 10px; }
.dt-container .dt-layout-cell.dt-layout-full { flex: 1; }

/* --- length select: a compact pill, label folded into it --- */
.dt-container .dt-length {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
}
.dt-container .dt-length select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 30px 8px 12px; min-width: 74px;
  background: var(--surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E") no-repeat right 9px center/14px;
  color: var(--text); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* --- search: a plain bordered field. An earlier version painted a magnifying-glass icon as a
       background image, but DataTables' own left padding kept overriding ours, so the icon sat on
       top of the placeholder. The icon isn't worth that fight — a clean input reads fine. --- */
.dt-container .dt-search { display: inline-flex; align-items: center; margin-left: auto; }
.dt-container .dt-search label { display: none; }        /* the placeholder carries the meaning */
.dt-container .dt-search input.dt-input,
.dt-container .dt-search input {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 16px; min-width: 260px; max-width: 100%; margin: 0;
  background: var(--surface-2);
  color: var(--text); font-size: var(--fs-base); font-weight: 500;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dt-container .dt-search input::placeholder { color: var(--text-muted); font-weight: 500; }
/* Hide WebKit's native search decorations so only our field shows. */
.dt-container .dt-search input::-webkit-search-decoration,
.dt-container .dt-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
  outline: none; background-color: var(--surface);
  border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow);
}

/* --- info line: quiet, tabular so the numbers don't jitter while paging --- */
.dt-container .dt-info {
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; padding: 0;
}

/* --- paging: square-ish pills, brand fill on the current page --- */
.dt-container .dt-paging { margin-left: auto; }
.dt-container .dt-paging nav { display: inline-flex; align-items: center; gap: 4px; }
.dt-container .dt-paging .dt-paging-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); border-color: transparent;
}
.dt-container .dt-paging .dt-paging-button:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--brand-glow);
}
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
  box-shadow: 0 6px 16px var(--brand-glow);
}
.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled:hover {
  color: var(--border); background: transparent; cursor: default; box-shadow: none;
}
.dt-container .dt-paging .dt-paging-button.ellipsis { pointer-events: none; color: var(--text-muted); }

/* --- headers: keep our uppercase caps, swap the library's arrows for a chevron pair --- */
table.data thead th.dt-orderable-asc,
table.data thead th.dt-orderable-desc { cursor: pointer; user-select: none; }
table.data thead th.dt-orderable-asc:hover,
table.data thead th.dt-orderable-desc:hover { color: var(--brand-600); }
table.data thead th.dt-ordering-asc,
table.data thead th.dt-ordering-desc { color: var(--brand-600); }

table.data thead th span.dt-column-order { position: relative; width: 12px; margin-left: 6px; }
table.data thead th span.dt-column-order::before,
table.data thead th span.dt-column-order::after {
  position: absolute; right: 0; line-height: 1;
  font-size: .6rem; opacity: .35; transition: opacity .15s ease;
}
table.data thead th span.dt-column-order::before { content: "B2"; top: -6px; }
table.data thead th span.dt-column-order::after  { content: "BC"; top: 1px; }
table.data thead th.dt-ordering-asc span.dt-column-order::before,
table.data thead th.dt-ordering-desc span.dt-column-order::after { opacity: 1; }

/* The library's own empty state sits inside our table; keep it in the .empty voice. */
table.data td.dt-empty { text-align: center; color: var(--text-muted); padding: 34px 16px; font-weight: 600; }

@media (max-width: 640px) {
  .dt-container .dt-search input { min-width: 0; width: 100%; }
  .dt-container .dt-search { width: 100%; margin-left: 0; }
  .dt-container > .dt-layout-row:first-child { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   Select2 — made to look exactly like .form-select
   ----------------------------------------------------------------------------
   Select2 hides the native <select> and renders its own markup. Left with its
   stock theme it sits a few pixels off ours and carries the wrong radius, focus
   ring and greys. These rules re-skin the closed control, the dropdown, the
   search field and the highlighted row so a Select2 dropdown is visually
   indistinguishable from a plain one — including in dark mode.
   ============================================================================ */
.select2-container { width: 100% !important; }

/* --- the closed control --- */
.select2-container--default .select2-selection--single {
  height: auto; min-height: 44px; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 12px; transition: border-color .15s ease, box-shadow .15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text); font-size: var(--fs-base); font-weight: 500; line-height: 1.5; padding: 0; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--text-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%; top: 0; right: 10px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent; border-width: 5px 4px 0; }

/* A full-strength brand border reads as an error on a red-branded branch. Keep the focus cue,
   but as a light tint of the brand rather than the brand itself. */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--brand-600); border-width: 0 4px 5px;
}
.select2-container--disabled .select2-selection--single { background: var(--surface-2); opacity: .7; }

/* --- multi-select: countries, and anywhere else several values are picked --- */
.select2-container--default .select2-selection--multiple {
  min-height: 44px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 8px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); border: 1px solid transparent; border-radius: var(--radius-pill);
  color: var(--on-brand-soft, var(--brand-600)); font-size: var(--fs-sm); font-weight: 600; padding: 4px 12px 4px 6px; margin: 3px 6px 3px 0;
  line-height: 1;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  color: var(--brand-600); font-weight: 700; font-size: var(--fs-base); line-height: 1;
  border: 0; background: transparent; margin: 0; padding: 0; order: 2;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  background: var(--brand-600); color: #fff;
}
/* Flag + name inside a chip / dropdown option (data-flags selects). */
.s2-flag-item { display: inline-flex; align-items: center; gap: 7px; }
.s2-flag-item .cflag { flex: 0 0 auto; }
.select2-selection__choice .s2-flag-item { order: 1; }

/* --- the dropdown --- */
.select2-container--default .select2-dropdown {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 4px;
}
.select2-container--default .select2-search--dropdown { padding: 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px;
  background: var(--surface-2); color: var(--text); font-size: var(--fs-base);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none; background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow);
}
.select2-container--default .select2-results__options { max-height: 260px; padding: 0 6px 6px; }
.select2-container--default .select2-results__option {
  border-radius: var(--radius-xs); padding: 9px 12px; color: var(--text); font-size: var(--fs-base); font-weight: 500;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600));
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
  background: var(--brand-600); color: #fff; font-weight: 600;
}
.select2-container--default .select2-results__message { color: var(--text-muted); font-size: var(--fs-base); }

/* A dropdown opened from a modal is parented to it; keep it above the backdrop. */
.modal .select2-container { z-index: 1056; }

/* ============================================================================
   "Today" tiles with something still pending
   ----------------------------------------------------------------------------
   Two cues, both red, both only present when the dashboard adds .stat--alert —
   a zero count must look completely calm.

     ::before  a light that travels around the card's rounded border. It is a
               conic gradient masked down to a 2px ring, and the gradient's start
               angle is animated, so the highlight orbits the card rather than the
               card itself spinning.
     ::after   the card's own beat — a double thump, like a heartbeat, with a red
               glow that expands and fades on each beat.
   ============================================================================ */
@property --orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.stat--alert {
  position: relative;
  border-color: transparent;
  animation: statHeartbeat 1.8s ease-in-out infinite;
}

/* The travelling border. */
.stat--alert::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  padding: 2px;                       /* the ring's thickness */
  background: conic-gradient(from var(--orbit),
    color-mix(in srgb, var(--danger) 18%, transparent) 0deg,
    color-mix(in srgb, var(--danger) 18%, transparent) 250deg,
    var(--danger) 320deg,
    #fff 340deg,
    var(--danger) 352deg,
    color-mix(in srgb, var(--danger) 18%, transparent) 360deg);
  /* Punch out the middle so only the border ring is painted. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: statOrbit 2.2s linear infinite;
}

/* The beat's glow. Separate from the ring so the two never fight. */
.stat--alert::after {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .45);
  animation: statThump 1.8s ease-out infinite;
}

.stat--alert .stat__value { color: var(--danger); }
.stat--alert .stat__trend {
  background: rgba(239, 68, 68, .12); color: #dc2626; font-weight: 700;
}
.stat--alert .stat__icon {
  background: rgba(239, 68, 68, .12); color: #dc2626;
}

/* The beat uses the independent `scale` property, not `transform`, so .stat:hover's
   translateY(-3px) still lifts the tile instead of being overwritten by the animation. */

@keyframes statOrbit  { to { --orbit: 360deg; } }

/* Lub-dub: two quick beats, then a rest — the shape of a real heartbeat. */
@keyframes statHeartbeat {
  0%, 100% { scale: 1; }
  12%      { scale: 1.035; }
  24%      { scale: 1; }
  36%      { scale: 1.022; }
  48%, 99% { scale: 1; }
}
@keyframes statThump {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); }
  35%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Where @property is unsupported the angle cannot animate, so the ring would sit still.
   Give those browsers a plain red border instead of a frozen gradient. */
@supports not (background: conic-gradient(from var(--orbit), red, blue)) {
  .stat--alert::before { background: var(--danger); }
}

/* Respect the OS "reduce motion" setting — keep the red, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .stat--alert, .stat--alert::before, .stat--alert::after { animation: none; }
  .stat--alert::before { background: var(--danger); }
}

/* Select2 dropdown opened from inside a SweetAlert dialog (the offer-letter picker) — SweetAlert
   sits at z-index 1060+, so the dropdown must clear it. Parented to the popup via dropdownParent. */
.swal2-container .select2-container { z-index: 2000; }
.swal2-popup .select2-container--open .select2-dropdown { z-index: 2001; }
/* Give the two picker selects room and match the dialog's controls. */
.offer-pick .select2-selection--single { min-height: 42px; }

/* ============================================================================
   Flatpickr (datepicker) — dark theme
   Flatpickr ships its own light-only stylesheet and every date input on the
   site uses it, so without this the calendar popup stayed a plain white box
   no matter what app theme was active.
   ============================================================================ */
[data-theme="dark"] .flatpickr-calendar {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
[data-theme="dark"] .flatpickr-calendar.arrowTop::before,
[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--border); }
[data-theme="dark"] .flatpickr-calendar.arrowBottom::before,
[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--border); }
[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-weekdays {
  background: var(--surface-2);
}
[data-theme="dark"] .flatpickr-month,
[data-theme="dark"] .flatpickr-weekday,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--text);
  fill: var(--text);
}
[data-theme="dark"] .flatpickr-current-month input.cur-year {
  color: var(--text);
  background: transparent;
}
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--surface-2);
}
[data-theme="dark"] .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-next-month svg {
  fill: var(--text-muted);
}
[data-theme="dark"] .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-next-month:hover svg {
  fill: var(--brand);
}
[data-theme="dark"] .flatpickr-day {
  color: var(--text);
}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover,
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
  color: var(--text-muted);
  opacity: .45;
}
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day.today:hover {
  background: var(--brand-soft);
  border-color: var(--on-brand-soft, var(--brand-soft));
  color: var(--on-brand-soft, var(--brand-600));
}
[data-theme="dark"] .flatpickr-day.today {
  border-color: var(--brand);
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
[data-theme="dark"] .flatpickr-time {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
  color: var(--text);
  background: transparent;
}
[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
  background: var(--surface-2);
}
[data-theme="dark"] .numInputWrapper span.arrowUp:after { border-bottom-color: var(--text-muted); }
[data-theme="dark"] .numInputWrapper span.arrowDown:after { border-top-color: var(--text-muted); }
[data-theme="dark"] .numInputWrapper:hover { background: var(--surface-2); }

/* ---------- Offer-letter add/edit dialog ---------- */
.offer-modal { padding: 0 0 8px; }
.offer-modal .swal2-html-container { margin: 12px 20px 0; max-height: 70vh; overflow-y: auto; }
.offer-modal .offer-form .form-label { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; }
/* The catalogue picker sits in its own soft panel so it reads as the shortcut, not another field. */
.offer-modal .offer-pick {
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px;
}
.offer-modal .offer-pick > .form-label { color: var(--brand-600); font-weight: 800; }

/* ---------- Ctrl+K quick lead search dropdown ---------- */
.qs-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 3200;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.qs-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-base); }
.qs-item {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
}
.qs-item:hover { background: var(--brand-soft); }
.qs-item__main { display: flex; align-items: center; gap: 8px; }
.qs-name { font-weight: 700; font-size: var(--fs-base); }
.qs-type {
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 1px 6px;
}
.qs-type--conv { color: var(--ok); background: rgba(16,185,129,.1); border-color: transparent; }
.qs-item__sub {
  display: flex; align-items: center; gap: 14px; margin-top: 3px;
  font-size: var(--fs-sm); color: var(--text-muted); flex-wrap: wrap;
}
.qs-item__sub i { margin-right: 3px; }
.qs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.qs-owner { margin-left: auto; font-weight: 600; }

/* ---------- Lead visit timeline (in the lead detail modal) ---------- */
.lead-visits { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.lead-visits__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; color: var(--text-muted);
}
.lead-visits__count {
  display: inline-block; min-width: 20px; text-align: center; margin-left: 4px;
  background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); border-radius: var(--radius-pill); padding: 0 7px; font-size: var(--fs-xs);
}
.lead-visits__list { display: flex; flex-direction: column; gap: 10px; }
.visit-item { display: flex; gap: 10px; }
.visit-item__icon {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-xs); display: grid; place-items: center;
  background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); font-size: var(--fs-base);
}
.visit-item__top { display: flex; align-items: center; gap: 8px; }
.visit-item__type { font-weight: 700; font-size: var(--fs-base); }

/* ---------- Country flag (derived from ISO-2, shown next to any country name) ---------- */
/* Round country flag: a flag-icons background image clipped to a circle. !important because
   flag-icons' own .fi/.fis rules load at runtime (after this file) at equal specificity. */
.cflag {
  display: inline-block !important;
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  margin-right: 6px; vertical-align: -4px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.cflag::before { content: "" !important; }   /* flag-icons adds an nbsp spacer — drop it */
/* Inside a country-chip the flag sits a touch tighter / smaller. */
.country-chip .cflag { width: 15px !important; height: 15px !important; margin-right: 5px; vertical-align: -3px; }

/* ---------- Subscription package cards ---------- */
.pkg-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden;
}
.pkg-card--off { opacity: .72; }
.pkg-card__head { padding: 16px 18px; background: var(--brand-soft); border-bottom: 1px solid var(--border); text-align: center; }
/* --on-brand-soft is only ever set when --brand-soft itself turned out too dark for --brand-700/
   -600 to read on (see Layout.applyBranchTheme) — otherwise these fall back to their original
   tinted-badge look, unchanged. */
.pkg-card__name { font-weight: 800; font-size: var(--fs-md); color: var(--on-brand-soft, var(--brand-700)); letter-spacing: .02em; }
.pkg-card__sub { font-size: var(--fs-sm); color: var(--on-brand-soft, var(--brand-600)); font-weight: 600; margin-top: 2px; }
.pkg-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pkg-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pkg-feats li { font-size: var(--fs-base); display: flex; align-items: flex-start; gap: 7px; }
.pkg-feats li i { color: var(--ok); font-size: var(--fs-md); margin-top: 1px; }
.pkg-specs { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pkg-specs td { padding: 5px 0; border-bottom: 1px dashed var(--border); color: var(--text-muted); }
.pkg-specs td.text-end { color: var(--text); font-weight: 700; }
.pkg-card__prices table td.text-end { color: var(--brand-600); }
.pkg-offers { background: rgba(16,185,129,.06); border: 1px solid rgba(16,185,129,.25); border-radius: var(--radius-sm); padding: 10px 12px; }
.pkg-offer { margin-top: 6px; font-size: var(--fs-sm); }
.pkg-offer__code { font-weight: 800; color: var(--ok); letter-spacing: .5px; }
.pkg-card__foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; gap: 6px; justify-content: flex-end; }

/* ---------- Subscribe: amounts + pay QR + approvals ---------- */
.sub-amounts { border-top: 1px solid var(--border); padding-top: 10px; }
.sub-amt { display: flex; justify-content: space-between; padding: 4px 0; font-size: var(--fs-base); color: var(--text-muted); }
.sub-amt b { color: var(--text); }
.sub-amt--off b { color: var(--danger); }
.sub-amt--total { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; font-size: var(--fs-md); }
.sub-amt--total b { color: var(--brand-600); }
.pay-qr { display: flex; justify-content: center; margin: 14px 0; }
.pay-qr img, .pay-qr canvas { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; background: #fff; }
.appr-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px;
}

/* ---------- Package "menus in this plan" checklist ---------- */
.menu-pick {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
  max-height: 240px; overflow-y: auto; background: var(--surface-2);
}
.menu-pick__section {
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 4px 4px;
}
.menu-pick__item {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-xs);
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
.menu-pick__item:hover { background: var(--brand-soft); }
.menu-pick__item i { color: var(--brand-600); width: 18px; text-align: center; }
.menu-pick__item input { width: 16px; height: 16px; }

/* Menu checklist: group header + indented sub-menus */
.menu-pick__group { border-bottom: 1px dashed var(--border); padding-bottom: 4px; margin-bottom: 4px; }
.menu-pick__head { font-weight: 800; }
.menu-pick__subs { padding-left: 22px; }
.menu-pick__sub { font-weight: 500; font-size: var(--fs-sm); }
.menu-pick__sub i { color: var(--text-muted); font-size: var(--fs-xs); }

/* Coupon apply feedback in the subscribe dialog */
.coupon-msg { font-size: var(--fs-sm); margin-top: 5px; min-height: 1.1em; }
.coupon-msg--ok { color: var(--ok); font-weight: 600; }
.coupon-msg--err { color: var(--danger); font-weight: 600; }


/* ============================================================================
   Mobile top-nav: hamburger toggles the horizontal menu into a vertical panel
   ============================================================================ */
.topnav__toggle { display: none; background: none; border: 0; color: var(--text); font-size: var(--fs-xl); line-height: 1; cursor: pointer; padding: 2px 6px; }
@media (max-width: 860px) {
  .topnav__bar { gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
  .topbar__search { display: none; }
  .topnav__toggle { display: inline-flex; align-items: center; }
  .topnav__menu { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 12px 12px; max-height: 74vh; overflow-y: auto; border-top: 1px solid var(--border); }
  .topnav.nav-open .topnav__menu { display: flex; }
  .topnav__menu > .topnav__item, .topnav__group { width: 100%; border-bottom: 1px solid var(--border); }
  .topnav__menu > .topnav__item { padding: 13px 6px; }
  .topnav__group .topnav__item.dropdown-toggle { width: 100%; padding: 13px 6px; text-align: left; display: flex; align-items: center; gap: 8px; }
  .topnav__group .dropdown-menu { position: static !important; display: block !important; transform: none !important; float: none; border: 0; box-shadow: none; background: transparent; padding: 0 0 8px 22px; margin: 0; min-width: 0; }
  .topnav__group .dropdown-toggle::after { margin-left: auto; }
  .topnav__menu .dropdown-item { padding: 9px 6px; }
  .topnav__menu .dropdown-header { padding: 8px 6px 2px; }
}

/* --- Visa type per interested country (lead form) --- */
.vt-panel { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 10px 12px; }
.vt-panel-head { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vt-row { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 10px; align-items: center; padding: 7px 0; }
.vt-row + .vt-row { border-top: 1px solid var(--border); }
.vt-country { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-base); }
.vt-country .cflag { flex: 0 0 auto; }
.vt-select { max-width: 100%; }
.vt-none { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
@media (max-width: 560px) { .vt-row { grid-template-columns: 1fr; gap: 6px; } }


/* ---------- Dashboard: month trend charts + walk-ins ---------- */

/* Two accents, one per chart. Each chart is a single series, so these never sit adjacent
   as categories — but both were validated against the real surfaces (#fff / #0f172a) for
   lightness band, chroma, CVD separation and contrast. The light greens/ambers used
   elsewhere sit under 3:1 on white, so every bar carries a visible value label (the
   contrast relief) rather than relying on the fill alone. */
:root {
  --chart-leads: #EF4444;
  --chart-signup: #10B981;
}
[data-theme="dark"] {
  /* Same two hues re-stepped for the dark surface — #10b981 is too light there (it fails
     the dark lightness band); this is the step that passes. Not an automatic flip. */
  --chart-leads: #F87171;
  --chart-signup: #34D399;
}

.stat__trend.down { background: rgba(239, 68, 68, .12); color: #dc2626; }

/* An even 50/50 split, unlike the generic .grid-2 (2fr/1fr). A class rather than an inline
   style so the 992px rule above can still collapse it to one column — an inline
   grid-template-columns would outrank the media query and keep both charts side by side on a
   phone, squeezing six months of labels into ~160px until they overlap. */
.grid-2--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 992px) { .grid-2--even { grid-template-columns: 1fr; } }

.trendchart { display: flex; align-items: stretch; justify-content: space-between; gap: 8px;
  height: 168px; padding-top: 18px; }
.trendchart .tbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  height: 100%; min-width: 0; }
/* Values are ink, never the series colour — the bar beside them carries the identity. */
.trendchart .tbar__val { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
/* The bar's height is a % of THIS track, not of the whole column — the track is what's left once
   the value and month label have taken their space. The fill must also refuse to flex-shrink:
   as a plain flex item it gets squashed to fit, which silently renders a 432 and a 344 as the
   same height and turns the chart into a lie. */
.trendchart .tbar__track { flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; }
.trendchart .tbar__fill { flex: 0 0 auto; width: 100%; max-width: 40px; min-height: 3px;
  border-radius: 6px 6px 3px 3px;
  background: color-mix(in srgb, var(--c) 22%, transparent); transition: height .4s ease; }
.trendchart .tbar__label { flex: 0 0 auto; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
/* Emphasis: the month being asked about is solid, every other month recedes to the same
   hue at 22%. One hue, no legend needed — the card title names the series. */
.trendchart .tbar.is-now .tbar__fill { background: var(--c); }
.trendchart .tbar.is-now .tbar__val { color: var(--text); font-weight: 800; }
.trendchart .tbar.is-now .tbar__label { color: var(--text); font-weight: 800; }

.walkin-list { display: flex; flex-direction: column; }
.walkin { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.walkin:last-child { border-bottom: 0; }
.walkin__time { font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--text); flex: 0 0 auto; min-width: 64px; }
.walkin__who { min-width: 0; flex: 1; }
.walkin__meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

@media (max-width: 700px) {
  .trendchart { height: 140px; }
  .trendchart .tbar__fill { max-width: 28px; }
}


/* ---------- Dashboard: country demand card ---------- */
.cdem { display: flex; flex-direction: column; }
.cdem__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border); }
.cdem__row:last-child { border-bottom: 0; }
.cdem__row .cflag { width: 30px !important; height: 30px !important; flex: 0 0 auto; }
.cdem__main { min-width: 0; }
.cdem__name { font-weight: 700; font-size: var(--fs-base); display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
/* One hue, length = magnitude: the honest read for "who is asking for what", and it keeps the
   list scannable without a second axis. Track first so a short bar still reads as a share. */
.cdem__bar { margin-top: 6px; height: 6px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; }
.cdem__bar > span { display: block; height: 100%; border-radius: 999px;
  background: var(--chart-leads); transition: width .4s ease; }
.cdem__nums { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.cdem__n { text-align: right; }
.cdem__n b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text); }
.cdem__n span { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
/* A zero is context, not news — mute it so the eye lands on the counts that matter. */
.cdem__n.is-zero b { color: var(--text-muted); font-weight: 700; }
.cdem__vt { font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }

/* Segmented Today / This month switch. */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-muted); font-weight: 700;
  font-size: var(--fs-sm); padding: 5px 14px; border-radius: var(--radius-pill); cursor: pointer;
  font-family: inherit; }
.seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

@media (max-width: 700px) {
  .cdem__row { grid-template-columns: auto 1fr; }
  .cdem__nums { grid-column: 1 / -1; justify-content: flex-start; gap: 18px; padding-left: 42px; }
  .cdem__n { text-align: left; }
}


/* ---------- Dashboard: pipeline stock bar ---------- */
/* Part-to-whole, horizontal: four states with long names. Every segment is named with its count in
   the legend, so identity never rests on colour alone (and that is the relief for the two hues
   that sit under 3:1 on white). */
.pipe__bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px;
  background: var(--surface-2); }
.pipe__seg { min-width: 3px; transition: flex-basis .4s ease; }
.pipe__legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.pipe__item { display: flex; align-items: center; gap: 8px; }
.pipe__dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.pipe__txt b { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.pipe__txt span { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }

@media (max-width: 700px) {
  .pipe__legend { gap: 12px 18px; }
}


/* ---------- Counselling live: popup + corner dock ---------- */
.cl-backdrop { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center;
  justify-content: center; padding: 20px; background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
.cl-backdrop.is-on { display: flex; }
.cl-pop { width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: clPop .18s ease-out; }
@keyframes clPop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
/* The lead just landed and someone is waiting — the entrance is quick, not theatrical. */
@media (prefers-reduced-motion: reduce) { .cl-pop { animation: none; } }

.cl-pop__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid var(--border); }
.cl-pop__head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; flex: 1; }
.cl-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); flex: 0 0 auto; }
.cl-pop__body { padding: 16px 18px; }
.cl-pop__foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

.cl-lead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cl-ava { width: 44px; height: 44px; font-size: .95rem; flex: 0 0 auto; }
.cl-name { font-weight: 800; font-size: 1.05rem; }
.cl-rows { display: flex; flex-direction: column; }
.cl-row { display: flex; gap: 12px; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.cl-row:last-child { border-bottom: 0; }
.cl-row span { color: var(--text-muted); font-weight: 600; flex: 0 0 auto; }
.cl-row b { text-align: right; min-width: 0; overflow-wrap: anywhere; }

.cl-clock { margin-top: 14px; text-align: center; padding: 14px; border-radius: var(--radius-sm);
  background: var(--brand-soft); }
.cl-clock__t { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--brand-600);
  font-variant-numeric: tabular-nums; }
.cl-clock__l { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; margin-top: 4px; }
.cl-notes { display: block; margin-top: 12px; }
.cl-notes > span { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 5px; }
.cl-notes i { color: var(--text-muted); font-weight: 500; font-style: normal; }
.cl-notes textarea { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 11px; font-family: inherit; font-size: var(--fs-sm); background: var(--surface);
  color: var(--text); resize: vertical; }

/* The session keeps running while the popup is away — this is the only thing telling them so. */
.cl-dock { position: fixed; right: 18px; bottom: 18px; z-index: 1070; display: none;
  align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-lg);
  cursor: pointer; font-family: inherit; color: inherit; }
.cl-dock.is-on { display: inline-flex; }
.cl-dock:hover { border-color: var(--brand); }
.cl-dock__pulse { width: 9px; height: 9px; border-radius: 50%; background: #10b981; flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); animation: clPulse 2s infinite; }
@keyframes clPulse { 70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
@media (prefers-reduced-motion: reduce) { .cl-dock__pulse { animation: none; } }
.cl-dock__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.cl-dock__txt b { font-size: var(--fs-base); font-weight: 800; font-variant-numeric: tabular-nums; }
.cl-dock__txt span { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .cl-dock { right: 12px; bottom: 12px; }
  .cl-pop__foot { justify-content: stretch; }
  .cl-pop__foot .btn { flex: 1 1 auto; justify-content: center; }
}


/* Shown under the staff picker when the chosen counsellor is mid-session. Amber, not red: handing
   them the next lead is a normal thing to do, so this informs the choice rather than forbids it. */
.busy-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 9px 11px;
  border-radius: var(--radius-sm); background: rgba(245, 158, 11, .12); color: #b45309;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; }
.busy-note i { margin-top: 2px; flex: 0 0 auto; }
[data-theme="dark"] .busy-note { background: rgba(245, 158, 11, .16); color: #fbbf24; }


/* ============================================================================
   Colour & focus polish — driven by a live WCAG contrast audit, not taste.
   ============================================================================ */

/* Links read at 6.3:1 instead of 4.5:1 — same brand family, one step deeper. Dark mode's
   --brand-600 is the LIGHTER step, so the same token is correct in both themes. */
a { color: var(--brand-600); }

/* The green/red badge inks were the only chip texts under AA on their washes (3.66:1) —
   one step deeper fixes them without changing how the chips read. */
.badge-g { color: #047857; }
.badge-r { color: #b91c1c; }
[data-theme="dark"] .badge-g { color: #34d399; }
[data-theme="dark"] .badge-r { color: #f87171; }

/* Text selection carries the brand instead of the browser default blue. */
::selection { background: var(--brand-container); color: var(--on-brand-container); }
[data-theme="dark"] ::selection { background: var(--brand-container); color: var(--on-brand-container); }

/* Keyboard focus is FIRST-CLASS: a visible 2px ring on anything interactive, only for
   keyboard navigation (:focus-visible) so mouse clicks stay clean. */
.btn:focus-visible, .tab:focus-visible, .topnav__item:focus-visible, .icon-btn:focus-visible,
a:focus-visible, .nav-item:focus-visible, .seg button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: inherit;
}
.form-control:focus-visible, .form-select:focus-visible { outline: none; }  /* fields have the 2px border */


/* --- Avatar tints. Light: 16% wash + the hue's 700 ink (AA on the wash). Dark: same wash
       over the dark card + the hue's 300 ink. Both directions measured. --- */
.avatar--t0 { background: color-mix(in srgb, #635bff 16%, transparent); color: #4338ca; }
.avatar--t1 { background: color-mix(in srgb, #10b981 16%, transparent); color: #047857; }
.avatar--t2 { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.avatar--t3 { background: color-mix(in srgb, #ef4444 16%, transparent); color: #b91c1c; }
.avatar--t4 { background: color-mix(in srgb, #06b6d4 16%, transparent); color: #0e7490; }
.avatar--t5 { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #6d28d9; }
[data-theme="dark"] .avatar--t0 { color: #a5b4fc; }
[data-theme="dark"] .avatar--t1 { color: #6ee7b7; }
[data-theme="dark"] .avatar--t2 { color: #fcd34d; }
[data-theme="dark"] .avatar--t3 { color: #fca5a5; }
[data-theme="dark"] .avatar--t4 { color: #67e8f9; }
[data-theme="dark"] .avatar--t5 { color: #c4b5fd; }

/* --- Dark chips: the light-mode inks were reused on dark washes and sank. Re-ink. --- */
[data-theme="dark"] .badge-n { color: #cbd5e1; }
[data-theme="dark"] .badge-o { color: #fcd34d; }
[data-theme="dark"] .badge-b { color: #c4beff; }
[data-theme="dark"] .stat__trend.flat { color: #cbd5e1; }
[data-theme="dark"] .stat__trend.up { color: #34d399; }
[data-theme="dark"] .stat__trend.down { color: #f87171; }
/* Status labels carry an arbitrary per-status colour in --c; in dark, lift whatever it is
   toward white so every status stays readable without retinting each one by hand. */
[data-theme="dark"] .status-label { color: color-mix(in srgb, var(--c) 55%, #fff); }

/* ============================================================================
   SNEATER design language — replicated from the user's design file
   ("SNEATER Dashboard.dc.html"). Appended last on purpose: same-specificity
   rules below override everything above, so the whole app re-skins without
   touching 52 pages' markup. Navy sidebar, white 62px topbar, indigo primary,
   white 14px cards on a grey plane, Manrope + Spline Sans Mono micro-labels.
   ============================================================================ */

body { background: var(--bg); }
[data-theme="dark"] body { background-image: none; }
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; }
* { scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent; }
.page-head h1::after { display: none; }

/* Micro-labels: the design marks every overline / column head in mono caps. */
.overline { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }

/* Headings read in Title Case; the wordmark is always caps. */
h1, h2, h3, h4, h5, h6, .modal-title, .swal2-title { text-transform: capitalize; }
.sb-name, .topnav__name { text-transform: uppercase; }

/* --- Sidebar: the navy rail. --- */
.sidebar { background: var(--sidebar); border-right: none; color: #E2E8F0; }
/* Brand mark sits centred in the rail — a branch's uploaded logo, the SNEATER wordmark, or the
   "Your Logo" placeholder — so it reads the same for every branch and every staff member. */
.sidebar__brand { padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #fff; gap: 11px; justify-content: center; text-align: center; }
.sidebar__brand .logo {
  width: 38px; height: 38px; border-radius: 10px; font-size: 17px;
  background: linear-gradient(135deg, var(--brand), var(--brand-600)); box-shadow: none;
}
.sb-name { font-weight: 800; font-size: 17px; letter-spacing: .12em; color: #fff; line-height: 1.2; }
.sb-tag { font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: #8FA0B5; display: block; }
/* A branch logo sits on a white tile so any logo colour survives the navy. */
/* Branch logo sits in a generous full-width white card at the top of the rail (as requested):
   fixed-height tile, logo contained + centred inside whatever its aspect ratio. */
.sidebar__brand .brand-logo-img { box-sizing: border-box; width: 100%; height: 64px; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px 14px; }
.sidebar__brand .logo--ghost { background: transparent; border: 1.5px dashed rgba(255, 255, 255, .25); color: #8FA0B5; }

.sidebar__nav { padding: 6px 12px 18px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .25); }
.sidebar__section {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; color: #475569; margin: 18px 10px 7px; text-transform: uppercase;
}
.nav-item, .nav-toggle {
  border-radius: 9px; padding: 9px 11px; margin: 1px 0;
  color: var(--sidebar-text); font-weight: 600; font-size: 13.5px; gap: 11px;
}
.nav-item i, .nav-toggle i:first-child { font-size: 16px; width: 20px; }
.nav-item:hover, .nav-toggle:hover { background: rgba(255, 255, 255, .06); color: var(--sidebar-text-hover, #E2E8F0); }
.nav-item.active, .nav-item.active:hover { background: var(--brand); color: #fff; box-shadow: none; }
[data-theme="dark"] .nav-item.active, [data-theme="dark"] .nav-item.active:hover { background: var(--brand); }
.nav-item.active i { color: #fff; }
.nav-caret { margin-left: auto; font-size: 12px !important; width: auto !important; transition: transform .18s ease; }
.nav-toggle[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }
.nav-toggle.is-on { color: var(--brand-600); font-weight: 700; }
.nav-toggle.is-on i { color: var(--brand-600); }
.nav-submenu { padding: 2px 0 6px; }
.nav-subitem { color: var(--sidebar-text); border-radius: 8px; padding: 8px 11px 8px 42px; font-size: 13px; font-weight: 600; border: none; }
.nav-subitem:hover { background: rgba(255, 255, 255, .06); color: var(--sidebar-text-hover, #E2E8F0); }
.nav-subitem.active { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); border-left: none; padding-left: 42px; font-weight: 700; }
.nav-badge { background: rgba(255, 255, 255, .08); color: #CBD5E1; font-family: var(--font-mono); font-size: 11px; font-weight: 600; padding: 1px 8px; }
.nav-badge--hot { background: rgba(239, 68, 68, .16); color: #FCA5A5; }
.nav-item.active .nav-badge { background: rgba(255, 255, 255, .22); color: #fff; }

/* Mobile drawer: rail slides over a scrim (transform rules live in the layout section). */
.sb-scrim { position: fixed; inset: 0; background: rgba(12, 19, 34, .5); z-index: 1029; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sb-scrim.show { opacity: 1; pointer-events: auto; }
@media (max-width: 768px) { .sidebar.open { box-shadow: 0 0 60px rgba(0, 0, 0, .5); } }

/* --- Topbar: white, 62px, hairline below. --- */
.topbar {
  background: var(--surface);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  gap: 14px; padding: 0 22px;
}
.tb-toggle {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: grid; place-items: center; cursor: pointer; font-size: 15px; transition: .15s;
}
.tb-toggle:hover { color: var(--text); background: var(--bg); }
.tb-div { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.topbar__search { max-width: 460px; }
.topbar__search input { height: 38px; border-radius: 10px; background: var(--bg); border-color: transparent; font-size: 13px; }
.topbar__search input:focus { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.topbar__search kbd { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; }
.icon-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--text-muted); }
.icon-btn:hover { background: var(--bg); color: var(--text); border-color: transparent; }
.topnav__user { padding: 4px 6px; border-radius: 10px; }
.avatar { border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--brand-600)); }

/* --- Cards: white, 14px, hairline border, whisper shadow — and still. --- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card:hover { transform: none; box-shadow: var(--shadow-sm); }
.stat { border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.stat:hover { transform: none; box-shadow: var(--shadow-sm); }

/* --- Buttons: 10px corners, not pills. --- */
.btn { border-radius: 10px; font-weight: 700; }
.btn-sm { border-radius: 9px; }
.btn-brand { background: var(--brand); border: none; color: #fff; box-shadow: 0 1px 2px var(--brand-glow); }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-600); color: #fff; transform: none; box-shadow: 0 1px 2px var(--brand-glow); }
[data-theme="dark"] .btn-brand { background: var(--brand); }
[data-theme="dark"] .btn-brand:hover, [data-theme="dark"] .btn-brand:focus { background: var(--brand-600); }
.btn-ghost { background: var(--surface); border: 1px solid #DFE3E9; color: #374151; box-shadow: none; }
.btn-ghost:hover, .btn-ghost:focus { background: var(--bg); border-color: #DFE3E9; color: var(--text); transform: none; }
[data-theme="dark"] .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .btn-ghost:focus { background: rgba(148, 163, 184, .08); color: var(--text); }

/* --- Tabs & segmented switches: grey track, white active pill (the design's toggle). --- */
.tabs { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: none; }
.tab { border-radius: 8px; padding: 8px 14px; position: static; }
.tab:hover:not(.active) { transform: none; background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text); }
.tab.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .10); }
.tab.active::after { display: none; }
[data-theme="dark"] .tab.active { background: var(--surface-2); color: var(--text); }
.seg { background: var(--bg); border: 1px solid var(--border); }
.seg button.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, .10); }
[data-theme="dark"] .seg button.is-on { background: var(--surface-2); }

/* --- Fields: 9px, hairline, indigo focus ring. --- */
.form-control, .form-select { border-radius: 9px; border: 1px solid var(--border); background: var(--surface); }
/* Light tint, not the raw brand: at full strength a red-branded branch's focus ring reads as a
   validation error. Matches the select2 focus rule above. */
.form-control:focus, .form-select:focus {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
  background: var(--surface);
}

/* --- Dialogs & menus: bordered like cards. !important beats pages' inline 18px. --- */
.modal-content { border-radius: 16px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg); }
.ep-swal { border-radius: 16px !important; }
.cl-pop { border-radius: 16px; border: 1px solid var(--border); }
.dropdown-menu { border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden; }
.toast-msg { background: var(--inverse-surface) !important; color: var(--on-inverse) !important; border: none !important; border-radius: 10px !important; box-shadow: var(--shadow-lg) !important; }

/* --- Tables: mono column heads on a soft band (the design's table voice). --- */
table.data thead th {
  background: var(--surface-2); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] table.data thead th { background: var(--surface-2); color: var(--text-muted); }
table.data tbody tr:hover { background: var(--surface-2); }
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] table.data tbody tr:hover { background: rgba(148, 163, 184, .06); }

/* --- Chips: the design file's exact wash/ink pairs, both themes. --- */
.badge-b { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); }
.badge-g { background: #E7F6EF; color: #0B7A50; }
.badge-o { background: #FEF3E2; color: #B45309; }
.badge-r { background: #FDEBEC; color: #B91C1C; }
.badge-n { background: #F4F5F7; color: #6B7280; }
[data-theme="dark"] .badge-b { background: var(--brand-soft); color: var(--on-brand-container); }
[data-theme="dark"] .badge-g { background: rgba(16, 185, 129, .15); color: #34D399; }
[data-theme="dark"] .badge-o { background: rgba(245, 158, 11, .15); color: #FCD34D; }
[data-theme="dark"] .badge-r { background: rgba(239, 68, 68, .15); color: #FCA5A5; }
[data-theme="dark"] .badge-n { background: rgba(148, 163, 184, .12); color: #CBD5E1; }

/* --- Avatars: rounded-square tiles in the design's tint pairs. --- */
.avatar--t0 { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); }
.avatar--t1 { background: #E7F6EF; color: #0B7A50; }
.avatar--t2 { background: #FEF3E2; color: #B45309; }
.avatar--t3 { background: #FDEBEC; color: #B91C1C; }
.avatar--t4 { background: #E0F2FE; color: #0369A1; }
.avatar--t5 { background: #F3E8FF; color: #7E22CE; }
[data-theme="dark"] .avatar--t0 { background: var(--brand-soft); color: var(--on-brand-container); }
[data-theme="dark"] .avatar--t1 { background: rgba(16, 185, 129, .14); color: #6EE7B7; }
[data-theme="dark"] .avatar--t2 { background: rgba(245, 158, 11, .14); color: #FCD34D; }
[data-theme="dark"] .avatar--t3 { background: rgba(239, 68, 68, .14); color: #FCA5A5; }
[data-theme="dark"] .avatar--t4 { background: rgba(14, 165, 233, .14); color: #67E8F9; }
[data-theme="dark"] .avatar--t5 { background: rgba(139, 92, 246, .14); color: #C4B5FD; }

/* ============================================================================
   Dashboard — the design file's sections
   ============================================================================ */

/* Greeting header: mono date overline + 24px headline. */
.greet-h1 { margin: 2px 0 0; font-size: 24px; font-weight: 800; color: var(--heading); letter-spacing: -.02em; }

/* KPI row: four white cards — overline, delta chip, 32px number, quiet label. */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; min-width: 0; }
.kcard__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kcard__value { font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin: 10px 0 4px; font-variant-numeric: tabular-nums; color: var(--heading); }
.kcard__label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.kdelta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap; }
.kdelta.up, .kdelta.live { background: #E7F6EF; color: #0B7A50; }
.kdelta.down { background: #FDEBEC; color: #B91C1C; }
.kdelta.flat { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .kdelta.up, [data-theme="dark"] .kdelta.live { background: rgba(16, 185, 129, .15); color: #34D399; }
[data-theme="dark"] .kdelta.down { background: rgba(239, 68, 68, .15); color: #FCA5A5; }
@media (max-width: 900px) { .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; } .kcard__value { font-size: 26px; } }

/* Give Follow Ups a little more room than Pipeline + Visits. */
.dgrid { display: grid; grid-template-columns: minmax(420px, 8fr) minmax(280px, 5fr); gap: 16px; align-items: start; }
.dgrid > * { min-width: 0; }
.dgrid__col { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1024px) { .dgrid { grid-template-columns: 1fr; } }

/* Follow Ups: a grouped table card — one row per stream, Today/Overdue chips, arrow. */
.fu-card { padding: 0; }
.fu-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 20px 13px; }
.fu-count { background: #FDEBEC; color: #B91C1C; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; padding: 4px 12px; white-space: nowrap; }
[data-theme="dark"] .fu-count { background: rgba(239, 68, 68, .15); color: #FCA5A5; }
.fu-cols, .fu-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 92px 26px; gap: 8px; align-items: center; }
.fu-cols { padding: 7px 20px; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fu-cols span { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }
.fu-row { padding: 9px 18px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); color: var(--text); text-decoration: none; transition: background .12s ease; }
.fu-row:last-child { border-bottom: none; border-radius: 0 0 var(--radius) var(--radius); }
.fu-row:hover { background: var(--surface-2); color: var(--text); }
.fu-row__name { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; min-width: 0; }
.fu-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fu-chip { display: inline-flex; justify-content: center; min-width: 34px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fu-chip.t { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); }
.fu-chip.o { background: #FDEBEC; color: #B91C1C; }
.fu-chip.z { background: var(--bg); color: #9CA3AF; }
[data-theme="dark"] .fu-chip.t { background: var(--brand-soft); color: var(--on-brand-container); }
[data-theme="dark"] .fu-chip.o { background: rgba(239, 68, 68, .15); color: #FCA5A5; }
[data-theme="dark"] .fu-chip.z { background: rgba(148, 163, 184, .10); color: #7C8BA1; }
.fu-row__arrow { color: var(--text-muted); font-size: 13px; text-align: right; }
.fu-stream { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.fu-stream:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.fu-stream .fu-row { width: 100%; border: 0; border-radius: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; appearance: none; }
.fu-row__arrow i { display: inline-block; transition: transform .16s ease; }
.fu-row.is-open .fu-row__arrow i { transform: rotate(90deg); }
.fu-expand { padding: 10px 14px 14px; background: var(--surface-2); border-top: 1px solid var(--border); }
.fu-expand[hidden] { display: none; }
.fu-expand .spinner-wrap, .fu-expand .empty { min-height: 96px; }
.fu-expand .table-responsive { max-height: 430px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.fu-expand .table { min-width: 700px; font-size: 11.5px; }
.fu-expand .table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.fu-expand .cell-primary, .fu-expand .who-cell, .fu-expand .fu-date { font-size: 12px; }
.fu-expand .cell-sub { font-size: 11px; }
.fu-expand .btn.btn-sm { min-height: 28px; padding: 3px 7px; font-size: 11px; line-height: 1.2; }

/* Compact followup history timeline shown from the dashboard View action. */
#dashboardAllFollowups .modal-dialog { max-width: 880px; }
#dashboardAllFollowups .modal-header { padding: 14px 20px; }
#dashboardAllFollowups .modal-title { font-size: 17px; font-weight: 750; }
#dashboardAllFollowups .modal-body { max-height: 70vh; padding: 0 20px 18px; overflow-y: auto; }
.fu-history__summary { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 10.5px; }
.fu-history__summary strong { color: var(--heading); font-size: 11.5px; }
.fu-history { position: relative; }
.fu-history__item { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.fu-history__item:last-child { border-bottom: 0; }
.fu-history__item::before { content: ""; position: absolute; top: 29px; bottom: -15px; left: 4px; width: 1px; background: var(--border); }
.fu-history__item:last-child::before { display: none; }
.fu-history__marker { width: 9px; height: 9px; margin-top: 6px; border: 2px solid var(--surface); border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.fu-history__content { min-width: 0; }
.fu-history__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fu-history__top time { color: var(--heading); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fu-history__top time i { margin-right: 4px; color: var(--text-muted); }
.fu-history__content p { margin: 7px 0 6px; color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.fu-history__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px; color: var(--text-muted); font-size: 10.5px; }
.fu-history__meta i { margin-right: 4px; }
.fu-history__next { color: var(--brand); font-weight: 650; font-variant-numeric: tabular-nums; }
.fu-history__status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 800; line-height: 1.5; }
.fu-history__status > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fu-history__status.is-hot { background: #FDEBEC; color: #C81E1E; }
.fu-history__status.is-warm { background: #FFF3D9; color: #B45309; }
.fu-history__status.is-cold { background: #E5F3FF; color: #0369A1; }
.fu-history__status.is-dead, .fu-history__status.is-neutral { background: var(--surface-2); color: var(--text-muted); }
[data-theme="dark"] .fu-history__status.is-hot { background: rgba(239, 68, 68, .15); color: #FCA5A5; }
[data-theme="dark"] .fu-history__status.is-warm { background: rgba(245, 158, 11, .15); color: #FCD34D; }
[data-theme="dark"] .fu-history__status.is-cold { background: rgba(14, 165, 233, .15); color: #7DD3FC; }
@media (max-width: 576px) {
  #dashboardAllFollowups .modal-body { padding-left: 14px; padding-right: 14px; }
  .fu-history__top { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* Today's transferred leads: dense audit list for SuperAdmin and receiving staff. */
.today-transfers { padding: 0; overflow: hidden; }
.tt-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; }
.tt-head h3 { margin: 0; color: var(--heading); font-size: 15px; font-weight: 800; }
.tt-head p { margin: 2px 0 0; color: var(--text-muted); font-size: 11.5px; }
.tt-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 25px; padding: 0 9px; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.today-transfers .table-wrap { max-height: 440px; overflow: auto; border-top: 1px solid var(--border); }
.tt-table { min-width: 880px; }
.tt-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.tt-table td { vertical-align: middle; font-size: 11.5px; }
.tt-lead { color: var(--heading); font-size: 12.5px; font-weight: 750; text-decoration: none; }
.tt-lead:hover { color: var(--brand); }
.tt-type, .tt-purpose { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 800; white-space: nowrap; }
.tt-type.visa { background: #EEF2FF; color: #4338CA; }
.tt-type.academic { background: #E7F6EF; color: #087A53; }
.tt-type.partner { background: #FFF3D9; color: #B45309; }
.tt-type.other { background: var(--surface-2); color: var(--text-muted); }
.tt-status { margin-top: 5px; }
.tt-status .status-label { padding: 2px 7px; font-size: 9.5px; }
.tt-status-cell .tt-status { margin-top: 0; }
.tt-interests { display: grid; gap: 2px; margin-top: 5px; max-width: 210px; }
.tt-interests span { overflow: hidden; color: var(--heading); font-size: 10.5px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.tt-route { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11.5px; }
.tt-route i { color: var(--brand); }
.tt-route strong { color: var(--heading); font-weight: 750; }
.tt-note { max-width: 340px; margin-top: 3px; overflow: hidden; color: var(--text-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.tt-purpose.counselling { background: #E5F3FF; color: #0369A1; }
.tt-purpose.assignment { background: #E7F6EF; color: #087A53; }
.tt-time { color: var(--heading); font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="dark"] .tt-type.visa { background: rgba(99, 102, 241, .18); color: #A5B4FC; }
[data-theme="dark"] .tt-type.academic, [data-theme="dark"] .tt-purpose.assignment { background: rgba(16, 185, 129, .15); color: #6EE7B7; }
[data-theme="dark"] .tt-type.partner { background: rgba(245, 158, 11, .15); color: #FCD34D; }
[data-theme="dark"] .tt-purpose.counselling { background: rgba(14, 165, 233, .15); color: #7DD3FC; }

/* Pipeline: the dark navy card. */
.pipe-dark { background: #0C1322; border-color: #0C1322; }
.pipe-dark h3 { color: #fff; }
.pipe-dark .cell-sub { color: #8FA0B5; }
.pipe-dark a { color: #A5B4FC; font-weight: 700; font-size: var(--fs-sm); text-decoration: none; }
.pipe-dark a:hover { color: #C7D2FE; }
.pipe-dark .pipe__bar { height: 10px; background: rgba(255, 255, 255, .06); }
.pipe-dark .pipe__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 16px; }
.pipe-dark .pipe__dot { width: 8px; height: 8px; }
.pipe-dark .pipe__txt b { color: #fff; font-size: 15px; }
.pipe-dark .pipe__txt span { color: #8FA0B5; }
.dash-fu-row .btn-icon,
.dash-fu-row .btn { width: 36px; height: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.dash-fu-row .btn-icon { margin: 0; }
[data-theme="dark"] .pipe-dark { border-color: rgba(148, 163, 184, .14); }

/* Visits / live rows: soft banded items (the design's visit list). */
.walkin { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius: 11px; padding: 9px 12px; margin-bottom: 8px; border-bottom-width: 1px; }
.walkin:last-child { margin-bottom: 0; }
.walkin__time { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
/* Long names truncate instead of stacking letter-by-letter in the narrow column;
   the chips never shrink. */
.walkin__who .cell-primary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.walkin .badge-soft { flex-shrink: 0; }

/* Trend bars: past months tinted, the current month saturated. */
.trendchart .tbar__fill { background: var(--c-soft, color-mix(in srgb, var(--c) 30%, #fff)); border-radius: 7px 7px 3px 3px; max-width: 46px; }
.trendchart .tbar.is-now .tbar__fill { background: var(--c); }
.trendchart .tbar__val { font-size: 12px; font-weight: 800; color: var(--text-muted); }
.trendchart .tbar.is-now .tbar__val { color: var(--heading); }
.trendchart .tbar__label { color: #9CA3AF; }
.trendchart .tbar.is-now .tbar__label { color: var(--heading); }
[data-theme="dark"] .trendchart .tbar__fill { background: var(--c-soft-dark, color-mix(in srgb, var(--c) 35%, transparent)); }
[data-theme="dark"] .trendchart .tbar.is-now .tbar__fill { background: var(--c); }
[data-theme="dark"] .trendchart .tbar__label { color: #64748B; }

/* Agreements: icon-tile cards. */
.agr { display: flex; flex-direction: column; padding: 18px 20px; text-decoration: none; color: inherit; }
.agr:hover { text-decoration: none; color: inherit; border-color: color-mix(in srgb, var(--text-muted) 30%, var(--border)); }
.agr__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.agr__ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; }
.agr__ic.b { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); }
.agr__ic.g { background: #E7F6EF; color: #0B7A50; }
.agr__ic.o { background: #FEF3E2; color: #B45309; }
.agr__ic.r { background: #FDEBEC; color: #B91C1C; }
[data-theme="dark"] .agr__ic.b { background: var(--brand-soft); color: var(--on-brand-container); }
[data-theme="dark"] .agr__ic.g { background: rgba(16, 185, 129, .14); color: #6EE7B7; }
[data-theme="dark"] .agr__ic.o { background: rgba(245, 158, 11, .14); color: #FCD34D; }
[data-theme="dark"] .agr__ic.r { background: rgba(239, 68, 68, .14); color: #FCA5A5; }
.agr__tag { background: var(--bg); color: var(--text-muted); border-radius: var(--radius-pill); padding: 3px 10px; font-size: 11px; font-weight: 700; }
.agr__num { font-size: 28px; font-weight: 800; letter-spacing: -.5px; color: var(--heading); line-height: 1.1; }
.agr__lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

/* Focus rings for the new controls (keyboard a11y, matches the polish section). */
.tb-toggle:focus-visible, .nav-toggle:focus-visible, .fu-row:focus-visible, .agr:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; border-radius: inherit;
}

/* ============================================================================
   SNEATER mobile — native app feel (phones only). Desktop and tablet are
   UNTOUCHED: every rule here lives inside a phone media query, and the bottom
   tab bar is display:none until the phone breakpoint. Cards already stack,
   charts already collapse to one column, tables get a card view below — this
   layer adds the fixed bottom nav, touch targets, and mobile spacing.
   ============================================================================ */

/* Bottom tab bar — hidden on desktop; a fixed native bar on phones. */
.mobnav { display: none; }

@media (max-width: 768px) {
  .mobnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1025;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
  }
  .mobnav__item {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; background: none; border: none; cursor: pointer;
    color: var(--text-muted); text-decoration: none; font: inherit;
  }
  .mobnav__ic { position: relative; font-size: 20px; line-height: 1; }
  .mobnav__lbl { font-size: 10.5px; font-weight: 600; white-space: nowrap; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; }
  .mobnav__item.active, .mobnav__item.active .mobnav__ic { color: var(--brand); }
  [data-theme="dark"] .mobnav__item.active, [data-theme="dark"] .mobnav__item.active .mobnav__ic { color: var(--brand-600); }
  .mobnav__item:active { background: var(--surface-2); }
  .mobnav__dot { position: absolute; top: -2px; right: -7px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); }

  /* Clear space for the fixed bar; a touch more breathing room at the edges. */
  .content { padding: 16px 14px calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* The desktop rail toggle isn't needed — the bottom bar's "More" opens the drawer. */
  .tb-toggle { display: none; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar__search { max-width: none; }

  /* Touch targets — everything comfortably tappable (Apple/Material ~44px). */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-sm { min-height: 38px; }
  .icon-btn { width: 40px; height: 40px; }
  .seg button, .tab { min-height: 40px; }

  /* Dashboard header: greeting on its own line, the two actions become a full-width
     row of equal thumb-sized buttons. Only matches page-heads built this way. */
  .page-head > .d-flex.gap-2 { width: 100%; }
  .page-head > .d-flex.gap-2 > .btn { flex: 1; }

  /* Recent-leads (and any .data table) become stacked cards; the field name sits on the
     left via data-label, the value on the right — a proper mobile row, not a squeezed table. */
  table.data tbody td { align-items: center; }
  table.data tbody td::before { flex: 0 0 auto; margin-right: 12px; }

  /* Modals hug the screen with a little inset, and never sit under the bar. */
  .modal-dialog { margin: 12px; }
  .modal-body { max-height: 74vh; }
}

/* Small phones: tighten the Follow Ups columns so the stream name keeps room. */
@media (max-width: 480px) {
  .fu-cols, .fu-row { grid-template-columns: minmax(0, 1fr) 56px 66px 18px; gap: 6px;
    padding-left: 14px; padding-right: 14px; }
  .fu-head { padding-left: 14px; padding-right: 14px; }
  .kpi-row { gap: 10px; }
  .kcard { padding: 15px 16px; }
  .greet-h1 { font-size: 21px; }
}

/* ============================================================================
   SNEATER mobile app dashboard — replicates the native mobile app design on
   phones only. Desktop is UNTOUCHED: .mobdash is display:none until ≤768px,
   and on phones the dashboard's other sections are hidden so only this renders.
   Themed for dark AND light via tokens + per-theme overrides.
   ============================================================================ */
.mobdash { display: none; }

@media (max-width: 768px) {
  /* On the dashboard only (it carries #mobDash): show the app tree, hide the desktop one,
     and drop the content padding so the gradient header can bleed to the edges. */
  .content:has(#mobDash) { padding: 0; max-width: none; }
  .content:has(#mobDash) > :not(#mobDash) { display: none !important; }
  .mobdash { display: block; }

  /* Gradient header ------------------------------------------------------ */
  .md-head {
    background: linear-gradient(170deg, var(--brand) 0%, var(--brand-700) 45%, var(--bg) 100%);
    padding: 46px 18px 20px;
  }
  [data-theme="dark"] .md-head { background: linear-gradient(170deg, color-mix(in srgb, var(--brand) 55%, #0b1327) 0%, color-mix(in srgb, var(--brand) 32%, #0b1327) 45%, var(--bg) 100%); }
  .md-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .md-greet-sub { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500; }
  .md-greet { margin: 3px 0 0; color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
  .md-wave { font-size: 22px; }
  .md-head__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .md-bell {
    position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: #fff; font-size: 18px; text-decoration: none; border: none;
  }
  .md-bell__dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #EF4444; border: 2px solid #22315f; }
  .md-avatar {
    width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, #38BDF8, #2563EB); color: #fff; font-weight: 800; font-size: 15px;
  }

  /* Translucent 3-stat strip -------------------------------------------- */
  .md-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;
    margin-top: 18px; padding: 14px 6px; border-radius: 16px;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.12);
  }
  .md-strip__cell { text-align: center; position: relative; }
  .md-strip__cell + .md-strip__cell::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.16); }
  .md-strip__cell b { display: block; color: #fff; font-size: 21px; font-weight: 800; line-height: 1.1; }
  .md-strip__cell span { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 500; }

  /* Body ----------------------------------------------------------------- */
  .md-body { padding: 18px 16px calc(104px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 16px; }
  .mobdash .md-card, .mobdash .md-kpi, .mobdash .md-target, .mobdash .md-fu, .mobdash .md-lead, .mobdash .md-transfer, .mobdash .md-q {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  }
  [data-theme="dark"] .mobdash .md-card, [data-theme="dark"] .mobdash .md-kpi, [data-theme="dark"] .mobdash .md-target,
  [data-theme="dark"] .mobdash .md-fu, [data-theme="dark"] .mobdash .md-lead, [data-theme="dark"] .mobdash .md-transfer, [data-theme="dark"] .mobdash .md-q { background: #101827; border-color: rgba(148,163,184,.14); }

  /* KPI 2x2 -------------------------------------------------------------- */
  .md-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .md-kpi { padding: 16px; min-width: 0; }
  .md-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 14px; }
  .md-kpi__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; }
  .md-kpi__ic.b { background: var(--brand-soft); color: var(--brand-600); }
  .md-kpi__ic.g { background: rgba(16,185,129,.16); color: #34D399; }
  .md-kpi__ic.o { background: rgba(245,158,11,.16); color: #FBBF24; }
  .md-kpi__val { font-size: 27px; font-weight: 800; color: var(--heading); letter-spacing: -.5px; line-height: 1.05; }
  .md-kpi__lbl { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-top: 3px; }
  .md-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
  .md-delta.up { background: rgba(16,185,129,.16); color: #34D399; }
  .md-delta.down { background: rgba(239,68,68,.16); color: #FCA5A5; }
  .md-delta.flat { background: rgba(148,163,184,.14); color: var(--text-muted); }

  /* Monthly target ring -------------------------------------------------- */
  .md-target { display: flex; align-items: center; gap: 16px; padding: 18px; }
  .md-ring { position: relative; width: 84px; height: 84px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    background: conic-gradient(var(--brand) calc(var(--pct) * 1%), rgba(148,163,184,.18) 0); }
  .md-ring::before { content: ""; position: absolute; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); }
  [data-theme="dark"] .md-ring::before { background: #101827; }
  .md-ring__mid { position: relative; z-index: 1; text-align: center; line-height: 1; }
  .md-ring__mid b { font-size: 22px; font-weight: 800; color: var(--heading); }
  .md-ring__mid span { font-size: 12px; color: var(--text-muted); }
  .md-target__txt { min-width: 0; }
  .md-target__t { font-size: 15px; font-weight: 800; color: var(--heading); display: flex; align-items: center; gap: 7px; }
  .md-target__t i { color: var(--brand); }
  .md-target__txt p { margin: 4px 0 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }
  .md-bar { height: 7px; border-radius: 999px; background: rgba(148,163,184,.18); overflow: hidden; }
  .md-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

  /* Quick actions -------------------------------------------------------- */
  .md-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .md-q { padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-decoration: none; }
  .md-q__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; }
  .md-q__ic.b { background: var(--brand-soft); color: var(--brand-600); }
  .md-q__ic.g { background: rgba(16,185,129,.16); color: #34D399; }
  .md-q__ic.o { background: rgba(245,158,11,.16); color: #FBBF24; }
  .md-q__lbl { font-size: 12px; font-weight: 600; color: var(--text); text-align: center; }

  /* Cards ---------------------------------------------------------------- */
  .md-card { padding: 18px; }
  .md-card__h h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--heading); }
  .md-card__h p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }

  /* Leads this week bars ------------------------------------------------- */
  .md-week { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 150px; margin-top: 16px; }
  .md-week__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
  .md-week__bar { width: 60%; max-width: 26px; min-height: 6px; border-radius: 999px;
    background: linear-gradient(180deg, rgba(148,163,184,.5), rgba(148,163,184,.12)); }
  [data-theme="dark"] .md-week__bar { background: linear-gradient(180deg, rgba(148,163,184,.4), rgba(148,163,184,.08)); }
  .md-week__bar.is-now { background: linear-gradient(180deg, var(--brand), var(--brand-600)); }
  .md-week__lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); }
  .md-week__lbl.is-now { color: var(--heading); font-weight: 800; }

  /* Pipeline ------------------------------------------------------------- */
  .md-pipe { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 3px; margin: 16px 0 16px; }
  .md-pipe > span { min-width: 4px; border-radius: 999px; }
  .md-pipe__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  .md-leg { display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .md-leg__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .md-leg__lbl { color: var(--text); font-weight: 500; }
  .md-leg b { margin-left: auto; color: var(--heading); font-weight: 800; }

  /* Section headers ------------------------------------------------------ */
  .md-sec-h { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px -4px; }
  .md-sec-h h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--heading); }
  .md-sec-h a { color: var(--brand-600); font-size: 13px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
  [data-theme="dark"] .md-sec-h a { color: #A5B4FC; }
  .md-list { display: flex; flex-direction: column; gap: 12px; }
  .md-transfer-list { max-height: 440px; overflow: auto; }
  .md-transfer { display: block; padding: 14px; color: inherit; text-decoration: none; }
  .md-transfer__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .md-transfer__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font-size: 14px; font-weight: 750; }
  .md-transfer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--text-muted); font-size: 12px; }
  .md-transfer__route { display: flex; align-items: center; min-width: 0; gap: 7px; margin-top: 11px; color: var(--text-muted); font-size: 12px; }
  .md-transfer__route span, .md-transfer__route strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .md-transfer__route strong { color: var(--heading); }
  .md-transfer__route i { flex: 0 0 auto; color: var(--brand-600); }
  .md-transfer time { display: block; margin-top: 7px; color: var(--text-muted); font-size: 11.5px; }

  /* Follow-up card ------------------------------------------------------- */
  .md-fu { display: flex; align-items: center; gap: 12px; padding: 14px; }
  .md-fu__time { flex-shrink: 0; text-align: left; min-width: 58px; padding-right: 10px; border-right: 1px solid var(--border); }
  .md-fu__time b { display: block; font-size: 14px; font-weight: 800; color: var(--heading); }
  .md-fu__time span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .md-fu__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
  .md-fu__main { min-width: 0; flex: 1; }
  .md-fu__top { display: flex; align-items: center; gap: 8px; }
  .md-fu__name { font-size: 15px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-fu__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-chip { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
  .md-chip.g { background: rgba(16,185,129,.16); color: #34D399; }
  .md-chip.b { background: var(--brand-soft); color: var(--on-brand-container); }
  .md-chip.o { background: rgba(245,158,11,.16); color: #FBBF24; }
  .md-chip.r { background: rgba(239,68,68,.16); color: #FCA5A5; }
  .md-callbtn { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0;
    background: var(--brand-soft); color: var(--brand-600); font-size: 18px; text-decoration: none; }

  /* Recent lead card ----------------------------------------------------- */
  .md-lead { display: block; padding: 16px; text-decoration: none; }
  .md-lead__head { display: flex; align-items: center; gap: 12px; }
  .md-lead__av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
  .md-lead__id { min-width: 0; flex: 1; }
  .md-lead__name { font-size: 16px; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .md-lead__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
  .md-lead__stage { flex-shrink: 0; }
  .md-lead__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
  .md-lead__acts { display: flex; gap: 8px; }
  .md-actbtn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; text-decoration: none; }
  .md-actbtn.wa { background: rgba(16,185,129,.16); color: #34D399; }
  .md-actbtn.tel { background: var(--brand-soft); color: var(--brand-600); }

  /* Avatar / follow-up icon tints (reuse the design's tint pairs) -------- */
  .md-lead__av.t0, .md-fu__ic.t0 { background: var(--brand-soft); color: var(--on-brand-container); }
  .md-lead__av.t1, .md-fu__ic.t1 { background: rgba(16,185,129,.16); color: #6EE7B7; }
  .md-lead__av.t2, .md-fu__ic.t2 { background: rgba(245,158,11,.16); color: #FCD34D; }
  .md-lead__av.t3, .md-fu__ic.t3 { background: rgba(239,68,68,.16); color: #FCA5A5; }
  .md-lead__av.t4, .md-fu__ic.t4 { background: rgba(14,165,233,.16); color: #67E8F9; }
  .md-lead__av.t5 { background: rgba(139,92,246,.16); color: #C4B5FD; }

  .md-empty { text-align: center; color: var(--text-muted); padding: 26px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: 18px; }
  [data-theme="dark"] .md-empty { background: #101827; border-color: rgba(148,163,184,.16); }
  .md-empty i { font-size: 1.5rem; display: block; margin-bottom: 6px; opacity: .7; }
  .md-empty p { margin: 0; font-weight: 600; font-size: 13px; }

  /* Definitive off-canvas drawer on phones (higher specificity than the base rule so the
     rail never overlaps content; "More"/toggle slides it in). ---------------------------- */
  .app > .sidebar:not(.open) { transform: translateX(-100%) !important; }
  .app > .main { margin-left: 0 !important; }

  /* ---- App-style bottom nav with a centre FAB ---- */
  .mobnav { padding-top: 8px; }
  .mobnav__fab {
    flex: 0 0 auto; width: 58px; height: 58px; margin: -26px 6px 0; border-radius: 20px;
    background: linear-gradient(135deg, var(--brand), var(--brand-600)); color: #fff; border: none; cursor: pointer;
    display: grid; place-items: center; font-size: 26px; box-shadow: 0 10px 22px var(--brand-glow);
  }
  .mobnav__fab:active { transform: scale(.94); }
  .mobnav__item.active { position: relative; }
  .mobnav__item.active::after { content: ""; position: absolute; bottom: -1px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
}

/* Mobile account footer in the navy drawer + hide the topbar on the app dashboard. */
.sb-foot { display: none; }
@media (max-width: 768px) {
  body.mobdash-on .topbar { display: none; }
  .sb-foot { display: flex; align-items: center; gap: 10px; margin-top: auto;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.08); }
  .sb-foot__av { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-600)); color: #fff; font-weight: 800; font-size: 13px; }
  .sb-foot__id { min-width: 0; flex: 1; }
  .sb-foot__name { color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-foot__role { color: #8FA0B5; font-size: 11.5px; }
  .sb-foot__out { width: 38px; height: 38px; border-radius: 10px; border: none; flex-shrink: 0; cursor: pointer;
    background: rgba(239, 68, 68, .16); color: #FCA5A5; font-size: 16px; }
}

/* ============================================================================
   Mobile app "Profile" screen — full-screen overlay (bottom nav stays on top).
   Appears only via mobile triggers (Profile tab / dashboard avatar). Dark+light.
   ============================================================================ */
.md-screen {
  position: fixed; inset: 0; z-index: 1024; overflow-y: auto;
  background: var(--bg); opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}
.md-screen.show { opacity: 1; transform: none; }
.md-screen__bar { display: flex; align-items: center; justify-content: space-between; padding: 46px 18px 12px; }
.md-screen__bar h1 { margin: 0; font-size: 30px; font-weight: 800; color: var(--heading); }
.md-screen__menu { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); font-size: 18px; display: grid; place-items: center; cursor: pointer; }
[data-theme="dark"] .md-screen__menu { background: #101827; border-color: rgba(148,163,184,.16); }
.md-screen__body { padding: 6px 16px; display: flex; flex-direction: column; gap: 14px; }

/* Profile card */
.mp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }
[data-theme="dark"] .mp-card { background: #101827; border-color: rgba(148,163,184,.14); }
.mp-card__top { display: flex; align-items: center; gap: 14px; }
.mp-av { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(135deg, #38BDF8, #2563EB); color: #fff; font-weight: 800; font-size: 20px; }
.mp-id { min-width: 0; flex: 1; }
.mp-name { font-size: 18px; font-weight: 800; color: var(--heading); line-height: 1.15; }
.mp-role { font-size: 13px; font-weight: 700; color: var(--brand-600); margin-top: 2px; }
[data-theme="dark"] .mp-role { color: #A5B4FC; }
.mp-branch { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-edit { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); font-size: 16px; cursor: pointer; }
.mp-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.mp-stats > div { text-align: center; position: relative; }
.mp-stats > div + div::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: var(--border); }
.mp-stats b { display: block; font-size: 22px; font-weight: 800; color: var(--heading); line-height: 1.1; }
.mp-stats span { font-size: 12.5px; color: var(--text-muted); }

/* Section labels */
.mp-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin: 6px 4px -4px; }

/* Appearance toggle */
.mp-appear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
[data-theme="dark"] .mp-appear { background: #101827; border-color: rgba(148,163,184,.14); }
.mp-appear__b { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 4px;
  border-radius: 12px; border: 1.5px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; }
.mp-appear__b i { font-size: 20px; }
.mp-appear__b span { font-size: 13px; font-weight: 600; }
.mp-appear__b.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
[data-theme="dark"] .mp-appear__b.is-on { background: var(--brand-soft); border-color: var(--brand); color: var(--on-brand-container); }

/* Settings rows */
.mp-list { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
[data-theme="dark"] .mp-list { background: #101827; border-color: rgba(148,163,184,.14); }
.mp-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 16px; background: none; border: none;
  cursor: pointer; text-decoration: none; text-align: left; font: inherit; }
.mp-row + .mp-row { border-top: 1px solid var(--border); }
.mp-row__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.mp-row__ic.b { background: var(--brand-soft); color: var(--brand-600); }
.mp-row__ic.o { background: rgba(245,158,11,.16); color: #FBBF24; }
.mp-row__ic.n { background: rgba(148,163,184,.14); color: var(--text-muted); }
.mp-row__t { flex: 1; font-size: 15.5px; font-weight: 700; color: var(--heading); }
.mp-row__ch { color: var(--text-muted); font-size: 15px; }

/* Sign out + version */
.mp-signout { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; }
[data-theme="dark"] .mp-signout { background: #101827; border-color: rgba(148,163,184,.16); }
.mp-signout:active { background: var(--surface-2); }
.mp-ver { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 4px; }

/* ============================================================================
   SNEATER staff chat — WhatsApp-style 1:1 messaging. Two panes on desktop
   (list + thread); one pane at a time on phones. Themed dark + light.
   ============================================================================ */
.chat { display: flex; height: calc(100vh - var(--topbar-h)); overflow: hidden; background: var(--surface); }
.chat__list { width: 340px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); }
.chat__list-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.chat__list-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--heading); }
.chat__search { position: relative; margin: 0 14px 8px; }
.chat__search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
.chat__search input { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
  padding: 0 12px 0 34px; font-family: var(--font); font-size: 13.5px; color: var(--text); }
.chat__search input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.chat__convs { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }

.conv { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border: none; background: none;
  cursor: pointer; border-radius: 12px; text-align: left; }
.conv:hover { background: var(--bg); }
.conv.is-active { background: var(--brand-soft); }
[data-theme="dark"] .conv.is-active { background: var(--brand-soft); }
.conv .avatar { width: 46px; height: 46px; border-radius: 50%; font-size: 15px; flex-shrink: 0; }
.conv__mid { min-width: 0; flex: 1; }
.conv__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.conv__name { font-weight: 700; font-size: 14.5px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.conv__bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.conv__last { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv__badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand);
  color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }

/* Thread */
.chat__thread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.chat__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); padding: 30px; text-align: center; }
.chat__empty i { font-size: 3rem; opacity: .4; }
.chat__empty p { max-width: 320px; font-size: 14px; }
.chat__pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat__thead { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.chat__thead .avatar { width: 40px; height: 40px; border-radius: 50%; font-size: 14px; }
.chat__peer { min-width: 0; }
.chat__peer-name { font-weight: 700; font-size: 15px; color: var(--heading); }
.chat__back { display: none; }

.chat__msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.msg__day { align-self: center; margin: 8px 0; padding: 3px 12px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.msg { display: flex; }
.msg.out { justify-content: flex-end; }
.msg__bubble { max-width: 74%; padding: 7px 10px 5px; border-radius: 14px; position: relative; font-size: 14px; line-height: 1.4; }
.msg.in .msg__bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; color: var(--text); }
.msg.out .msg__bubble { background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
[data-theme="dark"] .msg.out .msg__bubble { background: var(--brand-600); }
.msg__text { white-space: pre-wrap; word-break: break-word; }
.msg__meta { display: inline-flex; align-items: center; gap: 4px; float: right; margin: 4px 0 0 10px; font-size: 10.5px; opacity: .75; }
.msg.out .msg__meta { color: #e0e7ff; }
.msg__tick i { font-size: 13px; }
.msg__tick.read { color: #7dd3fc; }
.msg__img { display: block; max-width: 240px; max-height: 280px; border-radius: 10px; margin-bottom: 2px; }
.msg__audio { max-width: 240px; height: 40px; margin-bottom: 2px; }
.msg.out .msg__audio { filter: invert(1) hue-rotate(180deg); }
.msg__file { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: inherit; }
.msg.out .msg__file { color: #fff; }

/* Recording bar */
.chat__rec { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface); border-top: 1px solid var(--border); color: var(--danger); font-weight: 600; font-size: 13px; }
.chat__rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: recpulse 1s infinite; }
@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.chat__rec-cancel { margin-left: auto; border: none; background: none; color: var(--brand-600); font-weight: 700; cursor: pointer; }

/* Compose */
.chat__compose { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface); }
.chat__compose textarea { flex: 1; resize: none; max-height: 120px; min-height: 42px; border-radius: 22px; border: 1px solid var(--border);
  background: var(--bg); padding: 10px 16px; font-family: var(--font); font-size: 14px; color: var(--text); line-height: 1.35; }
.chat__compose textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.chat__compose .icon-btn { flex-shrink: 0; }
.chat__compose .icon-btn.is-rec { color: var(--danger); }
.chat__send { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--brand); color: #fff; font-size: 17px; cursor: pointer; display: grid; place-items: center; }
.chat__send:active { transform: scale(.94); }

/* People picker rows */
.pick { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: none; background: none; cursor: pointer; border-radius: 12px; text-align: left; }
.pick:hover { background: var(--bg); }
.pick .avatar { width: 42px; height: 42px; border-radius: 50%; font-size: 14px; }

/* Phones: one pane at a time */
@media (max-width: 768px) {
  .chat { height: calc(100dvh - var(--topbar-h) - 64px); }
  .chat__list { width: 100%; }
  .chat__thread { display: none; }
  .chat.chat--thread .chat__list { display: none; }
  .chat.chat--thread .chat__thread { display: flex; }
  .chat__back { display: grid; }
}


/* ---------- Follow Ups: "due today" heartbeat ---------- */
/* A stream row with follow-ups due TODAY gets a red, rounded, heartbeat-pulsing border so it
   can't be missed. Drawn with an INSET box-shadow ring (not a real border) so the row's box model
   is unchanged and the Today/Overdue columns stay perfectly aligned with the header and the other
   rows. Higher specificity + appearing last beats .fu-row:last-child's radius override. */
.fu-row.fu-row--pulse {
  border-radius: 10px;
  background: color-mix(in srgb, #EF4444 6%, transparent);
  animation: fuHeartbeat 1.5s ease-in-out infinite;
}
.fu-row.fu-row--pulse:hover { background: color-mix(in srgb, #EF4444 12%, transparent); }
[data-theme="dark"] .fu-row.fu-row--pulse { background: color-mix(in srgb, #EF4444 16%, transparent); }

@keyframes fuHeartbeat {
  /* rest → beat → rest → beat → long rest — a real double-thump heartbeat */
  0%   { box-shadow: inset 0 0 0 2px #EF4444, 0 0 0 0 rgba(239,68,68,0); }
  8%   { box-shadow: inset 0 0 0 2px #DC2626, 0 0 0 6px rgba(239,68,68,.30); }
  16%  { box-shadow: inset 0 0 0 2px #EF4444, 0 0 0 0 rgba(239,68,68,0); }
  24%  { box-shadow: inset 0 0 0 2px #DC2626, 0 0 0 6px rgba(239,68,68,.30); }
  34%  { box-shadow: inset 0 0 0 2px #EF4444, 0 0 0 0 rgba(239,68,68,0); }
  100% { box-shadow: inset 0 0 0 2px #EF4444, 0 0 0 0 rgba(239,68,68,0); }
}

/* Respect reduced-motion: keep the red ring, drop the blinking. */
@media (prefers-reduced-motion: reduce) {
  .fu-row.fu-row--pulse { animation: none; box-shadow: inset 0 0 0 2px #EF4444; }
}


/* ---------- Daily follow-up alert modal ---------- */
.fa-backdrop { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(2, 6, 23, .55); backdrop-filter: blur(2px); }
.fa-backdrop.is-on { display: flex; animation: faFade .16s ease; }
@keyframes faFade { from { opacity: 0; } to { opacity: 1; } }
.fa-modal { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: 0 24px 60px rgba(2, 6, 23, .35); overflow: hidden; animation: faPop .18s ease; }
@keyframes faPop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.fa-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.fa-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: #FDEBEC; color: #DC2626; font-size: 17px; }
.fa-head h3 { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.fa-date { margin: 1px 0 0; font-size: 12.5px; color: var(--text-muted); }
.fa-x { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.fa-x:hover { background: var(--surface-2); color: var(--text); }
.fa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 18px 6px; }
.fa-stat { border-radius: 13px; padding: 12px 14px; border: 1px solid var(--border); }
.fa-stat__n { display: block; font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fa-stat__l { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.fa-stat--today { background: var(--brand-soft); border-color: var(--brand-container); }
.fa-stat--today .fa-stat__n { color: var(--brand); }
.fa-stat--today .fa-stat__l { color: var(--brand-600); }
.fa-stat--over { background: #FDEBEC; border-color: #FAD1D4; }
.fa-stat--over .fa-stat__n { color: #DC2626; }
.fa-stat--over .fa-stat__l { color: #EF4444; }
[data-theme="dark"] .fa-stat--today { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); border-color: transparent; }
[data-theme="dark"] .fa-stat--over { background: color-mix(in srgb, #EF4444 22%, var(--surface)); border-color: transparent; }
.fa-list { padding: 8px 18px 4px; display: flex; flex-direction: column; }
.fa-row { display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px; gap: 8px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.fa-row:last-child { border-bottom: none; }
.fa-row__nm { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--text); min-width: 0; }
.fa-row--due .fa-row__nm { color: #DC2626; }
.fa-empty { padding: 18px 4px; text-align: center; color: var(--text-muted); font-size: 13.5px; }
.fa-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px 18px; border-top: 1px solid var(--border); }

/* ============================================================
   Row-action dropdown polish (v81)
   Positioning (fit-in-viewport + scroll when long) is handled in
   lead-actions.js; this only adds the entrance motion and a tidy
   scrollbar so a long menu never looks cut off.
   ============================================================ */
.action-menu {
  transform-origin: top right;
  animation: actionMenuIn .13s ease-out;
}
@keyframes actionMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.action-menu { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.action-menu::-webkit-scrollbar { width: 8px; }
.action-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.action-menu::-webkit-scrollbar-track { background: transparent; }

/* Tighter, smaller row-action menu (v82): smaller font + less padding between items. */
.action-menu { padding: 4px; min-width: 158px; }
.action-menu button { padding: 6px 10px; gap: 8px; font-size: 12.5px; }
.action-menu button i { font-size: 14px; width: 16px; }

/* ============================================================
   Theme Switcher (v84): floating button + right slide-out drawer
   ============================================================ */
.sw-fab {
  position: fixed; right: 0; top: 44%; z-index: 4000;
  width: 42px; height: 46px; border: none; cursor: pointer;
  background: var(--brand); color: #fff; font-size: 1.15rem;
  border-radius: 10px 0 0 10px; box-shadow: -4px 6px 20px rgba(15,23,42,.22);
  display: grid; place-items: center;
}
.sw-fab:hover { filter: brightness(1.06); }
.sw-overlay {
  position: fixed; inset: 0; z-index: 4000; background: rgba(15,23,42,.38);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sw-overlay.open { opacity: 1; pointer-events: auto; }
.sw-panel {
  position: fixed; top: 0; right: 0; z-index: 4001; height: 100vh; width: 340px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -18px 0 50px rgba(15,23,42,.22);
  transform: translateX(100%); transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.sw-panel.open { transform: translateX(0); }
.sw-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.sw-title { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.sw-x { border: none; background: none; color: var(--text-muted); font-size: 1.05rem; cursor: pointer; }
.sw-x:hover { color: var(--text); }
.sw-body { flex: 1; overflow-y: auto; padding: 6px 18px 18px; }
.sw-sec { padding: 14px 0; border-bottom: 1px dashed var(--border); }
.sw-sec:last-child { border-bottom: none; }
.sw-h { font-size: .72rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.sw-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sw-seg button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 9px 0; font-weight: 700; font-size: .85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sw-seg button.on { border-color: var(--on-brand-soft, var(--brand)); background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }
.sw-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; }
.sw-chip {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--border); padding: 0; position: relative;
}
.sw-chip.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand); }
.sw-chip.on::after { content: "\F26E"; font-family: "bootstrap-icons"; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.sw-custom .form-control-color { max-width: 46px; padding: 4px; }
.sw-foot { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
.sw-foot .btn { flex: 1; }
@media (max-width: 480px) { .sw-panel { width: 320px; } }

/* Dashboard "Enquiry sources" bars (v85) */
.src-row { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: 12px; padding: 7px 0; }
.src-row + .src-row { border-top: 1px dashed var(--border); }
.src-name { font-weight: 700; font-size: .86rem; display: flex; align-items: center; gap: 8px; }
.src-bar { height: 10px; border-radius: 999px; background: var(--brand-soft); overflow: hidden; }
.src-bar span { display: block; height: 100%; border-radius: 999px; }
.src-n { text-align: right; font-weight: 800; font-size: .9rem; }
@media (max-width: 520px) { .src-row { grid-template-columns: 110px 1fr 36px; gap: 8px; } }

/* ===== Leads page: KPI stat-card row (replaces the old pill-tab bar) ===== */
.lead-stat-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 16px; }
.lead-stat-card {
  display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px 16px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease;
}
.lead-stat-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.lead-stat-card.active {
  border-color: var(--accent, var(--border));
  background: color-mix(in srgb, var(--accent, var(--brand)) 5%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--brand)) 18%, transparent), var(--shadow-sm);
}
.lead-stat-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.lead-stat-icon--slate { background: var(--bg); color: var(--text-muted); }
.lead-stat-text { min-width: 0; display: flex; flex-direction: column; }
/* Inside a stat card the count is the headline number, not the little pill .tab-badge normally
   draws — so its chip styling is reset here. */
.lead-stat-card .tab-badge {
  font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--heading);
  font-variant-numeric: tabular-nums; background: none; padding: 0; border-radius: 0; min-width: 0;
}
.lead-stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 1200px) { .lead-stat-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .lead-stat-row { grid-template-columns: repeat(2, 1fr); } }

/* Leads header: keep the working area dense without shrinking the controls into a cramped row. */
body:has(#tabs) .content { padding-top: 20px; }
body:has(#tabs) .page-head { margin-bottom: 10px; padding-bottom: 8px; }
body:has(#tabs) .page-head h1 { margin-bottom: 2px; }
body:has(#tabs) .page-head > .d-flex.gap-2 { gap: 6px !important; }
body:has(#tabs) .page-head > .d-flex.gap-2 .btn { padding: .3rem .55rem; font-size: .82rem; }
body:has(#tabs) .lead-stat-row { gap: 6px; margin-bottom: 8px; }
body:has(#tabs) .lead-stat-card { gap: 6px; padding: 6px 8px; min-height: 50px; }
body:has(#tabs) .lead-stat-icon { width: 28px; height: 28px; font-size: .78rem; }
body:has(#tabs) .lead-stat-label { font-size: 10px; }
body:has(#tabs) .lead-stat-card .tab-badge { font-size: 16px; }
body:has(#tabs) .content > .d-flex.justify-content-between { margin-bottom: 12px !important; }
body:has(#tabs) #dateBtn,
body:has(#tabs) #exportBtn,
body:has(#tabs) #resetFiltersBtn,
body:has(#tabs) .search-box .form-control,
body:has(#tabs) #fStatus,
body:has(#tabs) #fCountry,
body:has(#tabs) #fCounsellor {
  height: 34px; min-height: 34px; padding: .2rem .55rem; font-size: .84rem;
}
body:has(#tabs) .search-box .form-control { padding-left: 32px; }
body:has(#tabs) .search-box i { left: 10px; }

/* Compact filter toggle used by followups, counselling and applications pages. */
#filtersToggle {
  min-height: 34px; height: 34px; padding: .2rem .65rem;
  font-size: .84rem; gap: 6px;
}
#filtersToggle i { font-size: .85rem; }

/* Search box with an icon inside the input (the filter bar's search field). */
.search-box { position: relative; flex: 1 1 220px; min-width: 200px; max-width: 320px; }
.search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; }
.search-box .form-control { padding-left: 34px; }

/* Leads table: avatar + name/id/tag block in the "Lead Details" cell. */
.lead-row { display: flex; align-items: flex-start; gap: 10px; }
.min-w-0 { min-width: 0; }
.country-visa-row { display: flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.country-visa-row + .country-visa-row { margin-top: 4px; }

/* Row action icon buttons (view / edit / more) replacing the old single "Action" button. */
.row-actions { display: flex; align-items: center; gap: 4px; }
.btn-icon {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm);
  color: var(--text-muted); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn-icon:hover { background: var(--surface-2); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); }

/* Status as a tinted pill (Hot red / Warm amber / Cold blue …) — the dot + the status's own
   colour on a soft wash of the same colour, like the design. --c comes from the status row. */
.status-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c, #64748b);
  background: color-mix(in srgb, var(--c, #64748b) 12%, transparent);
}

/* Lead table cell details: dates lead their little stacks; the next-followup date reads brand-blue. */
.fu-date { font-size: var(--fs-sm); font-weight: 700; color: var(--heading); }
.next-fu { font-size: var(--fs-sm); font-weight: 700; color: var(--brand); }
.who-cell { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.who-cell i { color: var(--text-muted); }
.country-visa + .country-visa { margin-top: 6px; }

/* Leads footer (DataTables v2 layout classes): info left, "20 / page" + pager right, one row. */
#leadsTable_wrapper .dt-layout-row:last-child {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 14px; margin-top: 0; padding: 12px 14px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
#leadsTable_wrapper .dt-layout-cell { display: flex; align-items: center; min-height: 36px; }
#leadsTable_wrapper .dt-layout-cell.dt-layout-end { display: flex; align-items: center; gap: 14px; }
#leadsTable_wrapper .dt-info { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; padding: 0; }
#leadsTable_wrapper .dt-length select {
  width: 74px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 700; padding: 6px 10px;
}
#leadsTable_wrapper .dt-length label { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
#leadsTable_wrapper .dt-paging .dt-paging-button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); min-width: 36px; height: 36px; margin-left: 4px;
  font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
#leadsTable_wrapper .dt-paging .dt-paging-button.current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
#leadsTable_wrapper .dt-paging .dt-paging-button.disabled { opacity: .45; pointer-events: none; }
#leadsTable_wrapper .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) { background: var(--surface-2); }
@media (max-width: 620px) {
  #leadsTable_wrapper .dt-layout-row:last-child { justify-content: center; }
  #leadsTable_wrapper .dt-layout-cell.dt-layout-start,
  #leadsTable_wrapper .dt-layout-cell.dt-layout-end { width: 100%; justify-content: center; }
}

/* Each stat card carries a thin coloured underline in its own accent (set inline per card). */
.lead-stat-card { position: relative; overflow: hidden; }
.lead-stat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent, var(--border)); }
.lead-stat-card.active::after { height: 5px; }

/* The leads table FITS the page — no horizontal scroll. Compact type + wrapping make the room. */
.table-wrap--fit { overflow-x: visible; }
#leadsTable { width: 100%; font-size: 12px; }
#leadsTable thead th { font-size: 10px; padding: 9px 7px; white-space: nowrap; }
#leadsTable tbody td { padding: 10px 7px; font-size: 12px; white-space: normal; vertical-align: middle; }
#leadsTable .cell-primary { font-size: 12.5px; }
#leadsTable .cell-sub { font-size: 11px; }
#leadsTable .lead-row .avatar { width: 32px !important; height: 32px !important; font-size: .68rem !important; }
#leadsTable .badge-soft { font-size: 10px; padding: 2px 8px; }
#leadsTable .status-label { font-size: 10.5px; padding: 3px 9px; white-space: nowrap; }
#leadsTable .fu-date, #leadsTable .next-fu, #leadsTable .who-cell { font-size: 12px; }
#leadsTable .who-cell { flex-wrap: wrap; gap: 4px; }
#leadsTable .btn-icon { width: 24px; height: 24px; font-size: .74rem; }
#leadsTable .row-actions { flex-wrap: nowrap; gap: 3px; }
/* Long emails/remarks wrap instead of stretching their column. */
#leadsTable tbody td { max-width: 170px; }
#leadsTable .cell-sub { overflow-wrap: anywhere; }
/* DataTables' sort indicator reserves a fat right pad on every sortable header — trim it. */
#leadsTable thead th.dt-orderable-asc, #leadsTable thead th.dt-orderable-desc,
#leadsTable thead th.dt-ordering-asc, #leadsTable thead th.dt-ordering-desc { padding-right: 16px; }

/* Row/select-all checkboxes: big enough to actually hit, brand-tinted when checked. The empty
   sort-order span DataTables leaves in the unsortable checkbox column just gets in the way. */
#leadsTable input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); vertical-align: middle; }
#leadsTable thead th.dt-orderable-none .dt-column-order { display: none; }
#leadsTable thead th.dt-orderable-none { cursor: pointer; }

/* ===== Book Counselling: six stat cards + filter card + compact queue table ===== */
.lead-stat-row--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1200px) { .lead-stat-row--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .lead-stat-row--6 { grid-template-columns: repeat(2, 1fr); } }

/* Filters get their own card, laid out as one wrapping row with the actions pushed right. */
.filter-card { padding: 14px 16px; }
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Select2 swaps each <select> for a sibling span and sizes it to the original's 100% width, so
   the span — not the (now hidden) select — is what has to be told to sit inline. Both the spans
   and the plain inputs share the leftover width and shrink together, so the row stays on ONE line
   until the viewport is genuinely narrow. */
.filter-bar > .select2-container,
.filter-bar > .form-select,
.filter-bar > .form-control { width: auto !important; flex: 1 1 130px; min-width: 100px; max-width: 260px; }
/* Long placeholders ("Course / Program") must not clip inside a shrunk select. */
.filter-bar > .form-select { text-overflow: ellipsis; }
.filter-bar .range-dates { display: flex; gap: 10px; flex: 0 1 auto; min-width: 0; }
.filter-bar .range-dates .form-control { max-width: 145px; min-width: 118px; }
.filter-bar__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 700px) { .filter-bar__end { margin-left: 0; width: 100%; } }

/* The queue table matches the Leads table's compact rhythm and fits without side-scrolling. */
#apptTable { width: 100%; font-size: 12px; }
#apptTable thead th { font-size: 10px; padding: 9px 7px; white-space: nowrap; }
#apptTable tbody td { padding: 10px 7px; font-size: 12px; vertical-align: middle; max-width: 180px; }
#apptTable .cell-primary { font-size: 12.5px; }
#apptTable .cell-sub { font-size: 11px; overflow-wrap: anywhere; }
#apptTable .lead-row .avatar { width: 32px; height: 32px; font-size: .68rem; flex-shrink: 0; }
#apptTable .badge-soft { font-size: 10px; padding: 2px 8px; }
#apptTable .btn-icon { width: 24px; height: 24px; font-size: .74rem; }
#apptTable .row-actions { flex-wrap: nowrap; gap: 3px; }
#apptTable thead th.dt-orderable-asc, #apptTable thead th.dt-orderable-desc,
#apptTable thead th.dt-ordering-asc, #apptTable thead th.dt-ordering-desc { padding-right: 16px; }
/* Dates are the widest cells and never need to be one line — let them wrap so the whole
   table still fits a narrow laptop without a horizontal scrollbar. */
#apptTable thead th { white-space: normal; }
#apptTable .country-visa-row { flex-wrap: wrap; }

/* ===== Followups: two bucket cards beside the search, then filters, then the queue ===== */
.fu-head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fu-head-row .lead-stat-row { margin-bottom: 0; flex: 0 1 auto; }
.lead-stat-row--2 { grid-template-columns: repeat(2, minmax(190px, 240px)); }
.fu-head-row__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 820px) {
  .lead-stat-row--2 { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .fu-head-row__end { margin-left: 0; width: 100%; }
}
/* The overdue count reads in red, like the design. */
.tab-badge--danger { color: var(--danger) !important; }

#fuTable { width: 100%; font-size: 12px; }
#fuTable thead th { font-size: 10px; padding: 9px 7px; white-space: normal; }
#fuTable tbody td { padding: 10px 7px; font-size: 12px; vertical-align: middle; max-width: 200px; }
#fuTable .cell-primary { font-size: 12.5px; }
#fuTable .cell-sub { font-size: 11px; overflow-wrap: anywhere; }
#fuTable .badge-soft { font-size: 10px; padding: 2px 8px; }
#fuTable .btn-icon { width: 24px; height: 24px; font-size: .74rem; }
#fuTable .btn-sm { font-size: 10.5px; padding: 3px 8px; }
#fuTable thead th.dt-orderable-asc, #fuTable thead th.dt-orderable-desc,
#fuTable thead th.dt-ordering-asc, #fuTable thead th.dt-ordering-desc { padding-right: 16px; }

#fuTable_wrapper .dt-layout-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
#fuTable_wrapper .dt-layout-row:first-child { margin-bottom: 14px; }
#fuTable_wrapper .dt-layout-row:last-child { margin-top: 14px; }
#fuTable_wrapper .dt-info { color: var(--text-muted); font-size: var(--fs-sm); padding: 0; }
#fuTable_wrapper .dt-length label { color: var(--text-muted); font-size: var(--fs-sm); }
#fuTable_wrapper .dt-length select {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600; padding: 7px 10px;
}
#fuTable_wrapper .dt-paging .dt-paging-button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); min-width: 32px; height: 32px; margin-left: 6px;
  font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
#fuTable_wrapper .dt-paging .dt-paging-button.current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
#fuTable_wrapper .dt-paging .dt-paging-button.disabled { opacity: .45; pointer-events: none; }
#fuTable_wrapper .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) { background: var(--surface-2); }

/* ===== Visa Applications: titled icon, file-status chips, compact table ===== */
.title-with-icon { display: flex; align-items: center; gap: 14px; }
.title-with-icon h1 { margin: 0; }
.title-with-icon p { margin: 2px 0 0; }
/* The breadcrumb sits opposite the title; the current page is the brand-coloured leaf. */
.page-head .crumb { display: flex; align-items: center; gap: 8px; margin: 0; }
.crumb-here { color: var(--brand); font-weight: 700; }
.title-icon {
  width: 46px; height: 46px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); font-size: 1.25rem;
}

/* Chips read as small cards: a status dot, its name, then the count on the right. */
.chip-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chip-card {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 12px 16px; min-width: 150px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.chip-card:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.chip-card.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.chip-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #94A3B8); flex-shrink: 0; }
.chip-label { font-size: var(--fs-sm); font-weight: 700; color: var(--text); white-space: nowrap; }
.chip-count {
  margin-left: auto; background: var(--bg); color: var(--text); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 800; padding: 2px 9px; font-variant-numeric: tabular-nums;
}
.chip-card.active .chip-count { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); }

/* The Filters button reads "pressed" while its panel is open. */
.btn-ghost.is-on { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand)); border-color: var(--on-brand-soft, color-mix(in srgb, var(--brand) 35%, var(--border))); }

/* Academic Students: five headline cards, each with a quiet percentage under the number. */
.lead-stat-row--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .lead-stat-row--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .lead-stat-row--5 { grid-template-columns: repeat(2, 1fr); } }
.lead-stat-sub { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 2px; }

/* Tab strip with a count chip on each tab (All 1,248 · Studying 842 · …). */
.tabs--counted .tab { display: inline-flex; align-items: center; gap: 8px; }
.tabs--counted .tab .tab-badge { display: inline-block; }

#studentsTable .country-visa-row { font-size: 12px; }

/* ---- DataTables sort carets, tidied for every panel table ----
   Two defaults get in the way: an unsortable column still renders the caret block (it lands on top
   of a header like "Actions"), and on sortable ones the block stretches the full header height so
   the arrows read as detached marks above and below the label. Hide the first, centre the second. */
table.data thead th.dt-orderable-none .dt-column-order { display: none; }
table.data thead th.dt-orderable-none { padding-right: 12px; }
table.data thead th .dt-column-order { top: 50% !important; height: auto !important; transform: translateY(-50%); opacity: .55; }
table.data thead th:hover .dt-column-order { opacity: 1; }

/* Roomier than the leads grid: fewer columns here, so rows can breathe the way the design does. */
#studentsTable { width: 100%; font-size: 13px; }
#studentsTable thead th { font-size: 11px; padding: 13px 12px; white-space: normal; }
#studentsTable tbody td { padding: 14px 12px; font-size: 13px; vertical-align: middle; max-width: 230px; }
#studentsTable .cell-primary { font-size: 13.5px; font-weight: 700; }
#studentsTable .cell-sub { font-size: 12px; overflow-wrap: anywhere; }
#studentsTable .cell-sub + .cell-sub { margin-top: 3px; }
#studentsTable .avatar { width: 38px !important; height: 38px !important; font-size: .78rem !important; flex-shrink: 0; }
#studentsTable .badge-soft { font-size: 11px; padding: 3px 10px; }
#studentsTable .status-label { font-size: 11px; padding: 4px 10px; white-space: nowrap; }
/* Active + Studying sit side by side rather than running into each other. */
#studentsTable td .status-label + .badge-soft { margin-left: 6px; }
#studentsTable .btn-icon { width: 30px; height: 30px; font-size: .82rem; }
#studentsTable .row-actions { justify-content: flex-end; }
/* Plain white rows with a hairline between them — the design's banding, not stripes. */
#studentsTable tbody tr:nth-child(even) { background: transparent; }
#studentsTable tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
#studentsTable tbody tr:last-child { border-bottom: none; }
#studentsTable tbody tr:hover { background: var(--surface-2); }
#studentsTable thead th { border-bottom: 1px solid var(--border); }
#studentsTable thead th.dt-orderable-asc, #studentsTable thead th.dt-orderable-desc,
#studentsTable thead th.dt-ordering-asc, #studentsTable thead th.dt-ordering-desc { padding-right: 16px; }

#studentsTable_wrapper .dt-layout-row:last-child { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#studentsTable_wrapper .dt-layout-cell.dt-layout-end { display: flex; align-items: center; gap: 14px; }
#studentsTable_wrapper .dt-info { color: var(--text-muted); font-size: var(--fs-sm); padding: 0; }
#studentsTable_wrapper .dt-length label { color: var(--text-muted); font-size: var(--fs-sm); }
#studentsTable_wrapper .dt-length select {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600; padding: 7px 10px;
}
#studentsTable_wrapper .dt-paging .dt-paging-button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); min-width: 32px; height: 32px; margin-left: 6px;
  font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
#studentsTable_wrapper .dt-paging .dt-paging-button.current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
#studentsTable_wrapper .dt-paging .dt-paging-button.disabled { opacity: .45; pointer-events: none; }
#studentsTable_wrapper .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) { background: var(--surface-2); }

/* DataTables v2 controls, panel-styled: "Show 25 per page" + Search on top, info + pager below. */
#apptTable_wrapper .dt-layout-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
#apptTable_wrapper .dt-layout-row:first-child { margin-bottom: 14px; }
#apptTable_wrapper .dt-layout-row:last-child { margin-top: 14px; }
#apptTable_wrapper .dt-info { color: var(--text-muted); font-size: var(--fs-sm); padding: 0; }
#apptTable_wrapper .dt-length label, #apptTable_wrapper .dt-search label { color: var(--text-muted); font-size: var(--fs-sm); }
#apptTable_wrapper .dt-length select, #apptTable_wrapper .dt-search input {
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); font-weight: 600; padding: 7px 10px;
}
#apptTable_wrapper .dt-search input { min-width: 220px; font-weight: 400; }
#apptTable_wrapper .dt-paging .dt-paging-button {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm); min-width: 32px; height: 32px; margin-left: 6px;
  font-size: var(--fs-sm); font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
#apptTable_wrapper .dt-paging .dt-paging-button.current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
#apptTable_wrapper .dt-paging .dt-paging-button.disabled { opacity: .45; pointer-events: none; }
#apptTable_wrapper .dt-paging .dt-paging-button:hover:not(.current):not(.disabled) { background: var(--surface-2); }

/* Bulk Transfer dialog: a scrollable checkbox list instead of a Ctrl-click multi-select. */
.bt-wrap { text-align: left; }
.bt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.bt-all { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); cursor: pointer; margin: 0; }
.bt-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.bt-lead { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; margin: 0; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.bt-lead:last-child { border-bottom: none; }
.bt-lead:hover { background: var(--surface-2); }
.bt-lead input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand); }
.bt-lead__name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-lead__phone { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bt-count { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 7px; }

/* ==========================================================================
   STUDENT DETAIL — identity header, section tabs, visa application card.
   Replaces the old two-column detail grid: the person sits in one header
   strip, and every section below is an accordion the tab bar drives.
   ========================================================================== */
.sd-back { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none; margin-bottom: 12px; }
.sd-back:hover { color: var(--brand); }

/* --- identity header --- */
.sd-head .card-body { padding: 22px 24px 0; }
.sd-head__top { display: flex; align-items: flex-start; gap: 18px; }
.sd-head__avatar { width: 62px; height: 62px; font-size: 1.25rem; border-radius: 16px; flex: none; }
.sd-head__id { min-width: 0; flex: 1 1 auto; }
.sd-head__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-head__title h1 { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.sd-kind { font-size: var(--fs-xs); font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }
.sd-head__contacts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 9px; }
.sd-contact { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text); }
.sd-contact i { color: var(--text-muted); font-size: .95rem; }
.sd-contact a { color: inherit; text-decoration: none; }
.sd-contact a:hover { color: var(--brand); }
.sd-head__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sd-caret { padding-left: 10px; padding-right: 10px; }

/* the fact strip: label above, value below, hairline between */
.sd-stats { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border); margin: 20px -24px 0; padding: 0 24px; }
.sd-stat { flex: 1 1 150px; min-width: 0; padding: 14px 18px 16px; border-left: 1px solid var(--border); }
.sd-stat:first-child { border-left: none; padding-left: 0; }
.sd-stat__k { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; margin-bottom: 5px; }
.sd-stat__v { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-stat__v a { color: var(--brand); text-decoration: none; }

/* --- section tabs ---
   .card carries its own 20px padding for cards without a .card-body; these two lay their own
   padding out, so it has to go or every row is inset twice. */
.sd-tabs-card { margin-top: 16px; overflow: hidden; padding: 0; }
.sd-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 10px; scrollbar-width: none; }
.sd-tabs::-webkit-scrollbar { display: none; }
.sd-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 15px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.sd-tab:hover { color: var(--text); }
.sd-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.sd-tab i { font-size: .95rem; }

/* --- sections: open = full panel, closed = one clickable row --- */
.sd-sections { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.sd-sec { overflow: hidden; padding: 0; margin: 0; }
.sd-sec__head { display: flex; align-items: center; gap: 12px; padding: 10px 18px; cursor: pointer; user-select: none; }
.sd-sec__head:hover { background: var(--surface-2); }
.sd-sec.is-open .sd-sec__head { cursor: default; padding: 18px 22px 2px; }
.sd-sec.is-open .sd-sec__head:hover { background: none; }
.sd-sec__tile { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: .9rem; flex: none; }
.sd-sec.is-open .sd-sec__tile,
.sd-sec.is-open .sd-sec__count,
.sd-sec.is-open .sd-sec__chev { display: none; }
.sd-sec__title { font-size: var(--fs-base); font-weight: 700; margin: 0; }
.sd-sec.is-open .sd-sec__title { font-size: 1.06rem; font-weight: 800; }
.sd-sec__count { min-width: 22px; text-align: center; font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.sd-sec__tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sd-sec__chev { color: var(--text-muted); font-size: .85rem; }
.sd-sec__body { padding: 14px 22px 20px; }
.sd-sec:not(.is-open) .sd-sec__body { display: none; }
/* icon tile colours — one per section, so a folded list stays scannable */
.sd-sec__tile--app  { background: var(--brand-soft); color: var(--on-brand-soft, var(--brand-600)); }
.sd-sec__tile--ac   { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #6d28d9; }
.sd-sec__tile--edu  { background: color-mix(in srgb, #6366f1 15%, transparent); color: #4338ca; }
.sd-sec__tile--eng  { background: color-mix(in srgb, #0ea5e9 15%, transparent); color: #0369a1; }
.sd-sec__tile--work { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.sd-sec__tile--ref  { background: color-mix(in srgb, #ef4444 15%, transparent); color: #b91c1c; }
.sd-sec__tile--app2 { background: color-mix(in srgb, #10b981 15%, transparent); color: #047857; }
.sd-sec__tile--trv  { background: color-mix(in srgb, #06b6d4 15%, transparent); color: #0e7490; }
.sd-sec__tile--note { background: var(--surface-2); color: var(--text-muted); }

.sd-sub__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; font-size: var(--fs-sm); margin: 4px 0 12px; }
#ledgerCard { margin-top: 22px; }

/* --- one visa application --- */
.vapp { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.vapp + .vapp { margin-top: 14px; }
.vapp__head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 18px 20px; }
.vapp__country { display: flex; align-items: center; gap: 12px; min-width: 190px; }
.vapp__flag { font-size: 1.7rem; line-height: 1; }
.vapp__cname { font-size: var(--fs-base); font-weight: 800; }
.vapp__vtype { font-size: var(--fs-sm); color: var(--text-muted); }
.vapp__code { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.vapp__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vapp__label { font-size: var(--fs-xs); color: var(--text-muted); }
.vapp__value { font-size: var(--fs-sm); font-weight: 700; }
.vapp__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* step counter ring — how far through the workflow this file has got */
.vapp__ring { display: flex; align-items: center; gap: 7px; }
.vapp__ring-wrap { position: relative; width: 40px; height: 40px; flex: none; }
.vapp__ring svg { display: block; transform: rotate(-90deg); }
.vapp__ring .ring-bg { stroke: var(--border); }
.vapp__ring .ring-fg { stroke: var(--brand); stroke-linecap: round; }
.vapp__ring-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 800; color: var(--brand); }
.vapp__ring-tot { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }

.vapp__body { border-top: 1px solid var(--border); padding: 20px; }

/* --- stepper: numbers all the way, green behind, indigo on the current one --- */
.vapp__body .pipeline { gap: 0; padding: 4px 0 2px; }
.vapp__body .pipe-dot { width: 30px; height: 30px; font-size: var(--fs-sm); font-weight: 700; }
.vapp__body .pipe-step.done .pipe-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.vapp__body .pipe-step.current .pipe-dot { background: var(--surface); border-width: 2px; border-color: var(--brand); color: var(--brand); box-shadow: none; }
.vapp__body .pipe-step:not(.done):not(.current) .pipe-dot { color: var(--text-muted); }
.vapp__body .pipe-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); max-width: 96px; }
.vapp__body .pipe-step.current .pipe-label { color: var(--text); font-weight: 700; }

/* --- current-step document checklist --- */
.doc-block { margin-top: 22px; }
.doc-block__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.doc-block__title { font-size: var(--fs-base); font-weight: 700; }
.doc-block__warn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: #b45309; }
.doc-block table.data th { font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.doc-block td { vertical-align: middle; }
.doc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: var(--fs-sm); }
.doc-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.doc-dot { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); }
/* The dot keeps the brighter amber; the word next to it is a shade darker so it stays readable
   on white (the bright amber alone only reaches ~3.2:1). */
.doc-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, currentColor); flex: none; }
.doc-dot--pending { color: #b45309; --dot: #f59e0b; }
.doc-dot--done { color: var(--ok); }
.doc-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; background: none; border: none; padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); cursor: pointer; }
.doc-more:hover { text-decoration: underline; }
/* Colours tuned for white are too dark on the dark surface — lift them there.
   The active tab lifts off --brand rather than a fixed indigo, so a branch that picked its own
   colour keeps it in dark mode too. */
[data-theme="dark"] .doc-block__warn { color: #fbbf24; }
[data-theme="dark"] .doc-dot--pending { color: #fbbf24; --dot: #fbbf24; }
[data-theme="dark"] .sd-tab.is-active {
  color: color-mix(in srgb, var(--brand) 62%, #fff);
  border-bottom-color: color-mix(in srgb, var(--brand) 62%, #fff);
}

/* ==========================================================================
   BRANCH THEME
   Layout.applyBranchTheme() writes only the base colours a branch actually picks
   (--brand, --brand-soft, --sidebar, --topbar-bg) onto <html> and stamps
   [data-branded]. Every shade, tint and glow the palette needs is derived from
   those here, so one saved colour keeps working in both light and dark instead
   of the branch having to choose a set per theme.
   ========================================================================== */
[data-branded] {
  --brand-600: color-mix(in srgb, var(--brand) 84%, #000);
  --brand-700: color-mix(in srgb, var(--brand) 70%, #000);
  --on-brand-container: color-mix(in srgb, var(--brand) 88%, #000);
  --brand-glow: color-mix(in srgb, var(--brand) 20%, transparent);
}
/* Unless the branch named its own soft tint, derive one from the brand colour. */
[data-branded]:not([style*="--brand-soft"]) {
  --brand-soft: color-mix(in srgb, var(--brand) 12%, #fff);
  --brand-container: color-mix(in srgb, var(--brand) 12%, #fff);
}
/* On the dark plane the shades have to go lighter, not darker, to stay readable. */
[data-theme="dark"][data-branded] {
  --brand-600: color-mix(in srgb, var(--brand) 76%, #fff);
  --brand-700: color-mix(in srgb, var(--brand) 58%, #fff);
  --on-brand-container: color-mix(in srgb, var(--brand) 50%, #fff);
}
[data-theme="dark"][data-branded]:not([style*="--brand-soft"]) {
  --brand-soft: color-mix(in srgb, var(--brand) 20%, transparent);
  --brand-container: color-mix(in srgb, var(--brand) 20%, transparent);
}
/* The header colour is opt-in: without one the topbar keeps the default surface. */
[data-branded] .topbar { background: var(--topbar-bg, var(--surface)); }

@media (max-width: 992px) {
  .sd-head .card-body { padding: 18px 16px 0; }
  .sd-stats { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .sd-stat { flex-basis: 45%; border-left: none; padding-left: 0; }
  .sd-head__top { flex-wrap: wrap; }
  .sd-head__actions { width: 100%; }
  .vapp__head { gap: 16px; }
  .vapp__actions { margin-left: 0; width: 100%; }
}

/* ============================================================================
   GLOBAL INTERFACE CONSISTENCY LAYER · v130
   This is the final visual contract for shared admin screens. It intentionally
   leaves component structure and JavaScript hooks untouched.
   ============================================================================ */
:root {
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Plus Jakarta Sans", system-ui, sans-serif;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #273244;
  --heading: #111827;
  --text-muted: #687386;
  --border: #dfe4eb;
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 4px 14px rgba(15, 23, 42, .07);
  --shadow-lg: 0 18px 46px rgba(15, 23, 42, .16);
}

[data-theme="dark"] {
  --bg: #0d1420;
  --surface: #141d2b;
  --surface-2: #192435;
  --text: #dce3ed;
  --heading: #f5f7fb;
  --text-muted: #94a3b8;
  --border: rgba(148, 163, 184, .18);
}

html { font-size: 16px; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; background: var(--bg); }
body, button, input, select, textarea { letter-spacing: 0; }
h1, h2, h3, h4, h5, h6, .page-head h1, .modal-title, .swal2-title { color: var(--heading); letter-spacing: 0; text-transform: none; }
p { overflow-wrap: anywhere; }

/* Shell and navigation */
.content { width: 100%; max-width: none; padding: 20px 22px 36px; }
.topbar { min-height: 60px; height: 60px; padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar__search { max-width: 520px; }
.topbar__search input { height: 38px; border: 1px solid transparent; border-radius: 7px; background: var(--bg); }
.topbar__search input:focus { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent); }
.tb-toggle, .topbar .icon-btn { width: 34px; height: 34px; border-radius: 6px; }

.sidebar__brand { justify-content: flex-start; min-height: 64px; padding: 12px 16px; text-align: left; }
.sidebar__brand .logo { width: 36px; height: 36px; border-radius: 7px; background: var(--brand); }
.sb-name { font-size: 16px; letter-spacing: 0; }
.sb-tag { letter-spacing: 0; }
.sidebar__section { margin: 16px 10px 6px; font-family: var(--font); font-size: 10px; letter-spacing: 0; }
.nav-item, .nav-toggle { min-height: 38px; margin: 1px 0; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.nav-subitem { min-height: 34px; padding: 7px 10px 7px 40px; border-radius: 6px; font-size: 12.5px; }
.nav-subitem.active { padding-left: 37px; border-left: 3px solid var(--brand); background: rgba(255, 255, 255, .09); color: #fff; }

/* Page hierarchy */
.page-head { min-height: 52px; margin-bottom: 14px; padding: 0; gap: 12px; }
.page-head h1 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; }
.page-head p { margin-top: 4px; font-size: 13px; }
.crumb, .page-head .crumb { margin: 0 0 4px; gap: 6px; font-size: 12px; }
.crumb a { font-weight: 650; }
.overline, .mp-lbl { font-family: var(--font); letter-spacing: 0; }

/* Cards and section surfaces */
.card, .stat, .chip-card, .filter-card, .vapp, .mp-card, .mp-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card { padding: 16px; }
.card:hover, .stat:hover, .chip-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.card-header { min-height: 48px; padding: 13px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.card-body { padding: 16px; }
.card h6, .card-header, .card-title { font-size: 14px; font-weight: 750; }
.card + .card { margin-top: 14px; }
.stat { min-height: 112px; padding: 16px; gap: 10px; }
.stat__icon { width: 38px; height: 38px; border-radius: 7px; }
.stat__value { font-size: 24px; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 12.5px; }
.chip-card { min-width: 140px; padding: 10px 13px; }

/* Commands */
.btn { min-height: 38px; padding: 8px 14px; border-radius: 7px; font-size: 13px; font-weight: 700; line-height: 1.25; box-shadow: none; }
.btn-sm { min-height: 32px; padding: 6px 11px; border-radius: 6px; font-size: 12px; }
.btn-lg { min-height: 44px; padding: 10px 18px; }
.btn-brand { background: var(--brand); border: 1px solid var(--brand); color: #fff; box-shadow: none; }
.btn-brand:hover, .btn-brand:focus { background: var(--brand-600); border-color: var(--brand-600); box-shadow: none; }
.btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--surface-2); border-color: #cbd3dd; color: var(--heading); }
.icon-btn, .btn-icon { width: 32px; height: 32px; min-width: 32px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-muted); }
.icon-btn:hover, .btn-icon:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); background: var(--brand-soft); color: var(--brand-600); }
.row-actions, .table-actions { gap: 5px; flex-wrap: nowrap; }

/* Inputs and selection controls */
.form-label { margin-bottom: 5px; color: var(--heading); font-size: 12.5px; font-weight: 700; }
.form-control, .form-select { min-height: 40px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 13px; box-shadow: none; }
textarea.form-control { min-height: 80px; line-height: 1.55; resize: vertical; }
.form-control::placeholder { color: #98a2b3; }
.form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent); }
.form-text, .muted, .text-muted { color: var(--text-muted) !important; font-size: 12px; }
.input-group > .form-control, .input-group > .form-select, .input-group > .btn { border-radius: 0; }
.input-group > :first-child { border-radius: 7px 0 0 7px; }
.input-group > :last-child { border-radius: 0 7px 7px 0; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple { min-height: 40px; border-color: var(--border); border-radius: 7px; background: var(--surface); }

/* Tabs make the active choice unmistakable without oversized cards. */
.tabs { gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 7px; background: #eef1f5; }
[data-theme="dark"] .tabs { background: #101827; }
.tab { min-height: 34px; padding: 7px 12px; border: 1px solid transparent; border-radius: 5px; font-size: 12.5px; }
.tab:hover:not(.active) { background: color-mix(in srgb, var(--surface) 68%, transparent); }
.tab.active { border-color: color-mix(in srgb, var(--brand) 30%, var(--border)); background: var(--brand-soft); color: var(--brand-700); box-shadow: none; }
[data-theme="dark"] .tab.active { background: var(--brand-soft); color: var(--on-brand-container); }

/* Tables: quiet header, precise rows, consistent actions and pagination. */
.table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.card > .table-wrap:not(:only-child) { margin: 14px -16px -16px; border-width: 1px 0 0; border-radius: 0 0 7px 7px; }
.card > .table-wrap:only-child { margin: 0; border: 0; border-radius: inherit; }
table.data, .table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; color: var(--text); font-size: 13px; }
table.data thead th, .table thead th {
  height: 42px; padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: #f6f8fb; color: #667085; font-family: var(--font); font-size: 10.5px;
  font-weight: 750; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
}
table.data tbody td, .table tbody td { padding: 11px 12px; border-bottom: 1px solid #e9edf2; color: var(--text); vertical-align: middle; }
table.data tbody tr:nth-child(even), .table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; box-shadow: none; }
table.data tbody tr:hover, .table-hover > tbody > tr:hover > * { background: #f8faff; color: var(--text); box-shadow: none; }
table.data tbody tr:last-child td, .table tbody tr:last-child td { border-bottom: 0; }
.cell-primary { color: var(--heading); font-weight: 700; }
.cell-sub { margin-top: 2px; color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }
.empty, table.data td.dt-empty { padding: 36px 16px; color: var(--text-muted); font-size: 13px; }

.dt-container .dt-layout-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dt-container .dt-layout-row:last-child { min-height: 54px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--border); background: #fafbfc; }
.dt-info, .dt-length label { color: var(--text-muted); font-size: 12px; }
.dt-length select { min-width: 68px; min-height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.dt-paging { display: flex; align-items: center; gap: 4px; }
.dt-paging .dt-paging-button, .pagination .page-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
  margin: 0; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700;
}
.dt-paging .dt-paging-button.current, .pagination .page-item.active .page-link { border-color: var(--brand); background: var(--brand); color: #fff; }
.dt-paging .dt-paging-button.disabled, .pagination .page-item.disabled .page-link { opacity: .42; }

/* Status, menus, dialogs and feedback */
.badge-soft, .status-label, .country-chip, .pill { min-height: 22px; padding: 3px 8px; font-size: 11px; font-weight: 700; }
.dropdown-menu { padding: 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-lg); }
.dropdown-item { min-height: 34px; padding: 7px 10px; border-radius: 5px; color: var(--text); font-size: 12.5px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--heading); }
.dropdown-divider { border-color: var(--border); }
.modal-backdrop.show { opacity: .42; }
.modal-content { overflow: hidden; border: 1px solid var(--border) !important; border-radius: 9px !important; background: var(--surface); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { min-height: 58px; padding: 14px 18px; border-color: var(--border); background: var(--surface); }
.modal-body { padding: 18px; }
.modal-title { font-size: 17px; font-weight: 800; }
.alert { border-radius: 7px; font-size: 13px; }
.toast-msg { border-radius: 7px !important; }

@media (max-width: 768px) {
  .content { padding: 14px 12px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .page-head { min-height: 0; margin-bottom: 12px; }
  .page-head h1 { font-size: 20px; }
  .card { padding: 14px; }
  .card > .table-wrap:not(:only-child) { margin: 12px -14px -14px; }
  .card-body { padding: 14px; }
  .stat { min-height: 102px; padding: 14px; }
  .btn { min-height: 36px; }
  .filter-bar > .form-control, .filter-bar > .form-select, .filter-bar > .select2-container { max-width: none; flex-basis: calc(50% - 6px); }
  .filter-bar__end { width: 100%; justify-content: flex-end; }
  .table-wrap { border-radius: 6px; }
  table.data thead th, .table thead th { padding: 9px 10px; }
  table.data tbody td, .table tbody td { padding: 10px; }
  .modal-dialog { margin: 10px; }
  .modal-body { padding: 15px; }
}

@media (max-width: 480px) {
  .filter-bar > .form-control, .filter-bar > .form-select, .filter-bar > .select2-container { flex-basis: 100%; }
  .page-head .btn, .page-head .btn-group { max-width: 100%; }
  .dt-container .dt-layout-cell { width: 100%; justify-content: center; }
  .dt-container .dt-layout-row:last-child { justify-content: center; }
}

/* Width containment: no component may make the application canvas wider than the viewport. */
body { overflow-x: hidden; }
.app, .main, .content, .card, .stat, .filter-card, .table-wrap, .grid-stats, .lead-stat-row { min-width: 0; }
.main { max-width: 100%; }
.table-wrap { width: 100%; }
[data-theme="dark"] .dt-container .dt-layout-row:last-child { background: var(--surface-2); }

@media (max-width: 768px) {
  .main { width: 100%; max-width: 100vw; overflow-x: clip; }
  .topbar { width: 100%; max-width: 100vw; overflow: visible; }
  .topnav__actions { min-width: 0; gap: 6px; }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grid-stats > *, .lead-stat-row > * { min-width: 0; }

  /* A shared table cannot assume every cell has a data-label. Keep a reliable grid and let
     only its own wrapper scroll horizontally instead of turning incomplete rows into cards. */
  table.data { display: table; width: max-content; min-width: 100%; }
  table.data thead { display: table-header-group; }
  table.data tbody { display: table-row-group; }
  table.data thead tr { display: table-row; }
  table.data tbody tr { display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  table.data tbody td { display: table-cell; padding: 10px; border-bottom: 1px solid var(--border); }
  table.data tbody td::before { display: none; content: none; }
}

/* ============================================================================
   PROFESSIONAL PAGE PATTERNS - v131
   Shared visual contract for dashboards, operational lists, forms and records.
   Layout.enhanceSurfaces() scopes these rules without changing page behaviour.
   ============================================================================ */
:root {
  --bg: #f5f7fa;
  --surface-2: #f8fafc;
  --text: #273142;
  --heading: #101828;
  --text-muted: #667085;
  --border: #e1e6ed;
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .035);
  --shadow: 0 4px 12px rgba(16, 24, 40, .06);
  --shadow-lg: 0 18px 42px rgba(16, 24, 40, .16);
}
[data-theme="dark"] {
  --bg: #0b111c;
  --surface: #111a29;
  --surface-2: #172131;
  --heading: #f1f5f9;
  --text: #dbe3ee;
  --text-muted: #94a3b8;
  --border: rgba(148, 163, 184, .17);
}

body.ep-ui { color: var(--text); background: var(--bg); }
.ep-ui .content { padding: 18px 20px 34px; }
.ep-ui .main { background: var(--bg); }

/* Shell */
.ep-ui .sidebar {
  --sidebar-text: #334155;
  --sidebar-text-hover: #0f172a;
  background: #fff;
  color: #0f172a;
  border-right: 1px solid #e2e8f0;
  box-shadow: none;
}
.ep-ui .sidebar__brand { min-height: 62px; padding: 11px 15px; border-bottom-color: #e2e8f0; color: #0f172a; }
.ep-ui .sidebar__brand .logo { border-radius: 7px; background: var(--brand); }
.ep-ui .sidebar__brand .brand-logo-img { height: 54px; border-radius: 7px; }
.ep-ui .sidebar__brand .logo--ghost { border-color: #cbd5e1; color: #64748b; }
.ep-ui .sb-name { color: var(--brand); }
.ep-ui .sb-tag { color: #64748b; }
.ep-ui .sidebar__nav { padding: 8px 10px 16px; }
.ep-ui .sidebar__nav::-webkit-scrollbar-thumb { background: #cbd5e1; }
.ep-ui .sidebar__section { margin: 17px 10px 6px; color: #64748b; letter-spacing: .1em; }
.ep-ui .nav-item,
.ep-ui .nav-toggle { min-height: 38px; border-radius: 6px; padding: 8px 10px; }
.ep-ui .nav-item:hover,
.ep-ui .nav-toggle:hover { background: var(--brand-soft); color: var(--brand-700); }
.ep-ui .nav-subitem { min-height: 34px; border-radius: 5px; padding-top: 7px; padding-bottom: 7px; }
.ep-ui .nav-subitem:hover { background: var(--brand-soft); color: var(--brand-700); }
.ep-ui .nav-item.active,
.ep-ui .nav-item.active:hover { background: var(--brand); }
.ep-ui .nav-subitem.active { border-left: 3px solid var(--brand); border-radius: 4px; background: var(--brand-soft); color: var(--brand-700); }
.ep-ui .nav-badge { background: var(--brand-container); color: var(--brand-700); }
.ep-ui .nav-item.active .nav-badge { background: rgba(255, 255, 255, .24); color: #fff; }
.ep-ui .sidebar__foot { padding: 10px; background: #fff; border-top: 1px solid #e2e8f0; }
.ep-ui .sb-foot { border-top-color: #e2e8f0; }
.ep-ui .sb-foot__name { color: #0f172a; }
.ep-ui .sb-foot__role { color: #64748b; }
.ep-ui .topbar { height: 60px; min-height: 60px; padding: 0 18px; }
.ep-ui .topbar__search { max-width: 560px; }
.ep-ui .topbar__search input { height: 38px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.ep-ui .topbar__search input:hover { border-color: #cbd3df; }
.ep-ui .tb-toggle,
.ep-ui .topbar .icon-btn { width: 34px; height: 34px; border-radius: 6px; }
.ep-ui .topnav__user { border-radius: 7px; }
.ep-ui .avatar { border-radius: 6px; background: var(--brand); color: #fff; }
.ep-ui .qs-results,
.ep-ui .noti-panel { border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); }
.ep-ui .qs-item,
.ep-ui .noti-item { transition: background-color .12s ease; }

/* Page hierarchy and commands */
.ep-ui .page-head { min-height: 48px; margin-bottom: 13px; align-items: center !important; }
.ep-ui .page-head h1,
.ep-ui .greet-h1 { font-size: 22px; line-height: 1.2; font-weight: 800; }
.ep-ui .page-head p { max-width: 760px; margin-top: 3px; font-size: 12.5px; }
.ep-ui .crumb,
.ep-ui .page-head .crumb { margin-bottom: 3px; font-size: 11.5px; }
.ep-ui .btn { min-height: 36px; padding: 7px 12px; border-radius: 6px; font-size: 12.5px; }
.ep-ui .btn-sm { min-height: 30px; padding: 5px 9px; border-radius: 5px; font-size: 11.5px; }
.ep-ui .btn-lg { min-height: 42px; padding: 9px 16px; }
.ep-ui .btn-brand { border: 1px solid var(--brand); background: var(--brand); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.ep-ui .btn-ghost { border-color: var(--border); color: var(--text); }
.ep-ui .btn-danger,
.ep-ui .btn-outline-danger { box-shadow: none; }
.ep-ui .ui-icon-only,
.ep-ui .icon-btn,
.ep-ui .btn-icon { width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 5px; }
.ep-ui .dropdown-menu { border-radius: 7px; }
.ep-ui .dropdown-item { border-radius: 4px; }

/* Surfaces */
.ep-ui .card,
.ep-ui .stat,
.ep-ui .chip-card,
.ep-ui .filter-card,
.ep-ui .kcard,
.ep-ui .agr,
.ep-ui .walkin { border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); }
.ep-ui .card { padding: 15px; }
.ep-ui .surface-section,
.ep-ui .surface-table { padding: 0; overflow: hidden; }
.ep-ui .surface-section > .card-header { min-height: 47px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.ep-ui .surface-section > .card-header h2,
.ep-ui .surface-section > .card-header h3,
.ep-ui .surface-section > .card-header h5,
.ep-ui .surface-section > .card-header h6 { margin: 0; font-size: 13.5px; font-weight: 800; }
.ep-ui .surface-section > .card-body { padding: 15px; }
.ep-ui .surface-table > .table-wrap { margin: 0; border-width: 0; border-radius: 0; }

/* List and table pages */
.ep-ui.ui-list .page-head + .d-flex,
.ep-ui.ui-list .page-head + .filter-bar,
.ep-ui.ui-list .filter-card,
.ep-ui .filter-bar { border-color: var(--border); }
.ep-ui .filter-bar { gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ep-ui .filter-bar > .form-control,
.ep-ui .filter-bar > .form-select,
.ep-ui .filter-bar > .select2-container { max-width: 250px; }
.ep-ui .table-wrap { border-radius: 7px; }
.ep-ui table.data,
.ep-ui .table { font-size: 12.5px; }
.ep-ui table.data thead th,
.ep-ui .table thead th { position: relative; height: 40px; padding: 9px 11px; background: var(--surface-2); font-size: 10px; letter-spacing: .04em; }
.ep-ui table.data tbody td,
.ep-ui .table tbody td { height: 48px; padding: 9px 11px; border-bottom-color: var(--border); }
.ep-ui table.data tbody tr { transition: background-color .12s ease; }
.ep-ui table.data tbody tr:hover { background: color-mix(in srgb, var(--brand) 3.5%, var(--surface)); }
.ep-ui table.data tbody tr:focus-within { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.ep-ui .cell-primary { color: var(--heading); font-size: 12.5px; font-weight: 750; }
.ep-ui .cell-sub { margin-top: 1px; font-size: 11px; }
.ep-ui .dt-container .dt-layout-row:last-child { min-height: 50px; padding: 8px 11px; }
.ep-ui .dt-paging .dt-paging-button,
.ep-ui .pagination .page-link { min-width: 30px; height: 30px; border-radius: 5px; }
.ep-ui .row-actions,
.ep-ui .table-actions { gap: 4px; }

/* Forms */
.ep-ui .surface-form { padding: 0; overflow: hidden; }
.ep-ui .surface-form > form,
.ep-ui .surface-form > .card-body { padding: 16px; }
.ep-ui.ui-form .content > form,
.ep-ui.ui-form .content > .form-card { max-width: 1440px; }
.ep-ui .form-label { margin-bottom: 5px; color: var(--heading); font-size: 12px; font-weight: 750; }
.ep-ui .form-control,
.ep-ui .form-select { min-height: 38px; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; }
.ep-ui textarea.form-control { min-height: 86px; }
.ep-ui .form-control:disabled,
.ep-ui .form-select:disabled,
.ep-ui .form-control[readonly] { border-color: var(--border); background: var(--surface-2); color: var(--text-muted); opacity: 1; }
.ep-ui .form-check-input { border-color: #c6cfdb; }
.ep-ui .input-group > :first-child { border-radius: 6px 0 0 6px; }
.ep-ui .input-group > :last-child { border-radius: 0 6px 6px 0; }
.ep-ui .select2-container--default .select2-selection--single,
.ep-ui .select2-container--default .select2-selection--multiple { min-height: 38px; border-radius: 6px; }
.ep-ui .select2-dropdown,
.ep-ui .flatpickr-calendar { border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); }
.ep-ui .program-block,
.ep-ui .form-section { border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.ep-ui .section-title { padding-bottom: 8px; border-bottom: 1px solid var(--border); color: var(--heading); font-size: 13px; font-weight: 800; }

/* Detail and record pages */
.ep-ui.ui-detail .detail-grid { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 14px; }
.ep-ui.ui-detail .detail-grid > * { min-width: 0; }
.ep-ui.ui-detail .sd-sections { gap: 10px; margin-top: 13px; }
.ep-ui.ui-detail .sd-head .card-body { padding: 18px 18px 0; }
.ep-ui.ui-detail .sd-head__avatar { width: 54px; height: 54px; border-radius: 8px; }
.ep-ui.ui-detail .sd-head__title h1 { font-size: 20px; }
.ep-ui.ui-detail .info-row { min-height: 38px; padding: 8px 0; font-size: 12.5px; }
.ep-ui.ui-detail .info-row .k { flex: 0 0 42%; }
.ep-ui.ui-detail .info-row .v { min-width: 0; overflow-wrap: anywhere; }
.ep-ui .timeline-item { font-size: 12.5px; }

/* Dashboard */
.ep-ui.ui-dashboard .page-head { margin-bottom: 14px !important; }
.ep-ui.ui-dashboard .kpi-row { gap: 10px; }
.ep-ui.ui-dashboard .kcard { position: relative; min-height: 112px; padding: 15px 16px 14px; overflow: hidden; }
.ep-ui.ui-dashboard .kcard::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand); }
.ep-ui.ui-dashboard .kcard:nth-child(2)::before { background: var(--ok); }
.ep-ui.ui-dashboard .kcard:nth-child(3)::before { background: var(--warn); }
.ep-ui.ui-dashboard .kcard:nth-child(4)::before { background: var(--info); }
.ep-ui.ui-dashboard .kcard__value { margin: 9px 0 2px; font-size: 28px; letter-spacing: 0; }
.ep-ui.ui-dashboard .kcard__label { font-size: 11.5px; }
.ep-ui.ui-dashboard .dgrid,
.ep-ui.ui-dashboard .dgrid__col { gap: 12px; }
.ep-ui.ui-dashboard .fu-head { padding: 14px 16px 11px; }
.ep-ui.ui-dashboard .fu-cols { padding: 7px 16px; }
.ep-ui.ui-dashboard .fu-row { min-height: 45px; padding: 8px 15px; }
.ep-ui.ui-dashboard .fu-expand { padding: 9px 11px 11px; }
.ep-ui.ui-dashboard .pipe-dark { padding: 16px; background: #101827; border-color: #101827; }
.ep-ui.ui-dashboard .trendchart { height: 190px; }
.ep-ui.ui-dashboard .trendchart .tbar__fill { border-radius: 5px 5px 2px 2px; }
.ep-ui.ui-dashboard .walkin { padding: 8px 10px; background: var(--surface-2); box-shadow: none; }
.ep-ui.ui-dashboard .agr { min-height: 120px; padding: 15px; }
.ep-ui.ui-dashboard .agr__ic { width: 34px; height: 34px; border-radius: 6px; }
.ep-ui.ui-dashboard .agr__num { font-size: 25px; letter-spacing: 0; }

/* Dialogs, loading and empty states */
.ep-ui .modal-content { border-radius: 8px !important; }
.ep-ui .modal-header,
.ep-ui .modal-footer { min-height: 54px; padding: 12px 16px; }
.ep-ui .modal-body { padding: 16px; }
.ep-ui .modal-title { font-size: 16px; }
.ep-ui .btn-close { width: 30px; height: 30px; padding: 0; background-size: 12px; border-radius: 5px; }
.ep-ui .ep-swal { border-radius: 8px !important; }
.ep-ui .spinner-wrap { min-height: 96px; padding: 26px; }
.ep-ui .spinner-border { width: 1.45rem; height: 1.45rem; border-width: .16em; }
.ep-ui .empty,
.ep-ui .empty-state,
.ep-ui table.data td.dt-empty { padding: 34px 16px; color: var(--text-muted); text-align: center; }

@media (max-width: 1024px) {
  .ep-ui.ui-detail .detail-grid { grid-template-columns: 1fr; }
  .ep-ui .content { padding-right: 16px; padding-left: 16px; }
}
@media (max-width: 768px) {
  .ep-ui .content { padding: 13px 11px calc(82px + env(safe-area-inset-bottom, 0px)); }
  .ep-ui .page-head { align-items: flex-start !important; gap: 9px; }
  .ep-ui .page-head h1,
  .ep-ui .greet-h1 { font-size: 19px; }
  .ep-ui .page-head > .d-flex:last-child { width: 100%; justify-content: flex-start; }
  .ep-ui .filter-bar { padding: 8px; }
  .ep-ui .filter-bar > .form-control,
  .ep-ui .filter-bar > .form-select,
  .ep-ui .filter-bar > .select2-container { max-width: none; }
  .ep-ui .card { padding: 13px; }
  .ep-ui .surface-section,
  .ep-ui .surface-table,
  .ep-ui .surface-form { padding: 0; }
  .ep-ui.ui-dashboard .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ep-ui.ui-dashboard .kcard { min-height: 98px; padding: 13px 13px 11px; }
  .ep-ui.ui-dashboard .kcard__value { font-size: 23px; }
  .ep-ui.ui-dashboard .trendchart { height: 150px; }
  .ep-ui .modal-dialog { margin: 8px; }
  .ep-ui .modal-header,
  .ep-ui .modal-footer { padding: 11px 13px; }
  .ep-ui .modal-body { padding: 13px; }
}
@media (max-width: 480px) {
  .ep-ui .page-head > .d-flex:last-child .btn { flex: 1 1 auto; }
  .ep-ui.ui-dashboard .kpi-row { grid-template-columns: 1fr 1fr; }
  .ep-ui.ui-detail .sd-head__top { gap: 12px; }
  .ep-ui.ui-detail .sd-head__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-ui .dt-container .dt-layout-row:last-child { padding: 9px; }
}

/* ============================================================================
   Lead Management expert UI - v132
   Scoped to the lead-management screen so the rest of the admin keeps its rhythm.
   ============================================================================ */
.ep-ui.ui-leads {
  --lead-accent: var(--brand);
  --lead-line: #dce3ee;
  --lead-hover: var(--brand-soft);
}

.ep-ui.ui-leads .content {
  max-width: none;
  padding: 22px 24px 40px;
}

.ep-ui.ui-leads .page-head {
  min-height: 58px;
  margin-bottom: 16px;
  padding: 0;
}

.ep-ui.ui-leads .page-head h1 {
  color: #07111f;
  font-size: 24px;
  letter-spacing: 0;
}

.ep-ui.ui-leads .page-head h1::after {
  display: none;
}

.ep-ui.ui-leads .crumb {
  color: #64748b;
  font-weight: 650;
}

.ep-ui.ui-leads .crumb a {
  color: var(--brand);
  font-weight: 800;
}

.ep-ui.ui-leads .page-head .btn {
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 800;
}

.ep-ui.ui-leads .btn-brand {
  box-shadow: 0 10px 22px var(--brand-glow);
}

.ep-ui.ui-leads .btn-ghost:hover {
  border-color: #c7d2fe;
  background: #f8faff;
  color: #111827;
}

.ep-ui.ui-leads .lead-stat-row {
  grid-template-columns: repeat(7, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.ep-ui.ui-leads .lead-stat-card {
  isolation: isolate;
  min-height: 64px;
  gap: 10px;
  padding: 10px 12px;
  border-color: #dfe6f0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.ep-ui.ui-leads .lead-stat-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 42%, #dfe6f0);
  box-shadow: 0 10px 22px rgba(16, 24, 40, .08);
}

.ep-ui.ui-leads .lead-stat-card.active {
  border-color: color-mix(in srgb, var(--accent, var(--brand)) 70%, #dfe6f0);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--brand)) 8%, #ffffff) 0%, #ffffff 100%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent, var(--brand)) 18%, transparent),
    0 12px 28px rgba(16, 24, 40, .09);
}

.ep-ui.ui-leads .lead-stat-card::after {
  height: 3px;
  opacity: .9;
}

.ep-ui.ui-leads .lead-stat-card.active::after {
  height: 4px;
}

.ep-ui.ui-leads .lead-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--accent, var(--brand));
  background: color-mix(in srgb, var(--accent, var(--brand)) 11%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, var(--brand)) 16%, transparent);
}

.ep-ui.ui-leads .lead-stat-label {
  color: #475569;
  font-size: 11.5px;
  font-weight: 750;
}

.ep-ui.ui-leads .lead-stat-card .tab-badge {
  color: #06101f;
  font-size: 22px;
  font-weight: 850;
}

.ep-ui.ui-leads .lead-toolbar {
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding: 10px;
  border: 1px solid var(--lead-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .035);
}

.ep-ui.ui-leads .lead-toolbar .dropdown,
.ep-ui.ui-leads .lead-toolbar #resetFiltersBtn {
  flex: 0 0 auto;
}

.ep-ui.ui-leads .lead-toolbar .form-control,
.ep-ui.ui-leads .lead-toolbar .form-select,
.ep-ui.ui-leads .lead-toolbar .btn {
  height: 40px;
  min-height: 40px;
  border-radius: 7px;
  border-color: #d9e1ec;
  background-color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.ep-ui.ui-leads .lead-toolbar .form-control:focus,
.ep-ui.ui-leads .lead-toolbar .form-select:focus {
  border-color: color-mix(in srgb, var(--brand) 55%, #d9e1ec);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.ep-ui.ui-leads .lead-toolbar .search-box {
  flex: 1 1 320px;
  max-width: 460px;
  min-width: 260px;
}

.ep-ui.ui-leads .lead-toolbar .search-box .form-control {
  padding-left: 38px;
  font-weight: 650;
}

.ep-ui.ui-leads .lead-toolbar .search-box i {
  left: 13px;
  color: #64748b;
}

.ep-ui.ui-leads .lead-table-card {
  padding: 0;
  overflow: hidden;
  border-color: var(--lead-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
}

.ep-ui.ui-leads .lead-table-card .table-wrap {
  border: 0;
  border-radius: 0;
}

.ep-ui.ui-leads #leadsTable {
  table-layout: fixed;
  font-size: 12.5px;
}

.ep-ui.ui-leads #leadsTable thead th {
  height: 46px;
  padding: 11px 9px;
  border-bottom: 1px solid #d7e0eb;
  background: #f8fafc;
  color: #59677a;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .035em;
}

.ep-ui.ui-leads #leadsTable tbody td {
  height: 72px;
  padding: 12px 9px;
  border-bottom-color: #e4eaf2;
  color: #1f2937;
}

.ep-ui.ui-leads #leadsTable tbody tr:hover {
  background: var(--lead-hover);
}

.ep-ui.ui-leads #leadsTable th:nth-child(1),
.ep-ui.ui-leads #leadsTable td:nth-child(1) { width: 38px; max-width: 38px; text-align: center; }
.ep-ui.ui-leads #leadsTable th:nth-child(2),
.ep-ui.ui-leads #leadsTable td:nth-child(2) { width: 14%; }
.ep-ui.ui-leads #leadsTable th:nth-child(3),
.ep-ui.ui-leads #leadsTable td:nth-child(3) { width: 12%; }
.ep-ui.ui-leads #leadsTable th:nth-child(4),
.ep-ui.ui-leads #leadsTable td:nth-child(4) { width: 12%; }
.ep-ui.ui-leads #leadsTable th:nth-child(5),
.ep-ui.ui-leads #leadsTable td:nth-child(5) { width: 80px; }
.ep-ui.ui-leads #leadsTable th:nth-child(10),
.ep-ui.ui-leads #leadsTable td:nth-child(10) { width: 62px; text-align: center; }
.ep-ui.ui-leads #leadsTable th:nth-child(11),
.ep-ui.ui-leads #leadsTable td:nth-child(11) { width: 100px; }
.ep-ui.ui-leads #leadsTable th:nth-child(12),
.ep-ui.ui-leads #leadsTable td:nth-child(12) { width: 96px; }

.ep-ui.ui-leads #leadsTable .cell-primary {
  color: #07111f;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.ep-ui.ui-leads #leadsTable .cell-sub {
  color: #64748b;
  font-size: 11.5px;
  line-height: 1.35;
}

.ep-ui.ui-leads #leadsTable .who-cell {
  color: #111827;
  font-size: 12.5px;
  font-weight: 800;
}

.ep-ui.ui-leads #leadsTable .status-label,
.ep-ui.ui-leads #leadsTable .badge-soft {
  min-height: 25px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.ep-ui.ui-leads #leadsTable .status-label {
  padding: 4px 10px;
}

.ep-ui.ui-leads #leadsTable .badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
}

.ep-ui.ui-leads #leadsTable .btn-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #fff;
}

.ep-ui.ui-leads #leadsTable .btn-icon:hover {
  background: #eef2ff;
}

.ep-ui.ui-leads #leadsTable_wrapper .dt-layout-row:last-child {
  min-height: 58px;
  padding: 11px 14px;
  background: #fbfcfe;
}

[data-theme="dark"] .ep-ui.ui-leads {
  --lead-line: rgba(148, 163, 184, .18);
  --lead-hover: color-mix(in srgb, var(--brand) 13%, transparent);
}

[data-theme="dark"] .ep-ui.ui-leads .page-head h1,
[data-theme="dark"] .ep-ui.ui-leads #leadsTable .cell-primary,
[data-theme="dark"] .ep-ui.ui-leads #leadsTable .who-cell {
  color: var(--heading);
}

[data-theme="dark"] .ep-ui.ui-leads .lead-stat-card,
[data-theme="dark"] .ep-ui.ui-leads .lead-toolbar,
[data-theme="dark"] .ep-ui.ui-leads .lead-table-card,
[data-theme="dark"] .ep-ui.ui-leads .lead-toolbar .form-control,
[data-theme="dark"] .ep-ui.ui-leads .lead-toolbar .form-select,
[data-theme="dark"] .ep-ui.ui-leads .lead-toolbar .btn,
[data-theme="dark"] .ep-ui.ui-leads #leadsTable .btn-icon {
  background: var(--surface);
}

[data-theme="dark"] .ep-ui.ui-leads #leadsTable thead th,
[data-theme="dark"] .ep-ui.ui-leads #leadsTable_wrapper .dt-layout-row:last-child {
  background: var(--surface-2);
}

@media (max-width: 1280px) {
  .ep-ui.ui-leads .lead-stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .ep-ui.ui-leads .content { padding: 16px 14px 34px; }
  .ep-ui.ui-leads .lead-toolbar .search-box { min-width: 100%; max-width: none; }
  .ep-ui.ui-leads .lead-toolbar .form-select { flex: 1 1 180px; }
  .ep-ui.ui-leads .table-wrap--fit { overflow-x: auto; }
  .ep-ui.ui-leads #leadsTable { min-width: 1120px; table-layout: auto; }
}

@media (max-width: 640px) {
  .ep-ui.ui-leads .lead-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-ui.ui-leads .lead-stat-card { min-height: 58px; }
  .ep-ui.ui-leads .page-head .btn { flex: 1 1 auto; }
}

/* Primary badges use a solid brand fill everywhere. This keeps their white label readable even
   when a branch theme customizes the softer brand-container tokens. */
.badge-soft.badge-b,
.sd-kind,
[data-theme="dark"] .badge-soft.badge-b,
[data-theme="dark"] .sd-kind {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}