/* =============================================================
   BeWellthy Customer Portal — Master Stylesheet
   =============================================================
   Design tokens as CSS custom properties.
   No hardcoded colors outside :root.
   ============================================================= */

/* ----- DESIGN TOKENS ----- */
:root {
    /* Brand Colors */
    --bw-primary: #3CAA57;
    --bw-primary-rgb: 60, 170, 87;
    --bw-dark: #0A1F14;
    --bw-dark-rgb: 10, 31, 20;
    --bw-accent: #7FD192;
    --bw-accent-rgb: 127, 209, 146;

    /* Semantic Colors */
    --bw-positive: #3CAA57;
    --bw-negative: #E6A23C;
    --bw-negative-rgb: 230, 162, 60;
    --bw-info: #5B8DEF;
    --bw-info-rgb: 91, 141, 239;

    /* Surfaces */
    --bw-bg: #F8F9FA;
    --bw-card-bg: #FFFFFF;
    --bw-card-border: #E8ECF0;
    --bw-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --bw-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --bw-card-radius: 12px;

    /* Sidebar */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
    --sidebar-bg: var(--bw-dark);
    --sidebar-text: rgba(255, 255, 255, 0.7);
    --sidebar-text-active: #FFFFFF;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: rgba(60, 170, 87, 0.15);
    --sidebar-active-border: var(--bw-primary);
    --sidebar-divider: rgba(255, 255, 255, 0.08);

    /* Header */
    --header-height: 60px;
    --header-bg: var(--bw-card-bg);
    --header-border: var(--bw-card-border);
    --header-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* Text Colors */
    --text-primary: #1A2332;
    --text-secondary: #5A6A7E;
    --text-tertiary: #8896A6;
    --text-inverse: #FFFFFF;

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

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-Index Stack (ordered low-to-high, SINGLE SOURCE OF TRUTH)
       ---------------------------------------------------------------
       10   .chart-area (ensure charts render above card bg)
       50   .data-table sticky header
       80   .filter-select dropdown
       90   .portal-header (sticky)
       99   .sidebar-overlay (behind sidebar)
       100  .sidebar
       200  .sidebar-overlay.is-visible (mobile overlay)
       250  .demo-panel-overlay
       300  .demo-panel
       400  .tooltip / .source-tooltip
       500  .modal-overlay
       510  .modal
       9999 .toast (notification bar, always on top)
       --------------------------------------------------------------- */
    --z-chart: 10;
    --z-sticky-thead: 50;
    --z-filter-dropdown: 80;
    --z-header: 90;
    --z-sidebar: 100;
    --z-overlay: 200;
    --z-demo-overlay: 250;
    --z-demo-panel: 300;
    --z-tooltip: 400;
    --z-source-tooltip: 400;
    --z-modal-overlay: 500;
    --z-modal: 510;
    --z-toast: 9999;

    /* Demo Panel */
    --demo-panel-width: 520px;
}


/* ----- RESET & BASE ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--bw-bg);
    overflow-x: hidden;
}

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

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

img {
    max-width: 100%;
    display: block;
}

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

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}


/* =============================================================
   SIDEBAR
   ============================================================= */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: transform var(--transition-base);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Logo area */
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5);
    cursor: pointer;
    border-bottom: 1px solid var(--sidebar-divider);
    min-height: var(--header-height);
    transition: background-color var(--transition-fast);
}

.sidebar-logo:hover {
    background-color: var(--sidebar-hover-bg);
}

.sidebar-logo-img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.sidebar-logo-text {
    color: var(--sidebar-text-active);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.sidebar-logo-text sup {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    vertical-align: super;
    opacity: 0.6;
}

/* Nav */
.sidebar-nav {
    flex: 1;
    padding: var(--space-3) 0;
    overflow-y: auto;
}

/* Top-level nav items (HOME) */
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--sidebar-text);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    cursor: pointer;
}

.nav-item--top {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-left: 3px solid transparent;
}

.nav-item--top:hover {
    color: var(--sidebar-text-active);
    background-color: var(--sidebar-hover-bg);
}

.nav-item--top.is-active {
    color: var(--sidebar-text-active);
    background-color: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-border);
}

.nav-item-icon {
    width: 20px;
    text-align: center;
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

.nav-item-label {
    white-space: nowrap;
}

/* Nav group (collapsible sections) */
.nav-group {
    border-bottom: 1px solid var(--sidebar-divider);
}

.nav-group:last-child {
    border-bottom: none;
}

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-5);
    color: var(--sidebar-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-left: 3px solid transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    text-align: left;
}

.nav-group-toggle:hover {
    color: var(--sidebar-text-active);
    background-color: var(--sidebar-hover-bg);
}

.nav-group.is-active > .nav-group-toggle {
    color: var(--sidebar-text-active);
}

.nav-group-arrow {
    margin-left: auto;
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
}

.nav-group.is-expanded > .nav-group-toggle > .nav-group-arrow {
    transform: rotate(180deg);
}

/* Sub-items container */
.nav-group-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.nav-group.is-expanded > .nav-group-items {
    max-height: 200px;
}

/* Sub-items */
.nav-item--sub {
    display: block;
    padding: var(--space-2) var(--space-5) var(--space-2) 52px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    border-left: 3px solid transparent;
}

.nav-item--sub:hover {
    color: var(--sidebar-text-active);
    background-color: var(--sidebar-hover-bg);
}

.nav-item--sub.is-active {
    color: var(--sidebar-text-active);
    background-color: var(--sidebar-active-bg);
    border-left-color: var(--sidebar-active-border);
    font-weight: var(--font-weight-medium);
}

/* Sidebar footer */
.sidebar-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--sidebar-divider);
}

.sidebar-footer-text {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sidebar) - 1);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.sidebar-overlay.is-visible {
    display: block;
    opacity: 1;
}


/* =============================================================
   HEADER
   ============================================================= */
.portal-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-base);
}

.portal-header {
    position: sticky;
    top: 0;
    height: var(--header-height);
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--header-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    z-index: var(--z-header);
    gap: var(--space-4);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.mobile-menu-btn {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    border-radius: 6px;
    transition: background-color var(--transition-fast);
}

.mobile-menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.header-company-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.header-company-sub {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: -2px;
}

.header-center {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    justify-content: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.header-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header-user-icon {
    font-size: var(--font-size-xl);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: var(--line-height-tight);
}

.header-user-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.header-user-role {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: var(--line-height-tight);
    margin-top: 1px;
    white-space: nowrap;
}


/* =============================================================
   FILTER BAR
   ============================================================= */

/* --- Legacy class names (kept for backward compatibility) --- */
.filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-1) var(--space-8) var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background-color: var(--bw-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6A7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 120px;
}

.filter-select:hover {
    border-color: var(--bw-primary);
}

.filter-select:focus {
    outline: none;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(var(--bw-primary-rgb), 0.15);
}

.filter-divider {
    width: 1px;
    height: 24px;
    background-color: var(--bw-card-border);
    margin: 0 var(--space-2);
}

/* --- BEM classes used by filter-bar.js component --- */
.filter-bar {
    display: none !important; /* v3-Fix-3: hidden — only 8/18 views use it, misleading when ignored */
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    justify-content: center;
}

.filter-bar__group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filter-bar__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.filter-bar__select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-family);
    padding: 6px var(--space-8) 6px var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    background-color: var(--bw-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6A7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 120px;
    line-height: var(--line-height-base);
}

.filter-bar__select:hover {
    border-color: var(--bw-primary);
}

.filter-bar__select:focus {
    outline: none;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(var(--bw-primary-rgb), 0.15);
}

.filter-bar__reset {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-decoration: none;
    padding: 4px var(--space-2);
    border-radius: 4px;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    white-space: nowrap;
    margin-left: var(--space-2);
}

.filter-bar__reset:hover {
    color: var(--bw-primary);
    background-color: rgba(var(--bw-primary-rgb), 0.08);
}


/* =============================================================
   MAIN CONTENT AREA
   ============================================================= */
.portal-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Loading state */
.content-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-16) 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-md);
}

.content-loading.is-hidden {
    display: none;
}


/* =============================================================
   TYPOGRAPHY
   ============================================================= */
.page-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
}

.page-subtitle {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
    margin-bottom: var(--space-6);
}

h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h5 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* =============================================================
   CARDS
   ============================================================= */
.card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-6);
    transition: box-shadow var(--transition-fast);
}

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

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.card-subtitle {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.card-body {
    /* default: no special styling needed */
}

.card-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--bw-card-border);
}


/* =============================================================
   KPI CARDS (grid of 4)
   ============================================================= */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.kpi-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
    transition: box-shadow var(--transition-fast);
}

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

