/* Shared tokens keep Bootstrap, MudBlazor and isolated module styles on the same palette. */
:root {
    --cv-surface: #ffffff;
    --cv-hover: #eeeeee;
    --cv-primary-contrast: #ffffff;
    --cv-secondary-contrast: #ffffff;
    --cv-error-contrast: #ffffff;
    --cv-info-contrast: #ffffff;
    --sidebar-background: #20201E;
}
html[data-theme="light"] {
    --mud-palette-lines-inputs: #A6A6A6;
    --mud-palette-text-primary: #1D1D1D;
    --text-link-color: #0ba555;
    --cv-theme-info: var(--text-link-color);
    --cv-theme-info-bg: color-mix(in srgb, var(--text-link-color) 12%, #fff);
    --filter-summary-color: #333333;
    --cv-theme-warning: #CB8B0C;
    --cv-theme-warning-bg: #FEF5CC;
    --cv-theme-success-bg: #C1E7D4;
    --warning-text-color: #CB8B0C;
    --navigation-accent: #0F4529;
}

/* Filter summary uses the theme face even when a page sets a system font on its wrapper. */
.filter-chips-container,
.filter-chips-container .mud-typography,
.filter-chips-container .mud-chip.filter-chip,
.filter-chips-container .mud-chip-content {
    font-family: var(--cv-font-body);
}

/* Link icons, including voucher marks, use the shared text-link color. Explicit icon colors (error, warning) keep their own. */
html[data-theme="light"] .mud-link:not(.menu-node__control):not(.nav-link):not(.mud-button-root),
html[data-theme="light"] .mud-link:not(.menu-node__control):not(.nav-link):not(.mud-button-root):hover,
html[data-theme="light"] .mud-link:not(.menu-node__control):not(.nav-link):not(.mud-button-root) .mud-icon-root {
    color: var(--text-link-color);
}

/* Applied filter summary, shared by reports and corrections. */
html[data-theme="light"] .filter-chips-container,
html[data-theme="light"] .filter-chips-container .mud-typography,
html[data-theme="light"] .filter-chips-container .mud-chip.filter-chip {
    color: var(--filter-summary-color) !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* Onboarding paints text and hairlines with slate rgba(15, 23, 42, …).
       These tokens keep that markup, and flip it onto the dark palette. */
    --onb-ink: var(--cv-theme-ink);
    --onb-ink-strong: var(--cv-theme-ink);
    --onb-ink-soft: var(--cv-theme-muted);
    --onb-ink-muted: var(--cv-theme-muted);
    --onb-ink-faint: color-mix(in srgb, var(--cv-theme-muted) 75%, transparent);
    --onb-line: var(--cv-theme-border);
    --onb-line-soft: color-mix(in srgb, var(--cv-theme-border) 70%, transparent);
    /* Peach AI panels stay #fdf3ea / #c45d2e in light mode via the component fallback. */
    --cv-onboarding-ai-soft: color-mix(in srgb, #e8b496 16%, var(--cv-theme-surface));
    --cv-onboarding-ai-accent-text: #e8b496;
    --cv-ink: #f2f5f3;
    --cv-muted: #bdc5c1;
    --cv-border: #46554c;
    --cv-background: #20201E;
    --cv-surface: #2A2A28;
    --cv-hover: #283a30;
    --cv-green: #8ff2c2;
    --cv-green-hover: #a9f7d1;
    --cv-error: #ffb4ab;
    --cv-primary-contrast: #0f240d;
    --cv-secondary-contrast: #2A2A28;
    --cv-error-contrast: #40100d;
    --cv-info-contrast: #0f240d;
    --cv-theme-ink: #f2f5f3;
    --cv-theme-muted: #bdc5c1;
    --cv-theme-border: #46554c;
    --cv-theme-surface: #2A2A28;
    --cv-theme-raised: #30302E;
    --cv-theme-info: #9bcfff;
    --cv-theme-success: #8ff2c2;
    --cv-theme-error: #ffb4ab;
    --cv-theme-warning: #ffd88a;
    --cv-theme-purple: #dfb5ff;
    --cv-theme-info-bg: #203747;
    --cv-theme-success-bg: #203d2f;
    --cv-theme-error-bg: #482b2b;
    --cv-theme-warning-bg: #443720;
    --cv-theme-purple-bg: #382d46;
    --reports-number-color-bold: #f2f5f3;
    --reports-number-color-normal: #f2f5f3;
    --secondary-text: #bdc5c1;
    --warning-text-color: #ffd88a;
    --sidebar-background: #20201E;
    --sidebar-border: #46554c;
    --navigation-accent: #0f4529;
    --bs-body-color: #f2f5f3;
    --bs-body-color-rgb: 242, 245, 243;
    --bs-body-bg: #101713;
    --bs-body-bg-rgb: 16, 23, 19;
    --bs-secondary-color: #bdc5c1;
    --bs-secondary-bg: #30302E;
    --bs-tertiary-bg: #2A2A28;
    --bs-border-color: #46554c;
    --bs-emphasis-color: #f2f5f3;
    --bs-emphasis-color-rgb: 242, 245, 243;
    --bs-link-color: #8ff2c2;
    --bs-link-hover-color: #a9f7d1;
    --bs-link-color-rgb: 143, 242, 194;
    --bs-primary-rgb: 143, 242, 194;
    --bs-secondary-rgb: 189, 197, 193;
    --bs-success-rgb: 143, 242, 194;
    --bs-danger-rgb: 255, 180, 171;
    --bs-light-rgb: 36, 52, 43;
    --mud-palette-surface: #2A2A28; 
    --mud-palette-background: #2A2A28;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.version-footer .theme-toggle { color: #ffffff; }
.theme-toggle:hover { background: rgba(255,255,255,.15); }
.theme-toggle:focus-visible { outline: 2px solid #8ff2c2; outline-offset: 2px; }
.theme-toggle:disabled { opacity: .5; cursor: default; }

/* These tables supply their own variables and may be rendered inside portal dialogs. */
html[data-theme="dark"] .table {
    --bs-table-color: var(--cv-ink);
    --bs-table-bg: var(--cv-surface);
    --bs-table-border-color: var(--cv-border);
    --bs-table-striped-color: var(--cv-ink);
    --bs-table-striped-bg: #1c2922;
    --bs-table-hover-color: var(--cv-ink);
    --bs-table-hover-bg: var(--cv-hover);
    --bs-table-active-color: var(--cv-ink);
    --bs-table-active-bg: var(--cv-hover);
}
html[data-theme="dark"] .mud-table-cell { color: var(--cv-ink); }
html[data-theme="dark"] .mud-table-head { background: var(--cv-theme-raised, #eeeeee); }
html[data-theme="dark"] .mud-input::placeholder { color: var(--cv-muted); opacity: 1; }
html[data-theme="dark"] .mud-chip.mud-chip-color-success { color: #a9f7d1 !important; }
html[data-theme="dark"] .mud-chip.mud-chip-color-info { color: #9bcfff !important; }
html[data-theme="dark"] .customer-onboarding-header-logo.is-for-light { display: none; }
html:not([data-theme="dark"]) .customer-onboarding-header-logo.is-for-dark { display: none; }
html[data-theme="dark"] .customer-onboarding-status-pill.is-muted,
html[data-theme="dark"] .customer-onboarding-status-pill.is-idle {
    background: var(--cv-theme-raised);
    color: var(--cv-theme-muted);
    border: 1px solid var(--onb-line-soft);
}
html[data-theme="dark"] .customer-onboarding-upload-composer,
html[data-theme="dark"] .customer-onboarding-upload-composer:hover,
html[data-theme="dark"] .customer-onboarding-bulk-composer,
html[data-theme="dark"] .customer-onboarding-bulk-composer:hover,
html[data-theme="dark"] .customer-onboarding-ai-chrome-badge,
html[data-theme="dark"] .customer-onboarding-select-section-title-row .customer-onboarding-ai-chrome-badge {
    background: var(--cv-onboarding-ai-soft);
}
html[data-theme="dark"] .customer-onboarding-ai-chrome-badge,
html[data-theme="dark"] .customer-onboarding-select-section-title-row .customer-onboarding-ai-chrome-badge {
    color: var(--cv-onboarding-ai-accent-text);
}
html[data-theme="dark"] .bg-white { background-color: var(--cv-surface) !important; }
html[data-theme="dark"] .text-dark { color: var(--cv-ink) !important; }

html[data-theme] .variance-positive { color: var(--cv-theme-success, #2e7d32) !important; }
html[data-theme] .variance-negative { color: var(--cv-theme-error, #c62828) !important; }

/* ApexCharts labels use a dark default fill, so axis, legend, and slice values
   disappear on dark insight cards. The tooltip keeps its own light surface. */
html[data-theme="dark"] .apexcharts-canvas :is(
    .apexcharts-text,
    .apexcharts-legend-text,
    .apexcharts-datalabel,
    .apexcharts-datalabel-label,
    .apexcharts-datalabel-value
) {
    fill: var(--cv-theme-ink) !important;
    color: var(--cv-theme-ink) !important;
}

/* Slice values sit on both light and dark wedges, so a dark stroke keeps them readable. */
html[data-theme="dark"] .apexcharts-canvas :is(.apexcharts-datalabel, .apexcharts-datalabel-label, .apexcharts-datalabel-value) {
    stroke: var(--black);
    stroke-width: 0.6px;
    paint-order: stroke;
}

/* Period range picker cells are light hex colors. In dark mode use theme surfaces,
   and mix a partial selection into the surface so it is not a pale mint bar.
   Hover is scoped under the picker so it beats the component's brightness(0.97). */
html[data-theme="dark"] .period-range-picker-container {
    --prp-cell-bg: var(--cv-theme-raised, #30302E);
    --prp-cell-bg-alt: var(--cv-theme-surface, #2A2A28);
    --prp-row-years-bg: color-mix(in srgb, var(--cv-theme-ink, #f2f5f3) 8%, var(--cv-theme-surface, #2A2A28));
    --prp-row-quarters-bg: var(--cv-theme-surface, #2A2A28);
    --prp-row-months-bg: var(--cv-theme-raised, #30302E);
    --prp-row-days-bg: var(--cv-theme-surface, #2A2A28);
    --foreground-color: var(--cv-theme-ink, #f2f5f3);
    --secondary-selection-bg: color-mix(in srgb, var(--mud-palette-primary, #8ff2c2) 36%, var(--cv-theme-surface, #2A2A28));
    --secondary-selection-fg: var(--cv-theme-ink, #f2f5f3);
}

/* Profile select popover is portaled outside the page, and its field fill was a light hex.
   Dark mode keeps the list and the value on the theme surface. */
html[data-theme="dark"] .acq-profile-popover,
html[data-theme="dark"] .acq-profile-popover .mud-list,
html[data-theme="dark"] .acq-profile-popover .mud-list-item {
    background-color: var(--cv-theme-surface);
    color: var(--cv-theme-ink);
}

html[data-theme="dark"] .acq-profile-popover .mud-list-item:hover,
html[data-theme="dark"] .acq-profile-popover .mud-list-item.mud-selected-item {
    background-color: var(--cv-hover);
}

html[data-theme="dark"] .period-range-picker-container .year-cell.clickable:hover,
html[data-theme="dark"] .period-range-picker-container .quarter-cell.clickable:hover,
html[data-theme="dark"] .period-range-picker-container .month-cell.clickable:hover,
html[data-theme="dark"] .period-range-picker-container .day-cell.clickable:hover {
    filter: brightness(1.18);
}

/* Paper output always uses an opaque light palette, regardless of screen appearance. */
@media print {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html[data-theme] {
        color-scheme: light;
        --cv-ink: #1D1D1D; --cv-muted: #616161; --cv-border: #d9d9d9;
        --cv-background: #ffffff; --cv-surface: #ffffff; --cv-hover: #eeeeee;
        --cv-primary-contrast: #ffffff; --cv-secondary-contrast: #ffffff; --cv-error-contrast: #ffffff; --cv-info-contrast: #ffffff;
        --cv-green: #0f240d; --cv-green-hover: #2d8959; --cv-error: #e72323;
        --cv-theme-ink: #1D1D1D; --cv-theme-muted: #616161; --cv-theme-border: #d9d9d9;
        --cv-theme-surface: #ffffff; --cv-theme-raised: #eeeeee;
        --cv-theme-info: #1565c0; --cv-theme-success: #2e7d32; --cv-theme-error: #c62828;
        --cv-theme-warning: #704b00; --cv-theme-purple: #7b1fa2;
        --cv-theme-info-bg: #e3f2fd; --cv-theme-success-bg: #e5f3eb;
        --cv-theme-error-bg: #ffe3e3; --cv-theme-warning-bg: #fff3e0; --cv-theme-purple-bg: #f3e5f5;
        --reports-number-color-bold: #1D1D1D; --reports-number-color-normal: #1D1D1D;
        --mud-palette-text-primary: #1D1D1D; --mud-palette-text-secondary: #616161;
        --mud-palette-surface: #ffffff; --mud-palette-background: #ffffff;
        --bs-body-color: #1D1D1D; --bs-body-bg: #ffffff;
        --bs-secondary-color: #616161;
        --mud-palette-primary: #0f240d; --mud-palette-primary-text: #ffffff;
        --primary: #0f240d; --secondary: #616161; --danger: #e72323; --info: #2d8959;
    }
    html[data-theme] .table {
        --bs-table-color: #1D1D1D; --bs-table-bg: #ffffff;
        --bs-table-striped-color: #1D1D1D; --bs-table-striped-bg: #f5f5f5;
        --bs-table-hover-color: #1D1D1D; --bs-table-hover-bg: #eeeeee;
    }
    .theme-toggle { display: none !important; }
}