/* ══════════════════════════════════════════════════════════════
   Pirates Group Bookkeeping — Apple "Liquid Glass"
   (iOS 26 / macOS 26 Tahoe) Design System
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Gray scale — Apple system grays */
  --gray-50:  #f9f9fb;
  --gray-100: #f2f2f7;
  --gray-200: #e5e5ea;
  --gray-300: #d1d1d6;
  --gray-400: #c7c7cc;
  --gray-500: #aeaeb2;
  --gray-900: #0C0C0B;

  /* Brand — Pirates Liquor (wine + near-black + cream) */
  --brand:       #0C0C0B;
  --accent:      #6B1F2E;
  --accent-hover:#4A1520;
  --accent-dim:  rgba(107,31,46,0.12);
  --accent-ring: rgba(107,31,46,0.42);

  /* Sidebar — translucent material */
  --sidebar-w:      240px;
  --sidebar-bg:     rgba(242,237,226,0.78);
  --sidebar-border: rgba(60,55,40,0.18);
  --nav-text:       #3A3830;
  --nav-text-active:#0C0C0B;

  /* Surfaces */
  --surface:     #FBF8EE;
  --background:  #F5F1E6;
  --border:      rgba(60,55,40,0.18);
  --border-muted:rgba(60,55,40,0.10);

  /* Text */
  --text-primary:   #16140F;
  --text-secondary: #3A3830;
  --text-tertiary:  #6B5F45;
  --text-inverse:   #F2EDE2;

  /* Logo theme tokens — flip for dark mode */
  --icon-fill:      #16140F;
  --tagline-color:  #6B1F2E;

  /* Pirates brand palette */
  --brand-near-black:   #0C0C0B;
  --brand-near-black-2: #161614;
  --brand-near-black-3: #1C1C1A;
  --brand-mid:          #3A3830;
  --brand-subtle:       #2A2A26;
  --brand-cream:        #F2EDE2;
  --brand-cream-2:      #E0D8C8;
  --brand-gold:         #C8962D;
  --brand-gold-light:   #DBAE4A;
  --brand-gold-muted:   #A07A22;
  --brand-wine:         #6B1F2E;
  --brand-wine-light:   #8A2C3E;
  --brand-wine-deep:    #4A1520;
  --brand-gold-deep:    #8C6515;

  /* Semantic — Apple system colors (light) */
  --success:     #34c759;
  --success-dim: rgba(52,199,89,0.14);
  --warning:     #ff9500;
  --warning-dim: rgba(255,149,0,0.14);
  --danger:      #ff3b30;
  --danger-dim:  rgba(255,59,48,0.14);
  --info:        #007aff;
  --info-dim:    rgba(0,122,255,0.14);
  --success-text:#1a7e34;
  --danger-text: #c0271f;
  --warning-text:#a15a00;
  --info-text:   #0056b3;
  --warning-dark:#c26c00;
  --danger-dark: #c0271f;

  /* Badge text (darker tints for light backgrounds) */
  --badge-success: #1a7e34;
  --badge-warning: #a15a00;
  --badge-danger:  #c0271f;
  --badge-info:    #0056b3;
  --badge-purple:  #A07A22;
  --badge-purple-dim: rgba(88,86,214,0.12);

  /* Button hover tints */
  --info-hover:   #0056b3;
  --danger-hover: #a51d14;

  /* KPI accents — Apple system spectrum */
  --kpi-1: #34c759;
  --kpi-2: #007aff;
  --kpi-3: #ff9500;
  --kpi-4: #A07A22;
  --kpi-5: #ff3b30;

  /* Typography — prefer SF on Apple devices, Inter elsewhere */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-serif:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;

  /* Line-height scale — only --leading-normal/-relaxed referenced */
  --leading-normal:  1.4;   /* body copy */
  --leading-relaxed: 1.55;  /* reading blocks, descriptions */

  /* Radius — Apple continuous-curve scale */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Unified button geometry — one source of truth across every button
     tier (brand / outline / action / icon) so they read as one family. */
  --btn-radius: 0.625rem;  /* 10px — slightly-rounded glass control */
  --btn-weight: 600;       /* unified label weight (was a 500/750 split) */
  --btn-gap:    0.4rem;    /* unified icon↔label gap */

  /* Shadows — cool, layered (Apple-style) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);

  /* Materials — translucent backgrounds */
  --material-thick: rgba(251,248,240,0.84);
  --material-filter: saturate(180%) blur(20px);

  /* ── Liquid Glass (iOS 26 / macOS Tahoe) ──
     Translucent layered surfaces that blur + saturate what sits behind
     them, lit from above with a specular top edge and grounded by a soft
     diffuse shadow. Tints stay on the cream/wine brand. Every token has a
     dark-mode counterpart under [data-theme="dark"]. */
  --glass-bg:        rgba(251,248,240,0.62);  /* default frosted surface  */
  --glass-bg-strong: rgba(251,248,240,0.80);  /* nav / floating panes     */
  --glass-bg-subtle: rgba(251,248,240,0.42);  /* hover tints, chips        */
  --glass-filter:    saturate(185%) blur(30px);
  --glass-filter-lite: saturate(160%) blur(16px);
  --glass-border:    rgba(255,255,255,0.55);  /* lit hairline edge        */
  --glass-border-soft: rgba(255,255,255,0.30);
  /* Inset specular highlight (top) + faint inner floor line (bottom)      */
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.65),
                     inset 0 -1px 0 rgba(60,55,40,0.05);
  /* Soft, diffuse ambient shadow that grounds a floating pane            */
  --glass-shadow:    0 8px 28px rgba(40,32,18,0.10), 0 2px 8px rgba(40,32,18,0.06);
  --glass-shadow-lg: 0 18px 48px rgba(40,32,18,0.16), 0 6px 16px rgba(40,32,18,0.08);
  /* Specular sheen — a gentle top-down gloss layered over the glass fill
     (no pseudo-elements, so it never disturbs sticky headers/layout).    */
  --glass-sheen:     linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 46%);

  /* Floating bottom tab bar (iOS 26) — side margin + gap below/above */
  --tabbar-float-inset: 0.85rem;
  --tabbar-float-gap:   0.55rem;
  --tabbar-glass-bg:    rgba(251,248,240,0.55); /* more translucent than cards */
  --tabbar-active-bg:   rgba(255,253,248,0.82);  /* raised warm-white capsule (iOS) */
  /* Z-index scale */
  --mobile-tabbar-height: calc(58px + (2 * var(--tabbar-float-gap)) + env(safe-area-inset-bottom));
  --z-sticky:      2;   /* sticky table headers              */
  --z-modal-foot:  5;   /* mobile sticky modal footer        */
  --z-sidebar:     100; /* sidebar (desktop)                  */
  --z-tabbar:      250; /* mobile bottom tab bar              */
  --z-skip:        9999;/* skip-to-content a11y link          */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* elegant ease-out */
  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1); /* subtle bounce */

  /* Spacing scale — only --space-5/-6 are referenced; the rest of the scale
     was unused (Bootstrap's gap-* / m-* / p-* utilities cover most cases). */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */

  /* Print — neutral ink-friendly palette */
  --print-bg:      #fff;
  --print-text:    #000;
  --print-border:  #ddd;
  --print-th-bg:   #f5f5f5;
}

/* ══════════════════════════════════════════════════════════════
   Dark Mode Overrides
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Gray scale — Apple system grays (dark)
     NOTE: --gray-50 was #1c1c1e (identical to --surface), which collapsed
     any "shelf" background (table section headers, filter bars, modal
     footers, tfoot, report rows, accordions, dropzones, disclosure hovers,
     segmented controls, calendar nav) into the surrounding card. Bumped
     one step to #242426 so all of those rules regain visible elevation
     without any per-rule overrides. */
  --gray-50:  #1C1C1A;
  --gray-100: #2A2A26;
  --gray-200: #3a3a3c;
  --gray-300: #48484a;
  --gray-400: #636366;
  --gray-500: #8e8e93;
  --gray-900: #F2EDE2;

  --brand:       #F2EDE2;
  --accent:      #D86883;
  --accent-hover:#C8576E;
  --accent-dim:  rgba(216,104,131,0.18);
  --accent-ring: rgba(216,104,131,0.50);

  --sidebar-bg:     rgba(22,22,20,0.78);
  --sidebar-border: rgba(242,237,226,0.13);
  --nav-text:       #B8AF9C;
  --nav-text-active:#F2EDE2;

  --surface:     #161614;
  --background:  #0C0C0B;
  --border:      rgba(242,237,226,0.13);
  --border-muted:rgba(242,237,226,0.08);

  --text-primary:   #F2EDE2;
  --text-secondary: #E0D8C8;
  --text-tertiary:  #A8A090;
  --text-inverse:   #0C0C0B;

  --icon-fill:      #F2EDE2;
  --tagline-color:  #D86883;

  /* Semantic — Apple system colors (dark) */
  --success:     #30d158;
  --success-dim: rgba(48,209,88,0.18);
  --warning:     #ff9f0a;
  --warning-dim: rgba(255,159,10,0.18);
  --danger:      #ff453a;
  --danger-dim:  rgba(255,69,58,0.18);
  --info:        #0a84ff;
  --info-dim:    rgba(10,132,255,0.18);
  --success-text:#63e48c;
  --danger-text: #ff7a70;
  --warning-text:#ffcf7c;
  --info-text:   #58aeff;
  --warning-dark:var(--warning);
  --danger-dark: var(--danger);

  --badge-success: var(--success);
  --badge-warning: var(--warning);
  --badge-danger:  var(--danger);
  --badge-info:    var(--info);
  --badge-purple:  var(--kpi-4);
  --badge-purple-dim: rgba(188,186,255,0.14);

  --info-hover:   var(--info-text);
  --danger-hover: var(--danger-text);

  --kpi-1: #30d158;
  --kpi-2: #0a84ff;
  --kpi-3: #ff9f0a;
  --kpi-4: #DBAE4A;
  --kpi-5: #ff453a;

  --material-thick: rgba(28,28,26,0.82);

  /* ── Liquid Glass (dark) ── darker, lower-alpha tints; the lit edge is a
     brighter cream-white so glass still reads as illuminated from above. */
  --glass-bg:        rgba(28,28,26,0.58);
  --glass-bg-strong: rgba(22,22,20,0.74);
  --glass-bg-subtle: rgba(36,36,34,0.40);
  --tabbar-glass-bg: rgba(28,28,30,0.50);
  --tabbar-active-bg: rgba(255,255,255,0.14);
  --glass-border:    rgba(242,237,226,0.18);
  --glass-border-soft: rgba(242,237,226,0.10);
  --glass-highlight: inset 0 1px 0 rgba(242,237,226,0.16),
                     inset 0 -1px 0 rgba(0,0,0,0.20);
  --glass-shadow:    0 8px 28px rgba(0,0,0,0.44), 0 2px 8px rgba(0,0,0,0.30);
  --glass-shadow-lg: 0 18px 48px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.34);
  --glass-sheen:     linear-gradient(180deg, rgba(242,237,226,0.07), rgba(242,237,226,0) 46%);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.16);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.36), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.45), 0 4px 8px rgba(0,0,0,0.24);

  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════
   Brand typography — Archivo display sans + Inter body sans
   ══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4,
.page-header .title,
.section-card > .section-header h5,
.brand-header .brand-name,
.login-box .brand,
.sidebar .logo .logo-wordmark { font-family: var(--font-display); letter-spacing: -0.2px; }

.sidebar .logo .logo-tagline,
.login-brand-tagline,
.brand-sub-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 5px;
}

/* Dark mode — scrollbar + selection */
[data-theme="dark"] { scrollbar-color: var(--gray-400) transparent; }
[data-theme="dark"]::-webkit-scrollbar-thumb { background: var(--gray-400); }
[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }
[data-theme="dark"] ::selection { background: var(--accent); color: #fff; }
[data-theme="dark"] ::-moz-selection { background: var(--accent); color: #fff; }

/* Dark mode component overrides */
[data-theme="dark"] .table-hover tbody tr:hover { background: var(--border-muted); }
/* Badges, deltas, and logo span are now fully theme-aware via CSS variables */
[data-theme="dark"] .report-row-revenue { background: var(--success-dim); }
[data-theme="dark"] .report-row-expense { background: var(--danger-dim); }
[data-theme="dark"] .report-row-net     { background: var(--info-dim); }
[data-theme="dark"] .report-row-header  { background: var(--gray-100); }  /* child td/th override in line ~223 */
[data-theme="dark"] .report-row-total   { background: var(--gray-200); }  /* child td override in line ~224 */
[data-theme="dark"] .form-control {
  background: var(--gray-100);
  color: var(--text-primary);
  border-color: var(--border);
}
/* form-select uses longhand so the chevron background-image stays intact */
[data-theme="dark"] .form-select {
  background-color: var(--gray-100);
  color: var(--text-primary);
  border-color: var(--border);
}
[data-theme="dark"] .form-control::placeholder { color: var(--text-tertiary); }
[data-theme="dark"] .modal-content { background: var(--surface); }
[data-theme="dark"] .btn-close {
  background-color: var(--gray-200);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3e%3c/svg%3e");
}
[data-theme="dark"] .btn-close:hover { background-color: var(--gray-300); }
[data-theme="dark"] .text-muted { color: var(--text-tertiary) !important; }
[data-theme="dark"] .text-dark { color: var(--text-primary) !important; }
[data-theme="dark"] .text-success { color: var(--success) !important; }
[data-theme="dark"] .text-danger { color: var(--danger) !important; }
[data-theme="dark"] .text-warning { color: var(--warning) !important; }
[data-theme="dark"] .text-primary { color: var(--accent) !important; }
[data-theme="dark"] .bg-success { background-color: var(--success) !important; }
[data-theme="dark"] .bg-danger { background-color: var(--danger) !important; }
[data-theme="dark"] .bg-warning { background-color: var(--warning) !important; color: var(--text-inverse) !important; }
[data-theme="dark"] .bg-secondary { background-color: var(--gray-300) !important; }
[data-theme="dark"] .bg-primary { background-color: var(--accent) !important; }
[data-theme="dark"] .bg-light { background-color: var(--gray-100) !important; }
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top { border-color: var(--border) !important; }
[data-theme="dark"] .card { background-color: var(--surface); border-color: var(--border); }
[data-theme="dark"] .table-light { background-color: var(--gray-100) !important; }
[data-theme="dark"] .table-light th, [data-theme="dark"] .table-light td { background-color: var(--gray-100) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .table-warning > td, [data-theme="dark"] .table-warning > th { background-color: var(--warning-dim) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .table-dark > td, [data-theme="dark"] .table-dark > th { background-color: var(--gray-200) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .btn-outline-primary { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--accent-dim); color: var(--accent); }
[data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--gray-100); color: var(--text-primary); }
[data-theme="dark"] .btn-outline-success { color: var(--success); border-color: var(--success); }
[data-theme="dark"] .btn-outline-success:hover { background: var(--success-dim); color: var(--success); }
[data-theme="dark"] .btn-outline-danger { color: var(--danger); border-color: var(--danger); }
[data-theme="dark"] .btn-outline-danger:hover { background: var(--danger-dim); color: var(--danger); }
[data-theme="dark"] .btn-success { background: var(--success); border-color: var(--success); color: var(--text-inverse); }
[data-theme="dark"] .btn-warning { background: var(--warning); border-color: var(--warning); color: var(--text-inverse); }
[data-theme="dark"] .btn-secondary { background: var(--gray-300); border-color: var(--gray-300); color: var(--text-primary); }
[data-theme="dark"] .bg-info { background-color: var(--info) !important; }
[data-theme="dark"] .btn-info { background: var(--info); border-color: var(--info); color: var(--text-inverse); }
[data-theme="dark"] .btn-outline-info { color: var(--info); border-color: var(--info); }
[data-theme="dark"] .btn-outline-info:hover { background: var(--info-dim); color: var(--info); }
[data-theme="dark"] .progress { background-color: var(--gray-200); }
[data-theme="dark"] .table-primary > td, [data-theme="dark"] .table-primary > th,
[data-theme="dark"] tr.table-primary > td, [data-theme="dark"] tr.table-primary > th { background-color: var(--accent-dim) !important; color: var(--text-primary) !important; }
[data-theme="dark"] .table-bordered, [data-theme="dark"] .table-bordered th, [data-theme="dark"] .table-bordered td { border-color: var(--border) !important; }
[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--gray-100); --bs-table-hover-bg: var(--border-muted); --bs-table-border-color: var(--border); }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: var(--surface); color: var(--text-secondary); }
[data-theme="dark"] .table tfoot > tr > td { background-color: var(--gray-50); }
[data-theme="dark"] .report-row-revenue > td { background-color: var(--success-dim) !important; }
[data-theme="dark"] .report-row-expense > td { background-color: var(--danger-dim) !important; }
[data-theme="dark"] .report-row-net > td { background-color: var(--info-dim) !important; }
[data-theme="dark"] .report-row-header > td, [data-theme="dark"] .report-row-header > th { background-color: var(--gray-100) !important; }
[data-theme="dark"] .report-row-total > td { background-color: var(--gray-200) !important; }
[data-theme="dark"] .table-toolbar .search-box {
  background: var(--gray-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.868-3.834zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z' fill='%238e8e93'/%3E%3C/svg%3E") no-repeat 9px center;
  border-color: transparent;
}
[data-theme="dark"] .search-field .search-box {
  background-image: none;  /* use .search-field::before only — no duplicate icon */
  background-color: var(--gray-100);
}
[data-theme="dark"] .table-toolbar .search-box:hover { background-color: var(--gray-200); }
[data-theme="dark"] .table-toolbar .search-box:focus { background-color: var(--gray-100); border-color: var(--accent); }
[data-theme="dark"] .seg-tabs .seg-link:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .btn-icon-edit { color: var(--info); border-color: var(--info-dim); }
[data-theme="dark"] .btn-icon-edit:hover { background: var(--info-dim); color: var(--info-text); }
[data-theme="dark"] .btn-icon-danger:hover { background: var(--danger-dim); color: var(--danger-text); }
[data-theme="dark"] .btn-sidebar-logout:hover { background: rgba(248,113,113,0.15); color: var(--danger-text); }
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb,
[data-theme="dark"] .sidebar-nav::-webkit-scrollbar-thumb { background: var(--gray-400); }
[data-theme="dark"] .table-responsive { scrollbar-color: var(--gray-400) transparent; }
[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb { background: var(--gray-400); }
[data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }
/* Legacy Bootstrap-tinted .badge variants no longer used — replaced by .status-pill. */
/* Bootstrap .text-body maps to --bs-body-color which stays dark in dark mode → force theme-aware */
[data-theme="dark"] .text-body { color: var(--text-primary) !important; }
[data-theme="dark"] a.text-body:hover { color: var(--accent) !important; }
[data-theme="dark"] .text-muted { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-dark { color: var(--text-primary) !important; }

/* Net worth banner — light Apple widget look (dark mode uses elevated surface) */
[data-theme="dark"] .nw-banner { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .nw-banner-tile { background: var(--gray-50); }
[data-theme="dark"] .nw-banner-tile-hero { background: linear-gradient(135deg, rgba(165,180,252,0.12), rgba(165,180,252,0.04)); border-color: rgba(165,180,252,0.22); }

/* Theme toggle button */
.btn-theme-toggle {
  background: var(--gray-100);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-theme-toggle:hover { background: var(--gray-200); color: var(--text-primary); }

/* ── Selection — accent highlight, override for accent-bg surfaces ── */
::selection { background: var(--accent); color: #fff; }
::-moz-selection { background: var(--accent); color: #fff; }
/* On accent-colored surfaces, invert so selection is visible */
.btn-primary ::selection,
.btn-primary::selection,
.bg-primary ::selection,
.bg-primary::selection,
.bg-accent ::selection,
.bg-accent::selection { background: rgba(255,255,255,0.35); color: #fff; }
/* Code blocks — use subtle accent tint so code stays readable */
code::selection,
pre::selection,
pre code::selection { background: var(--accent-ring); color: var(--text-primary); }

/* ── Global scrollbar + smooth scroll ── */
html { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html::-webkit-scrollbar { width: 7px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
html::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Base ── */
body {
  background: var(--background);
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal, 1.5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Sidebar (macOS translucent vibrancy) ── */
.sidebar {
  height: 100vh;
  background: var(--sidebar-bg);
  width: var(--sidebar-w);
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .sidebar {
    -webkit-backdrop-filter: var(--material-filter);
    backdrop-filter: var(--material-filter);
  }
}

.sidebar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

/* Logo — Pirates Liquor minimal-icon lockup (variant 03) */
.sidebar .logo {
  display: flex; align-items: center; gap: 14px;
  padding: 1.1rem 1.1rem 1rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  flex-shrink: 0;
}
.sidebar .logo .logo-icon-svg {
  color: var(--icon-fill); flex-shrink: 0;
  transition: transform var(--transition-smooth);
}
.sidebar .logo:hover .logo-icon-svg { transform: scale(1.05); }
.sidebar .logo .logo-text { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.sidebar .logo .logo-wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.375rem; letter-spacing: 4px;
  color: var(--text-primary);
}
.sidebar .logo .logo-tagline {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 0.53125rem; letter-spacing: 6px;
  text-transform: uppercase; color: var(--tagline-color);
}

/* Nav scroll area */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 0.5rem 0 0.5rem;
}
/* scrollbar rules consolidated above with .sidebar */

/* Nav links — macOS rounded-pill selection */
.sidebar .nav-link {
  color: var(--nav-text);
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  margin: 1px 10px;
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--transition-smooth), color var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.1px;
}
.sidebar .nav-link i {
  font-size: 0.95rem;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
.sidebar .nav-link:hover {
  background: rgba(60,60,67,0.08);
  color: var(--nav-text-active);
}
[data-theme="dark"] .sidebar .nav-link:hover { background: rgba(255,255,255,0.06); }
.sidebar .nav-link:hover i { opacity: 0.9; }
.sidebar .nav-link.active {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}
.sidebar .nav-link.active i { opacity: 1; color: var(--accent); }

/* Dashboard link (top-level, slightly different) */
.sidebar .nav-link.dash-link {
  margin: 4px 8px 2px;
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Section headers */
.nav-section { margin-top: 2px; position: relative; padding-top: 4px; }
.nav-section-header {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 8px 1rem 4px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--transition-fast);
}
.nav-section-header:hover { color: var(--text-secondary); }
.nav-section-header > i:first-child {
  font-size: 0.72rem;
  opacity: 0.55;
  margin-right: 2px;
}
.nav-section-header .bi-chevron-down {
  font-size: 0.5rem;
  transition: transform var(--transition-base);
  opacity: 0.5;
  margin-left: auto;
}
.nav-section-header.collapsed .bi-chevron-down { transform: rotate(-90deg); }

/* Divider above sections */
.nav-section-header::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border-muted);
  margin-bottom: 4px;
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
}
/* .nav-section merged into earlier rule */

/* ── Main content ── */
.main-content {
  margin-left: var(--sidebar-w);
  padding: 1.5rem 2.25rem;
  min-height: 100vh;
}

.admin-override-bar {
  padding: 0;
  margin-bottom: 0.9rem;
  overflow: hidden;
}

.admin-override-summary {
  min-height: 42px;
  padding: 0.45rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  list-style: none;
  color: var(--text-secondary);
}

.admin-override-summary::-webkit-details-marker {
  display: none;
}

.admin-override-summary::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 0.78rem;
  transition: transform var(--transition-fast);
}

.admin-override-bar[open] .admin-override-summary::after {
  transform: rotate(180deg);
}

.admin-override-title {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--text-primary);
}

.admin-override-hint {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.admin-override-body {
  padding: 0 0.75rem 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(16rem, 1fr) auto auto;
  gap: 0.5rem;
  align-items: center;
}

.admin-override-body .form-control {
  min-width: 0;
}

/* ── Quick-action shelf — dashboard button cluster (Record Sale / Purchase / ...) ── */
.quick-actions {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-muted);
  flex-wrap: wrap;
}
.quick-actions .btn,
.quick-actions .btn.btn-sm {
  border-radius: calc(var(--radius-sm) - 3px);
  padding: 5px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  box-shadow: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  transition:
    color var(--transition-fast),
    background 200ms var(--ease-out, ease-out),
    box-shadow 220ms var(--ease-out, ease-out),
    transform 120ms var(--ease-out, ease-out);
  line-height: 1.4;
}
.quick-actions .btn:hover { color: var(--text-primary); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.quick-actions .btn.btn-brand,
.quick-actions .btn.btn-brand.btn-sm {
  background: var(--surface);
  color: var(--accent);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.05),
    0 1px 2px rgba(0,0,0,0.07),
    inset 0 0 0 0.5px color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight: 600;
}
.quick-actions .btn.btn-brand:hover { color: var(--accent-hover); background: var(--surface); }
.quick-actions .btn:active { transform: scale(0.97); }
@media (max-width: 600px) {
  .quick-actions { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .quick-actions::-webkit-scrollbar { display: none; }
  .quick-actions .btn { white-space: nowrap; flex: 0 0 auto; }
}

/* ── Page header — unified minimalist title row ── */
.page-header {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: var(--space-5, 1rem);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  letter-spacing: -0.4px;
  line-height: 1.25;
  min-width: 0;
}
.page-header i {
  color: var(--accent);
  font-size: 1rem;
  opacity: 0.85;
  flex-shrink: 0;
  display: inline-flex;
  width: 1.75rem; height: 1.75rem;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 8px;
  margin-right: 0.15rem;
}
.page-header-sub {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 0.55rem;
  letter-spacing: 0;
  padding-left: 0.6rem;
  border-left: 1px solid var(--border);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Unified header row: title on left, action group on right */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: var(--space-5, 1rem);
  flex-wrap: wrap;
}
.page-header-row .page-header { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.page-header-row .page-header-actions { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 600px) {
  .page-header-sub { display: none; }
  .page-header { font-size: 1.3rem; }
  .page-header i { width: 1.5rem; height: 1.5rem; font-size: 0.9rem; }
}

/* ── KPI cards — Apple widget ──────────────────────────────────────────────
   Colorisation rule:
     • Default                               → no accent class (neutral surface).
     • Primary metric (revenue, net worth)   → .kpi-card.blue
     • Positive / success metric             → .kpi-card.green
     • Attention / pending / due             → .kpi-card.orange
     • Loss / overdue / shortage             → .kpi-card.red
     • Optional / informational              → .kpi-card.purple
   Use accent classes sparingly — at most ~3 colored cards per view, otherwise
   the spectrum loses meaning. Secondary metrics should stay neutral. The accent
   colors come from the --kpi-1 … --kpi-5 token palette declared on :root.
   ──────────────────────────────────────────────────────────────────────────── */
.kpi-card {
  --kpi-accent: var(--accent);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem 1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--gray-300);
}
.kpi-card:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.kpi-card.green  { --kpi-accent: var(--kpi-1); }
.kpi-card.blue   { --kpi-accent: var(--kpi-2); }
.kpi-card.orange { --kpi-accent: var(--kpi-3); }
.kpi-card.purple { --kpi-accent: var(--kpi-4); }
.kpi-card.red    { --kpi-accent: var(--kpi-5); }
.kpi-card .label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 2px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.kpi-card .label::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kpi-accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kpi-accent) 18%, transparent);
}
/* Colored circular icon chip (opt-in via .kpi-ico) — replaces the dot when present.
   Tint + color follow the card's --kpi-accent, so it is variant- and theme-aware. */
.kpi-card .label i.kpi-ico {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--kpi-accent) 16%, transparent);
  color: var(--kpi-accent);
  font-size: 0.8rem;
}
.kpi-card-compact .label i.kpi-ico { width: 1.3rem; height: 1.3rem; font-size: 0.72rem; }
.kpi-card .label:has(i.kpi-ico)::before { display: none; }
/* Extend the icon chip to the flat + bordered KPI variants: derive --kpi-accent
   from their existing accent mechanism, but ONLY when a chip is present
   (:has scoping = zero effect on cards without a chip). */
.kpi-card-flat[data-accent="success"]:has(.kpi-ico) { --kpi-accent: var(--success); }
.kpi-card-flat[data-accent="info"]:has(.kpi-ico)    { --kpi-accent: var(--info); }
.kpi-card-flat[data-accent="warning"]:has(.kpi-ico) { --kpi-accent: var(--warning); }
.kpi-card-flat[data-accent="purple"]:has(.kpi-ico)  { --kpi-accent: var(--brand-gold-muted); }
.kpi-card-flat[data-accent="danger"]:has(.kpi-ico)  { --kpi-accent: var(--danger); }
.kpi-card-flat:has(.kpi-ico)::before { display: none; }  /* chip replaces the corner dot */
.kpi-card-border-success:has(.kpi-ico) { --kpi-accent: var(--success); }
.kpi-card-border-info:has(.kpi-ico)    { --kpi-accent: var(--info); }
.kpi-card-border-warning:has(.kpi-ico) { --kpi-accent: var(--warning); }
.kpi-card-border-danger:has(.kpi-ico)  { --kpi-accent: var(--danger); }
.kpi-card-border-accent:has(.kpi-ico),
.kpi-card-border-brand:has(.kpi-ico)   { --kpi-accent: var(--accent); }
.kpi-card .value {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.35rem;
  line-height: 1.2;
  /* SF Mono for all KPI headline values — matches AR Summary tabular feel
     but at the large display size. Digits stay in perfect column alignment. */
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-card .value.text-warning { color: var(--warning-dark) !important; }
.kpi-card .value.text-danger  { color: var(--danger-dark) !important; }
.kpi-card .sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: 0.25rem;
  /* Wallet breakdowns and MTD/totals live in .sub — keep digits mono-aligned. */
  font-variant-numeric: tabular-nums;
}
.kpi-card .sub a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); }
.kpi-card .sub a:hover { color: var(--accent-hover); }
.kpi-variance {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-muted);
  padding-top: 0.375rem;
  margin-top: auto;
}
.kpi-opening {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.kpi-delta {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 7px 1px 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.kpi-delta:hover { transform: translateY(-1px); }
.delta-up {
  background: var(--success-dim); color: var(--success-text);
  border-color: color-mix(in srgb, var(--success) 18%, transparent);
}
.delta-down {
  background: var(--danger-dim); color: var(--danger-text);
  border-color: color-mix(in srgb, var(--danger) 18%, transparent);
}
.delta-flat {
  background: var(--gray-100); color: var(--text-secondary);
  border-color: var(--border-muted);
}
/* Arrow glyph sizing when inline */
.kpi-delta::first-letter { font-size: 0.9em; }

/* ── Section cards — minimalist default ── */
.section-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-muted);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: none;
  transition:
    box-shadow 240ms var(--ease-out, ease-out),
    border-color var(--transition-smooth);
}
.section-card:hover { box-shadow: var(--shadow-xs); border-color: var(--border); }
.section-card h5 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-muted);
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.2px;
}
.section-card h5 i { color: var(--accent); font-size: 0.95em; opacity: 0.85; }
/* Tight variant — lists and tables where the card itself provides the only chrome */
.section-card.section-card-flush { padding: 0; overflow: hidden; }
.section-card.section-card-flush > .section-header {
  padding: 0.85rem var(--space-6) 0.75rem;
  border-bottom: 1px solid var(--border-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.section-card.section-card-flush > .section-header h5 {
  margin: 0; padding: 0; border-bottom: none;
}
.section-card.section-card-flush > .table-responsive > .table,
.section-card.section-card-flush > .table { margin: 0; }

/* ── Tables — unified compact density across every template ── */
.table { margin-bottom: 0; }
.table td form, .table td form.d-inline { margin: 0; }
.table thead th {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-top: none;
  font-weight: 600;
  letter-spacing: 0.45px;
  padding: 0.5rem 0.65rem;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: var(--surface);
}
.table tbody td {
  font-size: 0.82rem;
  vertical-align: middle;
  padding: 0.5rem 0.65rem;
  line-height: 1.35;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-muted);
}
/* Rows with chunky widgets (buttons, avatars, pills) deserve a little breathing room */
.table tbody td:has(.btn):not(:has(.btn-icon)),
.table tbody td:has(.avatar:not(.avatar-xs)) { padding-top: 0.35rem; padding-bottom: 0.35rem; }
/* Every right-aligned table cell is a number column → iOS-Calculator style.
   Propagates the dashboard AR-Summary look to every table automatically.
   Centered cells (quantity, count) get the same treatment. Action cells
   typically use no alignment class so they're unaffected. */
.table .text-end,
.table td.text-center,
.table th.text-center {
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.01em;
  font-size: 0.9em;
}
/* Column headers (th.text-end / th.text-center) should stay in their
   existing eyebrow style — uppercase tracking — NOT mono. Override back. */
.table thead th.text-end,
.table thead th.text-center {
  font-family: inherit;
  font-size: var(--text-xxs);
  letter-spacing: 0.06em;
}
.table tbody tr:nth-child(even) { background: rgba(0,0,0,0.018); }
[data-theme="dark"] .table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* ── Density variants ── */
/* .table-compact — one notch tighter than the (already-dense) default.
   Used on ledger, audit log, and any table with many narrow rows. */
.table.table-compact thead th { padding: 0.38rem 0.55rem; font-size: 0.64rem; letter-spacing: 0.5px; }
.table.table-compact tbody td { padding: 0.32rem 0.55rem; font-size: 0.78rem; line-height: 1.3; }
.table.table-compact tbody td:has(.btn),
.table.table-compact tbody td:has(.status-pill),
.table.table-compact tbody td:has(.avatar) { padding-top: 0.22rem; padding-bottom: 0.22rem; }

/* .table.table-sm (Bootstrap) already exists — ensure its inherited padding
   stays even tighter than our new default so it remains a distinct variant. */
.table.table-sm thead th { padding: 0.4rem 0.55rem; font-size: 0.66rem; }
.table.table-sm tbody td { padding: 0.4rem 0.55rem; font-size: 0.8rem; }

/* .table-relaxed — wider breathing for sparse tables (summary cards) */
.table.table-relaxed thead th { padding: 0.9rem 1rem; }
.table.table-relaxed tbody td { padding: 0.95rem 1rem; font-size: var(--text-md); }

/* ── Subtotal & grand-total rows — financial statements / P&L / invoices ── */
.table tbody tr.subtotal-row,
.table tbody tr.summary-row {
  background: var(--gray-50) !important;
  border-top: 1px solid var(--border);
}
.table tbody tr.subtotal-row > td,
.table tbody tr.summary-row > td {
  font-weight: 600;
  color: var(--text-primary);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.table tbody tr.grand-total-row {
  background: color-mix(in srgb, var(--accent) 6%, var(--gray-50));
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
[data-theme="dark"] .table tbody tr.grand-total-row {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.table tbody tr.grand-total-row > td {
  font-weight: 700;
  color: var(--text-primary);
  padding: 1rem 0.75rem;
  font-size: var(--text-md);
  letter-spacing: -0.1px;
}
.table tbody tr.grand-total-row td.text-end { color: var(--accent); font-weight: 700; }
/* Section divider row — P&L: "REVENUE", "EXPENSES", "NET" */
.table tbody tr.section-row > td {
  background: var(--gray-50);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .table tbody tr.section-row > td { background: color-mix(in srgb, var(--gray-100) 50%, transparent); }
.table-hover tbody tr { transition: background var(--transition-fast); }
.table-hover tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
[data-theme="dark"] .table-hover tbody tr:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Keyboard-visible row focus — mirrors the hover accent, plus a left-edge rail
   so the active row is locatable even when not hovered. */
.table tbody tr:has(:focus-visible) {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}
[data-theme="dark"] .table tbody tr:has(:focus-visible) {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
/* Dark-row utility (used for grand-total rows in batch sale/purchase modals
   and the empties-totals row in inventory). Bootstrap's .table-dark loses
   its background when our CSS-variable table styling overrides --bs-table-bg,
   so we force the gray-900 background here too — without it the white text
   renders on a near-white row in light mode. The dark-mode override above
   inverts both back to readable. */
.table-dark td, .table-dark th {
  background-color: var(--gray-900) !important;
  --bs-table-bg: var(--gray-900);
  color: var(--text-inverse) !important;
}
.table tbody a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.table tbody a:not(.btn-icon):not(.btn) {
  background-image: linear-gradient(var(--accent-hover), var(--accent-hover));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: color var(--transition-smooth), background-size var(--transition-smooth);
}
.table tbody a:not(.btn-icon):not(.btn):hover { color: var(--accent-hover); background-size: 100% 1px; }
.table tbody a.btn-icon:hover, .table tbody a.btn:hover { text-decoration: none; }

/* Global content-link baseline — accent, underline on hover, crisp focus */
.section-card p a:not(.btn):not(.btn-icon):not(.nav-link),
.alert a:not(.btn):not(.btn-close),
.page-header-sub a,
.text-muted a:not(.btn),
.lead a:not(.btn) {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.section-card p a:not(.btn):not(.btn-icon):not(.nav-link):hover,
.alert a:not(.btn):not(.btn-close):hover,
.page-header-sub a:hover,
.text-muted a:not(.btn):hover,
.lead a:not(.btn):hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
.section-card p a:not(.btn):focus-visible,
.alert a:focus-visible,
.page-header-sub a:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sticky thead in scrollable tables — Apple Finder translucent headers */
.table-responsive .table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-filter);
  backdrop-filter: var(--material-filter);
}
@supports not (backdrop-filter: blur(20px)) {
  .table-responsive .table thead th { background: var(--surface); }
}
/* Sticky tfoot — totals rows pinned to the bottom of scrollable tables.
   Works with the default .table-responsive max-height. Skipped when no tfoot. */
.table-responsive .table tfoot td,
.table-responsive .table tfoot th {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  background: var(--material-thick);
  -webkit-backdrop-filter: var(--material-filter);
  backdrop-filter: var(--material-filter);
  border-top: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(20px)) {
  .table-responsive .table tfoot td,
  .table-responsive .table tfoot th { background: var(--surface); }
}
/* Sticky first-column utility — add .table-sticky-col to a table's first td/th */
.table-sticky-col tbody td:first-child,
.table-sticky-col thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  box-shadow: 1px 0 0 var(--border);
}
.table-sticky-col thead th:first-child {
  z-index: calc(var(--z-sticky) + 1);
  background: var(--material-thick);
}
/* When horizontally scrolled, cast a soft rightward shadow to indicate overflow */
.table-responsive.is-scrolled .table-sticky-col tbody td:first-child,
.table-responsive.is-scrolled .table-sticky-col thead th:first-child {
  box-shadow: 2px 0 6px rgba(0,0,0,0.08), 1px 0 0 var(--border);
}
[data-theme="dark"] .table-responsive.is-scrolled .table-sticky-col tbody td:first-child,
[data-theme="dark"] .table-responsive.is-scrolled .table-sticky-col thead th:first-child {
  box-shadow: 2px 0 8px rgba(0,0,0,0.5), 1px 0 0 var(--border);
}

/* Horizontal scroll shadow indicators */
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  position: relative;
  /* Vertical constraint by default — all data remains accessible via scroll,
     and the "Show all" toggle (injected by JS when overflow exists) removes
     the cap. Horizontal overflow already handled by the base Bootstrap rule. */
  max-height: var(--table-max-h, 520px);
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* `auto` lets wheel events propagate to the page once the inner table has
     scrolled to its bound. Previously `contain` trapped wheel events inside
     the 520px box — making pages with multiple long tables (like /inventory)
     feel locked. Inertial bounce on touch is unaffected. */
  overscroll-behavior: auto;
}
.table-responsive.is-expanded { max-height: none; }
.table-responsive::-webkit-scrollbar { height: 5px; width: 5px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ── Show-more toggle — "Show all N rows" / "Collapse" ──
   Injected by main.js when a .table-responsive overflows its max-height.
   Sits directly after the scrollable box (before pagination, if any). */
.table-show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0.5rem 0.9rem;
  border: none;
  border-top: 1px solid var(--border-muted);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 3%, var(--surface)));
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.table-show-more:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); color: var(--accent-hover); }
.table-show-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-show-more i { font-size: 0.9em; transition: transform var(--transition-fast); }
.table-show-more.is-expanded i { transform: rotate(180deg); }
.table-show-more .count { opacity: 0.7; font-weight: 500; margin-left: 2px; }
/* Fade-at-bottom affordance while collapsed: hints that there's more below */
.table-responsive.has-overflow:not(.is-expanded)::after {
  content: '';
  position: sticky;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  margin-top: -28px;
  display: block;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface) 85%, transparent));
}
[data-theme="dark"] .table-show-more { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 6%, var(--surface))); }
[data-theme="dark"] .table-show-more:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }

/* ── Legacy .badge cluster removed — see .status-pill (end of file) ──
   The .badge color modifiers (.badge-ok / .badge-out / .badge-credit / etc.)
   were retired by the deep-polish migration. All template usages now ride on
   .status-pill .is-{paid|overdue|credit|…}. The .badge selector is still
   referenced from compound rules (.table-toolbar h2 .badge, .btn .badge,
   etc.) for backwards compatibility — those rules also target .status-pill
   so the live UI renders correctly. */

/* Optical alignment — tiny bit up from baseline for Bootstrap Icons */
.btn .bi { vertical-align: -1px; }
.btn-icon .bi { vertical-align: 0; line-height: 1; }
.nav-link .bi { vertical-align: -2px; }
/* Avoid icon misalignment in vertically-centered flex rows */
.d-flex > .bi,
.align-items-center > .bi { line-height: 1; }

/* Readonly computed fields */
.form-control-computed { background: var(--gray-100) !important; font-weight: 600; }

/* Form checkboxes / radios — Apple filled with crisp SVG marks */
.form-check-input {
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.18em;
  border: 1.5px solid var(--gray-400);
  background-color: var(--surface);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform 120ms ease;
  cursor: pointer;
}
.form-check-input[type="checkbox"] { border-radius: 0.35em; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
/* Apple-style bold rounded checkmark */
.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3e%3c/svg%3e");
}
/* Apple-style radio dot */
.form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:hover:not(:disabled):not(:checked) { border-color: var(--gray-500); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.form-check-input:active { transform: scale(0.92); }
.form-check-input:disabled { opacity: 0.45; cursor: not-allowed; }
.form-check-label { cursor: pointer; user-select: none; }
.form-check-input:disabled ~ .form-check-label { cursor: not-allowed; opacity: 0.6; }

/* iOS-style switch — larger track, smoother thumb */
.form-switch .form-check-input {
  width: 2.25em;
  height: 1.3em;
  border-radius: var(--radius-full);
  border: none;
  background-color: var(--gray-300);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: background-color 200ms ease, background-position 200ms ease;
}
.form-switch .form-check-input:checked {
  background-color: var(--success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  box-shadow: 0 0 0 3px var(--accent-ring);
}
[data-theme="dark"] .form-switch .form-check-input { background-color: var(--gray-300); }
[data-theme="dark"] .form-switch .form-check-input:checked { background-color: var(--success); }

/* Table section header (account type dividers, grouped headers) */
.table-section-header td {
  background: var(--gray-50) !important;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary);
  padding: 0.6rem 0.75rem !important;
  border-bottom: 2px solid var(--border) !important;
}
[data-theme="dark"] .table-section-header td { background: var(--gray-100) !important; }

/* ── Monospace numerics utility ── iOS Calculator / AR-Summary style ──
   The canonical number font for the whole app. Any currency, quantity,
   percentage, or date should use this class so digits align in columns
   and read as "data" rather than prose. Matches dashboard AR Summary. */
.font-mono {
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.01em;
}
/* Keep headline numerics at their own size — inherit SF Mono, never shrink. */
.kpi-card .value.font-mono,
.kpi-hero-value.font-mono,
.nw-banner-value.font-mono,
.nw-banner-hero.font-mono,
.pl-stat strong.font-mono,
h1 .font-mono, h2 .font-mono, h3 .font-mono,
h4 .font-mono, h5 .font-mono, h6 .font-mono {
  font-size: inherit;
  letter-spacing: inherit;
}

/* ── Buttons ── Apple-filled style ─────────────────────────────────────────
   Hierarchy (use consistently across templates):
     • Primary CTA              → .btn .btn-brand
     • Secondary outline (alt)  → .btn .btn-outline-brand   (e.g. "Save Counts")
     • Neutral / cancel / back  → .btn .btn-outline-secondary
     • Destructive              → .btn .btn-outline-danger  (filled .btn-danger only for confirmation modals)
     • Tertiary inline link     → .btn .btn-link            (sparing — prefer text links)
   Avoid scattering raw Bootstrap variants (.btn-primary, .btn-secondary filled,
   .btn-warning filled). The brand pair carries the design language; semantic
   variants are reserved for clear stateful intent (success / danger / warning).
   ──────────────────────────────────────────────────────────────────────────── */
.btn-brand {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  font-weight: var(--btn-weight);
  border-radius: var(--btn-radius);
  font-size: var(--text-sm);
  padding: 0.45rem 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  white-space: nowrap;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 25%, transparent);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform 100ms ease;
}
.btn-brand:hover {
  background: var(--accent-hover);
  color: var(--text-inverse);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-brand:active {
  transform: scale(0.97);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.btn-brand:disabled, .btn-brand.disabled {
  /* Bootstrap's .btn:disabled sets background-color: var(--bs-btn-disabled-bg)
     which is undefined for our custom .btn-brand and falls back to transparent.
     Re-assert the brand background so disabled buttons stay readable as buttons. */
  background-color: var(--accent);
  color: var(--text-inverse);
  opacity: 0.55;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}
.btn-outline-brand {
  color: var(--accent);
  border: 1px solid var(--accent);
  background: transparent;
  font-weight: var(--btn-weight);
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform 100ms ease;
}
.btn-outline-brand:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-hover); }
.btn-outline-brand:active { background: var(--accent-ring); transform: scale(0.97); }
.btn-outline-brand:disabled, .btn-outline-brand.disabled {
  /* Bootstrap's .btn:disabled overrides color/border with undefined --bs-btn-disabled-* vars;
     re-assert the accent so the disabled outline button is still recognizable as ours. */
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
  opacity: 0.55;
  pointer-events: none;
}

/* Apple press feel across common Bootstrap button variants */
.btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary,
.btn-outline-secondary, .btn-outline-success, .btn-outline-danger,
.btn-outline-warning, .btn-outline-info, .btn-outline-primary {
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform 100ms ease;
}
.btn-success:active, .btn-danger:active, .btn-warning:active, .btn-info:active, .btn-secondary:active,
.btn-outline-secondary:active, .btn-outline-success:active, .btn-outline-danger:active,
.btn-outline-warning:active, .btn-outline-info:active, .btn-outline-primary:active { transform: scale(0.97); }

/* ── Modals (iOS sheet aesthetic) ── */
/* Modal backdrop blur */
/* Modal backdrop — see later block for Apple-style stronger blur */

.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  background: var(--surface);
}
.modal-header {
  background: var(--surface);
  color: var(--text-primary);
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border-muted);
  letter-spacing: -0.1px;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .modal-header {
    background: var(--material-thick);
    -webkit-backdrop-filter: var(--material-filter);
    backdrop-filter: var(--material-filter);
  }
}
.modal-title {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.modal-title i {
  color: var(--accent);
  font-size: 1.05em;
  opacity: 0.85;
  flex-shrink: 0;
  display: inline-flex;
  width: 1.6rem; height: 1.6rem;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 7px;
  margin-right: 0.1rem;
}
.modal-body  { padding: 1.5rem; }
.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-muted);
  background: var(--gray-50);
}
/* Apple-style close button — circle with bold X */
.btn-close {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  background: var(--gray-100) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3e%3c/svg%3e") center / 10px 10px no-repeat;
  opacity: 1;
  transition: background-color var(--transition-fast), transform 100ms ease, box-shadow var(--transition-fast);
}
.btn-close:hover { background-color: var(--gray-200); opacity: 1; }
.btn-close:active { transform: scale(0.9); }
.btn-close:focus {
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
  opacity: 1;
}
.form-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* Bootstrap .form-text helper — match our type scale and tertiary contrast */
.form-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed, 1.55);
  margin-top: 0.3rem;
  display: block;
}
.form-text .bi { vertical-align: -1px; margin-right: 0.2rem; }
/* Required/optional affixes after labels */
.form-label .required,
.form-label [aria-label="required"] { color: var(--danger); font-weight: 600; }
.form-label .optional { color: var(--text-tertiary); font-weight: 400; font-size: 0.95em; }
.form-control, .form-select {
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  border-color: var(--border);
  color: var(--text-primary);
  background: var(--surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--gray-400); }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:disabled, .form-select:disabled { background: var(--gray-50); opacity: 0.75; cursor: not-allowed; }

/* iOS-picker chevron for <select> — single canonical rule (see R35 removed below) */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: right 0.6rem center;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0a8b4'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}

/* ── Focus-visible accessibility rings (Apple-style ring, not Bootstrap outline) ── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* All rounded buttons use a soft 3px accent-ring glow */
.btn-icon:focus-visible,
.btn-brand:focus-visible,
.btn-outline-brand:focus-visible,
.btn-primary:focus-visible,
.btn-success:focus-visible,
.btn-danger:focus-visible,
.btn-warning:focus-visible,
.btn-info:focus-visible,
.btn-secondary:focus-visible,
.btn-outline-primary:focus-visible,
.btn-outline-success:focus-visible,
.btn-outline-danger:focus-visible,
.btn-outline-warning:focus-visible,
.btn-outline-info:focus-visible,
.btn-outline-secondary:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
/* Compact inline links keep a tighter 2px ring */
.seg-link:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); outline: none; border-radius: calc(var(--radius-sm) - 2px); }
.page-link:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); outline: none; }
.nav-link:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); outline: none; }
.nav-section-header:focus-visible { color: var(--accent); outline: none; box-shadow: inset 0 0 0 2px var(--accent-ring); border-radius: var(--radius-sm); }
/* Form controls get the matching ring, inset so it doesn't push layout */
.form-check-label:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-ring); outline: none; border-radius: var(--radius-sm); }

/* ── Flash alerts (iOS banner pills with leading icons) ── */
.alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xs);
  animation: alertSlideIn 0.3s ease-out;
  border: none;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.45;
}
@keyframes alertSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* Inline <i class="bi-..."> icons are used everywhere — suppress ::before pseudo to avoid double icon.
   Fallback: alerts with no inline icon (has(> i.bi) is false) still get the pseudo mask. */
.alert::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--alert-icon, none) center / contain no-repeat;
          mask: var(--alert-icon, none) center / contain no-repeat;
}
.alert:not([class*="alert-"])::before,
.alert:has(> i.bi)::before,
.alert:has(> span > i.bi)::before { display: none; }
/* Flash-message body: grow to fill available width, shrink cleanly on narrow screens */
.alert > .alert-msg { flex: 1 1 auto; min-width: 0; }
/* Flash banner container (base.html + login.html): stack multiple alerts, scoped margin */
.flash-container { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.flash-container:empty { display: none; }
/* Auto-dismiss countdown bar — sits at the bottom of each flash alert,
   shrinks from 100% to 0% over the alert's auto-dismiss duration. Hovering
   the alert pauses it (handled in JS). */
.flash-container .alert { position: relative; overflow: hidden; }
.flash-countdown {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  pointer-events: none;
}
.flash-countdown-fill {
  height: 100%;
  width: 100%;
  background: currentColor;
  opacity: 0.45;
}
.alert-success {
  background: var(--success-dim); color: var(--success-text);
  --alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.97 5.26-4.5 5.5a.75.75 0 0 1-1.11.06l-2.25-2.25a.75.75 0 0 1 1.06-1.06l1.68 1.67 3.97-4.85a.75.75 0 1 1 1.15.93z'/%3e%3c/svg%3e");
}
.alert-danger  {
  background: var(--danger-dim); color: var(--danger-text);
  --alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.9.9 0 0 0-.9.9v3.7a.9.9 0 1 0 1.8 0V4.9A.9.9 0 0 0 8 4zm0 7a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3e%3c/svg%3e");
}
.alert-warning {
  background: var(--warning-dim); color: var(--warning-text);
  --alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M7.002 3a1 1 0 1 1 2 0v3.5a1 1 0 1 1-2 0V3zM8 11.5a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5zM6.956 1.478a1.5 1.5 0 0 1 2.588 0l5.952 10.3a1.5 1.5 0 0 1-1.294 2.222H2.298a1.5 1.5 0 0 1-1.294-2.222l5.952-10.3z'/%3e%3c/svg%3e");
}
.alert-info    {
  background: var(--info-dim); color: var(--info-text);
  --alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-.5 8.5a.5.5 0 0 1-1 0V7a.5.5 0 0 1 1 0v6z'/%3e%3c/svg%3e");
}
/* Dismissible alerts — close button inline at the end (not absolute) */
.alert-dismissible { padding-right: 1.1rem; }
.alert-dismissible .btn-close {
  position: static;
  margin-left: auto;
  padding: 0;
  flex-shrink: 0;
  background-color: transparent;
}
.alert-dismissible .btn-close:hover { background-color: color-mix(in srgb, currentColor 12%, transparent); }

/* ── Bootstrap Tooltips — iOS tooltip pill ── */
/* Consolidated: single source of truth. Later overrides at L4140 removed.   */
.tooltip-inner {
  background: var(--gray-900);
  color: var(--surface);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.1px;
  box-shadow: var(--shadow-md);
  max-width: 240px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tooltip .tooltip-arrow::before { border-top-color: var(--gray-900); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--gray-900); }
[data-theme="dark"] .tooltip-inner { background: var(--gray-200); color: var(--text-primary); }
[data-theme="dark"] .tooltip .tooltip-arrow::before { border-top-color: var(--gray-200); }
[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--gray-200); }

/* ── Progress bars — Apple thin indicator ── */
.progress {
  height: 6px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar {
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar.bg-success { background: var(--success) !important; }
.progress-bar.bg-danger  { background: var(--danger) !important; }
.progress-bar.bg-warning { background: var(--warning) !important; }
.progress-bar.bg-info    { background: var(--info) !important; }

/* ── Modal backdrop — macOS blur ── */
.modal-backdrop {
  background: rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.modal-backdrop.show { opacity: 1; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.5); }

/* ── Filter bar — unified compact filter row for list pages ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.6rem 1rem;
  background: color-mix(in srgb, var(--gray-50) 60%, transparent);
  border-bottom: 1px solid var(--border-muted);
  border-radius: 0;
  flex-wrap: wrap;
  position: relative;
}

/* ── Month Stepper — primary period navigation on financials page ── */
.month-stepper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.month-stepper-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-primary);
  min-width: 0;
  padding: 0 0.25rem;
  text-align: center;
}
.month-stepper-month { white-space: nowrap; }
/* Inline "today" reset button (round arrow), shown beside the month label
   when the user is browsing a non-current month. */
.month-stepper-today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-dim);
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}
.month-stepper-today:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); transform: rotate(-30deg); }
.month-stepper-today .bi { font-size: 0.85em; }
.month-stepper-label .bi-calendar3 { color: var(--accent); opacity: 0.85; }
.month-stepper-month { font-variant-numeric: tabular-nums; letter-spacing: 0.1px; }
.month-step-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
}
.month-step-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
}

/* ── Custom-range disclosure ── */
.custom-range-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  user-select: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.custom-range-details > summary::-webkit-details-marker { display: none; }
.custom-range-details > summary:hover { color: var(--text-secondary); background: var(--gray-100); }
.custom-range-details[open] > summary { color: var(--text-primary); }
.custom-range-summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.7em;
  transition: transform var(--transition-fast);
}
.custom-range-details[open] .custom-range-summary::before { transform: rotate(90deg); }
/* If filter-bar sits inside a section-card.p-0 directly after period chips,
   give it a thin top separator so the two don't blend into one grey block. */
.section-card > .filter-bar { border-top: 1px solid var(--border-muted); }
.section-card > .no-print + .filter-bar,
.section-card > .period-chips-row + .filter-bar { margin-top: 0.25rem; }
.filter-date { max-width: 140px; }
/* Cash-flow Transfer modal: from-select · swap-button · to-select */
.cf-transfer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: end;
}
.cf-swap-btn { margin-bottom: 0.15rem; }
.filter-bar label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 2px 0 6px;
  white-space: nowrap;
}
.filter-bar label:first-child { margin-left: 0; }
.filter-bar .form-control-sm {
  height: 30px;
  font-size: var(--text-xs);
  max-width: 128px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
}
.filter-bar .btn-sm,
.filter-bar .btn {
  height: 30px;
  font-size: var(--text-xs);
  padding: 0 10px;
  line-height: 1;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.filter-bar .ms-auto { margin-left: auto !important; }

/* ── Table toolbar — unified compact header for every data table ── */
.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.9rem;
  min-height: 40px;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.section-card.p-0 > .table-toolbar:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid var(--border-muted);
  background: var(--surface);
}
.table-toolbar h2, .table-toolbar h3, .table-toolbar h4, .table-toolbar h5, .table-toolbar h6,
.table-toolbar > span.fw-semibold,
.table-toolbar > .toolbar-title {
  margin: 0;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
  padding: 0;
  border-bottom: none;
  line-height: 1.35;
}
.table-toolbar h2 i, .table-toolbar h3 i, .table-toolbar h4 i, .table-toolbar h5 i, .table-toolbar h6 i,
.table-toolbar > span.fw-semibold > i,
.table-toolbar > .toolbar-title > i {
  color: var(--accent);
  opacity: 0.85;
  font-size: 0.95em;
}
/* Row-count / inline pills inside the toolbar title render a half-step smaller */
.table-toolbar > span.fw-semibold .badge,
.table-toolbar h2 .badge, .table-toolbar h3 .badge, .table-toolbar h4 .badge,
.table-toolbar h5 .badge, .table-toolbar h6 .badge,
.table-toolbar > span.fw-semibold .status-pill,
.table-toolbar h2 .status-pill, .table-toolbar h3 .status-pill, .table-toolbar h4 .status-pill,
.table-toolbar h5 .status-pill, .table-toolbar h6 .status-pill {
  font-size: 0.64rem;
  padding: 1px 7px;
}
/* ─── Canonical right-side controls group ─────────────────────────────────
   Every page's table-toolbar should look like:
     <div class="table-toolbar">
       <div class="toolbar-title">...</div>
       <div class="toolbar-controls">
         [optional] .segmented / .seg-tabs / .btn-group    (filter pills)
         [optional] <select class="form-select form-select-sm filter-select">
         [optional] <span class="toolbar-divider"></span>  (visual separator)
         [optional] .search-field                          (search input)
         [optional] buttons / links                        (actions)
       </div>
     </div>
   .toolbar-controls is anchored to the right, wraps gracefully on narrow viewports,
   and holds all interactive controls. Legacy .d-flex and .toolbar-actions
   selectors are preserved as aliases so existing markup keeps working.
*/
.table-toolbar > .d-flex,
.table-toolbar .toolbar-actions,
.table-toolbar > .toolbar-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;          /* anchor to the right within the flex row */
  min-width: 0;
  justify-content: flex-end;
}

/* Thin vertical divider between filter groups inside .toolbar-controls */
.toolbar-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 0.25rem;
  align-self: center;
  flex-shrink: 0;
}

/* Keep filter-select tight and consistent inside toolbar-controls */
.table-toolbar .filter-select {
  min-width: 130px;
  max-width: 180px;
}
.table-toolbar .search-box {
  width: 180px;
  height: 28px;
  font-size: var(--text-sm);
  padding: 0 10px 0 26px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  background: var(--gray-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.868-3.834zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z' fill='%238e8e93'/%3E%3C/svg%3E") no-repeat 9px center;
  outline: none;
  color: var(--text-primary);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.table-toolbar .search-box::placeholder { color: var(--text-tertiary); }
.table-toolbar .search-box:hover { background-color: var(--gray-200); }
.table-toolbar .search-box:focus {
  background-color: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* Style the native clear (×) button that appears for type="search" */
.table-toolbar .search-box::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 14px;
  width: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--gray-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / 10px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}
.table-toolbar .search-box::-webkit-search-cancel-button:hover { opacity: 1; }

/* ── Section card zero-padding variant ── */
.section-card.p-0 { padding: 0; }
.section-card.p-0 .table-responsive {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  /* Both axes scroll. The earlier `overflow-y: hidden` (intended to preserve
     rounded bottom corners) silently ate every row beyond the 520px cap on
     pages with long tables — users couldn't access the data. The thin
     scrollbar from .table-responsive::-webkit-scrollbar (5px, mostly
     transparent) keeps the rounded corner aesthetic acceptable. */
  overflow-x: auto;
  overflow-y: auto;
}
.section-card.p-0 tfoot tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-md); }
.section-card.p-0 tfoot tr:last-child td:last-child  { border-radius: 0 0 var(--radius-md) 0; }
.section-card.p-0 .pagination-wrap { padding: 0.75rem 1.25rem; }
/* .pagination-wrap consolidated — full definition at L4222 */

/* ── Icon-only action buttons ── */
.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-smooth);
  background: transparent;
}
.btn-icon-muted  { color: var(--text-tertiary); border-color: var(--border); }
.btn-icon-muted:hover  { background: var(--gray-100); color: var(--text-secondary); }
.btn-icon-edit   { color: var(--info); border-color: var(--info-dim); }
.btn-icon-edit:hover   { background: var(--info-dim); color: var(--info-hover); }
.btn-icon-danger { color: var(--danger); border-color: var(--danger-dim); }
.btn-icon-danger:hover { background: var(--danger-dim); color: var(--danger-hover); }
.btn-icon:active { transform: scale(0.92); }
.table-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Segmented tab control — iOS UISegmentedControl ── */
.seg-tabs {
  display: inline-flex;
  background: var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 0;
  border: none;
}
.seg-tabs .seg-link {
  border-radius: calc(var(--radius-sm) - 2px);
  padding: 5px 14px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    background-color 220ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 260ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 120ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  line-height: 1.5;
  position: relative;
}
.seg-tabs .seg-link + .seg-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--gray-400);
  opacity: 0.5;
  transition: opacity 180ms ease;
}
.seg-tabs .seg-link.active + .seg-link::before,
.seg-tabs .seg-link:hover + .seg-link::before,
.seg-tabs .seg-link.active::before { opacity: 0; }
.seg-tabs .seg-link:hover:not(.active) {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
}
.seg-tabs .seg-link.active {
  background: var(--surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.06),
    0 1px 2px rgba(0,0,0,0.08),
    inset 0 0 0 0.5px color-mix(in srgb, var(--border) 60%, transparent);
  animation: segPillPop 240ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.seg-tabs .seg-link:active:not(.active) { transform: scale(0.96); }
.seg-tabs .seg-link.active:active { transform: scale(0.98); }
@keyframes segPillPop {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* Alias — a more modern name for future use (same visual) */
.segmented { /* use like .seg-tabs */ }

/* ── Pagination — Apple rounded chips ── */
.pagination { gap: 2px; }
.page-link {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  min-width: 30px;
  text-align: center;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), transform 100ms ease;
}
.page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--gray-100);
  color: var(--text-primary);
  border-color: transparent;
}
.page-item:not(.disabled) .page-link:active { transform: scale(0.92); }
.page-item.disabled .page-link { color: var(--gray-300); background: transparent; }

/* ── Table footer total row ── */
.table tfoot tr { background: var(--gray-50); }
.table tfoot td {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-top: 2px solid var(--border);
  padding: 0.7rem 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ── Empty state — Apple tile icon ── */
.empty-state {
  padding: 2.75rem 1.25rem;
  text-align: center;
  color: var(--text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
.empty-state > i {
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  color: var(--accent);
  margin-bottom: 0.35rem;
  opacity: 0.9;
  animation: emptyPulse 3s ease-in-out infinite;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
}
.empty-state p {
  font-size: var(--text-sm);
  margin: 0;
  letter-spacing: 0.1px;
  max-width: 32ch;
}
.empty-state p + p { color: var(--text-quaternary, var(--text-tertiary)); font-size: 0.78rem; }
.empty-state > .btn { margin-top: 0.75rem; }
@keyframes emptyPulse { 0%,100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* Suppress hover highlight on rows containing empty states */
.table-hover tbody tr:has(.empty-state):hover { background: transparent; }

/* ── Row hover-actions — edit/delete fade in on row hover for clean list views ── */
/* Apply to .table.table-row-actions — actions sit inside td.row-actions */
.table-row-actions td.row-actions,
.table-row-actions th.row-actions { text-align: right; white-space: nowrap; width: 1%; }
.table-row-actions td.row-actions .btn-group,
.table-row-actions td.row-actions .btn-icon,
.table-row-actions td.row-actions .btn {
  opacity: 0;
  transform: translateX(4px);
  transition:
    opacity 150ms var(--ease-out, ease-out),
    transform 180ms var(--ease-out, ease-out);
}
.table-row-actions tbody tr:hover td.row-actions .btn-group,
.table-row-actions tbody tr:hover td.row-actions .btn-icon,
.table-row-actions tbody tr:hover td.row-actions .btn,
.table-row-actions tbody tr:focus-within td.row-actions .btn-group,
.table-row-actions tbody tr:focus-within td.row-actions .btn-icon,
.table-row-actions tbody tr:focus-within td.row-actions .btn {
  opacity: 1;
  transform: translateX(0);
}
/* Keyboard fallback — never hide on touch devices where :hover is flaky */
@media (hover: none) {
  .table-row-actions td.row-actions .btn-group,
  .table-row-actions td.row-actions .btn-icon,
  .table-row-actions td.row-actions .btn {
    opacity: 1;
    transform: none;
  }
}

/* ── Sidebar footer ── */
.sidebar-footer {
  flex-shrink: 0;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sidebar-footer .btn {
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  flex: 1;
  white-space: nowrap;
  transition: all var(--transition-smooth);
}
.btn-sidebar-ghost {
  background: var(--gray-100);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-sidebar-ghost:hover { background: var(--gray-200); color: var(--text-primary); }
.btn-sidebar-logout {
  background: var(--danger-dim);
  color: var(--danger);
  border: 1px solid rgba(239,68,68,0.15);
}
.btn-sidebar-logout:hover { background: rgba(239,68,68,0.15); color: var(--danger-dark); }

/* ══════════════════════════════════════════════════════════════
   Mobile bottom tab bar (iOS)
   ══════════════════════════════════════════════════════════════ */
.tab-bar {
  display: none;
  position: fixed;
  left: calc(var(--tabbar-float-inset) + env(safe-area-inset-left));
  right: calc(var(--tabbar-float-inset) + env(safe-area-inset-right));
  bottom: calc(env(safe-area-inset-bottom) + var(--tabbar-float-gap));
  height: auto;
  background: var(--material-thick, rgba(250,250,252,0.94));
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-full);
  overflow: hidden; /* clip backdrop-filter to the rounded corners (iOS) */
  box-shadow: 0 8px 28px rgba(40,32,18,0.16), 0 2px 8px rgba(40,32,18,0.08);
  z-index: var(--z-tabbar);
}
/* (Tab-bar backdrop-filter is set by the Liquid-Glass @supports rule near
   the end of this file — blur(32px); the older blur(20px) block was removed
   to avoid a conflicting, overridden declaration.) */
.tab-bar-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: 58px;
}
.tab-link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  gap: 3px;
  padding: 6px 2px 4px;
  border: none;
  background: transparent;
  transition: color var(--transition-fast);
  min-width: 0;
  text-align: center;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.tab-link > i, .tab-link > .tab-link-label { position: relative; z-index: 1; }
.tab-link i { font-size: 1.25rem; line-height: 1; }
.tab-link-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-link:hover { color: var(--text-secondary); }
.tab-link.active {
  color: var(--accent);
  position: relative;
}
/* iOS 26 raised capsule behind the active tab's icon + label */
.tab-link::before {
  content: "";
  position: absolute;
  inset: 3px 8%;
  z-index: 0;
  border-radius: var(--radius-full);
  background: var(--tabbar-active-bg);
  border: 1px solid var(--glass-border-soft);
  box-shadow: 0 2px 6px rgba(40,32,18,0.14), var(--glass-highlight);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  pointer-events: none;
}
.tab-link.active::before { opacity: 1; transform: scale(1); }
.tab-link.active:hover { color: var(--accent-hover); }
.tab-link:active { transform: scale(0.96); }
.tab-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-ring);
  border-radius: var(--radius-sm);
}
/* Ensure each tab meets 44x44 minimum touch target */
.tab-link { min-height: 48px; }
/* Notification dot on a tab (pending signals / due items) */
.tab-link .tab-dot {
  position: absolute;
  top: 6px;
  left: calc(50% + 0.34rem);
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
  z-index: 2;
}

/* "More" menu (offcanvas-bottom) — iOS sheet */
.more-menu.offcanvas-bottom {
  height: auto;
  max-height: 82vh;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  border: none;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  padding-bottom: env(safe-area-inset-bottom);
}
.more-menu .more-handle {
  width: 36px;
  height: 5px;
  background: var(--gray-300);
  border-radius: 3px;
  margin: 8px auto 4px;
  transition: background-color var(--transition-fast), width var(--transition-fast);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.more-menu .more-handle:hover { background: var(--gray-400); width: 48px; }
.more-menu .more-handle:active { background: var(--gray-400); }
[data-theme="dark"] .more-menu .more-handle { background: var(--gray-400); }
[data-theme="dark"] .more-menu .more-handle:hover { background: var(--gray-500); }
.more-menu .offcanvas-header {
  padding: 0.5rem 1.25rem 0.25rem;
  border-bottom: none;
}
.more-menu .offcanvas-title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
}
.more-menu .offcanvas-body {
  padding: 0.5rem 0.75rem 1rem;
  overscroll-behavior-y: contain;
}
.more-menu-section {
  padding: 0.75rem 0.75rem 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.more-menu .nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  color: var(--text-primary);
  border-radius: 10px;
  font-weight: 500;
  font-size: var(--text-md);
  margin: 1px 0;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.more-menu .nav-link:hover { background: var(--gray-100); color: var(--text-primary); }
.more-menu .nav-link:active { background: var(--accent-dim); transform: scale(0.985); }
.more-menu .nav-link.active { background: var(--accent-dim); color: var(--accent); }
.more-menu .nav-link i {
  font-size: 1.15rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 7px;
  flex-shrink: 0;
}
.more-menu .nav-link.active i { background: var(--accent); color: var(--text-inverse); }
.more-menu .more-footer {
  display: flex;
  gap: 8px;
  padding: 12px 14px 6px;
  border-top: 1px solid var(--border-muted);
  margin-top: 8px;
}
.more-menu .more-footer .btn { flex: 1; min-height: 48px; border-radius: var(--btn-radius); font-weight: var(--btn-weight); }

/* ── Report table row highlights (muted versions) ── */
.report-row-revenue { background: var(--success-dim); }
.report-row-expense { background: var(--danger-dim); }
.report-row-net     { background: var(--info-dim); }
.report-row-header  { background: var(--gray-50); font-weight: 600; }
.report-row-total   { background: var(--gray-100); font-weight: 700; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .sidebar { display: none !important; }
  /* Show the new bottom tab bar */
  .tab-bar { display: block; }
  html { scroll-padding-bottom: calc(var(--mobile-tabbar-height) + 24px); }
  body { padding-bottom: var(--mobile-tabbar-height); }
  .main-content {
    margin-left: 0;
    /* include left/right safe-area insets so content clears the notch in landscape */
    padding:
      0.9rem
      calc(0.75rem + env(safe-area-inset-right))
      calc(var(--mobile-tabbar-height) + 2rem)
      calc(0.75rem + env(safe-area-inset-left));
  }
  .main-content > :last-child {
    margin-bottom: calc(var(--mobile-tabbar-height) + 1rem);
  }
  .admin-override-bar {
    margin-bottom: 0.75rem;
  }
  .admin-override-summary {
    min-height: 38px;
    padding: 0.4rem 0.65rem;
  }
  .admin-override-hint {
    display: none;
  }
  .admin-override-body {
    padding: 0 0.65rem 0.65rem;
    grid-template-columns: 1fr auto;
  }
  .admin-override-body .form-label,
  .admin-override-body .form-control,
  .admin-override-body .text-muted.small {
    grid-column: 1 / -1;
  }

  /* KPI cards */
  .kpi-card { padding: 0.875rem; }
  .kpi-card .value { font-size: 1.2rem; }
  .kpi-card .label { font-size: 0.68rem; }

  /* Page header + action button row */
  .page-header { font-size: 1.25rem; margin-bottom: 0.9rem; }
  .d-flex.justify-content-between.align-items-center.mb-4 {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 0.5rem;
  }
  .d-flex.justify-content-between.align-items-center.mb-4 .page-header { flex: 1 1 auto; min-width: 0; }
  .d-flex.justify-content-between.align-items-center.mb-4 .btn { flex-shrink: 0; }

  /* Section cards */
  .section-card { padding: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 0.9rem; }
  .section-card h5 { padding-bottom: 0.5rem; }

  /* Tables — scrollable with constrained height (mobile cap is vh-relative) */
  .table thead th, .table tbody td { font-size: 0.72rem; padding: 0.35rem 0.5rem; white-space: nowrap; }
  .table-responsive,
  .section-card.p-0 .table-responsive { max-height: 62vh; }
  .table-responsive.is-expanded { max-height: none; }
  .table-responsive .table thead th { position: sticky; top: 0; z-index: var(--z-sticky); box-shadow: 0 1px 0 var(--border); }

  /* Action buttons — touch-friendly sizing (WCAG 2.5.8 minimum 36px) */
  .btn-icon { width: 36px; height: 36px; font-size: var(--text-sm); }
  .table-actions { gap: 3px; }

  /* Filter bar — wraps cleanly */
  .filter-bar {
    gap: 6px;
    padding: 0.6rem 0.75rem;
  }
  .filter-bar .form-control-sm {
    max-width: none;
    flex: 1 1 100px;
    height: 36px;
  }
  .filter-bar .btn-sm,
  .filter-bar .btn {
    height: 36px;
    padding: 0 12px;
  }
  .filter-bar label { margin: 0; }
  .filter-bar .ms-auto {
    display: flex;
    flex-basis: 100%;
    justify-content: flex-end;
  }

  /* Table toolbar — mobile stacks search below heading */
  .table-toolbar {
    padding: 0.4rem 0.7rem;
    gap: 0.4rem;
    min-height: 36px;
  }
  .table-toolbar .search-box { width: 100%; max-width: none; order: 2; height: 32px; }
  .table-toolbar h2, .table-toolbar h3, .table-toolbar h4,
  .table-toolbar h5, .table-toolbar h6,
  .table-toolbar > span.fw-semibold,
  .table-toolbar > .toolbar-title { order: 1; font-size: 0.78rem; }
  .table-toolbar .d-flex,
  .table-toolbar > .toolbar-controls { width: 100%; order: 3; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
  .table-toolbar .form-select-sm,
  .table-toolbar .filter-select { flex: 1; min-width: 0; max-width: none; }
  .table-toolbar .search-field { flex: 1 1 100%; order: 4; }
  .toolbar-divider { display: none; }

  /* Modals — iOS bottom-sheet feel on mobile */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
  }
  /* Slide up from the bottom edge (native sheet) instead of Bootstrap's top-fade */
  .modal.fade .modal-dialog {
    transform: translateY(100%);
    transition: transform 0.32s var(--ease-out);
  }
  .modal.show .modal-dialog { transform: translateY(0); }
  .modal-content {
    border: none;
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 94vh;
    min-height: 60vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    position: relative;
  }
  /* Drag handle at top of sheet */
  .modal-content::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 5px;
    background: var(--gray-300);
    border-radius: 3px;
    z-index: 3;
    pointer-events: none;
  }
  .modal-header { padding-top: 1.5rem; }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; scroll-padding-top: 24px; }
  .modal-body .row.g-3 > [class*="col-md"] { flex: 0 0 100%; max-width: 100%; }
  .modal-body .row.g-3 > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  .modal-body .row.g-2 > .col-md-2,
  .modal-body .row.g-2 > .col-md-3 { flex: 0 0 50%; max-width: 50%; }
  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: var(--z-modal-foot);
    gap: 8px;
  }
  .modal-footer .btn {
    flex: 1;
    min-height: 44px;
    justify-content: center;
  }
  .modal-footer .btn:active { transform: scale(0.98); }

  /* General button adjustments */
  .btn-sm { font-size: var(--text-xs); padding: 0.35rem 0.65rem; min-height: 36px; display: inline-flex; align-items: center; }
  .d-flex.gap-2 { flex-wrap: wrap; }
  /* 16px stops iOS focus-zoom; 44px meets the touch-target minimum */
  .form-control, .form-select, .form-control-sm { font-size: 16px; min-height: 44px; }
  .d-flex.gap-1 { gap: 0.25rem !important; }

  /* Pagination */
  .pagination { flex-wrap: wrap; }
  .page-link { padding: 0.3rem 0.5rem; font-size: 0.73rem; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
  .pagination-wrap { flex-direction: column; align-items: center; gap: 0.5rem; }

  /* Badges in tables — tighter on mobile */
  .badge { font-size: 0.68rem; padding: 2px 7px; }

  /* Batch modals */
  #batchSaleTable th, #batchSaleTable td,
  #batchPurchTable th, #batchPurchTable td { font-size: 0.7rem; padding: 0.25rem 0.3rem; }

  canvas { max-height: 220px !important; }
}

@media (max-width: 400px) {
  .kpi-card .value { font-size: 1.05rem; }
  .main-content { padding: 0.9rem 0.5rem calc(var(--mobile-tabbar-height) + 2rem); }
  .table thead th, .table tbody td { font-size: 0.7rem; padding: 0.22rem 0.28rem; }
  .modal-body .row.g-3 > .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  .modal-body .row.g-2 > .col-md-2,
  .modal-body .row.g-2 > .col-md-3 { flex: 0 0 100%; max-width: 100%; }
  .filter-bar { padding: 0.5rem; gap: 4px; }
  .page-header { font-size: 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════
   Utility Classes (extracted from inline styles)
   ══════════════════════════════════════════════════════════════ */

/* Dashboard net worth banner — Apple widget style (light surface + tinted tiles) */
.nw-banner {
  background: var(--surface);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
}
.nw-banner-label {
  color: var(--text-tertiary);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.nw-banner-tile {
  background: var(--gray-100);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
}
.nw-banner-tile-hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent),
    color-mix(in srgb, var(--accent) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.nw-banner-sublabel {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.nw-banner-value {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  line-height: 1.15;
}
.nw-banner-hero {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  line-height: 1.1;
}
.nw-banner-detail {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  line-height: 1.35;
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Today's P&L stat chips */
.pl-stat { text-align: center; }
.pl-stat .kpi-inline-label { display: block; margin-bottom: 1px; }
.pl-stat strong {
  font-size: var(--text-sm);
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.01em;
}
.pl-stat-highlight strong { font-size: 1.1rem; }

/* "View all" action links */
.btn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-smooth);
  margin-top: 0.75rem;
}
.btn-view-all:hover { background: var(--accent-dim); color: var(--accent-hover); }

/* Inline label pattern (P&L, KPI sub-labels) */
.kpi-inline-label { font-size: 0.72rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }

/* Field label pattern (project detail, metadata) */
.field-label { font-size: 0.72rem; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; letter-spacing: 0.3px; }

/* Backup page */
.backup-hero-icon { font-size: 2.5rem; }
.backup-description { font-size: 0.85rem; }
.backup-step-text { font-size: 0.82rem; }

/* Section card with accent left border */
.section-card-accent { border-left: 3px solid var(--accent); }

/* Sub-row text (networth, etc.) */
.sub-row { font-size: 0.8rem; }

/* Entity name links inside table rows — inherit row colour, underline on hover */
.table-entity-link {
  color: inherit;
  text-decoration: none;
  transition: text-decoration 120ms ease;
}
.table-entity-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Wallet value sizing */
.wallet-value { font-size: 1.1rem; }
/* In-flow / out-flow indicators on wallet cards — small font, tabular nums for
   clean column alignment, wraps cleanly when the card is too narrow for one line. */
.wallet-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
}

/* Channel & nav size mods — auxiliary modifiers for .badge / .status-pill */
.badge-channel,
.status-pill.badge-channel { font-size: 0.75rem; }
.badge-nav,
.status-pill.badge-nav { font-size: 0.6rem; padding: 2px 5px; }

/* Plain channel text (used for default "Cash" channel to reduce visual noise) */
.channel-plain {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.channel-plain > i { font-size: 0.85em; opacity: 0.75; }

/* Dimmed muted text — softer than .text-muted for placeholder em-dashes */
.text-muted-dim {
  color: var(--text-tertiary, color-mix(in srgb, var(--text-secondary) 55%, transparent));
  font-weight: 400;
  opacity: 0.7;
}

/* Bootstrap text-* overrides — align with design system colors */
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

/* Semantic color utilities (tied to CSS variables, not Bootstrap) */
.text-var-success { color: var(--success); }
.text-var-danger  { color: var(--danger); }
.text-var-accent  { color: var(--accent); }
.text-var-brand   { color: var(--brand); }

/* Section card accent variants */

/* Wallet KPI card top-border variants */
.kpi-card-border-success { border-top: 2px solid var(--success); }
.kpi-card-border-accent  { border-top: 2px solid var(--accent); }
.kpi-card-border-brand   { border-top: 2px solid var(--brand); }
.kpi-card-border-warning { border-top: 2px solid var(--warning); }
.kpi-card-border-info    { border-top: 2px solid var(--info); }
.kpi-card-border-danger  { border-top: 2px solid var(--danger); }

/* Pulse strip sub-link — inherits pulse-sub sizing, adds hover underline */
.pulse-sub-link:hover { text-decoration: underline !important; opacity: 0.85; }

/* Per-channel chips inside KPI sub-line */
.kpi-channel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.kpi-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: var(--gray-100, rgba(0,0,0,0.05));
  color: var(--text-secondary);
  white-space: nowrap;
}
.kpi-channel-chip i { font-size: 0.75em; opacity: 0.8; }

/* Filter / toolbar widths */
.search-wide   { width: 220px; }
.filter-select { width: auto; }


/* Journal entry column widths */
.je-col-account { width: 30%; }
.je-col-amount  { width: 20%; }
.je-col-desc    { width: 25%; }
.je-col-action  { width: 5%; }

/* Batch table column widths (sales + purchases) */
.batch-col-product { width: 36%; }
.batch-col-qty     { width: 10%; }
.batch-col-price   { width: 14%; }
.batch-col-empties { width: 11%; }
.batch-col-total   { width: 14%; }
.batch-col-action  { width: 5%; }

/* Report code column */
.report-col-code { width: 80px; }

/* ══════════════════════════════════════════════════════════════
   Round 5 polish — Apple forms, spinners, inline feedback
   ══════════════════════════════════════════════════════════════ */

/* iOS-refined loading spinner (Bootstrap .spinner-border) */
.spinner-border {
  border-width: 2.5px;
  border-color: var(--gray-200);
  border-right-color: var(--accent);
  animation-duration: 0.7s;
  vertical-align: -0.15em;
}
.spinner-border-sm { border-width: 2px; width: 1rem; height: 1rem; }
.spinner-border.text-success { border-right-color: var(--success); }
.spinner-border.text-danger  { border-right-color: var(--danger); }
.spinner-border.text-warning { border-right-color: var(--warning); }
.spinner-border.text-info    { border-right-color: var(--info); }
[data-theme="dark"] .spinner-border { border-color: var(--gray-100); border-right-color: var(--accent); }

/* Apple ellipsis spinner utility */
.spinner-ios {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinnerIOS 0.75s linear infinite;
  vertical-align: -0.125em;
}
@keyframes spinnerIOS { to { transform: rotate(360deg); } }

/* Textarea — match Apple input aesthetic, resize handle polish */
textarea.form-control {
  min-height: 84px;
  line-height: 1.45;
  resize: vertical;
}
textarea.form-control::-webkit-resizer {
  background-color: transparent;
}

/* Input number — hide spinner arrows on Webkit for cleaner numeric fields */
input[type="number"].form-control::-webkit-inner-spin-button,
input[type="number"].form-control::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"].form-control { -moz-appearance: textfield; }

/* File input — Apple aesthetic, button area restyled */
.form-control[type="file"] { padding: 0.3rem 0.6rem; }
.form-control[type="file"]::file-selector-button {
  background: var(--gray-100);
  border: none;
  padding: 0.35rem 0.75rem;
  margin: -0.3rem 0.75rem -0.3rem -0.6rem;
  border-right: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast);
  cursor: pointer;
}
.form-control[type="file"]::file-selector-button:hover { background: var(--gray-200); }

/* Invalid / valid input feedback — iOS-tinted.
   !important is required to beat Bootstrap's validation rule:
   `.form-select.is-invalid:not([multiple]):not([size])` at (0,4,0) specificity.
   Without it, Bootstrap ships padding-right:4.125rem + a red-X background-image,
   which leaves a blank wedge on the right edge of invalid selects (our chevron is
   suppressed, Bootstrap's icon is also suppressed by our background-image:none,
   but the reserved padding space remains). */
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--danger) !important;
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent) !important;
}
.form-control.is-valid, .form-select.is-valid {
  border-color: var(--success) !important;
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.form-control.is-valid:focus, .form-select.is-valid:focus {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent) !important;
}
.invalid-feedback { font-size: var(--text-xs); color: var(--danger); font-weight: 500; margin-top: 0.25rem; }
.valid-feedback   { font-size: var(--text-xs); color: var(--success-text); font-weight: 500; margin-top: 0.25rem; }

/* Native :invalid — only after user interaction (skip blank required on load).
   !important needed to beat Bootstrap's :user-invalid / :invalid variants (see above).
   Also suppress Bootstrap's red-X / green-check bg-image icons on BOTH form-control
   and form-select — our design uses border-color alone as the validation signal. */
.form-control:user-invalid,
.form-select:user-invalid,
.form-check-input:user-invalid {
  border-color: var(--danger) !important;
}
.form-control:user-invalid {
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.form-select:user-invalid {
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.form-control:user-invalid:focus,
.form-select:user-invalid:focus {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent) !important;
}
/* After submit attempt via .was-validated, show native invalid state */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid { border-color: var(--danger) !important; }
.was-validated .form-control:invalid {
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.was-validated .form-select:invalid {
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent) !important;
}
.was-validated .form-control:valid,
.was-validated .form-select:valid { border-color: var(--success) !important; }
/* Suppress Bootstrap's green-checkmark bg-image on valid form-controls */
.was-validated .form-control:valid {
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.form-control:user-valid {
  border-color: var(--success) !important;
  background-image: none !important;
  padding-right: 0.75rem !important;
}
/* On valid selects: keep our chevron visible (dropdown affordance) but replace
   Bootstrap's 2-layer (chevron + green-checkmark) background with our single chevron,
   and restore the 2rem right-padding that makes room for the chevron. */
.was-validated .form-select:valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-size: 10px 10px !important;
  background-position: right 0.6rem center !important;
  background-repeat: no-repeat !important;
  padding-right: 2rem !important;
}
[data-theme="dark"] .was-validated .form-select:valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0a8b4'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}
.form-control:user-valid,
.form-select:user-valid { border-color: var(--success) !important; }
.form-select:user-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-size: 10px 10px !important;
  background-position: right 0.6rem center !important;
  background-repeat: no-repeat !important;
  padding-right: 2rem !important;
}
[data-theme="dark"] .form-select:user-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0a8b4'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}

/* Input-group — flush Apple look */
.input-group-text {
  background: var(--gray-100);
  border-color: var(--border);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}
[data-theme="dark"] .input-group-text { background: var(--gray-100); }
/* Input-group icons — uniform optical alignment */
.input-group-text > .bi { font-size: 0.95em; line-height: 1; }
.input-group-text:first-child { border-right: 0; }
.input-group-text:last-child { border-left: 0; }
/* When a control inside input-group is :focus, lift the neighboring prefix/suffix border */
.input-group:focus-within .input-group-text {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--gray-100));
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
/* Validation color flow into attached prefix/suffix */
.input-group:has(.form-control.is-invalid) .input-group-text,
.input-group:has(.form-control:user-invalid) .input-group-text { border-color: var(--danger); color: var(--danger); }
.input-group:has(.form-control.is-valid) .input-group-text { border-color: var(--success); color: var(--success); }

/* ══════════════════════════════════════════════════════════════
   Round 6 polish — Apple lists, tabs, disclosure, sheets, toasts
   ══════════════════════════════════════════════════════════════ */

/* iOS segmented control — .nav-tabs container */
.nav-tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
  margin-bottom: 1rem;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item, .nav-tabs > li { flex-shrink: 0; }
.nav-tabs .nav-link { flex-shrink: 0; white-space: nowrap; }
.nav-tabs .nav-link {
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.35rem 0.9rem;
  margin: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-tabs .nav-link:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  border: none;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-xs);
  border: none;
}
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background: var(--gray-300); }
.tab-content { font-size: var(--text-sm); }

/* Bootstrap .nav-pills active state — repoint from --bs-primary blue to brand wine */
.nav-pills .nav-link {
  color: var(--text-secondary);
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-pills .nav-link:hover:not(.active) {
  background: var(--accent-dim);
  color: var(--accent);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--accent);
  color: var(--text-inverse);
}

/* ── Count sidecars inside pills ─────────────────────────────
   When a badge/pill is nested inside another pill (nav-tab,
   button, seg-link, toolbar-title), the pill-in-pill reads
   noisy. Strip the nested pill's background and tone it down
   to a muted inline number so it reads as secondary metadata,
   not a focal chip.
*/
.nav-tabs .nav-link .badge,
.btn .badge,
.seg-link .badge,
.segmented label .badge,
.nav-tabs .nav-link .status-pill,
.btn .status-pill,
.seg-link .status-pill,
.segmented label .status-pill {
  background: transparent !important;
  color: inherit;
  padding: 0 !important;
  margin-left: 0.35em !important;
  font-size: 0.85em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
  border: 0 !important;
  min-width: 0 !important;
  opacity: 0.7;
  vertical-align: baseline;
}
.nav-tabs .nav-link.active .badge,
.btn-brand .badge,
.btn-primary .badge,
.btn.active .badge,
.seg-link.active .badge,
.segmented input:checked + label .badge,
.nav-tabs .nav-link.active .status-pill,
.btn-brand .status-pill,
.btn-primary .status-pill,
.btn.active .status-pill,
.seg-link.active .status-pill,
.segmented input:checked + label .status-pill { opacity: 1; }

.toolbar-title .badge,
.toolbar-title .status-pill {
  background: var(--gray-100);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.75em;
  padding: 0.1em 0.5em;
  box-shadow: none;
  border: 0;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .toolbar-title .badge {
  background: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
  color: var(--text-secondary);
}

/* Offcanvas — generic Apple sheet (end/start/top variants) */
.offcanvas {
  background: var(--surface);
  color: var(--text-primary);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.offcanvas-end   { border-left: 1px solid var(--border); border-right: none; }
.offcanvas-start { border-right: 1px solid var(--border); border-left: none; }
.offcanvas-top   { border-bottom: 1px solid var(--border); border-top: none; }
.offcanvas-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-muted);
}
.offcanvas-title {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.2px;
}
.offcanvas-body { padding: 1rem 1.25rem; font-size: var(--text-sm); }

/* Scrollbar polish — add active state + smoother hover on all surfaces */
html::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  transition: background-color var(--transition-fast);
}
html::-webkit-scrollbar-thumb:active { background: var(--gray-500); }
.table-responsive::-webkit-scrollbar-thumb:active,
.sidebar::-webkit-scrollbar-thumb:active,
.sidebar-nav::-webkit-scrollbar-thumb:active { background: var(--gray-500); }
/* Firefox fallback — thin, theme-aware */
html { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
[data-theme="dark"] html { scrollbar-color: var(--gray-400) transparent; }

/* Modal / Offcanvas / Textarea scrollbar polish — macOS-style thin */
.modal-body,
.offcanvas-body,
textarea.form-control {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}
.modal-body::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar,
textarea.form-control::-webkit-scrollbar { width: 6px; height: 6px; }
.modal-body::-webkit-scrollbar-track,
.offcanvas-body::-webkit-scrollbar-track,
textarea.form-control::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb,
textarea.form-control::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
}
.modal-body::-webkit-scrollbar-thumb:hover,
.offcanvas-body::-webkit-scrollbar-thumb:hover,
textarea.form-control::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }
.modal-body::-webkit-scrollbar-thumb:active,
.offcanvas-body::-webkit-scrollbar-thumb:active,
textarea.form-control::-webkit-scrollbar-thumb:active { background: var(--gray-500); }
[data-theme="dark"] .modal-body,
[data-theme="dark"] .offcanvas-body,
[data-theme="dark"] textarea.form-control { scrollbar-color: var(--gray-400) transparent; }
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .offcanvas-body::-webkit-scrollbar-thumb,
[data-theme="dark"] textarea.form-control::-webkit-scrollbar-thumb { background: var(--gray-400); }
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .offcanvas-body::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] textarea.form-control::-webkit-scrollbar-thumb:hover { background: var(--gray-500); }

/* ══════════════════════════════════════════════════════════════
   Round 7 polish — Typography scale, keycaps, motion, micro-UX
   ══════════════════════════════════════════════════════════════ */

/* SF display-weight heading scale — universal */
h1, .h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; color: var(--text-primary); }
h2, .h2 { font-size: var(--text-xl);  font-weight: 700; letter-spacing: -0.4px; line-height: 1.2;  color: var(--text-primary); }
h3, .h3 { font-size: var(--text-lg);  font-weight: 600; letter-spacing: -0.3px; line-height: 1.25; color: var(--text-primary); }
h4, .h4 { font-size: var(--text-md);  font-weight: 600; letter-spacing: -0.2px; line-height: 1.3;  color: var(--text-primary); }
h5, .h5 { font-size: var(--text-base);font-weight: 600; letter-spacing: -0.1px; line-height: 1.35; color: var(--text-primary); }
h6, .h6 { font-size: var(--text-sm);  font-weight: 600; letter-spacing: 0;       line-height: 1.4;  color: var(--text-primary); }

/* Text utilities */
.lead { font-size: var(--text-md); font-weight: 400; color: var(--text-secondary); letter-spacing: -0.1px; line-height: 1.5; }
.text-caption {
  font-size: var(--text-xs); color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.text-mono { font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; font-variant-numeric: tabular-nums; }
.text-tabular { font-variant-numeric: tabular-nums; letter-spacing: -0.1px; }
.min-width-0 { min-width: 0; }

/* Auto-apply tabular-nums to right-aligned table cells — covers 95% of money
   columns without touching a single template. Dates rarely right-align in this
   codebase, so this is a safe blanket default. */
.table td.text-end,
.table th.text-end { font-variant-numeric: tabular-nums; letter-spacing: -0.1px; }

/* Money input — right-aligned tabular amounts for daily entry forms.
   Matches both explicit .money-input and any input with a currency-ish name
   or step so daily-entry forms inherit the right treatment automatically. */
.money-input,
input[inputmode="decimal"],
input[type="number"][step="0.01"],
input[name="amount"],
input[name="price"],
input[name="total"],
input[name="unit_price"],
input[name$="_amount"],
input[name$="_price"],
input[name$="_total"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
  letter-spacing: -0.1px;
}
/* Keep native spinner out of the way — it collides with right alignment */
.money-input::-webkit-outer-spin-button,
.money-input::-webkit-inner-spin-button,
input[inputmode="decimal"]::-webkit-outer-spin-button,
input[inputmode="decimal"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.money-input { -moz-appearance: textfield; }
/* Amount input with currency prefix — .input-group > span.input-group-text + input */
.input-group.amount-input-group > .input-group-text:first-child {
  background: var(--gray-100);
  color: var(--text-tertiary);
  font-weight: 500;
  border-right: none;
}
.input-group.amount-input-group > input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Period chips — unified quick-date filter row (Today / Week / Month / YTD) ── */
.period-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-muted);
}
.period-chips .period-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-weight: 500;
  padding: 5px 8px 5px 10px;
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.period-chips .period-chip,
.period-chips a.period-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border-radius: calc(var(--radius-sm) - 4px);
  text-decoration: none;
  border: none;
  line-height: 1.4;
  transition:
    color var(--transition-fast),
    background 200ms var(--ease-out, ease-out),
    box-shadow 220ms var(--ease-out, ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.period-chips .period-chip:hover:not(.active) {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}
.period-chips .period-chip.active,
.period-chips .period-chip[aria-current="true"] {
  color: var(--text-primary);
  background: var(--surface);
  font-weight: 600;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.05),
    0 1px 2px rgba(0,0,0,0.07),
    inset 0 0 0 0.5px color-mix(in srgb, var(--border) 55%, transparent);
}
.period-chips .period-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
@media (max-width: 600px) {
  .period-chips { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .period-chips::-webkit-scrollbar { display: none; }
}

/* Refined <hr> + optional labeled divider */
hr {
  border: none;
  border-top: 1px solid var(--border-muted);
  margin: 1.25rem 0;
  opacity: 1;
}
.divider {
  border: none;
  border-top: 1px solid var(--border-muted);
  margin: 1.25rem 0;
}
/* Apple keycap — <kbd> element with soft bevel */
kbd {
  display: inline-block;
  padding: 2px 6px;
  min-width: 20px;
  background: var(--surface);
  color: var(--text-primary);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 1px 0 var(--border), inset 0 -1px 0 var(--border-muted);
  vertical-align: 0.05em;
  letter-spacing: 0;
}
[data-theme="dark"] kbd {
  background: var(--gray-100);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.04);
}
/* Interactive kbd (inside a clickable shortcut hint) gets press feedback */
a > kbd, button > kbd {
  transition: transform 80ms ease, box-shadow 80ms ease;
}
a:active > kbd, button:active > kbd {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 var(--border-muted);
}
/* Inline <code> + <pre> — SF Mono polish */
:not(pre) > code {
  background: var(--gray-100);
  color: var(--text-primary);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.88em;
  font-weight: 500;
  border: 1px solid var(--border-muted);
}
pre {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: var(--text-sm);
  overflow-x: auto;
  color: var(--text-primary);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  line-height: 1.5;
  margin-bottom: 1rem;
}
pre code { background: transparent; border: none; padding: 0; font-size: inherit; }
[data-theme="dark"] pre { background: var(--gray-100); }

/* Caret color + selection tint on inputs */
.form-control, .form-select, textarea.form-control { caret-color: var(--accent); }
.form-control::selection, textarea.form-control::selection { background: var(--accent-ring); color: var(--text-primary); }

/* Page-load fade-in — subtle, respects reduced-motion preference.
   NOTE: opacity-only (no transform). A translate keyframe combined with
   `animation-fill-mode: both` leaves a non-none transform on .main-content
   forever, which creates a stacking context that traps .modal z-index
   below the body-level .modal-backdrop — causing modals to render behind
   the dim overlay. Opacity alone preserves the fade without the trap. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes contentFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .main-content { animation: contentFadeIn 220ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
}

/* Mobile tab bar — active icon scale + heavier label (iOS native feel) */
.tab-link i { transition: transform 180ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 180ms ease; }
.tab-link.active i { transform: scale(1.08); }
.tab-link.active .tab-link-label { font-weight: 600; letter-spacing: 0; }
.tab-link:not(.active) i { opacity: 0.82; }

/* Date / time inputs — polish the native calendar picker indicator */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  font-family: inherit;
  color-scheme: light;
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] { color-scheme: dark; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 2px;
  margin-left: 2px;
  border-radius: var(--radius-xs, 4px);
  opacity: 0.6;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator { opacity: 1; background: var(--accent-ring); }
/* Empty date-input placeholder fallback — Chromium shows 'mm/dd/yyyy', Safari shows nothing */
input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit { color: var(--text-muted); }

/* Table-actions — hover + focus-within reveal for keyboard users */
.table tbody tr .table-actions .btn-icon { opacity: 0.85; transition: opacity var(--transition-fast), color var(--transition-fast); }
.table tbody tr:hover .table-actions .btn-icon,
.table tbody tr:focus-within .table-actions .btn-icon { opacity: 1; }
.table tbody tr:hover .table-actions .btn-icon-muted,
.table tbody tr:focus-within .table-actions .btn-icon-muted { color: var(--text-primary); }
/* Keyboard focus within a row lifts it to the same visual state as hover */
.table-hover tbody tr:focus-within { background: color-mix(in srgb, var(--accent) 6%, transparent); }
[data-theme="dark"] .table-hover tbody tr:focus-within { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Sidebar polish — tighter active-pill glow */
.sidebar .nav-link.active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.sidebar .nav-link { transition: background var(--transition-smooth), color var(--transition-fast), box-shadow var(--transition-fast); }

/* Page-header — optional subtitle alignment polish */
.page-header { align-items: baseline; }
.page-header-sub { line-height: 1.4; }

/* Focus-visible consistency for new round-6/7 interactive surfaces */
.list-group-item-action:focus-visible,
.accordion-button:focus-visible,
.nav-tabs .nav-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent-ring) !important;
  outline: none;
  border-radius: inherit;
}

/* ══════════════════════════════════════════════════════════════
   Status dots, avatars, detail grid
   ══════════════════════════════════════════════════════════════ */

/* Status dots — colored indicator + optional pill */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-400);
  flex-shrink: 0;
  vertical-align: 0.05em;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
}
.status-dot.status-live,    .status-dot.status-paid    { background: var(--success); color: var(--success); }
.status-dot.status-pending, .status-dot.status-warn    { background: var(--warning); color: var(--warning); }
.status-dot.status-overdue, .status-dot.status-offline { background: var(--danger);  color: var(--danger);  }
.status-dot.status-info     { background: var(--info);    color: var(--info);    }
.status-dot.status-brand    { background: var(--accent);  color: var(--accent);  }

/* Pulsing "live" variant — respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .status-dot.status-live {
    animation: statusPulse 1.8s ease-in-out infinite;
  }
  @keyframes statusPulse {
    0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 30%, transparent); }
    50%     { box-shadow: 0 0 0 5px color-mix(in srgb, var(--success) 10%, transparent); }
  }
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.6rem 0.18rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-full);
  line-height: 1.3;
  letter-spacing: 0.1px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* Leading colored dot — universal visual anchor for quick status scan */
.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.9;
}
.status-pill.status-paid,
.status-pill.status-success,
.status-pill.status-active,
.status-pill.status-approved {
  background: var(--success-dim); color: var(--success-text);
  border-color: color-mix(in srgb, var(--success) 20%, transparent);
}
.status-pill.status-pending,
.status-pill.status-warning,
.status-pill.status-partial,
.status-pill.status-due {
  background: var(--warning-dim); color: var(--warning-text);
  border-color: color-mix(in srgb, var(--warning) 22%, transparent);
}
.status-pill.status-overdue,
.status-pill.status-danger,
.status-pill.status-failed,
.status-pill.status-rejected {
  background: var(--danger-dim); color: var(--danger-text);
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
}
.status-pill.status-info,
.status-pill.status-submitted {
  background: var(--info-dim); color: var(--info-text);
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
}
.status-pill.status-draft,
.status-pill.status-inactive,
.status-pill.status-paused,
.status-pill.status-neutral {
  background: var(--gray-100); color: var(--text-secondary);
  border-color: var(--border-muted);
}
.status-pill i { font-size: 0.75rem; }
/* Size variants */
.status-pill.status-sm { padding: 0.1rem 0.45rem 0.1rem 0.4rem; font-size: 0.68rem; }
.status-pill.status-sm::before { width: 5px; height: 5px; }
.status-pill.status-lg { padding: 0.3rem 0.75rem 0.3rem 0.7rem; font-size: var(--text-sm); }
/* Hide decorative dot when pill starts with a bi-* icon */
.status-pill:has(> i.bi)::before { display: none; }

/* Avatar chip — round, with initials or image */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-inverse);
  background: var(--accent);
  overflow: hidden;
  flex-shrink: 0;
  letter-spacing: 0;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { width: 22px; height: 22px; font-size: 0.65rem; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.72rem; }
.avatar-lg { width: 40px; height: 40px; font-size: 0.95rem; }


/* Notification count badge — red dot with optional number */
.has-badge { position: relative; display: inline-flex; }
.notification-count {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--surface);
  border-radius: var(--radius-full);
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: -0.2px;
  box-shadow: 0 1px 2px rgba(255,59,48,0.3);
}
.notification-count.count-dot { min-width: 10px; height: 10px; padding: 0; top: -1px; right: -1px; }

/* Fieldset — Apple grouped-form card */
fieldset.form-section, .form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-xs);
}
fieldset.form-section > legend, .form-section-title {
  float: none;
  width: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  padding: 0;
  margin-bottom: 0.75rem;
  border: none;
}
.form-section-title + .form-section-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: -0.5rem;
  margin-bottom: 0.85rem;
  line-height: 1.4;
}

/* Detail grid — key/value pairs for detail views */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 0.5rem 1rem;
  font-size: var(--text-sm);
}
.detail-grid dt {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
  align-self: center;
}
.detail-grid dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.1px;
}
.detail-grid dd .status-pill { margin-left: -0.1rem; }

/* ══════════════════════════════════════════════════════════════
   Kebab menu, tooltip overrides, search field
   ══════════════════════════════════════════════════════════════ */

/* Kebab menu button — three-dot trigger */
.btn-kebab {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform 100ms ease;
}
.btn-kebab:hover { background: var(--gray-100); color: var(--text-primary); }
.btn-kebab:active { transform: scale(0.9); }
.btn-kebab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn-kebab.show { background: var(--gray-100); color: var(--text-primary); }

/* Top progress bar — NProgress-style page loader */
.top-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2.5px;
  width: 0;
  background: var(--accent);
  z-index: var(--z-toast, 1080);
  box-shadow: 0 1px 3px var(--accent-ring);
  transition: width 240ms cubic-bezier(0.2, 0.9, 0.3, 1), opacity 200ms ease;
  border-bottom-right-radius: 2px;
}
.top-progress.active { opacity: 1; }
.top-progress.done {
  width: 100% !important;
  opacity: 0;
  transition: width 180ms ease, opacity 300ms ease 180ms;
}

/* Mini progress ring — circular indicator */
.ring-progress {
  --ring-size: 32px;
  --ring-stroke: 3px;
  --ring-value: 0.5;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--ring-value) * 360deg), var(--gray-200) 0);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ring-progress::after {
  content: '';
  position: absolute;
  inset: var(--ring-stroke);
  border-radius: 50%;
  background: var(--surface);
}
.ring-progress > span {
  position: relative;
  font-size: calc(var(--ring-size) * 0.3);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   Interaction Components — segmented control, switch, search,
   tooltip (Bootstrap auto-instantiated), pagination, empty state,
   status bar, range.
   ══════════════════════════════════════════════════════════════ */

/* ── Segmented control (iOS UISegmentedControl) ─────────────── */
.segmented {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
  line-height: 1;
  border: 1px solid var(--border-muted);
}
.segmented input[type="radio"],
.segmented input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented label,
.segmented .seg-item {
  padding: 0.4rem 0.85rem;
  border-radius: calc(var(--radius-md) - 3px);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  border: none;
  background: transparent;
  white-space: nowrap;
}
.segmented input:checked + label,
.segmented .seg-item.active,
.segmented .seg-item[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
  font-weight: 600;
}
.segmented label:hover:not(:has(input:checked)),
.segmented .seg-item:not(.active):hover {
  color: var(--text-primary);
}
.segmented label:active,
.segmented .seg-item:active { transform: scale(0.96); }

.segmented-sm label,
.segmented-sm .seg-item { padding: 0.25rem 0.625rem; font-size: var(--text-xs); }
.segmented-lg label,
.segmented-lg .seg-item { padding: 0.55rem 1.1rem; font-size: var(--text-md); }
/* .segmented-full — stretches labels to fill container equally */
.segmented-full { display: flex; width: 100%; }
.segmented-full label,
.segmented-full .seg-item { flex: 1; text-align: center; }

[data-theme="dark"] .segmented {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .segmented input:checked + label,
[data-theme="dark"] .segmented .seg-item.active {
  background: rgba(255,255,255,0.12);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(255,255,255,0.05);
}

/* ── iOS-native switch (.form-switch polish) ────────────────── */
.form-switch { padding-left: 0; display: flex; align-items: center; gap: 0.625rem; }
.form-switch .form-check-input {
  width: 48px;
  height: 28px;
  margin: 0;
  margin-left: 0;
  border-radius: 14px;
  background-color: var(--gray-200);
  border: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  background-position: 3px center;
  background-size: 22px 22px;
  background-repeat: no-repeat;
  transition: background-position 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), background-color 0.22s ease;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--accent-ring), inset 0 1px 2px rgba(0,0,0,0.05);
}
.form-switch .form-check-input:checked {
  background-color: var(--success);
  background-position: calc(100% - 3px) center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:active::after {
  content: '';
}
.form-switch .form-check-label {
  margin-bottom: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.form-switch .form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Small / large variants */
.form-switch-sm .form-check-input { width: 36px; height: 22px; background-size: 16px 16px; background-position: 3px center; }
.form-switch-sm .form-check-input:checked { background-position: calc(100% - 3px) center; }
.form-switch-lg .form-check-input { width: 56px; height: 32px; background-size: 26px 26px; background-position: 3px center; }
.form-switch-lg .form-check-input:checked { background-position: calc(100% - 3px) center; }

[data-theme="dark"] .form-switch .form-check-input { background-color: rgba(255,255,255,0.18); }

/* ── Search field (SF-style with magnifying glass + clear) ─── */
/* Default width is a bounded ~220px so this pill sits inline next to
   filter chips / selects / buttons inside a flex toolbar-controls
   without forcing a new row. On mobile the toolbar override takes
   this to flex:1 1 100%; order:4 so it still becomes full-width. */
.search-field {
  position: relative;
  display: inline-block;
  flex: 0 1 220px;
  width: 220px;
  max-width: 100%;
  min-width: 140px;
}
.search-field-wide { flex-basis: 280px; width: 280px; }
/* Journal-entry live balance summary — stays visible while scrolling through lines */
.je-sticky-summary { position: sticky; top: 0; z-index: 10; }
.search-field .form-control,
.search-field .search-box {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  background-color: var(--gray-100);
  background-image: none;  /* icon comes from .search-field::before — suppress duplicate bg-image from .search-box */
  border-color: transparent;
  width: 100%;
  height: 30px;
  border-radius: var(--radius-full);
}
.search-field .form-control:focus {
  background-color: var(--surface);
  border-color: var(--border-strong);
}
.search-field::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: var(--text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3e%3c/svg%3e") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3e%3c/svg%3e") center / contain no-repeat;
  pointer-events: none;
}
.search-field .search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gray-300);
  color: var(--surface);
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.search-field .search-clear::before { content: '✕'; font-weight: 700; }
.search-field .search-clear:hover { background: var(--text-tertiary); }
.search-field .form-control:not(:placeholder-shown) ~ .search-clear { display: inline-flex; }

/* ── Apple-style tooltip (Bootstrap .tooltip) ───────────────── */
.tooltip {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  opacity: 0 !important;
  transition: opacity 120ms ease, transform 120ms ease;
  transform: translateY(2px) scale(0.98);
  pointer-events: none;
}
.tooltip.show { opacity: 1 !important; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .tooltip { transition: none; transform: none; }
}
/* (Removed: duplicate .tooltip-inner block — consolidated into the L1448 rule.) */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--gray-900);
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--gray-900);
}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: rgba(30,30,32,0.94);
}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: rgba(30,30,32,0.94);
}
[data-theme="dark"] .tooltip-inner {
  background: rgba(240,240,244,0.96);
  color: #000;
}
[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: rgba(240,240,244,0.96);
}
[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: rgba(240,240,244,0.96);
}

/* ── Pagination (compact Apple style) ───────────────────────── */
.pagination {
  gap: 3px;
  margin: 0;
  font-size: var(--text-sm);
}
.pagination .page-item .page-link {
  border: 1px solid var(--border);
  color: var(--text-primary);
  background: var(--surface);
  padding: 0.375rem 0.7rem;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background: var(--gray-100);
  border-color: var(--border-strong);
  z-index: 1;
}
.pagination .page-item:not(.active):not(.disabled) .page-link:active { transform: scale(0.96); }
.pagination .page-item.active .page-link {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.pagination .page-item.disabled .page-link {
  color: var(--text-tertiary);
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
}
.pagination .page-item .page-link:focus {
  box-shadow: 0 0 0 3px var(--accent-ring);
  z-index: 2;
}
.pagination-sm .page-link { padding: 0.25rem 0.5rem; min-width: 28px; font-size: var(--text-xs); }
.pagination-lg .page-link { padding: 0.5rem 0.9rem; min-width: 40px; font-size: var(--text-md); }

.pagination-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

/* ── Empty state pattern (extends the base .empty-state at ~L1505) ── */
/* Base rules (padding, text-align, color) come from the earlier declaration.
   Below adds the div-based icon + structured title/desc/actions variant. */
.empty-state:has(.empty-state-icon) { padding: 3rem 1.5rem; }
.empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 1.1rem;
  border: 1px solid var(--border-muted);
  /* Soft halo that tints to the icon's own colour (variant-aware via currentColor). */
  box-shadow: 0 0 0 8px color-mix(in srgb, currentColor 7%, transparent);
}
.empty-state-icon.accent { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-color: transparent; }
.empty-state-icon.success { background: var(--success-dim); color: var(--success); border-color: transparent; }
.empty-state-icon.warning { background: var(--warning-dim); color: var(--warning); border-color: transparent; }
.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  letter-spacing: -0.2px;
}
.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  max-width: 340px;
  margin: 0 auto 1.25rem;
  line-height: 1.5;
}
.empty-state-actions {
  display: inline-flex;
  gap: 0.5rem;
  justify-content: center;
}
.empty-state-compact {
  padding: 1.5rem 1rem;
}
.empty-state-compact .empty-state-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  font-size: 24px;
  margin-bottom: 0.55rem;
  box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 7%, transparent);
}
[data-theme="dark"] .empty-state-icon { background: var(--gray-100); border-color: var(--border); }
.empty-state-actions .btn { margin-top: 0; min-width: 140px; }
/* Secondary CTA (e.g. "Learn more") renders quieter */
.empty-state-actions .btn-link { color: var(--text-secondary); font-size: var(--text-sm); }
.empty-state-actions .btn-link:hover { color: var(--accent); }
@media (max-width: 576px) {
  .empty-state { padding: 2rem 0.75rem; }
  .empty-state-actions { flex-direction: column; width: 100%; max-width: 280px; margin: 0 auto; }
  .empty-state-actions .btn { width: 100%; }
}

/* ── Status bar (macOS Finder bottom bar) ───────────────────── */
.status-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.875rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-tertiary);
  min-height: 28px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.status-bar-section {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.status-bar-section + .status-bar-section {
  padding-left: 0.75rem;
  border-left: 1px solid var(--border-muted);
}
.status-bar .spacer { flex: 1; }
.status-bar strong {
  color: var(--text-secondary);
  font-weight: 600;
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  letter-spacing: -0.01em;
}
.status-bar i { font-size: 0.9em; }

/* ── Range slider (iOS form-range polish) ───────────────────── */
.form-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.form-range:focus { outline: none; }
.form-range::-webkit-slider-runnable-track {
  background: var(--gray-200);
  height: 4px;
  border-radius: 2px;
  border: none;
}
.form-range::-moz-range-track {
  background: var(--gray-200);
  height: 4px;
  border-radius: 2px;
  border: none;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface);
  border: 0.5px solid rgba(0,0,0,0.04);
  width: 22px;
  height: 22px;
  box-shadow: 0 0.5px 2px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.14);
  border-radius: 50%;
  margin-top: -9px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.form-range::-moz-range-thumb {
  background: var(--surface);
  border: 0.5px solid rgba(0,0,0,0.04);
  width: 22px;
  height: 22px;
  box-shadow: 0 0.5px 2px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.14);
  border-radius: 50%;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.form-range:hover::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.18); }
.form-range:active::-webkit-slider-thumb { transform: scale(1.08); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--accent-ring), 0 3px 8px rgba(0,0,0,0.14); }
.form-range:disabled { opacity: 0.5; cursor: not-allowed; }

[data-theme="dark"] .form-range::-webkit-slider-thumb { background: #f5f5f7; }
[data-theme="dark"] .form-range::-moz-range-thumb { background: #f5f5f7; }
[data-theme="dark"] .form-range::-webkit-slider-runnable-track { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .form-range::-moz-range-track { background: rgba(255,255,255,0.12); }

/* ══════════════════════════════════════════════════════════════
   Currency input, form-field wrapper, theme toggle
   ══════════════════════════════════════════════════════════════ */

/* ── Currency input ────────────────────────────────────────── */
.currency-input {
  position: relative;
  display: inline-block;
  width: 100%;
}
.currency-input .currency-prefix,
.currency-input .currency-suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-weight: 500;
  pointer-events: none;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.currency-input .currency-prefix { left: 0.75rem; }
.currency-input .currency-suffix { right: 0.75rem; }
.currency-input .form-control {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.currency-input.has-prefix .form-control { padding-left: 1.75rem; }
.currency-input.has-suffix .form-control { padding-right: 2.5rem; }
.currency-input.align-end .form-control { text-align: right; }

/* ── Form field wrapper ────────────────────────────────────── */
.form-field {
  margin-bottom: 1rem;
}
.form-field-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 0.35rem;
  letter-spacing: -0.1px;
}
.form-field-label .required { color: var(--danger); font-weight: 600; }
.form-field-label .optional {
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.form-field-help {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.35rem;
  line-height: 1.4;
}
.form-field-error {
  font-size: 0.75rem;
  color: var(--danger);
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1.4;
}
.form-field-error::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm.93-9.412-1-4.705c-.07-.34-.29-.46-.53-.46-.23 0-.46.12-.53.46l-.99 4.705c-.01.057-.02.11-.02.165 0 .31.25.54.56.54.29 0 .5-.19.56-.49l.43-2.33h.01l.43 2.33c.06.3.27.49.56.49.31 0 .56-.23.56-.54 0-.055-.01-.108-.02-.165zM8 12.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3e%3c/svg%3e") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm.93-9.412-1-4.705c-.07-.34-.29-.46-.53-.46-.23 0-.46.12-.53.46l-.99 4.705c-.01.057-.02.11-.02.165 0 .31.25.54.56.54.29 0 .5-.19.56-.49l.43-2.33h.01l.43 2.33c.06.3.27.49.56.49.31 0 .56-.23.56-.54 0-.055-.01-.108-.02-.165zM8 12.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3e%3c/svg%3e") center / contain no-repeat;
}
.form-field-success {
  font-size: 0.75rem;
  color: var(--success);
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── Animated theme toggle pill ────────────────────────────── */
.theme-toggle-pill {
  width: 54px;
  height: 30px;
  border-radius: 15px;
  background: var(--gray-200);
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}
.theme-toggle-pill::before {
  content: '☀';
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  color: var(--brand-gold);
  font-size: 12px;
  opacity: 1;
  transition: opacity 200ms ease;
}
.theme-toggle-pill::after {
  content: '☾';
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 200ms ease;
}
.theme-toggle-pill .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.1);
  z-index: 1;
}
.theme-toggle-pill:hover .thumb {
  box-shadow: 0 1px 4px rgba(0,0,0,0.22), 0 3px 8px rgba(0,0,0,0.14);
}
.theme-toggle-pill:active .thumb {
  width: 30px;
  border-radius: 14px;
}
[data-theme="dark"] .theme-toggle-pill {
  background: var(--accent);
}
[data-theme="dark"] .theme-toggle-pill .thumb {
  transform: translateX(24px);
}
[data-theme="dark"] .theme-toggle-pill:active .thumb {
  transform: translateX(18px);
}
[data-theme="dark"] .theme-toggle-pill::before { opacity: 0.4; }
[data-theme="dark"] .theme-toggle-pill::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   KPI Hero — oversized numeric display.
   Tokens read from :root / [data-theme="dark"] so both themes
   inherit the same structure.
   ══════════════════════════════════════════════════════════════ */

/* ── KPI Hero — oversized numeric display (dashboard / report headers) ── */
.kpi-hero {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kpi-hero-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.kpi-hero-eyebrow i { font-size: 0.85rem; color: var(--accent); }
.kpi-hero-value {
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.8px;
  line-height: 1.05;
  font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Code',
               'Fira Code', 'Menlo', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.kpi-hero-value .currency { color: var(--text-tertiary); font-weight: 500; margin-right: 0.15rem; }
.kpi-hero-label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: -0.1px;
}
.kpi-hero-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  align-self: flex-start;
  font-variant-numeric: tabular-nums;
}
.kpi-hero-trend.up   { background: var(--success-dim); color: var(--success-text); }
.kpi-hero-trend.down { background: var(--danger-dim);  color: var(--danger-text);  }
.kpi-hero-trend.flat { background: var(--gray-100);    color: var(--text-tertiary); }
.kpi-hero-trend i { font-size: 0.75rem; }
.kpi-hero-footline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ══════════════════════════════════════════════════════════════
   Print Styles
   ══════════════════════════════════════════════════════════════ */
@page {
  size: A4;
  margin: 1.8cm 1.5cm 2cm 1.5cm;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font-size: 9pt; color: #666; }
  @bottom-left  { content: "Pirates Group Bookkeeping"; font-size: 9pt; color: #999; }
}
@page :first { margin-top: 2cm; }
@page landscape { size: A4 landscape; }

/* Report header / footer — shown only in print */
.report-print-header,
.report-print-footer,
.print-only { display: none; }

@media print {
  /* Reveal print-only chrome */
  .report-print-header,
  .report-print-footer { display: block !important; }
  .report-print-header {
    text-align: center;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #000;
  }
  .report-print-header .report-title {
    font-size: 18pt;
    font-weight: 700;
    color: #000;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.3px;
  }
  .report-print-header .report-subtitle {
    font-size: 11pt;
    color: #555;
    margin: 0;
  }
  .report-print-header .report-meta {
    font-size: 9pt;
    color: #888;
    margin-top: 0.25rem;
  }
  .report-print-footer {
    font-size: 9pt;
    color: #666;
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--print-border, #ddd);
  }

  /* Page-break utility classes */
  .print-page-break-before { page-break-before: always; break-before: page; }
  .print-page-break-after  { page-break-after:  always; break-after:  page; }
  .print-avoid-break       { page-break-inside: avoid;  break-inside: avoid; }
  .print-only              { display: block !important; }
  .screen-only             { display: none !important; }


  /* Hide non-content elements */
  .sidebar,
  .filter-bar, .table-toolbar, .pagination-wrap,
  .btn, .btn-brand, .btn-icon, .btn-sm, .table-actions,
  .table-show-more,
  .modal, .modal-backdrop, .no-print,
  .tab-bar, .more-menu, .offcanvas,
  .nav-tabs, .seg-tabs, .segmented,
  .alert, form[onsubmit], form[data-confirm] { display: none !important; }

  /* Show only the currently-active Bootstrap tab-pane, break before it */
  .tab-content > .tab-pane { display: none !important; }
  .tab-content > .tab-pane.active,
  .tab-content > .tab-pane.show.active { display: block !important; }

  /* Hide the "Clear" / filter / date selector cards, but keep KPI + table cards */
  form[method="get"], form[method="GET"] { display: none !important; }

  /* Restore links that carry real content (drill-downs in report rows) */
  table a[href] { color: inherit !important; text-decoration: none !important; }
  table a[href]:after { content: none !important; }

  /* Reset layout — neutral print palette (not theme-derived) */
  .main-content { margin-left: 0; padding: 0; }
  body { background: var(--print-bg, #fff); color: var(--print-text, #000); font-size: 11pt; }

  /* Cards and sections */
  .section-card { border: 1px solid var(--print-border, #ddd); box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .kpi-card { border: 1px solid var(--print-border, #ddd); box-shadow: none; break-inside: avoid; }
  .nw-banner { background: #fff !important; color: #000 !important; border: 1px solid var(--print-border, #ddd) !important; }
  .nw-banner-tile { background: var(--print-th-bg, #f5f5f5) !important; border: 1px solid var(--print-border, #ddd) !important; }
  .nw-banner-tile-hero { background: #fff !important; border: 1px solid #6B1F2E !important; }

  /* Tables */
  .table { font-size: 10pt; }
  .table thead th { background: var(--print-th-bg, #f5f5f5) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table-responsive { max-height: none !important; overflow: visible !important; }
  .report-row-revenue, .report-row-expense, .report-row-net,
  .report-row-header, .report-row-total {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Charts — show but constrain */
  canvas { max-height: 200px !important; break-inside: avoid; }

  /* Page breaks + heading cohesion */
  .page-header { page-break-after: avoid; break-after: avoid; }
  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; break-after: avoid; }
  h1, h2, h3 { page-break-inside: avoid; break-inside: avoid; }
  .row { break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Surface external URLs after link text for printed context */
  a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"]):after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  a[href^="mailto:"]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

  /* Badges — preserve colors */
  .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1px solid #ccc; }

  /* KPI variance deltas */
  .kpi-delta, .kpi-variance { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Disable animations + transitions */
  .empty-state i { animation: none; }
  .alert { animation: none; }

  /* Links */
  a { color: inherit; text-decoration: none; }
  a[href]:after { content: none; }
}

/* ── Reduced motion — universal override ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Kill transform-based hover lifts that feel disorienting with reduced motion */
  .kpi-card:hover,
  .section-card:hover,
  .btn:active,
  .btn-brand:active,
  .tab-link:active { transform: none !important; }
  /* Neutralize the looping empty-state pulse */
  .empty-state i { animation: none !important; opacity: 0.9 !important; transform: none !important; }
}

/* ── Section divider ── */
.section-divider { border-top: 2px solid var(--border); margin-top: 1.5rem; padding-top: 1rem; }

/* Fleet tabs */
.fleet-tab { display: none; }
.fleet-tab.active { display: block; }

/* KPI card compact variant — used on mobile-dense overviews where cards are 2-up.
   Tighter padding, smaller value font. Letter-spacing + sub-text ellipsis live
   in the unified rule below (alongside the legacy `.kpi-compact` alias). */
.kpi-card-compact { padding: 0.65rem 0.7rem; }
.kpi-card-compact .value { font-size: 1.3rem; font-weight: 750; margin-top: 0.2rem; }
.kpi-card-compact .sub { font-size: 0.7rem; margin-top: 0.15rem; }

/* Net Worth tables — descriptive left column with money values on the right.
   On narrow viewports we tighten cell padding so the right-side totals never
   land in the horizontal-scroll overflow zone, and force the value column to
   stay un-wrapped (the description column wraps naturally). */
.networth-table td { padding-left: 0.4rem; padding-right: 0.4rem; }
.networth-table td.text-end { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .networth-table td { padding-left: 0.25rem; padding-right: 0.25rem; font-size: 0.85rem; }
  .networth-table td.ps-3 { padding-left: 0.5rem !important; }
  .networth-table td.ps-5 { padding-left: 1rem !important; }
  .networth-table tfoot td { font-size: 0.8rem; }
}

/* Text sizing utilities */
.text-2xs { font-size: 0.6rem; }
.text-caption { font-size: 0.75rem; }
.text-note { font-size: 0.85rem; }
.text-inv-label { font-size: 0.78rem; }

/* Sidebar copyright footer */
.sidebar-copyright { font-size: 0.65rem; color: var(--text-tertiary); flex-shrink: 0; text-align: center; letter-spacing: 0.5px; }

/* Inline form utilities */
.progress-sm { height: 12px; }
.scroll-inner { max-height: 500px; overflow-y: auto; }

/* Skip-to-content link (keyboard accessibility) */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: var(--z-skip);
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--text-inverse);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-to-content:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  width: auto;
  height: auto;
  overflow: visible;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-md);
  outline: none;
  animation: skipLinkSlide 160ms var(--ease-spring, ease-out) both;
}
@keyframes skipLinkSlide {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .skip-to-content:focus { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   Login Page — Apple style
   ══════════════════════════════════════════════════════════════ */
.login-page {
  background: var(--background);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(107,31,46,0.12), transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(74,21,32,0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .login-page::before {
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(200,87,110,0.14), transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(138,44,62,0.08), transparent 60%);
}
.login-box {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem 2rem;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
  animation: loginBoxRise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@supports (backdrop-filter: blur(20px)) {
  .login-box {
    background: var(--glass-sheen), var(--glass-bg-strong);
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border-soft);
    box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  }
}
@keyframes loginBoxRise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .login-box { animation: none; }
}
/* Login lockup — variant 05 horizontal layout */
.login-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 36px;
}
.login-brand-icon {
  color: var(--icon-fill);
  flex-shrink: 0;
}
.login-lockup-divider {
  width: 1px; height: 58px;
  background: var(--brand-wine); opacity: 0.55;
  flex-shrink: 0;
}
.login-lockup-text {
  display: flex; flex-direction: column;
  gap: 6px; line-height: 1;
}
.login-lockup-est {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 3px;
  line-height: 1.7;
  text-align: right;
  color: var(--text-tertiary);
  text-transform: uppercase;
  font-weight: 400;
  flex-shrink: 0;
}
.login-box .brand {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 7px;
  text-align: left;
  margin: 0;
}
.login-brand-tagline {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--tagline-color);
  text-align: left;
}
.login-rule-band {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-bottom: 1.4rem; opacity: 0.6;
}
.login-rule-band .login-brand-rule {
  width: 140px; height: 0.5px; background: var(--accent);
}
.login-rule-band .login-brand-dot {
  width: 4px; height: 4px;
  background: var(--brand-wine);
  transform: rotate(45deg);
}
.login-box .sub {
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  margin-bottom: 1.75rem;
  letter-spacing: -0.1px;
}
.login-box .form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.1px;
}
.login-box .form-control {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
}
.btn-login {
  background: var(--accent);
  color: var(--text-inverse);
  border: none;
  width: 100%;
  padding: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  letter-spacing: -0.1px;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-smooth);
}
.btn-login:hover { background: var(--accent-hover); color: var(--text-inverse); box-shadow: 0 4px 12px rgba(107,31,46,0.32); }
.btn-login:active { transform: scale(0.98); box-shadow: none; }
.btn-login:disabled { opacity: 0.85; cursor: wait; }
.login-footer { text-align: center; margin-top: 1.5rem; font-size: var(--text-xs); color: var(--text-tertiary); }

/* Login password show/hide + caps-lock hint */
.login-password-wrap { position: relative; }
.login-password-wrap .form-control { padding-right: 2.75rem; }
.login-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.login-password-toggle:hover,
.login-password-toggle:focus-visible {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
}
.login-caps-hint {
  margin-top: 0.4rem;
  font-size: var(--text-xs);
  color: var(--badge-warning, #b45309);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.login-caps-hint[hidden] { display: none; }

/* ── Loading spinner ── */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}
.btn-brand.btn-loading::after,
.btn-primary.btn-loading::after,
.btn-success.btn-loading::after,
.btn-danger.btn-loading::after,
.btn-warning.btn-loading::after,
.btn-info.btn-loading::after { border-color: var(--text-inverse); border-right-color: transparent; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Universal disabled state polish — consistent across all button variants */
.btn:disabled, .btn.disabled,
button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.btn[aria-busy="true"] { cursor: wait; pointer-events: none; }
/* Ensure cursor flips back on re-enabled submit buttons */
.btn:not(:disabled):not(.disabled) { cursor: pointer; }

/* ── Width / Height Utilities ──
   Column widths, min-widths and progress-bar heights extracted from inline
   style attributes. Use these instead of inline styles in templates so
   that print/responsive overrides remain centralised. */
.w-salary  { max-width: 120px; }
.w-select  { max-width: 110px; }

/* Fixed pixel column widths (table cells, narrow inputs). */
.col-w-action-sm { width: 40px; }
.col-w-narrow    { width: 90px; }
.col-w-action    { width: 120px; }
.col-w-amount    { width: 130px; }
.col-w-verify    { width: 180px; }

/* Percentage column widths (audit log diff table). */
.col-w-22pct { width: 22%; }
.col-w-30pct { width: 30%; }
.col-w-39pct { width: 39%; }

/* Min-widths for stock-take note inputs (keep input usable when crowded). */
.col-minw-md { min-width: 160px; }
.col-minw-lg { min-width: 180px; }
.col-minw-xl { min-width: 240px; }

/* Max-widths for inline form groups (notes box, search field within toolbar). */
.maxw-480 { max-width: 480px; }
.maxw-140 { max-width: 140px; }
.maxw-160 { max-width: 160px; }
.maxw-180 { max-width: 180px; }
.maxw-200 { max-width: 200px; }
.maxw-220 { max-width: 220px; }

/* Progress bar heights (Bootstrap default is 16px; we use thinner bars). */
.progress-thin { height: 6px; }
.progress-md   { height: 10px; }

/* Chart and intelligence utilities extracted from inline template styles. */
.chart-frame-sm,
.chart-frame-md,
.chart-frame-lg {
  position: relative;
  min-width: 0;
}
.chart-frame-xs { position: relative; height: 40px; min-width: 200px; }
.chart-frame-sm { height: 220px; }
.chart-frame-md { height: 240px; }
.chart-frame-product { position: relative; height: 260px; }
.chart-frame-lg { height: 280px; }
.scroll-y-sm { max-height: 220px; overflow-y: auto; }
.scroll-y-md { max-height: 280px; overflow-y: auto; }
.border-top-muted { border-top: 1px solid var(--border-muted); }
.border-bottom-muted { border-bottom: 1px solid var(--border-muted); }
.sticky-head-surface { background: var(--surface); }
.text-pre-wrap { white-space: pre-wrap; }
.status-pill-xs { font-size: 0.65rem; }
.soft-dashed-accent {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border-style: dashed;
}

.soft-row-danger { background: color-mix(in srgb, var(--danger) 5%, transparent); }
.soft-row-warning { background: color-mix(in srgb, var(--warning) 4%, transparent); }
.soft-row-success { background: color-mix(in srgb, var(--success) 3%, transparent); }
.soft-row-accent { background: color-mix(in srgb, var(--accent) 4%, transparent); }

.legend-dot,
.cash-legend-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: var(--radius-full);
  display: inline-block;
  flex: 0 0 auto;
}
.legend-dot-success { background: var(--success); }
.legend-dot-warning { background: var(--warning); }
.legend-dot-danger { background: var(--danger); }
.legend-dot-accent { background: var(--accent); }

.metric-track,
.metric-bar-track {
  background: color-mix(in srgb, var(--text-secondary) 6%, transparent);
  border-radius: 5px;
  overflow: hidden;
}
.metric-track { height: 6px; }
.metric-bar-track { height: 14px; }
.metric-bar-track-lg { height: 22px; border-radius: 6px; }
.metric-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  background: var(--bar-color, var(--accent));
  opacity: var(--bar-opacity, 0.7);
}
.metric-fill-success { --bar-color: var(--success); }
.metric-fill-warning { --bar-color: var(--warning); }
.metric-fill-danger { --bar-color: var(--danger); }
.metric-fill-accent { --bar-color: var(--accent); }
.metric-label-min { min-width: 32px; }
.metric-label-wide { min-width: 50px; text-align: right; }
.metric-label-narrow { min-width: 24px; }
.cohort-detail-row { border-bottom: 1px solid var(--border-muted); }
.cohort-detail-label { width: 90px; }
.cohort-detail-size { width: 110px; }
.cohort-pill-strip { overflow-x: auto; }

.milestone-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-secondary) 15%, transparent);
  display: inline-block;
}
.milestone-dot.is-reached {
  background: var(--success);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 30%, transparent);
}

.insight-banner {
  border-left: 4px solid var(--accent);
}
.insight-banner-warning {
  border-left-color: var(--warning, #f59e0b);
}
.insight-banner-danger {
  border-left-color: var(--danger);
}
.insight-banner-icon {
  font-size: 1.5rem;
}
.message-body-pre {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--surface-muted, transparent);
  padding: 0.75rem;
  border-radius: 4px;
}

/* Stock-take print-only meta line under the count-sheet heading. */
.stocktake-print-meta {
  margin-top: 0.4rem;
  font-size: 0.95em;
  color: var(--text-secondary);
}

/* ── Search result count (auto-injected after .search-box) ── */
.search-count {
  margin-left: 0.6rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.search-count[hidden] { display: none; }

/* ── Composable table filter ──
   Pages combining tableSearch() (toggles style.display) with a status filter
   should set data-filter-hidden on excluded rows. The rule wins over any
   inline style.display='' from the search reset. */
tr[data-filter-hidden="1"] { display: none !important; }

/* ── Modal summary banner (single-line label/value pair, used by Pay Salary,
   Pay All Pending, and similar confirmation modals) ── */
.modal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.modal-summary-label {
  color: var(--text);
  font-size: 0.92rem;
  min-width: 0;
}
.modal-summary-label .bi { color: var(--accent); }
.modal-summary-value {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
}

/* ── Modal draft-restored notice (auto-injected by main.js) ── */
.draft-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.2;
}
.draft-notice .bi { color: var(--accent); margin-right: 0.3rem; }
.draft-notice .draft-discard-btn {
  background: transparent;
  border: 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
}
.draft-notice .draft-discard-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.draft-notice .draft-discard-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Back-to-top floating button ── */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.95);
  transition: opacity var(--transition-smooth), transform var(--transition-smooth), background var(--transition-fast), color var(--transition-fast);
  z-index: var(--z-sticky);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
}
.back-to-top:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-md);
}
@media (max-width: 768px) {
  /* On mobile the bottom tab-bar + mobile header claim the bottom-right corner.
     Position above the tab-bar so the button doesn't overlap tabs. */
  .back-to-top { right: 0.9rem; bottom: calc(64px + 0.75rem); width: 38px; height: 38px; }
}
@media print { .back-to-top { display: none !important; } }

/* ── Stock Take location variance hints ──
   Subtle background tint + accented border on counted FEC/LT/LB cells when
   the typed value differs from the system expected. CSS-only, JS just sets
   the data-variance attribute. */
.loc-count-input[data-variance="short"] {
  border-color: var(--danger, #dc3545) !important;
  background-color: color-mix(in srgb, var(--danger, #dc3545) 8%, transparent);
}
.loc-count-input[data-variance="over"] {
  border-color: var(--success, #28a745) !important;
  background-color: color-mix(in srgb, var(--success, #28a745) 8%, transparent);
}
.loc-count-input[data-variance="match"] {
  border-color: color-mix(in srgb, var(--text) 12%, transparent);
}

/* ── Stock Take print: blank-form-friendly count sheet ──
   Hide KPIs/toolbars/actions; show products + empties tables with empty
   counted boxes so the user can walk around with paper. */
@media print {
  /* Hide non-count chrome: KPIs, search/match toolbars, notes-+-Save row,
     and the Post-Adjustments card that lives outside the form. */
  body.print-stocktake .row.g-3,
  body.print-stocktake form#countForm > .section-card > .table-toolbar,
  body.print-stocktake form#countForm > .section-card.mt-3.p-3.d-flex,
  body.print-stocktake form#countForm ~ .section-card
    { display: none !important; }
  /* Render counted + notes inputs as empty bordered boxes for hand-filling */
  body.print-stocktake .count-input,
  body.print-stocktake .loc-count-input,
  body.print-stocktake input[name^="note_"],
  body.print-stocktake input[name^="locnote_"] {
    border: 1px solid #999 !important;
    background: transparent !important;
    color: transparent !important;
    height: 2.4em !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
  }
  /* Print header with date + signature lines */
  body.print-stocktake .stocktake-print-header {
    display: block !important;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #333;
  }
}
.stocktake-print-header { display: none; }

/* ── Keyboard shortcuts help dialog ── */
.shortcuts-list {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 0.6rem;
  column-gap: 1rem;
  align-items: center;
}
.shortcuts-list dt {
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-secondary);
}
.shortcuts-list dd { margin: 0; color: var(--text-primary); font-size: var(--text-sm); }
.shortcuts-list kbd {
  background: var(--gray-100);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
[data-theme="dark"] .shortcuts-list kbd {
  background: var(--gray-200);
  border-color: var(--border);
}

/* ── Error page ── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
  padding: 2rem;
}
.error-page-icon { font-size: 4rem; opacity: 0.3; margin-bottom: 0.5rem; }
.error-page-code { font-size: 3.5rem; font-weight: 800; color: var(--text-primary); letter-spacing: -1px; margin-bottom: 0.5rem; }
.error-page-msg { font-size: var(--text-base); color: var(--text-tertiary); margin-bottom: 1.5rem; max-width: 360px; }
/* ── Payslip ── */
.payslip-head-earn th { background: var(--success-dim); color: var(--badge-success); }
.payslip-head-deduct th { background: var(--danger-dim); color: var(--badge-danger); }
.payslip-row-total td { border-top: 2px solid var(--border); }

@media (max-width: 768px) {
  .login-box { margin: 1rem; padding: 1.5rem; }
  .login-box .form-control { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   Phase 5 · Polish additions (R5-R20)
   Invoice/payslip/login/backup/KPI/form/modal/tabs/focus/grid
   ══════════════════════════════════════════════════════════════ */

/* R5 · Invoice document styling — REMOVED (unused; templates use .invoice-wrap) */
/* R6 · Payslip doc/hero/net — REMOVED (unused; payslip.html uses .invoice-wrap + explicit .payslip-table / .payslip-row-net / .payslip-net-label / .payslip-net-value, defined in the "Payslip table" block earlier). */

/* R7 · 404 / error page polish — extends .error-page ─────────── */
.error-page-icon { animation: errorWobble 3s ease-in-out infinite; }
@keyframes errorWobble {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
.error-page-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* R8 · Login page polish ─────────────────────────────────────── */
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.25rem 2.5rem 2rem;
  width: 100%;
  max-width: 480px;
}

/* R9 · Backup / settings page — status tiles ─────────────────── */
.backup-status-tile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--transition-fast) var(--ease-out);
}
.backup-status-tile:hover { border-color: var(--accent-ring); }
.backup-status-tile .icon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.backup-status-tile .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); font-weight: 600; }
.backup-status-tile .value { font-weight: 700; color: var(--text-primary); font-size: var(--text-sm); }

/* R10 · KPI card compact variants (4-up/5-up rows) ───────────── */
.kpi-card-sm { padding: 0.85rem 0.9rem; }
.kpi-card-sm .label { font-size: 0.68rem; }
.kpi-card-sm .value { font-size: 1.15rem; }
.kpi-card-sm .sub   { font-size: 0.72rem; }
.kpi-card-xs { padding: 0.65rem 0.75rem; }
.kpi-card-xs .label { font-size: 0.62rem; letter-spacing: 0.3px; }
.kpi-card-xs .value { font-size: 1rem; }
.kpi-card-xs .sub   { font-size: 0.68rem; }

/* R11 · KPI sub-text ellipsis + line-height ──────────────────── */
.kpi-card .label,
.kpi-card .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.kpi-card .value { line-height: 1.1; letter-spacing: -0.5px; }

/* R12 · Form label required asterisk ─────────────────────────── */
.form-label.required::after,
label.required::after,
.form-label[data-required="true"]::after,
/* Auto: any label whose next sibling is a required input */
.mb-3:has(> input[required], > select[required], > textarea[required]) > .form-label::after,
.form-group:has(> input[required], > select[required], > textarea[required]) > .form-label::after {
  content: " *";
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
  opacity: 0.85;
}

/* R13 · Readonly / disabled input styling consistency ────────── */
.form-control[readonly],
.form-select[disabled],
.form-control[disabled] {
  background-color: var(--gray-50) !important;
  color: var(--text-tertiary) !important;
  cursor: not-allowed;
  opacity: 0.85;
}
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select[disabled],
[data-theme="dark"] .form-control[disabled] {
  background-color: color-mix(in srgb, var(--gray-100) 40%, transparent) !important;
}
.form-control[readonly]:focus {
  box-shadow: none !important;
  border-color: var(--border) !important;
}

/* R14 · Modal body form row spacing unification ──────────────── */
.modal-body .row.g-2 > [class*="col-"] > .form-group,
.modal-body .row.g-3 > [class*="col-"] > .form-group { margin-bottom: 0.5rem; }
.modal-body .mb-3:last-child,
.modal-body .row:last-child { margin-bottom: 0 !important; }

/* R15 · Sticky modal footer (long modals) ────────────────────── */
.modal-dialog-scrollable .modal-footer,
.modal-sticky-footer .modal-footer {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 2;
}

/* R16 · Modal body max-height on mobile (avoid keyboard overlap) */
@media (max-width: 640px) {
  .modal-body { max-height: calc(100vh - 200px); overflow-y: auto; }
  .modal-dialog { margin: 0.5rem; max-width: calc(100vw - 1rem); }
}

/* R17 · Tab-link activation animation (.nav-tabs) ────────────── */
.nav-tabs .nav-link {
  position: relative;
  transition: color var(--transition-fast) var(--ease-out);
}
.nav-tabs .nav-link::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms var(--ease-spring, cubic-bezier(0.34, 1.3, 0.64, 1));
}
.nav-tabs .nav-link.active::after { transform: scaleX(1); }

/* R18 · Dark-mode contrast audit — status pill borders ──────── */
[data-theme="dark"] .status-pill,
[data-theme="dark"] .badge {
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
[data-theme="dark"] .kpi-delta {
  border-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* R19 · Unified focus ring — one accent-ring everywhere ─────── */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible,
a.period-chip:focus-visible,
.seg-tabs .seg-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  border-color: var(--accent) !important;
}

/* R20 · Grid gap consistency across pages ───────────────────── */
.row.g-3 { --bs-gutter-x: 0.85rem; --bs-gutter-y: 0.85rem; }
.row.g-4 { --bs-gutter-x: 1.1rem;  --bs-gutter-y: 1.1rem; }
@media (max-width: 768px) {
  .row.g-3 { --bs-gutter-x: 0.6rem; --bs-gutter-y: 0.6rem; }
  .row.g-4 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════
   Phase 5 · Polish additions (R21-R30)
   Sidebar · mobile-nav · charts · sortable · loading · toast
   ══════════════════════════════════════════════════════════════ */

/* R21 · Sidebar active-item visual strength ──────────────────── */
.sidebar .nav-link.active,
.sidebar a.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent) !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.sidebar .nav-link.active i,
.sidebar a.active i { color: var(--accent) !important; }
[data-theme="dark"] .sidebar .nav-link.active,
[data-theme="dark"] .sidebar a.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* R22 · Sidebar section divider spacing ──────────────────────── */
.sidebar .nav-section-label,
.sidebar .sidebar-section-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  font-weight: 700;
  padding: 0.9rem 1rem 0.3rem 1rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--border-muted);
}
.sidebar .nav-section-label:first-child,
.sidebar .sidebar-section-label:first-child { border-top: none; margin-top: 0; padding-top: 0.5rem; }

/* (Removed dead `.tab-bar-link` bottom-nav rules — superseded by the
   `.tab-link` floating tab bar; no template used that class.) */

/* Canvas auto-polish — any chart canvas inside a card gets max-width */
.section-card > canvas,
.card > canvas {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* R24 · Chart.js legend typography ───────────────────────────── */
.chart-legend,
.chartjs-legend {
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.chart-legend li,
.chartjs-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.75rem;
}
/* R26 · Sortable table header indicator ──────────────────────── */
.table th[data-sort],
.table th.sortable {
  cursor: pointer;
  user-select: none;
  padding-right: 1.5rem !important;
  position: relative;
}
.table th[data-sort]::after,
.table th.sortable::after {
  content: '\F148';  /* bi-chevron-expand */
  font-family: 'bootstrap-icons', sans-serif;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
  font-size: 0.75rem;
  transition: opacity var(--transition-fast) var(--ease-out);
}
.table th[data-sort]:hover::after,
.table th.sortable:hover::after { opacity: 0.7; }
.table th[data-sort="asc"]::after,
.table th.sort-asc::after  { content: '\F145'; opacity: 1; color: var(--accent); }  /* bi-chevron-up */
.table th[data-sort="desc"]::after,
.table th.sort-desc::after { content: '\F282'; opacity: 1; color: var(--accent); }  /* bi-chevron-down */

/* R27 · Loading button state ─────────────────────────────────── */
.btn[data-loading="true"],
.btn.is-loading {
  color: transparent !important;
  pointer-events: none;
  position: relative;
}
.btn[data-loading="true"]::after,
.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 600ms linear infinite;
  color: var(--text-inverse);
}
.btn-outline-secondary[data-loading="true"]::after,
.btn-outline-secondary.is-loading::after { color: var(--accent); }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* R28 · Copy-to-clipboard feedback animation ─────────────────── */
.copy-btn, [data-copy] { position: relative; }
.copy-btn.copied::after,
[data-copy].copied::after {
  content: 'Copied!';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--surface);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  animation: copyPop 1.4s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes copyPop {
  0%   { opacity: 0; transform: translate(-50%, 4px); }
  20%  { opacity: 1; transform: translate(-50%, 0); }
  80%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* R29 · Confirm-delete inline prompt ─────────────────────────── */
.confirm-delete-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--danger);
  animation: shakeIn 180ms var(--ease-out);
}
.confirm-delete-inline .btn-confirm {
  background: var(--danger);
  color: var(--text-inverse);
  border: none;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.confirm-delete-inline .btn-cancel {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  cursor: pointer;
}
@keyframes shakeIn {
  0%   { transform: translateX(-4px); opacity: 0; }
  50%  { transform: translateX(2px); }
  100% { transform: translateX(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   Phase 5 · Polish additions (R31-R40)
   Sticky KPI · scroll-anchor · form-input · select · avatar
   offcanvas · brand mark
   ══════════════════════════════════════════════════════════════ */

/* R31 · Sticky KPI row on scroll (opt-in with .kpi-sticky) ──── */
.kpi-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  padding-right: calc(var(--bs-gutter-x) * 0.5);
}
.kpi-sticky::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -12px;
  height: 12px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
}

/* R32 · Scroll-anchor offset for sticky headers ──────────────── */
:target,
[id]:target,
a[id]:target {
  scroll-margin-top: 80px;
}
html { scroll-padding-top: 80px; }

/* R33 · Form input consistent border-radius + focus border ─── */
.form-control,
.form-select,
.input-group-text {
  border-radius: var(--radius-sm, 6px);
  border-color: var(--border);
  transition: border-color var(--transition-fast) var(--ease-out),
              box-shadow var(--transition-fast) var(--ease-out);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.input-group:focus-within .input-group-text { border-color: var(--accent); }
.input-group:focus-within .form-control { z-index: 2; }

/* R34 · Input group prefix/suffix tighter alignment ──────────── */
.input-group .input-group-text {
  background: var(--gray-50);
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 0.85rem;
}
.input-group-sm .input-group-text { padding: 0.25rem 0.55rem; font-size: 0.78rem; }
[data-theme="dark"] .input-group .input-group-text {
  background: color-mix(in srgb, var(--gray-100) 50%, transparent);
}

/* R35 · Select appearance — consolidated above at the base .form-select rule */

/* R37 · Table empty row — consistent height & vertical centering */
.table tbody tr.empty-row td,
.empty-state-row td {
  padding: 2.5rem 1rem !important;
  text-align: center;
  color: var(--text-tertiary);
  vertical-align: middle;
}

/* R38 · Table row-group (month/category section headers) ────── */
.table tbody tr.row-group-header td {
  background: color-mix(in srgb, var(--accent) 6%, var(--gray-50));
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border);
}
[data-theme="dark"] .table tbody tr.row-group-header td {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* R39 · Offcanvas drawer polish ──────────────────────────────── */
.offcanvas {
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px -12px rgba(0,0,0,0.12);
}
.offcanvas-header {
  border-bottom: 1px solid var(--border-muted);
  padding: 0.85rem 1.1rem;
}
.offcanvas-header .btn-close {
  opacity: 0.55;
  transition: opacity var(--transition-fast) var(--ease-out);
}
.offcanvas-header .btn-close:hover { opacity: 0.9; }
.offcanvas-title {
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.2px;
}
.offcanvas-body { padding: 0.75rem 1rem 1rem 1rem; }
[data-theme="dark"] .offcanvas {
  box-shadow: -12px 0 32px -12px rgba(0,0,0,0.45);
}

/* R40 · Brand mark / logo in sidebar ─────────────────────────── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1rem 0.75rem 1rem;
  border-bottom: 1px solid var(--border-muted);
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: var(--text-primary);
}
.sidebar-brand:hover { color: var(--accent); }
.sidebar-brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #a855f7));
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.sidebar-brand-name {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.2px;
}
.sidebar-brand-sub {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════
   Phase 5 · Polish additions (R41-R49)
   Skeleton · density · contrast · transparency · print breaks
   ARIA · semantic landmarks
   ══════════════════════════════════════════════════════════════ */

/* R42 · Density toggle — data attribute on <body> ────────────── */
[data-density="compact"] .table td,
[data-density="compact"] .table th { padding: 0.35rem 0.55rem; font-size: 0.8rem; }
[data-density="compact"] .card,
[data-density="compact"] .section-card { padding: 0.75rem; }
[data-density="compact"] .form-control,
[data-density="compact"] .form-select { padding: 0.25rem 0.5rem; font-size: 0.82rem; }
[data-density="spacious"] .table td,
[data-density="spacious"] .table th { padding: 0.85rem 1rem; font-size: 0.95rem; }
[data-density="spacious"] .card,
[data-density="spacious"] .section-card { padding: 1.5rem; }
[data-density="spacious"] .form-control,
[data-density="spacious"] .form-select { padding: 0.6rem 0.9rem; }

/* R43 · High-contrast mode support ───────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --border: #000000;
    --border-muted: #000000;
    --text-tertiary: #333333;
    --accent-ring: rgba(0, 0, 0, 0.6);
  }
  [data-theme="dark"] {
    --border: #ffffff;
    --border-muted: #e0e0e0;
    --text-tertiary: #dddddd;
    --accent-ring: rgba(255, 255, 255, 0.6);
  }
  .btn, .form-control, .form-select, .section-card, .kpi-card, .badge, .status-pill {
    border-width: 1.5px !important;
  }
  .table, .table th, .table td { border-color: var(--border) !important; }
  .btn:focus-visible, .form-control:focus-visible { outline: 3px solid var(--accent) !important; }
}

/* R44 · Reduce-transparency mode support ─────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .offcanvas,
  .modal-content,
  .tooltip-inner,
  [class*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .page-header i,
  .modal-title i {
    background: var(--gray-100) !important;
  }
  .nw-banner,
  .kpi-card {
    background: var(--surface) !important;
  }
}

/* R45 · Print page-break hints for long tables ───────────────── */
@media print {
  .table thead { display: table-header-group; }
  .table tfoot { display: table-footer-group; }
  .table tr    { page-break-inside: avoid; break-inside: avoid; }
  .table tbody tr.row-group-header,
  .table tbody tr.section-row { page-break-before: auto; break-before: auto; }
  /* Keep subtotal / grand-total rows attached to the preceding data */
  .table tbody tr.subtotal-row,
  .table tbody tr.grand-total-row,
  .table tbody tr.payslip-row-total,
  .table tbody tr.payslip-row-ded-total,
  .table tbody tr.payslip-row-net { page-break-before: avoid; break-before: avoid; }
  /* A tbody group within a financial report (revenue, COGS, expenses) is one conceptual unit */
  .table tbody { page-break-inside: avoid; break-inside: avoid; }
  .section-card + .section-card { page-break-before: auto; break-before: auto; }
  .kpi-card { page-break-inside: avoid; break-inside: avoid; }
  .report-print-header { page-break-after: avoid; break-after: avoid; }
  /* Equation / balance summary cards are small and shouldn't split */
  .section-card.print-avoid-break,
  .brand-header { page-break-inside: avoid; break-inside: avoid; }
}

/* R47-R48 · ARIA visual aids — icon-only buttons get tooltip hint */
.btn-icon-only:not([aria-label]):not([title])::after {
  /* Dev-time outline to catch missing aria-label on icon buttons */
  outline: 2px dashed var(--warning);
  outline-offset: 2px;
}
[aria-disabled="true"],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
[aria-current="page"] {
  font-weight: 600;
}
[role="alert"], [role="status"] { outline: none; }

/* R49 · Semantic landmark visual aids in dev / base styling ─── */
main[role="main"],
main.main-content { outline: none; }
nav[aria-label] { outline: none; }
section[aria-labelledby] { outline: none; }

/* ── Negative money auto-styling ──
   Any .text-danger inside a money-aligned cell gets consistent visual weight. */
.table td.text-end.text-danger,
.table td.text-end .text-danger,
td.text-end .text-danger,
.money-neg {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}



/* ── Month-end close dashboard widget ── */
.mc-widget { padding: 1rem 1.25rem; color: var(--text-primary); transition: box-shadow var(--transition-smooth), transform var(--transition-smooth); }
.mc-widget:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: var(--text-primary); }
.mc-widget .progress { background: var(--surface-muted); border-radius: var(--radius-full); overflow: hidden; }
.mc-widget .progress-bar { background: var(--accent); border-radius: var(--radius-full); }
.mc-widget-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); font-size: 1.3rem; flex-shrink: 0;
}

/* ── Drill-down links on report amount cells ── */
.drill-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--text-tertiary) 55%, transparent);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.drill-link:hover,
.drill-link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
  outline: none;
}
@media print {
  .drill-link { border-bottom: none; color: inherit; }
}

/* ── Hash-deep-link highlight (e.g. /inventory#product-42) ── */
@keyframes rowFlashPulse {
  0%   { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}
.row-flash > td { animation: rowFlashPulse 2s ease-out 1; }

/* ── KPI section labels (Action items / Value summary / Financial / etc.)
   Quiet uppercase headers that anchor a row of KPI cards without competing
   with the cards themselves. Used on dashboard + inventory. ── */
.kpi-section-label {
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

/* ── Compact KPI variant — denser tiles for "value summary" rows where the
   numbers are supporting info, not headline KPIs. Smaller padding + smaller
   value font. Two class names alias to the same look (`.kpi-compact` is the
   original, `.kpi-card-compact` is the newer canonical name). ── */
.kpi-card.kpi-compact,
.kpi-card-compact-twin { padding-block: 0.7rem; }
.kpi-card.kpi-compact .value { font-size: 1.35rem; line-height: 1.2; }
.kpi-card.kpi-compact .label,
.kpi-card.kpi-compact .sub { font-size: 0.7rem; }
/* Reduce letter-spacing so longer labels like "Reorder Alerts" / "Stale Reorders"
   don't clip on narrow mobile cards. Applies to BOTH compact variants. */
.kpi-card.kpi-compact .label,
.kpi-card-compact .label {
  letter-spacing: 0.5px;
  gap: 0.35rem;
}
.kpi-card.kpi-compact .label::before,
.kpi-card-compact .label::before { width: 6px; height: 6px; }
.kpi-card.kpi-compact .sub,
.kpi-card-compact .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Clickable KPI cards — pointer + subtle lift. Only applied when
   `.kpi-clickable` is set (gated by count > 0 in templates) so zero-count
   cards don't advertise a no-op. ── */
.kpi-card.kpi-clickable {
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.kpi-card.kpi-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.kpi-card.kpi-clickable:active { transform: translateY(0); }
.kpi-card.kpi-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   R30 · Workforce module — drawer, sortable tables, density toggle,
   role badges, anomaly flags, mobile cards.
   Used by: workforce.html, employee_detail.html.
   ══════════════════════════════════════════════════════════════ */

/* MoM delta tag inside KPI card */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  margin-top: 0.2rem;
}
.kpi-delta.up   { background: var(--success-dim); color: var(--badge-success); }
.kpi-delta.down { background: var(--danger-dim);  color: var(--badge-danger); }
.kpi-delta.flat { background: var(--gray-100);    color: var(--text-tertiary); }

/* Sticky table head — keeps headers visible during scroll */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--gray-100);
  box-shadow: 0 1px 0 var(--border);
}
[data-theme="dark"] .table-sticky thead th { background: var(--gray-100); }

/* Sortable column headers */
.table-sortable thead th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.table-sortable thead th[data-sort-key]::after {
  content: "";
  display: inline-block;
  margin-left: 0.35rem;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--text-tertiary);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  vertical-align: middle;
}
.table-sortable thead th[data-sort-key]:hover::after { opacity: 0.5; }
.table-sortable thead th[aria-sort="ascending"]::after  { opacity: 1; transform: rotate(180deg); border-top-color: var(--accent); }
.table-sortable thead th[aria-sort="descending"]::after { opacity: 1; border-top-color: var(--accent); }
.table-sortable thead th[aria-sort="ascending"],
.table-sortable thead th[aria-sort="descending"] { color: var(--accent); }

/* Density toggle — compact vs comfortable */
.table-density-compact td,
.table-density-compact th { padding: 0.35rem 0.55rem; font-size: var(--text-sm); }

/* Color-coded role badges (compose with .badge-source) */
.role-badge {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--gray-100);
  color: var(--text-secondary);
}
.role-badge.role-driver       { background: var(--info-dim);    color: var(--badge-info); }
.role-badge.role-salesperson  { background: var(--success-dim); color: var(--badge-success); }
.role-badge.role-warehouse    { background: var(--warning-dim); color: var(--badge-warning); }
.role-badge.role-manager      { background: var(--badge-purple-dim); color: var(--badge-purple); }
.role-badge.role-other        { background: var(--gray-200); color: var(--text-secondary); }

/* Anomaly flag — pulse for at-risk amounts */
.anomaly-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 0.3rem;
  border-radius: 50%;
  background: var(--warning-dim);
  color: var(--warning-dark);
  font-size: 0.65rem;
  vertical-align: middle;
}
.anomaly-flag::before { content: "!"; font-weight: 700; line-height: 1; }
.anomaly-flag.high { background: var(--danger-dim); color: var(--danger-dark); }
@keyframes anomalyPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--warning-dim); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}
.anomaly-flag.high { animation: anomalyPulse 1.6s ease-in-out infinite; }

/* Bulk-checkbox indeterminate state — visible diagonal stripe */
.form-check-input:indeterminate {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: linear-gradient(45deg, transparent 45%, var(--text-inverse) 45%, var(--text-inverse) 55%, transparent 55%);
}

/* Inline-edit cell — pencil hint + input swap */
.cell-inline-edit {
  position: relative;
  cursor: text;
}
.cell-inline-edit::after {
  content: "\F4CB"; /* bi-pencil */
  font-family: bootstrap-icons;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  transition: opacity 0.15s;
  pointer-events: none;
}
.cell-inline-edit:hover::after { opacity: 1; }
.cell-inline-edit input.cell-inline-input {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  font-family: inherit;
  font-size: inherit;
  text-align: right;
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.cell-inline-edit.saving { opacity: 0.6; }
.cell-inline-edit.saved {
  animation: cellSavedFlash 0.8s ease-out 1;
}
@keyframes cellSavedFlash {
  0%   { background: var(--success-dim); }
  100% { background: transparent; }
}

/* Per-employee Est. Net cell — visually emphasized so the user sees what
   they actually owe each person at a glance. The !important is needed
   because Bootstrap's .table cell rules win on specificity otherwise. */
.table tbody td.est-net-cell {
  background: var(--accent-dim) !important;
  border-left: 3px solid var(--accent) !important;
  --bs-table-bg: transparent;
}
td.est-net-cell .est-net-amount {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.table tbody td.est-net-cell.est-net-paid {
  background: var(--success-dim) !important;
  border-left-color: var(--success) !important;
}
td.est-net-cell.est-net-paid .est-net-amount { color: var(--success-text); }
.table tbody td.est-net-cell.est-net-zero {
  background: transparent !important;
  border-left-color: transparent !important;
}
td.est-net-cell.est-net-zero .est-net-amount { color: var(--text-tertiary); font-weight: 500; }
.table tbody td.est-net-cell.est-net-negative {
  background: var(--danger-dim) !important;
  border-left-color: var(--danger) !important;
}
td.est-net-cell.est-net-negative .est-net-amount { color: var(--danger-text); }
.table tbody td.est-net-cell.est-net-carryover {
  background: var(--warning-dim) !important;
  border-left-color: var(--warning) !important;
}
td.est-net-cell.est-net-carryover .est-net-amount { color: var(--warning-dark); }

/* Team-circle: negative net signals the employee owes the company */
.team-circle-net.is-negative { color: var(--danger); }
.team-circle.has-debit { border-color: var(--danger-dim); }
.team-circle-breakdown {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
  margin-bottom: 0.2rem;
}

/* Team circles grid — replaces multi-chart dashboard. Each employee shown
   as a clickable card with their avatar and tenure, sorted by hire date. */
.team-grid-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.team-circles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.85rem;
}
.team-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.team-circle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-ring);
  color: var(--text-primary);
}
.team-circle .avatar {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
  margin-bottom: 0.55rem;
}
.team-circle-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
  word-break: break-word;
}
.team-circle-role {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
/* ── Countdown to payday — the headline number on each card ── */
.team-circle-countdown {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: 0.2rem;
  line-height: 1;
}
.team-circle-cd-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.team-circle-cd-num.is-word {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.team-circle-cd-unit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.team-circle-cd-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.team-circle-progress {
  width: 100%;
  height: 4px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 0.65rem;
}
.team-circle-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}

/* Urgency tints — closer to payday = warmer */
.team-circle-urg-today  { border-color: var(--success); background: var(--success-dim); }
.team-circle-urg-today  .team-circle-cd-num { color: var(--success-text); }
.team-circle-urg-today  .team-circle-progress-fill { background: var(--success); }
.team-circle-urg-tomorrow { border-color: var(--warning); background: var(--warning-dim); }
.team-circle-urg-tomorrow .team-circle-cd-num { color: var(--warning-dark); }
.team-circle-urg-tomorrow .team-circle-progress-fill { background: var(--warning); }
.team-circle-urg-soon { border-color: var(--warning-dim); }
.team-circle-urg-soon .team-circle-cd-num { color: var(--warning-dark); }
.team-circle-urg-soon .team-circle-progress-fill { background: var(--warning); }

/* Fleet roster override: 'today' for a vehicle means compliance OVERDUE,
   not "payday today". Re-tint the danger end of the spectrum so an expired
   card reads as alarm rather than success. */
.team-circle.team-circle-veh.team-circle-urg-today { border-color: var(--danger); background: var(--danger-dim); }
.team-circle.team-circle-veh.team-circle-urg-today .team-circle-cd-num { color: var(--danger); }
.team-circle-urg-far .team-circle-cd-num { color: var(--text-secondary); }

.team-circle-net {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.team-circle-net-label {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.1rem;
}
.team-circle-base {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-muted);
  font-size: 0.7rem;
  color: var(--text-tertiary);
  width: 100%;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.team-circle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Current pay-cycle banner — shown above all KPIs so the cycle context
   is always visible. */
.cycle-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(135deg, var(--accent-dim), var(--info-dim));
  border: 1px solid var(--accent-ring);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.cycle-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.cycle-banner-body { flex: 1 1 auto; min-width: 200px; }
.cycle-banner-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.cycle-banner-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.cycle-banner-dates {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.cycle-banner-progress {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cycle-banner-progress-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.cycle-banner-bar {
  width: 100%;
  height: 6px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.cycle-banner-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.3s var(--ease-out, ease-out);
}
.cycle-banner-cta { flex-shrink: 0; }
/* Per-employee cycle banner — same shape, but urgency tints the strip
   so the user instantly sees who's about to be paid. */
.cycle-banner-emp.cycle-banner-urg-today    { background: linear-gradient(135deg, var(--success-dim), var(--accent-dim)); border-color: var(--success); }
.cycle-banner-emp.cycle-banner-urg-today    .cycle-banner-icon { background: var(--success); }
.cycle-banner-emp.cycle-banner-urg-today    .cycle-banner-fill { background: var(--success); }
.cycle-banner-emp.cycle-banner-urg-tomorrow { background: linear-gradient(135deg, var(--warning-dim), var(--accent-dim)); border-color: var(--warning); }
.cycle-banner-emp.cycle-banner-urg-tomorrow .cycle-banner-icon { background: var(--warning); color: var(--text-inverse); }
.cycle-banner-emp.cycle-banner-urg-tomorrow .cycle-banner-fill { background: var(--warning); }
.cycle-banner-emp.cycle-banner-urg-soon     { background: linear-gradient(135deg, var(--warning-dim), var(--accent-dim)); }
.cycle-banner-emp.cycle-banner-urg-soon     .cycle-banner-fill { background: var(--warning); }

/* ── Fleet section — vehicle service-due cycle banner ─────────────────── */
/* Mirror the employee variants: 'today' = overdue/done now (red),
   'tomorrow' = next day (orange), 'soon' = within a week (warning),
   'normal'/'far' inherit the neutral default banner styling. */
.cycle-banner-veh.cycle-banner-urg-today    { background: linear-gradient(135deg, var(--danger-dim), var(--warning-dim)); border-color: var(--danger); }
.cycle-banner-veh.cycle-banner-urg-today    .cycle-banner-icon { background: var(--danger); color: #fff; }
.cycle-banner-veh.cycle-banner-urg-tomorrow { background: linear-gradient(135deg, var(--warning-dim), var(--accent-dim)); border-color: var(--warning); }
.cycle-banner-veh.cycle-banner-urg-tomorrow .cycle-banner-icon { background: var(--warning); color: var(--text-inverse); }
.cycle-banner-veh.cycle-banner-urg-soon     { background: linear-gradient(135deg, var(--warning-dim), var(--accent-dim)); }
.cycle-banner-veh.cycle-banner-urg-soon     .cycle-banner-icon { background: var(--warning); color: var(--text-inverse); }

/* Fuel-cost-spike cell — tinted background + danger border. The Bootstrap
   `.table tbody td` rules win against simple class selectors, so we use
   !important here and reset --bs-table-bg so a striped row tint doesn't
   wash this out. */
.table tbody td.fuel-cost-spike {
  background: var(--danger-dim) !important;
  border-left: 3px solid var(--danger) !important;
  --bs-table-bg: transparent;
  font-weight: 600;
}

@media (max-width: 576px) {
  .cycle-banner-progress { flex: 1 1 100%; }
  .cycle-banner-cta { flex: 1 1 100%; }
}
@media print { .cycle-banner { display: none !important; } }

/* Action-needed banner */
.action-banner {
  background: linear-gradient(135deg, var(--warning-dim), var(--danger-dim));
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.action-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--warning);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.action-banner-body { flex: 1 1 auto; min-width: 0; }
.action-banner-title { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; margin-bottom: 0.15rem; }
.action-banner-list { margin: 0; padding: 0; list-style: none; }
.action-banner-list li {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.action-banner-list li i { color: var(--warning-dark); flex-shrink: 0; }
.action-banner-list a { color: var(--accent); text-decoration: none; }
.action-banner-list a:hover { text-decoration: underline; }
/* Banner links that look like body text (used on /dashboard where each item
   is a clickable navigation row). --text-primary adapts to dark mode. */
.action-banner-list .action-banner-link { color: var(--text-primary); }
.action-banner-list .action-banner-link:hover { color: var(--text-primary); text-decoration: underline; }
.action-banner-list .action-banner-detail { color: var(--text-secondary); }
/* When an item has an inline action button (POST form / GET link), keep the
   button from getting compressed at narrow widths. */
.action-banner-list li > form,
.action-banner-list li > a.btn { flex-shrink: 0; }
.action-banner-list li > a.flex-grow-1 { min-width: 0; }
@media print { .action-banner { display: none !important; } }

/* Quick-view drawer (Bootstrap offcanvas extension) */
.workforce-drawer.offcanvas { width: 420px; }
@media (max-width: 576px) { .workforce-drawer.offcanvas { width: 100%; } }
.workforce-drawer .offcanvas-body { padding: 1rem; }
.drawer-header-block {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-muted);
}
.drawer-header-block .avatar { flex-shrink: 0; }
.drawer-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.drawer-mini-tile {
  background: var(--gray-50);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
}
.drawer-mini-tile .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 0.15rem;
}
.drawer-mini-tile .value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.drawer-mini-tile.alert .value { color: var(--danger); }
.drawer-mini-tile.warn  .value { color: var(--warning-dark); }
.drawer-mini-tile.ok    .value { color: var(--success-text); }
.drawer-section-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0.85rem 0 0.5rem;
}
.drawer-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.drawer-action-grid .btn { font-size: 0.8rem; padding: 0.4rem 0.55rem; }
.drawer-mini-list { list-style: none; padding: 0; margin: 0; }
.drawer-mini-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-muted);
  font-size: 0.82rem;
}
.drawer-mini-list li:last-child { border-bottom: 0; }
.drawer-mini-list .meta { color: var(--text-tertiary); font-size: 0.72rem; }
.drawer-mini-list .amt { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Workforce dashboard */
.workforce-shell {
  --wf-gap: 0.75rem;
  display: grid;
  gap: var(--wf-gap);
}
.workforce-header {
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0;
}
.workforce-header-actions {
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.workforce-header-actions .btn,
.workforce-period-form .btn,
.workforce-period-form .form-control {
  height: 30px;
}
.workforce-period-form {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.15rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 94%, var(--gray-100));
}
.workforce-period-form input[type="month"] {
  width: 8.8rem;
  min-width: 8.8rem;
  border-color: transparent;
  background: var(--surface);
}
.workforce-kpi-row .kpi-card {
  min-height: 86px;
  padding: 0.62rem 0.72rem;
}
.workforce-kpi-row .kpi-card .value {
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  letter-spacing: 0;
}
.workforce-kpi-row .kpi-card .label {
  font-size: 0.64rem;
  letter-spacing: 0.03em;
}
.workforce-kpi-row .kpi-card .sub {
  font-size: 0.68rem;
  line-height: 1.25;
  margin-top: 0.05rem;
}
.workforce-kpi-row .kpi-card-flat::before {
  top: 0.68rem;
  right: 0.72rem;
  width: 6px;
  height: 6px;
}
.workforce-board-card .table-responsive {
  max-height: 70vh;
}
.workforce-primary-board {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border-muted));
}
.workforce-primary-board > .table-toolbar:first-child {
  padding-block: 0.52rem;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 3%);
}
.workforce-primary-board .toolbar-title {
  font-size: 0.88rem;
}
.workforce-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr);
  gap: 0.75rem;
  align-items: start;
}
.workforce-secondary-grid > * {
  min-width: 0;
}
.workforce-secondary-grid .table-responsive { max-height: 420px; }
.workforce-secondary-grid .table-toolbar {
  align-items: flex-start;
  min-height: auto;
  padding-block: 0.42rem;
}
.workforce-secondary-grid .toolbar-controls {
  gap: 0.3rem;
}
.workforce-secondary-grid .filter-chips {
  gap: 0.3rem;
}
.workforce-secondary-grid .filter-chip {
  padding: 0.22rem 0.48rem;
  font-size: 0.72rem;
}
.max-w-180 { max-width: 180px; }
.workforce-shell .section-card {
  margin-bottom: 0;
}
.workforce-shell .table th {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 700;
}
.workforce-shell .table td {
  vertical-align: middle;
}
.workforce-shell .table.table-density-compact td,
.workforce-shell .table.table-density-compact th {
  padding: 0.32rem 0.48rem;
}
.workforce-shell .table.table-density-compact .btn-icon,
.workforce-shell .table.table-density-compact .quick-view-btn {
  width: 28px;
  height: 28px;
}
.workforce-shell .table.table-density-compact .status-pill,
.workforce-shell .table.table-density-compact .role-badge {
  font-size: 0.62rem;
  padding: 0.1rem 0.38rem;
}
.workforce-shell .table.table-density-compact .avatar-sm {
  width: 24px;
  height: 24px;
}
.workforce-shell .table.table-density-compact .payroll-state-sub {
  margin-top: 0.05rem;
  font-size: 0.66rem;
}
.workforce-shell .table-actions {
  gap: 0.2rem;
}

.workforce-shell .payroll-state-line {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.workforce-shell .payroll-state-amount {
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.workforce-shell .payroll-state-sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.workforce-shell .table tbody td.payroll-state-cell {
  border-left: 2px solid transparent !important;
  --bs-table-bg: transparent;
}
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-due,
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-needs_payslip,
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-ready {
  background: transparent !important;
  border-left-color: var(--warning) !important;
}
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-paid {
  background: transparent !important;
  border-left-color: var(--success) !important;
}
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-carryover {
  background: transparent !important;
  border-left-color: var(--danger) !important;
}
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-no_action {
  background: transparent !important;
}
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-needs_payslip .payroll-state-amount,
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-ready .payroll-state-amount {
  color: var(--warning-dark);
}
.workforce-shell .table tbody td.payroll-state-cell.payroll-state-paid .payroll-state-amount {
  color: var(--success-text);
}

.payroll-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.payroll-command.payroll-state-due,
.payroll-command.payroll-state-needs_payslip,
.payroll-command.payroll-state-ready {
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning-dim) 55%, var(--surface));
}
.payroll-command.payroll-state-paid {
  border-color: color-mix(in srgb, var(--success) 35%, transparent);
  background: color-mix(in srgb, var(--success-dim) 55%, var(--surface));
}
.payroll-command.payroll-state-carryover {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger-dim) 55%, var(--surface));
}
.payroll-command-main { min-width: 0; }
.payroll-command-kicker {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  font-weight: 700;
}
.payroll-command-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.payroll-command-sub,
.payroll-command-note {
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}
.payroll-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}
.pay-packet-calc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.pay-packet-calc > div {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-right: 1px solid var(--border-muted);
}
.pay-packet-calc > div:last-child { border-right: 0; }
.pay-packet-calc span,
.deduction-block-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  font-weight: 700;
}
.pay-packet-calc strong {
  display: block;
  margin-top: 0.12rem;
  font-size: 1rem;
  line-height: 1.15;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.pay-packet-calc .is-total strong {
  color: var(--accent);
  font-size: 1.12rem;
}
.pay-packet-calc-lg { margin-top: 0.8rem; max-width: 720px; }
.pay-packet-meta {
  display: flex;
  align-items: center;
  gap: 0.45rem 0.75rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.pay-packet-deductions {
  display: grid;
  gap: 0.35rem;
}
.deduction-chip-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.deduction-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.48rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--gray-100);
  color: var(--text-secondary);
}
.deduction-advance { background: var(--badge-purple-dim); color: var(--badge-purple); }
.deduction-shortage,
.deduction-damage { background: var(--danger-dim); color: var(--badge-danger); }
.deduction-loan { background: var(--info-dim); color: var(--badge-info); }
.pay-packet-note {
  font-size: 0.74rem;
  font-weight: 700;
}
@media (max-width: 720px) {
  .workforce-header {
    gap: 0.5rem;
  }
  .workforce-header-actions,
  .workforce-period-form {
    width: 100%;
    justify-content: flex-start;
  }
  .workforce-period-form input[type="month"] {
    flex: 1 1 9rem;
    min-width: 0;
  }
  .workforce-secondary-grid {
    grid-template-columns: 1fr;
  }
  .workforce-kpi-row {
    margin-bottom: 0.25rem !important;
  }
  .pay-packet-calc { grid-template-columns: 1fr; }
  .pay-packet-calc > div {
    border-right: 0;
    border-bottom: 1px solid var(--border-muted);
  }
  .pay-packet-calc > div:last-child { border-bottom: 0; }
  .payroll-command-actions { justify-content: stretch; }
}

/* Multi-select payroll batch — sticky footer toolbar */
.batch-toolbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 -1px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
  transform: translateY(110%);
  transition: transform 0.2s ease-out;
}
.batch-toolbar.is-active { transform: translateY(0); }
.batch-toolbar .batch-meta { flex: 1 1 auto; font-size: 0.85rem; color: var(--text-secondary); }
.batch-toolbar .batch-meta strong { color: var(--text-primary); }
.workforce-shell .batch-toolbar {
  padding: 0.55rem 0.75rem;
  gap: 0.5rem;
}
.workforce-shell .batch-toolbar .btn {
  padding-block: 0.28rem;
}

/* Loan modal preview — live calc of total repayable + term */
.loan-preview {
  background: var(--gray-50);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}
.loan-preview-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.15rem 0;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.loan-preview-row.total {
  border-top: 1px solid var(--border-muted);
  padding-top: 0.4rem;
  margin-top: 0.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.loan-preview-row.total strong { color: var(--accent); }
.loan-preview-row.sub {
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

/* Filter chips for cash ledger */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.filter-chip {
  font-size: 0.74rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filter-chip:hover { background: var(--accent-dim); color: var(--accent); }
.filter-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Action button bar — uniform clusters on employee_detail.
   Every button has the same shape, color, and size; clusters are grouped
   visually with a thin border + subtle category label. Hover/focus tints
   the button with the brand accent so it's clear which one will fire. */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: flex-start;
}
.action-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem 0.45rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--gray-50);
  position: relative;
}
.action-cluster::before {
  content: attr(data-cluster);
  position: absolute;
  top: -0.55rem;
  left: 0.7rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  background: var(--background);
  padding: 0 0.4rem;
  color: var(--text-tertiary);
  line-height: 1;
}
/* Uniform action button — same shape, same colour, icon + label */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 96%, var(--text-primary) 4%);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  font-family: inherit;
  line-height: 1.2;
}
.action-btn i { font-size: 0.95rem; }
.action-btn:hover,
.action-btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 8%);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.action-btn:active { transform: translateY(0.5px); box-shadow: none; }
.action-btn-primary {
  background: var(--accent, #D86883);
  border-color: color-mix(in srgb, var(--accent, #D86883) 80%, transparent);
  color: #fff;
}
.action-btn-primary:hover,
.action-btn-primary:focus-visible {
  background: color-mix(in srgb, var(--accent, #D86883) 90%, var(--text-primary) 10%);
  border-color: var(--accent, #D86883);
  color: #fff;
}
@media (max-width: 576px) {
  .action-bar { gap: 0.6rem; }
  .action-cluster { padding: 0.5rem 0.45rem 0.4rem; }
  .action-btn span { display: none; }  /* icon-only at narrow widths */
  .action-btn { padding: 0.45rem 0.6rem; }
  .action-btn i { font-size: 1.05rem; }
}

/* Mobile card view for roster (≤576px) */
@media (max-width: 576px) {
  .payroll-command {
    grid-template-columns: 1fr;
    padding: 0.85rem;
  }
  .payroll-command-actions {
    justify-content: stretch;
  }
  .payroll-command-actions .btn,
  .payroll-command-actions form,
  .payroll-command-actions form .btn {
    width: 100%;
  }
  .workforce-shell .roster-mobile-cards { display: block !important; }
  .workforce-shell .roster-mobile-cards thead { display: none; }
  .workforce-shell .roster-mobile-cards tbody,
  .workforce-shell .roster-mobile-cards tr { display: block; }
  .workforce-shell .roster-mobile-cards tr {
    background: var(--surface);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-sm);
    margin-bottom: 0.48rem;
    padding: 0.55rem 0.65rem;
    box-shadow: var(--shadow-xs);
  }
  .workforce-shell .roster-mobile-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.16rem 0;
    border: 0;
    text-align: right;
  }
  .workforce-shell .roster-mobile-cards td > * {
    min-width: 0;
  }
  .workforce-shell .roster-mobile-cards .payroll-state-sub {
    max-width: min(190px, 58vw);
    margin-left: auto;
    white-space: normal;
  }
  .workforce-shell .roster-mobile-cards td::before {
    content: attr(data-label);
    font-size: 0.62rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    text-align: left;
    flex-shrink: 0;
  }
  .workforce-shell .roster-mobile-cards td:first-child::before { display: none; }
  .workforce-shell .roster-mobile-cards td:first-child {
    padding-bottom: 0.42rem;
    margin-bottom: 0.28rem;
    border-bottom: 1px solid var(--border-muted);
    justify-content: flex-start;
  }
  .workforce-shell .roster-mobile-cards .table-actions {
    justify-content: flex-end;
    gap: 0.2rem;
  }
  .workforce-shell .table-toolbar {
    padding: 0.55rem 0.65rem;
  }
  .workforce-shell .toolbar-divider {
    display: none;
  }
  .workforce-shell .btn-group.btn-group-sm .btn {
    padding-inline: 0.45rem;
  }
}

/* Keyboard shortcut help overlay */
.kbd-help {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: 0;
}
.kbd-help kbd {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: var(--gray-100);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 24px;
  text-align: center;
}

/* Quick-action button: "View" eye on roster — distinguish from name link */
.quick-view-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.quick-view-btn:hover {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent-ring);
}

/* Long-running form spinner overlay */
.lr-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1080;
  backdrop-filter: blur(2px);
}
.lr-overlay-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: var(--shadow-md);
}
.lr-overlay-card .spinner-border {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--accent);
}
.lr-overlay-card .label { font-weight: 600; color: var(--text-primary); }

/* Inline-edit info card on employee_detail */
.info-card-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
}
.info-card-inline .field { display: flex; flex-direction: column; gap: 0.15rem; }
.info-card-inline label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  font-weight: 600;
}
.info-card-edit-bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

/* Make canvas elements maintain aspect ratio inside chart-card */
.chart-card canvas { width: 100% !important; height: 100% !important; }
.kpi-spark canvas { width: 100% !important; height: 28px !important; }

/* Print: hide drawer, banners, toolbars */
@media print {
  .workforce-drawer,
  .action-banner,
  .batch-toolbar,
  .quick-view-btn,
  .filter-chips { display: none !important; }
}

/* ─── Dashboard redesign: pulse strip + decisions panel ──────────────── */

.period-close-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.period-close-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem 0.4rem 0.45rem;
  background: color-mix(in srgb, var(--surface) 96%, var(--text-primary) 4%);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 8%, transparent);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--text-primary, #0C0C0B);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  white-space: nowrap;
}
.period-close-pill:hover {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 6%);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border-muted));
  transform: translateY(-1px);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--text-primary) 9%, transparent);
}
.period-close-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--warning, #ff9500) 18%, transparent);
  color: var(--warning, #ff9500);
  font-size: 0.85rem;
}
.period-close-label { font-weight: 600; }
.period-close-period { color: var(--text-secondary, #6e6e73); font-variant-numeric: tabular-nums; }
.period-close-progress {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--gray-100, rgba(0,0,0,0.08));
  border-radius: var(--radius-full);
  overflow: hidden;
}
.period-close-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent, #6B1F2E);
  border-radius: var(--radius-full);
  transition: width 200ms ease;
}
.period-close-count {
  font-size: 0.72rem;
  color: var(--text-secondary, #6e6e73);
  font-variant-numeric: tabular-nums;
}
.period-close-arrow {
  color: var(--text-secondary, #6e6e73);
  font-size: 0.8rem;
  transition: transform 140ms ease;
}
.period-close-pill:hover .period-close-arrow { transform: translateX(2px); }

/* Forward forecast tiles — match the modernized Signals chip aesthetic.
   Scoped to .forecast-row so we don't touch other section-cards in the app. */
.forecast-row > [class*="col-"] > a { display: block; }
.forecast-row .section-card {
  border: 1px solid color-mix(in srgb, var(--text-secondary) 8%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, var(--text-primary) 4%);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.forecast-row > [class*="col-"] > a:hover .section-card {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 6%);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border-muted));
  transform: translateY(-1px);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--text-primary) 9%, transparent);
}
.forecast-row .section-card .bi-arrow-right {
  transition: transform 140ms ease, color 140ms ease;
}
.forecast-row > [class*="col-"] > a:hover .section-card .bi-arrow-right {
  transform: translateX(3px);
  color: var(--accent, #D86883) !important;
}
.forecast-row .section-card h2.h6 i {
  color: var(--accent, #D86883);
}

/* Quiet section subhead — replaces the chunky uppercase kpi-section-label */
.kpi-subhead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: var(--text-secondary, #6e6e73);
  letter-spacing: 0.04em;
  margin: 1rem 0 0.5rem;
}
.kpi-subhead > span {
  font-weight: 600;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.kpi-subhead::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-muted, rgba(0,0,0,0.08));
}

/* Compact, flat KPI cards — quieter than the colored variant.
   The chip-palette hover treatment is intentionally applied to every
   `.kpi-card-flat` instance, not just `.kpi-row-compact` ones, so cards
   on intelligence sub-pages (activation, today, cross-sell, etc.) match. */
.kpi-card-flat {
  background: color-mix(in srgb, var(--surface) 96%, var(--text-primary) 4%);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 8%, transparent);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 1rem;
  box-shadow: none;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.kpi-card-flat:hover,
a.kpi-link:hover .kpi-card-flat {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 6%);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border-muted));
  transform: translateY(-1px);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--text-primary) 9%, transparent);
}
a.kpi-link .kpi-link-arrow {
  transition: transform 140ms ease;
}
a.kpi-link:hover .kpi-link-arrow {
  transform: translateX(3px);
}
.kpi-row-compact .kpi-card-flat .label {
  font-size: 0.76rem;
  color: var(--text-secondary, #6e6e73);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
}
.kpi-row-compact .kpi-card-flat .value {
  font-size: 1.65rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #0C0C0B);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.kpi-row-compact .kpi-card-flat .kpi-variance {
  margin-top: 0.3rem;
  font-size: 0.74rem;
}

/* Accent dot at top-right, themed by data-accent — bigger so it reads */
.kpi-card-flat::before {
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}
.kpi-card-flat[data-accent="success"]::before { background: var(--success, #34c759); }
.kpi-card-flat[data-accent="info"]::before    { background: var(--info,    #007aff); }
.kpi-card-flat[data-accent="warning"]::before { background: var(--warning, #ff9500); }
.kpi-card-flat[data-accent="purple"]::before  { background: var(--brand-gold-muted); }
.kpi-card-flat[data-accent="danger"]::before  { background: var(--danger,  #ff3b30); }

.kpi-link {
  text-decoration: none;
  color: inherit;
}
.kpi-link:hover .kpi-card-flat {
  border-color: var(--accent-ring, rgba(99,102,241,0.28));
  transform: translateY(-1px);
}
/* Arrow hint on linkable KPI cards. Positioned absolutely (top-right corner)
   so it doesn't crowd the label text — labels in compact 2-up cards on mobile
   need every pixel of width. Reveals more strongly on hover for affordance. */
.kpi-link-arrow {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  font-size: 0.65rem;
  color: var(--text-secondary, #6e6e73);
  opacity: 0.45;
  transition: transform 120ms ease, opacity 120ms ease;
  pointer-events: none;
}
.kpi-link:hover .kpi-link-arrow {
  opacity: 1;
  transform: translateX(2px);
}
/* Make sure the parent KPI card establishes a positioning context. */
.kpi-link .kpi-card { position: relative; }

/* Chart card with inline legend */
.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.72rem;
  color: var(--text-secondary, #6e6e73);
}
.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.chart-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.chart-swatch-line {
  height: 3px;
  border-radius: 2px;
}
/* Semantic chart-swatch colour modifiers — replaces inline styles. */
.chart-swatch--success { background: var(--success); }
.chart-swatch--danger  { background: var(--danger); }
.chart-swatch--warning { background: var(--warning); }
.chart-swatch--info    { background: var(--info); }
.chart-swatch--accent  { background: var(--accent); }



.pulse-strip {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0.95rem 1.1rem;
  background: color-mix(in srgb, var(--surface) 96%, var(--text-primary) 4%);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 8%, transparent);
  border-radius: 10px;
  box-shadow: none;
  flex-wrap: wrap;
}
.pulse-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 138px;
  padding: 0.2rem 2.05rem 0.2rem 0.95rem;
  border-right: 1px solid color-mix(in srgb, var(--text-secondary) 10%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 6px;
  transition: background 140ms ease;
}
.pulse-cell:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.pulse-cell.is-pinned {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 9%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.metric-pin {
  position: absolute;
  top: 0.42rem;
  right: 0.42rem;
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary, #6e6e73);
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}
.metric-pin:hover,
.metric-pin:focus-visible,
.metric-pin.is-active,
.pulse-cell:hover .metric-pin {
  opacity: 1;
}
.metric-pin:hover,
.metric-pin:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.metric-pin.is-active {
  color: var(--accent);
}
.metric-pin:active {
  transform: scale(0.94);
}
.pulse-cell:last-child { border-right: 0; }
.pulse-cell:first-child { padding-left: 0; }
.pulse-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #6e6e73);
  font-weight: 700;
}
.pulse-value {
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary, #0C0C0B);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pulse-sub {
  font-size: 0.74rem;
  color: var(--text-secondary, #6e6e73);
  font-weight: 500;
}
.pulse-delta {
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  width: fit-content;
}
.pulse-delta.delta-up    { color: var(--success-text, #1a7e34); background: var(--success-dim, rgba(52,199,89,0.14)); }
.pulse-delta.delta-down  { color: var(--danger-text,  #c0271f); background: var(--danger-dim,  rgba(255,59,48,0.14)); }
.pulse-delta.delta-flat  { color: var(--text-secondary, #6e6e73); }

.hub-command-grid {
  display: grid;
  gap: 1rem;
}
.hub-command-rail {
  min-width: 0;
}
.hub-command-main {
  min-width: 0;
}
@media (min-width: 1180px) {
  .hub-command-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
  }
  .hub-command-main {
    grid-column: 1;
    grid-row: 1;
  }
  .hub-command-rail {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 1rem;
    align-self: start;
    z-index: 1;
  }
  .hub-command-rail .period-close-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .hub-command-rail .period-close-pill {
    width: 100%;
  }
  .hub-command-rail .pulse-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.8rem;
  }
  .hub-command-rail .pulse-cell {
    min-width: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-muted, rgba(0,0,0,0.08));
    padding: 0.65rem 1.95rem 0.65rem 0.7rem;
  }
  .hub-command-rail .pulse-cell:nth-child(odd) {
    border-right: 1px solid var(--border-muted, rgba(0,0,0,0.08));
  }
  .hub-command-rail .pulse-cell:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .hub-command-rail .pulse-cell:first-child {
    padding-left: 0.7rem;
  }
  .hub-command-rail .pulse-value {
    font-size: 1.42rem;
  }
  .hub-command-rail .pulse-sub {
    font-size: 0.7rem;
  }
}

@media (max-width: 720px) {
  .pulse-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.8rem;
    gap: 0;
  }
  .pulse-cell {
    border-right: 0;
    border-bottom: 1px solid var(--border-muted, rgba(0,0,0,0.08));
    padding: 0.65rem 1.95rem 0.65rem 0.7rem;
    min-width: 0;
  }
  .pulse-cell:nth-child(odd) {
    border-right: 1px solid var(--border-muted, rgba(0,0,0,0.08));
  }
  .pulse-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .pulse-cell:first-child { padding-left: 0.7rem; }
  .pulse-value { font-size: 1.5rem; }
  .pulse-label { font-size: 0.68rem; }
}

.decisions-panel {
  padding: 0.85rem 0.95rem 0.95rem;
}
.decisions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.decisions-header h2 { font-size: 0.98rem; letter-spacing: -0.01em; }
.signals-header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.signal-filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 10%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--text-primary) 5%);
  overflow-x: auto;
  scrollbar-width: none;
}
.signal-filter-bar::-webkit-scrollbar { display: none; }
.signal-filter {
  border: 0;
  background: transparent;
  color: var(--text-secondary, #6e6e73);
  border-radius: 6px;
  padding: 0.22rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  transition: background 130ms ease, color 130ms ease;
}
.signal-filter:hover {
  color: var(--text-primary, #0C0C0B);
  background: color-mix(in srgb, var(--text-primary, #0C0C0B) 6%, transparent);
}
.signal-filter.is-active {
  color: #fff;
  background: var(--accent, #D86883);
}
.signal-filter-count {
  min-width: 1.12rem;
  height: 1.02rem;
  padding: 0 0.32rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--text-secondary, #6e6e73);
  background: color-mix(in srgb, var(--text-primary, #0C0C0B) 8%, transparent);
}
.signal-filter.is-active .signal-filter-count {
  color: var(--accent, #D86883);
  background: #fff;
}
.signals-filter-empty {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary, #6e6e73);
  padding: 0.7rem 0.55rem;
  font-size: 0.84rem;
}
.signals-filter-empty[hidden] { display: none !important; }
.signals-bracket.is-filtered-out,
.signal-filter-item.is-filtered-out {
  display: none !important;
}

/* Panel body — internal scroll when content overruns 70vh. Thin accent
   scrollbar lets the operator scan a busy day without the panel pushing
   the rest of the hub off-screen. */
.signals-body {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 2px;
}
.signals-body::-webkit-scrollbar { width: 5px; }
.signals-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent, #D86883) 35%, transparent);
  border-radius: var(--radius-full);
}
.signals-body::-webkit-scrollbar-track { background: transparent; }

/* Bracket section — Act now / Today / This week / Watch.
   Tiny uppercase label + count chip, then the rows underneath. */
.signals-bracket + .signals-bracket { margin-top: 0.85rem; }
.signals-bracket-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem 0.15rem;
}
.signals-bracket-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary, #6e6e73);
}
.signals-bracket-count {
  display: inline-flex;
  align-items: center;
  min-width: 1.2rem;
  height: 1.05rem;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  color: var(--text-secondary, #6e6e73);
  background: color-mix(in srgb, var(--text-primary, #0C0C0B) 6%, transparent);
}
.signals-bracket-critical .signals-bracket-label { color: var(--danger, #ff3b30); }
.signals-bracket-critical .signals-bracket-count {
  color: var(--danger, #ff3b30);
  background: color-mix(in srgb, var(--danger, #ff3b30) 14%, transparent);
}
.signals-bracket-high .signals-bracket-label     { color: var(--warning, #ff9500); }
.signals-bracket-high .signals-bracket-count {
  color: var(--warning, #ff9500);
  background: color-mix(in srgb, var(--warning, #ff9500) 14%, transparent);
}
.signals-bracket-medium .signals-bracket-label   { color: var(--accent, #D86883); }
.signals-bracket-medium .signals-bracket-count {
  color: var(--accent, #D86883);
  background: color-mix(in srgb, var(--accent, #D86883) 14%, transparent);
}
.decisions-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  color: var(--text-secondary, #6e6e73);
  font-size: 0.85rem;
}
.decisions-empty i { font-size: 1rem; }

/* Modernized signals row — rounded chip with leading badge, hover-lift.
   Replaces the older flat-border list style. */
.decision-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem 0.5rem 0.55rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 8%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, var(--text-primary) 4%);
  margin-bottom: 6px;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  font-size: 0.83rem;
  line-height: 1.3;
}
.decision-row:hover {
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 6%);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border-muted));
  transform: translateY(-1px);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--text-primary) 9%, transparent);
}
.decision-row.decision-critical {
  background: color-mix(in srgb, var(--surface) 78%, var(--danger) 12%);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.decision-row.decision-high {
  background: color-mix(in srgb, var(--surface) 84%, var(--warning) 11%);
  border-color: color-mix(in srgb, var(--warning) 24%, transparent);
}
.decision-row.decision-medium {
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 5%);
  border-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
.decision-row.decision-low {
  background: color-mix(in srgb, var(--surface) 95%, var(--text-secondary) 5%);
  border-color: color-mix(in srgb, var(--text-secondary) 12%, transparent);
}

/* Circular icon badge on the leading edge — primary visual for priority */
.decision-badge {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-secondary);
  transition: background 140ms ease, transform 140ms ease;
}
.decision-row:hover .decision-badge { transform: scale(1.04); }
.decision-row.decision-critical .decision-badge {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}
.decision-row.decision-high .decision-badge {
  background: color-mix(in srgb, var(--warning) 22%, transparent);
  color: var(--warning);
}
.decision-row.decision-medium .decision-badge {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.decision-row.decision-low .decision-badge {
  background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
  color: var(--text-secondary);
}
.decision-row.decision-insight .decision-badge {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Critical-priority badge: subtle pulse so the eye lands on it first.
   1.6s cycle, 1 → 1.06 scale + soft danger glow. Disabled for users with
   reduced-motion preference. */
@keyframes signalPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger, #ff3b30) 30%, transparent);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #ff3b30) 0%, transparent);
  }
}
.decision-row.decision-critical .decision-badge {
  animation: signalPulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .decision-row.decision-critical .decision-badge { animation: none; }
}
.decision-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.decision-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.decision-body:hover .decision-title { text-decoration: underline; }
.decision-title {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--text-primary, #0C0C0B);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.decision-detail {
  font-size: 0.74rem;
  color: var(--text-secondary, #6e6e73);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

/* Strategic synthesis pill — accent-tinted, sparkle-prefixed, inline */
.decision-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem 0.06rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #D86883);
  background: color-mix(in srgb, var(--accent, #D86883) 14%, transparent);
  border-radius: var(--radius-full);
  vertical-align: middle;
  white-space: nowrap;
}
.decision-tag::before {
  content: "✦";
  font-size: 0.72rem;
  line-height: 1;
}

/* ── Signal groups (collapsed multi-row families) ────────────────── */
.signal-group {
  margin-bottom: 6px;
}
.signal-group > .signal-group-summary {
  list-style: none;
  cursor: pointer;
  /* the row already has the same chip styling — keep it */
  margin-bottom: 0;
  position: relative;
}
.signal-group > .signal-group-summary::-webkit-details-marker { display: none; }
.signal-group > .signal-group-summary::marker { display: none; }
.signal-group > .signal-group-summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #D86883) 50%, transparent);
  outline-offset: 2px;
}
.signal-group[open] > .signal-group-summary {
  border-color: color-mix(in srgb, var(--accent, #D86883) 32%, var(--border-muted));
}
.signal-group-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--text-secondary, #6e6e73);
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}
.signal-group-toggle:hover {
  background: color-mix(in srgb, var(--text-primary, #0C0C0B) 6%, transparent);
  color: var(--text-primary, #0C0C0B);
}
.signal-group-chevron {
  font-size: 0.85rem;
  transition: transform 180ms ease;
}
.signal-group[open] .signal-group-chevron { transform: rotate(180deg); }

.signal-group-children {
  margin-top: 4px;
  padding-left: 18px;
  border-left: 1px solid color-mix(in srgb, var(--accent, #D86883) 22%, transparent);
  margin-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.signal-group-children .decision-row-child {
  /* Children are visually slightly less prominent than the summary */
  background: color-mix(in srgb, var(--surface) 97%, var(--text-primary) 3%);
  border-color: color-mix(in srgb, var(--text-secondary) 6%, transparent);
  margin-bottom: 0;
}
.signal-group-children .decision-row-child .decision-badge {
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
}

.decision-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.btn.btn-xs {
  padding: 0.12rem 0.45rem;
  font-size: 0.7rem;
  line-height: 1.35;
  border-radius: 5px;
}

/* Modernized POST action button — slim, accent-filled */
.btn-signal-action {
  padding: 0.18rem 0.55rem;
  font-size: 0.7rem;
  line-height: 1.35;
  border-radius: 5px;
  font-weight: 600;
  color: #fff;
  background: var(--accent, #D86883);
  border: 1px solid color-mix(in srgb, var(--accent, #D86883) 80%, transparent);
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.btn-signal-action:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.btn-signal-action:active { transform: translateY(0); }

/* Snooze: hover-revealed only — keeps rest-state calm but tap target stays. */
.btn-snooze-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary, #6e6e73);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
  opacity: 0;
  transition: opacity 130ms ease, background 130ms ease, color 130ms ease;
}
.decision-row:hover .btn-snooze-icon,
.signal-group-summary:hover .btn-snooze-icon,
.btn-snooze-icon:focus-visible { opacity: 0.7; }
.btn-snooze-icon:hover {
  background: color-mix(in srgb, var(--text-primary, #0C0C0B) 6%, transparent);
  color: var(--text-primary, #0C0C0B);
  opacity: 1;
}

@media (max-width: 600px) {
  .decision-detail { display: none; }
  .decision-row { font-size: 0.82rem; }
  .signal-group-children { padding-left: 12px; margin-left: 8px; }
  .signals-header-tools {
    width: 100%;
    align-items: stretch;
  }
  .signal-filter-bar {
    width: 100%;
  }
  .signal-filter {
    flex: 0 0 auto;
  }
}

@media print {
  .decisions-panel,
  .pulse-strip { box-shadow: none !important; }
  .decision-actions { display: none !important; }
  .signals-bracket-head { display: none; }
  /* Force-expand all groups for print */
  .signal-group .signal-group-children { display: flex !important; }
  .signal-group-toggle { display: none; }
  .decision-row.decision-critical .decision-badge { animation: none; }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  DEEP UI POLISH — Phase A (Design System Normalization)             ║
   ║  Adds status-pill system, utility classes, table utilities,         ║
   ║  required-field marker, skeleton loaders, row-hover actions,        ║
   ║  print refinements. Deliberately appended at end so it overrides    ║
   ║  earlier rules where intentional, with consistent token use.        ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Status pill — unified replacement for .badge-* family ──
   Use with `.is-{kind}` modifier. Optional leading icon via
   `data-icon="check|exclamation|info|dot"` (Phase E color-blind hook).
   Shape composed from existing .badge base styles for visual parity. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1px;
  border-radius: var(--radius-full);
  padding: 2px 9px;
  border: none;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.45;
  background: var(--gray-100);
  color: var(--text-secondary);
}
.status-pill > i.bi,
.status-pill > .bi {
  font-size: 0.72em;
  line-height: 1;
  vertical-align: -1px;
}
/* Optional pre-icon hook (Phase E enables on .is-paid/.is-overdue/etc.) */
.status-pill[data-icon]::before {
  font-family: "bootstrap-icons";
  font-size: 0.72em;
  line-height: 1;
  display: inline-block;
}
.status-pill[data-icon="check"]::before { content: "\f26b"; }
.status-pill[data-icon="exclamation"]::before { content: "\f33a"; }
.status-pill[data-icon="info"]::before { content: "\f431"; }
.status-pill[data-icon="dot"]::before { content: "\f287"; }

/* Color-blind safety: auto-attach an icon glyph to high-stakes pills so
   colour is not the only signal. Only triggers when the pill has no
   inline <i class="bi …"> or data-icon override (a11y fallback only). */
.status-pill.is-paid:not([data-icon]):not(:has(.bi))::before,
.status-pill.is-overdue:not([data-icon]):not(:has(.bi))::before,
.status-pill.is-credit:not([data-icon]):not(:has(.bi))::before,
.status-pill.is-reorder:not([data-icon]):not(:has(.bi))::before,
.status-pill.is-out:not([data-icon]):not(:has(.bi))::before {
  font-family: "bootstrap-icons";
  font-size: 0.72em;
  line-height: 1;
  display: inline-block;
  margin-right: 1px;
}
.status-pill.is-paid:not([data-icon]):not(:has(.bi))::before    { content: "\f26b"; } /* check-circle */
.status-pill.is-overdue:not([data-icon]):not(:has(.bi))::before { content: "\f33a"; } /* exclamation-circle */
.status-pill.is-credit:not([data-icon]):not(:has(.bi))::before  { content: "\f47f"; } /* hourglass */
.status-pill.is-reorder:not([data-icon]):not(:has(.bi))::before { content: "\f12c"; } /* arrow-clockwise */
.status-pill.is-out:not([data-icon]):not(:has(.bi))::before     { content: "\f622"; } /* x-circle */

/* Semantic modifiers — paid/active/positive intent */
.status-pill.is-paid,
.status-pill.is-active,
.status-pill.is-cash,
.status-pill.is-revenue,
.status-pill.is-income,
.status-pill.is-balanced,
.status-pill.is-success    { background: var(--success-dim); color: var(--badge-success); }

/* Pending / warning / mid-severity */
.status-pill.is-pending,
.status-pill.is-warning,
.status-pill.is-credit,
.status-pill.is-reorder,
.status-pill.is-liability  { background: var(--warning-dim); color: var(--badge-warning); }

/* Overdue / out / destructive / negative */
.status-pill.is-overdue,
.status-pill.is-out,
.status-pill.is-unbalanced,
.status-pill.is-expense,
.status-pill.is-draw,
.status-pill.is-shortage,
.status-pill.is-damage,
.status-pill.is-danger     { background: var(--danger-dim); color: var(--badge-danger); }

/* Info / informational / business / asset / loan */
.status-pill.is-business,
.status-pill.is-asset,
.status-pill.is-loan,
.status-pill.is-info,
.status-pill.is-overpaid   { background: var(--info-dim); color: var(--badge-info); }

/* Personal / equity / advance — distinct purple lane */
.status-pill.is-personal,
.status-pill.is-equity,
.status-pill.is-contribution,
.status-pill.is-advance    { background: var(--badge-purple-dim); color: var(--badge-purple); }

/* Neutral — sources, inactive, miscellaneous */
.status-pill.is-source,
.status-pill.is-inactive,
.status-pill.is-paused,
.status-pill.is-other,
.status-pill.is-neutral    { background: var(--gray-100); color: var(--text-secondary); }

/* Brand accent — for "Sale", "Owing", premium tags */
.status-pill.is-sale,
.status-pill.is-owing,
.status-pill.is-brand      { background: var(--accent-dim); color: var(--accent); }

/* Inline counter chip (used as `<span class="status-pill is-count">12</span>`) */
.status-pill.is-count {
  background: var(--gray-200);
  color: var(--text-primary);
  padding: 1px 7px;
  font-size: 0.7rem;
}

/* Dark-mode tint adjustments — keep tokens in charge */
[data-theme="dark"] .status-pill { background: var(--gray-200); color: var(--text-secondary); }
[data-theme="dark"] .status-pill.is-source,
[data-theme="dark"] .status-pill.is-inactive,
[data-theme="dark"] .status-pill.is-paused,
[data-theme="dark"] .status-pill.is-other,
[data-theme="dark"] .status-pill.is-neutral { background: var(--gray-200); color: var(--text-primary); }

/* ── Utility classes — replace inline styles in templates ── */

/* Widths (used in <th>, <col>, etc.) */
.w-14p   { width: 14% !important; }
.w-30px  { width: 30px !important; }
.w-36px  { width: 36px !important; }
.w-90px  { width: 90px !important; }
.w-220px { width: 220px !important; }
.w-min-90 { min-width: 90px !important; }
.mw-420  { max-width: 420px !important; }
.mh-200  { max-height: 200px !important; overflow: auto !important; }
.mh-240  { max-height: 240px !important; overflow: auto !important; }
.mh-300  { max-height: 300px !important; overflow-y: auto !important; }

/* Type — granular smaller-than-Bootstrap sizing */
.text-xxs       { font-size: 0.72rem !important; }
.text-2xs       { font-size: 0.73rem !important; }
.fs-1rem        { font-size: 1rem !important; }
.tracking-wider { letter-spacing: 0.04em !important; }

/* Spacing nudges */
.mt-2px    { margin-top: 2px !important; }
.opacity-60 { opacity: 0.6 !important; }
.no-underline { text-decoration: none !important; }

/* Layout */
.cell-wrap { white-space: normal !important; }
.grid-span-2 { grid-column: span 2 !important; }

/* ── Table utilities ── */

/* Zebra striping — odd rows tinted; respects dark mode via tokens */
.table-zebra > tbody > tr:nth-child(odd) > * {
  background-color: var(--gray-50);
}
[data-theme="dark"] .table-zebra > tbody > tr:nth-child(odd) > * {
  background-color: rgba(255, 255, 255, 0.025);
}
/* Don't zebra-stripe rows that already carry a semantic color */
.table-zebra > tbody > tr.table-section-header > *,
.table-zebra > tbody > tr.table-primary > *,
.table-zebra > tbody > tr.table-warning > *,
.table-zebra > tbody > tr.table-success > *,
.table-zebra > tbody > tr.table-danger > *,
.table-zebra > tbody > tr.table-info > *,
.table-zebra > tbody > tr[class*="status-row-"] > * {
  background-color: revert;
}

/* Numeric — right-align all cells except the first; tabular-nums */
.table-numeric > thead > tr > th:not(:first-child),
.table-numeric > tbody > tr > td:not(:first-child),
.table-numeric > tfoot > tr > td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* Sticky table head — sit beneath sidebar but above tbody */
.table-sticky-head > thead > tr > th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: var(--z-sticky, 2);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* ── Required-field marker ──
   Apply to <label class="form-label field-required"> on inputs that have
   the `required` attribute. Uses --danger token; survives translation. */
.field-required::after {
  content: " *";
  color: var(--danger);
  font-weight: 700;
  margin-left: 1px;
}

/* ── Skeleton loaders (Phase C) ──
   Use as: <div class="skeleton skeleton-row"></div>
   Or wrap a section with data-skeleton-pending and the JS hides on render. */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--gray-100) 0%,
    var(--gray-200) 50%,
    var(--gray-100) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton-row  { height: 2.25rem; margin-bottom: 0.5rem; }
.skeleton-text { height: 0.85rem; margin-bottom: 0.4rem; }
.skeleton-text.skeleton-w-50 { width: 50%; }
.skeleton-text.skeleton-w-75 { width: 75%; }
.skeleton-text.skeleton-w-30 { width: 30%; }
.skeleton-card { height: 6rem; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-200) 0%,
    var(--gray-300) 50%,
    var(--gray-200) 100%
  );
  background-size: 200% 100%;
}

/* ── Row-hover quick actions (Phase C) ──
   <tr><td class="cell-actions"><div class="row-actions">...buttons...</div></td></tr>
   Hidden by default on desktop; revealed on hover/focus-within.
   Touch (≤ 768px) shows them always. */
tr { position: relative; }
.row-actions {
  display: inline-flex;
  gap: 0.25rem;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
}
tr:hover .row-actions,
tr:focus-within .row-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
@media (max-width: 768px), (hover: none) {
  .row-actions { opacity: 1; transform: none; pointer-events: auto; }
}
.row-actions .btn {
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

/* ── Mobile column collapse (Phase E) ──
   Mark non-essential <th>/<td> with .col-md-collapse; hides on phones. */
@media (max-width: 768px) {
  .col-md-collapse { display: none !important; }
}

/* ── Filter chip row (Phase D — saved filters) ── */
.saved-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.saved-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  font-size: 0.74rem;
}
.saved-filter-chip:hover { background: var(--accent-dim); border-color: var(--accent); }
.saved-filter-chip.is-active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.saved-filter-chip-add {
  border-style: dashed;
  background: transparent;
}
.saved-filter-chip-delete {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.15rem;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 0.85em;
  line-height: 1;
}
.saved-filter-chip-delete:hover { opacity: 1; color: var(--danger); }

/* ── Inline validation hint (Phase D) ── */
.inline-validation {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  margin-top: 0.25rem;
  min-height: 1.1rem;
  color: var(--text-secondary);
}
.inline-validation.is-valid    { color: var(--success); }
.inline-validation.is-warning  { color: var(--warning); }
.inline-validation.is-invalid  { color: var(--danger); }
.inline-validation .suggest-link {
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
}

/* ── Relative-time element (Phase C) ── */
time[data-relative] {
  cursor: help;
  border-bottom: 1px dotted var(--border);
}

/* ── Cash-runway pulse cell warning state (Phase D) ── */
.pulse-cell-warn {
  background: var(--danger-dim);
  border-radius: var(--radius-md);
}
.pulse-cell-warn .pulse-label,
.pulse-cell-warn .pulse-sub { color: var(--badge-danger); }


/* ── Print refinements for the new components ── */
@media print {
  .status-pill {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--text-secondary) !important;
    padding: 0 4px !important;
  }
  .row-actions,
  .saved-filter-chips,
  .inline-validation { display: none !important; }
  .skeleton { animation: none !important; background: transparent !important; }
}

/* ── Intelligence layer: RFM + ABC pills ────────────────────────────── */
.status-pill.rfm-champion   { background: var(--success-dim); color: var(--success-text);
                              border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.status-pill.rfm-loyal      { background: color-mix(in srgb, var(--accent) 12%, transparent);
                              color: var(--accent);
                              border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.status-pill.rfm-new        { background: color-mix(in srgb, var(--info, #007aff) 12%, transparent);
                              color: var(--info, #007aff);
                              border-color: color-mix(in srgb, var(--info, #007aff) 25%, transparent); }
.status-pill.rfm-regular    { background: var(--surface-2, color-mix(in srgb, var(--text-secondary) 8%, transparent));
                              color: var(--text-secondary);
                              border-color: var(--border-muted); }
.status-pill.rfm-at-risk    { background: var(--warning-dim); color: var(--warning-text);
                              border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.status-pill.rfm-lost       { background: color-mix(in srgb, var(--danger) 10%, transparent);
                              color: var(--danger);
                              border-color: color-mix(in srgb, var(--danger) 22%, transparent); }

.status-pill.abc-class      { font-variant: tabular-nums; }
.status-pill.abc-class-a    { background: var(--success-dim); color: var(--success-text);
                              border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.status-pill.abc-class-b    { background: color-mix(in srgb, var(--accent) 10%, transparent);
                              color: var(--accent);
                              border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.status-pill.abc-class-c    { background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
                              color: var(--text-secondary);
                              border-color: var(--border-muted); }

/* RFM heatmap tiles */
.rfm-tile {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md, 10px);
  padding: 0.85rem 0.9rem;
  height: 100%;
  background: var(--surface);
  transition: transform 0.15s ease;
}
.rfm-tile:hover { transform: translateY(-2px); }
.rfm-tile-count {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.rfm-tile-label {
  font-weight: 600;
  margin-top: 0.4rem;
  font-size: 0.92rem;
}
.rfm-tile-desc {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.3;
}
.rfm-tile.rfm-champion  { border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.rfm-tile.rfm-champion .rfm-tile-label { color: var(--success-text); }
.rfm-tile.rfm-loyal     { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.rfm-tile.rfm-loyal .rfm-tile-label { color: var(--accent); }
.rfm-tile.rfm-new       { border-color: color-mix(in srgb, var(--info, #007aff) 30%, transparent); }
.rfm-tile.rfm-new .rfm-tile-label { color: var(--info, #007aff); }
.rfm-tile.rfm-at-risk   { border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.rfm-tile.rfm-at-risk .rfm-tile-label { color: var(--warning-text); }
.rfm-tile.rfm-lost      { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.rfm-tile.rfm-lost .rfm-tile-label { color: var(--danger); }

/* Insights feed rows */
.insights-list { display: flex; flex-direction: column; gap: 0.5rem; }
.insight-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-muted);
  border-left-width: 3px;
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.insight-row:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.insight-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, color-mix(in srgb, var(--text-secondary) 8%, transparent));
  font-size: 1.1rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.insight-headline { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); line-height: 1.3; }
.insight-detail { font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.15rem; line-height: 1.35; }
.insight-action { white-space: nowrap; }
.insight-critical { border-left-color: var(--danger); }
.insight-critical .insight-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.insight-high     { border-left-color: var(--warning); }
.insight-high .insight-icon { background: var(--warning-dim); color: var(--warning-text); }
.insight-medium   { border-left-color: var(--accent); }
.insight-medium .insight-icon { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.insight-low      { border-left-color: var(--success); }
.insight-low .insight-icon { background: var(--success-dim); color: var(--success-text); }

/* Cohort heatmap */
.cohort-table {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  font-size: 0.82rem;
}
/* Sticky cohort label column when scrolling horizontally */
.cohort-table th.cohort-th:first-child,
.cohort-table .cohort-cohort {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  box-shadow: 1px 0 0 var(--border-muted);
}

/* Day-of-week pattern rows */
.dow-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dow-row {
  display: grid;
  grid-template-columns: 100px 1fr 110px 90px;
  align-items: center;
  gap: 0.75rem;
}
.dow-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  white-space: nowrap;
}
.dow-bar-track {
  position: relative;
  background: color-mix(in srgb, var(--text-secondary) 5%, transparent);
  border-radius: 6px;
  height: 26px;
  overflow: hidden;
}
.dow-bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  background: var(--accent);
  opacity: 0.55;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  transition: width 0.15s ease;
  min-width: 4px;
}
.dow-bar-fill.is-best {
  background: var(--success);
  opacity: 0.75;
}
.dow-bar-fill.is-worst {
  background: color-mix(in srgb, var(--warning) 70%, transparent);
  opacity: 0.65;
}
.dow-bar-inner-label {
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.dow-amount {
  text-align: right;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dow-orders {
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .dow-row { grid-template-columns: 70px 1fr 80px; gap: 0.5rem; }
  .dow-orders { display: none !important; }
  .dow-label { font-size: 0.78rem; }
  .dow-amount { font-size: 0.82rem; }
}

/* ── Cash calendar grid (replaces 90-day line chart) ─────────────── */
.cash-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
}
.cash-cell {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  border-left-width: 3px;
  border-radius: var(--radius-md, 8px);
  padding: 0.55rem 0.65rem 0.5rem 0.6rem;
  min-height: 70px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  cursor: help;
}
.cash-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.cash-cell-date {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cash-cell-dow {
  color: var(--text-primary);
  font-weight: 700;
}
.cash-cell-day {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.cash-cell-weekend {
  background: color-mix(in srgb, var(--text-secondary) 4%, var(--surface));
}
.cash-cell-weekend .cash-cell-dow {
  color: var(--text-secondary);
}
/* First-of-month gets a soft accent band along the top so users can scan period boundaries */
.cash-cell-month-start {
  position: relative;
}
.cash-cell-month-start::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; height: 2px;
  background: var(--accent);
  border-top-left-radius: var(--radius-md, 8px);
  border-top-right-radius: var(--radius-md, 8px);
  opacity: 0.7;
}
.cash-cell-amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  margin-top: 0.15rem;
  line-height: 1.1;
}
.cash-cell-events {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  display: flex;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}
.cash-cell-events .cash-event-in {
  color: var(--success-text, var(--success));
  background: var(--success-dim);
  padding: 1px 5px;
  border-radius: var(--radius-full);
}
.cash-cell-events .cash-event-out {
  color: var(--warning-text, var(--warning));
  background: var(--warning-dim);
  padding: 1px 5px;
  border-radius: var(--radius-full);
}
.cash-cell-healthy { border-left-color: var(--success); }
.cash-cell-tight   { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 4%, var(--surface)); }
.cash-cell-tight .cash-cell-amount { color: var(--warning-text); }
.cash-cell-critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.cash-cell-critical .cash-cell-amount { color: var(--danger); }

.cash-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ── Sales pace comparison card ─────────────────────────────────── */
.pace-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.pace-side {
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--text-secondary) 4%, transparent);
  border-radius: var(--radius-md, 10px);
  text-align: center;
}
.pace-amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1;
}
.pace-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
}
.pace-delta {
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text-secondary) 5%, transparent);
}
.pace-delta i.bi { font-size: 1.1rem; }
.pace-delta.is-up   { color: var(--success-text); background: var(--success-dim); }
.pace-delta.is-down { color: var(--danger);       background: color-mix(in srgb, var(--danger) 12%, transparent); }
.pace-delta.is-flat { color: var(--text-secondary); }
.pace-bar {
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
  overflow: hidden;
}
.pace-bar-fill {
  height: 100%;
  width: var(--bar-width, 0%);
  border-radius: 3px;
  transition: width 0.2s ease;
}
.pace-bar-last { background: color-mix(in srgb, var(--text-secondary) 50%, transparent); }
.pace-bar-next { background: var(--accent); opacity: 0.75; }

/* Reason chips on Credit Risk page — compact pills for each reason factor */
.reason-chip {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  border-radius: var(--radius-full, 999px);
  background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
  color: var(--text-secondary);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pace-grid { grid-template-columns: 1fr; }
  .pace-divider { order: 0; }
}
.cohort-table th, .cohort-table td {
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-radius: 4px;
}
.cohort-th {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cohort-age { min-width: 56px; }
.cohort-cohort { text-align: left; white-space: nowrap; padding-left: 0; }
.cohort-size { color: var(--text-secondary); }
.cohort-cell {
  position: relative;
  min-width: 56px;
  color: var(--text-primary);
}
.cohort-cell-empty {
  background: color-mix(in srgb, var(--text-secondary) 4%, transparent);
}
.cohort-pct { display: block; font-weight: 600; line-height: 1; }
.cohort-count {
  display: block;
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Cohort per-row pills */
.cohort-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 50px;
  padding: 6px 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-secondary) 4%, transparent);
}
.cohort-pill-age { font-size: 0.65rem; color: var(--text-secondary); font-weight: 600; }
.cohort-pill-bar {
  width: 100%; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--text-secondary) 8%, transparent);
  overflow: hidden;
}
.cohort-pill-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.cohort-pill-pct { font-size: 0.7rem; font-weight: 600; color: var(--text-primary); }

/* Scenario cards */
.scenario-card {
  padding: 1rem;
  border: 1px solid var(--border-muted);
  border-left-width: 3px;
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
  height: 100%;
}
.scenario-card.scenario-warning { border-left-color: var(--warning); }
.scenario-card.scenario-warning i.bi { color: var(--warning-text); }
.scenario-card.scenario-success { border-left-color: var(--success); }
.scenario-card.scenario-success i.bi { color: var(--success-text); }
.scenario-card.scenario-info    { border-left-color: var(--accent); }
.scenario-card.scenario-info i.bi { color: var(--accent); }
.scenario-narrative { border-top: 1px solid var(--border-muted); }
.scenario-card-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.55rem;
}
.scenario-card-grid-compact .scenario-card {
  padding: 0.72rem;
  border-radius: 8px;
}
.scenario-card-grid-compact .scenario-delta {
  gap: 0.6rem;
}
.scenario-card-grid-compact .scenario-narrative {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Cohort heatmap legend bar (gradient swatch) */
.cohort-legend-bar {
  display: inline-block;
  width: 80px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--accent) 8%, transparent),
    color-mix(in srgb, var(--accent) 63%, transparent));
}

/* Intelligence pages — print & responsive refinements */
@media print {
  .insight-row, .scenario-card, .rfm-tile, .cohort-cell {
    page-break-inside: avoid;
    box-shadow: none !important;
    border-color: var(--text-secondary) !important;
  }
  .page-header-actions, .insight-action { display: none !important; }
  .cohort-cell { background: transparent !important; border: 1px solid var(--text-secondary) !important; color: var(--text-primary) !important; }
}
@media (max-width: 768px) {
  /* Stack scenario cards vertically and shrink padding */
  .scenario-card { padding: 0.75rem; }
  /* Cohort heatmap: smaller cells on mobile */
  .cohort-table { font-size: 0.7rem; }
  .cohort-table th, .cohort-table td { padding: 0.25rem 0.3rem; }
  .cohort-age { min-width: 38px; }
  .cohort-cell { min-width: 38px; }
  .cohort-count { display: none; }  /* Hide raw count on mobile to save space */
  /* Cohort pill row: prevent overflow stretch */
  .cohort-pill { min-width: 42px; padding: 4px 2px; }
  .cohort-pill-pct { font-size: 0.65rem; }
}
@media (max-width: 640px) {
  .insight-row { grid-template-columns: 28px 1fr; }
  .insight-action { grid-column: 1 / -1; margin-top: 0.4rem; }
}

/* ────────────────────────────────────────────────────────────────────
   Unified Intelligence Hub — Top Decision Banner, Today's Plan, Health Tiles
   ──────────────────────────────────────────────────────────────────── */

.hub-explore {
  position: relative;
  z-index: 3;
}
.hub-explore-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.72rem;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid color-mix(in srgb, var(--text-secondary) 14%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, var(--text-primary) 4%);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.2;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.hub-explore-summary::-webkit-details-marker { display: none; }
.hub-explore-summary::marker { content: ""; }
.hub-explore-summary:hover,
.hub-explore[open] .hub-explore-summary {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent) 8%);
}
.hub-explore-chevron {
  font-size: 0.78rem;
  transition: transform 160ms ease;
}
.hub-explore[open] .hub-explore-chevron { transform: rotate(180deg); }
.hub-explore-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(780px, calc(100vw - var(--sidebar-w, 240px) - 3rem));
  padding: 0.75rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md, 12px);
  background: var(--material-thick, var(--surface));
  backdrop-filter: var(--material-filter);
  box-shadow: var(--shadow-lg);
}
.hub-explore-panel-head {
  display: none;
}
.hub-explore-close {
  display: none;
}
.page-header-row .hub-explore-panel.page-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.hub-priority {
  margin-bottom: 0.85rem;
}
.hub-priority .top-decision-banner {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .page-header-row {
    align-items: flex-start;
  }
  .hub-explore {
    width: 100%;
  }
  .hub-explore[open] {
    z-index: calc(var(--z-tabbar, 250) + 20);
  }
  .hub-explore[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.22);
  }
  .hub-explore-summary {
    position: relative;
    z-index: 2;
    width: 100%;
    justify-content: center;
  }
  .hub-explore-panel {
    position: fixed;
    left: calc(var(--tabbar-float-inset) + env(safe-area-inset-left));
    right: calc(var(--tabbar-float-inset) + env(safe-area-inset-right));
    top: auto;
    bottom: calc(var(--mobile-tabbar-height) + 0.4rem);
    z-index: 1;
    width: auto;
    max-height: min(62vh, calc(100vh - 160px));
    overflow: auto;
    margin-top: 0;
    padding: 0.75rem;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
  }
  .page-header-row .hub-explore-panel.page-header-actions {
    gap: 0.55rem;
  }
  .hub-explore-panel-head {
    position: sticky;
    top: -0.75rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: -0.75rem -0.75rem 0;
    padding: 0.7rem 0.75rem 0.6rem;
    border-bottom: 1px solid var(--border-muted, rgba(255,255,255,0.12));
    background: var(--material-thick, var(--surface));
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .hub-explore-panel-head::before {
    content: "";
    position: absolute;
    top: 0.32rem;
    left: 50%;
    width: 2.25rem;
    height: 0.2rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--text-secondary) 30%, transparent);
    transform: translateX(-50%);
  }
  .hub-explore-close {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    color: var(--text-secondary);
  }
  .hub-explore-close:hover,
  .hub-explore-close:focus-visible {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .hub-explore-panel .action-cluster {
    flex: 1 1 100%;
  }
  .hub-explore-panel .action-btn span {
    display: inline;
  }
  .hub-explore-panel .action-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .hub-priority {
    margin-bottom: 0.7rem;
  }
}

/* Top decision banner — single most important action */
.top-decision-banner {
  border-left: 4px solid var(--accent, #6366f1);
  padding: 0.9rem 1.1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.045), transparent 40%);
}
.top-decision-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}
.top-decision-critical {
  border-left-color: var(--danger, #dc3545);
  background: linear-gradient(90deg, rgba(220, 53, 69, 0.06), transparent 45%);
}
.top-decision-high {
  border-left-color: var(--warning, #f59e0b);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.06), transparent 45%);
}
.top-decision-medium {
  border-left-color: var(--info, #007aff);
  background: linear-gradient(90deg, rgba(0, 122, 255, 0.045), transparent 45%);
}
.top-decision-low      { border-left-color: var(--border-muted, #ccc); background: none; }
.top-decision-clear {
  border-left-color: var(--success, #16a34a);
  background: linear-gradient(90deg, rgba(22, 163, 74, 0.04), transparent 50%);
}

.top-decision-icon {
  font-size: 1.7rem;
  width: 2.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #6366f1);
}
.top-decision-critical .top-decision-icon { color: var(--danger, #dc3545); }
.top-decision-high     .top-decision-icon { color: var(--warning, #f59e0b); }
.top-decision-medium   .top-decision-icon { color: var(--info, #007aff); }
.top-decision-clear    .top-decision-icon { color: var(--success, #16a34a); }

.top-decision-eyebrow {
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}
.top-decision-title {
  font-size: 1.08rem;
  line-height: 1.3;
  margin-top: 0.1rem;
}
.top-decision-actions {
  flex-shrink: 0;
}
.top-decision-actions form,
.top-decision-actions .btn {
  white-space: nowrap;
}

/* On narrower viewports stack the actions below the title */
@media (max-width: 640px) {
  .top-decision-banner {
    flex-wrap: wrap;
  }
  .top-decision-icon {
    width: 2rem;
    font-size: 1.35rem;
  }
  .top-decision-title {
    font-size: 0.98rem;
  }
  .top-decision-actions {
    width: 100%;
    margin-top: 0.5rem;
    justify-content: flex-end;
  }
}

/* Today's Plan 4-card row */
.today-plan-card {
  border-left: 4px solid var(--border-muted, #d1d5db);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.today-plan-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.today-plan-card-critical {
  border-left-color: var(--danger, #dc3545);
  background: linear-gradient(180deg, rgba(220, 53, 69, 0.04), transparent 80px);
}
.today-plan-card-high {
  border-left-color: var(--warning, #f59e0b);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04), transparent 80px);
}
.today-plan-card-medium {
  border-left-color: var(--accent, #5b8def);
  background: linear-gradient(180deg, rgba(91, 141, 239, 0.04), transparent 80px);
}
.today-plan-card-low      { border-left-color: var(--border-muted, #ccc); }

.today-plan-slot {
  letter-spacing: 0.05em;
  font-weight: 600;
}
.today-plan-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.today-plan-why {
  cursor: pointer;
}

/* Signals overflow expander (Medium + Low) */
.signals-overflow {
  margin-top: 0.5rem;
}
.signals-overflow > .signals-overflow-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.55rem 0.75rem;
  border-top: 1px dashed var(--border-muted, rgba(0,0,0,0.08));
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary, #6e6e73);
  font-size: 0.85rem;
  user-select: none;
}
.signals-overflow > .signals-overflow-summary::-webkit-details-marker { display: none; }
.signals-overflow > .signals-overflow-summary::marker { content: ""; }
.signals-overflow > .signals-overflow-summary:hover {
  color: var(--text-primary, #1c1c1e);
}
.signals-overflow .signals-overflow-chevron {
  transition: transform 0.18s ease;
}
.signals-overflow[open] > .signals-overflow-summary .signals-overflow-chevron {
  transform: rotate(180deg);
}
.signals-engine-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(99, 102, 241, 0.07);
  font-size: 0.78rem;
}
.signals-engine-badge:hover {
  background: rgba(99, 102, 241, 0.12);
  text-decoration: none;
}

/* Health tiles grid — 8 drill-down summaries */
.health-board-head {
  align-items: center;
}
.health-board-head > span {
  margin-right: auto;
}
.health-board-head::after {
  display: none;
}
.health-filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 10%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--text-primary) 5%);
  overflow-x: auto;
  scrollbar-width: none;
}
.health-filter-bar::-webkit-scrollbar { display: none; }
.health-filter {
  border: 0;
  background: transparent;
  color: var(--text-secondary, #6e6e73);
  border-radius: 6px;
  padding: 0.22rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  transition: background 130ms ease, color 130ms ease;
}
.health-filter:hover {
  color: var(--text-primary, #0C0C0B);
  background: color-mix(in srgb, var(--text-primary, #0C0C0B) 6%, transparent);
}
.health-filter.is-active {
  color: #fff;
  background: var(--accent, #D86883);
}
.health-filter-count {
  min-width: 1.12rem;
  height: 1.02rem;
  padding: 0 0.32rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--text-secondary, #6e6e73);
  background: color-mix(in srgb, var(--text-primary, #0C0C0B) 8%, transparent);
}
.health-filter.is-active .health-filter-count {
  color: var(--accent, #D86883);
  background: #fff;
}
.health-tile-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
@media (min-width: 992px) {
  .health-tile-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .health-tile-grid { grid-template-columns: 1fr; }
}

.health-tile {
  position: relative;
  background: color-mix(in srgb, var(--surface) 96%, var(--text-primary) 4%);
  border: 1px solid var(--border-muted, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
  padding: 0.8rem 0.95rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--text-primary, #1c1c1e);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  border-left-width: 4px;
}
.health-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.07);
  text-decoration: none;
  color: var(--text-primary, #1c1c1e);
}
.health-tile-status--ok    { border-left-color: var(--success, #16a34a); }
.health-tile-status--warn  { border-left-color: var(--warning, #f59e0b); }
.health-tile-status--alert { border-left-color: var(--danger,  #dc3545); }
.health-tile-status--alert {
  background: color-mix(in srgb, var(--surface) 88%, var(--danger) 8%);
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border-muted));
}
.health-tile-status--warn {
  background: color-mix(in srgb, var(--surface) 90%, var(--warning) 7%);
  border-color: color-mix(in srgb, var(--warning) 20%, var(--border-muted));
}

.health-tile-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.health-tile-icon {
  font-size: 1.05rem;
  color: var(--text-secondary, #6e6e73);
}
.health-tile-title {
  font-weight: 600;
  font-size: 0.92rem;
  flex-grow: 1;
}
.health-tile-pill {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.health-tile-pill--ok    { background: rgba(22, 163, 74, 0.13);  color: #15803d; }
.health-tile-pill--warn  { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.health-tile-pill--alert { background: rgba(220, 53, 69, 0.16);  color: #b91c1c; }

/* Subtle status dot at the top-left of each tile (above the icon) for fast scanning */
.health-tile-status--ok    .health-tile-icon { color: var(--success, #16a34a); }
.health-tile-status--warn  .health-tile-icon { color: var(--warning, #f59e0b); }
.health-tile-status--alert .health-tile-icon { color: var(--danger,  #dc3545); }

/* Headlines need to wrap clean on narrow tiles instead of clipping */
.health-tile-headline {
  word-break: break-word;
}

.health-tile-headline {
  font-size: 1.0rem;
  font-weight: 600;
  line-height: 1.25;
}
.health-tile-sub {
  font-size: 0.8rem;
  color: var(--text-secondary, #6e6e73);
  line-height: 1.35;
}
.health-tile-why {
  margin-top: 0.15rem;
  padding-top: 0.42rem;
  border-top: 1px solid color-mix(in srgb, var(--text-secondary) 10%, transparent);
  color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary) 28%);
  font-size: 0.75rem;
  line-height: 1.35;
}
.health-tile-link {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  color: var(--text-secondary, #6e6e73);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.health-tile:hover .health-tile-link {
  opacity: 1;
  transform: translateX(2px);
}
.health-filter-item.is-filtered-out {
  display: none !important;
}

@media (max-width: 640px) {
  .health-board-head {
    flex-direction: column;
    align-items: stretch;
  }
  .health-filter-bar {
    width: 100%;
  }
  .health-filter {
    flex: 1 0 auto;
    justify-content: center;
  }
}

/* Operational footer — collapsible briefing detail */
.hub-operational-footer {
  border-top: 1px dashed var(--border-muted, rgba(0,0,0,0.08));
  padding-top: 0.5rem;
}
.hub-operational-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary, #6e6e73);
  user-select: none;
  font-size: 0.92rem;
  border-radius: 6px;
}
.hub-operational-summary::-webkit-details-marker { display: none; }
.hub-operational-summary::marker { content: ""; }
.hub-operational-summary:hover {
  color: var(--text-primary, #1c1c1e);
  background: rgba(0,0,0,0.02);
}
.hub-operational-chevron {
  transition: transform 0.18s ease;
  font-size: 0.85rem;
}
.hub-operational-footer[open] .hub-operational-chevron {
  transform: rotate(90deg);
}
.hub-footer-divider {
  border-top: 1px solid var(--border-muted, rgba(0,0,0,0.08));
}

/* Print — only the actionable parts (top decision banner, today's plan cards,
   operational footer detail) appear; nav, charts, signals, health tiles hide */
@media print {
  .no-print,
  .page-header-actions,
  .pulse-strip,
  .health-tile-grid,
  .decisions-panel,
  .forecast-row,
  .kpi-row-compact,
  .signals-engine-badge,
  .dashboard-refresh-note { display: none !important; }
  .kpi-subhead { margin: 0.4rem 0 0.3rem; }
  /* Force the operational footer open when printing */
  .hub-operational-footer { display: block; }
  .hub-operational-footer > .hub-operational-summary { display: none; }
  .hub-operational-footer > *:not(.hub-operational-summary) { display: block !important; }
  .top-decision-banner { break-inside: avoid; }
  .today-plan-card { break-inside: avoid; }
}

/* Rounded UI cleanup primitives: quiet, reusable surfaces for summaries and details. */
.clean-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
.clean-summary-card {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.64rem 0.7rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--clean-tone, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 86%, var(--gray-100) 14%);
  color: var(--text-primary);
  text-decoration: none;
  box-shadow: none;
}
.clean-summary-card:hover {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--clean-tone, var(--accent)) 36%, var(--border));
  text-decoration: none;
}
.clean-summary-label {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  color: var(--text-tertiary);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.clean-summary-card strong {
  overflow-wrap: anywhere;
  font-size: 1.12rem;
  line-height: 1.08;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.clean-summary-card small {
  color: var(--text-tertiary);
  font-size: 0.72rem;
  line-height: 1.28;
}
.clean-tone-critical,
.clean-tone-danger { --clean-tone: var(--danger); }
.clean-tone-watch,
.clean-tone-warning { --clean-tone: var(--warning); }
.clean-tone-steady,
.clean-tone-success { --clean-tone: var(--success); }
.clean-tone-info { --clean-tone: var(--info); }
.clean-tone-neutral { --clean-tone: var(--border); }

.clean-detail-panel {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 90%, var(--gray-100) 10%);
  overflow: hidden;
}
.clean-detail-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  list-style: none;
  transition: background var(--transition-fast);
}
.clean-detail-panel > summary:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
/* Leading icon rendered as a small brand-tinted chip (matches app chip language). */
.clean-detail-panel > summary > span > i.bi {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 0.82rem;
}
.clean-detail-panel > summary::-webkit-details-marker { display: none; }
.clean-detail-panel > summary::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
}
.clean-detail-panel[open] > summary::after { transform: rotate(180deg); }
.clean-detail-panel > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-weight: 700;
}
.clean-detail-panel > summary small {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.clean-detail-body {
  padding: 0.75rem 0.85rem 0.85rem;
  border-top: 1px solid var(--border-muted);
}
.clean-detail-body > .table-responsive:first-child,
.clean-detail-body > .table:first-child { margin-top: -0.25rem; }

.clean-table-panel {
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.clean-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-muted);
}
.clean-table-head span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  font-weight: 700;
}
.clean-table-head strong {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .clean-summary-grid { grid-template-columns: 1fr 1fr; }
  .clean-detail-panel > summary { align-items: flex-start; }
  .clean-detail-panel > summary small { white-space: normal; text-align: right; }
}

/* Design System v2: additive rhythm and hierarchy layer. */
.ds-page-header,
.page-header-row {
  gap: 0.75rem;
}
.ds-page-actions,
.page-header-actions {
  gap: 0.45rem;
}
.ds-page-actions .btn,
.page-header-actions .btn {
  min-height: 38px;
}
.ds-action-group,
.action-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.ds-action-group[data-cluster]::before,
.action-cluster[data-cluster]::before {
  content: attr(data-cluster);
  flex-basis: 100%;
  color: var(--text-tertiary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.ds-more-menu .dropdown-menu {
  min-width: 13rem;
  padding: 0.35rem;
  border-radius: 8px;
}
.ds-more-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.52rem;
  border-radius: 6px;
  font-size: var(--text-sm);
}
.ds-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.ds-kpi-row {
  --bs-gutter-x: 0.65rem;
  --bs-gutter-y: 0.65rem;
  margin-bottom: 0.9rem !important;
}
.ds-kpi-row .kpi-card {
  min-height: 86px;
}
.ds-kpi-row .kpi-card .label {
  line-height: 1.1;
}
.ds-kpi-row .kpi-card .sub {
  line-height: 1.22;
}
.ds-summary-strip .kpi-card,
.ds-summary-strip .clean-summary-card {
  min-height: 86px;
}
.ds-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.ds-filter-panel {
  margin-bottom: 0.85rem;
}
.ds-tabs,
.seg-tabs,
.nav.nav-tabs {
  gap: 0.25rem;
}
.ds-tabs .nav-link,
.nav.nav-tabs .nav-link,
.seg-tabs .seg-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}
.ds-table-panel {
  margin-bottom: 0.85rem;
}
.ds-table-toolbar,
.table-toolbar {
  min-height: 48px;
}
.ds-table-toolbar .toolbar-title,
.table-toolbar .toolbar-title {
  line-height: 1.15;
}
.ds-table-panel .table-responsive,
.section-card.p-0 .table-responsive {
  scrollbar-gutter: stable;
}
.ds-modal-section {
  padding: 0.75rem;
  border: 1px solid var(--border-muted);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 92%, var(--gray-100) 8%);
}
.ds-modal-section + .ds-modal-section {
  margin-top: 0.75rem;
}
.ds-modal-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 800;
}
.ds-modal-section-title small {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 650;
}
.modal-body .ds-modal-section .row.g-3 {
  --bs-gutter-y: 0.75rem;
}

/* Formal financial statements are dense by nature; keep long IFRS labels
   readable on mobile without letting them push the page wider than viewport. */
.ifrs-statement-panel {
  min-width: 0;
}

.ifrs-statement-table {
  table-layout: fixed;
  width: 100%;
}

.ifrs-statement-table td:first-child,
.ifrs-statement-table th:first-child {
  overflow-wrap: anywhere;
  word-break: normal;
}

.ifrs-statement-table td:last-child,
.ifrs-statement-table th:last-child {
  width: 8.5rem;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .ifrs-statement-grid {
    --bs-gutter-x: 0.75rem;
  }

  .ifrs-statement-panel {
    padding: 0.85rem;
  }

  .ifrs-statement-panel .h5,
  .ifrs-statement-panel h2 {
    font-size: 0.92rem;
  }

  .ifrs-statement-panel .h6,
  .ifrs-statement-panel h3 {
    font-size: 0.8rem;
  }

  .ifrs-statement-table {
    font-size: 0.72rem;
  }

  .ifrs-statement-table td,
  .ifrs-statement-table th {
    padding-inline: 0.25rem;
  }

  .ifrs-statement-table td:last-child,
  .ifrs-statement-table th:last-child {
    width: 6.85rem;
  }
}

/* Similar-issue polish: inline crate reversal warnings */
.crate-reversal-inline-warning {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.32rem;
  max-width: min(34rem, 100%);
  margin-top: 0.18rem;
  color: #9a5b00;
  font-weight: 650;
  line-height: 1.28;
  white-space: normal;
}

.crate-reversal-inline-warning .bi {
  flex: 0 0 auto;
  margin-top: 0.04rem;
}

@media (max-width: 575.98px) {
  .crate-reversal-inline-warning {
    max-width: 18rem;
  }
}
@media (max-width: 768px) {
  .ds-page-header,
  .page-header-row {
    align-items: flex-start;
  }
  .ds-page-actions,
  .page-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .ds-action-group,
  .action-cluster {
    width: 100%;
  }
  .ds-action-group .btn,
  .action-cluster .action-btn,
  .page-header-actions > .btn {
    min-height: 40px;
  }
  .ds-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ds-table-toolbar,
  .table-toolbar {
    min-height: 0;
    gap: 0.45rem;
  }
  .ds-tabs,
  .seg-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ds-tabs::-webkit-scrollbar,
  .seg-tabs::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 420px) {
  .ds-summary-strip {
    grid-template-columns: 1fr;
  }
  .clean-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Analyst OS polish pass: scoped command surface. */
.intel-os {
  --os-line: color-mix(in srgb, var(--text-secondary) 18%, transparent);
  --os-line-strong: color-mix(in srgb, var(--text-secondary) 34%, transparent);
  --os-panel: color-mix(in srgb, var(--surface) 76%, #f8fafc 24%);
  --os-panel-2: color-mix(in srgb, var(--surface) 66%, #eef2f7 34%);
  --os-panel-3: color-mix(in srgb, var(--surface) 88%, #ffffff 12%);
  --os-ink: var(--text-primary);
  --os-muted: var(--text-secondary);
  --os-critical: var(--danger, #dc3545);
  --os-watch: var(--warning, #f59e0b);
  --os-steady: var(--success, #16a34a);
  --os-focus: var(--accent, #007aff);
  --os-radius: 8px;
  --os-gap: 0.5rem;
  color: var(--os-ink);
}
[data-theme="dark"] .intel-os {
  --os-panel: color-mix(in srgb, var(--surface) 82%, #111827 18%);
  --os-panel-2: color-mix(in srgb, var(--surface) 74%, #0f172a 26%);
  --os-panel-3: color-mix(in srgb, var(--surface) 88%, #020617 12%);
}

.intel-os .os-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.15rem;
  margin-bottom: var(--os-gap);
  border: 1px solid var(--os-line-strong);
  border-left: 4px solid var(--os-tone, var(--os-focus));
  border-radius: var(--radius-lg);
  background: var(--os-panel);
}
.intel-os .os-hero-aside {
  display: grid;
  gap: 0.6rem;
  justify-items: stretch;
}
.intel-os.os-state-critical { --os-tone: var(--os-critical); }
.intel-os.os-state-watch { --os-tone: var(--os-watch); }
.intel-os.os-state-steady { --os-tone: var(--os-steady); }
.intel-os .os-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.16rem;
  color: var(--os-muted);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intel-os .os-hero h1 {
  max-width: 820px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.012em;
}
.intel-os .os-hero p {
  max-width: 760px;
  margin: 0.22rem 0 0;
  color: var(--os-muted);
  font-size: 0.78rem;
  line-height: 1.32;
}
.intel-os .os-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, auto));
  gap: 0.32rem;
}
.intel-os .os-hero-meta > div {
  min-width: 0;
  padding: 0.34rem 0.45rem;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-panel-3);
}
.intel-os .os-meta-label {
  display: block;
  color: var(--os-muted);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.intel-os .os-hero-meta strong {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.78rem;
  line-height: 1.15;
}

.intel-os .os-layout {
  display: grid;
  grid-template-columns: minmax(150px, 185px) minmax(0, 1fr) minmax(220px, 260px);
  gap: var(--os-gap);
  align-items: start;
}
.intel-os .os-left-rail,
.intel-os .os-right-rail,
.intel-os .os-workspace,
.intel-os .os-board-section {
  display: grid;
  gap: var(--os-gap);
}
.intel-os .os-left-rail,
.intel-os .os-right-rail {
  position: sticky;
  top: 0.75rem;
  max-height: calc(100dvh - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-width: thin;
}
.intel-os .os-left-rail {
  opacity: 0.94;
}
.intel-os .os-workspace {
  min-width: 0;
  grid-template-areas:
    "command"
    "brief"
    "domain";
}
.intel-os .os-board-command {
  grid-area: command;
}
.intel-os .os-brief-board {
  grid-area: brief;
}
.intel-os .os-domain-board {
  grid-area: domain;
}

.intel-os .os-panel {
  min-width: 0;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-panel);
  box-shadow: none;
}
.intel-os .os-panel:not(.os-panel-tight) {
  padding: 0.5rem;
}
.intel-os .os-panel-tight {
  padding: 0.46rem;
}
.intel-os .os-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.38rem;
}
.intel-os .os-panel-head span,
.intel-os .os-stack-columns h3 {
  color: var(--os-muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intel-os .os-panel-head strong,
.intel-os .os-panel-head a {
  color: var(--os-muted);
  font-size: 0.62rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}
.intel-os .os-panel-head a:hover {
  color: var(--os-focus);
}

.intel-os .os-metric-strip {
  margin-bottom: var(--os-gap);
}

.intel-os .os-domain-rail,
.intel-os .os-filter-stack,
.intel-os .os-quick-links,
.intel-os .os-closeout-list,
.intel-os .os-mini-forecast {
  display: grid;
  gap: 0.28rem;
}
.intel-os .os-domain-rail button,
.intel-os .os-filter-stack button,
.intel-os .os-quick-links a,
.intel-os .os-quick-links button,
.intel-os .os-closeout-list a,
.intel-os .os-mini-forecast a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.36rem;
  align-items: center;
  min-height: 1.86rem;
  padding: 0.32rem 0.38rem;
  border: 1px solid var(--os-line);
  border-radius: 7px;
  background: var(--os-panel-3);
  color: var(--os-ink);
  text-align: left;
  text-decoration: none;
}
.intel-os .os-quick-links button {
  width: 100%;
  font: inherit;
}
.intel-os .os-domain-rail span,
.intel-os .os-filter-stack span,
.intel-os .os-quick-links a,
.intel-os .os-quick-links button,
.intel-os .os-closeout-list span,
.intel-os .os-mini-forecast span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 760;
}
.intel-os .os-domain-rail strong,
.intel-os .os-filter-stack strong,
.intel-os .os-closeout-list strong,
.intel-os .os-mini-forecast strong {
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}
.intel-os .os-domain-rail button:hover,
.intel-os .os-domain-rail button.is-active,
.intel-os .os-filter-stack button:hover,
.intel-os .os-filter-stack button.is-active,
.intel-os .os-quick-links a:hover,
.intel-os .os-quick-links button:hover {
  border-color: color-mix(in srgb, var(--os-focus) 46%, var(--os-line));
  background: color-mix(in srgb, var(--os-focus) 9%, var(--os-panel-3));
  color: var(--os-focus);
}
.intel-os .os-domain-rail button.is-active,
.intel-os .os-filter-stack button.is-active {
  border-left: 3px solid var(--os-focus);
}

/* ── Pill-style filter chips (signal filter) — fintech-inspired chip row.
   Overrides the shared rail-button rules above for this control only. */
.intel-os .os-filter-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}
.intel-os .os-filter-stack button {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  width: auto;
  min-height: 1.78rem;
  padding: 0.2rem 0.5rem 0.2rem 0.62rem;
  border: 1px solid var(--os-line);
  border-radius: var(--radius-full);
  background: var(--os-panel-3);
  color: var(--os-ink);
  font: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.intel-os .os-filter-stack button span {
  font-size: 0.66rem;
  font-weight: 800;
}
.intel-os .os-filter-stack button strong {
  display: inline-grid;
  place-items: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.26rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--os-muted) 16%, transparent);
  color: var(--os-muted);
  font-size: 0.6rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.intel-os .os-filter-stack button:hover {
  border-color: color-mix(in srgb, var(--os-focus) 46%, var(--os-line));
  background: color-mix(in srgb, var(--os-focus) 9%, var(--os-panel-3));
  color: var(--os-focus);
}
.intel-os .os-filter-stack button.is-active {
  border-color: transparent;
  border-left-width: 1px;          /* cancel the shared 3px accent edge */
  background: var(--os-focus);
  color: var(--text-inverse);
}
.intel-os .os-filter-stack button.is-active span { color: var(--text-inverse); }
.intel-os .os-filter-stack button.is-active strong {
  background: color-mix(in srgb, var(--text-inverse) 26%, transparent);
  color: var(--text-inverse);
}
.intel-os .os-filter-stack button:focus-visible {
  outline: 2px solid var(--os-focus);
  outline-offset: 2px;
}

.intel-os .os-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--os-gap);
  align-items: start;
}
.intel-os .os-command-stack-panel {
  grid-column: 1;
  grid-row: 1;
}
.intel-os .os-inspector {
  grid-column: 1;
  grid-row: 2;
}
.intel-os .os-stack-columns {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "now now now now next next"
    "now now now now watch watch";
  gap: 0.42rem;
  align-items: start;
}
.intel-os .os-stack-lane {
  display: grid;
  gap: 0.32rem;
  align-content: start;
  min-width: 0;
  padding: 0.38rem;
  border: 1px solid var(--os-line);
  border-radius: 7px;
  background: var(--os-panel-3);
}
.intel-os .os-stack-now { grid-area: now; }
.intel-os .os-stack-next { grid-area: next; }
.intel-os .os-stack-watch { grid-area: watch; }
.intel-os .os-stack-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.intel-os .os-stack-lane-head strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.36rem;
  height: 1.1rem;
  padding: 0 0.28rem;
  border: 1px solid var(--os-line);
  border-radius: var(--radius-full);
  color: var(--os-muted);
  font-size: 0.58rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.intel-os .os-stack-items {
  display: grid;
  gap: 0.32rem;
  align-content: start;
}
.intel-os .os-stack-now .os-stack-items {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}
.intel-os .os-stack-next .os-stack-items,
.intel-os .os-stack-watch .os-stack-items {
  grid-template-columns: 1fr;
}
.intel-os .os-stack-columns h3 {
  margin: 0;
}
.intel-os .os-command-card {
  position: relative;
  display: grid;
  gap: 0.3rem;
  padding: 0.34rem;
  margin-bottom: 0;
  border: 1px solid var(--os-line);
  border-left: 3px solid var(--os-line-strong);
  border-radius: var(--os-radius);
  background: var(--os-panel-2);
}
.intel-os .os-command-card.is-selected {
  border-color: color-mix(in srgb, var(--os-focus) 58%, var(--os-line));
  background: color-mix(in srgb, var(--os-focus) 7%, var(--os-panel-2));
  outline: 2px solid color-mix(in srgb, var(--os-focus) 20%, transparent);
  outline-offset: 0;
}
.intel-os .os-tone-critical { --os-tone: var(--os-critical); }
.intel-os .os-tone-high,
.intel-os .os-tone-watch,
.intel-os .os-tone-medium { --os-tone: var(--os-watch); }
.intel-os .os-tone-low,
.intel-os .os-tone-steady,
.intel-os .os-tone-ok { --os-tone: var(--os-steady); }
.intel-os .os-command-card.os-tone-critical,
.intel-os .os-command-card.os-tone-high,
.intel-os .os-command-card.os-tone-medium,
.intel-os .os-command-card.os-tone-low,
.intel-os .os-command-card.os-tone-watch {
  border-left-color: var(--os-tone);
}
.intel-os .os-command-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.42rem;
  align-items: start;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.intel-os .os-command-stack .os-command-pick {
  grid-template-columns: auto minmax(0, 1fr);
}
.intel-os .os-command-stack .os-command-open {
  display: none;
}
.intel-os .os-command-icon,
.intel-os .os-inspector-icon {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--os-tone, var(--os-focus)) 22%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--os-tone, var(--os-focus)) 9%, transparent);
  color: var(--os-tone, var(--os-focus));
  flex: 0 0 auto;
}
.intel-os .os-command-copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}
.intel-os .os-command-eyebrow {
  color: var(--os-muted);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intel-os .os-command-title {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.18;
}
.intel-os .os-command-detail {
  color: var(--os-muted);
  font-size: 0.66rem;
  line-height: 1.24;
  overflow-wrap: anywhere;
}
.intel-os .os-command-stack .os-command-detail {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.intel-os .os-command-open {
  color: var(--os-muted);
}
.intel-os .os-command-actions,
.intel-os .os-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  align-items: center;
}
.intel-os .os-command-actions form,
.intel-os .os-inspector-actions form {
  display: inline-flex;
}
.intel-os .os-btn,
.intel-os .os-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  min-height: 1.52rem;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--os-line);
  border-radius: 7px;
  background: transparent;
  color: var(--os-ink);
  font-size: 0.66rem;
  font-weight: 850;
  text-decoration: none;
}
.intel-os .os-btn-primary {
  border-color: color-mix(in srgb, var(--os-focus) 58%, var(--os-line));
  background: var(--os-focus);
  color: #fff;
}
.intel-os .os-btn-ghost:hover,
.intel-os .os-icon-btn:hover {
  color: var(--os-focus);
  border-color: color-mix(in srgb, var(--os-focus) 46%, var(--os-line));
}
.intel-os .os-icon-btn {
  width: 1.52rem;
  padding: 0;
}
.intel-os .os-command-stack .os-command-actions {
  gap: 0.18rem;
}
.intel-os .os-command-stack .os-btn,
.intel-os .os-command-stack .os-icon-btn {
  min-height: 1.36rem;
  padding: 0.16rem 0.34rem;
  font-size: 0.6rem;
}
.intel-os .os-command-stack .os-icon-btn {
  width: 1.36rem;
  padding: 0;
}
.intel-os .os-command-group {
  border-top: 1px solid var(--os-line);
  padding-top: 0.26rem;
}
.intel-os .os-command-group > summary {
  cursor: pointer;
  color: var(--os-muted);
  font-size: 0.66rem;
  font-weight: 850;
}
.intel-os .os-command-children {
  margin-top: 0.28rem;
  padding-left: 0.26rem;
  border-left: 1px solid var(--os-line);
}

.intel-os .os-inspector-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.48rem;
  align-items: start;
  margin-bottom: 0.48rem;
}
.intel-os .os-inspector h2 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.16;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.intel-os .os-inspector p {
  margin: 0.24rem 0 0;
  color: var(--os-muted);
  font-size: 0.72rem;
  line-height: 1.32;
}
.intel-os .os-empty,
.intel-os .os-mini-empty {
  display: grid;
  gap: 0.28rem;
  place-items: center;
  min-height: 4.6rem;
  padding: 0.64rem;
  border: 1px dashed var(--os-line-strong);
  border-radius: var(--os-radius);
  color: var(--os-muted);
  text-align: center;
}
.intel-os .os-empty i {
  color: var(--os-steady);
  font-size: 1.3rem;
}
.intel-os .os-mini-empty {
  min-height: 2.8rem;
  font-size: 0.7rem;
}

.intel-os .os-brief-list,
.intel-os .os-driver-grid,
.intel-os .os-forecast-strip,
.intel-os .os-domain-map,
.intel-os .os-metric-deck {
  display: grid;
  gap: 0.55rem;
}
.intel-os .os-brief-item {
  display: grid;
  grid-template-columns: 0.3rem minmax(0, 1fr);
  gap: 0.62rem;
  padding: 0.66rem;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-panel-2);
}
.intel-os .os-brief-item > span {
  border-radius: var(--radius-full);
  background: var(--os-tone, var(--os-focus));
}
.intel-os .os-brief-item h2 {
  margin: 0;
  font-size: 0.95rem;
}
.intel-os .os-brief-item p {
  margin: 0.26rem 0 0;
  color: var(--os-muted);
  line-height: 1.42;
}
.intel-os .os-driver-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.intel-os .os-driver,
.intel-os .os-forecast-card,
.intel-os .os-domain-card,
.intel-os .os-metric {
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-panel-2);
  color: var(--os-ink);
  text-decoration: none;
}
.intel-os .os-driver,
.intel-os .os-forecast-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem;
  border-top: 3px solid var(--os-tone, var(--os-line-strong));
}
.intel-os .os-driver span,
.intel-os .os-forecast-card span,
.intel-os .os-metric-label {
  color: var(--os-muted);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.intel-os .os-driver strong,
.intel-os .os-forecast-card strong {
  font-size: 1.12rem;
  line-height: 1.06;
}
.intel-os .os-driver small,
.intel-os .os-forecast-card small {
  color: var(--os-muted);
  font-size: 0.7rem;
}
.intel-os .os-forecast-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.intel-os .os-domain-map {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.intel-os .os-domain-card {
  display: grid;
  gap: 0.52rem;
  padding: 0.7rem;
  border-top: 3px solid var(--os-tone, var(--os-line-strong));
}
.intel-os .os-domain-card:hover {
  color: var(--os-ink);
  border-color: color-mix(in srgb, var(--os-tone, var(--os-focus)) 44%, var(--os-line));
  text-decoration: none;
}
.intel-os .os-domain-card-head,
.intel-os .os-domain-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.intel-os .os-domain-card-head i {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--os-tone, var(--os-focus)) 16%, transparent);
  color: var(--os-tone, var(--os-focus));
  font-size: 1.02rem;
}
.intel-os .os-domain-card-head span {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 850;
}
.intel-os .os-domain-card-head strong {
  color: var(--os-muted);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}
.intel-os .os-domain-metric {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.intel-os .os-domain-card p {
  margin: 0;
  color: var(--os-muted);
  font-size: 0.76rem;
  line-height: 1.38;
}
.intel-os .os-domain-foot {
  justify-content: space-between;
  color: var(--os-muted);
  font-size: 0.7rem;
  font-weight: 850;
}
/* Signal-activity track — fill = this module's open-signal count relative to
   the busiest module (normalised in the template). Tone-coloured. */
.intel-os .os-domain-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--os-muted) 16%, transparent);
  overflow: hidden;
}
.intel-os .os-domain-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--os-tone, var(--os-focus));
  transition: width 600ms var(--ease-out, ease);
}

/* ── Hub micro-interactions: subtle hover lift on interactive cards ── */
.intel-os .os-domain-card,
.intel-os .os-metric,
.intel-os .os-command-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-smooth), background var(--transition-fast);
}
.intel-os .os-domain-card:hover,
.intel-os .os-metric:hover,
.intel-os .os-command-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: reduce) {
  .intel-os .os-domain-card,
  .intel-os .os-metric,
  .intel-os .os-command-card,
  .intel-os .os-domain-track > span,
  .intel-os .os-gauge-fill {
    transition: none !important;
  }
  .intel-os .os-domain-card:hover,
  .intel-os .os-metric:hover,
  .intel-os .os-command-card:hover {
    transform: none;
  }
}

.intel-os .os-metric-deck {
  grid-auto-flow: dense;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.intel-os .os-metric {
  position: relative;
  display: grid;
  border-left: 4px solid var(--os-tone, var(--os-line-strong));
}
.intel-os .os-metric-link {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.62rem 2rem 0.62rem 0.66rem;
  color: inherit;
  text-decoration: none;
}
.intel-os .os-metric:hover {
  border-color: color-mix(in srgb, var(--os-tone, var(--os-focus)) 44%, var(--os-line));
}
.intel-os .os-metric-link:hover {
  color: var(--os-ink);
  text-decoration: none;
}
.intel-os .os-metric strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.intel-os .os-metric small {
  color: var(--os-muted);
  font-size: 0.7rem;
  line-height: 1.25;
}
.intel-os .os-pin {
  position: absolute;
  z-index: 1;
  top: 0.36rem;
  right: 0.36rem;
  display: inline-grid;
  place-items: center;
  width: 1.42rem;
  height: 1.42rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--os-muted);
}
.intel-os .os-pin:hover,
.intel-os .os-pin.is-active,
.intel-os .os-metric:hover .os-pin {
  color: var(--os-focus);
  background: color-mix(in srgb, var(--os-focus) 10%, transparent);
}
.intel-os .os-metric.is-pinned {
  background: color-mix(in srgb, var(--os-focus) 8%, var(--os-panel-2));
  border-color: color-mix(in srgb, var(--os-focus) 52%, var(--os-line));
}
.intel-os .os-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  width: fit-content;
  padding: 0.08rem 0.34rem;
  border-radius: var(--radius-full);
  font-size: 0.64rem;
  font-weight: 850;
  white-space: nowrap;
}
.intel-os .os-trend-up { color: var(--success-text, #15803d); background: var(--success-dim, rgba(22,163,74,0.12)); }
.intel-os .os-trend-down { color: var(--danger-text, #b91c1c); background: var(--danger-dim, rgba(220,53,69,0.12)); }
.intel-os .os-trend-flat { color: var(--os-muted); background: color-mix(in srgb, var(--os-muted) 12%, transparent); }
.intel-os .os-trend-label {
  color: inherit;
  opacity: 0.78;
  font-weight: 700;
}
.intel-os .os-closeout-list a {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.intel-os .os-closeout-list small {
  display: block;
  color: var(--os-muted);
  font-size: 0.66rem;
}
.intel-os .os-mini-forecast a {
  grid-template-columns: minmax(0, 1fr) auto;
  border-left: 3px solid var(--os-tone, var(--os-line-strong));
}
.intel-os .is-filtered-out {
  display: none !important;
}
.intel-os .os-scenario-panel .scenario-card {
  background: var(--os-panel-2);
  border-color: var(--os-line);
}
.intel-os .os-scenario-panel .scenario-card h3 {
  line-height: 1.2;
}
.intel-os .os-scenario-panel .font-mono {
  white-space: nowrap;
}
.intel-os.os-month-signal {
  margin-top: var(--os-gap);
}
.intel-os .os-month-signal-panel {
  border-left: 4px solid var(--os-tone, var(--os-focus));
}
.intel-os .os-month-signal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.5rem;
}
.intel-os .os-month-signal-head h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.14;
}
.intel-os .os-month-signal-head p {
  margin: 0.18rem 0 0;
  color: var(--os-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}
.intel-os .os-signal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.22rem 0.52rem;
  border: 1px solid color-mix(in srgb, var(--os-tone, var(--os-focus)) 45%, var(--os-line));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--os-tone, var(--os-focus)) 11%, transparent);
  color: var(--os-tone, var(--os-focus));
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.intel-os .os-month-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-left: auto;
}
.intel-os .os-month-picker label {
  color: var(--os-muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.intel-os .os-month-picker input,
.intel-os .os-month-picker button {
  min-height: 1.55rem;
  border: 1px solid var(--os-line);
  border-radius: 7px;
  background: var(--os-panel-3);
  color: var(--os-ink);
  font-size: 0.68rem;
  font-weight: 800;
}
.intel-os .os-month-picker input {
  width: 8.3rem;
  padding: 0.12rem 0.34rem;
}
.intel-os .os-month-picker button {
  padding: 0.14rem 0.46rem;
}
.intel-os .os-month-picker button:hover {
  border-color: color-mix(in srgb, var(--os-focus) 46%, var(--os-line));
  color: var(--os-focus);
}
.intel-os .os-month-reset {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.14rem 0.38rem;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--os-muted);
  font-size: 0.66rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}
.intel-os .os-month-reset:hover {
  border-color: var(--os-line);
  color: var(--os-focus);
  background: var(--os-panel-3);
}
.intel-os .os-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.62rem;
  margin: -0.1rem 0 0.52rem;
  color: var(--os-muted);
  font-size: 0.63rem;
  font-weight: 800;
}
.intel-os .os-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  white-space: nowrap;
}
.intel-os .os-chart-legend i {
  width: 0.68rem;
  height: 0.18rem;
  border-radius: var(--radius-full);
  background: var(--os-line-strong);
}
.intel-os .os-chart-legend .is-bar i {
  height: 0.48rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--os-steady) 0 48%, var(--os-critical) 52% 100%);
}
.intel-os .os-chart-legend .is-gp i {
  background: var(--os-steady);
}
.intel-os .os-chart-legend .is-spend i {
  background: var(--os-critical);
}
.intel-os .os-chart-legend .is-worth i {
  height: 0.2rem;
  background: var(--os-focus);
}
.intel-os .os-chart-legend .is-projection i {
  background: repeating-linear-gradient(
    90deg,
    var(--os-watch) 0 4px,
    transparent 4px 7px
  );
  border: 1px solid color-mix(in srgb, var(--os-watch) 55%, transparent);
}
.intel-os .os-month-signal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 260px);
  gap: 0.65rem;
  align-items: stretch;
}
.intel-os .os-month-chart-wrap {
  min-height: 265px;
  padding: 0.45rem;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-panel-3);
}
.intel-os .os-month-chart-wrap canvas {
  width: 100% !important;
  height: 255px !important;
}
.intel-os .os-month-signal-metrics {
  display: grid;
  gap: 0.4rem;
  align-content: stretch;
}
.intel-os .os-month-signal-metrics article {
  display: grid;
  gap: 0.16rem;
  padding: 0.58rem 0.62rem;
  border: 1px solid var(--os-line);
  border-radius: var(--os-radius);
  background: var(--os-panel-2);
}
.intel-os .os-month-signal-metrics span {
  color: var(--os-muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.intel-os .os-month-signal-metrics strong {
  font-size: 1rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.intel-os .os-month-signal-metrics small {
  color: var(--os-muted);
  font-size: 0.66rem;
}
.intel-os .os-month-signal-empty {
  display: grid;
  gap: 0.3rem;
  place-items: center;
  min-height: 8.5rem;
  padding: 1rem;
  border: 1px dashed var(--os-line-strong);
  border-radius: var(--os-radius);
  background: var(--os-panel-3);
  color: var(--os-muted);
  text-align: center;
}
.intel-os .os-month-signal-empty i {
  color: var(--os-tone, var(--os-focus));
  font-size: 1.4rem;
}

/* ── Modern hub: AI insight banner + hero gauge (fintech-inspired) ──
   Brand-tinted, theme-aware. The gauge arc shows how much of the month has
   elapsed; its colour follows the same os-tone as the rest of the panel. */
.intel-os .os-insight-banner {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  margin-bottom: var(--os-gap);
  padding: 0.62rem 0.82rem;
  border: 1px solid var(--os-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--os-tone, var(--os-focus)) 8%, var(--os-panel));
}
.intel-os .os-insight-spark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--os-tone, var(--os-focus)) 20%, transparent);
  color: var(--os-tone, var(--os-focus));
  font-size: 1.02rem;
}
.intel-os .os-insight-banner p {
  margin: 0;
  color: var(--os-ink);
  font-size: 0.84rem;
  line-height: 1.4;
}

.intel-os .os-gauge {
  position: relative;
  width: 100%;
  max-width: 232px;
  justify-self: end;
  margin: 0;
  padding: 0.55rem 0.7rem 0.5rem;
  border: 1px solid var(--os-line);
  border-radius: var(--radius-lg);
  background: var(--os-panel-3);
}
.intel-os .os-gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.intel-os .os-gauge-track,
.intel-os .os-gauge-fill {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.intel-os .os-gauge-track {
  stroke: color-mix(in srgb, var(--os-muted) 22%, transparent);
}
.intel-os .os-gauge-fill {
  stroke: var(--os-tone, var(--os-focus));
  stroke-dasharray: var(--gauge-pct, 0) 100;
  transition: stroke-dasharray 700ms var(--ease-out, ease);
}
.intel-os .os-gauge-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.55rem;
  bottom: 1.7rem;       /* clear the foot row so the number centres in the arc */
  display: grid;
  gap: 0.04rem;
  align-content: end;
  justify-items: center;
  text-align: center;
}
.intel-os .os-gauge-center .os-gauge-label {
  color: var(--os-muted);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.intel-os .os-gauge-center strong {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.intel-os .os-gauge-status {
  color: var(--os-tone, var(--os-focus));
  font-size: 0.62rem;
  font-weight: 850;
}
.intel-os .os-gauge-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.1rem;
  color: var(--os-muted);
  font-size: 0.6rem;
  font-weight: 800;
}
.intel-os .os-gauge-foot small {
  color: var(--os-ink);
  font-size: 0.74rem;
  font-weight: 900;
}

@media (max-width: 980px) {
  .intel-os .os-hero {
    grid-template-columns: 1fr;
  }
  .intel-os .os-hero-aside {
    justify-items: stretch;
  }
  .intel-os .os-gauge {
    max-width: 260px;
    justify-self: start;
  }
}

@media (max-width: 1180px) {
  .intel-os .os-layout {
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  }
  .intel-os .os-right-rail {
    position: static;
    max-height: none;
    overflow: visible;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .intel-os .os-month-signal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .intel-os .os-month-signal-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .intel-os .os-metric-deck {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .intel-os .os-hero,
  .intel-os .os-command-grid,
  .intel-os .os-stack-columns,
  .intel-os .os-driver-grid,
  .intel-os .os-forecast-strip,
  .intel-os .os-domain-map,
  .intel-os .os-right-rail {
    grid-template-columns: 1fr;
  }
  .intel-os .os-layout {
    display: flex;
    flex-direction: column;
  }
  .intel-os .os-command-stack-panel,
  .intel-os .os-inspector {
    grid-column: auto;
    grid-row: auto;
    position: static;
  }
  .intel-os .os-stack-columns {
    grid-template-areas:
      "now"
      "next"
      "watch";
  }
  .intel-os .os-stack-now .os-stack-items {
    grid-template-columns: 1fr;
  }
  .intel-os .os-workspace { order: 1; width: 100%; }
  .intel-os .os-right-rail { order: 2; width: 100%; }
  .intel-os .os-left-rail { order: 3; width: 100%; }
  .intel-os .os-left-rail,
  .intel-os .os-right-rail {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .intel-os .os-hero-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .intel-os .os-domain-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .intel-os .os-filter-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .intel-os .os-metric-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .intel-os {
    --os-gap: 0.55rem;
  }
  .intel-os .os-hero {
    padding: 0.72rem;
  }
  .intel-os .os-hero h1 {
    font-size: 1.34rem;
    line-height: 1.08;
  }
  .intel-os .os-hero p {
    font-size: 0.8rem;
    line-height: 1.35;
  }
  .intel-os .os-hero-meta {
    gap: 0.34rem;
  }
  .intel-os .os-hero-meta > div {
    padding: 0.42rem;
  }
  .intel-os .os-meta-label {
    font-size: 0.56rem;
  }
  .intel-os .os-hero-meta strong {
    font-size: 0.76rem;
  }
  .intel-os .os-domain-rail,
  .intel-os .os-filter-stack,
  .intel-os .os-metric-deck,
  .intel-os .os-hero-meta,
  .intel-os .os-month-signal-metrics {
    grid-template-columns: 1fr;
  }
  .intel-os .os-month-signal-head {
    display: grid;
    gap: 0.45rem;
  }
  .intel-os .os-month-picker {
    width: 100%;
    justify-content: stretch;
    flex-wrap: wrap;
  }
  .intel-os .os-month-picker input {
    flex: 1 1 auto;
    width: auto;
  }
  .intel-os .os-month-reset {
    margin-left: auto;
  }
  .intel-os .os-chart-legend {
    gap: 0.24rem 0.5rem;
    font-size: 0.6rem;
  }
  .intel-os .os-month-chart-wrap {
    min-height: 230px;
    padding: 0.32rem;
  }
  .intel-os .os-month-chart-wrap canvas {
    height: 220px !important;
  }
  .intel-os .os-panel:not(.os-panel-tight),
  .intel-os .os-panel-tight {
    padding: 0.6rem;
  }
  .intel-os .os-command-pick {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .intel-os .os-command-open {
    display: none;
  }
  .intel-os .os-command-actions,
  .intel-os .os-inspector-actions {
    align-items: stretch;
  }
  .intel-os .os-command-actions form,
  .intel-os .os-inspector-actions form,
  .intel-os .os-command-actions .os-btn,
  .intel-os .os-inspector-actions .os-btn {
    flex: 1 1 auto;
  }
  .intel-os .os-driver strong,
  .intel-os .os-forecast-card strong,
  .intel-os .os-domain-metric {
    font-size: 1rem;
  }
  .intel-os .os-metric strong {
    font-size: 1.16rem;
  }
}

/* Interaction QA v3: additive workflow polish.
   Keep this layer scoped to interaction quality so legacy templates, routes,
   selectors, forms, and exports continue to behave as before. */
:root {
  --iq3-focus-ring: color-mix(in srgb, var(--accent, #007aff) 64%, transparent);
  --iq3-focus-fill: color-mix(in srgb, var(--accent, #007aff) 12%, transparent);
  --iq3-hit: 2.35rem;
  --iq3-hit-sm: 2.05rem;
  --iq3-radius: 8px;
}

.btn:focus-visible,
.btn-icon:focus-visible,
.dropdown-item:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.accordion-button:focus-visible,
.table-show-more:focus-visible,
.search-clear:focus-visible,
.seg-link:focus-visible,
.clean-detail-panel > summary:focus-visible,
.table-responsive[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--iq3-focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.18rem var(--iq3-focus-fill);
}

.btn-icon,
.btn.btn-icon,
.table .btn-icon,
.table-toolbar .btn-icon,
.ds-table-toolbar .btn-icon,
.page-header-actions .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--iq3-hit);
  min-height: var(--iq3-hit);
  gap: 0.32rem;
  line-height: 1;
}

.btn-sm.btn-icon,
.table .btn-sm.btn-icon,
.table-toolbar .btn-sm.btn-icon,
.ds-table-toolbar .btn-sm.btn-icon {
  min-width: var(--iq3-hit-sm);
  min-height: var(--iq3-hit-sm);
}

.page-header-actions .dropdown-menu,
.ds-more-menu .dropdown-menu,
.table-toolbar .dropdown-menu,
.ds-table-toolbar .dropdown-menu,
.modal .dropdown-menu {
  padding: 0.32rem;
  border-radius: var(--iq3-radius);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

.page-header-actions .dropdown-item,
.ds-more-menu .dropdown-item,
.table-toolbar .dropdown-item,
.ds-table-toolbar .dropdown-item,
.modal .dropdown-item {
  min-height: 2.2rem;
  align-items: center;
  border-radius: 6px;
  line-height: 1.2;
}

.dropdown-item i[class^="bi-"],
.dropdown-item i[class*=" bi-"] {
  flex: 0 0 1rem;
  text-align: center;
}

.clean-detail-panel > summary,
.accordion-button,
.table-show-more {
  touch-action: manipulation;
}

.clean-detail-panel > summary::-webkit-details-marker {
  display: none;
}

.clean-detail-panel > summary {
  cursor: pointer;
}

.modal-content {
  border-radius: var(--iq3-radius);
}

.modal-header {
  gap: 0.65rem;
  min-height: 3.25rem;
  padding-block: 0.72rem;
}

.modal-title {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.16;
}

.modal-body {
  padding-block: 0.85rem;
}

.modal-body .row {
  --bs-gutter-y: 0.78rem;
}

.modal-body .form-label {
  margin-bottom: 0.28rem;
  line-height: 1.2;
}

.modal-body .form-text,
.modal-body .invalid-feedback,
.modal-body .valid-feedback {
  line-height: 1.25;
}

.modal-footer {
  gap: 0.45rem;
  padding-block: 0.72rem;
}

.modal-footer > * {
  margin: 0;
}

.table-responsive {
  position: relative;
}

.table-responsive.is-x-scrollable {
  outline: 1px solid color-mix(in srgb, var(--accent, #007aff) 8%, transparent);
  outline-offset: -1px;
  box-shadow: inset -16px 0 16px -18px color-mix(in srgb, var(--text-primary) 42%, transparent);
}

.table-responsive.is-x-scrollable.is-scrolled-x::before {
  content: none;
}

.table-responsive.is-x-scrollable.is-scrolled-x {
  box-shadow:
    inset 16px 0 16px -18px color-mix(in srgb, var(--text-primary) 42%, transparent),
    inset -16px 0 16px -18px color-mix(in srgb, var(--text-primary) 42%, transparent);
}

.table-responsive.is-x-scrollable.is-at-x-end {
  box-shadow: inset 16px 0 16px -18px color-mix(in srgb, var(--text-primary) 42%, transparent);
}

.table-toolbar,
.ds-table-toolbar,
.filter-toolbar,
.ds-filter-panel form,
.clean-filter-bar {
  min-width: 0;
}

.table-toolbar .form-control,
.table-toolbar .form-select,
.ds-table-toolbar .form-control,
.ds-table-toolbar .form-select,
.filter-toolbar .form-control,
.filter-toolbar .form-select,
.ds-filter-panel .form-control,
.ds-filter-panel .form-select {
  min-height: 2.25rem;
}

.empty-state,
.clean-empty-state {
  border-radius: var(--iq3-radius);
}

.empty-state .btn,
.clean-empty-state .btn {
  min-height: 2.2rem;
}

@media (max-width: 575.98px) {
  :root {
    --iq3-hit: 2.5rem;
    --iq3-hit-sm: 2.25rem;
  }

  .page-header-actions .btn,
  .ds-page-actions .btn,
  .table-toolbar .btn,
  .ds-table-toolbar .btn,
  .filter-toolbar .btn,
  .modal-footer .btn {
    min-height: var(--iq3-hit);
  }

  .page-header-actions .dropdown,
  .ds-page-actions .dropdown,
  .page-header-actions .btn-group,
  .ds-page-actions .btn-group {
    max-width: 100%;
  }

  .page-header-actions .dropdown-toggle,
  .ds-page-actions .dropdown-toggle,
  .table-toolbar .dropdown-toggle,
  .ds-table-toolbar .dropdown-toggle {
    max-width: 100%;
    white-space: normal;
  }

  .modal-dialog {
    margin: 0.55rem;
  }

  .modal-content {
    max-height: calc(100dvh - 1.1rem);
  }

  .modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  .modal-footer .btn {
    flex: 1 1 auto;
  }

  .table-toolbar,
  .ds-table-toolbar,
  .filter-toolbar,
  .clean-filter-bar {
    align-items: stretch;
  }

  .table-toolbar .input-group,
  .table-toolbar .form-control,
  .table-toolbar .form-select,
  .ds-table-toolbar .input-group,
  .ds-table-toolbar .form-control,
  .ds-table-toolbar .form-select,
  .filter-toolbar .input-group,
  .filter-toolbar .form-control,
  .filter-toolbar .form-select {
    width: 100%;
  }

  .table-responsive.is-x-scrollable {
    border-bottom: 1px solid color-mix(in srgb, var(--accent, #007aff) 16%, var(--border));
  }
}

@media (prefers-reduced-motion: reduce) {
  .table-responsive.is-x-scrollable { scroll-behavior: auto; }
}

@media print {
  .table-responsive.is-x-scrollable {
    outline: 0;
    box-shadow: none;
  }

  .table-show-more {
    display: none !important;
  }
}

/* Interaction QA v3.1: next-round polish.
   Narrow refinements for real-use control consistency after the v3 baseline. */
.btn-icon,
.action-btn,
.dropdown-item,
.table-show-more,
.saved-filter-chip {
  -webkit-tap-highlight-color: transparent;
}

.btn-icon > i,
.action-btn > i,
.dropdown-item > i,
.table-show-more > i,
.btn > i,
.saved-filter-chip > i {
  pointer-events: none;
}

.table .btn-icon,
.table-actions .btn-icon,
.row-actions .btn-icon,
td.row-actions .btn-icon {
  flex: 0 0 auto;
}

.table-actions,
.row-actions,
td.row-actions {
  white-space: nowrap;
}

.table-show-more {
  min-height: var(--iq3-hit-sm);
  gap: 0.38rem;
  touch-action: manipulation;
}

.table-show-more .label,
.table-show-more .count {
  line-height: 1.1;
}

.table-responsive.is-x-scrollable {
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.table-responsive.is-x-scrollable:focus-visible {
  scroll-margin-block: 0.75rem;
}

.page-header-actions .dropdown-menu,
.ds-more-menu .dropdown-menu,
.table-toolbar .dropdown-menu,
.ds-table-toolbar .dropdown-menu,
.modal .dropdown-menu {
  max-width: min(22rem, calc(100vw - 1rem));
}

.page-header-actions .dropdown-item,
.ds-more-menu .dropdown-item,
.table-toolbar .dropdown-item,
.ds-table-toolbar .dropdown-item,
.modal .dropdown-item {
  white-space: normal;
}

.modal-body .alert,
.modal-body .callout,
.modal-body .form-text {
  max-width: 100%;
}

@media (max-width: 575.98px) {
  .page-header-actions .dropdown-menu,
  .ds-more-menu .dropdown-menu,
  .table-toolbar .dropdown-menu,
  .ds-table-toolbar .dropdown-menu {
    width: min(22rem, calc(100vw - 1rem));
  }

  .table-show-more {
    justify-content: center;
    width: 100%;
  }
}

@media print {
  .btn-icon,
  .action-btn,
  .dropdown-item,
  .table-show-more {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Visual Refresh v4: design-debt finish.
   Keep this layer additive and brand-compatible. It smooths remaining bespoke
   detail, intelligence, report, and support surfaces without changing routes,
   forms, IDs, selectors, exports, or accounting behavior. */
:root {
  --vr4-radius: 8px;
  --vr4-card-pad: 0.9rem;
  --vr4-card-pad-sm: 0.68rem;
  --vr4-line: color-mix(in srgb, var(--text-secondary) 16%, transparent);
  --vr4-line-strong: color-mix(in srgb, var(--text-secondary) 26%, transparent);
  --vr4-panel: color-mix(in srgb, var(--surface) 86%, var(--gray-100) 14%);
  --vr4-panel-soft: color-mix(in srgb, var(--surface) 94%, var(--gray-100) 6%);
}

.page-header-row + .section-card,
.page-header-row + .row,
.page-header-row + form,
.page-header-row + .alert,
.page-header-row + .v4-detail-page {
  margin-top: 0.15rem;
}

.section-card.ds-table-panel,
.section-card.ds-modal-section,
.section-card.v4-support-card,
.section-card.v4-report-card,
.section-card.v4-detail-card,
.section-card.h-100 {
  border-color: var(--vr4-line);
}

.section-card.ds-table-panel > .table-toolbar,
.section-card .chart-card-head,
.v4-card-head {
  min-height: 2.75rem;
}

.chart-card-head,
.v4-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.72rem;
}

.chart-card-head h2,
.v4-card-head h2,
.pack-section h2,
.inv-section-head {
  letter-spacing: 0;
}

.chart-card-head > span,
.v4-card-head > span {
  max-width: 40rem;
  text-align: right;
  line-height: 1.25;
}

.section-card.h-100 > .table-responsive:first-child,
.section-card.mb-3 > .table-responsive:first-child {
  margin-top: 0.25rem;
}

.v4-detail-page {
  display: grid;
  gap: 0.9rem;
}

.v4-detail-page .ds-kpi-row {
  margin-bottom: 0 !important;
}

.v4-history-filter,
.urgency-filter[data-kind-filter],
.urgency-filter[data-source-filter] {
  background: var(--vr4-panel-soft);
}

.v4-history-filter .btn,
.urgency-filter[data-kind-filter] .btn,
.urgency-filter[data-source-filter] .btn {
  min-height: 2rem;
}

.v4-history-print .table td,
.v4-history-print .table th {
  vertical-align: middle;
}

.v4-history-print .table td:last-child {
  min-width: 12rem;
}

.setting-field {
  position: relative;
  transition: border-color 0.15s ease;
}

.setting-field.field-dirty .form-label > span:first-child::before {
  content: "*";
  color: var(--bs-warning, #ffc107);
  margin-right: 0.4em;
  vertical-align: middle;
  font-size: 0.82em;
  font-weight: 900;
}

.setting-field.field-dirty input {
  border-color: var(--bs-warning, #ffc107);
}

.status-pill-compact {
  font-size: 0.65rem;
}

.intel-abbr {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.scenario-card-icon {
  font-size: 1.1rem;
}

.insight-banner,
.payroll-command,
.cycle-banner,
.scenario-card,
.cash-cell,
.pace-side,
.metric-track,
.metric-bar-track {
  border-radius: var(--vr4-radius);
}

.insight-banner {
  border-color: var(--vr4-line-strong);
}

.cycle-banner-fill,
.pace-bar-fill,
.cohort-pill-fill {
  width: var(--bar-width, auto);
}

.metric-fill {
  width: var(--bar-width, 0%);
  opacity: var(--bar-opacity, 1);
  background: var(--bar-color, var(--accent));
}

.period-close-progress-fill {
  width: var(--bar-width, 0%);
}

.bulk-field-row {
  padding: 0.5rem;
  border-radius: var(--vr4-radius-sm);
  transition: background-color 0.15s ease;
}

.bulk-field-row.bulk-field-active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.cohort-cell:not(.cohort-cell-empty) {
  background: color-mix(in srgb, var(--accent) var(--cohort-intensity, 8%), transparent);
}

.metric-fill-success { --bar-color: var(--success); }
.metric-fill-warning { --bar-color: var(--warning); }
.metric-fill-danger { --bar-color: var(--danger); }
.metric-fill-accent { --bar-color: var(--accent); }

.stmt-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stmt-filter input[type="date"] {
  max-width: 150px;
}

.stmt-row-opening td,
.stmt-row-closing td {
  background: var(--surface-muted);
  font-weight: 600;
}

.stmt-row-payment td.amt {
  color: var(--success);
}

.stmt-entry-type {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stmt-entry-type.pay {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  color: var(--success);
}

.stmt-entry-type.out {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.stmt-invoice-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.stmt-invoice-link:hover {
  text-decoration: underline;
}

.aging-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-muted);
  border-radius: var(--vr4-radius);
  background: var(--surface-muted);
}

.aging-cell {
  min-width: 0;
  text-align: center;
}

.aging-cell .label {
  color: var(--text-muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aging-cell .value {
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-weight: 600;
}

.aging-cell.total .value {
  color: var(--accent);
}

.stmt-empty-cell {
  text-align: center;
}

.pack-page {
  max-width: 1040px;
  margin: 0 auto;
}

.pack-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #111827;
}

.pack-title {
  margin: 0;
  font-size: 1.7rem;
}

.pack-meta {
  margin: 0.25rem 0 0;
  color: #6b7280;
}

.pack-section {
  margin: 1.25rem 0;
  break-inside: avoid;
}

.pack-section h2 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.pack-table {
  width: 100%;
  border-collapse: collapse;
}

.pack-table th,
.pack-table td {
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid #e5e7eb;
}

.pack-table th {
  background: #f9fafb;
  text-align: left;
}

.pack-table .amount {
  text-align: right;
  white-space: nowrap;
}

.pack-total td {
  border-top: 2px solid #111827;
  font-weight: 700;
}

.pack-status {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .chart-card-head,
  .v4-card-head {
    display: grid;
    gap: 0.35rem;
  }

  .chart-card-head > span,
  .v4-card-head > span {
    text-align: left;
  }

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

  .stmt-empty-cell {
    padding-left: 0.75rem !important;
    text-align: left;
  }

  .pack-header .d-flex {
    display: grid !important;
  }
}

@media (max-width: 575.98px) {
  .v4-detail-page {
    gap: 0.68rem;
  }

  .section-card.ds-table-panel > .table-toolbar,
  .section-card .chart-card-head,
  .v4-card-head {
    min-height: 0;
  }
}

@media print {
  .v4-history-print .page-header-actions,
  .v4-history-print [data-kind-filter],
  .v4-history-print [data-source-filter],
  .v4-history-print .urgency-filter {
    display: none !important;
  }

  .v4-history-print .section-card,
  .v4-history-print .kpi-card {
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .v4-history-print .table thead th {
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.statement-page {
    padding: 0 !important;
    font-size: 10pt;
    line-height: 1.25;
  }

  .statement-page .invoice-wrap {
    padding: 0 !important;
  }

  .statement-page .brand-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
  }

  .statement-page .brand-name { font-size: 14pt !important; }
  .statement-page .brand-sub { margin-top: 0.1rem; font-size: 8pt !important; }
  .statement-page .inv-eyebrow { font-size: 7pt !important; }
  .statement-page .inv-number { font-size: 11pt !important; }
  .statement-page .meta-grid { gap: 0.75rem; padding: 0.5rem 0.75rem; margin-bottom: 0.8rem; }
  .statement-page .meta-label { font-size: 7pt !important; }
  .statement-page .meta-val { font-size: 9pt !important; }
  .statement-page .meta-sub { font-size: 8pt !important; }
  .statement-page .billed-to-avatar { width: 26px !important; height: 26px !important; font-size: 9pt !important; }
  .statement-page .inv-section { margin-bottom: 0.6rem; }
  .statement-page .inv-section-head { padding: 0.35rem 0.6rem; font-size: 9pt; }
  .statement-page .inv-table thead th { padding: 0.25rem 0.5rem; font-size: 7pt; }
  .statement-page .inv-table tbody td { padding: 0.2rem 0.5rem; font-size: 8.5pt; }
  .statement-page .stmt-entry-type { padding: 0.04rem 0.35rem; font-size: 7pt; }
  .statement-page .stmt-row-opening td,
  .statement-page .stmt-row-closing td { padding: 0.3rem 0.5rem; }
  .statement-page tr { page-break-inside: avoid; }
  .statement-page thead { display: table-header-group; }
  .statement-page .totals-wrap { margin-bottom: 0.6rem; }
  .statement-page .totals-stack { min-width: 220px; }
  .statement-page .totals-row { padding: 0.15rem 0; font-size: 8.5pt; }
  .statement-page .totals-grand { padding-top: 0.3rem; margin-top: 0.25rem; font-size: 9.5pt; }
  .statement-page .aging-grid { gap: 0.35rem; padding: 0.35rem 0.5rem; }
  .statement-page .aging-cell .label { font-size: 6.5pt; }
  .statement-page .aging-cell .value { margin-top: 0.05rem; font-size: 9pt; }
  .statement-page .inv-footer-grid { gap: 0.6rem; padding-top: 0.5rem; }
  .statement-page .footer-note { padding-top: 0.4rem; margin-top: 0.2rem; font-size: 7pt; }
  .statement-page .stmt-invoice-link { color: inherit; text-decoration: none; }

  .pack-page {
    max-width: none;
  }

  .pack-page .no-print,
  .pack-page nav,
  .pack-page .navbar,
  .pack-page .sidebar {
    display: none !important;
  }
}

/* Visual QA v5: rough-edge finish.
   This layer is intentionally additive. It addresses screenshot-observed
   wrapping, overflow, table, and tap-target polish without changing routes,
   forms, IDs, exports, selectors, or accounting behavior. */
:root {
  --v5-edge-pad: 0.75rem;
  --v5-soft-line: color-mix(in srgb, var(--text-secondary) 14%, transparent);
  --v5-soft-panel: color-mix(in srgb, var(--surface) 92%, var(--gray-100) 8%);
}

.period-chips {
  max-width: 100%;
  min-width: 0;
}

.period-chips .period-chip,
.period-chips a.period-chip {
  flex: 0 0 auto;
}

.filter-bar .ms-auto {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.filter-bar .filter-select {
  min-width: min(14rem, 100%);
}

.saved-filter-chip,
.saved-filter-chip-add,
.filter-chip,
.btn.btn-link.btn-sm.collapsed,
.btn.btn-link.btn-sm[aria-expanded] {
  min-height: 1.875rem;
}

.saved-filter-chip-delete,
.os-pin {
  min-width: 1.75rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.count-input.form-control-sm {
  min-height: 1.875rem;
}

.status-bar-section {
  min-width: 0;
}

.status-bar-section > span,
.status-bar-section strong,
.status-bar-section .font-mono {
  overflow-wrap: anywhere;
}

.v4-history-print .page-header-row,
.v4-detail-page .page-header-row {
  min-width: 0;
}

.v4-detail-page {
  grid-template-columns: minmax(0, 1fr);
}

.v4-detail-page > *,
.v4-history-print > * {
  min-width: 0;
}

.v4-history-print .row {
  max-width: 100%;
}

.v4-history-print .page-header,
.v4-detail-page .page-header {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cohort-pill-strip {
  min-width: 0;
  padding-bottom: 0.2rem;
  overscroll-behavior-x: contain;
}

.cohort-pill {
  flex: 0 0 auto;
}

.pack-page {
  width: min(100%, 1040px);
}

.pack-table {
  table-layout: auto;
}

.pack-table td:first-child,
.pack-table th:first-child {
  overflow-wrap: anywhere;
}

.pack-table .amount {
  white-space: nowrap;
}

.pack-section h2,
.pack-section h3 {
  line-height: 1.25;
}

@media (max-width: 575.98px) {
  .page-header-row {
    min-width: 0;
  }

  .page-header-row .page-header,
  .page-header-row .page-header-actions {
    width: 100%;
    min-width: 0;
  }

  .page-header-row .page-header-actions {
    display: flex;
    justify-content: flex-start;
  }

  .page-header-actions .btn,
  .page-header-actions .dropdown,
  .page-header-actions .btn-group {
    max-width: 100%;
  }

  .page-header-actions .btn {
    white-space: normal;
    text-align: left;
  }

  .period-chips {
    margin-inline: calc(var(--v5-edge-pad) * -1);
    padding-inline: var(--v5-edge-pad);
    scroll-padding-inline: var(--v5-edge-pad);
  }

  .section-card > .px-3 > .period-chips,
  .section-card > .no-print > .period-chips {
    margin-inline: 0;
    padding-inline: 0.15rem;
  }

  .period-chips .period-chip,
  .period-chips a.period-chip {
    min-height: 2rem;
    padding-inline: 0.72rem;
  }

  .filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.5rem;
  }

  .filter-bar .form-control-sm,
  .filter-bar .form-select-sm,
  .filter-bar .filter-date,
  .filter-bar .filter-select {
    width: 100%;
    max-width: none;
  }

  .filter-bar .btn,
  .filter-bar .btn-sm {
    width: 100%;
    justify-content: center;
    min-height: 2.05rem;
  }

  .filter-bar .ms-auto {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-start;
  }

  .filter-bar .text-caption,
  .filter-bar .status-pill {
    white-space: normal;
  }

  .table-toolbar .toolbar-controls {
    width: 100%;
  }

  .table-toolbar .toolbar-controls > *,
  .table-toolbar .search-field {
    max-width: 100%;
  }

  .v4-history-print .page-header-actions .btn {
    flex: 1 1 100%;
  }

  .cohort-pill-strip {
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }

  .pack-page {
    padding-inline: 0.4rem;
  }

  .pack-header {
    margin-bottom: 0.75rem;
  }

  .pack-title {
    font-size: 1.28rem;
  }

  .pack-meta {
    overflow-wrap: anywhere;
  }

  .pack-section {
    margin: 0.95rem 0;
  }

  .pack-table {
    width: 100%;
    font-size: 0.82rem;
  }

  .pack-table th,
  .pack-table td {
    padding: 0.3rem 0.34rem;
  }

  .pack-table .amount {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media print {
  .pack-page {
    width: 100%;
  }

  .pack-table td:first-child,
  .pack-table th:first-child {
    overflow-wrap: normal;
  }
}

/* Visual QA v5.1: final control touch polish.
   Keeps existing controls and selectors intact while smoothing the remaining
   screenshot-audit flags from v5. */
.intel-os .os-icon-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
}

.intel-os .os-btn {
  min-height: 30px;
}

.intel-os .os-command-stack .os-btn,
.intel-os .os-inspector-actions .os-btn {
  min-height: 30px !important;
}

.intel-os .os-command-stack .os-icon-btn {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
}

.intel-os .os-month-picker input,
.intel-os .os-month-picker button,
.intel-os .os-month-reset {
  min-height: 30px !important;
}

.segmented input[type="radio"],
.segmented input[type="checkbox"] {
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.bulk-select,
.bulk-select-all,
#bulkCheckAll,
.bulk-check,
input[aria-label="Select all unpaid"] {
  width: 28px;
  height: 28px;
}

.count-input.form-control-sm,
.loc-count-input.form-control-sm {
  min-height: 1.875rem;
}

.table .form-check-input.bulk-select,
.table .form-check-input.bulk-select-all,
.table #bulkCheckAll,
.table .bulk-check {
  margin-top: 0;
}

/* Reliability UI v6: bug and consistency pass.
   Additive only; keeps routes, IDs, form contracts, and JS selectors intact. */
@media (max-width: 575.98px) {
  .login-page {
    overflow-x: clip;
  }

  .login-page::before {
    inset: 0;
  }

  .login-box {
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 1.5rem;
  }

  .login-lockup {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    margin-bottom: 1.35rem;
  }

  .login-brand-icon {
    width: 54px;
    height: auto;
  }

  .login-lockup-divider {
    height: 48px;
  }

  .login-box .brand {
    font-size: 2rem;
    letter-spacing: 0.22rem;
  }

  .login-brand-tagline {
    letter-spacing: 0.24rem;
  }

  .login-lockup-est {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    letter-spacing: 0.14rem;
    line-height: 1.45;
    text-align: center;
    overflow-wrap: anywhere;
  }
}

/* Polish round 2: lighter mobile navigation chrome.
   Additive only; preserves bottom-nav links, labels, selectors, and targets. */
@media (max-width: 768px) {
  :root {
    --mobile-tabbar-height: calc(52px + (2 * var(--tabbar-float-gap)) + env(safe-area-inset-bottom));
  }

  .tab-bar {
    background: rgba(250, 250, 252, 0.9);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    /* all-around lift so the floating fallback bar reads as a detached pane */
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
  }

  [data-theme="dark"] .tab-bar {
    background: rgba(28, 28, 30, 0.86);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
  }

  .tab-bar-inner {
    height: 52px;
  }

  .tab-link {
    gap: 2px;
    padding: 4px 2px 3px;
    font-size: 0.58rem;
  }

  .tab-link i {
    font-size: 1.08rem;
  }

  /* capsule proportions tuned for the 52px mobile bar */
  .tab-link.active::before {
    inset: 5px 9%;
  }
}

/* Consistency Hardening v7: bug and error hardening.
   Scoped fixes only; no route, form, selector, export, or business-logic changes. */
body.login-page,
.login-page {
  overflow-x: clip;
}

.login-page::before {
  inset: 0;
}

/* Consistency Hardening v7.1: title/icon polish.
   Only adds breathing room where a leading icon has no Bootstrap margin helper. */
.table-toolbar .toolbar-title > i.bi:not([class*="me-"]),
.section-title > i.bi:not([class*="me-"]),
.dropdown-item > i.bi:not([class*="me-"]) {
  margin-right: 0.38rem;
  vertical-align: -0.08em;
}

.status-bar strong {
  white-space: nowrap;
  overflow-wrap: normal;
}

@media (max-width: 575.98px) {
  .status-bar {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.35rem 0.6rem;
  }

  .status-bar .spacer {
    display: none;
  }

  .status-bar-section {
    flex: 1 1 calc(50% - 0.6rem);
    align-items: flex-start;
  }

  .status-bar-section + .status-bar-section {
    padding-left: 0;
    border-left: 0;
  }

  .status-bar-section > span {
    overflow-wrap: normal;
  }
}

/* Consistency Hardening v7.2: action-row icon polish.
   Keeps icon-only controls centered by excluding labelled icon buttons. */
.page-header-actions .btn:not([aria-label]):not(.btn-icon) > i.bi:not([class*="me-"]) {
  margin-right: 0.35rem;
}

/* Prevention v8: verified detail-action polish.
   Additive only; preserves routes, IDs, form contracts, exports, and JS selectors.
   v2 mobile rules make every .action-cluster full width. Detail pages that use
   .action-bar need their More menu to share the row when space allows. */
.action-bar {
  min-width: 0;
  max-width: 100%;
}

.action-bar .action-cluster,
.action-bar .ds-more-menu {
  min-width: 0;
}

.action-bar .ds-more-menu .dropdown-toggle {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .action-bar {
    width: 100%;
    align-items: flex-start;
  }

  .action-bar .action-cluster {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
  }

  .action-bar .ds-more-menu {
    flex: 0 0 auto;
    max-width: 100%;
  }
}

@media (max-width: 575.98px) {
  .action-bar .action-btn,
  .action-bar .ds-more-menu .dropdown-toggle {
    min-height: 2.5rem;
  }

  .action-bar .action-btn {
    min-width: 2.5rem;
    justify-content: center;
  }
}

/* Prevention v8.1: document-preview polish.
   The financial report pack is a document surface. Keep the screen preview
   focused like invoices/payslips while preserving its Back/Print/CSV controls. */
body.document-preview-page {
  padding-bottom: 0 !important;
}

.document-preview-page .sidebar,
.document-preview-page .tab-bar,
.document-preview-page .more-menu,
.document-preview-page .admin-override-bar,
.document-preview-page .back-to-top {
  display: none !important;
}

.document-preview-page .main-content {
  margin-left: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.document-preview-page .main-content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .document-preview-page .main-content {
    padding: 0.85rem 0.55rem 1.4rem;
  }
}

/* Experience v9: consistency and clutter-reduction polish.
   Additive only. This layer standardizes rhythm across existing v2-v8
   primitives without changing routes, forms, IDs, exports, or JS selectors. */
:root {
  --ux9-gap: 0.65rem;
  --ux9-panel-pad: 0.9rem;
  --ux9-soft-line: color-mix(in srgb, var(--text-secondary) 14%, transparent);
  --ux9-soft-surface: color-mix(in srgb, var(--surface) 94%, var(--gray-100) 6%);
}

.page-header-row {
  row-gap: var(--ux9-gap);
}

.page-header-row .page-header {
  line-height: 1.12;
}

.page-header-actions,
.action-bar {
  row-gap: 0.45rem;
}

.page-header-actions .btn,
.page-header-actions .action-btn,
.action-bar .action-btn,
.ds-more-menu .dropdown-toggle {
  min-height: 2.35rem;
}

.page-header-actions .action-btn,
.action-bar .action-btn {
  padding-inline: 0.72rem;
}

.page-header-actions .btn,
.page-header-actions .action-btn,
.action-bar .action-btn,
.ds-more-menu .dropdown-toggle {
  align-items: center;
}

.section-card.ds-table-panel,
.clean-detail-panel,
.section-card.ds-modal-section {
  border-color: var(--ux9-soft-line);
}

.section-card.ds-table-panel > .table-toolbar,
.section-card.ds-table-panel > .ds-table-toolbar {
  background: var(--ux9-soft-surface);
}

.table-toolbar,
.ds-table-toolbar {
  row-gap: 0.5rem;
}

.table-toolbar .toolbar-title,
.ds-table-toolbar .toolbar-title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.filter-bar,
.clean-filter-bar,
.ds-filter-panel {
  row-gap: 0.55rem;
}

.filter-bar .ms-auto,
.table-toolbar .toolbar-controls,
.ds-table-toolbar .toolbar-controls {
  min-width: 0;
}

.clean-detail-panel > summary {
  min-height: 2.65rem;
}

.clean-detail-panel > summary small {
  max-width: min(42rem, 100%);
}

.empty-state-row td,
.table tbody tr.empty-state-row td {
  padding-block: 1.2rem;
}

.modal-body .ds-modal-section + .ds-modal-section,
.modal-body .section-card.ds-modal-section + .section-card.ds-modal-section {
  margin-top: 0.75rem;
}

.modal-footer {
  gap: 0.5rem;
}

.invoice-toolbar {
  gap: 0.5rem;
  align-items: center;
}

.invoice-toolbar .btn,
.document-preview-page .no-print .btn {
  min-height: 2.25rem;
}

@media (max-width: 575.98px) {
  :root {
    --ux9-panel-pad: 0.75rem;
  }

  .page-header-row {
    margin-bottom: 0.85rem;
  }

  .page-header-actions,
  .action-bar {
    gap: 0.4rem;
  }

  .page-header-actions .btn,
  .page-header-actions .action-btn,
  .action-bar .action-btn,
  .ds-more-menu .dropdown-toggle {
    min-height: 2.5rem;
  }

  .page-header-actions .action-btn,
  .action-bar .action-btn {
    justify-content: center;
  }

  .filter-bar,
  .clean-filter-bar {
    align-items: stretch;
  }

  .filter-bar .btn,
  .filter-bar .btn-sm,
  .clean-filter-bar .btn,
  .clean-filter-bar .btn-sm {
    justify-content: center;
  }

  .section-card.ds-table-panel > .table-toolbar,
  .section-card.ds-table-panel > .ds-table-toolbar {
    padding-inline: var(--ux9-panel-pad);
  }

  .clean-detail-panel > summary {
    gap: 0.45rem;
  }

  .invoice-toolbar {
    justify-content: flex-start;
  }
}

/* Experience v9.1: focused follow-up polish.
   Additive only. Improves dense count-entry ergonomics and scroll affordance
   without changing stock-take form fields, table IDs, or JavaScript hooks. */
@media (max-width: 575.98px) {
  .table-responsive.is-x-scrollable {
    scroll-padding-inline: 0.75rem;
  }

  #countTable .count-input.form-control-sm,
  #locTable .loc-count-input.form-control-sm {
    min-width: 4.75rem;
    min-height: 2.25rem;
  }

  #countTable th,
  #countTable td,
  #locTable th,
  #locTable td {
    vertical-align: middle;
  }
}

/* Experience v9.2: detail-page rhythm polish.
   Additive class layer for profile summary cards and direct header action
   clusters. Keeps field IDs, modal targets, forms, and route contracts intact. */
.detail-profile-card .row {
  --bs-gutter-y: 0.55rem;
}

.detail-profile-card strong {
  font-weight: 800;
}

.detail-profile-card .status-pill {
  vertical-align: baseline;
}

@media (max-width: 575.98px) {
  .detail-profile-card {
    padding: 0.85rem;
  }

  .detail-profile-card .row {
    --bs-gutter-x: 0.85rem;
    --bs-gutter-y: 0.7rem;
  }

  .detail-profile-card .row > [class*="col-"] {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .detail-profile-card strong {
    display: block;
    margin-bottom: 0.08rem;
    color: var(--text-tertiary);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .page-header-row > .action-cluster {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
  }

  .page-header-row > .action-cluster .ds-more-menu {
    flex: 0 0 auto;
  }
}

/* Experience v9.3: quick-period control polish.
   On mobile, wrap period chips into a compact grid instead of leaving the
   final range partially hidden in a horizontal strip. */
@media (max-width: 575.98px) {
  .period-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.7rem, 1fr));
    width: 100%;
    overflow: visible;
    gap: 0.3rem;
  }

  .period-chips .period-label {
    justify-content: center;
    text-align: center;
    padding-inline: 0.45rem;
  }

  .period-chips .period-chip,
  .period-chips a.period-chip {
    justify-content: center;
    min-width: 0;
    padding-inline: 0.55rem;
    text-align: center;
  }

  .section-card > .px-3 > .period-chips,
  .section-card > .no-print > .period-chips {
    padding: 0.2rem;
  }
}

/* Experience v9.4: compact KPI summary rhythm.
   Used only on page families where mobile screenshots showed full-width KPI
   stacks adding clutter before the primary work table. */
@media (max-width: 575.98px) {
  .mobile-kpi-2col {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.65rem;
  }

  .mobile-kpi-2col > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }

  .mobile-kpi-2col .kpi-card {
    padding: 0.72rem 0.75rem;
    min-height: 6.15rem;
  }

  .mobile-kpi-2col .kpi-card .label {
    gap: 0.32rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    line-height: 1.12;
  }

  .mobile-kpi-2col .kpi-card .value {
    font-size: clamp(1rem, 4.4vw, 1.14rem);
    letter-spacing: -0.2px;
  }

  .mobile-kpi-2col .kpi-card .sub {
    font-size: 0.68rem;
    line-height: 1.2;
  }
}

/* Experience v9.5: backup/support surface polish.
   Keeps backup creation, download, restore forms, inputs, and links unchanged;
   only tightens mobile status/action rhythm. */
@media (max-width: 575.98px) {
  .backup-status-grid {
    --bs-gutter-x: 0.65rem;
    --bs-gutter-y: 0.65rem;
  }

  .backup-status-grid > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }

  .backup-status-grid .backup-status-tile {
    align-items: flex-start;
    min-height: 4.9rem;
    gap: 0.52rem;
    padding: 0.72rem;
  }

  .backup-status-grid .backup-status-tile .icon {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.95rem;
  }

  .backup-status-grid .backup-status-tile .label {
    line-height: 1.12;
    letter-spacing: 0.05em;
  }

  .backup-status-grid .backup-status-tile .value {
    overflow-wrap: anywhere;
    line-height: 1.18;
  }

  .backup-action-grid {
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .backup-action-grid > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
  }

  .backup-action-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.75rem;
    padding: 0.9rem;
    text-align: left !important;
  }

  .backup-action-card .backup-hero-icon {
    grid-row: 1 / span 2;
    align-self: start;
    font-size: 1.75rem;
    line-height: 1;
    margin-top: 0.1rem;
  }

  .backup-action-card h2 {
    margin: 0 !important;
    font-size: 0.96rem;
    line-height: 1.2;
  }

  .backup-action-card .backup-description {
    margin-bottom: 0.15rem;
    line-height: 1.35;
  }

  .backup-action-card form,
  .backup-action-card > .btn {
    grid-column: 1 / -1;
  }
}

/* Experience v9.6: stock-take closeout nav polish.
   Keeps the Day/Week/Month/Stock Take links intact while avoiding the
   awkward 3+1 wrap on mobile. */
@media (max-width: 575.98px) {
  .stocktake-closeout-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 86%, var(--gray-100) 14%);
  }

  .stocktake-closeout-nav .nav-item {
    min-width: 0;
  }

  .stocktake-closeout-nav .nav-link {
    width: 100%;
    min-height: 2.35rem;
    justify-content: center;
    padding: 0.42rem 0.28rem;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: 0.76rem;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }

  .stocktake-closeout-nav .nav-link .bi {
    margin-right: 0.2rem !important;
  }
}

/* Experience v9.7: staged-message card polish.
   Preserves message IDs, copy targets, and POST actions while giving the
   pending-send cards a clearer header/action/body hierarchy. */
.staged-message-card {
  overflow: hidden;
}

.staged-message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.staged-message-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
}

.staged-message-meta .ms-2 {
  margin-left: 0 !important;
}

.staged-message-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.staged-message-label {
  margin-bottom: 0.15rem;
  color: var(--text-tertiary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.staged-message-subject {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.staged-message-card .message-body-pre {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 92%, var(--gray-100) 8%);
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  .staged-message-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .staged-message-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    width: 100%;
  }

  .staged-message-actions .btn,
  .staged-message-actions form,
  .staged-message-actions form .btn {
    width: 100%;
  }

  .staged-message-actions form:last-child,
  .staged-message-actions form:last-child .btn {
    width: auto;
  }

  .staged-message-card .message-body-pre {
    max-height: min(58vh, 34rem);
    overflow: auto;
    padding: 0.75rem;
  }
}

/* Experience v9.8: recommendation and intelligence density polish.
   Keeps recommendation rules, action links, and intelligence values intact;
   only improves wrapping, scan rhythm, and contained table density. */
.refinement-rec-card,
.refinement-insight-stack .section-card,
.section-card.refinement-insight-stack {
  overflow-wrap: anywhere;
}

.refinement-rec-card .chart-card-head,
.refinement-insight-stack .chart-card-head {
  gap: 0.55rem 0.75rem;
}

.refinement-rec-card code,
.refinement-rec-table code {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.refinement-rec-card .badge,
.refinement-rec-table .badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  white-space: nowrap;
}

.refinement-rec-table {
  border-radius: var(--radius-sm);
}

@media (max-width: 575.98px) {
  .refinement-rec-card,
  .refinement-insight-stack .section-card,
  .section-card.refinement-insight-stack {
    padding: 0.85rem;
  }

  .refinement-rec-card .table th,
  .refinement-rec-card .table td,
  .refinement-rec-table .table th,
  .refinement-rec-table .table td,
  .refinement-insight-stack .table th,
  .refinement-insight-stack .table td {
    padding: 0.46rem 0.55rem;
    line-height: 1.25;
  }

  .refinement-rec-card code,
  .refinement-rec-table code {
    font-size: 0.72rem;
  }

  .refinement-insight-stack .metric-bar-track {
    min-width: 4.5rem;
  }

  .refinement-insight-stack .insight-row {
    gap: 0.65rem;
  }
}

/* Experience v9.9: sparse report and admin empty-state polish.
   Preserves report/draft actions and existing empty-state copy. */
.refinement-empty-surface {
  min-height: min(42vh, 22rem);
  align-content: center;
}

td.refinement-empty-surface {
  padding: 1.35rem !important;
}

.section-card.refinement-empty-surface {
  display: grid;
}

.refinement-sparse-table .table-responsive {
  border-radius: var(--radius-sm);
}

.refinement-sparse-table .table td:last-child {
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .refinement-empty-surface {
    min-height: 15rem;
    padding: 1rem;
  }

  td.refinement-empty-surface {
    padding: 0.9rem !important;
  }

  .refinement-sparse-table .table th,
  .refinement-sparse-table .table td {
    padding: 0.52rem 0.6rem;
  }
}

/* Experience v9.10: table footer, pagination, and show-more rhythm.
   Leaves table IDs, show-all JavaScript, pagination links, filters, and exports unchanged. */
.section-card .table-show-more,
.ds-table-panel .table-show-more {
  border-top: 1px solid var(--border-muted);
}

.section-card tfoot td,
.ds-table-panel tfoot td {
  background: color-mix(in srgb, var(--surface) 92%, var(--gray-100) 8%);
  border-top-color: var(--border-muted);
}

.pagination-wrap,
.table-footer,
.table-count-footer {
  gap: 0.55rem;
}

@media (max-width: 575.98px) {
  .section-card .table-show-more,
  .ds-table-panel .table-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding: 0.55rem 0.7rem;
  }

  .section-card tfoot td,
  .ds-table-panel tfoot td {
    padding: 0.62rem 0.65rem;
    line-height: 1.25;
  }

  .pagination-wrap,
  .table-footer,
  .table-count-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-block: 0.65rem;
    row-gap: 0.45rem;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.32rem;
  }

  .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding-inline: 0.62rem;
  }
}

/* Experience v9.11: filter bar and form-control final pass.
   Normalizes mobile wrapping while preserving GET names, IDs, export query strings,
   form methods, and clear/filter button behavior. */
.filter-bar .form-control,
.filter-bar .form-select,
.toolbar-controls .form-control,
.toolbar-controls .form-select {
  min-width: 0;
}

.filter-bar .text-muted,
.toolbar-controls .text-muted {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .filter-bar {
    row-gap: 0.55rem;
  }

  .filter-bar .form-control,
  .filter-bar .form-select,
  .filter-bar .btn,
  .toolbar-controls .form-control,
  .toolbar-controls .form-select,
  .toolbar-controls .btn {
    min-height: 2.42rem;
  }

  .filter-bar .input-group,
  .toolbar-controls .input-group {
    min-width: 0;
  }

  .filter-bar .btn,
  .toolbar-controls .btn {
    align-items: center;
    justify-content: center;
  }

  .filter-bar .ms-auto,
  .toolbar-controls .ms-auto {
    margin-left: 0 !important;
  }
}

/* Experience v10: workflow-level refinement.
   Additive only: improves action hierarchy, dense table rhythm, modal/form
   spacing, detail/history surfaces, and document preview polish without
   changing routes, IDs, selectors, form contracts, exports, or calculations. */
.page-header-row {
  gap: 0.85rem 1rem;
}

.page-header-actions {
  row-gap: 0.5rem;
}

.page-header-actions .btn,
.page-header-actions .action-btn,
.action-bar .btn,
.action-bar .action-btn {
  min-height: 2.45rem;
}

.ds-table-panel > .chart-card-head,
.ds-table-panel > .table-toolbar {
  border-bottom: 1px solid var(--border-muted);
}

.ds-table-panel > .chart-card-head {
  padding: 0.85rem 1rem;
}

.ds-table-panel > .chart-card-head + .table-responsive,
.ds-table-panel > .table-toolbar + .table-responsive,
.ds-table-panel > .filter-bar + .table-responsive {
  margin-top: 0;
}

.table-toolbar .toolbar-meta {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  overflow-wrap: anywhere;
}

.ds-table-panel .table thead th {
  white-space: nowrap;
}

.ds-table-panel .table tbody td {
  vertical-align: middle;
}

.modal-body .row.g-3 {
  --bs-gutter-y: 0.85rem;
}

.modal-body .form-label {
  margin-bottom: 0.32rem;
  line-height: 1.18;
}

.modal-body .alert {
  border-radius: var(--radius-sm);
  line-height: 1.35;
}

.clean-detail-panel .clean-detail-body,
.detail-profile-card,
.insight-banner {
  overflow-wrap: anywhere;
}

.invoice-toolbar,
.document-preview-page .page-header-row,
.report-print-header {
  overflow-wrap: anywhere;
}

.invoice-toolbar .btn,
.document-preview-page .page-header-actions .btn,
.document-preview-page [data-action="print"] {
  min-height: 2.35rem;
}

.workforce-period-form {
  min-width: 0;
}

@media (max-width: 575.98px) {
  .page-header-row {
    align-items: flex-start;
  }

  .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.5rem;
  }

  .page-header-actions .btn,
  .page-header-actions .action-btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: min(10rem, 100%);
  }

  .page-header-actions .dropdown,
  .page-header-actions form {
    flex: 1 1 auto;
  }

  .page-header-actions .dropdown > .btn,
  .page-header-actions form > .btn,
  .page-header-actions form > .action-btn {
    width: 100%;
  }

  .ds-table-panel > .chart-card-head,
  .ds-table-panel > .table-toolbar {
    padding: 0.75rem 0.8rem;
  }

  .table-toolbar {
    gap: 0.55rem;
  }

  .table-toolbar .toolbar-title {
    line-height: 1.2;
  }

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

  .ds-table-panel .table thead th {
    font-size: 0.68rem;
    letter-spacing: 0.055em;
  }

  .modal-dialog {
    margin-inline: 0.5rem;
  }

  .modal-body {
    padding: 0.9rem;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 0.75rem 0.9rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border-muted);
  }

  .modal-footer .btn {
    flex: 1 1 auto;
    min-height: 2.55rem;
  }

  .invoice-toolbar {
    gap: 0.5rem;
  }

  .invoice-toolbar .btn,
  .document-preview-page .page-header-actions .btn,
  .document-preview-page [data-action="print"] {
    flex: 1 1 auto;
    justify-content: center;
  }

  .workforce-header-actions {
    align-items: stretch;
  }

  .workforce-period-form {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    gap: 0.45rem;
  }

  .workforce-period-form .form-control {
    min-width: 0;
  }

  .workforce-period-form .btn:not([type="submit"]) {
    min-width: 2.45rem;
  }

  .workforce-period-form button[type="submit"],
  .workforce-period-form a[title*="current month"] {
    grid-column: span 3;
    width: 100%;
  }
}

/* Experience v11: practical polish and heuristic cleanup.
   Scoped visual refinements only; preserves routes, IDs, forms, exports,
   selector contracts, and business calculations. */
.intel-os .os-command-actions,
.intel-os .os-inspector-actions {
  align-items: center;
}

.intel-os .os-command-card,
.intel-os .os-domain-card {
  scroll-margin-top: 1rem;
}

[data-page="inventory"] ~ .row .kpi-card,
[data-page="intelligence-product-detail"] ~ .row .kpi-card {
  min-height: 100%;
}

.invoice-toolbar {
  align-items: center;
}

@media (max-width: 575.98px) {
  .intel-os .os-command-grid,
  .intel-os .os-stack-columns {
    gap: 0.7rem;
  }

  .intel-os .os-command-card {
    padding: 0.68rem;
  }

  .intel-os .os-command-pick {
    gap: 0.55rem;
  }

  .intel-os .os-command-actions,
  .intel-os .os-inspector-actions {
    gap: 0.45rem;
  }

  .intel-os .os-command-actions .os-btn,
  .intel-os .os-inspector-actions .os-btn,
  .intel-os .os-btn {
    min-height: 2.25rem;
    justify-content: center;
  }

  .intel-os .os-panel-head {
    gap: 0.35rem 0.55rem;
  }

  [data-page="inventory"] ~ .row.ds-kpi-row,
  [data-page="intelligence-product-detail"] ~ .row {
    --bs-gutter-x: 0.55rem;
    --bs-gutter-y: 0.55rem;
  }

  [data-page="inventory"] ~ .row .kpi-card,
  [data-page="intelligence-product-detail"] ~ .row .kpi-card {
    padding: 0.68rem;
  }

  [data-page="inventory"] ~ .row .kpi-card .label,
  [data-page="intelligence-product-detail"] ~ .row .kpi-card .label {
    line-height: 1.12;
  }

  [data-page="inventory"] ~ .row .kpi-card .sub,
  [data-page="intelligence-product-detail"] ~ .row .kpi-card .sub {
    line-height: 1.22;
  }

  .invoice-toolbar {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Workflow Polish v12: Deep Safe workflow refinement.
   Additive rhythm, wrapping, touch-target, and table-ending polish only. */
.page-header-row {
  row-gap: 0.75rem;
}

.page-header-actions {
  align-items: stretch;
}

.page-header-actions .btn,
.page-header-actions .action-btn,
.page-header-actions .dropdown-toggle {
  min-height: 2.5rem;
}

.section-card.ds-table-panel,
.clean-detail-panel,
.detail-profile-card,
.payroll-command {
  scroll-margin-top: 1rem;
}

.section-card.ds-table-panel > .table-toolbar,
.ds-table-panel > .table-toolbar {
  gap: 0.72rem 0.9rem;
}

.table-toolbar > div:first-child,
.table-toolbar .toolbar-title,
.table-toolbar .toolbar-meta {
  min-width: 0;
}

.table-toolbar .toolbar-title,
.section-card h2,
.clean-detail-summary {
  overflow-wrap: anywhere;
}

.table-toolbar .toolbar-controls,
.table-toolbar .toolbar-actions {
  gap: 0.5rem;
}

.table-toolbar .toolbar-controls .btn,
.table-toolbar .toolbar-actions .btn,
.filter-bar .btn,
.filter-bar .btn-sm,
.urgency-filter .btn,
.period-chip,
.filter-chip {
  min-height: 2.28rem;
}

.table-toolbar .toolbar-controls .btn,
.urgency-filter .btn,
.filter-chip,
.period-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-bar {
  row-gap: 0.65rem;
}

.filter-bar .filter-date,
.filter-bar .filter-select {
  min-width: min(10.5rem, 100%);
}

.urgency-filter {
  gap: 0.45rem !important;
}

.urgency-filter .status-pill,
.btn .status-pill,
.filter-chip .status-pill {
  flex-shrink: 0;
}

.ds-table-panel .table-responsive {
  scrollbar-gutter: stable;
}

.ds-table-panel .table tfoot td,
.section-card .table tfoot td {
  padding-block: 0.78rem;
}

.pagination-wrap,
.table-footer {
  border-top: 1px solid var(--border-muted);
}

.pagination-wrap {
  padding: 0.85rem 1rem;
}

.table-actions {
  gap: 0.35rem;
}

.table-actions .btn-icon,
.table-actions .quick-view-btn {
  flex: 0 0 auto;
}

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

.modal-body .modal-summary,
.modal-body .ds-modal-section,
.modal-body .section-card {
  overflow-wrap: anywhere;
}

.modal-footer {
  gap: 0.55rem;
}

.workforce-shell .workforce-header-actions {
  gap: 0.55rem;
}

.workforce-shell .workforce-primary-board,
.workforce-shell .workforce-secondary-grid .ds-table-panel,
.workforce-shell .workforce-ytd-section {
  overflow: hidden;
}

.workforce-shell .kpi-card-flat {
  min-height: 100%;
}

.workforce-shell .btn-group .btn,
.segmented label {
  white-space: normal;
}

.roster-mobile-cards .table-actions {
  align-items: center;
}

.detail-profile-card .status-pill,
.detail-profile-card .badge,
.payroll-command .status-pill {
  max-width: 100%;
}

.intel-os .os-command-actions,
.intel-os .os-inspector-actions {
  row-gap: 0.45rem;
}

.intel-os .os-command-title,
.intel-os .os-command-detail,
.intel-os .os-domain-card {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .page-header-row {
    gap: 0.65rem;
  }

  .page-header-actions {
    gap: 0.55rem;
  }

  .page-header-actions > .btn,
  .page-header-actions > .action-btn,
  .page-header-actions > .dropdown,
  .page-header-actions > form {
    flex: 1 1 calc(50% - 0.55rem);
    min-width: 0;
  }

  .page-header-actions .btn,
  .page-header-actions .action-btn,
  .page-header-actions .dropdown-toggle {
    min-height: 2.65rem;
    padding-inline: 0.75rem;
  }

  .section-card.ds-table-panel,
  .clean-detail-panel {
    margin-bottom: 1rem;
  }

  .section-card.ds-table-panel > .table-toolbar,
  .ds-table-panel > .table-toolbar {
    gap: 0.65rem;
  }

  .table-toolbar .toolbar-controls,
  .table-toolbar .toolbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .table-toolbar .toolbar-controls > .btn-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(5.75rem, 1fr);
    overflow-x: auto;
    padding-bottom: 0.12rem;
  }

  .table-toolbar .toolbar-controls > .btn-group .btn {
    min-width: 0;
  }

  .table-toolbar .search-field,
  .table-toolbar .search-field-wide,
  .table-toolbar .form-select,
  .table-toolbar .segmented {
    width: 100%;
  }

  .filter-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

  .filter-bar .form-control,
  .filter-bar .form-select,
  .filter-bar .btn,
  .filter-bar .btn-sm {
    width: 100%;
    min-height: 2.55rem;
  }

  .filter-bar > .text-muted.small:not(.text-caption) {
    text-align: center;
    line-height: 1;
  }

  .filter-bar .ms-auto {
    margin-left: 0 !important;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .period-chips {
    gap: 0.42rem;
  }

  .period-chip,
  .filter-chip {
    min-height: 2.35rem;
  }

  .urgency-filter {
    padding: 0.72rem 0.82rem !important;
  }

  .urgency-filter > span:first-child {
    flex-basis: 100%;
    margin-right: 0 !important;
  }

  .urgency-filter .btn {
    flex: 1 1 calc(50% - 0.45rem);
    min-width: 0;
    white-space: normal;
  }

  .ds-table-panel .table tfoot td,
  .section-card .table tfoot td {
    padding-block: 0.82rem;
  }

  .pagination-wrap,
  .table-footer {
    gap: 0.65rem;
    padding: 0.85rem;
  }

  .pagination-wrap {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pagination .page-link {
    min-width: 2.35rem;
    text-align: center;
  }

  .table-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .table-footer > * {
    min-width: 0;
  }

  .workforce-shell .workforce-header-actions {
    align-items: stretch;
  }

  .workforce-shell .workforce-header-actions > .btn,
  .workforce-shell .workforce-header-actions > .dropdown {
    flex: 1 1 calc(50% - 0.55rem);
  }

  .workforce-shell .btn-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .workforce-shell .btn-group .btn {
    min-width: 0;
    padding-inline: 0.4rem;
  }

  .roster-mobile-cards tbody tr {
    scroll-margin-top: 1rem;
  }

  .roster-mobile-cards .table-actions {
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .detail-profile-card,
  .payroll-command {
    padding: 0.9rem;
  }

  .detail-profile-card .status-pill {
    white-space: normal;
  }

  .modal-footer .btn {
    min-height: 2.6rem;
    min-width: min(10rem, 100%);
  }

  .intel-os .os-command-actions,
  .intel-os .os-inspector-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .intel-os .os-command-actions form,
  .intel-os .os-command-actions .os-btn,
  .intel-os .os-inspector-actions .os-btn {
    width: 100%;
  }

  .workforce-shell .workforce-header-actions > .workforce-period-form {
    flex: 1 0 100%;
  }

  .workforce-shell .workforce-header-actions > .dropdown {
    flex: 1 0 100%;
  }

  .workforce-shell .table-toolbar .toolbar-controls {
    display: flex;
    flex-wrap: wrap;
  }

  .workforce-shell .table-toolbar .toolbar-controls > .btn-group,
  .workforce-shell .table-toolbar .toolbar-controls > .search-field {
    flex: 1 0 100%;
  }

  .workforce-shell .table-toolbar .toolbar-controls > .toolbar-divider {
    display: none;
  }

  .workforce-shell .table-toolbar .toolbar-controls > .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 2.65rem;
  }

  .workforce-shell .table-toolbar .toolbar-controls > .btn:not([data-density-target]) {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Polish v13: inventory empties reliability and UX finish
   Additive only. Supports clearer reversal warnings, calmer crate workflows,
   and tighter mobile/document toolbar rhythm without changing contracts.
   ========================================================================== */

.v13-crate-reversal-alert {
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(255, 251, 235, 0.94);
  color: #5f4212;
}

[data-theme="dark"] .v13-crate-reversal-alert {
  background: rgba(120, 75, 18, 0.22);
  border-color: rgba(245, 158, 11, 0.32);
  color: #f8e4b4;
}

.v13-crate-reversal-alert .btn-close {
  flex: 0 0 auto;
}

.v13-crate-reversal-list {
  display: grid;
  gap: 0.35rem;
  margin: 0.55rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.9rem;
  line-height: 1.35;
}

#transferCratesModal .modal-body,
#addEmptiesModal .modal-body,
#correctionModal .modal-body {
  display: grid;
  gap: 0.9rem;
}

#transferCratesModal .form-label,
#addEmptiesModal .form-label,
#correctionModal .form-label {
  margin-bottom: 0.35rem;
}

#transferCratesModal .form-control,
#transferCratesModal .form-select,
#addEmptiesModal .form-control,
#addEmptiesModal .form-select,
#correctionModal .form-control,
#correctionModal .form-select {
  min-height: 2.5rem;
}

#crateLocationsTable td,
#crateLocationsTable th,
#emptiesTable td,
#emptiesTable th {
  vertical-align: middle;
}

.invoice-toolbar {
  gap: 0.6rem;
}

.invoice-toolbar .btn,
.invoice-toolbar button {
  min-height: 2.45rem;
}

@media (max-width: 575.98px) {
  .v13-crate-reversal-alert {
    padding: 0.85rem;
  }

  .v13-crate-reversal-alert .d-flex {
    align-items: flex-start !important;
  }

  .v13-crate-reversal-list {
    padding-left: 0.95rem;
    font-size: 0.84rem;
  }

  #transferCratesModal .row,
  #addEmptiesModal .row,
  #correctionModal .row {
    --bs-gutter-y: 0.7rem;
  }

  #transferCratesModal .btn,
  #addEmptiesModal .btn,
  #correctionModal .btn {
    min-height: 2.6rem;
  }

  .invoice-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .invoice-toolbar .btn,
  .invoice-toolbar button {
    width: 100%;
  }

  .invoice-toolbar-spacer {
    display: none;
  }
}

/* ==========================================================================
   Polish v14: actionable reversal-warning finish
   ========================================================================== */

.v14-crate-warning-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.45rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.v14-crate-warning-action::after {
  content: "→";
  font-weight: 700;
}

.v14-crate-warning-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

@media (max-width: 575.98px) {
  .v14-crate-warning-action {
    display: flex;
    width: fit-content;
    margin: 0.35rem 0 0;
  }
}

/* ==========================================================================
   Unified Action Cluster v15
   Workforce-style page action clusters and variants. Additive only: primary
   modal triggers keep .btn-brand so global keyboard shortcuts remain intact.
   ========================================================================== */

.page-header-actions .action-cluster,
.page-header-row > .action-cluster,
.action-bar .action-cluster,
.ds-action-group.action-cluster {
  display: inline-flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.58rem;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 97%, var(--text-primary) 3%),
      color-mix(in srgb, var(--surface) 92%, var(--text-primary) 8%));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 1px 2px color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.page-header-actions .action-cluster[data-cluster]::before,
.page-header-row > .action-cluster[data-cluster]::before,
.action-bar .action-cluster[data-cluster]::before,
.ds-action-group.action-cluster[data-cluster]::before {
  content: attr(data-cluster);
  position: static;
  flex: 0 0 100%;
  padding: 0 0.28rem;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.action-cluster-compact {
  padding: 0.42rem;
  border-radius: 1.1rem;
}

.action-cluster-compact[data-cluster]::before {
  font-size: 0.64rem;
}

.action-btn,
.page-header-actions .action-btn,
.action-bar .action-btn,
.ds-more-menu .dropdown-toggle.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-width: 2.65rem;
  min-height: 2.6rem;
  padding: 0.56rem 0.76rem;
  border: 1px solid color-mix(in srgb, var(--text-secondary) 16%, transparent);
  border-radius: var(--btn-radius);
  background: color-mix(in srgb, var(--surface) 94%, var(--text-primary) 6%);
  color: var(--text-primary);
  box-shadow: var(--glass-highlight);
  font-size: 0.82rem;
  font-weight: var(--btn-weight);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.action-btn > i,
.ds-more-menu .dropdown-toggle.action-btn > i {
  flex: 0 0 auto;
  margin-right: 0 !important;
  font-size: 1.1rem;
  line-height: 1;
}

.action-btn > span {
  min-width: 0;
}

.action-btn:hover,
.action-btn:focus-visible,
.page-header-actions .action-btn:hover,
.page-header-actions .action-btn:focus-visible,
.action-bar .action-btn:hover,
.action-bar .action-btn:focus-visible,
.ds-more-menu .dropdown-toggle.action-btn:hover,
.ds-more-menu .dropdown-toggle.action-btn:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 10%);
  box-shadow:
    0 0 0 0.18rem color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
  outline: 0;
  transform: translateY(-1px);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.action-btn:disabled,
.action-btn.disabled {
  pointer-events: none;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.action-btn-primary,
.action-btn-primary.btn-brand {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 82%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent) 88%, #000 12%));
}

.action-btn-primary:hover,
.action-btn-primary:focus-visible,
.action-btn-primary.btn-brand:hover,
.action-btn-primary.btn-brand:focus-visible {
  color: #fff;
  border-color: var(--accent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 96%, #fff 4%),
      color-mix(in srgb, var(--accent) 82%, #000 18%));
}

.action-btn-secondary,
.action-btn-secondary.btn-outline-brand {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--text-secondary) 16%, transparent);
}

.action-btn-utility,
.ds-more-menu .dropdown-toggle.action-btn {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface) 96%, var(--gray-100) 4%);
}

.action-btn-danger {
  color: var(--danger, #dc3545);
  border-color: color-mix(in srgb, var(--danger, #dc3545) 34%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, var(--danger, #dc3545) 8%);
}

.action-btn-danger:hover,
.action-btn-danger:focus-visible {
  color: #fff;
  border-color: var(--danger, #dc3545);
  background: var(--danger, #dc3545);
}

.action-btn-quiet {
  color: var(--text-secondary);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.action-btn.dropdown-toggle::after,
.ds-more-menu .dropdown-toggle.action-btn::after {
  margin-left: 0.1rem;
}

.page-header-actions > .action-cluster,
.page-header-row > .action-cluster,
.page-header-actions > .ds-more-menu {
  flex: 0 1 auto;
}

.action-cluster > form,
.action-cluster form.d-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  min-width: 0;
}

.action-cluster form.d-inline .action-btn {
  width: 100%;
}

.action-cluster > .form-control,
.action-cluster > .form-select,
.action-cluster > form > .form-control,
.action-cluster > form > .form-select {
  width: auto;
  min-width: min(9.5rem, 100%);
  min-height: 2.6rem;
}

.page-header-actions > .ds-more-menu .dropdown-toggle.action-btn {
  width: 100%;
}

.page-header-actions .action-cluster .btn-group {
  max-width: 100%;
}

.page-header-actions .action-cluster .btn-group .btn {
  min-height: 2.6rem;
}

@media (max-width: 575.98px) {
  .page-header-actions .action-cluster,
  .page-header-row > .action-cluster,
  .action-bar .action-cluster,
  .ds-action-group.action-cluster {
    flex: 1 1 100%;
    justify-content: center;
    padding: 0.52rem;
    border-radius: 1.2rem;
  }

  .page-header-actions .action-cluster[data-cluster]::before,
  .page-header-row > .action-cluster[data-cluster]::before,
  .action-bar .action-cluster[data-cluster]::before,
  .ds-action-group.action-cluster[data-cluster]::before {
    text-align: left;
  }

  .action-btn,
  .page-header-actions .action-btn,
  .action-bar .action-btn,
  .ds-more-menu .dropdown-toggle.action-btn {
    flex: 1 1 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.58rem 0.7rem;
  }

  .action-cluster .action-btn > span,
  .page-header-actions > .action-btn > span,
  .action-bar .action-btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .page-header-actions > .ds-more-menu {
    flex: 1 1 calc(50% - 0.55rem);
  }

  .action-cluster > form:not(.d-inline) {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .action-cluster form.d-inline {
    flex: 1 1 2.75rem;
  }

  .action-cluster > .form-control,
  .action-cluster > .form-select,
  .action-cluster > form > .form-control,
  .action-cluster > form > .form-select {
    flex: 1 1 9rem;
    min-width: 0;
  }

  @supports selector(.action-cluster:has(> .action-btn:only-child)) {
    .page-header-actions .action-cluster.action-cluster-compact:has(> .action-btn:only-child) {
      flex: 0 1 auto;
      justify-content: flex-start;
      width: auto;
    }

    .page-header-actions .action-cluster.action-cluster-compact:has(> .action-btn:only-child) > .action-btn {
      flex: 0 0 2.75rem;
      width: 2.75rem;
      padding-inline: 0;
    }
  }
}

/* ==========================================================================
   Action Cluster Polish v16
   Tighten single-action mobile header clusters. Multi-button clusters keep the
   wider workforce-style rail; solo actions become intentional compact tiles.
   ========================================================================== */

@media (max-width: 575.98px) {
  @supports selector(.action-cluster:has(> .action-btn:only-child)) {
    .page-header-actions .action-cluster.action-cluster-compact:has(> .action-btn:only-child) {
      display: inline-grid;
      grid-template-columns: 2.75rem;
      justify-content: center;
      justify-items: stretch;
      align-items: center;
      width: max-content;
      min-width: 0;
      max-width: 100%;
      gap: 0.36rem;
      padding: 0.5rem 0.52rem 0.48rem;
    }

    .page-header-actions .action-cluster.action-cluster-compact:has(> .action-btn:only-child)::before {
      grid-column: 1;
      flex-basis: auto;
      padding: 0;
      text-align: center;
    }

    .page-header-actions .action-cluster.action-cluster-compact:has(> .action-btn:only-child) > .action-btn {
      flex: none;
      width: 2.75rem;
      min-width: 2.75rem;
      padding-inline: 0;
    }
  }
}

/* ══════════════════════════════════════════════════════════════
   Liquid Glass — iOS 26 / macOS Tahoe surface language
   ──────────────────────────────────────────────────────────────
   Applied last so it cascades over the base component rules above.
   Every translucent rule is gated behind @supports backdrop-filter:
   browsers without it keep the existing solid surfaces untouched.
   ══════════════════════════════════════════════════════════════ */

/* ── Page background: a subtle layered wash so the glass panes have
      something on-brand to refract. Fixed so it stays put while scrolling. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 12% -8%,  rgba(200,150,45,0.10), transparent 60%),
    radial-gradient(1000px 720px at 108% 6%,  rgba(107,31,46,0.08),  transparent 55%),
    radial-gradient(900px 900px  at 50% 116%, rgba(160,122,34,0.06), transparent 60%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(1200px 800px at 12% -8%,  rgba(216,104,131,0.12), transparent 60%),
    radial-gradient(1000px 720px at 108% 6%,  rgba(200,150,45,0.08),  transparent 55%),
    radial-gradient(900px 900px  at 50% 116%, rgba(10,132,255,0.07),  transparent 60%);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  /* ── Section cards — the dominant container ── */
  .section-card {
    background: var(--glass-sheen), var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
    transition:
      box-shadow 240ms var(--ease-out, ease-out),
      border-color var(--transition-smooth),
      transform 240ms var(--ease-spring, ease-out);
  }
  .section-card:hover {
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  }

  /* ── KPI tiles — frosted glass with a lit top edge ── */
  .kpi-card {
    background: var(--glass-sheen), var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
  }
  .kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  }
  .kpi-card:active { transform: translateY(0); box-shadow: var(--glass-highlight), var(--glass-shadow); }

  /* ── Sidebar — floating glass pane ── */
  .sidebar {
    background: var(--glass-sheen), var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border-right: 1px solid var(--glass-border-soft);
    box-shadow: var(--glass-highlight), 1px 0 24px rgba(40,32,18,0.06);
  }

  /* ── Mobile bottom tab bar — floating glass pane ── */
  .tab-bar {
    background: var(--glass-sheen), var(--tabbar-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    backdrop-filter: saturate(180%) blur(32px);
    border: 1px solid var(--glass-border-soft);
    box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  }

  /* ── Modals — deeper blur + lit edge ── */
  .modal-content {
    background: var(--glass-sheen), var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  }
  [data-theme="dark"] .modal-content { background: var(--glass-sheen), var(--glass-bg-strong); }
  .modal-backdrop {
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    backdrop-filter: saturate(140%) blur(18px);
  }

  /* ── Filter bar — promote tint to real glass ── */
  .filter-bar {
    background: var(--glass-bg-subtle);
    -webkit-backdrop-filter: var(--glass-filter-lite);
    backdrop-filter: var(--glass-filter-lite);
    border: 1px solid var(--glass-border-soft);
    box-shadow: var(--glass-highlight);
  }

  /* ── Buttons — one glass family: a specular lit top edge across every
        tier (brand / outline / action / icon), layered over each tier's
        own shadow so their hover/active/focus behaviour is preserved. ── */
  .btn-brand {
    box-shadow: var(--glass-highlight), var(--shadow-xs);
  }
  .btn-brand:hover { box-shadow: var(--glass-highlight), var(--shadow-sm); }
  .btn-outline-brand,
  .btn-icon-muted,
  .btn-icon-edit,
  .btn-icon-danger {
    box-shadow: var(--glass-highlight);
  }

  /* ── Dropdown menus — floating glass popovers ── */
  .dropdown-menu {
    background: var(--glass-sheen), var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    border: 1px solid var(--glass-border-soft);
    box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  }

  /* ── Offcanvas (mobile "More" sheet, side panels) — glass sheet ── */
  .offcanvas {
    background: var(--glass-sheen), var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: var(--glass-highlight), var(--glass-shadow-lg);
  }


  /* ── Back-to-top — floating glass button (keeps accent on hover) ── */
  .back-to-top:not(:hover) {
    background: var(--glass-sheen), var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-filter-lite);
    backdrop-filter: var(--glass-filter-lite);
    border: 1px solid var(--glass-border-soft);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
  }

  /* ── Segmented control — glass track with a lit selected thumb ── */
  .segmented {
    background: var(--glass-bg-subtle);
    -webkit-backdrop-filter: var(--glass-filter-lite);
    backdrop-filter: var(--glass-filter-lite);
    border: 1px solid var(--glass-border-soft);
  }
  .segmented input:checked + label,
  .segmented .seg-item.active,
  .segmented .seg-item[aria-pressed="true"] {
    box-shadow: var(--glass-highlight), 0 1px 3px rgba(40,32,18,0.12);
  }

  /* ── Flash messages / alerts — translucent so the wash shows through.
        Keep each alert's semantic tint; only add blur + the lit edge. ── */
  .alert {
    -webkit-backdrop-filter: var(--glass-filter-lite);
    backdrop-filter: var(--glass-filter-lite);
    box-shadow: var(--glass-highlight), var(--shadow-xs);
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

  /* ── Period chips — glass track with a lit selected thumb ── */
  .period-chips {
    background: var(--glass-bg-subtle);
    -webkit-backdrop-filter: var(--glass-filter-lite);
    backdrop-filter: var(--glass-filter-lite);
    border: 1px solid var(--glass-border-soft);
  }
  .period-chips .period-chip.active,
  .period-chips .period-chip[aria-current="true"] {
    box-shadow: var(--glass-highlight), 0 1px 3px rgba(40,32,18,0.12);
  }

  /* ── Active sidebar nav item — lit glass lozenge (keeps the accent
        bar + tinted fill, just adds the specular top edge of glass). ── */
  .sidebar .nav-link.active,
  .sidebar a.active {
    box-shadow: inset 3px 0 0 var(--accent),
                inset 0 1px 0 rgba(255,255,255,0.40);
  }
  [data-theme="dark"] .sidebar .nav-link.active,
  [data-theme="dark"] .sidebar a.active {
    box-shadow: inset 3px 0 0 var(--accent),
                inset 0 1px 0 rgba(242,237,226,0.12);
  }

  /* ── Tabs / pills — unify the "selected segment" language with the lit
        glass thumb used by segmented controls and period chips. ── */
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-item.show .nav-link {
    box-shadow: var(--glass-highlight), var(--shadow-xs);
  }
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    box-shadow: var(--glass-highlight), 0 1px 3px rgba(40,32,18,0.16);
  }

  /* ── Pointer-tracked specular highlight on KPI tiles — the signature
        Liquid Glass sheen that follows the cursor. The --glass-mx/--glass-my
        coords are set by a progressively-enhanced pointermove handler in
        main.js (fine pointers only, skipped under reduced-motion); without
        it the gloss simply rests at the top-centre. Restricted to KPI tiles
        so it never drifts over dense table text. ── */
  .kpi-card { position: relative; }
  .kpi-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms var(--ease-out, ease-out);
    background: radial-gradient(220px circle at var(--glass-mx, 50%) var(--glass-my, 0%),
                rgba(255,255,255,0.20), transparent 62%);
  }
  [data-theme="dark"] .kpi-card::after {
    background: radial-gradient(220px circle at var(--glass-mx, 50%) var(--glass-my, 0%),
                rgba(242,237,226,0.10), transparent 62%);
  }
  .kpi-card:hover::after { opacity: 1; }
}

/* Pointer sheen is decoration only — drop it for reduced transparency/motion. */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  .kpi-card::after { display: none; }
}

/* Respect reduced-motion: drop the hover lift/spring, keep the look. */
@media (prefers-reduced-motion: reduce) {
  .section-card, .kpi-card { transition: box-shadow 200ms ease, border-color 200ms ease; }
  .kpi-card:hover, .kpi-card:active { transform: none; }
  /* Mobile micro-interactions — appear/respond without motion */
  .tab-link::before { transition: opacity 120ms ease; transform: none; }
  .tab-link.active::before { transform: none; }
  .tab-link:active, .tab-link.active i,
  .more-menu .nav-link:active,
  .more-menu .more-handle:active,
  .modal-footer .btn:active { transform: none; }
  .modal.fade .modal-dialog { transition: none; }
}

/* Accessibility — honor "Reduce Transparency" the way Apple disables
   Liquid Glass: drop the blur/translucency back to solid, opaque
   surfaces so text contrast is never compromised. */
@media (prefers-reduced-transparency: reduce) {
  body::before, [data-theme="dark"] body::before { display: none; }
  .section-card, .kpi-card, .sidebar, .tab-bar, .modal-content,
  .dropdown-menu, .offcanvas, .login-box,
  [data-theme="dark"] .modal-content {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .filter-bar, .segmented, .period-chips, .back-to-top:not(:hover) {
    background: var(--gray-100);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .modal-backdrop, .alert {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}