.kpi-card-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.kpi-card-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

.kpi-card-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-2);
}

.kpi-card-delta--positive {
    color: var(--bw-positive);
}

.kpi-card-delta--negative {
    color: var(--bw-negative);
}

.kpi-card-context {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}


/* =============================================================
   CHART CONTAINERS
   ============================================================= */
.chart-container {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.chart-container-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.chart-container-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.chart-container-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.chart-area {
    min-height: 300px;
    position: relative;
}

.chart-source {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-3);
    font-style: italic;
}

/* Two-column chart layout */
.chart-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.chart-row--2-1 {
    grid-template-columns: 2fr 1fr;
}

.chart-row--1-2 {
    grid-template-columns: 1fr 2fr;
}


/* =============================================================
   DATA TABLES
   ============================================================= */
.data-table-wrapper {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    overflow: hidden;
    margin-bottom: var(--space-5);
}

.data-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--bw-card-border);
}

.data-table-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

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

.data-table-search {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    background-color: var(--bw-bg);
    min-width: 200px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.data-table-search:focus {
    outline: none;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(var(--bw-primary-rgb), 0.15);
}

.data-table {
    width: 100%;
}

.data-table thead {
    background-color: var(--bw-bg);
}

.data-table th {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    border-bottom: 1px solid var(--bw-card-border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.data-table th:hover {
    color: var(--text-primary);
}

.data-table th .sort-icon {
    margin-left: var(--space-1);
    font-size: 10px;
    opacity: 0.4;
}

.data-table th.is-sorted .sort-icon {
    opacity: 1;
    color: var(--bw-primary);
}

.data-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--bw-card-border);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background-color: rgba(var(--bw-primary-rgb), 0.03);
}

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

.data-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--bw-card-border);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.data-table-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.data-table-pagination button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-secondary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.data-table-pagination button:hover {
    background-color: var(--bw-bg);
    color: var(--text-primary);
}

.data-table-pagination button.is-active {
    background-color: var(--bw-primary);
    color: var(--text-inverse);
}

.data-table-pagination button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}


/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    border: 1px solid transparent;
}

.btn--primary {
    background-color: var(--bw-primary);
    color: var(--text-inverse);
    border-color: var(--bw-primary);
}

.btn--primary:hover {
    background-color: #34964D;
    border-color: #34964D;
}

.btn--primary:active {
    background-color: #2D8243;
}

.btn--outline {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--bw-card-border);
}

.btn--outline:hover {
    background-color: var(--bw-bg);
    border-color: var(--text-tertiary);
}

.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

.btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
}

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

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* =============================================================
   BADGES / STATUS
   ============================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 100px;
    white-space: nowrap;
}

.badge--success {
    background-color: rgba(var(--bw-primary-rgb), 0.12);
    color: var(--bw-primary);
}

.badge--warning {
    background-color: rgba(var(--bw-negative-rgb), 0.12);
    color: var(--bw-negative);
}

.badge--info {
    background-color: rgba(var(--bw-info-rgb), 0.12);
    color: var(--bw-info);
}

.badge--neutral {
    background-color: var(--bw-bg);
    color: var(--text-secondary);
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot--active {
    background-color: var(--bw-positive);
}

.status-dot--paused {
    background-color: var(--bw-negative);
}

.status-dot--inactive {
    background-color: var(--text-tertiary);
}


/* =============================================================
   DEMO CONTROL PANEL (slide-over from right)
   ============================================================= */
.demo-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: var(--z-demo-overlay);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.demo-panel-overlay.is-visible {
    display: block;
    opacity: 1;
}

.demo-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--demo-panel-width);
    max-width: 90vw;
    height: 100vh;
    background-color: var(--bw-card-bg);
    z-index: var(--z-demo-panel);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.demo-panel.is-open {
    transform: translateX(0);
}

.demo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--bw-card-border);
    flex-shrink: 0;
}

.demo-panel-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.demo-panel-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-secondary);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.demo-panel-close:hover {
    background-color: var(--bw-bg);
    color: var(--text-primary);
}

.demo-panel-toolbar {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--bw-card-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-shrink: 0;
}

.demo-panel-profile-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.demo-panel-profile-row label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.demo-select {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    background-color: var(--bw-bg);
}

.demo-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.demo-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
}

/* Config section within Demo Panel */
.config-section {
    margin-bottom: var(--space-6);
}

.config-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--bw-card-border);
}

.config-row {
    display: grid;
    grid-template-columns: 1fr 100px 80px 1fr;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.config-row:last-child {
    border-bottom: none;
}

.config-param {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.config-value input {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    border: 1px solid var(--bw-card-border);
    border-radius: 4px;
    text-align: right;
}

.config-value input:focus {
    outline: none;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 2px rgba(var(--bw-primary-rgb), 0.15);
}

.config-value input.is-overridden {
    border-color: var(--bw-negative);
    background-color: rgba(var(--bw-negative-rgb), 0.05);
}

.config-default {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    text-align: center;
}

.config-source {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-source:hover {
    white-space: normal;
    word-break: break-word;
}


/* =============================================================
   SOURCE TOOLTIP POPOVERS
   ============================================================= */
.source-tooltip-popover {
    position: absolute;
    z-index: var(--z-source-tooltip);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.source-tooltip-popover--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.source-tooltip-popover__content {
    background: var(--bw-card-bg);
    border-radius: 8px;
    padding: var(--space-4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    max-width: 340px;
    min-width: 220px;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    border: 1px solid var(--bw-card-border);
}

.source-tooltip-popover__arrow {
    display: none;
}

.source-tooltip-popover__source {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.source-tooltip-popover__confidence {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-inverse);
    margin-bottom: var(--space-2);
    letter-spacing: 0.3px;
}

.source-tooltip-popover__methodology {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    line-height: var(--line-height-base);
}

.source-tooltip-popover__formula {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: var(--font-size-xs);
    background: var(--bw-bg);
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.source-tooltip-popover__link {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--bw-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-1);
}

.source-tooltip-popover__link:hover {
    text-decoration: underline;
}

/* Source reference trigger styling */
.source-ref {
    cursor: pointer;
    border-bottom: 1px dashed var(--text-tertiary);
}

.source-ref:hover {
    border-bottom-color: var(--bw-primary);
}

.source-tooltip-indicator {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-left: 2px;
    cursor: pointer;
}

.source-tooltip-indicator:hover {
    color: var(--bw-primary);
}


/* =============================================================
   TOAST NOTIFICATIONS
   ============================================================= */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    pointer-events: auto;
    animation: slideInRight var(--transition-base) both;
    max-width: 400px;
}

.toast--success {
    border-left: 3px solid var(--bw-positive);
}

.toast--warning {
    border-left: 3px solid var(--bw-negative);
}

.toast--info {
    border-left: 3px solid var(--bw-info);
}

.toast__icon {
    flex-shrink: 0;
    font-size: var(--font-size-md);
}

.toast--success .toast__icon { color: var(--bw-positive); }
.toast--warning .toast__icon { color: var(--bw-negative); }
.toast--info .toast__icon { color: var(--bw-info); }

.toast__message {
    flex: 1;
}

.toast__dismiss {
    flex-shrink: 0;
    color: var(--text-tertiary);
    padding: var(--space-1);
    cursor: pointer;
    border-radius: 4px;
}

.toast__dismiss:hover {
    background: var(--bw-bg);
    color: var(--text-primary);
}


/* =============================================================
   MODAL
   ============================================================= */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-overlay);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.modal-overlay.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.modal {
    background: var(--bw-card-bg);
    border-radius: var(--bw-card-radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
    max-width: 560px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    z-index: var(--z-modal);
    animation: fadeInUp var(--transition-base) both;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--bw-card-border);
}

.modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: var(--text-secondary);
}

.modal-close:hover {
    background: var(--bw-bg);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-6);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--bw-card-border);
}


/* =============================================================
   UTILITY CLASSES
   ============================================================= */

/* Spacing */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.pt-0 { padding-top: 0; }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }

.pb-0 { padding-bottom: 0; }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }

/* Grid */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Text */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-positive { color: var(--bw-positive); }
.text-negative { color: var(--bw-negative); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Visibility */
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Borders & Dividers */
.border-top { border-top: 1px solid var(--bw-card-border); }
.border-bottom { border-bottom: 1px solid var(--bw-card-border); }
.rounded { border-radius: var(--bw-card-radius); }


/* =============================================================
   STATE COMPONENTS: Loading, Empty, Error
   ============================================================= */

/* --- LOADING: Spinner --- */
.state-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    min-height: 200px;
}

