/* ==============================
   VAHAN ANALYTICS - PRODUCTION CSS
   ============================== */

:root {
    /* ── Light professional theme (matches the site-wide ff-* market system).
       The sidebar + mobile bottom-nav stay dark via scoped overrides at the
       bottom of this file — classic pro-dashboard contrast. ── */
    --bg: #f4f6fb;
    --bg-card: #ffffff;
    --bg-card-2: #f1f5f9;
    --sidebar-bg: #0d1526;
    --topbar-bg: rgba(255, 255, 255, 0.94);

    --accent: #2563eb;
    --accent-glow: rgba(37, 99, 235, 0.2);
    --accent-2: #7c3aed;
    --accent-3: #0891b2;
    --accent-4: #059669;
    --accent-5: #d97706;
    --accent-6: #dc2626;

    --text-1: #0f172a;
    --text-2: #475569;
    --text-3: #64748b;
    --border: #e2e8f0;
    --border-hover: #c7d2e0;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.13);
    --shadow-glow: 0 0 0 3px rgba(37, 99, 235, 0.12);

    /* aliases used by later sections (previously inherited/undefined) */
    --primary: #2563eb;
    --card-bg: #ffffff;
    --bg-1: #f8fafc;
    --bg-2: #f1f5f9;

    --sidebar-w: 258px;
    --topbar-h: 72px;
    --radius: 14px;
    --radius-sm: 8px;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text-1);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(37, 99, 235, 0.05) 0, transparent 50%),
        radial-gradient(ellipse at 85% 100%, rgba(124, 58, 237, 0.04) 0, transparent 55%);
}

/* ===== LAYOUT =====
   The shell fills whatever height the page gives it (100% of .content under
   the site header) — NOT 100vh, which overflowed past the viewport by the
   header height and clipped the bottom (unreachable: body doesn't scroll). */
.app-layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* ===== SIDEBAR ===== */
.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 100%;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.brand-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.brand-name {
    font-weight: 700;
    font-size: 15px;
    display: block;
}

.brand-sub {
    font-size: 10.5px;
    color: var(--text-3);
    display: block;
    margin-top: 1px;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 12px;
    overflow-y: auto;
    /* thin, LIGHT scrollbar — the global thumb is dark and invisible on the
       dark sidebar, which made the nav look non-scrollable */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

.nav-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 8px;
    margin-bottom: 8px;
    display: block;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    margin-bottom: 2px;
}

.nav-item:hover {
    background: var(--bg-card-2);
    color: var(--text-1);
}

.nav-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.15));
    color: var(--text-1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

.nav-item i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===== SIDEBAR REPORT LIST ===== */
.sidebar-report-list {
    margin-top: 4px;
    border-top: 1px solid var(--border);
    padding-top: 4px;
}

.report-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: default;
    user-select: none;
}

.report-group-label i {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

.report-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 20px;
    border-radius: 6px;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 450;
    cursor: pointer;
    transition: all 0.18s ease;
    margin: 1px 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-item:hover {
    background: var(--bg-card-2);
    color: var(--text-1);
    border-color: rgba(255, 255, 255, 0.06);
}

.report-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(139, 92, 246, 0.12));
    color: var(--text-1);
    border-color: rgba(59, 130, 246, 0.3);
    font-weight: 550;
}

.report-item .ri-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
    transition: background 0.2s;
}

.report-item.active .ri-dot {
    background: var(--accent);
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.data-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-2);
}

.data-badge i {
    color: var(--accent);
    width: 16px;
}

.data-badge span {
    font-weight: 700;
    color: var(--accent);
    font-size: 14px;
    display: block;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    height: var(--topbar-h);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
    /* Belt-and-braces. base_news.html used to style the bare `header` element as
       the sticky navy site bar, which this <header> inherited: white-on-white
       title, and (as a flex child, where z-index applies without positioning)
       z-index 100000 — tying the site header and painting this topbar over the
       nav dropdowns. Those rules are now scoped to `header.site-header`, so this
       is only a guard against the leak coming back. */
    color: var(--text-1);
    position: static;
}

