/* ============================================================
   EdEquity Design System — Chart & Data Storytelling
   Version: 1.0.0

   Inspired by The Economist, FT (John Burn-Murdoch), and
   Edward Tufte. Charts tell stories, not just display data.

   Usage: <link rel="stylesheet" href="/static/ee-design-system.css">
   ============================================================ */

/* -----------------------------------------------------------
   1. DESIGN TOKENS
   ----------------------------------------------------------- */
:root {
    /* Brand */
    --ee-blue:          #0C5EE2;
    --ee-blue-dark:     #0A4FC0;
    --ee-blue-light:    #DBEAFE;
    --ee-blue-lighter:  #EFF6FF;
    --ee-green:         #02E29C;
    --ee-green-dark:    #029E7A;
    --ee-green-a11y:    #008A60;   /* WCAG AA on white — use on charts */
    --ee-navy:          #0F172A;

    /* Semantic */
    --ee-error:         #DC2626;
    --ee-error-light:   #FEE2E2;
    --ee-warning:       #F59E0B;
    --ee-warning-light: #FEF3C7;
    --ee-success:       #008A60;
    --ee-success-light: #D1FAE5;

    /* Performance intensity (replaces RAG — single-hue blue scale) */
    --ee-perf-strong:   #0C5EE2;   /* Above benchmark (full brand blue) */
    --ee-perf-expected: #60A5FA;   /* Near benchmark (mid blue) */
    --ee-perf-below:    #BFDBFE;   /* Below benchmark (light blue) */

    /* RAG aliases (backward compat — mapped to performance scale) */
    --ee-rag-red:       #BFDBFE;
    --ee-rag-amber:     #60A5FA;
    --ee-rag-green:     #0C5EE2;

    /* Neutrals */
    --ee-text:          #1A1A1A;
    --ee-text-secondary:#424242;
    --ee-text-muted:    #6B7280;
    --ee-text-light:    #9CA3AF;
    --ee-border:        #E5E7EB;
    --ee-border-light:  #F0F0F0;
    --ee-bg:            #FAFAFA;
    --ee-bg-grey:       #F3F4F6;
    --ee-surface:       #FFFFFF;

    /* Chart-specific */
    --ee-chart-title:   #333333;
    --ee-chart-subtitle:#595959;
    --ee-chart-label:   #595959;
    --ee-chart-value:   #333333;
    --ee-chart-grid:    #E0E0E0;
    --ee-chart-annotation: #757575;
    --ee-tooltip-bg:    #1A1A2E;
    --ee-tooltip-text:  #FFFFFF;

    /* Chart Series — ordered, use in this sequence */
    --ee-series-1:      #0C5EE2;   /* Brand blue — focal group */
    --ee-series-2:      #40C4AA;   /* Teal — comparator group */
    --ee-series-3:      #8B8FA3;   /* Slate — context/benchmark */
    --ee-series-4:      #E8913A;   /* Warm amber — third series */
    --ee-series-5:      #6366F1;   /* Indigo — fourth series */
    --ee-series-6:      #A78BFA;   /* Lavender — fifth series */

    /* Attendance domain */
    --ee-presence:      #0C5EE2;
    --ee-absence:       #E8913A;   /* Warm amber (aligned with palette) */
    --ee-auth-absence:  #E8913A;
    --ee-unauth-absence:#6366F1;   /* Indigo — distinct from auth */

    /* Comparison (2-series: focus + comparator) */
    --ee-primary-bar:   #0C5EE2;   /* Brand blue — focal group */
    --ee-context-bar:   #40C4AA;   /* Teal — comparator */

    /* Sequential blue palette */
    --ee-seq-1:         #DBEAFE;
    --ee-seq-2:         #93C5FD;
    --ee-seq-3:         #3B82F6;
    --ee-seq-4:         #0C5EE2;
    --ee-seq-5:         #1E3A8A;

    /* Diverging palette (below ↔ above benchmark) */
    --ee-div-neg-strong:#E8913A;   /* Warm amber (strong below) */
    --ee-div-neg:       #F5C78E;   /* Light amber */
    --ee-div-neutral:   #E5E7EB;
    --ee-div-pos:       #93C5FD;   /* Light blue */
    --ee-div-pos-strong:#0C5EE2;   /* Brand blue (strong above) */

    /* Typography */
    --ee-font:          'Aptos', 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ee-font-mono:     'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

    /* Spacing */
    --ee-space-xs:      4px;
    --ee-space-sm:      8px;
    --ee-space-md:      16px;
    --ee-space-lg:      24px;
    --ee-space-xl:      32px;
    --ee-space-2xl:     48px;
    --ee-card-gap:      16px;
    --ee-section-gap:   32px;

    /* Radii */
    --ee-radius-sm:     6px;
    --ee-radius:        10px;
    --ee-radius-lg:     12px;
    --ee-radius-pill:   100px;

    /* Shadows */
    --ee-shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.08);
    --ee-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
    --ee-shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --ee-transition:    150ms ease;
    --ee-transition-slow: 300ms ease;
}

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

body {
    font-family: var(--ee-font);
    background: var(--ee-bg);
    color: var(--ee-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------
   3. HEADER / NAVIGATION
   ----------------------------------------------------------- */
.ee-header {
    background: var(--ee-surface);
    border-bottom: 1px solid var(--ee-border);
    padding: 14px var(--ee-space-xl);
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    box-shadow: var(--ee-shadow-sm);
    position: relative;
}

/* Brand accent stripe — Economist-style */
.ee-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ee-blue) 0%, var(--ee-green) 100%);
}

.ee-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--ee-blue), var(--ee-blue-dark));
    border-radius: var(--ee-radius);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 16px;
    flex-shrink: 0;
}

.ee-header h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ee-text);
}

.ee-header .ee-subtitle {
    font-size: 13px;
    color: var(--ee-text-muted);
}

.ee-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--ee-space-sm);
}