.state-loading--spinner {
    padding: 80px var(--space-6);
}

.state-loading__spinner {
    margin-bottom: var(--space-4);
}

.state-loading__svg {
    display: block;
}

.state-loading__message {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* --- LOADING: Skeleton --- */
.state-loading--skeleton {
    align-items: stretch;
    padding: 0;
}

.state-loading__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.state-loading__card {
    background: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    padding: var(--space-5);
    overflow: hidden;
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #E8ECF0 25%, #F3F4F6 50%, #E8ECF0 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    margin-bottom: var(--space-3);
}

.skeleton-line--short { width: 40%; height: 12px; }
.skeleton-line--medium { width: 65%; }
.skeleton-line--wide { width: 90%; height: 24px; }

.state-loading__chart {
    background: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.skeleton-chart-area {
    width: 100%;
    height: 250px;
    border-radius: 8px;
    background: linear-gradient(90deg, #E8ECF0 25%, #F3F4F6 50%, #E8ECF0 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.state-loading--skeleton .state-loading__message {
    text-align: center;
    margin-top: var(--space-4);
}

/* --- EMPTY STATE --- */
.state-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.state-empty__icon {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.6;
}

.state-empty__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.state-empty__message {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0 0 var(--space-6) 0;
    line-height: var(--line-height-relaxed);
}

.state-empty__action { margin-bottom: var(--space-4); }

.state-empty__footnote {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin: 0;
    font-style: italic;
}

/* Severity variants */
.state-empty--notice {
    background: rgba(var(--bw-negative-rgb), 0.04);
    border-radius: var(--bw-card-radius);
    border: 1px dashed var(--bw-negative);
}

.state-empty--positive {
    background: rgba(var(--bw-primary-rgb), 0.04);
    border-radius: var(--bw-card-radius);
    border: 1px dashed var(--bw-primary);
}

/* --- ERROR STATE --- */
.state-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6);
    text-align: center;
    max-width: 480px;
    margin: 0 auto;
}

.state-error--full-page {
    min-height: 80vh;
    max-width: 560px;
}

.state-error__icon {
    font-size: 48px;
    color: var(--bw-negative);
    margin-bottom: var(--space-4);
    opacity: 0.8;
}

.state-error__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.state-error__message {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0 0 var(--space-6) 0;
    line-height: var(--line-height-relaxed);
}

.state-error__retry { margin-bottom: var(--space-4); }

.state-error__details-toggle { margin-bottom: var(--space-2); }

.state-error__details {
    font-size: var(--font-size-xs);
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    background: var(--bw-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    max-width: 100%;
    overflow-x: auto;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- INLINE ERROR (inside cards) --- */
.state-inline-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(var(--bw-negative-rgb), 0.06);
    border: 1px solid rgba(var(--bw-negative-rgb), 0.15);
    border-radius: 8px;
    font-size: var(--font-size-sm);
}

.state-inline-error__icon {
    color: var(--bw-negative);
    flex-shrink: 0;
}

.state-inline-error__message { color: var(--text-primary); }
.state-inline-error__suggestion { color: var(--text-secondary); font-style: italic; }
.state-inline-error__retry { flex-shrink: 0; margin-left: auto; }

/* --- INSUFFICIENT DATA --- */
.state-insufficient {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    background: rgba(var(--bw-negative-rgb), 0.04);
    border: 1px dashed var(--bw-negative);
    border-radius: var(--bw-card-radius);
    max-width: 480px;
    margin: 0 auto;
}

.state-insufficient__icon {
    font-size: 36px;
    color: var(--bw-negative);
    margin-bottom: var(--space-3);
    opacity: 0.7;
}

.state-insufficient__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2) 0;
}

.state-insufficient__message {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0 0 var(--space-3) 0;
}

.state-insufficient__footnote {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin: 0;
    font-style: italic;
}

/* --- HIDDEN UTILITY --- */
.is-hidden { display: none !important; }

/* --- PARTIAL LOAD WARNING BANNER --- */
.partial-load-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(var(--bw-negative-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--bw-negative-rgb), 0.2);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.partial-load-banner i:first-child {
    color: var(--bw-negative);
    flex-shrink: 0;
}

.partial-load-banner span { flex: 1; }

.partial-load-banner__dismiss {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    font-size: var(--font-size-base);
}

.partial-load-banner__dismiss:hover { color: var(--text-primary); }

/* --- NARRATIVE CONTEXT BANNER (engagement-first soft enforcement) --- */
.narrative-context-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: rgba(var(--bw-primary-rgb), 0.06);
    border: 1px solid rgba(var(--bw-primary-rgb), 0.15);
    border-radius: var(--bw-card-radius);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.narrative-context-banner a {
    color: var(--bw-primary);
    font-weight: var(--font-weight-semibold);
}


/* =============================================================
   ANIMATIONS & TRANSITIONS
   ============================================================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

.fade-in {
    animation: fadeIn var(--transition-base) both;
}

.fade-in-up {
    animation: fadeInUp var(--transition-base) both;
}

.slide-in-right {
    animation: slideInRight var(--transition-base) both;
}

/* Staggered card animations */
.fade-in-up:nth-child(1) { animation-delay: 0ms; }
.fade-in-up:nth-child(2) { animation-delay: 50ms; }
.fade-in-up:nth-child(3) { animation-delay: 100ms; }
.fade-in-up:nth-child(4) { animation-delay: 150ms; }
.fade-in-up:nth-child(5) { animation-delay: 200ms; }
.fade-in-up:nth-child(6) { animation-delay: 250ms; }

.fa-spin {
    animation: spin 1s linear infinite;
}


/* =============================================================
   PRINT STYLES — General
   ============================================================= */
@media print {
    body {
        background-color: #FFFFFF;
        font-size: 11pt;
    }

    .sidebar,
    .sidebar-overlay,
    .portal-header,
    .demo-panel,
    .demo-panel-overlay,
    .mobile-menu-btn,
    .content-loading,
    .data-table-actions,
    .data-table-pagination,
    .filter-group,
    .toast-container,
    .btn,
    .no-print {
        display: none !important;
    }

    .portal-main {
        margin-left: 0 !important;
    }

    .portal-content {
        padding: 0;
        max-width: none;
    }

    .card,
    .kpi-card,
    .chart-container,
    .data-table-wrapper {
        box-shadow: none;
        border: 1px solid #DDD;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .kpi-cards-row,
    .kpi-card-row {
        grid-template-columns: repeat(4, 1fr);
    }

    .portal-card {
        box-shadow: none;
        border: 1px solid #DDD;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .ai-era-card {
        background: #0A1F14 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .chart-row {
        grid-template-columns: 1fr 1fr;
    }

    a[href]::after {
        content: none;
    }
}


/* =============================================================
   PRINT STYLES — Board Report (5-page executive format)
   ============================================================= */
@media print {
    /* Report page containers */
    .report-page {
        page-break-after: always;
        page-break-inside: avoid;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 40px 60px !important;
        box-shadow: none !important;
        border: none !important;
    }

    .report-page:last-child {
        page-break-after: auto;
    }

    /* Board report specific */
    .board-report .report-page {
        min-height: 100vh;
    }

    /* Board report typography: 14pt body, 24pt headlines */
    .board-report {
        font-size: 14pt;
        line-height: 1.5;
    }

    .board-report h1,
    .board-report .report-page-title {
        font-size: 24pt;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 12pt;
    }

    .board-report h2 {
        font-size: 18pt;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 8pt;
    }

    .board-report h3 {
        font-size: 14pt;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 6pt;
    }

    .board-report p,
    .board-report .report-body-text {
        font-size: 14pt;
        line-height: 1.5;
    }

    /* Ensure charts render for print */
    .apexcharts-canvas {
        max-width: 100% !important;
    }

    /* Print-optimized colors */
    .report-page .kpi-value {
        color: #2a8a45 !important;
    }

    .report-page .report-header-bar {
        background-color: var(--bw-dark) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Page setup */
    @page {
        size: letter;
        margin: 0.5in;
    }
}

/* Board report screen preview styles (match print at screen) */
.board-report .report-page {
    background: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: 60px;
    margin-bottom: var(--space-6);
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    min-height: 1100px;
}

.board-report .report-header-bar {
    background-color: var(--bw-dark);
    color: var(--text-inverse);
    padding: var(--space-6) var(--space-8);
    border-radius: 8px;
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.board-report .report-header-bar .report-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.board-report .report-header-bar .report-subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    margin-top: var(--space-1);
}

.board-report .report-header-bar .report-logo {
    height: 40px;
}

/* Report KPI row */
.report-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.report-kpi {
    text-align: center;
    padding: var(--space-4);
}

.report-kpi-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--bw-primary);
    line-height: var(--line-height-tight);
}