.page-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.page-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
    display: block;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.report-select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
}

.report-select-wrap i {
    color: var(--accent);
    width: 16px;
}

.report-select-wrap select {
    background: transparent;
    border: none;
    color: var(--text-1);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
    min-width: 220px;
}

.report-select-wrap select option {
    background: #ffffff;
    color: var(--text-1);
}

.last-updated {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-3);
}

.last-updated i {
    width: 14px;
}

/* ── Data Freshness Badge (inline in topbar-left) ── */
.topbar-freshness {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 3px;
    padding: 2px 6px 2px 5px;
    background: rgba(59,130,246,0.07);
    border-left: 3px solid rgba(59,130,246,0.3);
    border-radius: 0 4px 4px 0;
    width: fit-content;
    transition: border-color 0.3s;
}

.topbar-freshness #freshnessMonths:not(:empty)::before {
    content: ' · ';
}

/* ===== PAGES ===== */
.pages {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

/* ===== KPI GRID ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s;
}

.kpi-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gradient-from, #3b82f6), var(--gradient-to, #8b5cf6));
}

.kpi-card.blue {
    --gradient-from: #3b82f6;
    --gradient-to: #6366f1;
}

.kpi-card.green {
    --gradient-from: #10b981;
    --gradient-to: #06b6d4;
}

.kpi-card.purple {
    --gradient-from: #8b5cf6;
    --gradient-to: #ec4899;
}

.kpi-card.amber {
    --gradient-from: #f59e0b;
    --gradient-to: #ef4444;
}

.kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.kpi-icon.blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.kpi-icon.green {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.kpi-icon.purple {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.kpi-icon.amber {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.kpi-icon i {
    width: 20px;
    height: 20px;
}

.kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin-bottom: 6px;
}

.kpi-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-1);
}

.kpi-sub {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 6px;
}

.kpi-change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    margin-top: 8px;
}

.kpi-change.up {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.kpi-change.down {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Shimmer loading */
.kpi-card.loading {
    min-height: 160px;
}

.kpi-shimmer {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.09) 50%, rgba(15, 23, 42, 0.04) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    height: 100%;
    width: 100%;
    border-radius: 8px;
}

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

    100% {
        background-position: 200% 0;
    }
}

/* ===== CHART CARDS ===== */
.chart-row {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

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

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

.chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px;
    backdrop-filter: blur(10px);
    transition: border-color 0.3s;
}

.chart-card:hover {
    border-color: var(--border-hover);
}

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

.chart-card.no-pad {
    padding: 0;
}

.chart-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 18px;
}

.chart-card-header h3 {
    font-size: 15px;
    font-weight: 600;
}

.chart-card-header p {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 3px;
}

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

.chart-area-tall {
    position: relative;
    height: 340px;
}

.chart-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ev-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* ===== PERIOD SELECTOR ===== */
.period-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
}

.period-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.period-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--text-3);
    background: transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.period-pill:hover {
    border-color: var(--accent);
    color: var(--text-1);
}

.period-pill.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.2));
    border-color: rgba(59, 130, 246, 0.5);
    color: var(--text-1);
}

.period-pill.cy {
    border-color: rgba(59, 130, 246, 0.3);
}

.period-pill.fy {
    border-color: rgba(245, 158, 11, 0.3);
}

.period-pill.cy.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.2));
}

.period-pill.fy.active {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(239, 68, 68, 0.12));
    border-color: rgba(217, 119, 6, 0.55);
    color: #b45309;
}

/* ===== CHART INSIGHT BOX ===== */
.chart-insight {
    margin-top: 14px;
    padding: 8px 12px;
    background: #f8fafc;
    border-left: 3px solid rgba(99, 102, 241, 0.45);
    border-radius: 0 6px 6px 0;
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.55;
    display: flex;
    gap: 7px;
    align-items: flex-start;
}