.ee-nav-link {
    color: var(--ee-text-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--ee-radius-sm);
    transition: var(--ee-transition);
}
.ee-nav-link:hover {
    background: var(--ee-bg);
    color: var(--ee-text);
}
.ee-nav-link.active {
    background: var(--ee-blue-lighter);
    color: var(--ee-blue);
    font-weight: 600;
}

.ee-select {
    padding: 6px 12px;
    border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius-sm);
    font-size: 13px;
    font-family: var(--ee-font);
    background: var(--ee-surface);
    color: var(--ee-text-secondary);
    cursor: pointer;
    transition: var(--ee-transition);
    outline: none;
}
.ee-select:hover { border-color: var(--ee-blue); }
.ee-select:focus { border-color: var(--ee-blue); box-shadow: 0 0 0 2px var(--ee-blue-light); }

.ee-btn {
    padding: 6px 14px;
    border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius-sm);
    font-size: 13px;
    font-family: var(--ee-font);
    font-weight: 500;
    color: var(--ee-text-muted);
    background: var(--ee-surface);
    cursor: pointer;
    transition: var(--ee-transition);
}
.ee-btn:hover { border-color: var(--ee-blue); color: var(--ee-blue); }
.ee-btn--danger:hover { border-color: var(--ee-error); color: var(--ee-error); }
.ee-btn--primary { background: var(--ee-blue); color: white; border-color: var(--ee-blue); }
.ee-btn--primary:hover { background: var(--ee-blue-dark); }

/* -----------------------------------------------------------
   4. PAGE LAYOUT
   ----------------------------------------------------------- */
.ee-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--ee-space-lg) var(--ee-space-xl);
}

.ee-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ee-chart-title);
    margin-bottom: var(--ee-space-xs);
    line-height: 1.2;
}

.ee-page-subtitle {
    font-size: 15px;
    color: var(--ee-chart-subtitle);
    margin-bottom: var(--ee-space-lg);
}

.ee-source {
    font-size: 12px;
    color: var(--ee-text-light);
    margin-top: var(--ee-space-lg);
    padding-top: var(--ee-space-md);
    border-top: 1px solid var(--ee-border-light);
}

/* -----------------------------------------------------------
   5. KPI TILES — The 2-Second Summary
   ----------------------------------------------------------- */
.ee-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--ee-card-gap);
    margin-bottom: var(--ee-space-lg);
}

.ee-kpi {
    background: var(--ee-surface);
    border: 1px solid var(--ee-border);
    border-radius: var(--ee-radius);
    padding: 16px 20px;
    box-shadow: var(--ee-shadow-sm);
    position: relative;
    overflow: hidden;
}

/* Subtle left accent border */
.ee-kpi::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ee-blue);
}

/* Performance intensity KPI accents */
.ee-kpi--strong::before { background: var(--ee-perf-strong); }
.ee-kpi--expected::before { background: var(--ee-perf-expected); }
.ee-kpi--below::before  { background: var(--ee-perf-below); }
/* Backward-compat aliases */
.ee-kpi--green::before  { background: var(--ee-perf-strong); }
.ee-kpi--amber::before  { background: var(--ee-perf-expected); }
.ee-kpi--red::before    { background: var(--ee-perf-below); }

.ee-kpi__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ee-text-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.ee-kpi__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--ee-chart-title);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ee-kpi__detail {
    font-size: 12px;
    color: var(--ee-text-muted);
    margin-top: 2px;
}

.ee-kpi__trend {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}
.ee-kpi__trend--up   { color: var(--ee-blue); }
.ee-kpi__trend--down { color: var(--ee-perf-below); }
.ee-kpi__trend--flat { color: var(--ee-text-muted); }

/* -----------------------------------------------------------
   6. CHART CARDS — The Story Container
   ----------------------------------------------------------- */
.ee-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ee-card-gap);
    margin-bottom: var(--ee-space-lg);
}
.ee-chart-grid--three { grid-template-columns: 1fr 1fr 1fr; }
.ee-chart-grid--full  { grid-template-columns: 1fr; }

.ee-chart-card {
    background: var(--ee-surface);
    border: 1px solid var(--ee-border-light);
    border-radius: var(--ee-radius);
    padding: 20px 24px;
    box-shadow: var(--ee-shadow-sm);
    transition: box-shadow var(--ee-transition);
}
.ee-chart-card:hover {
    box-shadow: var(--ee-shadow-md);
}

.ee-chart-card--full { grid-column: 1 / -1; }

/* --- Chart header: the narrative title system --- */
.ee-chart-header {
    margin-bottom: var(--ee-space-md);
}

/* Finding title — bold, tells you what the data shows */
.ee-chart-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ee-chart-title);
    line-height: 1.3;
    margin-bottom: 2px;
}

/* Context subtitle — date range, scope, methodology */
.ee-chart-subtitle {
    font-size: 13px;
    color: var(--ee-chart-subtitle);
    line-height: 1.4;
}

/* Annotation — inline insight callout */
.ee-chart-annotation {
    font-size: 12px;
    font-style: italic;
    color: var(--ee-chart-annotation);
    margin-top: var(--ee-space-sm);
    padding-left: 12px;
    border-left: 2px solid var(--ee-border);
}