.report-kpi-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-1);
}

/* Report section divider */
.report-section {
    margin-bottom: var(--space-6);
}

.report-section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--bw-primary);
}

/* Report footnotes */
.report-footnotes {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--bw-card-border);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    line-height: var(--line-height-relaxed);
}

.report-footnotes p {
    margin-bottom: var(--space-1);
}


/* =============================================================
   PORTAL CARD — Base card used across all views
   ============================================================= */
.portal-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-6);
    transition: box-shadow var(--transition-fast);
    margin-bottom: var(--space-5);
}

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


/* =============================================================
   VIEW HEADER — Page title area used by all views
   ============================================================= */
.view-header {
    margin-bottom: var(--space-6);
}

.view-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
}

.view-header__subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
}

.view-header-text {
    flex: 1;
}

.view-header-text h1 {
    margin-bottom: var(--space-1);
}

.view-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    margin: 0;
}


/* =============================================================
   SOURCE NOTE — Attribution text used across views
   ============================================================= */
.source-note {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    line-height: var(--line-height-relaxed);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--bw-card-border);
}


/* =============================================================
   EMPTY STATE — Inline variant (inside cards)
   ============================================================= */
.empty-state--inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.empty-state__icon {
    font-size: var(--font-size-lg);
    opacity: 0.5;
    margin-right: var(--space-2);
}


/* =============================================================
   HOME — KPI Cards Row (4-column grid)
   ============================================================= */
.kpi-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}


/* =============================================================
   HOME — Layout Rows (two-column layouts)
   ============================================================= */
.home-row {
    display: grid;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.home-row--60-40 {
    grid-template-columns: 3fr 2fr;
}

.home-row--50-50 {
    grid-template-columns: 1fr 1fr;
}


/* =============================================================
   HOME — Engagement Sparkline Card
   ============================================================= */
.engagement-sparkline-card {
    /* Extends .portal-card via class combo */
}

.sparkline-chart {
    min-height: 140px;
    margin: var(--space-4) 0;
}

.sparkline-summary {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
    padding-top: var(--space-3);
    border-top: 1px solid var(--bw-card-border);
}


/* =============================================================
   HOME — Quick Actions Card
   ============================================================= */
.quick-actions-card {
    /* Extends .portal-card via class combo */
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.action-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: background-color var(--transition-fast);
    text-decoration: none;
}

.action-item:hover {
    background-color: var(--bw-bg);
}

.action-item__icon {
    width: 20px;
    text-align: center;
    font-size: var(--font-size-base);
    flex-shrink: 0;
    color: var(--action-color, var(--bw-primary));
}

.action-item__chevron {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.action-item:hover .action-item__chevron {
    opacity: 1;
}


/* =============================================================
   HOME — BeWellthy Effect Card
   ============================================================= */
.bw-effect-card {
    /* Extends .portal-card via class combo */
}

.effect-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.effect-metric {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--bw-card-border);
}

.effect-metric:last-child {
    border-bottom: none;
}

.metric-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.metric-bw,
.metric-avg {
    text-align: center;
    min-width: 80px;
}

.metric-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.metric-value--primary {
    color: var(--bw-primary);
}

.metric-value--baseline {
    color: var(--text-secondary);
}

.metric-caption {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* Estimate rows (no-HRIS fallback) */
.estimate-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--bw-card-border);
}

.estimate-row:last-of-type {
    border-bottom: none;
}

.estimate-row__icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    color: var(--bw-primary);
    margin-top: 2px;
    font-size: var(--font-size-base);
}

.estimate-row__text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-base);
}

.estimate-row__source {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--space-1);
}

/* Connect HRIS CTA */
.connect-cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: rgba(var(--bw-primary-rgb), 0.06);
    border: 1px solid rgba(var(--bw-primary-rgb), 0.15);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-base);
}

.connect-cta__icon {
    flex-shrink: 0;
    color: var(--bw-primary);
    font-size: var(--font-size-base);
    margin-right: var(--space-1);
}


/* =============================================================
   HOME — AI Era Context Card (dark gradient)
   ============================================================= */
.ai-era-card {
    background: linear-gradient(135deg, var(--bw-dark) 0%, #132B1C 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    color: rgba(255, 255, 255, 0.85);
}

.ai-era-card .card-title {
    color: var(--bw-accent);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ai-era-card .card-title i {
    font-size: var(--font-size-base);
}

.ai-quote {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-4);
}

.ai-quote strong {
    color: var(--bw-accent);
    font-weight: var(--font-weight-semibold);
}

.ai-stat {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.6);
    line-height: var(--line-height-base);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.ai-stat i {
    color: var(--bw-accent);
    margin-top: 2px;
    flex-shrink: 0;
}

.ai-stat em {
    color: rgba(255, 255, 255, 0.5);
}


/* =============================================================
   HOME — ROI Snapshot Card
   ============================================================= */
.roi-snapshot-card {
    /* Extends .portal-card via class combo */
}

.roi-snapshot-card .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Denominator selector */
.denominator-selector {
    display: flex;
    gap: var(--space-1);
    background-color: var(--bw-bg);
    border-radius: 8px;
    padding: var(--space-1);
}

.denom-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.denom-btn:hover {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.04);
}

.denom-btn--active,
.denom-btn.denom-btn--active {
    color: var(--bw-primary);
    background-color: var(--bw-card-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: var(--font-weight-semibold);
}

/* ROI display area */
.roi-display {
    margin-bottom: var(--space-4);
}

/* ROI grid: Investment -> Savings = ROI */
.roi-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-5) 0;
}

.roi-invest,
.roi-savings,
.roi-result {
    text-align: center;
    padding: var(--space-4);
}

.roi-grid__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.roi-grid__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

.roi-grid__value--primary {
    color: var(--bw-primary);
}

.roi-grid__value--hero {
    font-size: var(--font-size-3xl);
    color: var(--bw-primary);
}

.roi-grid__caption {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.roi-grid__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    color: var(--text-tertiary);
}

/* ROI link to full analysis */
.roi-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--bw-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
    margin-top: var(--space-2);
}

.roi-link:hover {
    text-decoration: underline;
}

.roi-link i {
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
}

.roi-link:hover i {
    transform: translateX(2px);
}

/* ROI sources (extends source-note) */
.roi-sources {
    /* Inherits from .source-note via class combo */
}


/* =============================================================
   HOME — Privacy Footer
   ============================================================= */
.privacy-footer {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-4);
    background-color: rgba(var(--bw-primary-rgb), 0.04);
    border: 1px solid rgba(var(--bw-primary-rgb), 0.1);
    border-radius: var(--bw-card-radius);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

.privacy-footer i {
    color: var(--bw-primary);
    flex-shrink: 0;
    margin-top: 2px;
}


/* =============================================================
   IMPACT — ROI Page Classes
   ============================================================= */
.roi-headline {
    text-align: center;
    padding: var(--space-6);
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    margin-bottom: var(--space-5);
}

.roi-headline__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.roi-headline__ratio {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--bw-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-2);
}

.roi-headline__range {
    /* inherits from parent */
}