.chart-insight::before {
    content: '💡';
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 0px;
}

/* ===== HEATMAP ===== */
.heatmap-wrapper {
    overflow: auto;
    max-height: 75vh;
    padding: 8px 0;
}

/* Fix scale-mode dropdown option colours */
#heatmapScaleMode option {
    background: #ffffff;
    color: #0f172a;
}

.heatmap-grid {
    display: grid;
    gap: 3px;
}

.heatmap-cell {
    width: 100%;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

.heatmap-cell:hover {
    transform: scale(1.1);
    opacity: 0.9;
    z-index: 10;
    position: relative;
}

.heatmap-row-label {
    font-size: 10.5px;
    color: var(--text-2);
    white-space: nowrap;
    padding-right: 8px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.heatmap-col-label {
    font-size: 9.5px;
    color: var(--text-3);
    text-align: center;
    padding: 4px 2px;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-3);
}

.legend-gradient {
    width: 80px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(16,185,129,0.1), #10b981, #065f46);
}

/* ===== PLACEHOLDERS ===== */
.explorer-placeholder,
.heatmap-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    gap: 12px;
    color: var(--text-3);
}

.placeholder-icon {
    width: 60px;
    height: 60px;
    opacity: 0.3;
}

.explorer-placeholder h2,
.heatmap-placeholder h2 {
    font-size: 20px;
    color: var(--text-2);
}

.explorer-placeholder p,
.heatmap-placeholder p {
    font-size: 14px;
}

/* ===== TABLE ===== */
.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.search-box {
    position: relative;
    width: 320px;
}

.search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    width: 16px;
}

.search-box input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px 10px 38px;
    color: var(--text-1);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.search-box input:focus {
    border-color: var(--accent);
}

.table-meta {
    font-size: 12px;
    color: var(--text-3);
}

.table-scroll {
    overflow: auto;
    max-height: calc(100vh - 240px);
    border-radius: var(--radius);
}

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

thead th {
    position: sticky;
    top: 0;
    background: rgba(248, 250, 252, 0.97);
    backdrop-filter: blur(10px);
    z-index: 10;
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color 0.2s;
}

thead th:hover {
    color: var(--text-1);
}

tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
}

tbody tr:hover td {
    background: rgba(59, 130, 246, 0.05);
}

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

.empty-row {
    text-align: center;
    color: var(--text-3);
    padding: 60px !important;
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.32);
}

/* ===== COUNTER ANIMATION ===== */
.count-up {
    font-variant-numeric: tabular-nums;
}

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

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

/* ===== CHART HEADER / BODY =====
   The Company, Listed and Analytics pages mark their cards up with
   .chart-header / .chart-body, but neither class had a single rule anywhere
   in this stylesheet — so every <h3> in them fell back to the browser default
   (1.17em bold) instead of the 15px the rest of the dashboard uses, and the
   canvas wrapper had no positioning context for Chart.js to size against.
   Both are defined here so those pages match the Overview cards. */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chart-header h3 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.chart-header > div,
.chart-header .chart-subtitle {
    font-size: 12px;
    color: var(--text-3);
    line-height: 1.45;
}

.chart-header h3 + div,
.chart-header .chart-subtitle { margin-top: 2px; }

/* Height comes from --ch (set per card in the template, and adjusted per bar
   count by the script for horizontal bar charts) so the mobile breakpoint can
   cap it; an inline `height:` could not be overridden. */
.chart-body {
    position: relative;
    height: var(--ch, 300px);
}

/* An empty card shrinks to its message. !important so it also beats the phone
   breakpoint's `min-height: 240px`, which would otherwise reserve a chart-sized
   box for one line of text. */
.chart-body.is-empty {
    height: auto !important;
    min-height: 0 !important;
}

/* Shown in place of the canvas when a maker has nothing to plot for the
   selected period — an empty chart frame reads as a broken chart. */
