/* ============================================================
   BALCEP Design System
   Justimagine, LLC — Confidential
   Version: 1.0 | Phase 37
   ============================================================
   This file is the single source of truth for all design tokens.
   No hardcoded color, type, spacing, shadow, or transition values
   are permitted in any template after Phase 37. All values must
   reference a variable defined here.
   ============================================================ */

:root {

    /* ── Color Tokens — Brand ── */
    --color-brand:            #4656FD;
    --color-brand-dark:       #3545e5;
    --color-brand-light:      #eef0ff;

    /* ── Color Tokens — Semantic ── */
    --color-success:          #1a7f55;
    --color-warning:          #d97706;
    --color-danger:           #dc2626;
    --color-info:             #2563eb;

    /* ── Color Tokens — Semantic Subtle ── */
    --color-success-subtle:   rgba(26, 127, 85, 0.12);
    --color-warning-subtle:   rgba(217, 119, 6, 0.12);
    --color-danger-subtle:    rgba(239, 68, 68, 0.12);

    /* ── Color Tokens — Neutral ── */
    --color-neutral-900:      #111827;
    --color-neutral-700:      #374151;
    --color-neutral-500:      #5f6672;
    --color-neutral-400:      #9ca3af;
    --color-neutral-300:      #d1d5db;
    --color-neutral-600:      #4b5563;
    --color-neutral-200:      #e5e7eb;
    --color-chart-grid:       #e5e7eb;
    --color-neutral-100:      #f3f4f6;
    --color-neutral-50:       #f9fafb;

    /* ── Color Tokens — Special ── */
    --color-baseline:         #94a3b8;
    --color-surface:          #ffffff;
    --color-surface-raised:   #f9fafb;

    /* ── Color Tokens — Semantic Alias ── */
    --color-border:           #e5e7eb;
    --color-text-primary:     #111827;
    --color-text-secondary:   #5f6672;

    /* ── Typography Tokens — Family ── */
    --font-family-base:       'DM Sans', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ── Typography Tokens — Size ── */
    --font-size-xl:           1.5rem;
    --font-size-lg:           1.25rem;
    --font-size-md:           1rem;
    --font-size-sm:           0.875rem;
    --font-size-xs:           0.75rem;

    /* ── Typography Tokens — Weight ── */
    --font-weight-bold:       700;
    --font-weight-semibold:   600;
    --font-weight-normal:     400;

    /* ── Spacing Tokens ── */
    --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;

    /* ── Component Tokens — Radius ── */
    --radius-sm:              4px;
    --radius-md:              8px;
    --radius-lg:              12px;
    --radius-xl:              16px;

    /* ── Component Tokens — Shadow ── */
    --shadow-sm:              0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:              0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:              0 8px 24px rgba(0,0,0,0.12);

    /* ── Component Tokens — Transition ── */
    --transition-fast:        150ms ease;
    --transition-base:        250ms ease;

}

/* ─── Base Body Color ───────────────────────────── */
body {
    background: var(--color-neutral-50);
    color: var(--color-neutral-900);
    font-family: var(--font-family-base);
    --bs-body-color: var(--color-neutral-900);
    overflow-x: hidden;
}

.card {
    color: var(--color-neutral-900);
    --bs-card-color: var(--color-neutral-900);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
    contain: layout style;
}
.card:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.10);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    padding: 16px 20px;
}

/* ── Session Results — Session Info Card ─────────────────────────────────
   Phase 72 elevation. Color-coded by session type to build clinician memory:
   Blue (#4656FD)  = Baseline session  — the reference anchor
   Teal (#1a7f55)  = Standard session  — active clinical progress
   Accent bleeds through: top bar, header icon, notes border.
   ──────────────────────────────────────────────────────────────────────── */

.si-card-accent {
    height: 3px;
}
.si-card-accent--baseline {
    background: linear-gradient(90deg, #4656FD, #818cf8);
}
.si-card-accent--standard {
    background: linear-gradient(90deg, var(--color-success), #34d399);
}

.si-card-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 36px 11px 18px;
    border-bottom: 1px solid var(--color-border);
}

.si-header-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.si-header-icon--baseline {
    background: rgba(70, 86, 253, 0.10);
}
.si-header-icon--baseline svg {
    stroke: var(--color-brand);
}
.si-header-icon--standard {
    background: rgba(26, 127, 85, 0.10);
}
.si-header-icon--standard svg {
    stroke: var(--color-success);
}
.si-header-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.si-header-title {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: 0.01em;
}

.si-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.si-body {
    padding: 14px 18px 16px;
}

/* Field rows */
.si-field-group {
    display: flex;
    flex-direction: column;
}
.si-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border);
}
.si-field-row:first-child { padding-top: 0; }
.si-field-row:last-child  { border-bottom: none; padding-bottom: 0; }

.si-field-label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    flex-shrink: 0;
    white-space: nowrap;
}
.si-field-value {
    font-size: 13px;
    color: var(--color-text-primary);
    text-align: right;
    min-width: 0;
}
.si-field-value--muted {
    color: var(--color-text-secondary);
}
.si-field-link {
    font-size: 13px;
    color: var(--color-brand);
    text-decoration: none;
}
.si-field-link--teal {
    color: var(--color-success);
}
.si-field-link:hover { text-decoration: underline; }

/* Inner divider between field groups */
.si-inner-divider {
    height: 1px;
    background: var(--color-border);
    margin: 8px 0;
}

/* Timestamp rows — secondary visual weight */
.si-time-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
}
.si-time-row:first-child { padding-top: 0; }
.si-time-row:last-child  { border-bottom: none; padding-bottom: 0; }

.si-time-label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}
.si-time-value {
    font-size: 12px;
    color: var(--color-text-secondary);
    text-align: right;
}

/* Notes block */
.si-notes-block {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--color-surface-raised);
    border-radius: var(--radius-md);
}
.si-notes-block--baseline { border-left: 2.5px solid rgba(70, 86, 253, 0.35); }
.si-notes-block--standard { border-left: 2.5px solid rgba(26, 127, 85, 0.35); }

.si-notes-label {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}
.si-notes-text {
    font-size: 12px;
    color: var(--color-text-primary);
    line-height: 1.55;
}

/* Dual task chip */
/* ── Secondary Metrics Card — tile grid ──────────────────────────────────
   sm-tile: 2×2 grid item. Icon top-left, label + value + sub stacked.
   sm-decay-segments: three mini bars showing per-third stability breakdown.
   ──────────────────────────────────────────────────────────────────────── */

.sm-tile {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-surface-raised);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.sm-tile:hover {
    border-color: var(--color-neutral-300);
    box-shadow: var(--shadow-sm);
}
.sm-tile-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.sm-tile-body  { flex: 1; min-width: 0; }
.sm-tile-label {
    font-size: 10.5px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 3px;
}
.sm-tile-value {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}
.sm-tile-sub {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}
.sm-tile-desc {
    font-size: 10.5px;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
    line-height: 1.4;
    font-weight: 400;
}
.sm-info-icon {
    font-size: 10px;
    color: var(--color-text-secondary);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
    user-select: none;
    flex-shrink: 0;
}
.sm-info-icon:hover { opacity: 1; }

/* Decay segment mini-bars */
.sm-decay-segments {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.sm-decay-seg {
    flex: 1;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
}
.sm-decay-seg--warn {
    background: rgba(245,158,11,0.08);
    border-color: rgba(245,158,11,0.3);
}
.sm-decay-seg-title {
    font-size: 9.5px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-secondary);
    margin-bottom: 3px;
}
.sm-decay-seg-val {
    font-size: 11.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}
.sm-decay-seg-rate {
    font-size: 10px;
    color: var(--color-text-secondary);
} ────────────────────────────
   Used in session_results.html alongside the topographic canvas ring.
   Dark canvas wrapper (#111827) is inline on the canvas container so the
   elevation colors pop. These classes handle the data callout column only.
   ──────────────────────────────────────────────────────────────────────── */

.zd-callout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    border-left: 3px solid transparent;
    background: var(--color-surface-raised);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, border-left-color 0.18s ease, background 0.22s ease, box-shadow 0.22s ease;
}
.zd-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.zd-callout-body  { flex: 1; min-width: 0; }
.zd-callout-label {
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    line-height: 1;
}
.zd-callout-value {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.3;
}
.zd-callout-name {
    font-size: 10px;
    color: var(--color-text-secondary);
    line-height: 1.2;
    margin-top: 1px;
}

.si-chip-dual {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-warning-subtle);
    color: var(--color-warning);
    border: 0.5px solid rgba(217, 119, 6, 0.25);
    white-space: nowrap;
}
.card-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--color-neutral-700);
}
.card-body {
    padding: 20px;
}

[data-theme="dark"] {
    /* ── Dark mode token system ────────────────────────────────────────
       Built on neutral near-black surfaces, not the blue-navy brand ramp.
       Philosophy: GitHub / Linear / Vercel dark — surfaces are grey-black,
       not tinted. Brand color is used for accents only, never backgrounds.
       ──────────────────────────────────────────────────────────────── */
    --color-brand:            #6366f1;
    --color-brand-dark:       #4f52cc;
    --color-brand-light:      rgba(99,102,241,0.15);

    /* Semantic */
    --color-success:          #4ade80;
    --color-warning:          #fbbf24;
    --color-danger:           #f87171;
    --color-info:             #60a5fa;

    /* Neutral ramp — grey-black, zero blue tint */
    --color-neutral-900:      #f9fafb;   /* primary text */
    --color-neutral-800:      #e5e7eb;   /* secondary text */
    --color-neutral-700:      #d1d5db;   /* tertiary text */
    --color-neutral-600:      #9ca3af;   /* muted text */
    --color-neutral-500:      #6b7280;   /* placeholder */
    --color-neutral-400:      #4b5563;   /* disabled */
    --color-neutral-300:      #374151;   /* subtle borders */
    --color-neutral-200:      #2d3748;   /* dividers */
    --color-neutral-100:      #1f2937;   /* hover surfaces */
    --color-neutral-50:       #111827;   /* page background */

    /* Surfaces */
    --color-surface:          #161b22;   /* card background */
    --color-surface-raised:   #1c2333;   /* elevated surfaces, inputs */

    /* Borders */
    --color-border:           #2d3748;   /* default border */

    /* ── Semantic alias overrides ─────────────────────────────────────────
       --color-text-primary and --color-text-secondary are defined in :root
       but NOT overridden here, causing all si-, zd-, sr- component classes
       that use var(--color-text-primary) to render #111827 (near-black) on
       dark surfaces — completely invisible. These two lines fix the root cause
       across every component on every page without touching any template.
       ──────────────────────────────────────────────────────────────────── */
    --color-text-primary:     #f9fafb;
    --color-text-secondary:   #9ca3af;

    /* Charts */
    --color-baseline:         #6b7280;
    --color-chart-grid:       #374151;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}

[data-theme="dark"] body {
    background: #0d1117;
    color: var(--color-neutral-900);
}

[data-theme="dark"] .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
    color: var(--color-neutral-900);
    --bs-card-color: var(--color-neutral-900);
}
[data-theme="dark"] .card:hover {
    transform: none;
    border-color: #3d4f6e;
}
[data-theme="dark"] .card-header {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] .card-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-neutral-600);
}

[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--color-neutral-200);
    color: var(--color-neutral-900);
}

[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--color-surface-raised);
    --bs-dropdown-border-color: var(--color-neutral-200);
    --bs-dropdown-link-color: var(--color-neutral-900);
    --bs-dropdown-link-hover-bg: var(--color-neutral-200);
    --bs-dropdown-link-hover-color: var(--color-neutral-900);
    --bs-dropdown-divider-bg: var(--color-neutral-200);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--color-surface-raised);
    border-color: var(--color-neutral-200);
    color: var(--color-neutral-900);
    --bs-body-bg: var(--color-surface-raised);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--color-surface-raised);
    border-color: var(--color-brand);
    color: var(--color-neutral-900);
    box-shadow: 0 0 0 3px rgba(70,86,253,0.25);
}

/* ── Skeleton / Shimmer Loading States ── */

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

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-neutral-100) 25%,
        var(--color-neutral-200) 50%,
        var(--color-neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-md);
}

.skeleton--text {
    height: 1em;
    margin-bottom: var(--space-2);
}

.skeleton--chart {
    width: 100%;
    height: 280px;
}

.skeleton--card {
    width: 100%;
    height: 120px;
}

/* ─── Compact Density Mode ─────────────────────────────────────────────────── */

/* ── Base page wrapper — 8px top matches session analysis py-4 override ── */
.balcep-page {
    padding-top: 8px;
}

[data-density="compact"] .card-body {
    padding: var(--space-3);
}

[data-density="compact"] .table tbody tr {
    line-height: 1.3;
}

[data-density="compact"] .table td,
[data-density="compact"] .table th {
    padding: var(--space-2) var(--space-3);
}

[data-density="compact"] .balcep-page {
    padding: var(--space-4) var(--space-4);
}

[data-density="compact"] .stat-card {
    padding: var(--space-3);
}

/* ─── Bootstrap text-muted Token Override ──────────────────────────────────── */
/* Overrides Bootstrap's hardcoded color so text-muted respects the theme token */

.text-muted {
    color: var(--color-neutral-500) !important;
}

/* ── Page Header ───────────────────────────────────────────── */
.balcep-page-header h1,
.balcep-page-header .balcep-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-neutral-900);
}

.balcep-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    border-left: 3px solid var(--color-brand);
    padding-left: var(--space-3);
    margin-bottom: var(--space-5);
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
    overflow: visible;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.stat-card .stat-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-1);
}

.stat-card .stat-value {
    font-size: clamp(32px, 4vw, 40px);
    font-weight: 700;
    line-height: 1;
    color: var(--color-neutral-900);
}

.stat-card .stat-unit {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-neutral-500);
    margin-left: var(--space-1);
}

/* ── Stat Card — extended (Phase 72C) ───────────────────────── */

/* Linked card — reset <a> color inheritance */
a.stat-card,
a.stat-card:hover,
a.stat-card:visited {
    text-decoration: none;
    color: inherit;
}

/* Header row: value left, icon badge right */
.stat-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