.roi-headline__x {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.roi-headline__denominator-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Denominator selector — full-page variant */
.denominator-selector__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.denominator-selector__options {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.denominator-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background-color: var(--bw-bg);
    border: 2px solid var(--bw-card-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    min-width: 140px;
}

.denominator-option:hover {
    border-color: var(--bw-primary);
}

.denominator-option--active {
    border-color: var(--bw-primary);
    background-color: rgba(var(--bw-primary-rgb), 0.06);
}

.denominator-option__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.denominator-option__sublabel {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* Waterfall chart section */
.waterfall-section {
    margin-bottom: var(--space-5);
}

.waterfall-legend {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.waterfall-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.waterfall-legend__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.waterfall-legend__swatch--cost {
    background-color: var(--bw-negative);
}

.waterfall-legend__swatch--savings {
    background-color: var(--bw-primary);
}

.waterfall-legend__swatch--esg {
    background-color: var(--bw-info);
}


/* =============================================================
   IMPACT — Workforce Page Classes
   ============================================================= */
.bewellthy-effect-section {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.bewellthy-effect-header {
    margin-bottom: var(--space-4);
}

.bewellthy-effect-header h2 {
    margin-bottom: var(--space-1);
}

.bewellthy-effect-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.bewellthy-effect-chart-container {
    min-height: 300px;
    position: relative;
    margin-bottom: var(--space-3);
}

.bewellthy-effect-sample {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.sample-label {
    font-weight: var(--font-weight-medium);
}

.sample-check {
    color: var(--bw-primary);
}

.bewellthy-effect-vacation-note {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.bewellthy-effect-vacation-note i {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Metric detail grid */
.metric-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

/* Data type badges */
.data-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 100px;
}

.data-type-badge--hris {
    background-color: rgba(var(--bw-primary-rgb), 0.12);
    color: var(--bw-primary);
}

.data-type-badge--estimate {
    background-color: rgba(var(--bw-info-rgb), 0.12);
    color: var(--bw-info);
}

/* Metric comparison */
.metric-comparison {
    margin-top: var(--space-3);
}

.metric-comparison__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--bw-card-border);
}

.metric-comparison__row:last-child {
    border-bottom: none;
}

.metric-comparison__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.metric-comparison__value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.metric-comparison__difference {
    text-align: center;
    padding: var(--space-2);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-2);
}

.metric-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.metric-dot--bw {
    background-color: var(--bw-primary);
}

.metric-dot--company {
    background-color: var(--text-tertiary);
}

/* Metric quarterly trend */
.metric-quarterly {
    margin-top: var(--space-4);
}

.metric-quarterly__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}


/* =============================================================
   IMPACT — Wellness Trends Page Classes
   ============================================================= */
.wellness-trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

/* Summary card */
.summary-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.summary-card--wellness {
    /* variant — can add accent border or bg */
}

.summary-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bw-primary-rgb), 0.1);
    border-radius: 10px;
    color: var(--bw-primary);
    font-size: var(--font-size-lg);
}

.summary-card__content {
    flex: 1;
}

.summary-card__headline {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-base);
    margin-bottom: var(--space-1);
}

.summary-card__context {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
}

/* Data source badges */
.data-source-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 100px;
    margin-bottom: var(--space-4);
}

.data-source-badge--hris {
    background-color: rgba(var(--bw-primary-rgb), 0.1);
    color: var(--bw-primary);
}

.data-source-badge--estimate {
    background-color: rgba(var(--bw-info-rgb), 0.1);
    color: var(--bw-info);
}

/* Benchmark toggle */
.benchmark-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.benchmark-toggle__input {
    accent-color: var(--bw-primary);
}

.benchmark-toggle__label {
    color: var(--text-secondary);
}

/* Dimension cards */
.dimension-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
    transition: box-shadow var(--transition-fast);
}

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

.dimension-card__header {
    margin-bottom: var(--space-3);
}

.dimension-card__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.dimension-card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.dimension-card__description {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--line-height-base);
}

.dimension-card__chart {
    min-height: 200px;
    position: relative;
}

.dimension-card__badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dimension-card__pop-avg {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.dimension-card__pop-avg--positive {
    color: var(--bw-green);
}

.dimension-card__pop-avg--negative {
    color: var(--bw-amber);
}

.dimension-card__momentum {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    line-height: var(--line-height-base);
}

.dimension-card__momentum-label {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.dimension-card__momentum-value {
    font-weight: var(--font-weight-semibold);
    color: var(--bw-green);
}

.dimension-card__footer {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--bw-card-border);
}

.dimension-card__privacy-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-style: italic;
}

/* Compass score chips in summary banner */
.compass-scores-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.compass-score-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    background-color: var(--bw-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--bw-card-border);
    min-width: 100px;
}

.compass-score-chip__label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.compass-score-chip__value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.compass-score-chip__value--positive {
    color: var(--bw-green);
}

.compass-score-chip__value--negative {
    color: var(--bw-amber);
}

/* Direction badge */
.direction-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 100px;
}

/* Methodology note */
.methodology-note {
    background-color: var(--bw-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-top: var(--space-5);
}

.methodology-note i {
    color: var(--text-tertiary);
    margin-right: var(--space-1);
}

.methodology-note__benchmark {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

/* View loading inline */
.view-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-12) 0;
    color: var(--text-tertiary);
    font-size: var(--font-size-md);
}


/* =============================================================
   CONTEXT CALLOUTS — Used across engagement & impact views
   ============================================================= */
.context-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--bw-card-radius);
    margin-bottom: var(--space-5);
    background-color: var(--bw-bg);
    border: 1px solid var(--bw-card-border);
}

.context-callout--info {
    background-color: rgba(var(--bw-info-rgb), 0.06);
    border-color: rgba(var(--bw-info-rgb), 0.15);
}

.context-callout--positive {
    background-color: rgba(var(--bw-primary-rgb), 0.06);
    border-color: rgba(var(--bw-primary-rgb), 0.15);
}

.context-callout-icon {
    flex-shrink: 0;
    font-size: var(--font-size-lg);
    margin-top: 2px;
}

.context-callout--info .context-callout-icon { color: var(--bw-info); }
.context-callout--positive .context-callout-icon { color: var(--bw-primary); }

.context-callout-body {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-base);
}

.context-callout-source {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--space-1);
}

.callout-link {
    color: var(--bw-primary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.callout-link:hover {
    text-decoration: underline;
}


/* =============================================================
   HERO METRIC CARDS — Used in engagement views
   ============================================================= */
.hero-metric-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.hero-metric-card--recovery {
    border-left: 3px solid var(--bw-primary);
}

.hero-metric-primary {
    margin-bottom: var(--space-4);
}

.hero-metric-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.hero-metric-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

.hero-metric-number--large {
    font-size: var(--font-size-3xl);
}

.hero-metric-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-1);
}

.hero-metric-supporting {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--bw-card-border);
}

.hero-metric-item {
    text-align: center;
}

.hero-metric-item-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.hero-metric-item-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}


/* =============================================================
   KPI CARD EXTENSIONS — Additional KPI card parts
   ============================================================= */
.kpi-card-body {
    margin-top: var(--space-2);
}

.kpi-card-icon {
    font-size: var(--font-size-lg);
    color: var(--bw-primary);
    margin-bottom: var(--space-2);
}

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-2);
}

.kpi-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-detail {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}


/* =============================================================
   KPI CARD — BEM classes (generated by kpi-card.js component)
   ============================================================= */

/* Row wrapper — JS component uses .kpi-card-row (singular) */
.kpi-card-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

/* Header: icon + title row */
.kpi-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.kpi-card__icon {
    font-size: var(--font-size-lg);
    color: var(--bw-primary);
    flex-shrink: 0;
}

.kpi-card__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: var(--line-height-tight);
}

/* Value block */
.kpi-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-1);
}

.kpi-card__prefix {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    vertical-align: baseline;
}

.kpi-card__number {
    /* inherits from .kpi-card__value */
}

.kpi-card__unit {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-left: 2px;
}

/* Delta row */
.kpi-card__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-2);
    /* color is set inline by JS based on direction */
}

.kpi-card__delta-value {
    /* inherits color from parent .kpi-card__delta */
}

.kpi-card__delta-period {
    color: var(--text-tertiary);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
}

/* Sparkline container */
.kpi-card__sparkline {
    margin-top: var(--space-3);
    height: 45px;
    width: 100%;
}

/* Footnote / source reference */
.kpi-card__footnote {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-3);
    cursor: default;
}

.kpi-card__footnote.source-ref {
    cursor: help;
    border-bottom: 1px dotted var(--text-tertiary);
    display: inline-block;
}

/* Error state */
.kpi-card--error .kpi-card__error-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--bw-negative);
    font-size: var(--font-size-sm);
    margin-top: var(--space-3);
    padding: var(--space-2);
    background: rgba(230, 162, 60, 0.08);
    border-radius: calc(var(--bw-card-radius) / 2);
}

/* Loading skeleton state */
.kpi-card--loading {
    pointer-events: none;
}

.kpi-card__skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: kpi-skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.kpi-card__skeleton--icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.kpi-card__skeleton--title {
    width: 60%;
    height: 12px;
}

.kpi-card__skeleton--value {
    width: 45%;
    height: 28px;
    margin-top: var(--space-3);
}

.kpi-card__skeleton--delta {
    width: 35%;
    height: 14px;
    margin-top: var(--space-2);
}

.kpi-card__skeleton--sparkline {
    width: 100%;
    height: 45px;
    margin-top: var(--space-3);
}

@keyframes kpi-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* =============================================================
   RECOVERY / STREAKS — Engagement recovery view
   ============================================================= */
.chart-section--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

.chart-card--half {
    /* Inherits from .chart-card */
}

.chart-card--winback {
    /* Inherits from .chart-card */
}

.streak-summary {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4);
    background: var(--bw-bg);
    border-radius: 8px;
    margin-top: var(--space-3);
}

.streak-summary-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--bw-primary);
    line-height: 1;
}