.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 26px 14px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-3);
    background: var(--bg-card-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

/* Company page heading + responsive grids */
.company-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 4px;
    line-height: 1.25;
}

.company-subtitle {
    font-size: 13px;
    color: var(--text-3);
    margin: 0;
}

.company-kpi-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; }
.company-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.company-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 24px; }

@media (max-width: 1100px) {
    .company-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .company-three-col { grid-template-columns: 1fr 1fr; }
}

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

/* ===== LISTED COMPANIES — SCORECARDS ===== */
.listed-scorecards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.lsc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid transparent;
    border-radius: var(--radius);
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.lsc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.lsc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.lsc-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
}

.lsc-ticker {
    font-size: 10px;
    color: var(--text-3);
    font-family: 'Courier New', monospace;
    margin-top: 2px;
    letter-spacing: 0.03em;
}

.lsc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.lsc-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    line-height: 1;
}

.lsc-period {
    font-size: 10px;
    color: var(--text-3);
    margin-top: 4px;
    margin-bottom: 10px;
}

.lsc-metrics {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.lsc-growth {
    font-size: 12px;
    font-weight: 600;
}

.lsc-growth.positive { color: #10b981; }
.lsc-growth.negative { color: #ef4444; }

.lsc-share {
    font-size: 10px;
    color: var(--text-3);
    text-align: right;
}

/* ===== LISTED COMPANIES — FILTER PILLS ===== */
.listed-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 20px;
    border: 1.5px solid var(--pill-color, #8b5cf6);
    background: transparent;
    color: var(--pill-color, #8b5cf6);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.45;
    white-space: nowrap;
}

.listed-pill.active {
    background: var(--pill-color, #8b5cf6);
    color: #05080f;
    opacity: 1;
    font-weight: 600;
}

.listed-pill:hover { opacity: 1; }

.pill-ticker {
    font-size: 9px;
    opacity: 0.7;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .company-kpi-grid { grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
    .company-two-col { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
    .company-three-col { grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
    .listed-scorecards { grid-template-columns: repeat(2, 1fr); }

    /* One column means each chart gets the full screen width — the reason the
       donut legends and the norms axis labels were being clipped. Cap the
       taller cards so a single chart can't fill more than ~58% of the screen
       and hide the card that follows it. */
    .chart-body { height: min(var(--ch, 300px), 58vh); min-height: 240px; }
    .chart-area { height: 250px; }
    .chart-area-tall { height: min(340px, 56vh); }

    /* Cards: less padding, so the plot area rather than the frame gets the
       width back. */
    .chart-card { padding: 16px 14px; }
    .chart-row { gap: 14px; margin-bottom: 16px; }
    .kpi-card { padding: 16px 14px; }

    .chart-card-header,
    .chart-header { margin-bottom: 12px; }

    .chart-card-header h3,
    .chart-header h3 { font-size: 14px; }

    .chart-card-header { flex-wrap: wrap; gap: 8px; }

    /* KPI cards: the 42px icon on its own row above a 28px number made each
       card ~140px tall, so nine of them filled three screens before the first
       chart. Icon moves beside the label and the number comes down a size. */
    .kpi-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .kpi-icon i,
    .kpi-icon svg { width: 16px !important; height: 16px !important; }

    .kpi-value { font-size: 21px; }
    .kpi-label { font-size: 10px; letter-spacing: 0.05em; }

    /* Company name above the KPI block: 22px was set inline, which no media
       query could reach — it now carries a class instead. */
    .company-title { font-size: 17px; line-height: 1.25; }
    .company-subtitle { font-size: 12px; }

    /* ── Topbar: two-row layout on mobile ── */
    .topbar {
        flex-wrap: wrap;
        height: auto;
        min-height: var(--topbar-h);
        padding: 10px 14px;
        gap: 6px;
        align-items: flex-start;
    }

    .topbar-left {
        width: 100%;
        flex-shrink: 0;
    }

    .page-title {
        font-size: 16px;
    }

    .topbar-right {
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    /* Hide the clock/label on mobile to save space */
    .last-updated {
        display: none;
    }

    .period-selector {
        flex-shrink: 0;
        padding: 5px 10px;
    }

    .period-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 4px;
    }

    .report-select-wrap {
        padding: 6px 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .report-select-wrap select {
        min-width: 0;
        width: 100%;
    }

    /* Give content room above the fixed bottom nav — include the iOS
       home-indicator safe area (the nav grows by it), else the last
       1-2 lines hide behind the bar at max scroll */
    .pages {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
        padding-left: 14px;
        padding-right: 14px;
    }

    /* The .page-guide-tips overrides used to live here, ~350 lines ABOVE the
       base rules they override. Same specificity, so document order decided
       and the base `display:flex` won — which is why each tip's <strong> tags
       laid out as separate flex items ("Use the | period | pills | (top-right)
       to switch..."). They now sit in their own breakpoint just after the
       component, near line 1660. */

    /* ── Bottom Navigation Bar ── */
    .bottom-nav {
        display: flex !important;
    }
}

/* ── Bottom Navigation Bar (mobile only) ── */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--sidebar-bg);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: 58px;
    align-items: stretch;
    justify-content: space-around;
    padding: 0 4px;
    /* Safe area for iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    padding: 6px 2px;
    color: var(--text-3);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    border-radius: 0;
    background: transparent;
    border: none;
    transition: color 0.18s ease;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-nav .nav-item i,
.bottom-nav .nav-item svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    stroke: currentColor;
}

/* Five items across, so a label has ~70px to sit in and never needs
   truncating — the previous ten items left 39px each and the words collided. */
.bottom-nav .nav-item span {
    font-size: 10.5px;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-nav .nav-item:hover {
    color: var(--text-1);
    background: transparent;
}

.bottom-nav .nav-item.active {
    color: var(--primary);
    background: transparent;
}

/* ── Mobile "Insights" bottom sheet (opened from the bottom-nav item) ── */
.insight-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.insight-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 1001;
    background: var(--sidebar-bg);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    padding: 8px 12px 14px;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* Twelve links can outgrow a short phone — let the sheet scroll rather
       than push its own last rows behind the nav bar. */
    max-height: 74vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.insight-sheet.open,
.insight-sheet-backdrop.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.insight-sheet .sheet-grabber {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(148, 163, 184, 0.4);
    margin: 2px auto 10px;
}

.insight-sheet .sheet-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 4px 6px;
}

.insight-sheet .sheet-label:first-of-type { padding-top: 0; }

/* Two columns of tap targets rather than one long list — twelve stacked rows
   did not fit above the nav bar. */
.insight-sheet .sheet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.insight-sheet .nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 0;
    padding: 11px 10px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.14);
    color: #e2e8f0;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.25;
    min-height: 44px;
}

.insight-sheet .nav-item i,
.insight-sheet .nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--primary);
}

.insight-sheet .nav-item.active {
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.45);
    color: #fff;
}

@media (max-width: 340px) {
    .insight-sheet .sheet-grid { grid-template-columns: 1fr; }
}

/* ─── Analytics Page ───────────────────────────────────────────── */
.analytics-view {
    display: none;
}

.analytics-view.active {
    display: block;
}

.analytics-controls {
    margin-bottom: 16px;
}

.analytics-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.filter-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analytics-pills {
    display: flex;
    gap: 6px;
}

.analytics-pill {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.analytics-pill:hover {
    color: var(--text-1);
    border-color: var(--border-hover);
}

.analytics-pill.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

/* Analytics table */
.analytics-table {
    width: 100%;
}

.analytics-table thead th {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 2;
}

.growth-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.growth-badge.positive {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.growth-badge.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.rank-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: #eef2f7;
    color: var(--text-2);
}

.rank-num.top3 {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
}

/* ===== ONBOARDING / HELP BANNER ===== */
.page-guide {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.6;
    transition: all 0.3s ease;
    overflow: hidden;
}

.page-guide-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 1;
}

.page-guide-body {
    flex: 1;
    min-width: 0;
}

.page-guide-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-guide-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.page-guide-tips li {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-2);
    font-size: 11.5px;
}

.page-guide-tips li::before {
    content: '→';
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

/* ── How-to-use guide on a phone ──
   One tip per row, and each tip a plain block: a flex <li> turns every
   <strong>/<em> inside the sentence into its own flex item, so "Use the
   <strong>period pills</strong> (top-right) to switch…" laid out as ragged
   columns instead of a sentence. Must stay AFTER the rules above — equal
   specificity means the later block wins. */
@media (max-width: 768px) {
    .page-guide-tips {
        flex-direction: column;
        gap: 8px;
    }

    .page-guide-tips li {
        display: block;
        padding-left: 14px;
        position: relative;
        font-size: 12px;
        line-height: 1.6;
    }

    .page-guide-tips li::before {
        position: absolute;
        left: 0;
        top: 0;
    }
}

.page-guide-dismiss {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
    margin-top: -2px;
}

.page-guide-dismiss:hover {
    color: var(--text-1);
    background: rgba(15, 23, 42, 0.06);
}

.page-guide.hidden {
    display: none;
}

.page-guide-show-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-3);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    transition: all 0.2s;
    margin-bottom: 14px;
}

.page-guide-show-btn:hover {
    color: var(--accent);
    border-color: rgba(59, 130, 246, 0.4);
}

/* ─── Multi-Select Entity Filter ─────────────────────────────────────────── */
.entity-filter-wrap {
    position: relative;
    display: inline-block;
    min-width: 220px;
    max-width: 360px;
}

.entity-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-filter-btn:hover {
    border-color: var(--border-hover);
    color: var(--text-1);
}

.entity-filter-btn .ef-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: 0.5;
}