/* Icon badge — 36px circle top-right */
.stat-card-icon-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(70,86,253,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Descriptor subtext — muted, never brand blue */
.stat-card__descriptor {
    font-size: 12px;
    color: var(--color-neutral-400) !important;
    margin-top: var(--space-1);
    line-height: 1.4;
}

/* Delta row */
.stat-card__delta {
    font-size: 12px;
    font-weight: 600;
    margin-top: var(--space-2);
    color: var(--color-neutral-400);
}
.stat-card__delta--up   { color: var(--color-success); }
.stat-card__delta--down { color: var(--color-danger);  }
.stat-card__delta--flat { color: var(--color-neutral-400); }

/* Hover lift on linked cards */
a.stat-card.stat-card--linked {
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
a.stat-card.stat-card--linked:hover {
    box-shadow: 0 4px 20px rgba(70,86,253,0.14), 0 1px 4px rgba(0,0,0,0.06);
    border-color: #4656FD;
    transform: translateY(-2px);
}

/* ── Accent card (Compliance Rate) ── */
.stat-card--accent {
    background: #4656FD;
    border-color: #4656FD;
}
.stat-card--accent .stat-value {
    color: #ffffff;
}
.stat-card--accent .stat-label {
    color: rgba(255,255,255,0.75);
}
.stat-card--accent .stat-card__descriptor {
    color: rgba(255,255,255,0.65) !important;
}
.stat-card--accent .stat-card__delta {
    color: rgba(255,255,255,0.75);
}
.stat-card--accent .stat-card__delta--up   { color: rgba(255,255,255,0.90); }
.stat-card--accent .stat-card__delta--down { color: rgba(255,255,255,0.65); }
.stat-card--accent .stat-card-icon-badge {
    background: rgba(255,255,255,0.18);
}
.stat-card--accent .stat-card-icon-badge svg {
    stroke: #ffffff;
}
a.stat-card--accent:hover {
    background: #3a47e0;
    border-color: #3a47e0;
}

/* ── Dark mode overrides ── */
/* ── Dark mode stat cards — base blue surface + hover shift ────────────── */
[data-theme='dark'] .stat-card {
    background: rgba(70,86,253,0.28);
    border-color: rgba(70,86,253,0.45);
    box-shadow: 0 2px 12px rgba(70,86,253,0.20), 0 4px 20px rgba(0,0,0,0.30);
}
[data-theme='dark'] a.stat-card.stat-card--linked:hover {
    background: rgba(70,86,253,0.42);
    border-color: rgba(70,86,253,0.70);
    box-shadow: 0 6px 32px rgba(70,86,253,0.45), 0 2px 8px rgba(0,0,0,0.30);
    transform: translateY(-2px);
}
[data-theme='dark'] .stat-card .stat-value {
    color: rgba(255,255,255,0.92);
}
[data-theme='dark'] .stat-card .stat-label {
    color: rgba(255,255,255,0.50);
}

[data-theme='dark'] .stat-card-icon-badge {
    background: rgba(70,86,253,0.18);
}
[data-theme='dark'] .stat-card__descriptor {
    color: var(--color-neutral-500) !important;
}
[data-theme='dark'] .stat-card--accent {
    background: #4656FD;
    border-color: #4656FD;
}
[data-theme='dark'] .stat-card--accent .stat-card__descriptor {
    color: rgba(255,255,255,0.65) !important;
}

/* ─── Light mode accent cards — white surface, blue accents, blue hover ────
   No fill in light mode. Full #4656FD only on dark mode.
   ─────────────────────────────────────────────────────────────────────────── */
[data-theme='light'] .stat-card--accent {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-neutral-900);
}
[data-theme='light'] .stat-card--accent .stat-value {
    color: var(--color-neutral-900);
}
[data-theme='light'] .stat-card--accent .stat-label {
    color: var(--color-neutral-500);
}
[data-theme='light'] .stat-card--accent .stat-card__descriptor {
    color: var(--color-neutral-400);
}
[data-theme='light'] .stat-card--accent .stat-card__delta {
    color: var(--color-neutral-400);
}
[data-theme='light'] .stat-card--accent .stat-card-icon-badge {
    background: rgba(70,86,253,0.10);
}
[data-theme='light'] .stat-card--accent .stat-card-icon-badge svg {
    stroke: #4656FD;
}
[data-theme='light'] a.stat-card--accent:hover {
    background: var(--color-surface);
    border-color: rgba(70,86,253,0.30);
    box-shadow: 0 4px 20px rgba(70,86,253,0.08), 0 1px 4px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}


/* ── Tables ─────────────────────────────────────────────────── */
.table {
    font-size: var(--font-size-sm);
}

.table thead th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    border-bottom: 1px solid var(--color-neutral-200);
    padding: var(--space-2) var(--space-3);
    background: var(--color-neutral-50);
}

.table tbody tr {
    min-height: 48px;
}

.table tbody td {
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--color-neutral-100);
    vertical-align: middle;
    color: var(--color-neutral-900);
}

.table tbody tr:hover {
    background: var(--color-neutral-50);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: transparent;
}

.table .identifier-cell,
.table td:first-child a {
    font-weight: 600;
    color: var(--color-neutral-900);
}

/* ── Breadcrumbs ─────────────────────────────────────────────── */
.balcep-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

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

.balcep-breadcrumb a:hover {
    text-decoration: underline;
}

.balcep-breadcrumb-sep {
    color: var(--color-neutral-500);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* J1 — Page fade-in */
.balcep-page {
    animation: fadeInUp 0.2s ease-out forwards;
}

/* J2 — Table row staggered entrance */
.table tbody tr {
    animation: fadeInUp 0.15s ease-out forwards;
    opacity: 0;
}

.table tbody tr:nth-child(1) { animation-delay: 0.03s; }
.table tbody tr:nth-child(2) { animation-delay: 0.06s; }
.table tbody tr:nth-child(3) { animation-delay: 0.09s; }
.table tbody tr:nth-child(4) { animation-delay: 0.12s; }
.table tbody tr:nth-child(5) { animation-delay: 0.15s; }
.table tbody tr:nth-child(n+6) { animation-delay: 0.18s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .balcep-page,
    .table tbody tr {
        animation: none;
        opacity: 1;
    }
}

/* ── Toast Notifications ─────────────────────────────────────── */
.balcep-toast-container {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.balcep-toast {
    min-width: 280px;
    max-width: 380px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    pointer-events: all;
    animation: fadeInUp 0.2s ease-out forwards;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.balcep-toast.success {
    background: var(--color-success);
    color: #ffffff;
}

.balcep-toast.error {
    background: var(--color-danger);
    color: #ffffff;
}

.balcep-toast.warning {
    background: var(--color-warning);
    color: #ffffff;
}

.balcep-toast.info {
    background: var(--color-info);
    color: #ffffff;
}

.balcep-toast.debug {
    background: var(--color-info);
    color: #ffffff;
}

.balcep-toast-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
}

/* ── Phase 43 Step 1 — Stability Score Hero Number ───────────────── */
.stability-hero-number {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand);
}

.stability-hero-delta {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-top: var(--space-1);
}

.stability-hero-delta.positive {
  color: var(--color-success);
}

.stability-hero-delta.negative {
  color: var(--color-danger);
}

/* ── Phase 43 Step 2 — Athlete Avatar Size ───────────────────────── */
.athlete-avatar {
  width: 72px;
  height: 72px;
  font-size: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  background: var(--color-brand);
  color: #ffffff;
  flex-shrink: 0;
}

/* ── Phase 43 Step 3 — Stat Bar ──────────────────────────────────── */
.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 100px;
}

.stat-item .stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-neutral-900);
}

.stat-item .stat-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
}

/* ── Flag Banner CTA (Phase 43 Step 8) ─────────────────────────── */
.flag-banner-cta {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  opacity: 0.9;
  margin-left: var(--space-3);
  white-space: nowrap;
}
.flag-banner-cta:hover {
  opacity: 1;
}

/* ── Rehab Phase Stepper (Phase 43 Step 9) ─────────────────────── */
.rehab-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: var(--space-4) 0;
}
.rehab-stepper-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
}
.rehab-stepper-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 1;
}
.rehab-stepper-circle.completed {
  background: var(--color-brand);
  color: #ffffff;
}
.rehab-stepper-circle.current {
  background: var(--color-brand);
  color: #ffffff;
  box-shadow: 0 0 0 3px var(--color-brand-light);
}
.rehab-stepper-circle.future {
  background: var(--color-neutral-200);
  color: var(--color-neutral-500);
}
.rehab-stepper-label {
  font-size: var(--font-size-xs);
  color: var(--color-neutral-500);
  margin-top: var(--space-1);
  text-align: center;
  max-width: 72px;
}
.rehab-stepper-label.current {
  color: var(--color-brand);
  font-weight: 600;
}
.rehab-stepper-connector {
  flex: 1;
  height: 2px;
  background: var(--color-neutral-200);
  margin-bottom: 20px;
}
.rehab-stepper-connector.completed {
  background: var(--color-brand);
}

/* ── Rehab Stepper — Dark Mode (UI-53-10) ───────────────────────── */
[data-theme='dark'] .rehab-stepper-circle.future {
  background: var(--color-neutral-700);
  color: var(--color-neutral-300);
}
[data-theme='dark'] .rehab-stepper-label {
  color: var(--color-neutral-400);
}
[data-theme='dark'] .rehab-stepper-label.current {
  color: var(--color-brand-light);
}
[data-theme='dark'] .rehab-stepper-connector {
  background: var(--color-neutral-700);
}

/* ── Profile Completion Bar (Phase 43 Step 10) ─────────────────── */
.profile-completion-bar {
  margin-bottom: var(--space-4);
}
.profile-completion-label {
  font-size: var(--font-size-xs);
  color: var(--color-neutral-500);
  margin-bottom: var(--space-1);
  display: flex;
  gap: var(--space-2);
}
.profile-completion-hint {
  color: var(--color-neutral-400);
}
.profile-completion-track {
  height: 4px;
  background: var(--color-neutral-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.profile-completion-fill {
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-sm);
  transition: width 0.4s ease;
}

/* ── Contextual Help Tooltips (Phase 43 Step 11) ───────────────── */
/* ── Global sr-tip tooltip system ───────────────────────────────── */
.sr-tip-wrap { position:relative; display:inline-flex; align-items:center; margin-left:8px; flex-shrink:0; }
.sr-tip-wrap--abs { position:absolute; top:12px; right:12px; margin-left:0; }
.sr-tip-btn { width:18px; height:18px; border-radius:50%; background:#f3f4f6; border:1px solid #e5e7eb; display:inline-flex; align-items:center; justify-content:center; cursor:default; color:#9ca3af; font-size:10px; font-weight:700; line-height:1; font-family:inherit; padding:0; flex-shrink:0; transition:background .12s,border-color .12s,color .12s; }
.sr-tip-btn:hover { background:#eef0ff; border-color:#c7d0fe; color:#4656FD; }
[data-theme='dark'] .sr-tip-btn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.4); }
[data-theme='dark'] .sr-tip-btn:hover { background:rgba(70,86,253,.18); border-color:#4656FD; color:#7c8fff; }
.sr-tip-pop { display:none; position:fixed; background:#1f2937; color:#f9fafb; font-size:11px; font-weight:400; line-height:1.5; border-radius:7px; padding:8px 10px; width:210px; z-index:2000; box-shadow:0 4px 16px rgba(0,0,0,.25); white-space:normal; pointer-events:none; }
.sr-tip-pop::before { content:''; position:absolute; bottom:100%; left:var(--caret-left, 6px); right:auto; border:5px solid transparent; border-bottom-color:#1f2937; }

.help-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
  cursor: help;
}
.help-tooltip-icon {
  font-size: 11px;
  color: var(--color-neutral-400);
  line-height: 1;
}
.help-tooltip-text {
  display: none;
  position: fixed;
  background: var(--color-neutral-900);
  color: var(--color-neutral-50);
  font-size: var(--font-size-xs);
  font-weight: 400;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  white-space: normal;
  max-width: 240px;
  z-index: 2000;
  pointer-events: none;
}

/* ---------------------------------------------------------- */
/* Radar chart legend dots                                     */
/* Phase 44 Step 2 — replaces hardcoded rgba in template      */
/* ---------------------------------------------------------- */
.radar-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.radar-legend-dot--current {
  background: var(--color-brand);
  opacity: 0.7;
}
.radar-legend-dot--baseline {
  background: var(--color-neutral-400);
  opacity: 0.5;
}


/* ============================================================
   STATUS DOTS
   Used in session activity feed and equipment health panel.
   Dot + badge pattern — color is never used alone (Product Review rule).
   ============================================================ */

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

.status-dot--green  { background-color: var(--color-success); }
.status-dot--amber  { background-color: var(--color-warning); }
.status-dot--red    { background-color: var(--color-danger);  }
.status-dot--gray   { background-color: var(--color-neutral-400); }

/* ============================================================
   BADGE COLOR VARIANTS
   Companion labels to status dots.
   ============================================================ */

.badge--green {
    background-color: var(--color-success-subtle);
    color: var(--color-success);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.badge--amber {
    background-color: var(--color-warning-subtle);
    color: var(--color-warning);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.badge--gray {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-500);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   SESSION ACTIVITY TIMELINE
   Vertical connector line drawn via ::before on each item.
   Line is suppressed on the last child so it does not
   extend past the final dot.
   ============================================================ */

.session-timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-neutral-200);
    transition: background var(--transition-fast);
}

.session-timeline-item:hover {
    background: var(--color-neutral-50);
}

.session-timeline-item:last-child {
    border-bottom: none;
}

.session-timeline-dot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    text-align: center;
    z-index: 1;
}

.session-timeline-item::before {
    display: none;
}

.session-timeline-item:last-child::before {
    display: none;
}

/* Dark mode overrides */
[data-theme='dark'] .session-timeline-item {
    border-bottom-color: var(--color-neutral-700);
}

[data-theme='dark'] .session-timeline-item:hover {
    background: var(--color-neutral-800);
}

[data-theme='dark'] .session-timeline-item::before {
    background: var(--color-neutral-700);
}

[data-theme='dark'] .badge--green {
    background-color: var(--color-success-subtle-dark, rgba(34,197,94,0.15));
}

[data-theme='dark'] .badge--amber {
    background-color: var(--color-warning-subtle-dark, rgba(251,191,36,0.15));
}

[data-theme='dark'] .badge--gray {
    background-color: var(--color-neutral-100) !important;
    color: var(--color-neutral-600) !important;
}

/* ============================================================
   STAT CARD DELTA INDICATOR
   Directional indicator row below the stat value.
   up = green, down = red, flat = muted.
   ============================================================ */

.stat-card__delta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-top: var(--space-2);
    overflow: visible;
}

.stat-card__delta--up   { color: var(--color-success); }
.stat-card__delta--down { color: var(--color-danger);  }
.stat-card__delta--flat { color: var(--color-neutral-500); }

/* ============================================================
   ATHLETES NEEDING ATTENTION PANEL — ROW
   Base row style matches session timeline item pattern.
   Critical variant (severity 3) adds red left-border accent.
   ============================================================ */

.attention-row {
    display: flex;
    align-items: center;
    padding: 0.85rem 1rem;
    margin: 0 8px 6px 8px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    border: 1px solid var(--color-neutral-200);
    border-left: 3px solid transparent;
    transition: background var(--transition-fast);
    background: var(--color-surface);
}
.attention-row:last-child {
    margin-bottom: 8px;
}

.attention-row:hover {
    background: var(--color-neutral-50);
}

.attention-row--critical {
    border-left-color: var(--color-danger);
}

.attention-row--monitor {
    border-left-color: var(--color-warning);
}

/* Dark mode */
[data-theme='dark'] .attention-row {
    background: rgba(255,255,255,0.03);
    border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme='dark'] .attention-row:hover {
    background: rgba(70,86,253,0.10);
}
[data-theme='dark'] .attention-row--critical {
    border-left-color: var(--color-danger);
    background: rgba(248,113,113,0.06);
}
[data-theme='dark'] .attention-row--monitor {
    border-left-color: var(--color-warning);
    background: rgba(251,191,36,0.05);
}
/* original rule preserved below */
[data-theme='dark'] .attention-row-ORIG {
    border-bottom-color: var(--color-neutral-700);
}

[data-theme='dark'] .attention-row:hover {
    background: rgba(255,255,255,0.06);
}

/* ============================================================
   BADGE — RED VARIANT
   Companion to status-dot--red for severity 3 alerts.
   ============================================================ */

.badge--red {
    background-color: var(--color-danger-subtle, rgba(239,68,68,0.12));
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

[data-theme='dark'] .badge--red {
    background-color: rgba(239,68,68,0.18);
}

/* ============================================================
   RADAR THUMBNAIL
   Default 60x60px canvas. Used in session_results and other pages.
   Phase 75: removed !important so dashboard athlete cards can override
   to 120x120 via .athlete-stability-card canvas.radar-thumbnail.
   responsive: false is set in JS — CSS enforces no stretch.
   ============================================================ */

.radar-thumbnail {
    width:  60px;
    height: 60px;
    display: block;
    flex-shrink: 0;
}

/* ============================================================
   ONBOARDING STEPPER
   Horizontal stepped progress indicator for the org admin
   onboarding checklist. Numbered circles connected by a line.
   Completed steps filled brand purple, incomplete muted gray.
   ============================================================ */

.onboarding-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-4) 0;
    overflow-x: auto;
}

