/* ============================================================
   Health Fairs Direct — Design System
   Layered on Bootstrap 5, driven entirely by CSS variables.
   Visual direction: "calm operations console" — light, spacious,
   status color as signal. Signature: the status spine (consistent
   chips + 3px left accents across every module).
   ============================================================ */

:root {
  /* Palette */
  --primary:      #0F6B5C;
  --primary-600:  #0C5749;
  --primary-700:  #094538;
  --primary-soft: #E4F2EF;
  --accent:       #3B6FE0;
  --accent-soft:  #E8EEFB;
  --success:      #1F9D55;
  --success-soft: #E6F4EC;
  --success-text: #166534;
  --warning:      #B7791F;
  --warning-soft: #FBF1DE;
  --warning-text: #92600A;
  --danger:       #C53030;
  --danger-soft:  #FBE9E9;
  --danger-text:  #9B2226;

  --surface:  #FFFFFF;
  --gray-25:  #FCFCFD;
  --gray-50:  #F8F9FB;
  --gray-100: #F1F3F6;
  --gray-200: #E5E8EC;
  --gray-300: #D2D6DC;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Spacing / radius / shadow */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 32px -8px rgba(16,24,40,.18);

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-w-rail: 72px;
  --header-h: 64px;
  --content-max: 1440px;

  /* Type */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Bootstrap bridges */
  --bs-primary: var(--primary);
  --bs-body-font-family: var(--font-ui);
  --bs-body-color: var(--gray-800);
  --bs-body-bg: var(--gray-25);
  --bs-border-color: var(--gray-200);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-700);
  /* v2.55.0: Bootstrap paints table cells with --bs-emphasis-color, which it
     hardcodes to black. Left alone, EVERY .table renders black-on-dark once
     the dark theme is on. Bridge it to the themed scale instead. */
  --bs-emphasis-color: var(--gray-900);
  --bs-emphasis-color-rgb: 17, 24, 39;
}

/* Every Bootstrap table follows the theme, in both appearances. */
.table {
  --bs-table-color: var(--gray-800);
  --bs-table-striped-color: var(--gray-800);
  --bs-table-active-color: var(--gray-800);
  --bs-table-hover-color: var(--gray-800);
  --bs-table-bg: transparent;
}

/* Dark mode scaffolding (toggle ships in Phase 10) */
[data-theme="dark"] {
  --surface: #171E27;
  --gray-25: #0F1419; --gray-50: #141A21; --gray-100: #1B222B;
  --gray-200: #2A3441; --gray-300: #3B4657; --gray-400: #6B7686;
  --gray-500: #A8B3C2; --gray-600: #C4CEDA; --gray-700: #E6EAEF;
  --gray-800: #FFFFFF; --gray-900: #FFFFFF; /* v1.50.0: dark-mode text is white */
  --primary-soft: #10312B; --accent-soft: #16233F;
  --success-soft: #12301F; --success-text: #7FD8A5;
  --warning-soft: #34290F; --warning-text: #E4B45E;
  --danger-soft: #391616;  --danger-text: #E88A8A;
  --bs-body-color: var(--gray-800);
  --bs-body-bg: var(--gray-25);
  --bs-border-color: var(--gray-200);
  --bs-emphasis-color: #FFFFFF;          /* v2.55.0: tables, not black-on-dark */
  --bs-emphasis-color-rgb: 255, 255, 255;
  /* v2.98.0: Bootstrap's secondary/tertiary tokens stayed light — list-group rows
     (dashboard Notifications) hovered white-on-white and rested in dark grey text */
  --bs-secondary-color: var(--gray-600); --bs-secondary-color-rgb: 196, 206, 218;
  --bs-tertiary-color: var(--gray-500);  --bs-tertiary-color-rgb: 168, 179, 194;
  --bs-secondary-bg: var(--gray-100);    --bs-secondary-bg-rgb: 27, 34, 43;
  --bs-tertiary-bg: var(--gray-50);      --bs-tertiary-bg-rgb: 20, 26, 33;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  color-scheme: dark;
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select {
  background-color: var(--gray-50); color: var(--gray-800); border-color: var(--gray-200);
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus {
  background-color: var(--gray-50); color: var(--gray-800);
}
/* v2.125.0 — a light chevron on dark fields (Bootstrap's default is near-black) */
[data-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c3cbd6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-theme="dark"] .form-control::placeholder { color: var(--gray-400); }
[data-theme="dark"] .form-control::file-selector-button {
  background: var(--gray-200); color: var(--gray-800); border-color: var(--gray-300);
}
[data-theme="dark"] .form-control::file-selector-button:hover { background: var(--gray-300); }
[data-theme="dark"] .btn-outline-secondary { color: var(--gray-700); border-color: var(--gray-300); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--gray-100); color: var(--gray-800); }
[data-theme="dark"] .alert-success { background: var(--success-soft); color: var(--success-text); border-color: transparent; }
[data-theme="dark"] .alert-warning { background: var(--warning-soft); color: var(--warning-text); border-color: transparent; }
[data-theme="dark"] .alert-danger  { background: var(--danger-soft);  color: var(--danger-text);  border-color: transparent; }
[data-theme="dark"] .dropdown-menu {
  background: var(--surface); border-color: var(--gray-200);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
[data-theme="dark"] .dropdown-item { color: var(--gray-700); }
[data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--gray-100); color: var(--gray-800); }
[data-theme="dark"] .dropdown-item-text { color: var(--gray-500); }
[data-theme="dark"] .dropdown-divider { border-color: var(--gray-200); }
[data-theme="dark"] .modal-content { background: var(--surface); color: var(--gray-800); border-color: var(--gray-200); }
[data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--gray-200); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .header-search input { background: var(--gray-50); color: var(--gray-800); border-color: var(--gray-200); }
[data-theme="dark"] .nav-item-link i { color: #FFFFFF; }
[data-theme="dark"] .nav-item-link:hover i, [data-theme="dark"] .nav-item-link.active i { color: #FFFFFF; }
[data-theme="dark"] .header-icon-btn { color: #FFFFFF; }
[data-theme="dark"] .sidebar-brand .brand-mark { color: #FFFFFF; }

/* ---------- Base ---------- */
@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('Segoe UI'); /* system-stack fallback; self-hosted woff2 optional */
  font-display: swap;
}

html { font-size: 15px; }
body {
  font-family: var(--font-ui);
  background: var(--body-bg, var(--gray-25));
  color: var(--gray-800);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4,h5 { font-weight: 650; letter-spacing: -0.015em; color: var(--gray-900); }
.text-muted { color: var(--gray-500) !important; }
.tabular { font-variant-numeric: tabular-nums; }
.small-caps-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gray-500);
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--gray-200);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 1030;
  transition: transform .2s ease;
}
.app-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column; min-width: 0;
}
.app-content {
  width: 100%; max-width: var(--content-max);
  margin: 0 auto; padding: var(--sp-5);
  flex: 1;
}

/* Sidebar */
.sidebar-brand {
  height: var(--header-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--gray-100);
}
.sidebar-brand .brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; letter-spacing: -.02em;
}
.sidebar-brand .brand-name { font-weight: 650; font-size: 16px; color: var(--gray-900); }

.sidebar-nav { padding: var(--sp-3) var(--sp-2); overflow-y: auto; flex: 1; min-height: 0; }
.nav-item-link:focus-visible { outline: 2px solid var(--teal-500, #14b8a6); outline-offset: -2px; border-radius: 8px; } /* v1.65.3 */
.nav-group-label {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-400); padding: var(--sp-4) var(--sp-3) var(--sp-1);
}
.nav-item-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--sp-3); margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--gray-600); font-weight: 500; font-size: 14px;
  transition: background .12s ease, color .12s ease;
}
.nav-item-link i { font-size: calc(18px * var(--icon-scale, 1)); width: calc(20px * var(--icon-scale, 1)); text-align: center; color: var(--gray-400); }
.nav-item-link:hover { background: var(--gray-50); color: var(--gray-900); text-decoration: none; }
.nav-item-link:hover i { color: var(--gray-600); }
.nav-item-link.active {
  background: var(--primary-soft); color: var(--primary-700); font-weight: 600;
}
.nav-item-link.active i { color: var(--primary); }
.nav-item-link .badge-soft { margin-left: auto; }

.sidebar-footer {
  border-top: 1px solid var(--gray-100);
  padding: var(--sp-3) var(--sp-4);
  font-size: 12px; color: var(--gray-400);
}