.entity-filter-btn .ef-count {
    margin-left: auto;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    flex-shrink: 0;
}

.entity-filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9999;
    width: 320px;
    max-height: 400px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    animation: efSlideIn 0.15s ease-out;
    backdrop-filter: blur(8px);
}

@keyframes efSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.entity-filter-dropdown.open {
    display: flex;
    flex-direction: column;
}

.ef-search-wrap {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.ef-search {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-1);
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

.ef-search:focus {
    border-color: var(--primary);
}

.ef-actions {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
}

.ef-action-btn {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}

.ef-action-btn:hover {
    color: var(--text-1);
    border-color: var(--border-hover);
}

.ef-action-btn.primary {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.ef-action-btn.primary:hover {
    background: #2563eb;
}

.ef-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    max-height: 280px;
}

.ef-list::-webkit-scrollbar {
    width: 5px;
}

.ef-list::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.15);
    border-radius: 3px;
}

.ef-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.1s;
}

.ef-item:hover {
    background: var(--bg-2);
}

.ef-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.ef-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ef-item-value {
    font-size: 11px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ef-item.hidden {
    display: none;
}

.ef-empty {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
}

/* ─── Searchable company combobox (Company Analysis) ──────────────── */
.vahan-combo-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 60;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.vahan-combo-opt {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-1);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vahan-combo-opt:last-child { border-bottom: none; }
.vahan-combo-opt:hover,
.vahan-combo-opt.active {
    background: rgba(124, 58, 237, 0.1);
    color: var(--text-1);
}
/* ═══════════════════════════════════════════════════════════════════
   DARK SIDEBAR + BOTTOM NAV — scoped variable overrides.
   The content area is light; the navigation chrome stays dark for the
   classic pro-dashboard contrast. Rules inside .sidebar/.bottom-nav
   resolve their var() lookups against these values.
   ═══════════════════════════════════════════════════════════════════ */
.sidebar,
.bottom-nav,
.insight-sheet {
    --text-1: #f1f5f9;
    --text-2: #a7b4c9;
    --text-3: #6b7a94;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.18);
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-2: rgba(255, 255, 255, 0.07);
    --accent: #60a5fa;
    color: var(--text-2);
}

.sidebar .brand-name { color: #f1f5f9; }

/* topbar gets a soft elevated look over the light page */
.topbar { box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); }

/* cards: soft shadow instead of relying on borders alone */
.kpi-card,
.chart-card,
.lsc-card {
    box-shadow: var(--shadow-sm);
}

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

/* ═══════ AUTO-GENERATED MARKET PULSE (overview briefing card) ═══════ */
.pulse-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 22px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.pulse-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.pulse-head h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-1);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-4);
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5);
    animation: pulseGlow 2s infinite;
    flex-shrink: 0;
}