.onboarding-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    min-width: 80px;
}

/* Connector line — drawn as ::before on every step except the first */
.onboarding-stepper__step + .onboarding-stepper__step::before {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(-50%);
    right: calc(50%);
    height: 2px;
    background: var(--color-neutral-300);
    z-index: 0;
}

.onboarding-stepper__step--complete + .onboarding-stepper__step::before {
    background: var(--color-brand);
}

.onboarding-stepper__circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.onboarding-stepper__step--complete .onboarding-stepper__circle {
    background: var(--color-brand);
    color: #fff;
}

.onboarding-stepper__step--incomplete .onboarding-stepper__circle {
    background: var(--color-neutral-200);
    color: var(--color-neutral-500);
}

.onboarding-stepper__label {
    font-size: var(--font-size-xs);
    text-align: center;
    margin-top: var(--space-2);
    color: var(--color-neutral-600);
    max-width: 100px;
    line-height: 1.3;
}

.onboarding-stepper__step--complete .onboarding-stepper__label {
    color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
}

/* Dark mode */
[data-theme='dark'] .onboarding-stepper__step + .onboarding-stepper__step::before {
    background: var(--color-neutral-600);
}

[data-theme='dark'] .onboarding-stepper__step--complete + .onboarding-stepper__step::before {
    background: var(--color-brand);
}

[data-theme='dark'] .onboarding-stepper__step--incomplete .onboarding-stepper__circle {
    background: var(--color-neutral-700);
    color: var(--color-neutral-400);
}

[data-theme='dark'] .onboarding-stepper__label {
    color: var(--color-neutral-400);
}

/* ---------------------------------------------------------------------------
   Phase 45 — Hero Score Summary Band (Step 1)
   Full-width band at the top of the session results page.
   Displays stability score, baseline delta with directional arrow,
   and a one-line plain-English interpretation.
--------------------------------------------------------------------------- */

.hero-band {
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hero-band__score-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hero-band__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-500);
}

.hero-band__score {
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
}

.hero-band__score--none {
  font-size: 32px;
  color: var(--color-neutral-400);
}

.hero-band__divider {
  width: 1px;
  height: 72px;
  background: var(--color-border);
  flex-shrink: 0;
}

.hero-band__delta-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-band__delta {
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-band__delta--positive {
  color: var(--color-success);
}

.hero-band__delta--negative {
  color: var(--color-danger);
}

.hero-band__delta--neutral {
  color: var(--color-neutral-500);
}

.hero-band__delta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-500);
}

.hero-band__interpretation {
  flex: 1;
  min-width: 200px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Dark mode — hero band */
[data-theme="dark"] .hero-band {
  background: var(--color-surface-raised);
  border-bottom-color: var(--color-border);
}

/* ---------------------------------------------------------------------------
   Phase 45 Step 4 — Session Quality Badge
   Displayed below the hero band on the session results page.
   Four states: complete, missing_samples, low_confidence, simulated.
--------------------------------------------------------------------------- */

.quality-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.quality-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.quality-badge--complete {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success);
}

.quality-badge--complete .quality-badge__dot {
  background: var(--color-success);
}

.quality-badge--missing-samples {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning, #d97706);
}

.quality-badge--missing-samples .quality-badge__dot {
  background: var(--color-warning, #d97706);
}

.quality-badge--low-confidence {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning, #d97706);
}

.quality-badge--low-confidence .quality-badge__dot {
  background: var(--color-warning, #d97706);
}

.quality-badge--simulated {
  background: rgba(139, 92, 246, 0.12);
  color: var(--color-brand);
}

.quality-badge--simulated .quality-badge__dot {
  background: var(--color-brand);
}

.quality-badge-row {
  padding: 10px 32px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

/* Dark mode — quality badge uses design tokens throughout.
   No additional overrides required. */


/* ============================================================
   PRINT STYLESHEET
   Target: session_results.html web print rendering only.
   session_pdf.html is a standalone WeasyPrint document with
   its own inline styles and is not a @media print target.
   (D-45-08)
   ============================================================ */

@media print {

  /* --- Page setup --- */
  @page {
    margin: 20mm 16mm;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  /* --- Hide nav and non-content UI --- */
  .balcep-navbar,
  .balcep-breadcrumb,
  .btn-primary,
  .btn-outline-secondary,
  #dirToggleBtn {
    display: none !important;
  }

  /* --- Hero band --- */
  .hero-band {
    border: 1pt solid #ccc;
    break-inside: avoid;
    margin-bottom: 12pt;
  }

  /* --- Quality badge row --- */
  .quality-badge-row {
    break-inside: avoid;
    margin-bottom: 8pt;
  }

  /* --- Page header --- */
  .balcep-page-header {
    break-inside: avoid;
    margin-bottom: 12pt;
  }

  /* --- Stat cards --- */
  .stat-card {
    border: 1pt solid #ccc;
    break-inside: avoid;
  }

  /* --- Charts --- */
  canvas {
    max-width: 100%;
    break-inside: avoid;
  }

  /* --- Cards --- */
  .card {
    border: 1pt solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .card-header {
    background: #f5f5f5 !important;
    color: #000 !important;
    border-bottom: 1pt solid #ccc !important;
  }

  /* --- Prevent orphaned headings --- */
  h1, h2, h3, h4 {
    break-after: avoid;
  }

}
/* Session history table row hover */
.session-history-row {
  transition: background var(--transition-fast);
}
.session-history-row:hover {
  background: var(--color-neutral-50);
}
/* ---------------------------------------------------------------------------
   Icon System — Usage Rules
   Decision: D-46-ICON-01 | Phase 46 | Author: Michael Lonis

   RULE 1 — Icon + label always. Never render an icon alone. Every icon
            placement must have a visible text label alongside it. Icons
            reinforce meaning — they do not replace text.

   RULE 2 — Use currentColor. All custom SVG icons use stroke="currentColor"
            and fill="none" (except structural dots). This means icons
            automatically inherit the text color of their parent element,
            including active, hover, and dark mode states. Never hardcode
            a color value on an icon element.

   RULE 3 — Standard sizes. Nav icons: 20x20px. Inline icons (badges,
            severity indicators, panel headers): 16x16px. Never scale
            icons outside these two sizes without a justified reason.

   RULE 4 — Custom icons only. No Bootstrap icons (bi-), no Font Awesome
            (fa-) in any new work. All icons come from static/img/icons/.
            To add a new icon, produce an SVG following the spec below and
            save it to static/img/icons/.

   RULE 5 — Use the icon partial. Always render icons via:
            {% include 'partials/icon.html' with name='icon-name' size=20 %}
            Never write raw <img> or <svg> tags for icons in templates
            except on the login page where the partial is unavailable.

   SVG PRODUCTION SPEC — all icons must follow:
     viewBox="0 0 24 24"
     width="24" height="24"
     fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
     Saved to: static/img/icons/<name>.svg

   CURRENT ICON SET (Phase 46):
     balance-board  — athlete on rocker board — used: Athletes nav, Institutions nav, Team Readiness
     stability      — concentric circles     — used: Dashboard nav, Devices nav, Equipment Health
     session        — clipboard document     — used: Sessions nav, Assessments nav, Templates nav, Today's Session Activity
     fatigue        — downward curve arrow   — used: Simulation nav
     alert          — triangle exclamation   — used: Org Admin nav, Platform Admin nav, severity indicators
     workout        — dumbbell              — used: Workouts nav, Compliance This Week
   --------------------------------------------------------------------------- */

.balcep-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ==========================================================================
   Heatmap Component
   Zone Heatmap Visualization — Phase 47
   Used on: session analysis page (Component 4 tab), athlete profile page
   (longitudinal Deep Dive panel).
   D-47-08: Canvas API rendering. No external library.
   ========================================================================== */

/* ---- Zone Heatmap Layout (Phase 50 — replaces .heatmap-container etc.) ---- */

/* Skeleton container — still used during loading state */
.heatmap-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Two-column layout: wheel left, bars right */
.hm-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

/* Left panel — canvas + legend + session label */
.hm-panel-wheel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 28px 28px 28px;
  border-right: 1px solid var(--color-neutral-200);
}

/* Right panel — zone activity bars */
.hm-panel-bars {
  flex: 0 0 auto;
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 28px;
}

/* Canvas wrapper — fixed width prevents offsetWidth feedback loop
   that caused canvas to grow unbounded on retina displays.
   overflow:hidden clips the hover-explode tween to the wheel boundary. */
.hm-canvas-wrap {
  position: relative;
  cursor: crosshair;
  width: 280px;
  height: 280px;
  flex-shrink: 0;
  overflow: hidden;
}

.hm-canvas-wrap canvas {
  display: block;
  width: 280px;
  height: 280px;
}

/* HTML legend — gradient bar + Low/High labels.
   Gradient stops match heatmapColor() exactly:
   rgb(59,130,246) → rgb(245,158,11) → rgb(239,68,68)          */
.hm-legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  max-width: 200px;
}

.hm-legend-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgb(59, 130, 246),
    rgb(245, 158, 11),
    rgb(239, 68, 68)
  );
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

.hm-legend-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.hm-legend-labels span {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.55);
  letter-spacing: 0.04em;
}

/* Session context pill — "Averaged across N sessions" */
.hm-session-label {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.55);
  letter-spacing: 0.03em;
  text-align: center;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Right panel — bar chart */
.hm-panel-bars {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 28px 0 28px 28px;
  justify-content: center;
}

/* Section label above bars */
.hm-section-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(165, 180, 252, 0.7);
  margin-bottom: 16px;
}

/* Bar list container */
.hm-bar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Individual bar row */
.hm-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 8px;
  transition: background 0.15s ease;
  cursor: default;
}

.hm-bar-row:hover,
.hm-bar-row--active {
  background: rgba(99, 102, 241, 0.08);
}

/* Zone letter (W, E, N…) */
.hm-bar-label {
  width: 26px;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-neutral-700);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

/* Track — background rail */
.hm-bar-track {
  flex: 1;
  max-width: 120px;
  height: 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

/* Fill — width and color set inline by JS via heatmapColor() */
.hm-bar-fill {
  height: 100%;
  border-radius: 5px;
  width: 0;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Bright tip at right edge of fill bar */
.hm-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0 5px 5px 0;
  filter: blur(2px);
}

/* Percentage label — color set inline by JS */
.hm-bar-pct {
  width: 38px;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Template Preview Card (Phase 48 Step 1) ---- */
.template-preview-card {
  display: none;
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-50);
  font-size: var(--font-size-sm);
}
.template-preview-card.active { display: block; }
.template-preview-card .preview-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-1);
}
.template-preview-card .preview-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.template-preview-card .preview-field span {
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  display: block;
}
.template-preview-card .preview-field strong {
  color: var(--color-neutral-900);
}
[data-theme="dark"] .template-preview-card {
  background: var(--color-neutral-800);
  border-color: var(--color-neutral-700);
}
[data-theme="dark"] .template-preview-card .preview-field strong {
  color: var(--color-neutral-100);
}

/* ---- Button Loading State (Phase 48 Step 2) ---- */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
  color: var(--color-neutral-0, #fff);
}
.btn--loading.btn-outline-secondary::after,
.btn--loading.btn-outline-primary::after {
  color: var(--color-neutral-600);
}
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* ---- Required Field Indicator (Phase 48 Step 3) ---- */
.required-indicator {
  color: var(--color-danger);
  margin-left: var(--space-1);
  font-weight: var(--font-weight-normal);
}

/* Sparkline — session list trend column */
.sparkline {
  display: block;
  width: 40px;
  height: 20px;
}
.sparkline polyline {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Keyboard shortcut badge — shortcut help modal */
.shortcut-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-neutral-300);
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono, monospace);
  background: var(--color-neutral-100);
  color: var(--color-neutral-700);
  line-height: 1.6;
}


/* ============================================================
   ACCESSIBILITY — Phase 49
   WCAG 2.1 AA compliance utilities
   ============================================================ */

/* Step 3 — Global Visible Focus Indicator (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Suppress focus ring on elements that provide their own
   focus treatment via Bootstrap or custom CSS */
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* ── Directional Deep Dive — Dark Mode (UI-53-12) ───────────────── */
[data-theme='dark'] #trendChart,
[data-theme='dark'] #radarChart {
  background: var(--color-surface-raised);
  border-radius: 6px;
}
[data-theme='dark'] #breakdownTable thead th {
  background: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border-color: var(--color-neutral-700);
}
[data-theme='dark'] #breakdownTable td {
  border-color: var(--color-neutral-700);
  color: var(--color-neutral-300);
}
[data-theme='dark'] #breakdownTable tbody tr:hover td {
  background: rgba(255,255,255,0.06);
}

/* ── Dark Mode — General Card Dividers and Text (Visual QA Pass) ── */
[data-theme='dark'] hr,
[data-theme='dark'] .card-divider {
  border-color: var(--color-neutral-700);
  opacity: 1;
}
[data-theme='dark'] .progress {
  background-color: var(--color-neutral-700);
}
[data-theme='dark'] .text-muted {
  color: var(--color-neutral-400) !important;
}
[data-theme='dark'] .small.text-muted {
  color: var(--color-neutral-400) !important;
}

/* ── Dark Mode — Rehab Stepper current circle label ─────────────── */
[data-theme='dark'] .rehab-stepper-circle.current {
  color: #ffffff;
}
[data-theme='dark'] .rehab-stepper-label.current {
  color: var(--color-brand-light, #a78bfa);
}
[data-theme='dark'] .rehab-stepper-circle.completed {
  color: #ffffff;
}

/* ── Dark Mode — Chart container backgrounds ─────────────────────── */
[data-theme='dark'] .card-body canvas {
  background: transparent;
}
[data-theme='dark'] .card {
  background: rgba(70,86,253,0.42);
  border-color: rgba(70,86,253,0.70);
  box-shadow: 0 6px 32px rgba(70,86,253,0.45), 0 2px 8px rgba(0,0,0,0.30);
}
[data-theme='dark'] .card-header {
  border-bottom-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.70);
}
[data-theme='dark'] .card-body {
  color: rgba(255,255,255,0.85);
}

/* ── Dark Mode — Nav icons force white ──────────────────────────── */
[data-theme='dark'] .balcep-icon {
  filter: brightness(0) invert(1) !important;
}

/* Dark mode readability fix — text-muted and neutral-500 labels */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-muted.small,
[data-theme="dark"] .form-label.text-muted {
    color: var(--color-neutral-700) !important;
}

[data-theme="dark"] [style*="color:var(--color-neutral-500)"],
[data-theme="dark"] [style*="color: var(--color-neutral-500)"] {
    color: var(--color-neutral-700) !important;
}