/* Badge for contextual info */
.ee-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--ee-radius-pill);
    vertical-align: middle;
    margin-left: 8px;
}
/* Performance intensity badges */
.ee-badge--blue   { background: var(--ee-blue-light); color: var(--ee-blue); }
.ee-badge--strong { background: #DBEAFE; color: #0C5EE2; }
.ee-badge--expected { background: #EFF6FF; color: #3B82F6; }
.ee-badge--below  { background: #F0F4FF; color: #60A5FA; }
.ee-badge--grey   { background: var(--ee-bg-grey); color: var(--ee-text-muted); }
/* Backward-compat aliases */
.ee-badge--green  { background: #DBEAFE; color: #0C5EE2; }
.ee-badge--amber  { background: #EFF6FF; color: #3B82F6; }
.ee-badge--red    { background: #F0F4FF; color: #60A5FA; }

/* Chart body — canvas container */
.ee-chart-body {
    position: relative;
}
.ee-chart-body--sm  { height: 220px; }
.ee-chart-body--md  { height: 300px; }
.ee-chart-body--lg  { height: 400px; }
.ee-chart-body--xl  { height: 500px; }

/* -----------------------------------------------------------
   7. SECTION DIVIDERS
   ----------------------------------------------------------- */
.ee-section {
    margin-top: var(--ee-section-gap);
    margin-bottom: var(--ee-space-md);
}

.ee-section__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ee-chart-title);
    margin-bottom: 4px;
}

.ee-section__subtitle {
    font-size: 14px;
    color: var(--ee-chart-subtitle);
}

.ee-section__rule {
    width: 40px;
    height: 3px;
    background: var(--ee-blue);
    border: none;
    margin-top: var(--ee-space-sm);
    border-radius: 2px;
}

/* -----------------------------------------------------------
   8. DATA TABLES
   ----------------------------------------------------------- */
.ee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ee-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ee-text-muted);
    font-weight: 600;
    border-bottom: 2px solid var(--ee-border);
    background: var(--ee-bg);
}

.ee-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ee-border-light);
    color: var(--ee-text-secondary);
}

.ee-table tbody tr {
    transition: background var(--ee-transition);
}
.ee-table tbody tr:hover td {
    background: var(--ee-blue-lighter);
}
.ee-table tbody tr[data-clickable] {
    cursor: pointer;
}

.ee-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Inline bar in table cell */
.ee-table .bar-cell {
    position: relative;
    padding-right: 60px !important;
}
.ee-table .bar-cell .bar {
    position: absolute;
    left: 0; top: 4px; bottom: 4px;
    border-radius: 3px;
    opacity: 0.12;
}

/* -----------------------------------------------------------
   9. LOADING STATE
   ----------------------------------------------------------- */
.ee-loading {
    text-align: center;
    padding: 80px 0;
    color: var(--ee-text-muted);
    font-size: 14px;
}

.ee-spinner {
    display: inline-block;
    width: 24px; height: 24px;
    border: 3px solid var(--ee-border);
    border-top-color: var(--ee-blue);
    border-radius: 50%;
    animation: ee-spin 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes ee-spin { to { transform: rotate(360deg); } }

/* -----------------------------------------------------------
   10. RESPONSIVE
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .ee-chart-grid--three { grid-template-columns: 1fr 1fr; }
    .ee-insight-list--grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .ee-chart-grid,
    .ee-chart-grid--three { grid-template-columns: 1fr; }
    .ee-insight-list--grid { grid-template-columns: 1fr; }
    .ee-kpi-row { grid-template-columns: repeat(5, 1fr); }
    .ee-container { padding: var(--ee-space-md); }
    .ee-header { padding: 12px var(--ee-space-md); }
    .ee-chart-title { font-size: 15px; }
}

@media (max-width: 480px) {
    .ee-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------
   11. SPA SHELL LAYOUT
   ----------------------------------------------------------- */

/* Full viewport app container */
.ee-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar — fixed left column */
.ee-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--ee-navy);
    color: #CBD5E1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.06);
}

.ee-sidebar__header {
    padding: 20px 16px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ee-sidebar__header .ee-logo {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.ee-sidebar__header h2 {
    font-size: 15px;
    font-weight: 700;
    color: #F1F5F9;
    line-height: 1.2;
}

.ee-sidebar__header .ee-subtitle {
    font-size: 11px;
    color: #64748B;
    display: block;
}

/* Report group */
.ee-sidebar__group {
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ee-sidebar__group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748B;
    cursor: pointer;
    user-select: none;
    transition: color var(--ee-transition);
}

.ee-sidebar__group-title:hover {
    color: #94A3B8;
}

.ee-sidebar__group-title .chevron {
    font-size: 10px;
    transition: transform var(--ee-transition);
}

.ee-sidebar__group-title .chevron--open {
    transform: rotate(90deg);
}

.ee-sidebar__group-items {
    padding-bottom: 4px;
}

.ee-sidebar__group.collapsed .ee-sidebar__group-items {
    display: none;
}

/* Page link within a group */
.ee-sidebar__item {
    display: block;
    padding: 7px 16px 7px 28px;
    font-size: 13px;
    color: #94A3B8;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--ee-transition);
    border-left: 3px solid transparent;
}

.ee-sidebar__item:hover {
    color: #E2E8F0;
    background: rgba(255,255,255,0.04);
}

.ee-sidebar__item--active {
    color: #FFFFFF;
    background: rgba(12, 94, 226, 0.2);
    border-left-color: var(--ee-blue);
    font-weight: 600;
}

.ee-sidebar__item--disabled {
    color: #475569;
    cursor: not-allowed;
    pointer-events: none;
    font-style: italic;
}

.ee-sidebar__item--disabled::after {
    content: 'soon';
    font-size: 9px;
    font-style: normal;
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: var(--ee-radius-pill);
    margin-left: 8px;
    vertical-align: middle;
}

/* Main content area */
.ee-main {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Filter bar — sticky below header */
.ee-filter-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--ee-surface);
    border-bottom: 1px solid var(--ee-border);
    padding: 8px var(--ee-space-xl);
    display: flex;
    align-items: center;
    gap: var(--ee-space-md);
    box-shadow: var(--ee-shadow-sm);
}

.ee-filter-bar__group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ee-filter-bar__group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ee-text-muted);
    white-space: nowrap;
}

.ee-filter-bar__spacer {
    flex: 1;
}

/* Active filter chips bar */
.ee-active-filters {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px var(--ee-space-xl);
    background: #FEF3C7;
    border-bottom: 1px solid #F59E0B;
    font-size: 12px;
    color: var(--ee-text);
    flex-wrap: wrap;
}
.ee-active-filters.ee-active-filters--visible {
    display: flex;
}
.ee-active-filters__label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #92400E;
    margin-right: 2px;
    white-space: nowrap;
}
.ee-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFF;
    border: 1px solid #F59E0B;
    border-radius: 12px;
    padding: 2px 8px 2px 10px;
    font-size: 12px;
    font-weight: 500;
    color: #92400E;
}
.ee-filter-chip__remove {
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: #B45309;
    border: none;
    background: none;
    padding: 0 0 0 2px;
    font-weight: 700;
}
.ee-filter-chip__remove:hover {
    color: #DC2626;
}
.ee-active-filters__clear {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: #B45309;
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: underline;
    white-space: nowrap;
}
.ee-active-filters__clear:hover {
    color: #DC2626;
}