@keyframes pulseGlow {
    0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

.pulse-meta {
    font-size: 10.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pulse-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pulse-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 7px 0 7px 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
    border-bottom: 1px dashed var(--border);
    border-left: 3px solid transparent;
    opacity: 0;
    transform: translateY(5px);
    animation: pulseFade 0.5s ease forwards;
}

.pulse-list li:last-child { border-bottom: none; }
.pulse-list li.t-pos { border-left-color: var(--accent-4); }
.pulse-list li.t-neg { border-left-color: var(--accent-6); }
.pulse-list li.t-watch { border-left-color: var(--accent-5); }
.pulse-list li:nth-child(1) { animation-delay: 0.05s; }
.pulse-list li:nth-child(2) { animation-delay: 0.22s; }
.pulse-list li:nth-child(3) { animation-delay: 0.39s; }
.pulse-list li:nth-child(4) { animation-delay: 0.56s; }
.pulse-list li:nth-child(5) { animation-delay: 0.73s; }

@keyframes pulseFade {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pulse-list li { animation: none; opacity: 1; transform: none; }
    .pulse-dot { animation: none; }
}

/* ═══════ DATA INTEGRITY STRIP (overview coverage check) ═══════
   Sits above the KPI band so a coverage caveat is read before the
   headline number, not after it. New classes only — nothing here
   redefines the scoped sidebar variables above. */
.coverage-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-5, #f59e0b);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.coverage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.coverage-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 7px;
}