/* Dark mode readability fix — text-muted and neutral-500 labels */
[data-theme="dark"] {
    --bs-secondary-color: #cbd5e1;
    --bs-tertiary-color: #cbd5e1;
}
[data-theme="dark"] .text-muted {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .form-label {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .card-header {
    color: rgba(255,255,255,0.75);
    border-bottom-color: rgba(255,255,255,0.08);
}
/* card-body blanket overrides removed Phase 72D Step 5
   Use token-scoped rules instead of painting all children */
[data-theme="dark"] {
    --color-neutral-400: #94a3b8;
}

/* ── Button Outline Variants — Design System Override (Phase 50) ── */
/* Ensures btn-outline-primary and btn-outline-secondary respect     */
/* design tokens instead of Bootstrap's default blue/gray.           */

.btn-outline-primary {
    color: var(--color-brand);
    border-color: var(--color-brand);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: var(--color-brand);
    color: #ffffff;
    border-color: var(--color-brand);
}

.btn-outline-secondary {
    color: var(--color-neutral-700);
    border-color: var(--color-neutral-200);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
    border-color: var(--color-neutral-200);
}

[data-theme='dark'] .btn-outline-primary {
    color: var(--color-brand);
    border-color: var(--color-brand);
}
[data-theme='dark'] .btn-outline-primary:hover {
    background: var(--color-brand);
    color: #ffffff;
}

[data-theme='dark'] .btn-outline-secondary {
    color: var(--color-neutral-400);
    border-color: var(--color-neutral-200);
}
[data-theme='dark'] .btn-outline-secondary:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

/* ── Button Outline Variants — Design System Override (Phase 50) ── */
/* Ensures btn-outline-primary and btn-outline-secondary respect     */
/* design tokens instead of Bootstrap default blue/gray.             */

.btn-outline-primary {
    color: var(--color-brand);
    border-color: var(--color-brand);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background: var(--color-brand);
    color: #ffffff;
    border-color: var(--color-brand);
}

.btn-outline-secondary {
    color: var(--color-neutral-700);
    border-color: var(--color-neutral-200);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
    border-color: var(--color-neutral-200);
}

[data-theme='dark'] .btn-outline-primary {
    color: var(--color-brand);
    border-color: var(--color-brand);
}
[data-theme='dark'] .btn-outline-primary:hover {
    background: var(--color-brand);
    color: #ffffff;
}

[data-theme='dark'] .btn-outline-secondary {
    color: var(--color-neutral-400);
    border-color: var(--color-neutral-200);
}
[data-theme='dark'] .btn-outline-secondary:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

/* ── Dark mode page background depth ───────────────────────────────────────
   Ensures the page background is true #021327 so cards float above it.   */
[data-theme='dark'] body {
    background-color: #021327;
}
[data-theme='dark'] .balcep-layout__content {
    background-color: #0d1117;
}
[data-theme='dark'] .balcep-card {
    background: #161b22;
    border: 1px solid #2d3748;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
}
[data-theme='dark'] .balcep-card:hover {
    transform: none;
    border-color: #3d4f6e;
}

/* ── Light mode card hover — brand blue glow ────────────────────────────── */
[data-theme='light'] .balcep-card:hover,
.balcep-card:hover {
    /* no card hover — rows hover instead */
    transform: none;
}
.balcep-card {
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* ── Equipment health offline badge dark mode ───────────────────────────── */
[data-theme='dark'] .badge--offline,
[data-theme='dark'] [class*="offline"] {
    background: rgba(248,113,113,0.15);
    color: #f87171;
    border: 1px solid rgba(248,113,113,0.25);
}

/* ════════════════════════════════════════════════════════════════════
   Phase 72D Step 5 — Global Design System Polish
   Applied globally. Cards, typography, spacing, interactive states.
   ════════════════════════════════════════════════════════════════════ */

/* ── Typography scale — headings ───────────────────────────────────── */
h1, .h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--color-neutral-900);
}
h2, .h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--color-neutral-900);
}
h3, .h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-neutral-900);
}

[data-theme='dark'] h1,
[data-theme='dark'] .h1,
[data-theme='dark'] h2,
[data-theme='dark'] .h2,
[data-theme='dark'] h3,
[data-theme='dark'] .h3 {
    color: rgba(255,255,255,0.92);
}

/* ── Page header border accent ──────────────────────────────────────── */
.balcep-page-header {
    border-left: 3px solid #4656FD;
}

/* ── Button global interactive states ───────────────────────────────── */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.15s ease;
    letter-spacing: 0.01em;
}
.btn:active {
    transform: scale(0.98);
}
.btn-primary {
    background: #4656FD;
    border-color: #4656FD;
    color: #ffffff;
}
.btn-primary:hover {
    background: #3545e5;
    border-color: #3545e5;
    box-shadow: 0 4px 14px rgba(70,86,253,0.35);
}
[data-theme='dark'] .btn-primary {
    background: #4656FD;
    border-color: #4656FD;
}
[data-theme='dark'] .btn-primary:hover {
    background: #3545e5;
    box-shadow: 0 4px 14px rgba(70,86,253,0.45);
}

/* ── Attention row global polish ────────────────────────────────────── */
.attention-row {
    padding: 14px 20px;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
}
.attention-row:hover {
    background: var(--color-neutral-50);
}
[data-theme='dark'] .attention-row:hover {
    background: rgba(70,86,253,0.08);
}

/* ── Readiness bar polish ────────────────────────────────────────────── */
.readiness-bar {
    height: 8px;
    border-radius: 99px;
    overflow: hidden;
}

/* ── Session timeline polish ─────────────────────────────────────────── */
.session-timeline-item {
    padding: 14px 20px;
    transition: background 0.15s ease;
}
.session-timeline-item:hover {
    background: var(--color-neutral-50);
}
[data-theme='dark'] .session-timeline-item:hover {
    background: rgba(255,255,255,0.06);
}

/* ── Equipment health row polish ─────────────────────────────────────── */
.attention-row .fw-semibold,
.attention-row strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral-900);
}
[data-theme='dark'] .attention-row .fw-semibold,
[data-theme='dark'] .attention-row strong {
    color: rgba(255,255,255,0.90);
}

/* ── Offline badge polish ────────────────────────────────────────────── */
.badge-offline,
[class*="badge"][class*="offline"],
.attention-row .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 99px;
    letter-spacing: 0.04em;
}

/* ── Card section spacing normalization ──────────────────────────────── */
.balcep-card + .balcep-card,
.card + .card {
    margin-top: 0;
}

/* ── Dark mode page title ────────────────────────────────────────────── */
[data-theme='dark'] .balcep-page-header h1,
[data-theme='dark'] .balcep-page-header .balcep-page-title {
    color: rgba(255,255,255,0.92);
}

/* ── Form inputs global polish ───────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: 10px;
    border: 1px solid var(--color-border);
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: #4656FD;
    box-shadow: 0 0 0 3px rgba(70,86,253,0.15);
}


/* ═══════════════════════════════════════════════════════════════════════
   STAT CARD VIZ — Phase [next] Visual Elevation
   Mini chart layout inside stat cards.
   .stat-card-viz     : two-column flex row — text left, chart right.
   .stat-card-chart   : fixed canvas dimensions for Chart.js mini charts.
   Responsive: chart hidden below 360px to preserve number legibility.
   ═══════════════════════════════════════════════════════════════════════ */

/* Two-column layout: number/label stack on left, canvas on right */
.stat-card-viz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.stat-card-viz .stat-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Canvas wrapper — fixed size so Chart.js renders predictably */
.stat-card-chart {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    position: relative;
}

.stat-card-chart canvas {
    width: 72px !important;
    height: 72px !important;
}

/* Hide mini chart on very narrow cards to preserve number legibility */
@media (max-width: 360px) {
    .stat-card-chart { display: none; }
}

/* ── Stat card sub-label (secondary line beneath the hero number) ─── */
.stat-card-sublabel {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    margin-top: 2px;
}

/* ── Dark mode chart canvas background ──────────────────────────────── */
/* Ensures mini chart canvas doesn't show white bleed in dark mode.    */
[data-theme='dark'] .stat-card-chart canvas {
    background: transparent;
}

/* ── Dashboard two-column panel row ─────────────────────────────────── */
/* Trainer Roster + Billing side by side on wide viewports.            */
/* Collapses to single column on narrow screens via flex-wrap.         */
.dash-panel-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.dash-panel-row .dash-panel-half {
    flex: 1 1 340px;
    min-width: 0;
}

/* ── Devices panel full-width row ────────────────────────────────────── */
.dash-panel-full {
    margin-bottom: 24px;
}

/* ── Trainer roster table refinements ───────────────────────────────── */
.trainer-roster-table td,
.trainer-roster-table th {
    vertical-align: middle;
    padding: 10px 16px;
}

.trainer-roster-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-brand);
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 8px;
    text-transform: uppercase;
}