/* Breadcrumb */
.ee-breadcrumb {
    font-size: 12px;
    color: var(--ee-text-muted);
    padding: 0 var(--ee-space-xl);
    padding-top: var(--ee-space-md);
}

.ee-breadcrumb span {
    color: var(--ee-text-light);
}

.ee-breadcrumb strong {
    color: var(--ee-text-secondary);
    font-weight: 600;
}

/* Filter slide-out panel */
.ee-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ee-transition-slow);
}

.ee-filter-overlay--open {
    opacity: 1;
    pointer-events: auto;
}

.ee-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    background: var(--ee-surface);
    z-index: 950;
    transform: translateX(100%);
    transition: transform var(--ee-transition-slow);
    box-shadow: var(--ee-shadow-lg);
    display: flex;
    flex-direction: column;
}

.ee-filter-panel--open {
    transform: translateX(0);
}

.ee-filter-panel__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ee-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ee-filter-panel__header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ee-text);
}

.ee-filter-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--ee-space-md);
}

.ee-filter-panel__group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ee-text-muted);
    margin-bottom: 4px;
}

.ee-filter-panel__group .ee-select {
    width: 100%;
}

.ee-filter-panel__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--ee-border);
    display: flex;
    gap: var(--ee-space-sm);
}

.ee-filter-panel__footer .ee-btn { flex: 1; }

/* Coming soon placeholder */
.ee-coming-soon {
    text-align: center;
    padding: 120px 40px;
    color: var(--ee-text-muted);
}

.ee-coming-soon__icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.ee-coming-soon h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ee-text-secondary);
    margin-bottom: 8px;
}

.ee-coming-soon p {
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 900px) {
    .ee-sidebar {
        width: 200px;
        min-width: 200px;
    }
    .ee-filter-panel { width: 300px; }
}

@media (max-width: 640px) {
    .ee-sidebar { display: none; }
    .ee-filter-panel { width: 100%; }
}


/* ============================================================
   CHAT WIDGET
   ============================================================
   Scoped under `.ee-chat` so the host page can never collide.
   The widget owns its own colour palette via CSS custom properties
   so it stays visually consistent regardless of where it's embedded.
   To restyle, override the `--ee-chat-*` vars on `.ee-chat`.
   ============================================================ */

.ee-chat {
    /* palette — overridable per-instance */
    --ee-chat-bg:            #f8f9fb;
    --ee-chat-surface:       #ffffff;
    --ee-chat-surface-hover: #f0f1f4;
    --ee-chat-border:        #e2e4e9;
    --ee-chat-border-light:  #eef0f3;
    --ee-chat-text:          #1a1d27;
    --ee-chat-text-muted:    #6b7084;
    --ee-chat-accent:        #0C5EE2;
    --ee-chat-accent-light:  #3B82F6;
    --ee-chat-accent-bg:     rgba(12, 94, 226, 0.06);
    --ee-chat-green:         #16a34a;
    --ee-chat-purple:        #7c3aed;
    --ee-chat-cyan:          #0891b2;
    --ee-chat-cyan-bg:       rgba(8, 145, 178, 0.06);
    --ee-chat-cyan-border:   rgba(8, 145, 178, 0.18);
    --ee-chat-red:           #dc2626;
    --ee-chat-amber:         #d97706;
    --ee-chat-shadow-sm:     0 1px 2px rgba(0,0,0,0.05);
    --ee-chat-mono:          'SF Mono', 'Fira Code', 'Consolas', monospace;
    --ee-chat-thread-max:    860px;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    color: var(--ee-chat-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--ee-chat-bg);
}
.ee-chat *,
.ee-chat *::before,
.ee-chat *::after {
    box-sizing: border-box;
}

.ee-chat--dark {
    --ee-chat-bg:            #0f1117;
    --ee-chat-surface:       #181b24;
    --ee-chat-surface-hover: #1f232e;
    --ee-chat-border:        #262a36;
    --ee-chat-border-light:  #1f232e;
    --ee-chat-text:          #e7e8ea;
    --ee-chat-text-muted:    #9aa0aa;
    --ee-chat-accent-bg:     rgba(12, 94, 226, 0.18);
}

/* Root flex container — composer pinned to bottom, thread fills the rest */
.ee-chat__root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Header (optional reset bar) */
.ee-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--ee-chat-border);
    background: var(--ee-chat-surface);
    flex-shrink: 0;
}
.ee-chat__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ee-chat-text-muted);
}
.ee-chat__reset {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--ee-chat-text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.ee-chat__reset:hover { border-color: var(--ee-chat-accent); color: var(--ee-chat-accent); }

/* Thread — scrollable conversation area */
.ee-chat__thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Welcome / suggestions */
.ee-chat__welcome {
    max-width: var(--ee-chat-thread-max);
    margin: 30px auto;
    text-align: center;
    padding: 0 12px;
}
.ee-chat__welcome-title { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.ee-chat__welcome-body { color: var(--ee-chat-text-muted); margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.ee-chat__suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    text-align: left;
}
.ee-chat__suggestion {
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: var(--ee-chat-shadow-sm);
}
.ee-chat__suggestion:hover {
    border-color: var(--ee-chat-accent);
    background: var(--ee-chat-surface-hover);
}

/* Messages */
.ee-chat__msg {
    max-width: var(--ee-chat-thread-max);
    width: 100%;
    margin: 0 auto;
    animation: ee-chat-fadeIn 0.2s ease;
}
@keyframes ee-chat-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ee-chat__msg--user {
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--ee-chat-shadow-sm);
}
.ee-chat__msg--user .ee-chat__msg-label { color: var(--ee-chat-accent); }
.ee-chat__msg--assistant {
    background: transparent;
    padding: 0 16px;
}
.ee-chat__msg--assistant .ee-chat__msg-label { color: var(--ee-chat-green); }
.ee-chat__msg-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ee-chat__msg-content {
    line-height: 1.6;
    color: var(--ee-chat-text);
    font-size: 14px;
}
.ee-chat__msg-content h2 { font-size: 16px; margin: 14px 0 6px; }
.ee-chat__msg-content h3 { font-size: 14px; margin: 10px 0 4px; }
.ee-chat__msg-content h4 { font-size: 13px; margin: 8px 0 4px; color: var(--ee-chat-text-muted); font-weight: 600; }
.ee-chat__msg-content p { margin: 4px 0; }
.ee-chat__msg-content strong { color: var(--ee-chat-text); font-weight: 600; }
.ee-chat__msg-content ul,
.ee-chat__msg-content ol { padding-left: 20px; margin: 4px 0; }
.ee-chat__msg-content li { margin: 1px 0; }
.ee-chat__msg-content li br { display: none; }
.ee-chat__msg-content code {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border-light);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-family: var(--ee-chat-mono);
}
.ee-chat__hr {
    border: none;
    border-top: 1px solid var(--ee-chat-border);
    margin: 16px 0;
}

