/*
 * Light / dark theme (NG-F41).
 *
 * <html data-theme="light|dark"> is set before first paint by the head script
 * in base_admin.html.twig and switched by the `theme` Stimulus controller.
 *
 * 1. Costiva colour tokens (--costiva-*) — new components (the My AI Usage page
 *    and its charts) use only these, so they re-theme automatically.
 * 2. A dark layer over the shared SB Admin Pro / Bootstrap 5.2 shell. Bootstrap
 *    5.2 has no data-bs-theme, so this redefines its per-component variables and
 *    the few hard-coded light colours of the app chrome. Pages that hard-code
 *    their own colours inline (some Chart.js palettes) keep them.
 */

:root {
    --costiva-bg: #f2f6fc;
    --costiva-surface: #ffffff;
    --costiva-surface-2: #f8f9fa;
    --costiva-text: #69707a;
    --costiva-heading: #363d47;
    --costiva-muted: #69707a; /* ≥ 4.5:1 on white and on --costiva-bg (WCAG AA, NG-13 axe) */
    --costiva-border: #e0e5ec;
    --costiva-input-border: #c5ccd6;
    --costiva-accent: #0061f2;
    --costiva-accent-soft: rgba(0, 97, 242, 0.1);
    --costiva-ok: #00ac69;
    --costiva-warn: #f4a100;
    --costiva-danger: #e81500;
    --costiva-tip-bg: #212832;
    --costiva-tip-text: #ffffff;
    --costiva-tip-link: #9cc3ff;
    --costiva-shadow: rgba(33, 40, 50, 0.15);
    /* Vendor colours (App\Usage\Taxonomy\VendorPresentation — keep in step). */
    --costiva-vendor-anthropic: #0061f2;
    --costiva-vendor-openai: #00ac69;
    --costiva-vendor-google: #f4a100;
    --costiva-vendor-aws-bedrock: #6900c7;
    --costiva-vendor-azure-openai: #00cfd5;
    --costiva-vendor-google-vertex: #e81500;
    --costiva-vendor-openrouter: #e30059;
    /* Chart series (NG-09/10 "View by: Model"): eight distinct hues plus a neutral "Other". */
    --costiva-series-1: #0061f2;
    --costiva-series-2: #00ac69;
    --costiva-series-3: #f4a100;
    --costiva-series-4: #6900c7;
    --costiva-series-5: #e81500;
    --costiva-series-6: #00a3b4;
    --costiva-series-7: #e30059;
    --costiva-series-8: #7a5c2e;
    --costiva-series-other: #a7aeb8;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    /* Lighter series hues stay readable on the dark surface. */
    --costiva-series-1: #5c9bff;
    --costiva-series-2: #3ddc97;
    --costiva-series-3: #ffc14d;
    --costiva-series-4: #a46bff;
    --costiva-series-5: #ff7a6b;
    --costiva-series-6: #4fd6e3;
    --costiva-series-7: #ff6fa5;
    --costiva-series-8: #c9a46b;
    --costiva-series-other: #6b7585;
    --costiva-bg: #12161d;
    --costiva-surface: #1b212b;
    --costiva-surface-2: #232a36;
    --costiva-text: #c2c8d2;
    --costiva-heading: #eef1f6;
    --costiva-muted: #959eae;
    --costiva-border: #2f3746;
    --costiva-input-border: #414b5e;
    --costiva-accent: #5c9bff;
    --costiva-accent-soft: rgba(92, 155, 255, 0.16);
    --costiva-tip-bg: #eef1f6;
    --costiva-tip-text: #1b212b;
    --costiva-tip-link: #0050c8;
    --costiva-shadow: rgba(0, 0, 0, 0.45);

    /* Bootstrap globals */
    --bs-body-color: var(--costiva-text);
    --bs-body-color-rgb: 194, 200, 210;
    --bs-body-bg: var(--costiva-bg);
    --bs-body-bg-rgb: 18, 22, 29;
    --bs-border-color: var(--costiva-border);
    --bs-border-color-translucent: rgba(255, 255, 255, 0.12);
    --bs-link-color: #79adff;
    --bs-link-hover-color: #a8caff;
}