/* ── Device table status badge ───────────────────────────────────────── */
.device-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.device-state-badge--green  { background: rgba(34,197,94,0.12);  color: #15803d; }
.device-state-badge--blue   { background: rgba(59,130,246,0.12); color: #1d4ed8; }
.device-state-badge--gray   { background: rgba(148,163,184,0.12);color: var(--color-neutral-500); }
.device-state-badge--amber  { background: rgba(245,158,11,0.12); color: #b45309; }
.device-state-badge--red    { background: rgba(239,68,68,0.12);  color: #b91c1c; }

[data-theme='dark'] .device-state-badge--green  { background: rgba(34,197,94,0.18);  color: #4ade80; }
[data-theme='dark'] .device-state-badge--blue   { background: rgba(59,130,246,0.18); color: #93c5fd; }
[data-theme='dark'] .device-state-badge--gray   { background: rgba(148,163,184,0.18);color: var(--color-neutral-400); }
[data-theme='dark'] .device-state-badge--amber  { background: rgba(245,158,11,0.18); color: #fcd34d; }
[data-theme='dark'] .device-state-badge--red    { background: rgba(239,68,68,0.18);  color: #fca5a5; }

/* ═══════════════════════════════════════════════════════════════════════
   BALCEP STAT CARD — Visual Elevation
   Replaces the old .stat-card for the org admin dashboard.
   .balcep-stat-card  : outer card shell
   .bsc-accent        : 3px colored top border, unique per metric
   .bsc-top           : label + icon row
   .bsc-icon          : 32x32 rounded icon container
   .bsc-label         : uppercase muted metric name
   .bsc-number        : hero number — large, bold, tight tracking
   .bsc-footer        : sublabel + trend pill row
   .bsc-sub           : secondary descriptor text
   .bsc-trend         : trend pill — colored inline-flex, set via JS
   .bsc-spark         : sparkline canvas container (card 3 only)
   ═══════════════════════════════════════════════════════════════════════ */

.balcep-stat-card {
    background: var(--color-surface);
    border-radius: 14px;
    border: 1px solid var(--color-neutral-200);
    padding: 20px 20px 16px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.balcep-stat-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    transform: translateY(-2px);
}

.balcep-stat-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* 3px colored top accent bar — unique color set inline per card */
.bsc-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

/* Top row: label left, icon right */
.bsc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bsc-label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-neutral-500);
    padding-top: 2px;
}

/* Icon container — background color set inline per card */
.bsc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Hero number */
.bsc-number {
    font-size: clamp(32px, 4vw, 40px);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-neutral-900);
    margin-bottom: 10px;
}

/* Footer row: sublabel left, trend pill right */
.bsc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.bsc-sub {
    font-size: 12px;
    color: var(--color-neutral-500);
}

/* Trend pill — all styling applied via JS at runtime */
.bsc-trend {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
}

/* Sparkline canvas wrapper — card 3 only */
.bsc-spark {
    margin-top: 14px;
    height: 36px;
    overflow: hidden;
}

.bsc-spark canvas {
    width: 100% !important;
    height: 36px !important;
    display: block;
}

/* ── Dark mode overrides ─────────────────────────────────────────── */
[data-theme='dark'] .balcep-stat-card {
    background: var(--color-surface-raised);
    border-color: var(--color-neutral-800, rgba(255,255,255,0.08));
}

[data-theme='dark'] .balcep-stat-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

[data-theme='dark'] .bsc-number {
    color: rgba(255,255,255,0.92);
}

[data-theme='dark'] .bsc-label,
[data-theme='dark'] .bsc-sub {
    color: var(--color-neutral-400);
}

/* Dark mode trend pill colors — override JS inline styles */
[data-theme='dark'] .bsc-trend[style*='#eaf3de'] {
    background: rgba(34,197,94,0.15) !important;
    color: #4ade80 !important;
}

[data-theme='dark'] .bsc-trend[style*='#fcebeb'] {
    background: rgba(239,68,68,0.15) !important;
    color: #fca5a5 !important;
}

[data-theme='dark'] .bsc-trend[style*='#f1efe8'] {
    background: rgba(148,163,184,0.15) !important;
    color: var(--color-neutral-400) !important;
}

[data-theme='dark'] .bsc-trend[style*='#faeeda'] {
    background: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TRAINER ROSTER — Visual Elevation
   roster-avatar-wrap  : positions avatar + presence dot together
   roster-presence     : 10px dot bottom-right of avatar
   athlete-count-pill  : small pill badge for athlete count
   roster-reltime      : relative time label with title hover
   roster-never        : muted "Never logged in" label
   ═══════════════════════════════════════════════════════════════════════ */

.roster-row:hover {
    background: var(--color-neutral-50, #f9fafb);
}

[data-theme='dark'] .roster-row:hover {
    background: rgba(255,255,255,0.03);
}

/* Avatar + presence dot wrapper */
.roster-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Presence dot — bottom-right corner of avatar */
.roster-presence {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-surface, #fff);
}

.roster-presence--active   { background: #22c55e; }
.roster-presence--inactive { background: var(--color-neutral-300, #d1d5db); }

[data-theme='dark'] .roster-presence {
    border-color: var(--color-surface-raised);
}

/* Athlete count pill */
.athlete-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-700, #374151);
}

[data-theme='dark'] .athlete-count-pill {
    background: rgba(255,255,255,0.08);
    color: var(--color-neutral-300);
}

/* Relative time label */
.roster-reltime {
    font-size: 13px;
    color: var(--color-neutral-700);
    cursor: default;
    border-bottom: 1px dashed var(--color-neutral-300);
}

[data-theme='dark'] .roster-reltime {
    color: var(--color-neutral-400);
    border-bottom-color: var(--color-neutral-600);
}

/* Never logged in label */
.roster-never {
    font-size: 12px;
    color: var(--color-neutral-400);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   BALCEP DEVICES TABLE — Visual Elevation
   device-index-badge  : numbered circle as device lead visual
   device-row          : clickable row with hover state
   battery-bar-wrap    : bar + label layout
   battery-bar-track   : gray track
   battery-bar-fill    : colored fill
   battery-bar-label   : percentage text
   ═══════════════════════════════════════════════════════════════════════ */

.device-row:hover {
    background: var(--color-neutral-50, #f9fafb);
}

[data-theme='dark'] .device-row:hover {
    background: rgba(255,255,255,0.03);
}

/* Numbered circle — device lead visual */
.device-index-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-neutral-100, #f3f4f6);
    color: var(--color-neutral-600);
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

[data-theme='dark'] .device-index-badge {
    background: rgba(255,255,255,0.08);
    color: var(--color-neutral-400);
}

/* Battery bar layout */
.battery-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.battery-bar-track {
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-neutral-200, #e5e7eb);
    overflow: hidden;
    flex-shrink: 0;
}

.battery-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.battery-bar-fill--green { background: #22c55e; }
.battery-bar-fill--amber { background: #f59e0b; }
.battery-bar-fill--red   { background: #ef4444; }

.battery-bar-label {
    font-size: 12px;
    color: var(--color-neutral-600);
    white-space: nowrap;
}

[data-theme='dark'] .battery-bar-track {
    background: rgba(255,255,255,0.1);
}

[data-theme='dark'] .battery-bar-label {
    color: var(--color-neutral-400);
}

/* ── Stat card link wrapper ─────────────────────────────────────────── */
/* Wraps .balcep-stat-card in an <a> tag for click-through navigation. */
/* Removes anchor decoration so the card looks identical to before.    */
.balcep-stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
}

.balcep-stat-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* ── Device last synced relative time ───────────────────────────────── */
.device-reltime {
    font-size: 13px;
    color: var(--color-neutral-700);
    cursor: default;
    border-bottom: 1px dashed var(--color-neutral-300);
    white-space: nowrap;
}

[data-theme='dark'] .device-reltime {
    color: var(--color-neutral-400);
    border-bottom-color: var(--color-neutral-600);
}


/* ================================================================== */
/* Org Admin Dashboard — Section Cards                                */
/* Phase 46 — Visual consistency pass                                 */
/*                                                                    */
/* dash-panel-card applies to Trainer Roster and BALCEP Devices.     */
/* Matches the stat card pattern: 3px purple accent bar on top,      */
/* lift-on-hover box-shadow, smooth transition.                       */
/*                                                                    */
/* Device row and roster row hover scoped to the row only —          */
/* prevents the whole-card highlight that existed before.            */
/* ================================================================== */

/* ── Section card base ─────────────────────────────────────────── */

.dash-panel-card {
    border-top: none;
    border-radius: 12px;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

/* ── Section card hover ────────────────────────────────────────── */

.dash-panel-card:hover {
    box-shadow: 0 8px 32px rgba(91, 62, 181, 0.18);
    transform: translateY(-2px);
}

/* ── Card header title link ────────────────────────────────────── */
/* Inherits color so it reads as a plain heading until hovered.    */

.dash-panel-card__title-link {
    color: inherit;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: color 0.14s ease;
}

.dash-panel-card__title-link:hover {
    color: var(--color-brand);
}

/* ── Roster row hover ──────────────────────────────────────────── */
/* Scoped to tr only — overrides any card-level cursor bleed.      */

/* ── Trainer Roster table ──────────────────────────────────────── */
/* border-separate is required so box-shadow renders on <tr>.     */
/* border-collapse:collapse (Bootstrap default) suppresses it.    */
/* Row separators are recreated with td bottom-border instead.    */

.trainer-roster-table {
    border-collapse: separate;
    border-spacing: 0;
}

.trainer-roster-table th,
.trainer-roster-table td {
    border-bottom: 1px solid #e5e7eb;
    border-top: none;
}

.trainer-roster-table thead th {
    border-bottom: 1px solid #e5e7eb;
}

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

/* ── Roster row hover ──────────────────────────────────────────── */

.roster-row {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.roster-row:hover {
    background: linear-gradient(
        90deg,
        rgba(91, 62, 181, 0.10) 0%,
        rgba(91, 62, 181, 0.03) 100%
    );
    box-shadow: inset 5px 0 0 #5b3eb5;
}

/* Avatar ring + scale pop */
.roster-row:hover .trainer-roster-avatar {
    box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px rgba(91, 62, 181, 0.50);
    transform: scale(1.1);
}

/* ── Device row hover ──────────────────────────────────────────── */
/* Row has data-href — JS handles navigation on click.            */
/* Hover state scoped to tr so only the row highlights.           */

/* ── Device table ──────────────────────────────────────────────── */
/* Same border-separate fix as trainer-roster-table.               */

.device-table {
    border-collapse: separate;
    border-spacing: 0;
}

.device-table th,
.device-table td {
    border-bottom: 1px solid #e5e7eb;
    border-top: none;
}

.device-table thead th {
    border-bottom: 1px solid #e5e7eb;
}

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

/* ── Device row hover ──────────────────────────────────────────── */

.device-row {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.device-row:hover {
    background: linear-gradient(
        90deg,
        rgba(91, 62, 181, 0.10) 0%,
        rgba(91, 62, 181, 0.03) 100%
    );
    box-shadow: inset 5px 0 0 #5b3eb5;
}

/* Index badge flips to solid brand fill on hover */
.device-row:hover .device-index-badge {
    background: #5b3eb5;
    color: #fff;
    transform: scale(1.12);
}

/* Serial number turns brand purple */
.device-row:hover td:first-child a {
    color: #5b3eb5;
}

/* ── Index badge and avatar base transition (enables smooth hover-out) ── */
.device-index-badge {
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.trainer-roster-avatar {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

/* ================================================================== */
/* Billing Summary Card — hover elevation                             */
/* Phase 46                                                           */
/*                                                                    */
/* The card already has a 2px brand-blue border and a base shadow    */
/* set via inline style. On hover: deeper shadow, slight upward lift,*/
/* and the border darkens one step to signal interactivity.          */
/* overflow:hidden is on the inline style so the card clips          */
/* correctly — transform is applied to the card itself, not a child. */
/* ================================================================== */

.billing-summary-card {
    transition: box-shadow 0.2s ease,
                transform 0.2s ease,
                border-color 0.2s ease;
}

.billing-summary-card:hover {
    box-shadow: 0 12px 40px rgba(70, 86, 253, 0.28) !important;
    transform: translateY(-3px);
    border-color: #3040e8 !important;
}

/* ================================================================== */
/* Billing Summary — Button hover states                              */
/* Phase 46                                                           */
/*                                                                    */
/* Both buttons previously had transition:background 0.15s inline    */
/* which prevented CSS hover rules from applying. The inline         */
/* transition was removed and hook classes added so these rules own  */
/* the full hover experience.                                         */
/*                                                                    */
/* btn-billing-primary  — solid fill (View billing)                  */
/* btn-billing-outline  — ghost border (Upgrade plan)                */
/* ================================================================== */

.btn-billing-primary {
    transition: background 0.15s ease,
                box-shadow 0.15s ease,
                transform   0.12s ease;
}

.btn-billing-primary:hover {
    background:  #3040e8 !important;
    box-shadow:  0 4px 14px rgba(70, 86, 253, 0.45);
    transform:   translateY(-1px);
}

.btn-billing-primary:active {
    transform:  translateY(0);
    box-shadow: none;
}

.btn-billing-outline {
    transition: background 0.15s ease,
                box-shadow  0.15s ease,
                transform   0.12s ease;
}

.btn-billing-outline:hover {
    background:  rgba(70, 86, 253, 0.08) !important;
    box-shadow:  0 4px 14px rgba(70, 86, 253, 0.20);
    transform:   translateY(-1px);
}

.btn-billing-outline:active {
    transform:  translateY(0);
    box-shadow: none;
}

/* ================================================================== */
/* Baselines Overview Page                                            */
/* Phase 46                                                           */
/* ================================================================== */

/* ── Baselines table — border-separate so row hover works ───────── */

.baselines-table {
    border-collapse: separate;
    border-spacing: 0;
}

.baselines-table th,
.baselines-table td {
    border-bottom: 1px solid #e5e7eb;
    border-top: none;
}

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

/* ── Baseline row hover ─────────────────────────────────────────── */

.baseline-row[data-href] {
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.baseline-row[data-href]:hover {
    background: linear-gradient(
        90deg,
        rgba(29, 158, 117, 0.08) 0%,
        rgba(29, 158, 117, 0.02) 100%
    );
    box-shadow: inset 5px 0 0 #1d9e75;
}

/* ── No-baseline row — muted appearance ────────────────────────── */

.baseline-row--none td {
    opacity: 0.65;
}

/* ── Stability score display ────────────────────────────────────── */

.baseline-score-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.baseline-score-value {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    min-width: 36px;
}

.baseline-score--high { color: #1d9e75; }
.baseline-score--mid  { color: #ba7517; }
.baseline-score--low  { color: #a32d2d; }

.baseline-score-bar-track {
    flex: 1;
    height: 5px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    min-width: 60px;
}

.baseline-score-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.baseline-score-bar--high { background: #1d9e75; }
.baseline-score-bar--mid  { background: #ba7517; }
.baseline-score-bar--low  { background: #e05252; }


/* ── Dark mode card override — appended to guarantee specificity win ──
   Placed at end of file so it loads last and overrides all prior .card
   rules including any stale inline-style-adjacent rules from older phases.
   Uses explicit hex values — no token dependency — so it cannot be broken
   by future token changes.
   ────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .card,
[data-theme="dark"] .card.mb-4,
[data-theme="dark"] .card.mb-5 {
    background: #161b22 !important;
    border: 1px solid #21262d !important;
    border-top: 1px solid #21262d !important;
    color: #e6edf3 !important;
    --bs-card-color: #e6edf3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.15) !important;
}
[data-theme="dark"] .card-header {
    background: transparent !important;
    border-bottom: 1px solid #21262d !important;
}
[data-theme="dark"] .card-body {
    background: transparent !important;
}
[data-theme="dark"] .ap-card-title,
[data-theme="dark"] .card-title {
    color: rgba(230,237,243,0.5) !important;
}
[data-theme="dark"] body {
    background: #0d1117 !important;
}
[data-theme="dark"] .balcep-page {
    background: #0d1117 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * Zone Heatmap Card — #athleteHeatmapCard
 * Phase 50: Card shell, header, CTA ghost button, tooltip.
 * All layout rules live in .hm-* classes above.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Card shell */
#athleteHeatmapCard {
  background: #13161e;
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: box-shadow 0.2s ease;
}

#athleteHeatmapCard:hover {
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(99, 102, 241, 0.3);
}

/* Card body — zero padding so header band and content panels own spacing */
#athleteHeatmapCard .card-body {
  padding: 0;
}

/* Header band */
#athleteHeatmapCard .ap-card-hd {
  padding: 20px 24px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 0;
}

/* Card title — override the global dark-mode rule at line ~2899 which sets
   rgba(230,237,243,0.5) !important and makes all .ap-card-title nearly
   invisible. This more-specific rule restores full-opacity brand tint. */
#athleteHeatmapCard .ap-card-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(165, 180, 252, 0.95) !important;
  text-transform: uppercase;
}

/* Subhead "Last 30 sessions" */
#athleteHeatmapCard .ap-card-subhead {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.65);
  margin-top: 2px;
}

/* CTA button — ghost style inside this card only.
   The filled indigo .ap-cta-btn competes visually with the heatmap data.
   Ghost style preserves the affordance without fighting for attention.  */
#athleteHeatmapCard .ap-cta-btn--ghost {
  background: transparent;
  color: rgba(165, 180, 252, 0.9);
  border: 1px solid rgba(99, 102, 241, 0.4);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

#athleteHeatmapCard .ap-cta-btn--ghost:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.7);
  color: #fff;
}

/* Skeleton state padding */
#athleteHeatmapCard .heatmap-container {
  padding: 24px;
}

/* ── Hover tooltip ──────────────────────────────────────────────────────── */
/* Injected into <body> by the inline script. Positioned via JS on mousemove */

.hm-tooltip {
  position: fixed;
  background: rgba(10, 13, 20, 0.97);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 10px;
  padding: 10px 14px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  transition: opacity 0.12s ease;
  min-width: 130px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hm-tooltip-zone {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.85);
  margin-bottom: 4px;
}

/* Value text — color set inline by JS via heatmapColor() */
.hm-tooltip-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}

.hm-tooltip-sublabel {
  font-size: 10px;
  color: rgba(148, 163, 184, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Zone Heatmap Card — dark mode specificity overrides ─────────────────
   The [data-theme="dark"] .card.mb-4 block above uses !important on
   background, border, and box-shadow. Those rules beat #athleteHeatmapCard
   alone. These scoped overrides restore the card's intended appearance by
   combining the theme selector with the card ID, which wins the cascade.
   ─────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] #athleteHeatmapCard {
  background: #0d1017 !important;
  border: 1px solid rgba(99, 102, 241, 0.25) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] #athleteHeatmapCard:hover {
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] #athleteHeatmapCard .card-body {
  background: transparent !important;
}

/* Title — overrides the global [data-theme="dark"] .ap-card-title rule
   which sets rgba(230,237,243,0.5) !important and kills legibility.    */
[data-theme="dark"] #athleteHeatmapCard .ap-card-title {
  color: rgba(165, 180, 252, 0.95) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Zone Heatmap Card — Light Mode Overrides
 * Phase 50: All dark-specific values reset for [data-theme="light"].
 * Every rule here corresponds to a dark value confirmed broken in light mode
 * via live DOM audit on 2026-03-16.
 * ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] #athleteHeatmapCard {
  background: #ffffff !important;
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

[data-theme="light"] #athleteHeatmapCard:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(99,102,241,0.2) !important;
}

[data-theme="light"] #athleteHeatmapCard .card-body {
  background: transparent !important;
}

[data-theme="light"] #athleteHeatmapCard .ap-card-hd {
  background: rgba(0,0,0,0.02) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

[data-theme="light"] #athleteHeatmapCard .ap-card-title {
  color: rgba(79, 70, 229, 0.9) !important;
}

[data-theme="light"] #athleteHeatmapCard .ap-card-hd-left > div:not(.ap-card-title) {
  color: rgba(100, 116, 139, 0.8) !important;
}

[data-theme="light"] #athleteHeatmapCard .ap-cta-btn--ghost {
  color: rgba(79, 70, 229, 0.85) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-theme="light"] #athleteHeatmapCard .ap-cta-btn--ghost:hover {
  background: rgba(99, 102, 241, 0.08) !important;
  color: rgba(79, 70, 229, 1) !important;
}

/* Panel divider */
[data-theme="light"] #athleteHeatmapReady > div > div:first-child {
  border-right-color: rgba(0,0,0,0.08) !important;
}

/* Bar track — visible on white background */
[data-theme="light"] #athleteHeatmapCard .hm-bar-track {
  background: rgba(0,0,0,0.07) !important;
}

/* Bar row hover */
[data-theme="light"] #athleteHeatmapCard .hm-bar-row:hover,
[data-theme="light"] #athleteHeatmapCard .hm-bar-row--active {
  background: rgba(99,102,241,0.07) !important;
}

/* Bar labels */
[data-theme="light"] #athleteHeatmapCard .hm-bar-label {
  color: rgba(30,41,59,0.85) !important;
}

/* Section label */
[data-theme="light"] #athleteHeatmapCard .hm-section-label {
  color: rgba(79,70,229,0.7) !important;
}

/* Session context pill */
[data-theme="light"] #athleteHeatmapCard .hm-session-label {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: rgba(100,116,139,0.75) !important;
}

/* Legend labels */
[data-theme="light"] #athleteHeatmapCard .hm-legend-labels span {
  color: rgba(100,116,139,0.6) !important;
}

/* Tooltip — slightly lighter surface */
[data-theme="light"] #hmTooltip {
  background: rgba(255,255,255,0.98) !important;
  border-color: rgba(99,102,241,0.25) !important;
  color: rgb(15,23,42) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}
[data-theme="light"] #hmTooltip .hm-tooltip-zone {
  color: rgba(79,70,229,0.85) !important;
}
[data-theme="light"] #hmTooltip .hm-tt-sublabel {
  color: rgba(100,116,139,0.7) !important;
}


/* ============================================================
   Session History Card  (athlete_detail.html)
   Added: Phase [next] — 2026 UI elevation pass
   ============================================================ */

.sessionHistoryCard {}

.sessionHistoryCard .cardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--color-neutral-200);
  gap: 12px;
}

.sessionHistoryCard .cardHeaderLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  flex-shrink: 0;
}

.sessionHistoryCard .cardTitle {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.sessionHistoryCard .sessionCount {
  font-size: 11px;
  color: var(--color-neutral-400);
  font-weight: 500;
}

/* Filter pills */
.sessionFilterPills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.sessionFilterPill {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--color-neutral-200);
  background: transparent;
  color: var(--color-neutral-500);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.sessionFilterPill:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-neutral-300);
}

.sessionFilterPill.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #ffffff;
}

/* Individual rows */
.sessionHistoryRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--color-neutral-100);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
  cursor: pointer;
}

.sessionHistoryRow:last-child {
  border-bottom: none;
}

.sessionHistoryRow:hover {
  background: var(--color-neutral-50);
  text-decoration: none;
  color: inherit;
}