/* Inline tables produced by markdown pipes */
.ee-chat__msg-content table,
.ee-chat__data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 8px;
    overflow: hidden;
}
.ee-chat__msg-content th,
.ee-chat__data-table th {
    text-align: left;
    padding: 9px 12px;
    border-bottom: 2px solid var(--ee-chat-border);
    color: var(--ee-chat-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--ee-chat-bg);
}
.ee-chat__msg-content td,
.ee-chat__data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--ee-chat-border-light);
}
.ee-chat__msg-content tr:last-child td,
.ee-chat__data-table tr:last-child td { border-bottom: none; }

.ee-chat__error { color: var(--ee-chat-red); font-weight: 600; }
.ee-chat__muted { color: var(--ee-chat-text-muted); font-size: 13px; }

/* Tool call (provenance card) */
.ee-chat__tc-wrapper {
    max-width: var(--ee-chat-thread-max);
    width: 100%;
    margin: 4px auto;
}
.ee-chat__tc {
    background: var(--ee-chat-cyan-bg);
    border: 1px solid var(--ee-chat-cyan-border);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.ee-chat__tc:hover { background: rgba(8, 145, 178, 0.10); }
.ee-chat__tc-icon { color: var(--ee-chat-cyan); font-size: 13px; }
.ee-chat__tc-fn {
    color: var(--ee-chat-cyan);
    font-weight: 600;
    font-family: var(--ee-chat-mono);
    font-size: 11px;
}
.ee-chat__tc-result {
    color: var(--ee-chat-text-muted);
    margin-left: auto;
    font-size: 11px;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ee-chat__tc-timing { color: var(--ee-chat-text-muted); font-size: 11px; white-space: nowrap; }
.ee-chat__tc-chevron {
    color: var(--ee-chat-text-muted);
    font-size: 11px;
    transition: transform 0.2s;
    margin-left: 4px;
}
.ee-chat__tc-wrapper--expanded .ee-chat__tc { border-radius: 8px 8px 0 0; }
.ee-chat__tc-wrapper--expanded .ee-chat__tc-chevron { transform: rotate(90deg); }
.ee-chat__tc-wrapper--flash .ee-chat__tc { outline: 2px solid var(--ee-chat-accent); }

.ee-chat__tc-details {
    display: none;
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
    overflow: hidden;
}
.ee-chat__tc-wrapper--expanded .ee-chat__tc-details { display: block; }

.ee-chat__prov-tabs {
    display: flex;
    border-bottom: 1px solid var(--ee-chat-border);
    background: var(--ee-chat-bg);
}
.ee-chat__prov-tab {
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ee-chat-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    transition: all 0.15s;
}
.ee-chat__prov-tab:hover { color: var(--ee-chat-text); }
.ee-chat__prov-tab--active {
    color: var(--ee-chat-accent);
    border-bottom-color: var(--ee-chat-accent);
}
.ee-chat__prov-panel {
    display: none;
    padding: 13px 16px;
    font-size: 13px;
}
.ee-chat__prov-panel--active { display: block; }

.ee-chat__prov-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ee-chat__prov-fact { display: flex; flex-direction: column; gap: 3px; }
.ee-chat__prov-fact-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ee-chat-text-muted);
}
.ee-chat__prov-fact-value { font-size: 12px; font-weight: 500; }
.ee-chat__prov-fact-value code {
    font-family: var(--ee-chat-mono);
    font-size: 11px;
    background: var(--ee-chat-bg);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--ee-chat-cyan);
}
.ee-chat__prov-params { margin-top: 12px; }
.ee-chat__params-table {
    width: 100%;
    font-size: 11px;
    margin-top: 6px;
    border-collapse: collapse;
}
.ee-chat__params-table td { padding: 3px 8px 3px 0; vertical-align: top; }
.ee-chat__params-table td:first-child {
    font-weight: 600;
    color: var(--ee-chat-text-muted);
    white-space: nowrap;
    font-family: var(--ee-chat-mono);
}

.ee-chat__sql-block {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border-light);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: var(--ee-chat-mono);
    font-size: 11px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    color: var(--ee-chat-text);
}

.ee-chat__assumption-list { list-style: none; padding: 0; margin: 0; }
.ee-chat__assumption-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ee-chat-border-light);
    font-size: 12px;
    line-height: 1.5;
}
.ee-chat__assumption-list li:last-child { border-bottom: none; }
.ee-chat__assumption-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ee-chat__assumption-icon--rule {
    background: rgba(217, 119, 6, 0.1);
    color: var(--ee-chat-amber);
}
.ee-chat__assumption-icon--scope {
    background: rgba(8, 145, 178, 0.1);
    color: var(--ee-chat-cyan);
}