.coverage-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-5, #f59e0b);
    flex-shrink: 0;
}

.coverage-meta {
    font-size: 11px;
    color: var(--text-3);
}

.coverage-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 10px;
}

.coverage-tile {
    background: var(--bg-card-2, rgba(15, 23, 42, 0.03));
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 11px;
}

.coverage-tile.warn { border-color: rgba(245, 158, 11, 0.45); }
.coverage-tile.ok   { border-color: rgba(22, 163, 74, 0.35); }

.coverage-tile .ct-l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color: var(--text-3);
    margin-bottom: 3px;
}

.coverage-tile .ct-v {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.2;
}

.coverage-tile .ct-s {
    font-size: 10.5px;
    color: var(--text-2);
    margin-top: 2px;
    line-height: 1.35;
}

.coverage-notes {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.coverage-notes li {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-2);
    padding: 6px 0 6px 10px;
    border-left: 3px solid transparent;
    border-bottom: 1px dashed var(--border);
}

.coverage-notes li:last-child { border-bottom: none; }
.coverage-notes li b { color: var(--text-1); }
.coverage-notes li.cf-onboarded    { border-left-color: #2563eb; }
.coverage-notes li.cf-reporting_gap,
.coverage-notes li.cf-stopped      { border-left-color: var(--accent-6, #dc2626); }
.coverage-notes li.cf-surge        { border-left-color: var(--accent-5, #f59e0b); }
.coverage-notes li.cf-ok           { border-left-color: var(--accent-4, #16a34a); }

.coverage-notes .cf-num {
    display: inline-block;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--text-3);
    white-space: nowrap;
}

.coverage-foot {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .coverage-tiles { grid-template-columns: 1fr 1fr; }
    .coverage-tile .ct-v { font-size: 16px; }
}