/* analytics.css - Analytics page */

/* ==================== ANALYTICS PAGE ==================== */
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.analytics-header h2 {
    margin: 0;
}

.analytics-filters {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Advanced Filters Toolbar */
.analytics-toolbar {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    border: 1px solid #e2e8f0;
}

.analytics-toolbar-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analytics-toolbar-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-toolbar-divider {
    width: 1px;
    height: 32px;
    background: #cbd5e1;
    margin: 0 0.5rem;
}

.filter-select {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    min-width: 140px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-select:hover {
    border-color: #1E6332;
}

.filter-select:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.15);
}

/* Date Range Picker */
.date-range-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-range-picker:hover {
    border-color: #1E6332;
}

.date-range-picker i {
    color: #1E6332;
}

.date-range-picker span {
    font-size: 0.85rem;
    color: #374151;
}

/* Export Dropdown */
.export-dropdown {
    position: relative;
}

.export-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #1E6332;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-dropdown-btn:hover {
    background: #214A3E;
}

.export-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid #e2e8f0;
    min-width: 200px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.export-dropdown.active .export-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.export-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    cursor: pointer;
}

.export-dropdown-item:hover {
    background: #F4F0E9;
    color: #1E6332;
}

.export-dropdown-item i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
}

.export-dropdown-item i.fa-file-csv { color: #18A74B; }
.export-dropdown-item i.fa-file-excel { color: #2F8542; }
.export-dropdown-item i.fa-file-pdf { color: #ef4444; }
.export-dropdown-item i.fa-print { color: #3b82f6; }

.export-dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.25rem 0;
}

/* Quick Actions in Toolbar */
.toolbar-quick-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toolbar-btn:hover {
    background: #F4F0E9;
    border-color: #1E6332;
    color: #1E6332;
}

.toolbar-btn.active {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}

/* Chart Bar Hover Effects */
.chart-bar {
    transition: all 0.2s ease;
    position: relative;
}

.chart-bar:hover {
    transform: scaleY(1.02);
    filter: brightness(1.1);
}

.chart-bar-group {
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-bar-group:hover .chart-bar-value {
    opacity: 1;
    transform: translate(-50%, -5px);
}

.chart-bar-value {
    opacity: 1;
    transition: all 0.2s ease;
}

/* ==================== SVG DONUT CHART ==================== */

/* Donut container — match bar chart height */
.donut-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    min-height: 0;
}

/* SVG donut size */
.donut-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    background: none !important;
}

/* Center label overlay on top of SVG */
.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: auto;
}

.donut-center-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.donut-center-label {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Legend items — interactive */
.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.donut-legend-item {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.donut-legend-item:hover {
    background: #F4F0E9;
    transform: scale(1.05);
}

.donut-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    transition: transform 0.25s ease;
}

.donut-legend-item:hover .donut-legend-color {
    transform: scale(1.3);
}

/* Clear filters button */
.analytics-clear-btn {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.analytics-clear-btn.visible {
    display: flex;
}

.analytics-clear-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

.analytics-clear-btn i {
    font-size: 0.75rem;
}

/* KPI Drill-down Modal */
.kpi-drilldown-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.kpi-drilldown-modal.show {
    display: flex;
}

.kpi-drilldown-content {
    background: #fff;
    border-radius: 1rem;
    width: 80vw;
    max-width: 80vw;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: analyticsModalSlideIn 0.3s ease;
}

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

.kpi-drilldown-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kpi-drilldown-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kpi-drilldown-header h4 i {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.kpi-drilldown-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f1f5f9;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.kpi-drilldown-close:hover {
    background: #fee2e2;
    color: #ef4444;
}

.kpi-drilldown-body {
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(85vh - 120px);
}

.kpi-drilldown-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-summary-card {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.kpi-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
}

.kpi-summary-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

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

.kpi-drilldown-table th {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
}

.kpi-drilldown-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.875rem;
}

.kpi-drilldown-table tr:hover {
    background: #F4F0E9;
}

/* Comparison Period Badge */
.comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.comparison-badge.up {
    background: #F4F0E9;
    color: #2F8542;
}

.comparison-badge.down {
    background: #fee2e2;
    color: #dc2626;
}

.comparison-badge.neutral {
    background: #f3f4f6;
    color: #6b7280;
}

/* Clickable Analytics Table Rows */
.analytics-clickable-row {
    cursor: pointer;
    transition: all 0.15s ease;
}

.analytics-clickable-row:hover {
    background: #F4F0E9 !important;
}

.analytics-clickable-row:hover td:first-child {
    color: #1E6332;
}

.analytics-clickable-row:active {
    background: #F4F0E9 !important;
}

/* Donut Segment Hover Tooltip */
.donut-segment-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Bar Chart Enhanced Hover */
.chart-bar-group:hover {
    transform: translateY(-2px);
}

.chart-bar-group:hover .chart-bar {
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(30, 99, 50, 0.3);
}

/* KPI Drilldown table clickable rows */
.kpi-drilldown-table .analytics-clickable-row {
    cursor: pointer;
}

.kpi-drilldown-table .analytics-clickable-row:hover {
    background: #F4F0E9;
}

/* Refresh Animation */
.refresh-spin {
    animation: progressSpin 1s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════
   ANALYTICS PAGE — UNIFIED VISUAL SYSTEM (April 2026 redesign)
   Scoped under .analytics-page so old shared rules from reports.css
   don't bleed in. All cards use the same shell: header + body + footer
   with consistent spacing, border-radius, and shadow.
   ═══════════════════════════════════════════════════════════════════ */

/* Page-level rhythm */
.analytics-page {
    padding: 1rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* The native analytics content is wrapped in #analyticsNativeContent so we
   can swap it out for a custom dashboard via the picker. Wrapping it in a
   div meant the toolbar/KPIs/charts/tables rows lost the .analytics-page
   flex gap (they're now children of the wrapper, not the page). Re-apply
   the same flex column rhythm so the cards have proper breathing room. */
#analyticsNativeContent {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* When a custom dashboard is mounted inline on the Analytics page, give
   it the same outer rhythm as native — same gap between the picker bar
   above and the dashboard canvas below. */
#analyticsCustomViewerHost {
    margin: 0;
}

/* ──── Toolbar ──── */
/* Stays pinned at the top of the scroll viewport so the Period / Status /
   Funeral Home / Insurance filters are always reachable while scrolling
   through the KPIs, charts, and tables. Sticks relative to .main-content
   (the scroll container); the Dashboard picker bar above scrolls away and
   the toolbar pins flush below the 60px global header. */
.analytics-page .analytics-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.07);
}
.analytics-page .analytics-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.1rem;
    align-items: flex-end;
    flex: 1;
    min-width: 0;
}
.analytics-page .analytics-toolbar-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}
.analytics-page .analytics-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.analytics-page .analytics-filter-field--wide { min-width: 220px; flex: 1 1 220px; max-width: 320px; }
.analytics-page .analytics-filter-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.analytics-page .analytics-filter-select {
    width: 100%;
    height: 36px;
    padding: 0 32px 0 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231E6332' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1.5px solid #e5e1da;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.analytics-page .analytics-filter-select:hover { border-color: #c4bba9; }
.analytics-page .analytics-filter-select:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}

/* ===== Searchable multi-select (Status / Funeral Home / Insurance) ===== */
.ams-wrap { position: relative; width: 100%; }
.ams-trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%; height: 36px; padding: 0 12px;
    font-size: 13px; font-weight: 500; color: #1f2937;
    background: #fff; border: 1.5px solid #e5e1da; border-radius: 9px;
    cursor: pointer; box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ams-trigger:hover { border-color: #c4bba9; }
.ams-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ams-label.ams-active { color: #1E6332; font-weight: 600; }
.ams-arrow { color: #1E6332; font-size: 11px; flex-shrink: 0; }
.ams-wrap:has(.ams-panel[style*="block"]) .ams-trigger { border-color: #1E6332; box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12); }

.ams-panel {
    position: fixed; z-index: 9999;
    background: #fff; border: 1px solid #e5e1da; border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.16);
    min-width: 220px; max-width: 380px; overflow: hidden;
    font-size: 13px;
}
.ams-search-wrap { position: relative; padding: 8px; border-bottom: 1px solid #f0ede8; }
.ams-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 12px; }
.ams-search {
    width: 100%; padding: 7px 10px 7px 28px; box-sizing: border-box;
    border: 1px solid #e5e1da; border-radius: 7px; font-size: 13px; outline: none;
}
.ams-search:focus { border-color: #1E6332; box-shadow: 0 0 0 3px rgba(30,99,50,0.10); }
.ams-actions { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid #f0ede8; }
.ams-action-btn {
    flex: 1; padding: 6px; border: 1px solid #e5e1da; border-radius: 7px;
    background: #f9f7f4; font-size: 12px; font-weight: 600; color: #374151; cursor: pointer;
    transition: all 0.12s ease;
}
.ams-action-btn:hover { background: #F4F0E9; border-color: #1E6332; color: #1E6332; }
.ams-options { max-height: 300px; overflow-y: auto; padding: 5px; }
.ams-options::-webkit-scrollbar { width: 8px; }
.ams-options::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2F8542, #1E6332); border-radius: 8px; }
.ams-item {
    display: flex; align-items: center; gap: 9px; padding: 8px 9px;
    border-radius: 7px; cursor: pointer; color: #374151;
}
.ams-item:hover { background: #F4F0E9; }
.ams-item.checked { color: #1E6332; font-weight: 600; }
.ams-item input { accent-color: #1E6332; cursor: pointer; width: 15px; height: 15px; flex-shrink: 0; }
.ams-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ams-empty { padding: 14px; text-align: center; color: #9ca3af; font-size: 13px; }

/* Custom Range — From/To date inputs (match the select box, no caret) */
.analytics-page .analytics-custom-range-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}
.analytics-page .analytics-custom-range-sep {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}
.analytics-page .analytics-date-input {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    background: #fff;
    border: 1.5px solid #e5e1da;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.analytics-page .analytics-date-input:hover { border-color: #c4bba9; }
.analytics-page .analytics-date-input:focus {
    outline: none;
    border-color: #1E6332;
    box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}
.analytics-page .analytics-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    filter: invert(28%) sepia(45%) saturate(700%) hue-rotate(95deg);
}

/* Reuse existing .analytics-clear-btn + .export-dropdown-btn — only nudge sizing */
.analytics-page .analytics-clear-btn { height: 36px; }
.analytics-page .export-dropdown-btn { height: 36px; }

/* ──── KPI cards — equal-width grid with cleaner internal layout ──── */
.analytics-page .analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}
@media (max-width: 1280px) {
    .analytics-page .analytics-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .analytics-page .analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.analytics-page .analytics-kpi-card {
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 14px;
    padding: 18px 18px 16px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    /* Reset old reports.css rules that add ::after / extra borders */
}
.analytics-page .analytics-kpi-card::before,
.analytics-page .analytics-kpi-card::after { content: none !important; }
.analytics-page .analytics-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    border-color: #d4cdc0;
}
.analytics-page .analytics-kpi-card:hover::after { transform: none; opacity: 0; }

.analytics-page .analytics-kpi-card .kpi-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.analytics-page .analytics-kpi-card .kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.analytics-page .kpi-icon--info    { background: rgba(59,130,246,0.10);  color: #3b82f6; }
.analytics-page .kpi-icon--purple  { background: rgba(99,102,241,0.10);  color: #6366f1; }
.analytics-page .kpi-icon--primary { background: rgba(30,99,50,0.10);    color: #1E6332; }
.analytics-page .kpi-icon--warning { background: rgba(245,158,11,0.12);  color: #b45309; }
.analytics-page .kpi-icon--success { background: rgba(24,167,75,0.10);   color: #18A74B; }
.analytics-page .kpi-icon--familypay { background: rgba(30,99,50,0.08); }
.analytics-page .kpi-icon .kpi-icon-img { width: 20px; height: 20px; object-fit: contain; display: block; }

.analytics-page .analytics-kpi-card .kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.analytics-page .kpi-trend--up      { background: rgba(24,167,75,0.10); color: #166534; }
.analytics-page .kpi-trend--down    { background: rgba(220,38,38,0.10); color: #b91c1c; }
.analytics-page .kpi-trend--neutral { background: #f3f4f6;              color: #6b7280; }
.analytics-page .kpi-trend i { font-size: 9px; }

.analytics-page .analytics-kpi-card { container-type: inline-size; }
.analytics-page .analytics-kpi-card .kpi-value {
    /* Scale with the card so big dollar amounts stay on one line
       (they used to break mid-number: "$62,640,104." / "34"). */
    font-size: clamp(15px, 10.5cqi, 26px);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.analytics-page .analytics-kpi-card .kpi-label {
    font-size: 13px;
    color: #4b5563;
    font-weight: 600;
    line-height: 1.2;
}
.analytics-page .analytics-kpi-card .kpi-sub {
    font-size: 11.5px;
    color: #9ca3af;
    font-weight: 500;
    margin-top: 2px;
}
/* Hide the stale "Click to view details" hint baked in by reports.css */
.analytics-page .analytics-kpi-card .kpi-drilldown-hint { display: none; }

/* ── KPI sparkline (the selected period, bucketed) ── */
.analytics-page .analytics-kpi-card .kpi-spark {
    margin-top: 10px;
    height: 36px;
    width: 100%;
}
.analytics-page .analytics-kpi-card .kpi-spark:empty { display: none; }
.analytics-page .kpi-spark-svg {
    width: 100%;
    height: 36px;
    display: block;
    overflow: visible;
    transition: filter 0.18s ease;
}
.analytics-page .analytics-kpi-card:hover .kpi-spark-svg {
    filter: saturate(1.18) brightness(1.02);
}

/* ── KPI comparison line (vs prior period · value) ── */
.analytics-page .analytics-kpi-card .kpi-compare {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0ede6;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    line-height: 1.3;
    min-height: 16px;
}
.analytics-page .kpi-compare .kpi-cmp-base {
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 10px;
}
.analytics-page .kpi-compare .kpi-cmp-val {
    color: #4b5563;
    font-weight: 800;
}
.analytics-page .kpi-compare .kpi-cmp-extra {
    margin-left: auto;
    color: #9ca3af;
    font-weight: 600;
    background: #f5f3ee;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
}
.analytics-page .kpi-compare--muted {
    color: #9ca3af;
    font-weight: 600;
}
.analytics-page .kpi-compare--muted i { margin-right: 5px; opacity: 0.7; }

/* Trend pill — slightly roomier for the signed % + nicer arrows */
.analytics-page .analytics-kpi-card .kpi-trend { padding: 4px 9px; white-space: nowrap; }
.analytics-page .analytics-kpi-card .kpi-trend i { font-size: 10px; }

/* ──── Layout grids for charts + tables row ──── */
.analytics-page .analytics-grid {
    display: grid;
    gap: 14px;
}
.analytics-page .analytics-grid--charts {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.analytics-page .analytics-grid--tables {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 1100px) {
    .analytics-page .analytics-grid--charts,
    .analytics-page .analytics-grid--tables { grid-template-columns: 1fr; }
}

/* ──── Card shell — used by chart, donut, and table sections ──── */
.analytics-page .analytics-card {
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.analytics-page .analytics-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #efece6;
    background: linear-gradient(180deg, #fff 0%, #fafaf6 100%);
    flex-shrink: 0;
}
.analytics-page .analytics-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.analytics-page .analytics-card-title h5 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.analytics-page .analytics-card-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.analytics-page .analytics-card-icon--green { background: rgba(30,99,50,0.10); color: #1E6332; }
.analytics-page .analytics-card-icon--blue  { background: rgba(59,130,246,0.10); color: #3b82f6; }
.analytics-page .analytics-card-meta {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}
.analytics-page .analytics-card-body { padding: 18px; flex: 1; min-height: 0; }
.analytics-page .analytics-card-body--scroll {
    padding: 0;
    max-height: 480px;
    overflow-y: auto;
}
.analytics-page .analytics-card-footer {
    padding: 10px 18px;
    border-top: 1px solid #efece6;
    background: #fafaf6;
    text-align: center;
    flex-shrink: 0;
}

/* ──── Bar chart — cleaner spacing inside card body ──── */
.analytics-page .analytics-card--chart .analytics-card-body { min-height: 320px; }
.analytics-page .analytics-card--chart .chart-body {
    padding: 26px 6px 0;
    min-height: 280px;
    position: relative;          /* anchor for the trend-line SVG + tooltip */
    display: flex;
    align-items: flex-end;       /* bars grow up from the baseline */
    justify-content: space-between;
    gap: 8px;
}
/* Each month = a column: bar on top, label underneath */
.chart-body .chart-bar-group {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}
.chart-body .chart-bar {
    width: 100%;
    max-width: 52px;
    min-height: 3px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, #2F8542 0%, #1E6332 100%);
    transform-origin: bottom;    /* hover scaleY grows up from the baseline */
}
.chart-body .chart-bar .chart-bar-value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    font-size: 0.66rem;
    font-weight: 600;
    color: #214A3E;
    white-space: nowrap;
    pointer-events: none;
}
.chart-body .chart-bar-label {
    margin-top: 8px;
    font-size: 0.72rem;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}

/* ──── Monthly Claims Overview — forecasting ──── */
.chart-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Value / Count segmented toggle */
.chart-toggle-group {
    display: inline-flex;
    border: 1px solid #dee2e6;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}
.chart-toggle-btn {
    border: none;
    background: #fff;
    color: #6c757d;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
    cursor: pointer;
    transition: all 0.18s ease;
}
.chart-toggle-btn + .chart-toggle-btn { border-left: 1px solid #dee2e6; }
.chart-toggle-btn:hover { background: #F4F0E9; color: #1E6332; }
.chart-toggle-btn.active { background: #1E6332; color: #fff; }

.chart-forecast-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}
.chart-forecast-btn i { font-size: 0.78rem; }
.chart-forecast-btn:hover:not(.disabled) {
    border-color: #1E6332;
    color: #1E6332;
    background: #F4F0E9;
}
.chart-forecast-btn.active {
    background: #1E6332;
    border-color: #1E6332;
    color: #fff;
}
.chart-forecast-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f3f4f6;
}

/* Projected (forecast) bars — striped + dashed so they read as estimates */
.chart-bar.forecast {
    background: repeating-linear-gradient(135deg,
        rgba(30,99,50,0.20) 0, rgba(30,99,50,0.20) 6px,
        rgba(30,99,50,0.07) 6px, rgba(30,99,50,0.07) 12px);
    border: 1.5px dashed #1E6332;
    box-sizing: border-box;
}
.chart-bar.forecast:hover { opacity: 0.85; transform: scaleY(1.02); }
.chart-bar-group--forecast { opacity: 0.95; }
.chart-bar-group--forecast .chart-bar-value { color: #1E6332; }
.chart-bar-fc-tag {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1E6332;
    background: rgba(30,99,50,0.12);
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;
}

/* Regression trend line overlay */
.analytics-trend-svg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: visible;
}
.analytics-trend-line {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.analytics-trend-line--forecast {
    stroke-dasharray: 6 5;
    opacity: 0.9;
}
.analytics-trend-dot {
    fill: #fff;
    stroke: #f59e0b;
    stroke-width: 2;
    pointer-events: all;
    cursor: pointer;
    transition: r 0.12s ease;
}
.analytics-trend-dot:hover { r: 6; }
.analytics-trend-dot--forecast { fill: #f59e0b; stroke: #b45309; }

.analytics-trend-tip {
    position: absolute;
    transform: translate(-50%, -100%);
    background: #1f2937;
    color: #fff;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 0.72rem;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
    z-index: 6;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.analytics-trend-tip.show { opacity: 1; visibility: visible; }
.analytics-trend-tip .att-mon { font-weight: 700; margin-right: 6px; }
.analytics-trend-tip .att-tr,
.analytics-trend-tip .att-fc {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 4px;
    margin-right: 6px;
}
.analytics-trend-tip .att-tr { background: rgba(245,158,11,0.25); color: #fbbf24; }
.analytics-trend-tip .att-fc { background: rgba(245,158,11,0.9);  color: #1f2937; }
.analytics-trend-tip .att-val { font-weight: 700; }

/* ──── Donut chart card — center the donut + legend, balance whitespace ──── */
.analytics-page .analytics-card--donut .analytics-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
.analytics-page .analytics-card--donut .donut-chart-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.analytics-page .analytics-card--donut .donut-legend {
    flex: 1;
    min-width: 130px;
}

/* ──── Tables — clean header, tight rows, sticky thead ──── */
.analytics-page .analytics-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.analytics-page .analytics-table thead th {
    position: sticky;
    top: 0;
    background: #f5f3ee;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px;
    border-bottom: 1px solid #e8e3da;
    white-space: nowrap;
    z-index: 2;
}
.analytics-page .analytics-table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: #1f2937;
    border-bottom: 1px solid #f1ede7;
    vertical-align: middle;
}
.analytics-page .analytics-table tbody tr:last-child td { border-bottom: none; }
.analytics-page .analytics-table tbody tr.analytics-clickable-row { cursor: pointer; transition: background-color 0.15s ease; }
/* Fees column — readable dark orange (replaces the hard-to-read light yellow) */
.analytics-page .analytics-table .analytics-fee-amt { color: #c2410c; }
body.dark-theme .analytics-page .analytics-table .analytics-fee-amt { color: #fb923c; }
.analytics-page .analytics-table tbody tr.analytics-clickable-row:hover { background: #faf6ec; }
.analytics-page .analytics-table .badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

/* ──── Load More button ──── */
.analytics-page .analytics-load-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    color: #1E6332;
    border: 1.5px solid #1E6332;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.analytics-page .analytics-load-more:hover { background: #1E6332; color: #fff; }
.analytics-page .analytics-load-more i { font-size: 10px; }

/* ──── Custom scrollbar for table bodies — green-themed ──── */
.analytics-page .analytics-card-body--scroll::-webkit-scrollbar { width: 8px; }
.analytics-page .analytics-card-body--scroll::-webkit-scrollbar-track { background: transparent; }
.analytics-page .analytics-card-body--scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2F8542 0%, #1E6332 100%);
    border-radius: 999px;
}

/* ──── Dark theme ──── */
body.dark-theme .analytics-page .analytics-toolbar,
body.dark-theme .analytics-page .analytics-card,
body.dark-theme .analytics-page .analytics-kpi-card { background: #1e293b; border-color: #334155; }
body.dark-theme .analytics-page .analytics-filter-select { background-color: #0f172a; color: #f1f5f9; border-color: #334155; }
body.dark-theme .analytics-page .analytics-filter-label { color: #94a3b8; }
body.dark-theme .analytics-page .analytics-card-header { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); border-bottom-color: #334155; }
body.dark-theme .analytics-page .analytics-card-title h5,
body.dark-theme .analytics-page .analytics-kpi-card .kpi-value { color: #f1f5f9; }
body.dark-theme .analytics-page .analytics-card-meta,
body.dark-theme .analytics-page .analytics-kpi-card .kpi-label,
body.dark-theme .analytics-page .analytics-kpi-card .kpi-sub { color: #cbd5e1; }
body.dark-theme .analytics-page .analytics-table thead th { background: #0f172a; color: #94a3b8; border-bottom-color: #334155; }
body.dark-theme .analytics-page .analytics-table tbody td { color: #e2e8f0; border-bottom-color: #334155; }
body.dark-theme .analytics-page .analytics-table tbody tr.analytics-clickable-row:hover { background: #243254; }
body.dark-theme .analytics-page .analytics-card-footer { background: #0f172a; border-top-color: #334155; }
body.dark-theme .analytics-page .analytics-load-more { background: transparent; color: #4ade80; border-color: #4ade80; }
body.dark-theme .analytics-page .analytics-load-more:hover { background: #4ade80; color: #0b1322; }


/* ═══════════════════════════════════════════════════════════════
   AnalyticsViewPicker — dashboard switcher (Native vs Shared)
   Mounts on top of the Analytics page AND the Custom Analytics
   viewer mode so users can flip between the hardcoded view and
   any dashboards shared with them.
   ═══════════════════════════════════════════════════════════════ */
.analytics-view-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 14px;
    margin-bottom: 14px;
}
/* Same chrome inside the Custom Analytics viewer (caBuilderView) */
.ca-viewer-picker-bar {
    margin: 14px 24px 0;
    border-radius: 12px;
}
.analytics-view-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.analytics-view-bar-label i { color: #C19A6B; font-size: 13px; }

.analytics-view-picker-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.analytics-view-picker-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #6b7280;
    font-size: 13px;
    font-style: italic;
}
.analytics-view-picker-loading i { color: #1E6332; }

/* Trigger button — shows the active dashboard */
.analytics-view-trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 10px;
    background: #fff;
    border: 1.5px solid #1E6332;
    border-radius: 10px;
    cursor: pointer;
    color: #214A3E;
    transition: all 180ms ease;
    min-width: 280px;
    max-width: 480px;
    text-align: left;
}
.analytics-view-trigger:hover {
    background: #f4f0e9;
    box-shadow: 0 2px 8px rgba(30, 99, 50, 0.12);
}
.analytics-view-trigger.is-open {
    background: #1E6332;
    color: #fff;
    box-shadow: 0 4px 14px rgba(30, 99, 50, 0.25);
}
.analytics-view-trigger.is-open .analytics-view-trigger-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.analytics-view-trigger.is-open .analytics-view-trigger-sub { color: rgba(255, 255, 255, 0.8); }
.analytics-view-trigger.is-open .analytics-view-trigger-caret { transform: rotate(180deg); }

.analytics-view-trigger-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    transition: background 180ms ease;
}
.analytics-view-trigger-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
    flex: 1;
}
.analytics-view-trigger-name {
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analytics-view-trigger-sub {
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analytics-view-trigger-caret {
    margin-left: auto;
    font-size: 11px;
    transition: transform 180ms ease;
    flex-shrink: 0;
}

/* Dropdown menu */
.analytics-view-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18);
    min-width: 380px;
    max-width: 540px;
    max-height: 480px;
    overflow-y: auto;
    padding: 6px;
    animation: avpMenuIn 180ms ease;
}
@keyframes avpMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.analytics-view-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: #6b7280;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.analytics-view-group-count {
    background: #f4f0e9;
    color: #214A3E;
    border: 1px solid #e8e3da;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
}

.analytics-view-group-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    margin: 4px;
    background: #fafaf6;
    border: 1px dashed #ede8df;
    border-radius: 10px;
    color: #6b7280;
}
.analytics-view-group-empty > i {
    font-size: 22px;
    color: #C19A6B;
    flex-shrink: 0;
}
.analytics-view-group-empty-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.35;
}
.analytics-view-group-empty-text strong {
    font-size: 13px;
    color: #214A3E;
    font-weight: 700;
}
.analytics-view-group-empty-text span {
    font-size: 11.5px;
    color: #6b7280;
}

/* Each menu option */
.analytics-view-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 150ms ease;
    color: #1f2937;
}
.analytics-view-option + .analytics-view-option { margin-top: 2px; }
.analytics-view-option:hover { background: #fafaf6; }
.analytics-view-option.is-active {
    background: linear-gradient(135deg, #f0faf4 0%, #e8f5ed 100%);
    border: 1px solid #bee5c8;
    padding: 9px 11px;
}
.analytics-view-option-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #f4f0e9;
    color: #214A3E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}
.analytics-view-option.is-active .analytics-view-option-icon {
    background: linear-gradient(135deg, #1E6332 0%, #2F8542 100%);
    color: #fff;
}
.analytics-view-option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.analytics-view-option-name {
    font-size: 13px;
    font-weight: 700;
    color: #214A3E;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analytics-view-option-sub {
    font-size: 11px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analytics-view-option-blocks {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #e8e3da;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    flex-shrink: 0;
}
.analytics-view-option-blocks i { color: #C19A6B; font-size: 9.5px; }

/* Status pill for My Dashboards entries (Draft / etc) */
.analytics-view-option-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    margin-right: 4px;
}
.analytics-view-option-status-pill--draft {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
body.dark-theme .analytics-view-option-status-pill--draft {
    background: #3a2d18;
    color: #fcd34d;
    border-color: #715b35;
}
.analytics-view-option-check {
    color: #1E6332;
    font-size: 13px;
    flex-shrink: 0;
}

/* Mobile — slim down padding + min-width */
@media (max-width: 768px) {
    .analytics-view-bar { padding: 10px 12px; gap: 10px; }
    .ca-viewer-picker-bar { margin: 10px 12px 0; }
    .analytics-view-bar-label span { display: none; }
    .analytics-view-trigger {
        min-width: 0;
        width: 100%;
        max-width: none;
    }
    .analytics-view-menu {
        min-width: 0;
        width: calc(100vw - 32px);
        max-width: none;
    }
}

/* Dark theme */
body.dark-theme .analytics-view-bar {
    background: #1a2438;
    border-color: #334155;
}
body.dark-theme .analytics-view-bar-label { color: #94a3b8; }
body.dark-theme .analytics-view-bar-label i { color: #C19A6B; }
body.dark-theme .analytics-view-picker-loading { color: #94a3b8; }
body.dark-theme .analytics-view-trigger {
    background: #243149;
    border-color: #2F8542;
    color: #f1f5f9;
}
body.dark-theme .analytics-view-trigger:hover { background: #1f2a40; }
body.dark-theme .analytics-view-trigger-sub { color: #94a3b8; }
body.dark-theme .analytics-view-menu {
    background: #1a2438;
    border-color: #334155;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
body.dark-theme .analytics-view-group-head { color: #94a3b8; }
body.dark-theme .analytics-view-group-count {
    background: #243149;
    border-color: #475569;
    color: #cbd5e1;
}
body.dark-theme .analytics-view-group-empty {
    background: #243149;
    border-color: #475569;
    color: #94a3b8;
}
body.dark-theme .analytics-view-group-empty-text strong { color: #f1f5f9; }
body.dark-theme .analytics-view-option { color: #f1f5f9; }
body.dark-theme .analytics-view-option:hover { background: #243149; }
body.dark-theme .analytics-view-option.is-active {
    background: linear-gradient(135deg, #14302a 0%, #1a3d33 100%);
    border-color: #2F8542;
}
body.dark-theme .analytics-view-option-icon {
    background: #243149;
    color: #cbd5e1;
}
body.dark-theme .analytics-view-option-name { color: #f1f5f9; }
body.dark-theme .analytics-view-option-sub { color: #94a3b8; }
body.dark-theme .analytics-view-option-blocks {
    background: #243149;
    border-color: #475569;
    color: #cbd5e1;
}

/* Status donut legend: swatch, label and count on one line (the item had no
   layout rule, so the swatch sat on its own line above the text). */
.analytics-page .donut-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.analytics-page .donut-legend-color { flex-shrink: 0; }
.analytics-page .donut-legend-label { white-space: nowrap; }
.analytics-page .donut-legend-value {
    margin-left: auto;
    padding-left: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.analytics-page .analytics-card--donut .donut-legend { min-width: 180px; }

/* ── Dark theme gaps (found Sep 16, 2026) ────────────────────────────────
   These three were never given a dark variant, so in dark mode they kept
   their light-mode near-black / deep-green and rendered essentially
   invisible on the dark card (#1e293b): the donut's centre count measured a
   contrast ratio of 1.0. Custom Analytics already had the equivalent rule
   (body.dark-theme .ca-donut-center-value) — native Analytics was missed. */
body.dark-theme .donut-center-value { color: #e2e8f0; }
/* `.chart-body .chart-bar .chart-bar-value` (3 classes) sets #214A3E, so the
   dark override has to match that specificity or it silently loses. */
body.dark-theme .chart-body .chart-bar .chart-bar-value,
body.dark-theme .chart-bar-group--forecast .chart-bar-value { color: #86efac; }
body.dark-theme .chart-bar-fc-tag {
    color: #86efac;
    background: rgba(134, 239, 172, 0.14);
}