/* Header */
.app-header {
  height: var(--header-h);
  background: var(--surface);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  position: sticky; top: 0; z-index: 1020;
}
.header-search { flex: 1; max-width: 420px; position: relative; }
.header-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); font-size: 16px;
}
.header-search input {
  width: 100%; height: 38px; padding: 0 12px 0 38px;
  border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--gray-50); font-size: 14px;
}
.header-search input:focus { background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }

.header-icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-500); font-size: calc(19px * var(--icon-scale, 1)); position: relative;
}
.header-icon-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.header-icon-btn .dot {
  position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.header-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 650; font-size: 13px;
}

/* ---------- Page header ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.page-header h1 { font-size: 22px; margin: 0 0 2px; }
.page-header .subtitle { color: var(--gray-500); font-size: 14px; margin: 0; }
.breadcrumbs { font-size: 13px; color: var(--gray-400); margin-bottom: var(--sp-2); }
.breadcrumbs a { color: var(--gray-500); }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}
.card-header {
  background: transparent; border-bottom: 1px solid var(--gray-100);
  padding: var(--sp-4) var(--sp-5); font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.card-body { padding: var(--sp-5); }
.card-body.p-tight { padding: var(--sp-4); }

.metric-card { padding: var(--sp-4) var(--sp-5); }
.metric-card .metric-label { font-size: 13px; color: var(--gray-500); font-weight: 500; }
.metric-card .metric-value { font-size: 26px; font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; margin-top: 2px; }
.metric-card .metric-icon {
  width: 40px; height: 40px; border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(20px * var(--icon-scale, 1));
}
.metric-icon.tone-primary { background: var(--primary-soft); color: var(--primary); }
.metric-icon.tone-accent  { background: var(--accent-soft);  color: var(--accent); }
.metric-icon.tone-success { background: var(--success-soft); color: var(--success); }
.metric-icon.tone-warning { background: var(--warning-soft); color: var(--warning); }
/* v1.85.0: guaranteed contrast whatever the theme colors are.
   Light mode darkens the icon hue toward black on a stronger wash;
   dark mode brightens it toward white. Plain-var rules above remain
   the fallback for browsers without color-mix. */
.metric-icon.tone-primary { background: color-mix(in srgb, var(--primary) 16%, transparent); color: color-mix(in srgb, var(--primary) 72%, black); }
.metric-icon.tone-accent  { background: color-mix(in srgb, var(--accent) 16%, transparent);  color: color-mix(in srgb, var(--accent) 72%, black); }
.metric-icon.tone-success { background: color-mix(in srgb, var(--success) 16%, transparent); color: color-mix(in srgb, var(--success) 72%, black); }
.metric-icon.tone-warning { background: color-mix(in srgb, var(--warning) 16%, transparent); color: color-mix(in srgb, var(--warning) 60%, black); }
[data-theme="dark"] .metric-icon.tone-primary { background: color-mix(in srgb, var(--primary) 24%, transparent); color: color-mix(in srgb, var(--primary) 55%, white); }
[data-theme="dark"] .metric-icon.tone-accent  { background: color-mix(in srgb, var(--accent) 24%, transparent);  color: color-mix(in srgb, var(--accent) 55%, white); }
[data-theme="dark"] .metric-icon.tone-success { background: color-mix(in srgb, var(--success) 24%, transparent); color: color-mix(in srgb, var(--success) 55%, white); }
[data-theme="dark"] .metric-icon.tone-warning { background: color-mix(in srgb, var(--warning) 24%, transparent); color: color-mix(in srgb, var(--warning) 55%, white); }
/* v1.85.0: metric labels were gray-500 — a step darker in light mode,
   a step lighter in dark, so tile captions stay readable. */
.metric-card .metric-label { color: var(--gray-600); }
[data-theme="dark"] .metric-card .metric-label { color: var(--gray-400); }

/* Status spine — the signature accent */
.spine { border-left: 3px solid var(--gray-300); }
.spine-success { border-left-color: var(--success); }
.spine-warning { border-left-color: var(--warning); }
.spine-danger  { border-left-color: var(--danger); }
.spine-primary { border-left-color: var(--primary); }
.spine-accent  { border-left-color: var(--accent); }

/* ---------- Status chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.chip-neutral { background: var(--gray-100);   color: var(--gray-600); }
.chip-primary { background: var(--primary-soft); color: var(--primary-700); }
.chip-accent  { background: var(--accent-soft);  color: #2A55B8; }
[data-theme="dark"] .chip-accent { color: #9FBAF5; } /* v2.55.0 */
.chip-success { background: var(--success-soft); color: var(--success-text); }
.chip-warning { background: var(--warning-soft); color: var(--warning-text); }
.chip-danger  { background: var(--danger-soft);  color: var(--danger-text); }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; padding: 8px 14px; }
.btn i { font-size: 16px; vertical-align: -2px; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-600); border-color: var(--primary-600); }
.btn-primary:active { background: var(--primary-700) !important; border-color: var(--primary-700) !important; }
.btn-outline-secondary { color: var(--gray-600); border-color: var(--gray-300); }
.btn-outline-secondary:hover { background: var(--gray-100); color: var(--gray-900); border-color: var(--gray-300); }
.btn-soft-danger { background: var(--danger-soft); color: var(--danger-text); border: none; }
.btn-soft-danger:hover { background: #F6D5D5; color: #7A1E1E; }
[data-theme="dark"] .btn-soft-danger:hover { background: #4E1D1D; color: var(--danger-text); } /* v2.55.0 */
.btn-ghost { background: transparent; border: none; color: var(--gray-500); }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800); }

/* ---------- Tables ---------- */
.table-card { padding: 0; overflow-x: auto; overflow-y: hidden; } /* v1.65.1: wide tables scroll, never clip */
/* v1.65.2: the Delete column stays pinned on the right while a wide table
   scrolls, so the trash icon is visible on every record without scrolling. */