/* ---- Dark layer over the shared shell ------------------------------------- */

[data-theme="dark"] body,
[data-theme="dark"] #layoutSidenav #layoutSidenav_content {
    background-color: var(--costiva-bg);
    color: var(--costiva-text);
}

[data-theme="dark"] h1, [data-theme="dark"] .h1,
[data-theme="dark"] h2, [data-theme="dark"] .h2,
[data-theme="dark"] h3, [data-theme="dark"] .h3,
[data-theme="dark"] h4, [data-theme="dark"] .h4,
[data-theme="dark"] h5, [data-theme="dark"] .h5,
[data-theme="dark"] h6, [data-theme="dark"] .h6 {
    color: var(--costiva-heading);
}

.text-muted { color: var(--costiva-muted) !important; } /* both themes: the template's own grey is below AA */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body { color: var(--costiva-heading) !important; }
[data-theme="dark"] .bg-white { background-color: var(--costiva-surface) !important; }
[data-theme="dark"] .bg-light { background-color: var(--costiva-surface-2) !important; }
[data-theme="dark"] hr { color: var(--costiva-border); }
[data-theme="dark"] code { color: #ff7ab8; }
[data-theme="dark"] pre { color: var(--costiva-text); }

/* Top bar */
[data-theme="dark"] .topnav.navbar-light .navbar-brand,
[data-theme="dark"] .topnav.navbar-light .nav-link { color: var(--costiva-heading); }
[data-theme="dark"] .btn-transparent-dark { color: var(--costiva-heading); }
[data-theme="dark"] .btn-transparent-dark:hover,
[data-theme="dark"] .btn-transparent-dark:focus { background-color: rgba(255, 255, 255, 0.08); color: #fff; }

/* Sidebar */
[data-theme="dark"] .sidenav-light { background-color: var(--costiva-surface); color: var(--costiva-heading); }
[data-theme="dark"] .sidenav-light .sidenav-menu .sidenav-menu-heading { color: var(--costiva-muted); }
[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link,
[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link .nav-link-icon,
[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link .sidenav-collapse-arrow { color: var(--costiva-text); }
[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link:hover,
[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link.active,
[data-theme="dark"] .sidenav-light .sidenav-menu .nav-link.active .nav-link-icon { color: var(--costiva-accent); }
[data-theme="dark"] .sidenav-light .sidenav-footer { background-color: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .sidenav-light .sidenav-footer .sidenav-footer-content .sidenav-footer-subtitle { color: var(--costiva-muted); }
[data-theme="dark"] .sidenav-light .sidenav-footer .sidenav-footer-content .sidenav-footer-title { color: var(--costiva-heading); }

/* Components (Bootstrap 5.2 per-component variables) */
[data-theme="dark"] .card {
    --bs-card-bg: var(--costiva-surface);
    --bs-card-color: var(--costiva-text);
    --bs-card-border-color: var(--costiva-border);
    --bs-card-cap-bg: rgba(255, 255, 255, 0.03);
    --bs-card-cap-color: var(--costiva-heading);
}
[data-theme="dark"] .table,
[data-theme="dark"] .datatable-table {
    --bs-table-color: var(--costiva-text);
    --bs-table-border-color: var(--costiva-border);
    --bs-table-striped-color: var(--costiva-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    --bs-table-active-color: var(--costiva-heading);
    --bs-table-active-bg: rgba(255, 255, 255, 0.08);
    --bs-table-hover-color: var(--costiva-heading);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .table-light {
    --bs-table-bg: var(--costiva-surface-2);
    --bs-table-color: var(--costiva-heading);
    --bs-table-border-color: var(--costiva-border);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .datatable-input,
[data-theme="dark"] .datatable-selector,
[data-theme="dark"] .input-group-text {
    background-color: var(--costiva-surface-2);
    color: var(--costiva-heading);
    border-color: var(--costiva-input-border);
}
[data-theme="dark"] .form-control::placeholder { color: var(--costiva-muted); }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] { background-color: var(--costiva-surface); }
[data-theme="dark"] .form-check-input:not(:checked) { background-color: var(--costiva-surface-2); border-color: var(--costiva-input-border); }
[data-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--costiva-surface);
    --bs-dropdown-color: var(--costiva-text);
    --bs-dropdown-border-color: var(--costiva-border);
    --bs-dropdown-link-color: var(--costiva-heading);
    --bs-dropdown-link-hover-color: #fff;
    --bs-dropdown-link-hover-bg: var(--costiva-surface-2);
    --bs-dropdown-header-color: var(--costiva-muted);
    --bs-dropdown-divider-bg: var(--costiva-border);
}
[data-theme="dark"] .list-group {
    --bs-list-group-bg: var(--costiva-surface);
    --bs-list-group-color: var(--costiva-text);
    --bs-list-group-border-color: var(--costiva-border);
    --bs-list-group-action-hover-bg: var(--costiva-surface-2);
    --bs-list-group-action-hover-color: var(--costiva-heading);
}
[data-theme="dark"] .modal { --bs-modal-bg: var(--costiva-surface); --bs-modal-color: var(--costiva-text); --bs-modal-border-color: var(--costiva-border); --bs-modal-header-border-color: var(--costiva-border); --bs-modal-footer-border-color: var(--costiva-border); }
[data-theme="dark"] .popover { --bs-popover-bg: var(--costiva-surface); --bs-popover-body-color: var(--costiva-text); --bs-popover-header-bg: var(--costiva-surface-2); --bs-popover-border-color: var(--costiva-border); }
[data-theme="dark"] .nav-tabs { --bs-nav-tabs-border-color: var(--costiva-border); --bs-nav-tabs-link-active-bg: var(--costiva-surface); --bs-nav-tabs-link-active-color: var(--costiva-heading); --bs-nav-tabs-link-active-border-color: var(--costiva-border) var(--costiva-border) var(--costiva-surface); }
[data-theme="dark"] .accordion { --bs-accordion-bg: var(--costiva-surface); --bs-accordion-color: var(--costiva-text); --bs-accordion-border-color: var(--costiva-border); --bs-accordion-btn-color: var(--costiva-heading); --bs-accordion-active-bg: var(--costiva-surface-2); --bs-accordion-active-color: var(--costiva-heading); }
[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-white {
    --bs-btn-bg: var(--costiva-surface-2);
    --bs-btn-color: var(--costiva-heading);
    --bs-btn-border-color: var(--costiva-input-border);
    --bs-btn-hover-bg: #2c3442;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--costiva-input-border);
}
[data-theme="dark"] .footer-admin.footer-light { color: var(--costiva-muted); }
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--costiva-border) !important; }

/* The full-screen "working" overlay in base_admin uses inline light colours. */
[data-theme="dark"] #ai-loading-overlay { background: rgba(18, 22, 29, 0.85) !important; }
[data-theme="dark"] #ai-loading-overlay > div { background: var(--costiva-surface) !important; color: var(--costiva-text); }

/* ---- Theme toggle (sidebar) -------------------------------------------------- */

.theme-toggle { background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
.theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
.theme-toggle-state {
    margin-left: auto;
    font-size: 0.75rem;
    padding: 0.05rem 0.45rem;
    border-radius: 1rem;
    background: var(--costiva-surface-2);
    color: var(--costiva-muted);
    border: 1px solid var(--costiva-border);
}
.theme-toggle-state::after { content: "Off"; }
[data-theme="dark"] .theme-toggle-state { background: var(--costiva-accent-soft); color: var(--costiva-accent); border-color: transparent; }
[data-theme="dark"] .theme-toggle-state::after { content: "On"; }