.streak-summary-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Win-back metrics */
.winback-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.winback-metric {
    text-align: center;
}

.winback-metric-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.winback-metric-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.winback-metric-detail {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.winback-explanation {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-top: var(--space-3);
}

.winback-takeaway {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--bw-primary);
    margin-top: var(--space-2);
}


/* =============================================================
   IMPACT ROI — Additional ROI page classes
   ============================================================= */
.ai-era-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: linear-gradient(135deg, var(--bw-dark) 0%, #132B1C 100%);
    border-radius: var(--bw-card-radius);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    color: rgba(255, 255, 255, 0.85);
}

.ai-era-callout__icon {
    flex-shrink: 0;
    font-size: var(--font-size-xl);
    color: var(--bw-accent);
}

.ai-era-callout__content {
    flex: 1;
}

.ai-era-callout__tagline {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--bw-accent);
    margin-bottom: var(--space-3);
}

.ai-era-callout__comparison {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ai-era-callout__metric {
    text-align: center;
    padding: var(--space-3);
}

.ai-era-callout__metric--projected {
    background: rgba(var(--bw-primary-rgb), 0.15);
    border-radius: 8px;
}

.ai-era-callout__metric-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--bw-accent);
}

.ai-era-callout__metric-label {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--space-1);
}

.ai-era-callout__metric-detail {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.5);
}

.ai-era-callout__arrow {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.4);
}

/* Bar detail popover */
.bar-detail-popover {
    position: absolute;
    z-index: var(--z-tooltip);
    background: var(--bw-card-bg);
    border-radius: var(--bw-card-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--bw-card-border);
    padding: var(--space-4);
    min-width: 240px;
    max-width: 360px;
}

.bar-detail-popover__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.bar-detail-popover__type {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bar-detail-popover__close {
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: 4px;
}

.bar-detail-popover__close:hover {
    background: var(--bw-bg);
    color: var(--text-primary);
}

.bar-detail-popover__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.bar-detail-popover__range {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.bar-detail-popover__methodology {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
}

.bar-detail__formula {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: var(--font-size-xs);
    background: var(--bw-bg);
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
    margin-top: var(--space-2);
    color: var(--text-primary);
}

.bar-detail__source {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--space-2);
}

/* Confidence badge */
.confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: 100px;
    color: var(--text-inverse);
}

/* ESG callout */
.esg-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background-color: rgba(var(--bw-info-rgb), 0.06);
    border: 1px solid rgba(var(--bw-info-rgb), 0.15);
    border-radius: var(--bw-card-radius);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.esg-callout__icon {
    flex-shrink: 0;
    font-size: var(--font-size-xl);
    color: var(--bw-info);
}

.esg-callout__content {
    flex: 1;
}

.esg-callout__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.esg-callout__tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--bw-info);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.esg-callout__description {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-base);
}

.esg-callout__evidence {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-style: italic;
    margin-top: var(--space-2);
}

/* ROI over time section */
.roi-over-time-section {
    margin-bottom: var(--space-5);
}

.roi-over-time-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

/* Source attribution panel */
.source-attribution-panel {
    background-color: var(--bw-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    margin-top: var(--space-5);
}

.source-attribution-panel--expandable .source-attribution-panel__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.source-attribution-panel--expandable.is-expanded .source-attribution-panel__content {
    max-height: 1000px;
}

.source-attribution-panel__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    cursor: pointer;
    background: none;
    border: none;
}

.source-attribution-panel__chevron {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
}

.source-attribution-panel.is-expanded .source-attribution-panel__chevron {
    transform: rotate(180deg);
}

.source-attribution-panel__content {
    padding: 0 var(--space-5) var(--space-4);
}

.source-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.source-item {
    padding: var(--space-3);
    border-radius: 8px;
    background: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
}

.source-item__category {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.source-item__attribution {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.source-item__formula {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: var(--font-size-xs);
    background: var(--bw-bg);
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    margin-top: var(--space-1);
    color: var(--text-primary);
}

/* Waterfall net swatch */
.waterfall-legend__swatch--net {
    background-color: var(--bw-primary);
    opacity: 0.7;
}


/* =============================================================
   IMPACT WORKFORCE — Additional classes
   ============================================================= */
.no-hris-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background-color: rgba(var(--bw-negative-rgb), 0.06);
    border: 1px solid rgba(var(--bw-negative-rgb), 0.15);
    border-radius: var(--bw-card-radius);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.no-hris-notice__icon {
    flex-shrink: 0;
    font-size: var(--font-size-xl);
    color: var(--bw-negative);
}

.no-hris-notice__content {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-base);
}

.no-hris-notice__cta {
    font-weight: var(--font-weight-medium);
    color: var(--bw-primary);
    margin-top: var(--space-2);
}

.metric-detail-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
}

.metric-detail-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.metric-detail-card__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bw-primary-rgb), 0.1);
    border-radius: 8px;
    color: var(--bw-primary);
}

.metric-detail-card__title-area {
    flex: 1;
}

.metric-detail-card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.metric-context-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    background-color: var(--bw-bg);
    border-radius: 6px;
    margin-top: var(--space-3);
}

.metric-context-note--positive {
    background-color: rgba(var(--bw-primary-rgb), 0.06);
    color: var(--bw-primary);
}

.metric-savings {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: var(--bw-bg);
    border-radius: 8px;
}

.metric-savings__label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.metric-savings__range {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--bw-primary);
}

.metric-savings__formula {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-1);
}

.metric-savings__source {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--space-1);
}

.metric-source-tooltip {
    cursor: help;
    border-bottom: 1px dashed var(--text-tertiary);
}

.metric-quarterly__table {
    width: 100%;
    margin-top: var(--space-3);
}

.estimated-impact-section {
    margin-bottom: var(--space-5);
}

.estimated-impact-header {
    margin-bottom: var(--space-3);
}

.estimated-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}

.estimated-impact-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    padding: var(--space-4);
}

.estimated-impact-card__header {
    margin-bottom: var(--space-2);
}

.estimated-impact-card__range {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--bw-primary);
}

.estimated-impact-card__formula {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    background: var(--bw-bg);
    padding: var(--space-2);
    border-radius: 4px;
}

.estimated-impact-card__source {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--space-1);
}

.estimated-impact-disclaimer {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--space-4);
}

.industry-benchmark-callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background-color: rgba(var(--bw-info-rgb), 0.06);
    border: 1px solid rgba(var(--bw-info-rgb), 0.15);
    border-radius: var(--bw-card-radius);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-top: var(--space-4);
}

.insufficient-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6);
    text-align: center;
    color: var(--text-secondary);
}

.insufficient-data__detail {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-2);
}


/* =============================================================
   MANAGE — Shared section styles
   ============================================================= */
.section-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.section-note {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: var(--space-2);
}

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

.four-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 100px;
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.form-select,
.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    background-color: var(--bw-card-bg);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(var(--bw-primary-rgb), 0.15);
}

.form-input-short {
    max-width: 200px;
}

.form-textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    min-height: 80px;
    resize: vertical;
}

.form-textarea:focus {
    outline: none;
    border-color: var(--bw-primary);
    box-shadow: 0 0 0 3px rgba(var(--bw-primary-rgb), 0.15);
}