.hfd-table td[data-label="Delete"], .hfd-table th.th-del {
  position: sticky; right: 0; background: var(--bs-body-bg, #fff);
  box-shadow: -6px 0 8px -6px rgba(0,0,0,.12);
}
.hfd-table tr:hover td[data-label="Delete"] { background: var(--gray-50, #f8fafc); }
/* v1.70.1: pick list "days till event" flashes red when the event is 7 days
   out (or closer) and no tracking number has been entered yet. */
@keyframes hfd-flash-red { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.flash-red { color: #dc2626; font-weight: 700; animation: hfd-flash-red 1s step-end infinite; }
[data-theme="dark"] .flash-red { color: #F87171; } /* v2.55.0 */
@media (prefers-reduced-motion: reduce) { .flash-red { animation: none; } }
.table-card > .table-footer { position: sticky; left: 0; }
.hfd-table { width: 100%; margin: 0; }
.hfd-table thead th {
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-500); background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  padding: 10px var(--sp-4); white-space: nowrap;
}
.hfd-table tbody td {
  padding: 13px var(--sp-4); border-bottom: 1px solid var(--gray-100);
  vertical-align: middle; font-size: 14px;
}
.hfd-table tbody tr:last-child td { border-bottom: none; }
.hfd-table tbody tr { transition: background .1s ease; background: var(--table-row-bg, transparent); }
.hfd-table tbody tr:nth-child(even) { background: var(--table-row-alt-bg, var(--table-row-bg, transparent)); }
.hfd-table tbody tr:hover { background: var(--table-row-hover-bg, var(--gray-25)); }
.hfd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-footer {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--gray-100);
  font-size: 13px; color: var(--gray-500); flex-wrap: wrap;
}

/* Filter bar */
.filter-bar {
  display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.filter-bar .form-label { font-size: 12px; font-weight: 600; color: var(--gray-500); margin-bottom: 4px; }
.filter-bar .form-control, .filter-bar .form-select { min-width: 160px; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: 13.5px; color: var(--gray-700); }
.form-control, .form-select {
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  font-size: 14px; padding: 9px 12px; color: var(--gray-800);
}
/* v2.125.0 — every pull-down shows its chevron: keep room for it on the right and
   never let a theme rule paint over the arrow image (use background-color, not background). */
.form-select { padding-right: 36px; background-color: #fff; background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 12px; appearance: none; -webkit-appearance: none; }
.form-select.form-select-sm { padding-right: 30px; background-position: right 8px center; background-size: 14px 10px; }
.form-select[multiple], .form-select[size]:not([size="1"]) { background-image: none; padding-right: 12px; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.invalid-feedback { font-size: 12.5px; }
.form-text { font-size: 12.5px; color: var(--gray-400); }

/* v1.82.0: section instructions sit ON TOP of their fields (they used to
   occupy a 280px side column). The heading block spans full width, gets a
   subtle underline for hierarchy, and the fields follow beneath. */
.form-section { display: block; padding: var(--sp-5) 0; border-bottom: 1px solid var(--gray-100); }
.form-section:last-of-type { border-bottom: none; }
.form-section > div:first-child { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--gray-100); }
.form-section .section-title { font-weight: 650; font-size: 15px; color: var(--gray-900); margin: 0 0 3px; }
.form-section .section-desc { font-size: 13px; color: var(--gray-500); margin: 0; max-width: 760px; }
/* v1.82.0: standard "instruction above the field" line */
.field-hint { font-size: 12.5px; color: var(--gray-500); margin: -2px 0 6px; }

.form-actions {
  position: sticky; bottom: 0; background: var(--surface); backdrop-filter: blur(4px);
  border-top: 1px solid var(--gray-200); margin: 0 calc(-1 * var(--sp-5));
  padding: var(--sp-3) var(--sp-5);
  display: flex; justify-content: flex-end; gap: var(--sp-3); border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; top: 76px; right: var(--sp-5); z-index: 1080; display: flex; flex-direction: column; gap: var(--sp-2); max-width: 380px; }
.toast-item {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 14px;
  animation: toast-in .18s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.toast-item i { font-size: 18px; margin-top: 1px; }
.toast-item.t-success i { color: var(--success); }
.toast-item.t-danger  i { color: var(--danger); }
.toast-item.t-warning i { color: var(--warning); }
.toast-item.t-info    i { color: var(--accent); }
.toast-item .btn-close { margin-left: auto; font-size: 10px; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--gray-500); }
.empty-state i { font-size: 40px; color: var(--gray-300); display: block; margin-bottom: var(--sp-3); }
.empty-state h3 { font-size: 16px; color: var(--gray-700); margin-bottom: 4px; }
.empty-state p { font-size: 14px; margin-bottom: var(--sp-4); }

/* ---------- Activity timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.timeline li:last-child { border-bottom: none; }
.timeline .tl-icon {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--gray-100); color: var(--gray-500);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.timeline .tl-body { font-size: 13.5px; min-width: 0; }
.timeline .tl-meta { font-size: 12px; color: var(--gray-400); }

/* ---------- Permission matrix ---------- */
.perm-matrix td, .perm-matrix th { text-align: center; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }
.perm-matrix .form-check-input { margin: 0; cursor: pointer; }
.perm-matrix .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.perm-module { font-weight: 600; color: var(--gray-800); text-transform: capitalize; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 500px at 85% -10%, var(--primary-soft) 0%, transparent 60%),
    radial-gradient(700px 420px at -10% 110%, var(--accent-soft) 0%, transparent 55%),
    var(--gray-25);
  padding: var(--sp-5);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-card .card-body { padding: var(--sp-6); }
.auth-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: var(--sp-5); }

/* ---------- Dropdowns / modals ---------- */
.dropdown-menu { border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 14px; padding: 6px; }
.dropdown-item { border-radius: var(--radius-sm); padding: 7px 10px; }
.dropdown-item:hover { background: var(--gray-50); }
.dropdown-item.text-danger:hover { background: var(--danger-soft); }
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--gray-100); }
.modal-footer { border-top: 1px solid var(--gray-100); }

/* ---------- Pagination ---------- */
.page-link { color: var(--gray-600); border-color: var(--gray-200); font-size: 13.5px; }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ---------- Audit log readable changes ---------- */
.audit-change { font-size: 12.5px; padding: 2px 0; border-bottom: 1px dashed var(--gray-100); }
.audit-change:last-child { border-bottom: 0; }
.audit-field { display: inline-block; min-width: 110px; color: var(--gray-500); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .02em; }

/* ---------- WYSIWYG editor ---------- */
.wysiwyg { border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; background: var(--bs-body-bg, #fff); }
.wysiwyg-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.wysiwyg-btn { border: 0; background: transparent; border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--gray-600); font-size: 15px; line-height: 1; }
.wysiwyg-btn:hover { background: var(--gray-200); color: var(--gray-900); }
.wysiwyg-sep { width: 1px; align-self: stretch; margin: 3px 5px; background: var(--gray-200); }
.wysiwyg-editor { min-height: 220px; max-height: 480px; overflow-y: auto; padding: 14px 16px; font-size: 14.5px; line-height: 1.6; outline: none; }
.wysiwyg-editor:focus { box-shadow: inset 0 0 0 2px var(--primary-soft); }
.wysiwyg-editor blockquote, .message-body blockquote {
  border-left: 3px solid var(--gray-300); margin: 8px 0; padding: 4px 12px; color: var(--gray-600); background: var(--gray-25);
}
.wysiwyg-editor h2, .wysiwyg-editor h3 { margin: 10px 0 6px; }
[data-theme="dark"] .wysiwyg { background: var(--gray-50); }
[data-theme="dark"] .wysiwyg-editor { color: var(--gray-800); }

/* ---------- Dashboard customization ---------- */
[data-dash] { position: relative; }
[data-dash].dash-hidden { display: none; }
.dash-toolbar { display: none; }
body.dash-edit [data-dash] { outline: 2px dashed var(--gray-300); outline-offset: 4px; border-radius: 10px; margin-bottom: 26px; cursor: grab; }
body.dash-edit [data-dash].dash-hidden { display: block; opacity: .45; }
body.dash-edit .dash-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding: 4px 10px;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 8px;
  font-size: 12.5px; color: var(--gray-600);
}
.dash-toolbar .dash-grip { cursor: grab; color: var(--gray-400); }
.dash-toolbar .dash-label { font-weight: 600; }
.dash-toolbar .dash-eye { margin-left: auto; padding: 2px 8px; }

/* ---------- Table icons: readable size ---------- */
.hfd-table .ti { font-size: 17px; vertical-align: -3px; }
.hfd-table .chip .ti { font-size: 14px; vertical-align: -2px; }
.hfd-table .btn-sm .ti { font-size: 16px; }

/* ---------- Collapsible event panels ---------- */
[data-collapse] > .card-header.collapse-toggle { cursor: pointer; user-select: none; }
[data-collapse] .collapse-chevron { margin-left: auto; padding-left: 10px; transition: transform .15s ease; color: var(--gray-400); }
[data-collapse] > .card-header.d-flex .collapse-chevron { margin-left: 10px; }
[data-collapse].is-collapsed .collapse-chevron { transform: rotate(-90deg); }
[data-collapse].is-collapsed > :not(.card-header) { display: none; }
[data-collapse].is-collapsed > .card-header { border-bottom: 0; }

/* ---------- Events: two-row detail view + cards ---------- */
.event-detail-table tbody.event-pair tr.pair-top td { border-bottom: 0; padding-bottom: 4px; }
.event-detail-table tbody.event-pair tr.pair-bottom td {
  padding-top: 2px; padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.event-detail-table tbody.event-pair:nth-of-type(even) tr td { background: var(--gray-25); }
.event-detail-table tbody.event-pair:hover tr td { background: var(--gray-50); }
.event-card { transition: box-shadow .15s ease, transform .15s ease; color: inherit; }
.event-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); transform: translateY(-2px); }

/* ---------- Dark theme: file input buttons ----------
   Bootstrap styles the legacy -webkit pseudo separately with a light
   background; without overriding BOTH pseudos Chrome renders a bright,
   low-contrast button. Keep the rules separate — a combined selector
   list is dropped entirely by browsers that can't parse the other pseudo. */
html[data-theme="dark"] .form-control::file-selector-button {
  background-color: var(--gray-200) !important; color: var(--gray-800) !important;
  border-color: var(--gray-300) !important;
}
html[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--gray-300) !important; color: var(--gray-900) !important;
}
html[data-theme="dark"] .form-control::-webkit-file-upload-button {
  background-color: var(--gray-200) !important; color: var(--gray-800) !important;
  border-color: var(--gray-300) !important;
}
html[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: var(--gray-300) !important; color: var(--gray-900) !important;
}
html[data-theme="dark"] input[type="file"].form-control { color: var(--gray-600); }

/* ---------- Wide content (events grid) ---------- */
.app-content.content-wide { max-width: none; }
body.grid-fullscreen .app-sidebar { display: none; }
body.grid-fullscreen .app-main { margin-left: 0; }

/* ---------- Collapsible sidebar (desktop) ---------- */
@media (min-width: 992px) {
  body.sidebar-collapsed { --sidebar-w: 64px; }
  /* A collapsed menu frees ~200px — let every view use it. */
  body.sidebar-collapsed .app-content { max-width: none; }
  body.sidebar-collapsed .sidebar-brand .brand-name,
  body.sidebar-collapsed .nav-group-label,
  body.sidebar-collapsed .sidebar-footer,
  body.sidebar-collapsed .nav-item-link .badge-soft { display: none; }
  body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; }
  body.sidebar-collapsed .nav-item-link { justify-content: center; font-size: 0; padding: 10px 0; gap: 0; }
  body.sidebar-collapsed .nav-item-link i { font-size: calc(18px * var(--icon-scale, 1)); }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .app-sidebar.open { transform: none; }
  .app-main { margin-left: 0; }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(17,24,39,.4); z-index: 1029; display: none;
  }
  .sidebar-backdrop.show { display: block; }
  .app-content { padding: var(--sp-4); }
  .header-search { display: none; }
}