.ee-chat__lineage-flow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 0;
}
.ee-chat__lineage-node {
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    min-width: 90px;
}
.ee-chat__lineage-node--highlight {
    border-color: var(--ee-chat-accent);
    background: var(--ee-chat-accent-bg);
}
.ee-chat__lineage-icon { font-size: 16px; margin-bottom: 3px; }
.ee-chat__lineage-name { font-size: 11px; font-weight: 600; }
.ee-chat__lineage-desc { font-size: 10px; color: var(--ee-chat-text-muted); margin-top: 2px; }
.ee-chat__lineage-arrow { color: var(--ee-chat-text-muted); font-size: 16px; }

/* Inline claim badges */
.ee-chat__claim {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 5px;
    font-weight: 600;
    font-size: inherit;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.ee-chat__claim:hover { filter: brightness(0.95); }
.ee-chat__claim-inspect { font-size: 9px; opacity: 0.5; transition: opacity 0.15s; }
.ee-chat__claim:hover .ee-chat__claim-inspect { opacity: 1; }
.ee-chat__claim--verified {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.25);
    color: var(--ee-chat-green);
}
.ee-chat__claim--insight {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.25);
    color: var(--ee-chat-purple);
}
.ee-chat__claim--warning {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: var(--ee-chat-red);
}
.ee-chat__claim-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-accent);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 11px;
    color: var(--ee-chat-text-muted);
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    font-weight: 400;
    text-align: left;
}
.ee-chat__claim:hover .ee-chat__claim-tooltip { display: block; }
.ee-chat__claim-tt-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ee-chat-text-muted);
    margin-bottom: 2px;
    margin-top: 4px;
}
.ee-chat__claim-tooltip code {
    font-family: var(--ee-chat-mono);
    color: var(--ee-chat-cyan);
    font-size: 10px;
    background: var(--ee-chat-bg);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Chart container */
.ee-chat__chart {
    position: relative;
    background: var(--ee-chat-surface);
    border: 1px solid var(--ee-chat-border);
    border-radius: 10px;
    padding: 16px;
    margin: 12px 0;
    box-shadow: var(--ee-chat-shadow-sm);
}
.ee-chat__chart canvas { max-height: 380px; }

/* Drill-down chips */
.ee-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ee-chat__chip {
    background: var(--ee-chat-accent-bg);
    border: 1px solid rgba(12, 94, 226, 0.20);
    border-radius: 18px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--ee-chat-accent);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}
.ee-chat__chip:hover {
    background: rgba(12, 94, 226, 0.12);
    border-color: var(--ee-chat-accent);
}

/* Thinking indicator */
.ee-chat__thinking {
    max-width: var(--ee-chat-thread-max);
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    color: var(--ee-chat-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ee-chat__dots span { animation: ee-chat-blink 1.4s infinite both; font-size: 16px; }
.ee-chat__dots span:nth-child(2) { animation-delay: 0.2s; }
.ee-chat__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ee-chat-blink {
    0%, 80%, 100% { opacity: 0.2; }
    40%           { opacity: 1; }
}

/* Composer */
.ee-chat__composer {
    padding: 12px 16px;
    border-top: 1px solid var(--ee-chat-border);
    background: var(--ee-chat-surface);
    flex-shrink: 0;
}
.ee-chat__composer-form {
    max-width: var(--ee-chat-thread-max);
    margin: 0 auto;
    display: flex;
    gap: 8px;
}
.ee-chat__input {
    flex: 1;
    background: var(--ee-chat-bg);
    border: 1px solid var(--ee-chat-border);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--ee-chat-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
}
.ee-chat__input:focus {
    border-color: var(--ee-chat-accent);
    box-shadow: 0 0 0 3px rgba(12, 94, 226, 0.1);
}
.ee-chat__input::placeholder { color: var(--ee-chat-text-muted); }
.ee-chat__send {
    background: var(--ee-chat-accent);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}
.ee-chat__send:hover { background: var(--ee-chat-accent-light); }
.ee-chat__send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Narrow layout — drawer / sidebar embeds */
@media (max-width: 480px) {
    .ee-chat__thread { padding: 12px 10px; }
    .ee-chat__msg--assistant { padding: 0 10px; }
    .ee-chat__welcome { margin: 16px auto; }
    .ee-chat__suggestions { grid-template-columns: 1fr; }
    .ee-chat__prov-summary { grid-template-columns: 1fr; }
    .ee-chat__composer { padding: 10px 12px; }
    .ee-chat__send { padding: 10px 14px; }
}

/* -----------------------------------------------------------
   UNIVERSAL CHART EXPAND / MINIMISE
   (button injected by ee-chart-theme.js::makeExpandable)
   ----------------------------------------------------------- */

/* Ensure every wrapper the button can anchor into is positioned. */
.ee-chart,
.chart-container {
    position: relative;
}

.ee-chart-expand-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    color: #4a5563;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
    z-index: 5;
    font-family: inherit;
}
.ee-chart-expand-btn:hover {
    background: #ffffff;
    color: #0c5ee2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.ee-chart-expand-btn:focus-visible {
    outline: 2px solid #0c5ee2;
    outline-offset: 2px;
}
.ee-chart-expand-btn__icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: block;
}
/* Swap which icon is visible based on button state. */
.ee-chart-expand-btn__icon--minimise { display: none; }
.ee-chart-expand-btn--minimise .ee-chart-expand-btn__icon--expand  { display: none; }
.ee-chart-expand-btn--minimise .ee-chart-expand-btn__icon--minimise { display: block; }

/* Modal overlay that hosts the expanded chart wrapper. */
.ee-chart-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    font-family: var(--ee-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.ee-chart-modal--open { display: block; }

.ee-chart-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 20, 36, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ee-chart-modal__stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 1400px);
    height: min(90vh, 900px);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    padding: 40px 24px 24px;
    box-sizing: border-box;
}

.ee-chart-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #4a5563;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.ee-chart-modal__close:hover { background: #f1f4f8; color: #0c5ee2; }