.form-help {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.btn-primary {
    background-color: var(--bw-primary);
    color: var(--text-inverse);
    border: 1px solid var(--bw-primary);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.btn-primary:hover {
    background-color: #34964D;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--bw-card-border);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.btn-secondary:hover {
    background-color: var(--bw-bg);
}

.btn-text {
    background: none;
    border: none;
    color: var(--bw-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
}

.btn-text:hover {
    text-decoration: underline;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: 4px;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.btn-icon:hover {
    color: var(--text-primary);
    background-color: var(--bw-bg);
}


/* =============================================================
   MANAGE BUDGET — Budget-specific classes
   ============================================================= */
.view-manage-budget {
    /* View container */
}

.investment-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.investment-layers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.investment-summary {
    margin-bottom: var(--space-4);
}

.investment-totals {
    border-top: 1px solid var(--bw-card-border);
    padding-top: var(--space-4);
}

.layer-1,
.layer-3 {
    /* Layer-specific accent colors handled inline or via data attrs */
}

.layer-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.layer-amount {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.layer-detail {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.layer-badge {
    display: inline-flex;
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 100px;
}

.layer-note {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-style: italic;
}

.layer-future {
    opacity: 0.6;
}

.total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.total-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.total-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.total-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.total-separator {
    border-top: 1px solid var(--bw-card-border);
    margin: var(--space-2) 0;
}

.per-year {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.budget-trend-section,
.deferred-pool-section,
.employee-ledger-section {
    margin-bottom: var(--space-5);
}

.ledger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.ledger-search {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    min-width: 200px;
}

.ledger-actions {
    display: flex;
    gap: var(--space-2);
}

.ledger-row {
    display: flex;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--bw-card-border);
}


/* =============================================================
   MANAGE DEVICES — Device-specific classes
   ============================================================= */
.view-manage-devices {
    /* View container */
}

.kpi-positive {
    color: var(--bw-positive);
}

.devices-charts-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.chart-col-wide {
    /* Takes 2fr */
}

.chart-col-narrow {
    /* Takes 1fr */
}

.utilization-section {
    text-align: center;
    margin-bottom: var(--space-5);
}

.utilization-ring {
    margin: 0 auto var(--space-3);
}

.utilization-stat {
    margin-bottom: var(--space-2);
}

.utilization-detail {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.payoff-chart-section {
    margin-bottom: var(--space-5);
}

.device-table-section {
    margin-bottom: var(--space-5);
}

.table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.table-search {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    border: 1px solid var(--bw-card-border);
    border-radius: 6px;
    min-width: 200px;
}

.device-row {
    transition: background-color var(--transition-fast);
}

.assign-device-section {
    margin-bottom: var(--space-5);
}

.assign-device-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    align-items: end;
}


/* =============================================================
   MANAGE EXPERIMENTS — Experiment-specific classes
   ============================================================= */
.view-manage-experiments {
    /* View container */
}

.experiments-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.experiment-status-filters {
    display: flex;
    gap: var(--space-1);
}

.btn-filter {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: 100px;
    border: 1px solid var(--bw-card-border);
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-filter:hover {
    border-color: var(--bw-primary);
    color: var(--bw-primary);
}

.btn-filter.active {
    background-color: var(--bw-primary);
    border-color: var(--bw-primary);
    color: var(--text-inverse);
}

.experiments-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
}

.experiment-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

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

.experiment-card-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--bw-card-border);
}

.experiment-card-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.experiment-card-meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.meta-item {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.experiment-card-body {
    padding: var(--space-4) var(--space-5);
}

.experiment-hypothesis {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.hypothesis-label {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.experiment-groups {
    margin-bottom: var(--space-3);
}

.group-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    border-radius: 100px;
    background-color: var(--bw-bg);
    color: var(--text-secondary);
    margin-right: var(--space-1);
    margin-bottom: var(--space-1);
}

.group-name {
    font-weight: var(--font-weight-medium);
}

.group-size {
    color: var(--text-tertiary);
}

.experiment-result-preview {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.result-card {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: var(--space-2);
    background-color: var(--bw-bg);
    border-radius: 6px;
}

.result-card-value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.result-card-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.experiment-card-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--bw-card-border);
    display: flex;
    justify-content: flex-end;
}

.experiment-view-btn {
    font-size: var(--font-size-sm);
    color: var(--bw-primary);
    font-weight: var(--font-weight-medium);
}

.experiment-recommendation {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background-color: rgba(var(--bw-primary-rgb), 0.06);
    border-radius: 6px;
}

.recommendation-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* Experiment detail panel */
.experiment-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 600px;
    max-width: 90vw;
    height: 100vh;
    background-color: var(--bw-card-bg);
    z-index: var(--z-demo-panel);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.experiment-detail-panel.is-open {
    transform: translateX(0);
}

.detail-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--bw-card-border);
}

.detail-panel-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.detail-panel-close {
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
}

.detail-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.detail-section {
    margin-bottom: var(--space-5);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.detail-item {
    padding: var(--space-2) 0;
}

.detail-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

/* Comparison groups */
.comparison-group {
    margin-bottom: var(--space-4);
}

.comparison-group-header {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
}

.comparison-stats {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.comparison-stat {
    text-align: center;
    padding: var(--space-2) var(--space-3);
    background-color: var(--bw-bg);
    border-radius: 6px;
}

.group-type-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.group-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.group-config {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.groups-comparison {
    margin-top: var(--space-4);
}

/* Results summary */
.results-summary {
    margin-bottom: var(--space-4);
}

.result-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--bw-card-border);
}

.result-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.result-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.result-confidence {
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

.inconclusive {
    color: var(--text-tertiary);
    font-style: italic;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-3);
}

.summary-item {
    text-align: center;
    padding: var(--space-3);
    background-color: var(--bw-bg);
    border-radius: 8px;
}

.summary-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.summary-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

/* Experiment wizard */
.wizard-panel {
    margin-top: var(--space-5);
}

.wizard-steps {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.wizard-step.active {
    color: var(--bw-primary);
    font-weight: var(--font-weight-semibold);
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--bw-bg);
    color: var(--text-tertiary);
}

.wizard-step.active .step-num {
    background: var(--bw-primary);
    color: var(--text-inverse);
}

.wizard-summary {
    background: var(--bw-bg);
    border-radius: var(--bw-card-radius);
    padding: var(--space-4);
}

/* ApexCharts custom tooltip */
.apexcharts-tooltip-custom {
    background: var(--bw-card-bg) !important;
    border: 1px solid var(--bw-card-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    padding: var(--space-3) !important;
}


/* =============================================================
   MANAGE MARKETPLACE — Marketplace-specific classes
   ============================================================= */
.view-manage-marketplace {
    /* View container */
}

.category-grid-section {
    margin-bottom: var(--space-5);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.category-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.category-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--bw-primary-rgb), 0.1);
    border-radius: 8px;
    color: var(--bw-primary);
    font-size: var(--font-size-md);
}

.category-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.category-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.category-toggle-input {
    accent-color: var(--bw-primary);
}

.category-card-body {
    font-size: var(--font-size-sm);
}

.category-usage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.usage-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.usage-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.category-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cap-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.cap-value {
    font-size: var(--font-size-sm);
}

.category-budget-pct {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.category-detail-btn {
    font-size: var(--font-size-xs);
    color: var(--bw-primary);
    cursor: pointer;
}

/* Budget progress */
.budget-progress-section {
    margin-bottom: var(--space-5);
}

.budget-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.budget-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

.budget-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.budget-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.progress-bar-track {
    width: 100%;
    height: 8px;
    background-color: var(--bw-bg);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--bw-primary);
    border-radius: 4px;
    transition: width var(--transition-base);
}

.progress-bar-text {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}

/* Mini progress */
.mini-progress-track {
    width: 100%;
    height: 4px;
    background-color: var(--bw-bg);
    border-radius: 2px;
    overflow: hidden;
}

.mini-progress-fill {
    height: 100%;
    background-color: var(--bw-primary);
    border-radius: 2px;
}

/* Popular redemptions */
.popular-redemptions-section {
    margin-bottom: var(--space-5);
}

.popular-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.popular-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.popular-rank {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-tertiary);
    width: 24px;
    text-align: center;
}

.popular-details {
    flex: 1;
}

.popular-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.popular-category {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.popular-count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.popular-bar-track {
    flex: 1;
    height: 6px;
    background-color: var(--bw-bg);
    border-radius: 3px;
    overflow: hidden;
}

.popular-bar-fill {
    height: 100%;
    background-color: var(--bw-primary);
    border-radius: 3px;
}

.pct-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.pct-value {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Marketplace analytics */
.marketplace-analytics {
    margin-bottom: var(--space-5);
}

.analytics-col {
    /* Used in grid layouts */
}

.usage-chart-section {
    margin-bottom: var(--space-5);
}

/* Detail drawer */
.detail-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    max-width: 90vw;
    height: 100vh;
    background-color: var(--bw-card-bg);
    z-index: var(--z-demo-panel);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

.detail-drawer.is-open {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--bw-card-border);
}

.drawer-close {
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.drawer-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.drawer-stat {
    text-align: center;
    padding: var(--space-3);
    background-color: var(--bw-bg);
    border-radius: 8px;
}

.data-table-compact {
    font-size: var(--font-size-sm);
}

.data-table-compact td,
.data-table-compact th {
    padding: var(--space-2) var(--space-3);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--bw-card-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--bw-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
}


/* =============================================================
   PEOPLE — Enrollment, Dependents, Groups
   ============================================================= */
.privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background-color: rgba(var(--bw-primary-rgb), 0.04);
    border: 1px solid rgba(var(--bw-primary-rgb), 0.1);
    border-radius: var(--bw-card-radius);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.enrollment-filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.search-wrapper {
    position: relative;
}

.enrollment-actions {
    display: flex;
    gap: var(--space-2);
}

.table-container,
.table-section {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    overflow: hidden;
    margin-bottom: var(--space-5);
}

.enrollment-table {
    /* Extends .data-table */
}

.enrollment-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--bw-card-border);
}

.enrollment-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-align: center;
    padding: var(--space-2);
}

.btn-invite,
.btn-remind,
.btn-export,
.btn-send-reminder,
.btn-view-detail {
    /* Inherit from .btn variants */
}

/* Employee detail modal */
.employee-detail-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-overlay);
}