/* Stacked table cards on phones */
@media (max-width: 767.98px) {
  .hfd-table.responsive-stack thead { display: none; }
  .hfd-table.responsive-stack tbody tr {
    display: block; border: 1px solid var(--gray-200); border-radius: var(--radius);
    margin: var(--sp-3); box-shadow: var(--shadow-sm);
  }
  .hfd-table.responsive-stack tbody td {
    display: flex; justify-content: space-between; gap: var(--sp-3);
    border-bottom: 1px solid var(--gray-100); text-align: right;
  }
  .hfd-table.responsive-stack tbody td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--gray-500); text-align: left; font-size: 12.5px;
  }
}

/* Print */
@media print {
  .app-sidebar, .app-header, .toast-stack, .form-actions, .no-print { display: none !important; }
  .app-main { margin: 0; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ---------- Events spreadsheet grid ---------- */
#event-grid[data-editable="1"] .grid-cell { cursor: text; }
#event-grid[data-editable="1"] .grid-cell:hover:not(.editing) { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); border-radius: 4px; }
#event-grid .grid-cell.editing { padding: 4px 6px; }
#event-grid .grid-editor { min-width: 90px; font-size: 13px; }
#event-grid .grid-cell.grid-saved { box-shadow: inset 0 0 0 2px var(--success); border-radius: 4px; transition: box-shadow .2s; }
#event-grid .grid-cell.grid-error { box-shadow: inset 0 0 0 2px var(--danger); border-radius: 4px; }

/* ---- Breadcrumbs (v1.33) ---- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; margin: 0 0 10px; color: var(--gray-500); }
.crumbs .crumb { color: var(--gray-500); text-decoration: none; }
.crumbs a.crumb:hover { color: var(--accent, #2b6cb0); text-decoration: underline; }
.crumbs .crumb-current { color: var(--gray-700, #374151); font-weight: 600; }
.crumbs .crumb-sep { color: var(--gray-300); }

/* ---- Child-record pop-up on the Full events view (v1.33) ---- */
.child-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1050; display: none; }
.child-modal-backdrop.open { display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px; }
.child-modal { background: var(--surface, #fff); border-radius: 12px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.child-modal .cm-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--gray-200); font-weight: 600; }
.child-modal .cm-body { padding: 14px 16px; }
.child-modal .cm-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--gray-200); }

/* ---- Stacked form sections: title on top, full-width content (v1.34) ---- */
.form-section.stacked { grid-template-columns: 1fr; gap: var(--sp-3); }


/* ---------- Events Full view: child-table sections (v1.44.1) ----------
   Higher-contrast headers and links so each child table reads clearly. */
.child-head {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--child-head-fg, var(--teal-700, #0f766e));
  background: var(--child-head-bg, var(--teal-50, #f0fdfa));
  border-left: 3px solid var(--child-head-fg, var(--teal-500, #14b8a6));
  border-radius: 6px; padding: 4px 8px; margin-bottom: 6px;
  display: flex; align-items: center; gap: 4px;
}
.child-head .chip { font-size: 10px; }
.child-head .child-add {
  margin-left: auto; font-size: 11px; padding: 1px 8px;
  color: var(--child-head-fg, #0f766e); border: 1px solid var(--child-head-fg, #14b8a6);
  border-radius: 6px; background: var(--surface); font-weight: 600;
}
.child-head .child-add:hover { background: var(--child-head-fg, #14b8a6); color: #fff; }
.child-links a {
  color: var(--child-head-fg, var(--teal-700, #0f766e)); font-weight: 600; text-decoration: underline;
  text-decoration-color: rgba(20, 184, 166, .45); text-underline-offset: 2px;
}
.child-links a:hover { color: var(--teal-900, #134e4a); text-decoration-color: currentColor; }
.child-links { font-size: 13px; }


/* v1.49.4: uploaded side-menu icons — sized and aligned like the font icons */
.nav-item-link .nav-ico-img { width: calc(18px * var(--icon-scale, 1)); height: calc(18px * var(--icon-scale, 1)); object-fit: contain; vertical-align: -3px; border-radius: 3px; flex: 0 0 auto; }


/* v1.52.3: sketch menu complete collapse with hover reveal */
#sk-hoverbar { display: none; }
#sk-sticky.sk-autohide #sk-hoverbar {
  display: flex; align-items: center; justify-content: center;
  height: 16px; cursor: pointer; user-select: none;
}
#sk-sticky.sk-autohide #sk-hoverbar span {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-500); background: var(--surface, #fff);
  border: 1px solid var(--gray-200); border-radius: 999px;
  padding: 0 12px; line-height: 15px; box-shadow: var(--shadow-sm);
}
#sk-sticky.sk-autohide #sk-menucard {
  display: none; position: absolute; top: 16px; left: 0; right: 0;
  z-index: 60; box-shadow: 0 14px 32px rgba(0,0,0,.18); margin-bottom: 0;
}
#sk-sticky.sk-autohide.sk-reveal #sk-menucard { display: block; }

/* v1.54.0: collapsible side-menu categories */
.nav-cat-toggle { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; }
.nav-cat-toggle .nav-cat-chevron { font-size: calc(14px * var(--icon-scale, 1)); transition: transform .18s ease; color: var(--gray-400); }
.nav-cat.open .nav-cat-chevron { transform: rotate(180deg); }
.nav-cat-items { display: none; }
.nav-cat.open .nav-cat-items { display: block; }
.nav-cat-items .nav-item-link { padding-left: 34px; }

/* v1.53.1: the pick-list "Adjust quantity" panel opens LEFT of the icon and
   is never clipped — the icon sits in the table's last column, so a panel
   opening rightward fell outside the card and got cut off. */
.pl-adjust { position: relative; }
.pl-adjust .pl-adjust-panel { position: absolute; right: 0; left: auto; top: calc(100% + 4px); }
.pl-items-card { overflow: visible; }
.pl-items-card .hfd-table { border-radius: var(--radius-lg, 12px); overflow: hidden; }
@media (max-width: 640px) {
  .pl-adjust .pl-adjust-panel { right: auto; left: 0; }
}

/* v1.54.1: uploaded icon previews in Settings were unconstrained (the sizing
   rule only applied inside sidebar links) and giant images broke the grid.
   Previews now cap at icon size; the sidebar rendering is untouched. */
.nav-ico-preview .nav-ico-img, .nav-ico-preview img {
  width: 22px; height: 22px; object-fit: contain; vertical-align: -4px; border-radius: 3px;
}

/* v1.54.2: menu-order drag clarity */
.nav-drop-line { list-style: none; height: 0; border-top: 3px solid var(--primary); margin: 2px 0 7px; position: relative; border-radius: 2px; }
.nav-drop-line .nav-drop-label {
  position: absolute; right: 0; top: -9px; background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
}
.btn-nudge { background: none; border: 0; padding: 0 4px; cursor: pointer; color: var(--gray-400); line-height: 1; font-size: 12px; }
.btn-nudge:hover { color: var(--primary); }
.nav-order-flash { box-shadow: 0 0 0 2px var(--primary) !important; transition: box-shadow .3s; }

/* v1.55.0: pointer-drag orderer */
#nav-order-list > li { touch-action: none; }
#nav-order-list select.nav-cat-assign { touch-action: auto; }
.nav-order-grip { color: var(--gray-400); cursor: grab; padding: 4px 6px 4px 2px; margin: -4px 0; }
.nav-order-grip:hover { color: var(--primary); }
.nav-order-dragging { opacity: .35; }
.nav-order-no-select { user-select: none; -webkit-user-select: none; }

/* v1.55.1: settings tabs readable on every theme — they used browser-default
   colors, invisible against dark backgrounds. */
.nav-tabs { border-bottom: 1px solid var(--gray-200); display: flex; gap: 4px; padding-left: 0; list-style: none; }
.nav-tabs .nav-item { list-style: none; }
.nav-tabs .nav-link {
  display: block; padding: 8px 16px; font-size: 13.5px; font-weight: 600;
  color: var(--gray-500); text-decoration: none;
  border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0;
}
.nav-tabs .nav-link:hover { color: var(--gray-800); background: var(--gray-50); }
.nav-tabs .nav-link.active {
  color: var(--primary); background: var(--surface, #fff);
  border-color: var(--gray-200); position: relative; top: 1px;
}

/* v1.56.0: the Administration section is a collapsible category */
.nav-group-label-toggle {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-400); padding-top: 14px;
}
.nav-cat-admin .nav-cat-items .nav-item-link { padding-left: 12px; }

/* v1.57.0: on the event form, each section's instructions sit ON TOP of its
   fields instead of in a left column. */
.form-stacked .form-section { display: block; }
.form-stacked .form-section > div:first-child { margin-bottom: 10px; }
.form-stacked .form-section .section-desc { max-width: 720px; }

/* v1.62.1: CSV import block — button-styled summary, no default marker */
.csv-import-block > summary::-webkit-details-marker { display: none; }
.csv-import-block > summary::marker { content: ""; }
.csv-import-block[open] > summary { margin-bottom: 8px; }

/* v1.86.0: ownership dots — the admin-only ⋮ menu on rows and detail pages */
.own-wrap { position: relative; display: inline-block; }
.own-dots { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gray-100); border-radius: 8px; }
.own-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 240px; padding: 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.16); text-align: left; }
.own-pop[hidden] { display: none; }
.own-pop-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); }
.own-pop-owner { font-size: 13px; color: var(--gray-700); }
td .own-wrap .own-pop, .hfd-table .own-pop { right: auto; left: 0; }

/* v1.90.0: shipping urgency stages (blink = flash-red, configurable) */
.ship-watch { color: #B45309; font-weight: 600; }
[data-theme="dark"] .ship-watch { color: #FBBF24; }
.ship-critical { color: #dc2626; font-weight: 700; }
[data-theme="dark"] .ship-critical { color: #F87171; }

/* v2.3.0: drag-&-drop zones around every visible file input */
.hfd-drop { border: 1.5px dashed var(--gray-300, #cbd5e1); border-radius: 8px; padding: 10px; transition: border-color .15s, background .15s; }
.hfd-drop.dragover { border-color: var(--accent, #2b6cb0); background: var(--accent-soft, rgba(43, 108, 176, .07)); }
.hfd-drop-hint { font-size: 11.5px; color: var(--gray-500, #64748b); margin-top: 6px; }
.hfd-drop-hint kbd { border: 1px solid var(--gray-300, #cbd5e1); border-radius: 3px; padding: 0 4px; font-size: 10px; }
html[data-theme="dark"] .hfd-drop { border-color: var(--gray-600, #475569); }

/* v2.7.0: paired rows OUTSIDE the events detail table (e.g. Corporations list)
   get the same breathing room between records */
.hfd-table tbody.event-pair tr.pair-top td { border-bottom: 0; padding-bottom: 4px; }
.hfd-table tbody.event-pair tr.pair-bottom td { padding-top: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--gray-200, #e2e8f0); }
.hfd-table tbody.event-pair + tbody.event-pair tr.pair-top td { padding-top: 12px; }

/* v2.11.0: draggable child sections on the events Detailed view */
.ec-sec-wrap { cursor: grab; border-radius: 8px; transition: outline-color .12s, opacity .12s; outline: 2px dashed transparent; }
.ec-sec-wrap.ec-dragging { opacity: .45; cursor: grabbing; }
.ec-sec-wrap.ec-over { outline-color: var(--accent, #2b6cb0); }
.ec-sec-wrap .child-head::before { content: "⋮⋮"; letter-spacing: -3px; margin-right: 6px; color: var(--gray-400, #94a3b8); font-size: 10px; }

/* v2.11.1: draggable event-page sections */
#esec-holder { display: flex; flex-direction: column; gap: 16px; }
.esec-wrap { cursor: grab; border-radius: 10px; outline: 2px dashed transparent; transition: outline-color .12s, opacity .12s; }
.esec-wrap.ec-dragging { opacity: .45; cursor: grabbing; }
.esec-wrap.ec-over { outline-color: var(--accent, #2b6cb0); }
.esec-wrap > .card { margin: 0 !important; }

/* ===== v2.26.0: Knowledge Center ===== */
.kb-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.kb-topic-link { display: block; padding: 6px 0; border-bottom: 1px dashed var(--gray-200); font-size: 13.5px; }
.kb-topic-link:last-child { border-bottom: 0; }
.kb-breadcrumbs { font-size: 12.5px; color: var(--gray-500); margin-bottom: 10px; }
.kb-breadcrumbs a { color: var(--gray-500); }
.kb-article { font-size: 14.5px; line-height: 1.65; max-width: 860px; }
.kb-article img { max-width: 100%; height: auto; border-radius: 8px; }
.kb-article table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.kb-article th, .kb-article td { border: 1px solid var(--gray-200); padding: 6px 10px; font-size: 13.5px; }
.kb-article blockquote { border-left: 3px solid var(--primary); margin: 12px 0; padding: 4px 14px; color: var(--gray-600); }
.kb-embed { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 8px; }
.kb-pdf-embed { border: 1px solid var(--gray-200); border-radius: 8px; }
.kb-empty { padding: 26px; text-align: center; color: var(--gray-500); font-size: 13.5px; }
.kb-prevnext { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.wysiwyg-full { position: fixed; inset: 12px; z-index: 1060; background: var(--surface, #fff); display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.3); border-radius: 10px; }
.wysiwyg-full .wysiwyg-editor { flex: 1; overflow: auto; }
body.wysiwyg-full-open { overflow: hidden; }
html[data-theme="dark"] .wysiwyg-full { background: var(--gray-50, #141A21); }
@media (max-width: 640px) { .kb-cat-grid { grid-template-columns: 1fr; } }

/* ===== v2.29.0: Knowledge Center figures ===== */
.kb-fig { margin: 14px 0 18px; }
.kb-fig img { width: 100%; max-width: 860px; height: auto; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; }
.kb-fig figcaption { font-size: 12.5px; color: var(--gray-500); margin-top: 6px; text-align: center; max-width: 860px; }

/* ===== v2.30.0: KB image positioning & sizing ===== */
.kb-article img.kb-img-left, .wysiwyg-editor img.kb-img-left { float: left; margin: 4px 16px 10px 0; }
.kb-article img.kb-img-right, .wysiwyg-editor img.kb-img-right { float: right; margin: 4px 0 10px 16px; }
.kb-article img.kb-img-center, .wysiwyg-editor img.kb-img-center { display: block; margin: 10px auto; float: none; }
.kb-article img.kb-img-full, .wysiwyg-editor img.kb-img-full { display: block; margin: 10px 0; width: 100% !important; float: none; }
.kb-article img.kb-w25, .wysiwyg-editor img.kb-w25 { width: 25%; }
.kb-article img.kb-w33, .wysiwyg-editor img.kb-w33 { width: 33%; }
.kb-article img.kb-w50, .wysiwyg-editor img.kb-w50 { width: 50%; }
.kb-article img.kb-w75, .wysiwyg-editor img.kb-w75 { width: 75%; }
.kb-article img.kb-w100, .wysiwyg-editor img.kb-w100 { width: 100%; }
.kb-article h2, .kb-article h3 { clear: both; }
.wysiwyg { position: relative; }
.wysiwyg-editor img { max-width: 100%; height: auto; border-radius: 8px; cursor: pointer; }
.wysiwyg-editor img.kb-img-selected { outline: 3px solid var(--primary); outline-offset: 2px; }
.wysiwyg-editor.kb-droppable { outline: 2px dashed var(--primary); outline-offset: -4px; background: var(--primary-soft, #E4F2EF); }
.kb-imgbar { position: absolute; z-index: 40; display: flex; gap: 2px; align-items: center; background: var(--surface, #fff); border: 1px solid var(--gray-200); border-radius: 8px; padding: 3px 5px; box-shadow: 0 6px 20px rgba(0,0,0,.16); font-size: 11.5px; }
.kb-imgbar .wysiwyg-btn { min-width: 30px; }
.kb-uploading { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--primary-soft, #E4F2EF); color: var(--primary); font-size: 12.5px; }
html[data-theme="dark"] .kb-imgbar { background: var(--gray-50, #141A21); }
@media (max-width: 640px) { .kb-article img.kb-img-left, .kb-article img.kb-img-right { float: none; display: block; margin: 10px auto; width: 100% !important; } }

/* ===== v2.34.0: one-time password reveal modal ===== */
.pw-modal-backdrop { position: fixed; inset: 0; z-index: 2000; background: rgba(9, 14, 20, .62); display: flex; align-items: center; justify-content: center; padding: 18px; }
.pw-modal { background: var(--surface, #fff); border-radius: 14px; max-width: 560px; width: 100%; padding: 22px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.pw-modal-head { font-size: 17px; font-weight: 700; color: var(--gray-800); display: flex; align-items: center; }
.pw-modal-note { font-size: 13.5px; color: var(--gray-500); margin: 8px 0 14px; }
.pw-modal-box { display: flex; align-items: center; gap: 10px; background: var(--primary-soft, #E4F2EF); border: 1px dashed var(--primary); border-radius: 10px; padding: 12px 14px; }
.pw-modal-box code { flex: 1; font-size: 17px; letter-spacing: .5px; word-break: break-all; color: var(--gray-800); background: none; }
.pw-modal-actions { margin-top: 16px; text-align: right; }
html[data-theme="dark"] .pw-modal { background: var(--gray-50, #141A21); }
html[data-theme="dark"] .pw-modal-head, html[data-theme="dark"] .pw-modal-box code { color: var(--gray-800, #E6EAF0); }
@media (max-width: 480px) { .pw-modal-box { flex-direction: column; align-items: stretch; } .pw-modal-box .btn { width: 100%; } }

/* ===== v2.39.0: sidebar display modes (always / hover / collapsed) ===== */
@media (min-width: 992px) {
  body.sidebar-hover .app-sidebar {
    transform: translateX(calc(-100% + 12px));
    box-shadow: none;
  }
  body.sidebar-hover .app-sidebar::after { /* peek edge affordance */
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 12px;
    background: linear-gradient(to right, transparent, var(--gray-200));
  }
  body.sidebar-hover .app-sidebar:hover,
  body.sidebar-hover .app-sidebar:focus-within {
    transform: none; box-shadow: var(--shadow-lg);
  }
  body.sidebar-hover .app-sidebar:hover::after,
  body.sidebar-hover .app-sidebar:focus-within::after { display: none; }
  body.sidebar-hover .app-main { margin-left: 12px; }
  body.sidebar-hover .app-content { max-width: none; }
}
.sidebar-mode-menu {
  position: fixed; z-index: 3000; min-width: 210px;
  background: var(--surface, #fff); border: 1px solid var(--gray-200);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.18); padding: 6px;
}
.sidebar-mode-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; text-align: left; padding: 8px 10px;
  border-radius: 7px; font-size: 13.5px; color: var(--gray-800); cursor: pointer;
}
.sidebar-mode-menu button:hover { background: var(--gray-100, #f1f4f7); }
.sidebar-mode-menu button i.mode-check { margin-left: auto; color: var(--primary); }
html[data-theme="dark"] .sidebar-mode-menu { background: var(--gray-50, #141A21); }
html[data-theme="dark"] .sidebar-mode-menu button:hover { background: rgba(255,255,255,.06); }

/* ===== v2.115.1: tables inside cards scroll within the card, never the page ===== */
.table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table-wrap > .table { margin-bottom: 0; }

/* ===== v2.40.0: top-bar quick navigation ===== */
.header-quicknav { align-items: center; gap: 2px; margin: 0 6px; flex: 0 1 auto; min-width: 0; overflow: hidden; } /* v2.113.1 — shrinks instead of pushing the page sideways */
.header-search { min-width: 0; }
/* v2.115.1 — on a laptop the search is an icon that opens into a box on click; the full box needs a wide screen */
@media (max-width: 1700px) and (min-width: 992px) {
  .header-search { flex: 0 0 auto; width: 40px; height: 38px; }
  .header-search i { left: auto; right: 12px; z-index: 2; pointer-events: none; }
  .header-search input { position: absolute; right: 0; top: 0; width: 40px; padding: 0 0 0 34px; cursor: pointer; transition: width .15s ease, padding .15s ease; z-index: 1; }
  .header-search input::placeholder { color: transparent; }
  /* opens leftwards over the quick links instead of pushing them — nothing shifts or clips */
  .header-search:focus-within input { width: 320px; padding: 0 38px 0 12px; cursor: text; }
  .header-search:focus-within input::placeholder { color: var(--gray-400); }
}
.header-user-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header > .ms-auto { flex-shrink: 0; }
@media (max-width: 1500px) { .header-quicknav .quicknav-link:nth-child(n+6) { display: none; } }
@media (max-width: 1380px) { .header-quicknav .quicknav-link:nth-child(n+5) { display: none; } }
.quicknav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 8px; text-decoration: none;
  font-size: 13.5px; font-weight: 550; color: var(--gray-700);
  white-space: nowrap; transition: background .12s ease, color .12s ease;
}
.quicknav-link i { font-size: 16px; }
.quicknav-link:hover { background: var(--gray-100); color: var(--gray-900); }
.quicknav-link.active { background: var(--primary-soft); color: var(--primary); }
html[data-theme="dark"] .quicknav-link:hover { background: rgba(255,255,255,.07); }

/* ===== v2.42.0: Views switcher + filter bar occupy the full container and wrap on mobile ===== */
.seg-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; width: 100%;
  background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: 10px; padding: 4px;
}
.seg-tabs .btn { flex: 1 1 auto; min-width: 86px; justify-content: center; display: inline-flex; align-items: center; white-space: nowrap; }
.filter-bar { width: 100%; }
.filter-bar > div { flex: 1 1 160px; min-width: 0; }
/* v2.44.0: the second (and every) line of filters stretches edge to edge —
   wide controls grow, the buttons block fills the remainder. */
.filter-bar > div:has(input[type="search"]) { flex: 3 1 260px; }
.filter-bar > div:last-child { flex: 2 1 220px; display: flex; gap: 8px; align-items: flex-end; }
.filter-bar > div:last-child .btn { flex: 1 1 auto; }
.filter-bar .form-control, .filter-bar .form-select { min-width: 0; width: 100%; }
@media (max-width: 767px) {
  .seg-tabs .btn { flex: 1 1 30%; min-width: 0; padding-left: 6px; padding-right: 6px; }
  .filter-bar > div { flex: 1 1 100%; }
  .filter-bar .btn { width: 100%; }
}

/* v2.42.1: custom top-bar icons */
.quicknav-img { width: 17px; height: 17px; object-fit: contain; display: inline-block; }

/* ===== v2.44.0: Income / Expenses / Profits — high-contrast in BOTH themes ===== */
.money-chip {
  display: inline-block; padding: 4px 10px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; white-space: nowrap;
}
.money-income  { background: #0E7A46; }
.money-expense { background: #B3261E; }
.money-profit  { background: #0B5CAD; }
.money-loss    { background: #7A1E86; }
html[data-theme="dark"] .money-income  { background: #16A05C; color: #04170D; }
html[data-theme="dark"] .money-expense { background: #F26D63; color: #250503; }
html[data-theme="dark"] .money-profit  { background: #4BA3F5; color: #04121F; }
html[data-theme="dark"] .money-loss    { background: #CE7BD9; color: #1E0522; }

/* v2.44.1: compact money chips for dense event views */
.money-chip-sm { padding: 1px 6px; font-size: 11px; border-radius: 5px; }

/* ===== v2.46.0: Document Vault ===== */
.chip-info  { background: var(--accent-soft); color: #2A55B8; }
.chip-muted { background: var(--gray-100); color: var(--gray-500); }
[data-theme="dark"] .chip-info  { background: var(--accent-soft); color: #9FBAF5; }
[data-theme="dark"] .chip-muted { background: var(--gray-100); color: var(--gray-600); }
.doc-badges .chip { margin-right: 3px; }

/* ===== v2.49.0: expiry picker caret + removable subcategory chips ===== */
.al-ttl { position: relative; display: inline-flex; align-items: center; }
.al-ttl select { appearance: none; -webkit-appearance: none; padding-right: 20px !important; }
.al-ttl-caret { position: absolute; right: 5px; font-size: 12px; pointer-events: none; color: var(--gray-400); }
.btn-chip-x { border: 0; background: none; padding: 0 1px; margin: 0; line-height: 1;
  font-size: 13px; cursor: pointer; color: inherit; opacity: .55; }
.btn-chip-x:hover { opacity: 1; color: var(--danger-text, #B3261E); }


/* ===== v2.51.0: Links section reads correctly on the dark theme ===== */
#links-page, #links-page .table, #links-page .card-body { color: var(--gray-800); }
#links-page a { color: var(--gray-800); }
#links-page a:hover { color: var(--primary); }
[data-theme="dark"] #links-page a { color: #FFFFFF; }
[data-theme="dark"] #links-page,
[data-theme="dark"] #links-page .table,
[data-theme="dark"] #links-page .table td,
[data-theme="dark"] #links-page .table th,
[data-theme="dark"] #links-page .form-label { color: #FFFFFF; }
[data-theme="dark"] #links-page .text-muted { color: var(--gray-500) !important; }
#links-page .link-panel { background: var(--gray-50); }
[data-theme="dark"] #links-page .link-panel { background: var(--gray-100); }
.link-picker { max-height: 130px; overflow: auto; border: 1px solid var(--gray-200); border-radius: 6px; padding: 6px; }
[data-theme="dark"] .link-picker { background: var(--gray-50); }
.link-picker label { color: var(--gray-800); }
[data-theme="dark"] .link-picker label { color: #FFFFFF; }
.link-picker .no-match { color: var(--gray-500); font-size: 12px; padding: 4px 2px; }

/* v2.59.0: the uniform back-to-the-table button — always last, always right. */
.page-header-actions { align-items: center; }
.page-header-actions .pg-back { margin-left: auto; order: 99; }
@media (max-width: 640px) {
  .page-header-actions .pg-back { margin-left: 0; }
}

/* v2.97.0 — every column that holds a form control lines its control up with its neighbours,
   whatever the label above it does (a longer label, a hint line, a provenance chip). */
form .row > [class*="col-"]:has(> .form-control, > .form-select, > textarea.form-control, > .input-group, > select) {
  display: flex; flex-direction: column; justify-content: flex-end;
}
form .row > [class*="col-"]:has(> .form-control, > .form-select, > .input-group, > select) > .form-label { margin-top: auto; }
/* v2.97.0 — dark mode: the little "days" / unit box beside an input was white-on-white */
[data-theme="dark"] .input-group-text { background: var(--gray-100); color: var(--gray-800); border-color: var(--gray-200); }

/* v2.97.0 — terms text scrolls inside its box: a bold scrollbar, an always-visible
   position track on the right and a clickable "scroll down" cue */
.terms-wrap { position:relative; }
.terms-scroll { overflow:auto; scrollbar-width:auto; scrollbar-color: var(--primary,#0f766e) var(--gray-200,#e5e7eb); scrollbar-gutter: stable; padding-right:34px !important; }
.terms-scroll::-webkit-scrollbar { width:16px; }
.terms-scroll::-webkit-scrollbar-track { background: var(--gray-200,#e5e7eb); border-radius:8px; }
.terms-scroll::-webkit-scrollbar-thumb { background: var(--primary,#0f766e); border-radius:8px; border:3px solid var(--gray-200,#e5e7eb); }
.terms-track { position:absolute; top:8px; bottom:8px; right:22px; width:10px; border-radius:6px; background: var(--gray-200,#e5e7eb); box-shadow: inset 0 0 0 1px var(--gray-300,#d1d5db); cursor:pointer; }
.terms-thumb { position:absolute; left:0; right:0; top:0; height:30%; min-height:28px; border-radius:6px; background: var(--primary,#0f766e); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary,#0f766e) 25%, transparent); }
.terms-wrap.no-scroll .terms-track { display:none; }
.terms-more { position:absolute; left:0; right:0; bottom:0; padding:26px 0 8px; text-align:center; pointer-events:none; background:linear-gradient(to bottom, transparent, var(--gray-50,#fff) 55%); border-radius:0 0 8px 8px; }
.terms-more > button { pointer-events:auto; display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; border:2px solid var(--primary,#0f766e); background: var(--primary,#0f766e); color:#fff; font-size:12.5px; font-weight:700; cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); animation: terms-bounce 1.6s ease-in-out infinite; }
@keyframes terms-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.terms-more.hidden { display:none; }

/* v2.98.0 — list-group rows (Notifications on the dashboard and portal home):
   readable at rest, a clear tinted hover in both themes */
.list-group-item-action { color: var(--gray-700); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--primary-soft); color: var(--gray-900); }
[data-theme="dark"] .list-group-item { background: transparent; color: var(--gray-700); border-color: var(--gray-200); }
[data-theme="dark"] .list-group-item-action:hover, [data-theme="dark"] .list-group-item-action:focus { background: var(--primary-soft); color: #fff; }

/* v2.100.0 — required fields on the onboarding forms: amber outline, "Required"
   pill, a to-do card that jumps to each field, and the first one focused.
   The W-9's v2.96 classes share the same look. */
.req-need .form-control, .req-need .form-select, .w9-need .form-control, .w9-need .form-select {
  border: 2px solid var(--warning-text,#b45309); background: color-mix(in srgb, var(--warning-text,#b45309) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-text,#b45309) 20%, transparent);
}
.req-need .form-control:focus, .req-need .form-select:focus, .w9-need .form-control:focus, .w9-need .form-select:focus {
  border-color: var(--warning-text,#b45309); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning-text,#b45309) 35%, transparent);
}
.req-need > .form-label, .req-need .form-label, .w9-need .form-label { color: var(--warning-text,#b45309); font-weight: 700; }
.req-tag, .w9-need-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.02em; color:#fff; background: var(--warning-text,#b45309); border-radius:999px; padding:1px 8px; vertical-align:middle; margin-left:4px; }
.req-ok .form-control, .req-ok .form-select, .w9-ok .form-control, .w9-ok .form-select { border-color: var(--success-text,#15803d); }
.req-ok .req-tag { background: var(--success-text,#15803d); }
/* tick boxes (terms agreements, certification) */
.onb-agree-box.req-need, .form-check.req-need, .w9-need-group { border: 2px solid var(--warning-text,#b45309) !important; background: color-mix(in srgb, var(--warning-text,#b45309) 9%, transparent) !important; border-radius:10px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning-text,#b45309) 18%, transparent); }
.onb-agree-box.req-need input, .form-check.req-need input, .w9-need-group input { accent-color: var(--warning-text,#b45309); }
.form-check.req-need { padding: 8px 12px 8px 36px; }
.w9-need-group { padding: 8px 12px; }
.w9-need-group.form-check { display:flex; align-items:center; gap:10px; }
.w9-need-group.form-check input { width:24px; height:24px; min-width:24px; margin:0; }
/* the to-do card */
.req-todo { border-left: 4px solid var(--warning-text,#b45309) !important; }
.req-todo .card-body { padding: 8px 14px; font-size: 13.5px; }
.req-todo ul { margin: 4px 0 0; padding-left: 0; list-style: none; display:flex; flex-wrap:wrap; gap:6px; }
.req-todo li a { display:inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--warning-text,#b45309); background: color-mix(in srgb, var(--warning-text,#b45309) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warning-text,#b45309) 40%, transparent); text-decoration: none; }
.req-todo li a:hover { background: var(--warning-text,#b45309); color: #fff; }
.req-todo.hidden { display:none; }

/* v2.109.0 — the onboarding runs on phones as much as laptops: every box you
   have to tick, and the small print buttons, are finger-sized. */
.onb-shell input[type="checkbox"], .onb-shell input[type="radio"] { width: 24px; height: 24px; }
.onb-shell .form-check { min-height: 32px; padding-left: 2.2rem; }
.onb-shell .form-check .form-check-input { margin-left: -2.2rem; margin-top: .05rem; }
.onb-shell .form-check-label { padding: 3px 0; display: inline-block; }
.onb-shell .btn-link { padding: 6px 8px !important; min-height: 32px; }
.onb-shell .btn-ghost, .onb-shell .btn-sm { min-height: 32px; }
.onb-shell .onb-agree-box input[type="checkbox"] { width: 26px; height: 26px; }
@media (max-width: 640px) {
  .onb-shell { padding-left: 14px; padding-right: 14px; }
  .onb-shell .btn-lg { width: 100%; justify-content: center; }
  .onb-shell .modal-body img { border-radius: 8px; }
  /* the step strip: let the row wrap instead of breaking a label mid-word */
  .onb-shell .btn-sm { white-space: nowrap; }
  .onb-shell .card-body .d-flex { flex-wrap: wrap; }
  .onb-shell .card-body .ms-auto { margin-left: 0 !important; }
  .onb-shell .modal-title { font-size: 17px; }
  /* the header: one tidy line on a phone — the brand, then Sign out */
  .onb-top .onb-brand { font-size: 15px !important; white-space: nowrap; }
  .onb-top .onb-sub, .onb-top .onb-who-name { display: none; }
}

/* v2.110.0 — Help: quiet in a page header, prominent on an onboarding step */
.page-header-actions .help-btn { white-space: nowrap; }
.onb-shell .card .help-btn { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff;
  font-weight: 700; font-size: 15px; padding: 10px 18px; box-shadow: 0 2px 10px rgba(37,99,235,.35); }
.onb-shell .card .help-btn .chip { display: none; }

/* ===== v2.116.0: Events table — column picker and sortable headers ===== */
.col-off { display: none !important; }
@media print { .col-off { display: table-cell !important; } }
.col-picker { position: relative; display: inline-block; }
.col-picker > summary { list-style: none; cursor: pointer; }
.col-picker > summary::-webkit-details-marker { display: none; }
.col-picker .badge-count { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); margin-left: 4px; font-weight: 600; }
.col-picker-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1030; min-width: 220px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 8px; text-align: left; }
.col-picker-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.col-picker-item:hover { background: var(--gray-50); }
.col-picker-item .form-check-input { margin: 0; }
.col-picker-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--gray-100); margin-top: 6px; padding-top: 6px; }
.col-picker-note { font-size: 11px; white-space: normal; max-width: 170px; line-height: 1.3; }
html[data-theme="dark"] .col-picker-item:hover { background: rgba(255,255,255,.06); }
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort i { font-size: 13px; opacity: .45; vertical-align: -1px; }
.th-sort:hover i { opacity: 1; }
.th-sort.on { color: var(--primary); }
.th-sort.on i { opacity: 1; }

/* ===== v2.116.1: pick-list rows on the event page wrap on a phone; tracking numbers may break ===== */
.pl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pl-row .pl-main { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; flex: 1 1 220px; min-width: 0; }
.chip-track { white-space: normal; word-break: break-all; overflow-wrap: anywhere; line-height: 1.25; max-width: 100%; }
.child-links { flex-wrap: wrap; }

/* ===== v2.116.2: card headers wrap on a phone (title chips, a right-hand link, the collapse chevron) ===== */
@media (max-width: 767.98px) {
  .card-header { flex-wrap: wrap; row-gap: 6px; position: relative; }
  .card-header > * { min-width: 0; max-width: 100%; }
  .card-header > span.d-inline-flex, .card-header > .d-flex { flex-wrap: wrap; }
  .card-header > span > i:first-child + * { white-space: nowrap; } /* "To-dos", "Pick lists" stay on one line next to their icon */
  [data-collapse] > .card-header { padding-right: 40px; }
  [data-collapse] > .card-header .collapse-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; }
  [data-collapse].is-collapsed > .card-header .collapse-chevron { transform: translateY(-50%) rotate(-90deg); }
}
/* v2.116.2: the Menu-order rows (Settings › Menu) wrap on a phone instead of poking out */
@media (max-width: 767.98px) {
  #nav-order-list > li { flex-wrap: wrap; row-gap: 4px; }
  #nav-order-list > li > .form-check.ms-auto { margin-left: 0 !important; }
}

/* ===== v2.117.0: contractor picker — a search box that becomes a chip ===== */
.ctr-picker { position: relative; }
.ctr-picker-search { position: relative; }
.ctr-picker-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 15px; pointer-events: none; }
.ctr-picker-q { padding-left: 34px !important; }
.ctr-picker-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1040; max-height: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 4px; }
.ctr-picker-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 13.5px; }
.ctr-picker-item:hover, .ctr-picker-item.is-active { background: var(--gray-50); }
html[data-theme="dark"] .ctr-picker-item:hover, html[data-theme="dark"] .ctr-picker-item.is-active { background: rgba(255,255,255,.06); }
.ctr-picker-item .ctr-i-name { font-weight: 600; }
.ctr-picker-item .ctr-i-sub { color: var(--gray-500); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctr-picker-item .ctr-i-main { flex: 1 1 auto; min-width: 0; }
.ctr-picker-item .chip { font-size: 10.5px; padding: 3px 7px; }
.ctr-picker-empty { padding: 10px 12px; color: var(--gray-500); font-size: 13px; }
.ctr-picker-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 8px 7px 12px; border: 1px solid var(--primary, #0f766e); background: var(--primary-soft); color: var(--primary, #0f766e); border-radius: var(--radius); font-weight: 600; font-size: 14px; }
.ctr-picker-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-picker-clear { border: 0; background: transparent; color: inherit; opacity: .7; cursor: pointer; padding: 2px 4px; line-height: 1; border-radius: 4px; }
.ctr-picker-clear:hover { opacity: 1; background: rgba(0,0,0,.06); }
.ctr-picker-sm .ctr-picker-chip { font-size: 12.5px; padding: 4px 6px 4px 9px; }
.ctr-picker-sm .ctr-picker-item { font-size: 12.5px; padding: 5px 8px; }
.ctr-picker-sm .ctr-picker-icon { font-size: 13px; left: 9px; }
.ctr-picker-sm .ctr-picker-q { padding-left: 28px !important; }

/* ===== v2.118.0: the "Read the guide" link at the top of every Help window ===== */
.help-guide-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 1px solid var(--primary, #0f766e); background: var(--primary-soft); color: var(--primary, #0f766e); border-radius: var(--radius); text-decoration: none; }
.help-guide-link:hover { filter: brightness(.97); text-decoration: none; }
.help-guide-link > i:first-child { font-size: 22px; }
.help-guide-link > span { display: flex; flex-direction: column; min-width: 0; }
.help-guide-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.help-guide-title { font-weight: 600; font-size: 14.5px; }
.help-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.help-link-form { border-top: 1px dashed var(--gray-200); margin-top: 8px; padding-top: 8px; }

/* ===== v2.119.0: choose-your-password fields (contractor registration) ===== */
.pw-field { position: relative; }
.pw-field .form-control { padding-right: 42px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--gray-500); padding: 4px 6px; border-radius: 6px; cursor: pointer; line-height: 1; }
.pw-toggle:hover { color: var(--primary); background: var(--gray-100); }
.pw-meter { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; color: var(--gray-500); }
.pw-meter-bar { flex: 0 0 120px; height: 5px; border-radius: 3px; background: var(--gray-200); position: relative; overflow: hidden; }
.pw-meter-bar::after { content: ""; position: absolute; inset: 0; width: var(--pw, 0%); background: var(--pw-color, var(--gray-400)); transition: width .15s ease; }
.pw-field .form-control.is-mismatch { border-color: var(--danger, #dc2626); }

/* ===== v2.120.0: contractor clock — the Today card and the one-tap button ===== */
.clock-btn-wrap { display: flex; flex-direction: column; gap: 6px; }
.clock-btn-lg .clock-btn { padding: 16px 20px; font-size: 18px; font-weight: 700; border-radius: 12px; }
.clock-since { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--success, #16a34a); font-weight: 600; }
.clock-since i { font-size: 12px; animation: clockPulse 1.6s ease-in-out infinite; }
@keyframes clockPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.clock-why { font-size: 12.5px; }
.today-card { border-left: 4px solid var(--primary, #0f766e); }
.today-card .today-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--primary, #0f766e); font-weight: 700; }
.today-card .today-title { font-size: 18px; font-weight: 700; margin: 2px 0; }
.today-card .today-meta { font-size: 13px; color: var(--gray-600); }
.clock-flag { font-size: 10.5px; }
.clock-pin { color: var(--gray-500); text-decoration: none; font-size: 12px; white-space: nowrap; }
.clock-pin:hover { color: var(--primary); }
.clock-adjust summary { list-style: none; cursor: pointer; }
.clock-adjust summary::-webkit-details-marker { display: none; }
.clock-adjust-form { border: 1px dashed var(--gray-200); border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 12.5px; }

/* ===== v2.123.0: dashboard charts (inline SVG) ===== */
.hfd-chart { width: 100%; height: auto; display: block; font-family: var(--font-ui); }
.hfd-chart a { cursor: pointer; }
.hfd-chart a:hover rect, .hfd-chart a:hover path { filter: brightness(1.12); }
.hfd-chart text { user-select: none; }
.hfd-donut-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hfd-donut-row .hfd-donut { flex: 0 0 160px; width: 160px; }
.hfd-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; min-width: 0; font-size: 13px; }
.hfd-legend li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.hfd-legend li a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; width: 100%; }
.hfd-legend li a:hover .hfd-legend-label { text-decoration: underline; }
.hfd-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
.hfd-legend-label { flex: 1 1 auto; min-width: 0; }
.hfd-legend-val { white-space: nowrap; font-weight: 600; }
.hfd-chart-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 6px; font-size: 12.5px; }
.hfd-chart-legend-row a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.hfd-chart-legend-row a:hover { text-decoration: underline; }
@media (max-width: 575.98px) { .hfd-donut-row .hfd-donut { flex-basis: 130px; width: 130px; } }