.sessionHistoryRow:hover .sessionRowArrow {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* Session type icon wrapper */
.sessionTypeIcon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sessionTypeIcon--baseline  { background: rgba(91, 62, 181, 0.10); }
.sessionTypeIcon--comparison { background: rgba(15, 110, 86, 0.10); }
.sessionTypeIcon--workout    { background: rgba(133, 79, 11, 0.10); }
.sessionTypeIcon--default    { background: var(--color-neutral-100); }

/* Row text content */
.sessionRowMain {
  flex: 1;
  min-width: 0;
}

.sessionRowTop {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.sessionRowType {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-800);
  white-space: nowrap;
}

.sessionRowMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sessionRowDate {
  font-size: 12px;
  color: var(--color-neutral-400);
}

/* Status / type chips */
.sessionChip {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: var(--font-weight-normal);
  white-space: nowrap;
}

.sessionChip--baseline   { background: rgba(91, 62, 181, 0.10); color: #4a32a0; }
.sessionChip--completed  { background: rgba(15, 110, 86, 0.10);  color: #0f6e56; }
.sessionChip--inProgress { background: rgba(133, 79, 11, 0.10);  color: #854f0b; }
.sessionChip--aborted    { background: rgba(162, 45, 45, 0.10);  color: #a32d2d; }

/* Right side: duration + arrow */
.sessionRowRight {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sessionRowDuration {
  font-size: 12px;
  color: var(--color-neutral-400);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: right;
  display: none;
}

.sessionRowArrow {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--color-neutral-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-400);
  font-size: 14px;
  line-height: 1;
  transition: border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}

/* Empty state */
.sessionHistoryEmpty {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-neutral-400);
  font-size: var(--font-size-sm);
}

/* Dark mode overrides */
[data-theme="dark"] .sessionHistoryCard .cardHeader {
  border-bottom-color: var(--color-neutral-700);
}

[data-theme="dark"] .sessionHistoryRow {
  border-bottom-color: var(--color-neutral-700);
}

[data-theme="dark"] .sessionHistoryRow:hover {
  background: rgba(255,255,255,0.04);
}

[data-theme="dark"] .sessionRowType {
  color: #ffffff;
}

[data-theme="dark"] .sessionRowDate {
  color: var(--color-neutral-400);
}

[data-theme="dark"] .sessionTypeIcon--baseline {
  background: rgba(91,62,181,0.25);
}

[data-theme="dark"] .sessionTypeIcon--comparison {
  background: rgba(15,110,86,0.25);
}

[data-theme="dark"] .sessionTypeIcon--default {
  background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .sessionRowArrow {
  border-color: var(--color-neutral-600);
  color: var(--color-neutral-400);
}

[data-theme="dark"] .sessionCount {
  background: var(--color-neutral-800);
  color: var(--color-neutral-400);
}

[data-theme="dark"] .sessionFilterPill {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
  background: transparent;
}

[data-theme="dark"] .sessionFilterPill:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
}

[data-theme="dark"] .sessionFilterPill.active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

[data-theme="dark"] .sessionRowArrow {
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.35);
  background: transparent;
}

[data-theme="dark"] .sessionChip--baseline   { background: rgba(91, 62, 181, 0.20); color: #a899e8; }
[data-theme="dark"] .sessionChip--completed  { background: rgba(15, 110, 86, 0.20);  color: #5dcaa5; }
[data-theme="dark"] .sessionChip--inProgress { background: rgba(133, 79, 11, 0.20);  color: #f5c475; }
[data-theme="dark"] .sessionChip--aborted    { background: rgba(162, 45, 45, 0.20);  color: #f09595; }

/* Session History — show more button
   Mirrors .sn-show-more-btn pattern from Session Notes section */
.shShowMoreBtn {
  display: block;
  width: 100%;
  padding: 14px 0 10px;
  background: none;
  border: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  cursor: pointer;
  text-align: center;
  transition: color var(--transition-fast);
  margin-top: 0;
}
.shShowMoreBtn:hover { color: #4e35a0; background: none; }

[data-theme="dark"] .shShowMoreBtn {
  border-top-color: var(--color-neutral-700);
}

/* ---- Heatmap v5 Polish (fixes 2, 4, 5) --------------------------------- */

/* FIX-02 — pointer cursor on canvas so hover feels interactive */
#sessionHeatmapCanvas {
  cursor: pointer;
}

/* FIX-04 — tooltip: border + shadow + backdrop blur */
#heatmapTooltip {
  border:          1px solid rgba(255, 255, 255, 0.10);
  box-shadow:      0 8px 24px rgba(0, 0, 0, 0.45),
                   0 1px 4px  rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events:  none;
}

/* FIX-05 — session label: centered, quiet caption weight */
.heatmap-label {
  width:       100%;
  text-align:  center;
  font-size:   13px;
  font-weight: 400;
  color:       rgba(255, 255, 255, 0.45);
  letter-spacing: 0.01em;
}


/* ============================================================
   BALCEP — Workout Color Pass
   Phase: UI Color Enhancement
   Adds tasteful color depth across workout pages.
   Uses existing design tokens — no new hardcoded values.
   ============================================================ */

/* ── Page header accent — thicker, gradient left bar ────────────────────── */
.balcep-page-header {
    border-left: 4px solid var(--color-brand);
    background: linear-gradient(90deg, rgba(70,86,253,0.04) 0%, transparent 60%);
    padding: var(--space-2) var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: var(--space-5);
}

/* ── wl-card: top accent stripe per section type ─────────────────────────── */
.wl-section:has(.wl-section-icon--recent)   .wl-card { border-top: 2px solid var(--color-brand); }
.wl-section:has(.wl-section-icon--star)     .wl-card { border-top: 2px solid #d97706; }
.wl-section:has(.wl-section-icon--system)   .wl-card { border-top: 2px solid var(--color-info); }
.wl-section:has(.wl-section-icon--draft)    .wl-card { border-top: 2px solid var(--color-neutral-400); }

/* ── System category cards — top accent stripe matching icon colour ────── */
/* Phase 76 — added to match institution card top-border behaviour.         */
/* Each colour mirrors the matching .wl-section-icon--cat-* and pill token. */
/* NOTE: space before .wl-card is required — selects descendant, not self.  */
.wl-section:has(.wl-section-icon--cat-baseline)       .wl-card { border-top: 2px solid #7c3aed; }
.wl-section:has(.wl-section-icon--cat-rehab_acute)    .wl-card { border-top: 2px solid #dc2626; }
.wl-section:has(.wl-section-icon--cat-rehab_strength) .wl-card { border-top: 2px solid #2563eb; }
.wl-section:has(.wl-section-icon--cat-return_to_play) .wl-card { border-top: 2px solid #16a34a; }
.wl-section:has(.wl-section-icon--cat-prevention)     .wl-card { border-top: 2px solid #d97706; }
.wl-section:has(.wl-section-icon--cat-baps)           .wl-card { border-top: 2px solid #0d9488; }

/* Institution card — distinguished from return_to_play green with indigo.  */
/* Phase 76 — colour changed from --color-success (#1a7f55 / green) to      */
/* indigo (#4f46e5) so it reads as "yours" vs "clinical protocol".          */
.wl-section:has(.wl-section-icon--custom) .wl-card { border-top: 2px solid #4f46e5; }

/* ── Section icon backgrounds — slightly richer ──────────────────────────── */
.wl-section-icon--star   { background: rgba(245,158,11,0.16) !important; }
.wl-section-icon--recent { background: rgba(70,86,253,0.14) !important; }
.wl-section-icon--system { background: rgba(37,99,235,0.14) !important; }
.wl-section-icon--custom { background: rgba(26,127,85,0.14) !important; }
.wl-section-icon--draft  { background: rgba(107,114,128,0.16) !important; }

/* ── Filter pills — active gets a gradient fill ──────────────────────────── */
.wl-pill--active {
    background: linear-gradient(135deg, #4656FD 0%, #6366f1 100%) !important;
    border-color: #4656FD !important;
    box-shadow: 0 2px 8px rgba(70,86,253,0.30);
}

/* ── Category pills — richer saturation ─────────────────────────────────── */
.wl-cat-balance_holds   { background: rgba(70,86,253,0.12)  !important; }
.wl-cat-lateral_control { background: rgba(26,127,85,0.14)  !important; }
.wl-cat-reactive        { background: rgba(220,38,38,0.12)  !important; }
.wl-cat-endurance       { background: rgba(217,119,6,0.14)  !important; }
.wl-cat-mobility        { background: rgba(37,99,235,0.14)  !important; }

/* ── wl-badge: active badge gets a green gradient glow ──────────────────── */
.wl-badge--active {
    background: rgba(26,127,85,0.14) !important;
    color: #1a7f55 !important;
}
.wl-badge--draft {
    background: rgba(107,114,128,0.14) !important;
}

/* ── wl-btn primary: gradient + subtle shadow ────────────────────────────── */
.wl-btn--primary {
    background: linear-gradient(135deg, #4656FD 0%, #6366f1 100%) !important;
    border-color: #4656FD !important;
    box-shadow: 0 1px 4px rgba(70,86,253,0.28);
}
.wl-btn--primary:hover {
    background: linear-gradient(135deg, #3545e5 0%, #5254cc 100%) !important;
    box-shadow: 0 2px 8px rgba(70,86,253,0.40);
}

/* ── System lock icon ────────────────────────────────────────────────────── */
.wl-system-lock {
    background: rgba(37,99,235,0.08) !important;
    color: var(--color-info) !important;
    border-color: rgba(37,99,235,0.18) !important;
}

/* ── Steps chip ──────────────────────────────────────────────────────────── */
.wl-steps-chip {
    background: rgba(70,86,253,0.08) !important;
    color: var(--color-brand) !important;
}

/* ── Stat tiles on detail page ───────────────────────────────────────────── */
.wd-stat-tile {
    background: var(--color-surface) !important;
    position: relative;
    overflow: hidden;
}
.wd-stat-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}
.wd-stat-tile:first-child::before { background: linear-gradient(90deg, var(--color-brand), #818cf8); }
.wd-stat-tile:last-child::before  { background: linear-gradient(90deg, var(--color-success), #34d399); }

.wd-stat-icon--steps    { background: rgba(70,86,253,0.12) !important; }
.wd-stat-icon--duration { background: rgba(26,127,85,0.12) !important; }

.wd-stat-value {
    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-neutral-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Step cards on detail page ───────────────────────────────────────────── */
.wd-step-card {
    border-left: 3px solid var(--color-neutral-200) !important;
    transition: border-left-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.wd-step-card:hover {
    border-left-color: var(--color-brand) !important;
    box-shadow: var(--shadow-md) !important;
}
.wd-step-number {
    background: linear-gradient(135deg, rgba(70,86,253,0.12) 0%, rgba(99,102,241,0.08) 100%) !important;
    color: var(--color-brand) !important;
    border-color: rgba(70,86,253,0.18) !important;
}
.wd-step-type-badge {
    background: linear-gradient(135deg, rgba(70,86,253,0.10) 0%, rgba(99,102,241,0.08) 100%) !important;
}

/* ── Workout form — step card number badge ───────────────────────────────── */
.wf-step-number-badge {
    background: linear-gradient(135deg, #4656FD 0%, #6366f1 100%) !important;
    box-shadow: 0 1px 4px rgba(70,86,253,0.35) !important;
}

/* ── Assign page — context card accent ───────────────────────────────────── */
.aw-context-card__accent {
    background: linear-gradient(180deg, #4656FD 0%, #818cf8 100%) !important;
}
.aw-context-card__icon {
    background: linear-gradient(135deg, rgba(70,86,253,0.14) 0%, rgba(99,102,241,0.08) 100%) !important;
}

/* ── Plan builder — accent colors ────────────────────────────────────────── */
.pb-action-btn--primary {
    background: linear-gradient(135deg, #4656FD 0%, #6366f1 100%) !important;
    box-shadow: 0 2px 8px rgba(70,86,253,0.28) !important;
}
.pb-plan-item__order-badge {
    background: linear-gradient(135deg, #4656FD 0%, #6366f1 100%) !important;
    box-shadow: 0 1px 4px rgba(70,86,253,0.30) !important;
}
.pb-plan-item__add {
    background: rgba(70,86,253,0.10) !important;
    border-color: rgba(70,86,253,0.20) !important;
}
.pb-plan-item__add:hover {
    background: linear-gradient(135deg, #4656FD 0%, #6366f1 100%) !important;
    box-shadow: 0 1px 4px rgba(70,86,253,0.30) !important;
}
.pb-plan-item {
    border-left: 3px solid var(--color-neutral-200) !important;
    transition: border-left-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}
.pb-plan-item:hover {
    border-left-color: var(--color-brand) !important;
}

/* ── Toolbar action buttons on list page ─────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, #4656FD 0%, #6366f1 100%) !important;
    border-color: #4656FD !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(70,86,253,0.25) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #3545e5 0%, #5254cc 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(70,86,253,0.38) !important;
}

/* ── Table row left accent on hover ─────────────────────────────────────── */
.wl-table tbody tr {
    border-left: 2px solid transparent;
    transition: background var(--transition-fast), border-left-color var(--transition-fast) !important;
}
.wl-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(70,86,253,0.03) 0%, rgba(70,86,253,0.01) 100%) !important;
    border-left-color: rgba(70,86,253,0.30) !important;
}

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
[data-theme="dark"] .balcep-page-header {
    background: linear-gradient(90deg, rgba(70,86,253,0.08) 0%, transparent 60%);
}
[data-theme="dark"] .wd-stat-value {
    -webkit-text-fill-color: rgba(255,255,255,0.92);
    background: none;
}
[data-theme="dark"] .wl-table tbody tr:hover {
    background: rgba(70,86,253,0.06) !important;
}


/* ============================================================
   BALCEP — Dark Mode: wl- / wd- / wf- / st- / pb- / aw-
   Phase: Dark Mode Audit Pass
   All custom scoped classes defined in workout + session
   template pages. Centralised here so light mode is
   untouched and dark overrides are auditable in one place.
   ============================================================ */

/* ── Shared: table cells, card bodies ───────────────────────────────────── */
[data-theme="dark"] .wl-table tbody td {
    color: var(--color-neutral-900);
    border-bottom-color: var(--color-border);
    background: transparent;
}
[data-theme="dark"] .wl-table thead th {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .wl-table tbody tr:hover {
    background: var(--color-neutral-100) !important;
}
[data-theme="dark"] .wl-cell-name a {
    color: var(--color-neutral-900);
}
[data-theme="dark"] .wl-cell-name a:hover { color: var(--color-brand); }
[data-theme="dark"] .wl-cell-muted { color: var(--color-neutral-600); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
[data-theme="dark"] .wl-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

/* ── Section badges / count pills ───────────────────────────────────────── */
[data-theme="dark"] .wl-section-badge {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .wl-tab-count {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .wl-steps-chip {
    background: rgba(70,86,253,0.18);
    color: #818cf8;
}

/* ── Filter pills ────────────────────────────────────────────────────────── */
[data-theme="dark"] .wl-pill {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .wl-pill:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

/* ── System lock ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .wl-system-lock {
    background: rgba(37,99,235,0.12);
    border-color: rgba(37,99,235,0.25);
}

/* ── Category pills ─────────────────────────────────────────────────────── */
[data-theme="dark"] .wl-cat-pill {
    background: var(--color-surface-raised);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .wl-cat-balance_holds   { background: rgba(70,86,253,0.18);  color: #818cf8; }
[data-theme="dark"] .wl-cat-lateral_control { background: rgba(26,127,85,0.18);  color: #4ade80; }
[data-theme="dark"] .wl-cat-reactive        { background: rgba(220,38,38,0.16);  color: #f87171; }
[data-theme="dark"] .wl-cat-endurance       { background: rgba(217,119,6,0.18);  color: #fbbf24; }
[data-theme="dark"] .wl-cat-mobility        { background: rgba(37,99,235,0.18);  color: #60a5fa; }

/* ── Type badges on workout_list ─────────────────────────────────────────── */
[data-theme="dark"] .wl-type-badge--system { background: rgba(37,99,235,0.15); color: #60a5fa; }
[data-theme="dark"] .wl-type-badge--custom { background: rgba(26,127,85,0.15); color: #4ade80; }

/* ── Status badges ───────────────────────────────────────────────────────── */
[data-theme="dark"] .wl-badge--active { background: rgba(26,127,85,0.20); color: #4ade80; }
[data-theme="dark"] .wl-badge--draft  { background: rgba(107,114,128,0.20); color: var(--color-neutral-500); }

/* ── Action buttons ─────────────────────────────────────────────────────── */
[data-theme="dark"] .wl-btn--ghost {
    color: var(--color-neutral-700);
    border-color: var(--color-border);
}
[data-theme="dark"] .wl-btn--ghost:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
    border-color: var(--color-neutral-300);
}
[data-theme="dark"] .wl-btn--fav {
    color: var(--color-neutral-500);
    border-color: var(--color-border);
}

/* ── Toolbar — workout_list search ──────────────────────────────────────── */
[data-theme="dark"] .wl-search-input {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-900);
}
[data-theme="dark"] .wl-result-count { color: var(--color-neutral-500); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .wl-empty {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .wl-empty-icon {
    background: var(--color-surface-raised);
    color: var(--color-neutral-500);
}
[data-theme="dark"] .wl-empty-title { color: var(--color-neutral-900); }
[data-theme="dark"] .wl-empty-sub   { color: var(--color-neutral-600); }

/* ══ wd- Workout Detail ════════════════════════════════════════════════════ */

[data-theme="dark"] .wd-stat-tile {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .wd-stat-label { color: var(--color-neutral-600); }
[data-theme="dark"] .wd-stat-value {
    color: var(--color-neutral-900);
    background: none;
    -webkit-text-fill-color: var(--color-neutral-900);
    background-clip: unset;
    -webkit-background-clip: unset;
}
[data-theme="dark"] .wd-field-card-header {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .wd-field-row {
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .wd-field-label { color: var(--color-neutral-600); }
[data-theme="dark"] .wd-field-value { color: var(--color-neutral-900); }
[data-theme="dark"] .wd-step-card {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-left-color: var(--color-border);
}
[data-theme="dark"] .wd-step-card:hover { border-left-color: var(--color-brand); }
[data-theme="dark"] .wd-step-number {
    background: rgba(70,86,253,0.18);
    color: #818cf8;
    border-color: rgba(70,86,253,0.25);
}
[data-theme="dark"] .wd-step-title  { color: var(--color-neutral-900); }
[data-theme="dark"] .wd-step-type-badge {
    background: rgba(70,86,253,0.18);
    color: #818cf8;
}
[data-theme="dark"] .wd-step-meta-chip {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .wd-step-instructions { color: var(--color-neutral-600); border-top-color: var(--color-border); }
[data-theme="dark"] .wd-meta-chip {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .wd-meta-text { color: var(--color-neutral-700); }
[data-theme="dark"] .wd-meta-sep  { color: var(--color-neutral-500); }

/* ══ wf- Workout Form ══════════════════════════════════════════════════════ */

[data-theme="dark"] .wf-section-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .wf-section-card-header {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .wf-section-card-body { background: var(--color-surface); }
[data-theme="dark"] .wf-label      { color: var(--color-neutral-900); }
[data-theme="dark"] .wf-label--muted { color: var(--color-neutral-600); }
[data-theme="dark"] .wf-step-card  {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .wf-step-card-header {
    background: var(--color-surface-raised);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .wf-step-label { color: var(--color-neutral-900); }
[data-theme="dark"] .wf-step-card-body { background: var(--color-surface); }
[data-theme="dark"] .wf-chip {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .wf-chip:hover,
[data-theme="dark"] .wf-chip.active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}
[data-theme="dark"] .wf-form-footer { border-top-color: var(--color-border); }
[data-theme="dark"] .wf-steps-header { color: var(--color-neutral-900); }
[data-theme="dark"] .wf-exercise-block {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
}
[data-theme="dark"] .wf-exercise-block-label { color: var(--color-neutral-600); }
[data-theme="dark"] .wf-page-header { color: var(--color-neutral-900); }
[data-theme="dark"] .wf-subtitle    { color: var(--color-neutral-600); }

/* wf- divider */
[data-theme="dark"] .wf-divider { color: var(--color-neutral-600); }
[data-theme="dark"] .wf-divider::before,
[data-theme="dark"] .wf-divider::after { background: var(--color-border); }
[data-theme="dark"] .wf-required { color: var(--color-danger); }
[data-theme="dark"] .wf-optional { color: var(--color-neutral-600); }
[data-theme="dark"] .wf-params-grid { background: transparent; }

/* ══ aw- Assign Workout ════════════════════════════════════════════════════ */

[data-theme="dark"] .aw-context-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .aw-context-card__name    { color: var(--color-neutral-900); }
[data-theme="dark"] .aw-context-card__meta    { color: var(--color-neutral-600); }
[data-theme="dark"] .aw-context-card__desc    {
    color: var(--color-neutral-700);
    border-top-color: var(--color-border);
}
[data-theme="dark"] .aw-context-card__icon {
    background: rgba(70,86,253,0.18);
    color: #818cf8;
}

/* ══ wg- Assign Group ══════════════════════════════════════════════════════ */

[data-theme="dark"] .wg-athlete-row { color: var(--color-neutral-900); }
[data-theme="dark"] .wg-athlete-row:hover { background: var(--color-neutral-100); }
[data-theme="dark"] .wg-athlete-name { color: var(--color-neutral-900); }
[data-theme="dark"] .wg-athlete-meta { color: var(--color-neutral-600); }
[data-theme="dark"] .wg-count        { color: var(--color-neutral-500); }

/* ══ pb- Plan Builder ══════════════════════════════════════════════════════ */

[data-theme="dark"] .pb-topbar,
[data-theme="dark"] .pb-metabar {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .pb-plan-name-input { color: var(--color-neutral-900); }
[data-theme="dark"] .pb-plan-name-input::placeholder { color: var(--color-neutral-400); }
[data-theme="dark"] .pb-meta-input { color: var(--color-neutral-900); border-bottom-color: transparent; }
[data-theme="dark"] .pb-meta-input::placeholder { color: var(--color-neutral-400); }
[data-theme="dark"] .pb-meta-label  { color: var(--color-neutral-600); }
[data-theme="dark"] .pb-meta-stat-value { color: var(--color-neutral-900); }
[data-theme="dark"] .pb-meta-stat-label { color: var(--color-neutral-600); }
[data-theme="dark"] .pb-back-btn {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .pb-picker {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .pb-picker__header { border-color: var(--color-border); }
[data-theme="dark"] .pb-picker__title  { color: var(--color-neutral-600); }
[data-theme="dark"] .pb-picker__count  { background: var(--color-surface-raised); color: var(--color-neutral-600); }
[data-theme="dark"] .pb-picker__search {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-900);
}
[data-theme="dark"] .pb-picker-item:hover { background: var(--color-neutral-100); }
[data-theme="dark"] .pb-picker-item__name { color: var(--color-neutral-900); }
[data-theme="dark"] .pb-picker-item__mode { color: var(--color-neutral-600); }
[data-theme="dark"] .pb-timeline { background: var(--color-neutral-50); }
[data-theme="dark"] .pb-timeline__header {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .pb-timeline__title { color: var(--color-neutral-600); }
[data-theme="dark"] .pb-timeline__hint  { color: var(--color-neutral-500); }
[data-theme="dark"] .pb-plan-item {
    background: var(--color-surface);
    border-color: var(--color-border);
    border-left-color: var(--color-border);
}
[data-theme="dark"] .pb-plan-item:hover { border-left-color: var(--color-brand); }
[data-theme="dark"] .pb-plan-item__name { color: var(--color-neutral-900); }
[data-theme="dark"] .pb-plan-item__mode {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .pb-plan-item__drag { color: var(--color-neutral-400); }
[data-theme="dark"] .pb-plan-item__field label { color: var(--color-neutral-600); }
[data-theme="dark"] .pb-plan-item__field input {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-900);
}
[data-theme="dark"] .pb-empty-state__icon {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-500);
}
[data-theme="dark"] .pb-empty-state__title { color: var(--color-neutral-900); }
[data-theme="dark"] .pb-empty-state__sub   { color: var(--color-neutral-600); }
[data-theme="dark"] .pb-status-select {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .pb-action-btn--ghost {
    color: var(--color-neutral-700);
    border-color: var(--color-border);
}
[data-theme="dark"] .pb-action-btn--ghost:hover {
    background: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

/* ══ st- Session Templates List ════════════════════════════════════════════ */

[data-theme="dark"] .st-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .st-card:hover { border-color: var(--color-neutral-300); }
[data-theme="dark"] .st-card__footer {
    background: var(--color-surface-raised);
    border-top-color: var(--color-border);
}
[data-theme="dark"] .st-card__name    { color: var(--color-neutral-900); }
[data-theme="dark"] .st-card__type-label { color: var(--color-neutral-600); }
[data-theme="dark"] .st-card__notes  {
    color: var(--color-neutral-600);
    border-top-color: var(--color-border);
}
[data-theme="dark"] .st-chip {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .st-chip--time {
    background: rgba(70,86,253,0.18);
    border-color: rgba(70,86,253,0.25);
    color: #818cf8;
}
[data-theme="dark"] .st-chip--time svg { color: #818cf8; }
[data-theme="dark"] .st-stats-bar {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .st-stats-bar__div { background: var(--color-border); }
[data-theme="dark"] .st-stat__value    { color: var(--color-neutral-900); }
[data-theme="dark"] .st-stat__label    { color: var(--color-neutral-600); }
[data-theme="dark"] .st-page-header    { color: var(--color-neutral-900); }
[data-theme="dark"] .st-subtitle       { color: var(--color-neutral-600); }
[data-theme="dark"] .st-empty-hero {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .st-empty-hero__title { color: var(--color-neutral-900); }
[data-theme="dark"] .st-empty-hero__sub   { color: var(--color-neutral-600); }
[data-theme="dark"] .st-ghost-card  {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .st-ghost-row  { background: var(--color-surface-raised); }
[data-theme="dark"] .st-ghost-chip { background: var(--color-surface-raised); }
[data-theme="dark"] .st-ghost-card__footer {
    background: var(--color-surface-raised);
    border-top-color: var(--color-border);
}

/* ══ stf- Session Template Form ════════════════════════════════════════════ */

[data-theme="dark"] .stf-section-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .stf-section-header {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .stf-section-body { background: var(--color-surface); }
[data-theme="dark"] .stf-chip {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-700);
}
[data-theme="dark"] .stf-chip:hover,
[data-theme="dark"] .stf-chip.active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}
[data-theme="dark"] .stf-preview-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}
[data-theme="dark"] .stf-preview-card__header {
    background: var(--color-surface-raised);
    border-bottom-color: var(--color-border);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .stf-preview-name { color: var(--color-neutral-900); }
[data-theme="dark"] .stf-preview-type { color: var(--color-neutral-600); }
[data-theme="dark"] .stf-preview-chip {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .stf-preview-notes {
    background: var(--color-surface-raised);
    border-color: var(--color-border);
    color: var(--color-neutral-600);
}
[data-theme="dark"] .stf-preview-hint { color: var(--color-neutral-500); }
[data-theme="dark"] .stf-field-row { background: transparent; }
[data-theme="dark"] .wf-field-group .wf-label { color: var(--color-neutral-900); }

/* ══ std- Session Template Detail ══════════════════════════════════════════ */

[data-theme="dark"] .std-field-header {
    background: var(--color-surface-raised);
    color: var(--color-neutral-600);
    border-bottom-color: var(--color-border);
}
[data-theme="dark"] .std-card-accent--no_touch { opacity: 0.85; }
[data-theme="dark"] .std-card-accent--intentional_touch { opacity: 0.85; }
[data-theme="dark"] .st-type-chip--no_touch {
    background: rgba(70,86,253,0.18);
    color: #818cf8;
}
[data-theme="dark"] .st-type-chip--intentional_touch {
    background: rgba(26,127,85,0.18);
    color: #4ade80;
}

/* ══ balcep-page-header gradient — dark mode ════════════════════════════════ */
[data-theme="dark"] .balcep-page-header {
    background: linear-gradient(90deg, rgba(70,86,253,0.08) 0%, transparent 60%);
    border-left-color: var(--color-brand);
}
[data-theme="dark"] .balcep-page-title { color: var(--color-neutral-900); }
[data-theme="dark"] .wl-page-subtitle  { color: var(--color-neutral-600); }

/* ── page section titles / subtitles that lost color ────────────────────── */
[data-theme="dark"] .wl-section-title  { color: var(--color-neutral-900); }
[data-theme="dark"] .wl-filter-label   { color: var(--color-neutral-600); }


/* ============================================================
   BALCEP — Session Results: sm-tile + zd- Dark Mode Contrast Pass
   Fixes: grey-on-dark text, invisible zone hover tints,
   low-contrast tile borders and sub-labels.
   ============================================================ */

/* ── sm-tile: Secondary metrics tiles ───────────────────────────────────── */

[data-theme="dark"] .sm-tile {
    background: var(--color-surface-raised);
    border: 1px solid rgba(255,255,255,0.10);
}
[data-theme="dark"] .sm-tile:hover {
    border-color: rgba(255,255,255,0.20);
    box-shadow: 0 2px 12px rgba(0,0,0,0.30);
}
/* Lift sub-labels from muted grey to clearly readable */
[data-theme="dark"] .sm-tile-label {
    color: rgba(255,255,255,0.55);
}
[data-theme="dark"] .sm-tile-value {
    color: rgba(255,255,255,0.95);
}
[data-theme="dark"] .sm-tile-sub {
    color: rgba(255,255,255,0.50);
}

/* ── sm-decay-segments ───────────────────────────────────────────────────── */
[data-theme="dark"] .sm-decay-seg {
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.10);
}
[data-theme="dark"] .sm-decay-seg--warn {
    background: rgba(245,158,11,0.14);
    border-color: rgba(245,158,11,0.30);
}
[data-theme="dark"] .sm-decay-seg-title { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .sm-decay-seg-val   { color: rgba(255,255,255,0.92); }
[data-theme="dark"] .sm-decay-seg-rate  { color: rgba(255,255,255,0.45); }

/* ── zd-callout-row: Zone distribution rows ─────────────────────────────── */

/* Dark mode: rows are invisible at rest — no border, no background.
   The list reads as clean text, matching the light-mode feel.
   The JS hover handler applies background tint + colored border inline
   so the active row still pops. Border transition is kept so the
   color fades in smoothly rather than snapping. */
[data-theme="dark"] .zd-callout-row {
    background: transparent !important;
    border-color: transparent !important;
}
[data-theme="dark"] .zd-callout-row:hover,
[data-theme="dark"] .zd-callout-row.is-active {
    transform: translateX(4px);
}
[data-theme="dark"] .zd-callout-label {
    color: rgba(255,255,255,0.50);
}
[data-theme="dark"] .zd-callout-value {
    color: rgba(255,255,255,0.95);
    font-weight: 700;
}
[data-theme="dark"] .zd-callout-name {
    color: rgba(255,255,255,0.48);
}

/* ── zd-strip: Interpretation bar below zone chart ──────────────────────── */
[data-theme="dark"] #zd-strip {
    background: rgba(70,86,253,0.12) !important;
    border-left-color: rgba(70,86,253,0.50) !important;
}
[data-theme="dark"] #zd-strip-text {
    color: rgba(255,255,255,0.72) !important;
}

/* ── sr-secondary-item tiles (inside secondary metrics grid) ────────────── */
[data-theme="dark"] .sr-secondary-item {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .sr-secondary-label { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .sr-secondary-value { color: rgba(255,255,255,0.95); }

/* ── sr-stat-card: True Time in Air / Touch / Duration ─────────────────── */
[data-theme="dark"] .sr-stat-card {
    background: var(--color-surface-raised);
    border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .stat-label   { color: rgba(255,255,255,0.50); }
[data-theme="dark"] .sr-stat-context   { color: rgba(255,255,255,0.42); }
[data-theme="dark"] .sr-stat-benchmark {
    color: rgba(255,255,255,0.38);
    border-top-color: rgba(255,255,255,0.10);
}
/* Keep the coloured values visible — slightly brighter in dark */
[data-theme="dark"] .sr-stat-air      .sr-stat-value { color: #818cf8; }
[data-theme="dark"] .sr-stat-touch    .sr-stat-value { color: #fbbf24; }
[data-theme="dark"] .sr-stat-duration .sr-stat-value { color: #34d399; }

/* ── sr-section-title ───────────────────────────────────────────────────── */
[data-theme="dark"] .sr-section-title { color: rgba(255,255,255,0.45); }

/* ── sr-balance-trace footer ────────────────────────────────────────────── */
[data-theme="dark"] .sr-balance-trace-footer { color: rgba(255,255,255,0.38); }
[data-theme="dark"] .sr-balance-trace-title  { color: rgba(255,255,255,0.45); }

/* ── Baseline disclaimer ────────────────────────────────────────────────── */
[data-theme="dark"] .baseline-disclaimer {
    background: rgba(70,86,253,0.10);
    border-color: rgba(70,86,253,0.30);
}
[data-theme="dark"] .baseline-disclaimer__text { color: rgba(255,255,255,0.68); }


/* ============================================================
   BALCEP — Dark Mode: Global text brightness pass
   Forces all muted/secondary text to be genuinely readable
   white on dark surfaces. No more grey-on-dark.
   ============================================================ */

/* Override the secondary text token itself in dark mode so every
   component that uses var(--color-text-secondary) gets bright text */
[data-theme="dark"] {
    --color-text-secondary: rgba(255,255,255,0.70);
}

/* Boost sm-tile labels and subs to full visible white */
[data-theme="dark"] .sm-tile-label {
    color: rgba(255,255,255,0.70) !important;
}
[data-theme="dark"] .sm-tile-sub {
    color: rgba(255,255,255,0.65) !important;
}

/* Zone callout rows — brighter labels */
[data-theme="dark"] .zd-callout-label {
    color: rgba(255,255,255,0.65) !important;
}
[data-theme="dark"] .zd-callout-name {
    color: rgba(255,255,255,0.60) !important;
}

/* sr-stat context / benchmark lines */
[data-theme="dark"] .sr-stat-context {
    color: rgba(255,255,255,0.60) !important;
}
[data-theme="dark"] .sr-stat-benchmark {
    color: rgba(255,255,255,0.55) !important;
    border-top-color: rgba(255,255,255,0.10) !important;
}

/* sr-section-title — card sub-headings */
[data-theme="dark"] .sr-section-title {
    color: rgba(255,255,255,0.65) !important;
}

/* sr-secondary labels */
[data-theme="dark"] .sr-secondary-label {
    color: rgba(255,255,255,0.60) !important;
}

/* Balance trace text */
[data-theme="dark"] .sr-balance-trace-title {
    color: rgba(255,255,255,0.65) !important;
}
[data-theme="dark"] .sr-balance-trace-footer {
    color: rgba(255,255,255,0.55) !important;
}

/* Card description text (inline style overrides via data attribute not possible,
   so target the known element structure) */
[data-theme="dark"] .card-body > div[style*="color:var(--color-text-secondary"],
[data-theme="dark"] .card-body > div[style*="color: var(--color-text-secondary"] {
    color: rgba(255,255,255,0.65) !important;
}

/* si- field labels and time labels */
[data-theme="dark"] .si-field-label,
[data-theme="dark"] .si-time-label,
[data-theme="dark"] .si-notes-label {
    color: rgba(255,255,255,0.60) !important;
}
[data-theme="dark"] .si-time-value {
    color: rgba(255,255,255,0.70) !important;
}
[data-theme="dark"] .si-header-title {
    color: rgba(255,255,255,0.92) !important;
}

/* sm-decay segment titles */
[data-theme="dark"] .sm-decay-seg-title {
    color: rgba(255,255,255,0.60) !important;
}
[data-theme="dark"] .sm-decay-seg-rate {
    color: rgba(255,255,255,0.55) !important;
}

/* stat-label (True Time in Air etc) */
[data-theme="dark"] .stat-label {
    color: rgba(255,255,255,0.65) !important;
}

/* text-muted Bootstrap override in dark */
[data-theme="dark"] .text-muted {
    color: rgba(255,255,255,0.55) !important;
}

/* list-group-item Bootstrap override in dark — prevents white rows inside dark cards */
[data-theme="dark"] .list-group-item {
    background-color: var(--color-surface-2, #161b22) !important;
    border-color: var(--color-border, #21262d) !important;
    color: var(--color-text-primary, #e6edf3) !important;
}
[data-theme="dark"] .list-group-item:hover {
    background-color: rgba(70, 86, 253, 0.06) !important;
}


/* ============================================================
   Session List (sl-) Component Styles
   Moved from inline <style> in session_list.html — Phase 75.
   Previously embedded per-request as 58 KB of inline CSS.
   Now cached by the browser as part of design_system.css.
   ============================================================ */

/* ── Stat bar ───────────────────────────────────────────────
   Identical grid structure to .al-stat-bar on athlete_list.
   Prefixed sl- (session list) to avoid class collisions.   */
.sl-stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.sl-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sl-stat-card:hover {
  box-shadow: 0 4px 16px rgba(70,86,253,0.10);
  transform: translateY(-1px);
}
.sl-stat-card__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 15px;
}
.sl-stat-card__icon--brand   { background: rgba(70,86,253,0.10);  color: var(--color-brand); }
.sl-stat-card__icon--green   { background: rgba(16,185,129,0.10); color: #10b981; }
.sl-stat-card__icon--amber   { background: rgba(245,158,11,0.10); color: #f59e0b; }
.sl-stat-card__icon--blue    { background: rgba(59,130,246,0.10); color: #3b82f6; }
.sl-stat-card__value {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
  line-height: 1;
  letter-spacing: -0.5px;
}
.sl-stat-card__label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  margin-top: 2px;
}
/* Live session card — green pulse when in-progress count > 0 */
.sl-stat-card--live  { border-color: rgba(16,185,129,0.35); }
.sl-stat-card--live:hover { box-shadow: 0 4px 16px rgba(16,185,129,0.15); }
.sl-stat-card__value--live { color: #059669; }
/* Secondary card — reduced visual weight for aggregate counts */
.sl-stat-card--secondary { opacity: 0.7; }
.sl-stat-card__value--secondary { font-size: clamp(20px, 2.2vw, 26px); }
/* Session row urgency borders — same left-border pattern as athlete list */
.sl-row--declining td:first-child { border-left: 3px solid #dc2626; padding-left: 13px; }
.sl-row--improving td:first-child { border-left: 3px solid #10b981; padding-left: 13px; }
.sl-row--live      td:first-child { border-left: 3px solid #3b82f6; padding-left: 13px; }

/* ── Filter toolbar ─────────────────────────────────────────*/
.sl-toolbar {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
}
@media (max-width: 1000px) {
  .sl-toolbar { flex-wrap: wrap; }
  .sl-toolbar-divider { display: none; }
  .sl-search-wrap { flex: 1 1 100%; }
}
@media (max-width: 1050px) { .sl-col-baseline { display: none; } }
@media (max-width: 900px)  { .sl-col-type     { display: none; } }
/* ── Trend tooltip ──────────────────────────────────────────*/
#slTrendTooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  width: 224px;
}
#slTrendTooltip.sl-tt--visible { opacity: 1; transform: translateY(0); }
.sl-tt-card {
  background: rgba(15, 18, 36, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 13px 15px 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.20);
  color: #fff;
}
.sl-tt-header { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.sl-tt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sl-tt-dot--up     { background: #34d399; }
.sl-tt-dot--down   { background: #f87171; }
.sl-tt-dot--stable { background: #fbbf24; }
.sl-tt-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.sl-tt-label--up     { color: #34d399; }
.sl-tt-label--down   { color: #f87171; }
.sl-tt-label--stable { color: #fbbf24; }
.sl-tt-scores { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.sl-tt-score-val { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }
.sl-tt-score-label { font-size: 10px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.sl-tt-arrow { font-size: 14px; color: rgba(255,255,255,0.30); flex-shrink: 0; }
.sl-tt-delta-row { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.sl-tt-delta-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; }
.sl-tt-delta-badge--up     { background: rgba(52,211,153,0.15); color: #34d399; }
.sl-tt-delta-badge--down   { background: rgba(248,113,113,0.15); color: #f87171; }
.sl-tt-delta-badge--stable { background: rgba(251,191,36,0.15); color: #fbbf24; }
.sl-tt-threshold { font-size: 10.5px; color: rgba(255,255,255,0.35); }
.sl-tt-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 9px 0; }
.sl-tt-reason { font-size: 11.5px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.sl-tt-reason strong { color: rgba(255,255,255,0.90); font-weight: 600; }
/* ── Search wrap ────────────────────────────────────────────*/
.sl-search-wrap { position: relative; flex: 1 1 220px; min-width: 180px; }
.sl-search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--color-neutral-400); pointer-events: none; }
.sl-search-wrap input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--color-surface);
  color: var(--color-neutral-900);
  outline: none;
  transition: border-color 0.15s;
}
.sl-search-wrap input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(70,86,253,0.10); }

/* ── Toolbar selects ────────────────────────────────────────*/
.sl-toolbar select {
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--color-surface);
  color: var(--color-neutral-700);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  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='%2394a3b8' stroke-width='2.5' 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 10px center;
  transition: border-color 0.15s;
  min-width: 110px;
}
.sl-toolbar select:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(70,86,253,0.10); }
.sl-toolbar-divider { width: 1px; height: 22px; background: var(--color-neutral-200); flex-shrink: 0; }
.sl-btn-filter {
  padding: 8px 18px;
  background: var(--color-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.sl-btn-filter:hover { opacity: 0.88; }
.sl-btn-clear {
  padding: 8px 14px;
  background: transparent;
  color: var(--color-neutral-500);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.15s, color 0.15s;
}
.sl-btn-clear:hover { border-color: var(--color-brand); color: var(--color-brand); }
/* ── Table card ─────────────────────────────────────────────*/
.sl-table-card { background: var(--color-surface); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sl-table-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sl-table-card thead th { padding: 10px; background: var(--color-neutral-50, #f8fafc); font-size: 10.5px; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-neutral-500); border-bottom: 1px solid var(--color-neutral-200); white-space: nowrap; }
.sl-table-card thead th:first-child { padding-left: 16px; }
.sl-table-card thead th:last-child  { padding-right: 16px; text-align: right; }
.sl-table-card tbody tr { border-bottom: 1px solid var(--color-neutral-100, #f1f5f9); transition: background 0.12s; }
.sl-table-card tbody tr:last-child { border-bottom: none; }
.sl-table-card tbody tr:hover { background: rgba(70,86,253,0.03); }
.sl-table-card tbody td { padding: 11px 10px; color: var(--color-neutral-700); vertical-align: middle; }
.sl-table-card tbody td:first-child { padding-left: 16px; }
.sl-table-card tbody td:last-child  { padding-right: 16px; }

/* ── Athlete cell ───────────────────────────────────────────*/
.sl-athlete-cell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sl-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--font-weight-bold); color: #fff; flex-shrink: 0; letter-spacing: 0.02em; }
.av-0 { background: #4656FD; }
.av-1 { background: #ea580c; }
.av-2 { background: #16a34a; }
.av-3 { background: #7c3aed; }
.av-4 { background: #dc2626; }
.av-5 { background: #0891b2; }
.av-6 { background: #ca8a04; }
.av-7 { background: #be185d; }
.sl-athlete-name { font-weight: var(--font-weight-semibold); color: var(--color-neutral-900); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.sl-athlete-name:hover { color: var(--color-brand); }
.sl-athlete-sub { font-size: 11px; color: var(--color-neutral-400); margin-top: 1px; white-space: nowrap; }

/* ── Status pill ────────────────────────────────────────────*/
.sl-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: var(--font-weight-medium); white-space: nowrap; }
.sl-status__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sl-status--completed   .sl-status__dot { background: var(--color-success); }
.sl-status--in_progress .sl-status__dot { background: var(--color-warning); }
.sl-status--aborted     .sl-status__dot { background: var(--color-danger); }
/* ── Baseline badge ─────────────────────────────────────────*/
.sl-baseline-set { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: var(--font-weight-semibold); background: rgba(16,185,129,0.10); color: #059669; white-space: nowrap; }
.sl-baseline-none { color: var(--color-neutral-400); font-size: 13px; }

/* ── Trend pill ─────────────────────────────────────────────*/
.sl-trend { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: var(--font-weight-semibold); white-space: nowrap; }
.sl-trend--up     { background: rgba(16,185,129,0.10); color: #059669; }
.sl-trend--down   { background: rgba(220,38,38,0.10);  color: var(--color-danger); }
.sl-trend--stable { background: rgba(245,158,11,0.10); color: #d97706; }
.sl-trend--none   { background: var(--color-neutral-100); color: var(--color-neutral-400); }

/* ── Action buttons ─────────────────────────────────────────*/
.sl-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: nowrap; }
.sl-btn { padding: 4px 10px; border-radius: var(--radius-md); font-size: 11.5px; font-weight: var(--font-weight-semibold); cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: all 0.15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.sl-btn--primary { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.sl-btn--primary:hover { opacity: 0.88; color: #fff; }
.sl-btn--ghost { background: transparent; color: var(--color-neutral-600); border-color: var(--color-neutral-200); }
.sl-btn--ghost:hover { border-color: var(--color-brand); color: var(--color-brand); }

/* ── Empty state ────────────────────────────────────────────*/
.sl-empty { padding: 56px 24px; text-align: center; }
.sl-empty__icon { width: 52px; height: 52px; background: rgba(70,86,253,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 22px; }
.sl-empty__title { font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-neutral-800); margin-bottom: 6px; }
.sl-empty__sub { font-size: 13px; color: var(--color-neutral-400); }

/* ── Pagination ─────────────────────────────────────────────*/
.sl-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 13px 18px 14px; border-top: 1px solid var(--color-neutral-100); font-size: 12.5px; color: var(--color-neutral-500); }
.sl-pagination-controls { display: flex; align-items: center; gap: 5px; }
.sl-page-btn { padding: 4px 11px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); background: transparent; color: var(--color-neutral-600); font-size: 12px; font-weight: var(--font-weight-semibold); text-decoration: none; transition: border-color 0.15s, color 0.15s; }
.sl-page-btn:hover { border-color: var(--color-brand); color: var(--color-brand); }
.sl-page-btn--disabled { opacity: 0.35; pointer-events: none; }

/* ── Count badge ────────────────────────────────────────────*/
.sl-count-badge { display: inline-flex; align-items: center; padding: 3px 10px; background: rgba(70,86,253,0.09); color: var(--color-brand); border-radius: 99px; font-size: 12px; font-weight: var(--font-weight-semibold); margin-left: 10px; vertical-align: middle; position: relative; top: -1px; }

/* ── Responsive ─────────────────────────────────────────────*/
@media (max-width: 900px)  { .sl-stat-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .sl-stat-bar { grid-template-columns: 1fr; } }