.employee-detail-modal-overlay.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.employee-detail-modal {
    background: var(--bw-card-bg);
    border-radius: var(--bw-card-radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
    max-width: 560px;
    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    z-index: var(--z-modal);
}

.invite-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-overlay);
}

.invite-modal-overlay.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.invite-modal {
    background: var(--bw-card-bg);
    border-radius: var(--bw-card-radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
    max-width: 500px;
    width: 90vw;
    z-index: var(--z-modal);
    padding: var(--space-6);
}

/* Dependents page */
.eligibility-config-card,
.household-investment-card,
.spouse-effect-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.spouse-table-area {
    margin-bottom: var(--space-5);
}

.spouse-table-wrapper {
    overflow-x: auto;
}

/* Groups page */
.org-tree-section,
.auto-segments-section,
.custom-cohorts-section {
    margin-bottom: var(--space-5);
}

.group-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-4);
    transition: box-shadow var(--transition-fast);
}

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

.btn-create-cohort {
    /* Inherits from .btn-primary */
}

.create-cohort-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-overlay);
}

.create-cohort-overlay.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-cohort-modal {
    background: var(--bw-card-bg);
    border-radius: var(--bw-card-radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
    max-width: 560px;
    width: 90vw;
    z-index: var(--z-modal);
    padding: var(--space-6);
}


/* =============================================================
   REPORTS — Executive, Board, Export
   ============================================================= */
.report-view {
    /* Report view container */
}

.report-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.btn-print {
    /* Inherits from .btn-outline */
}

/* Executive summary */
.executive-summary-view {
    /* Container */
}

.executive-summary-page {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-8);
    max-width: 850px;
    margin: 0 auto var(--space-5);
}

.exec-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--bw-primary);
}

.exec-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.exec-kpi-box {
    text-align: center;
    padding: var(--space-4);
    background-color: var(--bw-bg);
    border-radius: 8px;
}

.exec-sparkline-section {
    margin-bottom: var(--space-6);
}

.exec-bw-effect {
    margin-bottom: var(--space-6);
}

.exec-roi-summary {
    margin-bottom: var(--space-6);
}

.exec-whats-new {
    margin-bottom: var(--space-6);
}

.exec-recommendations {
    margin-bottom: var(--space-6);
}

.exec-footer {
    padding-top: var(--space-4);
    border-top: 1px solid var(--bw-card-border);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Export */
.export-center-view {
    max-width: 700px;
    margin: 0 auto;
}

.export-section {
    margin-bottom: var(--space-6);
}

.export-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-export-csv,
.btn-print-current {
    /* Inherits from .btn variants */
}

/* Demo control panel (additional classes not covered above) */
.demo-control-panel {
    /* Container */
}

.demo-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: var(--z-demo-overlay);
}

.demo-overlay.is-visible {
    display: block;
}

.demo-close-btn {
    color: var(--text-secondary);
    cursor: pointer;
}

.demo-profile-card {
    padding: var(--space-4);
    background-color: var(--bw-bg);
    border-radius: 8px;
    margin-bottom: var(--space-4);
}

.demo-section {
    margin-bottom: var(--space-5);
}

.demo-company-field,
.demo-config-field {
    margin-bottom: var(--space-3);
}

.demo-apply-company,
.demo-apply-config,
.demo-reset-default {
    /* Inherit from .btn variants */
}

/* Shared view states (empty, error, loading) */
.view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--text-secondary);
}

.view-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--bw-negative);
}

.modal-content {
    padding: var(--space-6);
}

.modal-lg {
    max-width: 720px;
}


/* =============================================================
   ENGAGEMENT — Chart Section & Chart Card (shared across views)
   ============================================================= */
.chart-section {
    margin-bottom: var(--space-5);
}

.chart-card {
    background-color: var(--bw-card-bg);
    border: 1px solid var(--bw-card-border);
    border-radius: var(--bw-card-radius);
    box-shadow: var(--bw-card-shadow);
    padding: var(--space-5);
    transition: box-shadow var(--transition-fast);
}

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

.chart-card-header {
    margin-bottom: var(--space-4);
}

.chart-card-header h3 {
    margin-bottom: var(--space-1);
}

.chart-card-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--line-height-base);
}

/* Chart container modifiers */
.chart-container--funnel {
    min-height: 300px;
}

.chart-container--trend {
    min-height: 300px;
}

.chart-container--bar {
    min-height: 300px;
}

.chart-container--heatmap {
    min-height: 300px;
}

.chart-container--line {
    min-height: 300px;
}


/* =============================================================
   RESPONSIVE — TABLET (max-width: 1024px)
   ============================================================= */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
    }

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

    .chart-row {
        grid-template-columns: 1fr;
    }

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

    .config-row {
        grid-template-columns: 1fr 80px 60px 1fr;
    }

    .report-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Home page layout — tablet */
    .kpi-cards-row,
    .kpi-card-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-row--60-40,
    .home-row--50-50 {
        grid-template-columns: 1fr;
    }

    .roi-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .roi-grid__arrow {
        transform: rotate(90deg);
        padding: var(--space-1) 0;
    }

    .metric-detail-grid {
        grid-template-columns: 1fr;
    }

    .wellness-trends-grid {
        grid-template-columns: 1fr;
    }

    .four-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .devices-charts-row {
        grid-template-columns: 1fr;
    }

    .chart-section--two-col {
        grid-template-columns: 1fr;
    }

    .exec-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .estimated-impact-grid {
        grid-template-columns: 1fr;
    }

    .experiments-list {
        grid-template-columns: 1fr;
    }

    /* Filter bar: compact at tablet */
    .filter-bar {
        gap: var(--space-3);
    }

    .filter-bar__select {
        min-width: 100px;
    }

    .filter-bar__label {
        display: none;
    }
}


/* =============================================================
   RESPONSIVE — MOBILE (max-width: 768px)
   ============================================================= */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

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

    .portal-main {
        margin-left: 0;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .portal-header {
        padding: 0 var(--space-4);
    }

    .header-center {
        display: none;
    }

    .header-user-name,
    .header-user-role {
        display: none;
    }

    .portal-content {
        padding: var(--space-4);
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .kpi-card-value {
        font-size: var(--font-size-xl);
    }

    .chart-row {
        grid-template-columns: 1fr;
    }

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

    .page-title {
        font-size: var(--font-size-lg);
    }

    .demo-panel {
        width: 100vw;
        max-width: 100vw;
    }

    .config-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-1);
    }

    .config-default,
    .config-source {
        grid-column: span 2;
    }

    .data-table-search {
        min-width: 140px;
    }

    .report-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .board-report .report-page {
        padding: var(--space-6);
        min-height: auto;
    }

    /* Home page layout — mobile */
    .kpi-cards-row,
    .kpi-card-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .home-row--60-40,
    .home-row--50-50 {
        grid-template-columns: 1fr;
    }

    .roi-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .roi-grid__arrow {
        transform: rotate(90deg);
        padding: var(--space-1) 0;
    }

    .roi-grid__value--hero {
        font-size: var(--font-size-2xl);
    }

    .denominator-selector {
        flex-wrap: wrap;
    }

    .effect-metric {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .metric-bw,
    .metric-avg {
        text-align: left;
    }

    .view-header h1 {
        font-size: var(--font-size-xl);
    }

    .four-col {
        grid-template-columns: 1fr 1fr;
    }

    .chart-section--two-col {
        grid-template-columns: 1fr;
    }

    .hero-metric-supporting {
        grid-template-columns: 1fr 1fr;
    }

    .experiment-detail-panel,
    .detail-drawer {
        width: 100vw;
        max-width: 100vw;
    }

    .exec-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .executive-summary-page {
        padding: var(--space-5);
    }

    .summary-cards {
        grid-template-columns: 1fr 1fr;
    }

    .assign-device-form {
        grid-template-columns: 1fr;
    }
}


/* =============================================================
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================================= */
@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .portal-content {
        padding: var(--space-3);
    }

    .card {
        padding: var(--space-4);
    }

    .chart-container {
        padding: var(--space-4);
    }

    .kpi-card {
        padding: var(--space-4);
    }

    .report-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Home page layout — small mobile */
    .kpi-cards-row,
    .kpi-card-row {
        grid-template-columns: 1fr;
    }
}