.ee-chart-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* When a wrapper is moved into the modal, it must fill the stage and
   release any fixed heights / max-heights set by its original context. */
.ee-chart-modal__body > .ee-chart-wrap--expanded {
    flex: 1 1 auto;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.ee-chart-modal__body > .ee-chart-wrap--expanded canvas {
    max-height: none !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide the wrapper's expand button while inside the modal — the modal's
   own close button (×) is the sole close affordance, so we don't surface
   two overlapping controls in the same corner. (Fullscreen in-place mode
   keeps the wrap's button visible — it acts as the close affordance there.) */
.ee-chart-modal__body > .ee-chart-wrap--expanded .ee-chart-expand-btn { display: none; }

/* ─── In-place fullscreen mode (report-page charts) ──────────────────
   Used by `.ee-chart-body` wrappers that should expand without a modal
   or backdrop, so the host app's screenshot feature can capture them
   unobscured. No DOM move, no blur layer.

   Two flavours:

   1. `.ee-chart-wrap--fullscreen` (fallback) — `position: fixed` to the
      viewport. Used when the host has not marked a canvas element. Will
      cover headers/nav.

   2. `.ee-chart-wrap--fullscreen.ee-chart-wrap--fullscreen-canvas` —
      `position: absolute` inside the host's `data-ee-chart-canvas`
      element. Fills only the central content panel, leaving the host's
      nav/header/sidebar visible. This is the preferred mode — hosts
      should add `data-ee-chart-canvas` to their main report panel. */
.ee-chart-wrap--fullscreen {
    position: fixed !important;
    inset: 16px !important;
    z-index: 9999 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px !important;
    background: #ffffff !important;
    border: 1px solid #e5e9f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
}
.ee-chart-wrap--fullscreen.ee-chart-wrap--fullscreen-canvas {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px !important;
}
.ee-chart-wrap--fullscreen canvas {
    max-height: none !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
}

/* Prevent background scroll while modal is open. */
body.ee-chart-modal-lock { overflow: hidden; }

/* ============================================================
   Transparency Mode
   ============================================================ */

/* ── Toggle bar ─────────────────────────────────────────────── */
.ee-tp-toggle-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    margin-top: 8px;
}

.ee-tp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--ee-border, #e2e8f0);
    border-radius: 20px;
    background: var(--ee-surface, #fff);
    color: var(--ee-text-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.ee-tp-toggle:hover {
    border-color: var(--ee-blue, #0C5EE2);
    color: var(--ee-blue, #0C5EE2);
}

.ee-tp-toggle--active {
    border-color: var(--ee-blue, #0C5EE2);
    color: var(--ee-blue, #0C5EE2);
    background: rgba(12, 94, 226, 0.06);
}

.ee-tp-toggle-switch {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #cbd5e1;
    position: relative;
    transition: background 0.2s;
}

.ee-tp-toggle--active .ee-tp-toggle-switch {
    background: var(--ee-blue, #0C5EE2);
}

.ee-tp-toggle-slider {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.ee-tp-toggle--active .ee-tp-toggle-slider {
    transform: translateX(14px);
}

/* ── Info icons on visuals ──────────────────────────────────── */
.ee-tp-icon {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--ee-border, #e2e8f0);
    background: var(--ee-surface, #fff);
    color: var(--ee-blue, #0C5EE2);
    cursor: pointer;
    z-index: 10;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ee-transparency-on .ee-tp-icon {
    display: flex;
    animation: ee-tp-fade-in 0.2s ease-out;
}

.ee-tp-icon:hover {
    background: var(--ee-blue, #0C5EE2);
    color: #fff;
    border-color: var(--ee-blue, #0C5EE2);
    transform: scale(1.1);
}

@keyframes ee-tp-fade-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Visual highlight when panel is open ────────────────────── */
.ee-tp-highlight {
    outline: 2px solid var(--ee-blue, #0C5EE2);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ── Overlay ────────────────────────────────────────────────── */
.ee-tp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9998;
    transition: background 0.3s ease;
}

.ee-tp-overlay--visible {
    background: rgba(0, 0, 0, 0.25);
}

/* ── Slide-out panel ────────────────────────────────────────── */
.ee-tp-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: var(--ee-surface, #fff);
    border-left: 1px solid var(--ee-border, #e2e8f0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ee-tp-panel--open {
    transform: translateX(0);
}

.ee-tp-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ee-border, #e2e8f0);
    flex-shrink: 0;
}

.ee-tp-panel__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ee-text, #1e293b);
}

.ee-tp-panel__close {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: var(--ee-text-muted, #64748b);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.ee-tp-panel__close:hover {
    background: #f1f5f9;
    color: var(--ee-text, #1e293b);
}

.ee-tp-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.ee-tp-panel__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--ee-border, #e2e8f0);
    flex-shrink: 0;
}

.ee-tp-panel__footer code {
    font-size: 11px;
    color: var(--ee-text-muted, #64748b);
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ── Panel sections ─────────────────────────────────────────── */
.ee-tp-section {
    margin-bottom: 20px;
}

.ee-tp-section__title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ee-text-muted, #64748b);
    margin-bottom: 6px;
    font-weight: 600;
}

.ee-tp-section__text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ee-text, #1e293b);
    margin: 0;
}

.ee-tp-calc {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 10px 12px;
    color: #1e40af;
    line-height: 1.6;
    word-break: break-word;
}

/* ── Tags ───────────────────────────────────────────────────── */
.ee-tp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ee-tp-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #334155;
    font-family: 'SF Mono', 'Fira Code', monospace;
    white-space: nowrap;
}

.ee-tp-tag--col {
    background: #ecfdf5;
    color: #065f46;
}

.ee-tp-tag--filter {
    background: #fff7ed;
    color: #9a3412;
}

/* ── Business rules list ────────────────────────────────────── */
.ee-tp-rules {
    margin: 0;
    padding: 0 0 0 18px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ee-text, #1e293b);
}

.ee-tp-rules li {
    margin-bottom: 2px;
}

/* ── SQL block ──────────────────────────────────────────────── */
.ee-tp-sql {
    margin: 6px 0 0;
    padding: 12px 14px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
    max-height: 360px;
    overflow-y: auto;
}
.ee-tp-sql code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
}
.ee-tp-sql-source {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #dcfce7;
    color: #166534;
}
.ee-tp-sql-source--inline {
    background: #fef3c7;
    color: #92400e;
}
.ee-tp-sql-copy {
    float: right;
    border: 1px solid var(--ee-border, #e2e8f0);
    background: #fff;
    color: var(--ee-text, #1e293b);
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 11px;
    cursor: pointer;
}
.ee-tp-sql-copy:hover {
    background: #f1f5f9;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ee-tp-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* ═══════════════════════════════════════════════════════════════
   INSIGHTS CARDS & LAYOUT
   ═══════════════════════════════════════════════════════════════ */

/* Insight card list inside chart-cards */
.ee-insight-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

/* Grid variant — compact tiles for drilldown pages */
.ee-insight-list--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: var(--ee-space-lg);
}

/* Individual insight card */
.ee-insight-card {
    border: 1px solid var(--ee-border, #e2e8f0);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--ee-surface, #fff);
    transition: box-shadow 0.15s ease;
}
.ee-insight-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.ee-insight-card[style*="cursor: pointer"]:hover {
    border-color: var(--ee-blue, #3b82f6);
}

/* Type-specific left border accents */
.ee-insight-card--win {
    border-left: 4px solid #10b981;
}
.ee-insight-card--concern {
    border-left: 4px solid #ef4444;
}
.ee-insight-card--equity_gap {
    border-left: 4px solid #f59e0b;
}
.ee-insight-card--kpi {
    border-left: 4px solid #3b82f6;
}

/* Card inner elements */
.ee-insight-card__domain {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ee-muted, #64748b);
    margin-bottom: 4px;
}
.ee-insight-card__headline {
    font-size: 14px;
    font-weight: 600;
    color: var(--ee-value, #1e293b);
    line-height: 1.3;
}
.ee-insight-card__detail {
    font-size: 12px;
    color: var(--ee-muted, #64748b);
    margin-top: 2px;
}
.ee-insight-card__metric {
    font-size: 20px;
    font-weight: 700;
    color: var(--ee-value, #1e293b);
    margin-top: 4px;
}

/* Direction arrows */
.ee-insight-card__arrow--up {
    color: #10b981;
}
.ee-insight-card__arrow--down {
    color: #ef4444;
}

/* Text helpers */
.ee-text--positive { color: #10b981; }
.ee-text--negative { color: #ef4444; }

/* Empty state */
.ee-empty {
    color: var(--ee-muted, #64748b);
    font-size: 13px;
    font-style: italic;
    padding: 16px 0;
}

/* KPI trend arrows */
.ee-kpi__trend {
    font-size: 12px;
    font-weight: 600;
}
.ee-kpi__trend--up { color: #10b981; }
.ee-kpi__trend--down { color: #ef4444; }
.ee-kpi__trend--flat { color: #94a3b8; }

/* ─── Utility classes ─────────────────────────────────────── */
.ee-hidden { display: none !important; }

/* ─── Student 360 ─────────────────────────────────────────── */
.ee-student-search-wrap {
    position: relative;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}
.ee-student-search {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 2px solid var(--ee-border, #d1d5db);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s;
}
.ee-student-search:focus {
    border-color: var(--ee-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.ee-student-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--ee-border, #d1d5db);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
}
.ee-student-dropdown__item {
    padding: 0.6rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}
.ee-student-dropdown__item:hover {
    background: #f0f5ff;
}
.ee-student-dropdown__name { font-weight: 600; }
.ee-student-dropdown__meta { font-size: 0.82rem; color: #6b7280; }

/* Demographic chips */
.ee-chip-row { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.3rem; }
.ee-chip {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.ee-chip--pp   { background: #dbeafe; color: #1e40af; }
.ee-chip--send { background: #fef3c7; color: #92400e; }
.ee-chip--eal  { background: #d1fae5; color: #065f46; }
.ee-chip--lac  { background: #fce7f3; color: #9d174d; }
.ee-chip--fsm  { background: #e0e7ff; color: #3730a3; }

/* Risk indicator cards */
.ee-risk-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.ee-risk-card {
    flex: 1 1 200px;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 0.85rem;
}
.ee-risk-card--critical { background: #fef2f2; border-color: #dc2626; }
.ee-risk-card--high     { background: #fffbeb; border-color: #f59e0b; }
.ee-risk-card--medium   { background: #fefce8; border-color: #eab308; }
.ee-risk-card__flag { font-weight: 700; margin-bottom: 0.15rem; }
.ee-risk-card__detail { color: #6b7280; font-size: 0.78rem; }

/* Day-of-week heatmap */
.ee-day-heatmap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    max-width: 400px;
}
.ee-day-cell {
    text-align: center;
    padding: 1rem 0.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ee-day-cell__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.ee-day-cell__value { font-size: 1.1rem; }

/* Assessment journey timeline */
.ee-journey {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 1rem 0;
}
.ee-journey__node {
    flex: 0 0 auto;
    text-align: center;
    padding: 0.75rem 1.2rem;
    background: #f8fafc;
    border: 2px solid var(--ee-border, #d1d5db);
    border-radius: 12px;
    min-width: 100px;
}
.ee-journey__node--active { border-color: var(--ee-accent, #2563eb); background: #eff6ff; }
.ee-journey__stage { font-size: 0.72rem; text-transform: uppercase; font-weight: 700; color: #6b7280; }
.ee-journey__result { font-size: 1.1rem; font-weight: 700; margin: 0.2rem 0; }
.ee-journey__year { font-size: 0.72rem; color: #9ca3af; }
.ee-journey__connector { flex: 0 0 24px; height: 2px; background: #d1d5db; }

/* Student profile header */
.ee-profile-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.ee-profile-name { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.ee-profile-school { font-size: 0.95rem; color: #6b7280; }