/* Dashboard shared light theme - UnityERP */
/* Base */
body.dashboard-body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: #fafafa;
    color: #171717;
    /* Ensure footer sticks to bottom on all dashboard pages */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Allow main content to grow and push footer down */
body.dashboard-body > main,
body.dashboard-body > .ue-page-content main {
    flex-grow: 1;
}

/* Cards */
.metric-card, .chart-container, .dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.metric-card:hover, .chart-container:hover, .dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-color: #d4d4d4;
}

/* ── Grid Alignment Fixes ─────────────────────────────────────────────── */
/* Force equal-height KPI cards in every grid row so cards with different
   amounts of content (badges, sub-text, progress bars) align properly.   */
.metric-card {
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow natural shrink in tiny viewports */
    height: 100%;
}
/* Stretch cards to fill their grid cell height so sibling cards match */
[class*="grid"] > .metric-card,
[class*="grid"] > .chart-container,
[class*="grid"] > .dashboard-card {
    height: 100%;
}
/* All grid containers that hold metric/dashboard cards should use
   align-items: stretch (the CSS grid default) so rows are equal height.
   Explicitly set it in case an ancestor or class overrides it.          */
[class*="grid-cols"] {
    align-items: stretch;
}

/* ── Grid alignment: equal-height rows across all dashboards ── */
/* v5.15.8: Universal rule — ANY grid-cols container gets equal-height rows.
   Previous selectors were too narrow and missed CFO pages, consolidated view,
   and JS-generated grids that don't use .metric-card or #dashboardContent. */
[class*="grid-cols"] {
    grid-auto-rows: 1fr;
}
/* Keep the explicit selectors for specificity/compat, plus add main > .grid */
.dashboard-category > [class*="grid"],
[class*="grid"]:has(> .metric-card),
#dashboardContent [class*="grid-cols"],
#consolidatedViewContainer [class*="grid-cols"],
.dashboard-section [class*="grid-cols"],
main [class*="grid-cols"],
main > .grid,
[id*="kpi"] {
    grid-auto-rows: 1fr;
    align-items: stretch;
}

/* v5.15.8: Universal card-in-grid stretch — covers bg-white rounded-xl cards,
   .dashboard-card, .metric-card, and any direct child of a grid container.
   Ensures ALL cards fill their grid cell height for alignment.              */
[class*="grid-cols"] > div,
[class*="grid"] > .metric-card,
[class*="grid"] > .chart-container,
[class*="grid"] > .dashboard-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
/* Push the last block-level child to the bottom of the card */
[class*="grid-cols"] > div > div:last-child {
    margin-top: auto;
}

/* Standardize card internal structure — push last child to bottom */
.metric-card > div:last-child {
    margin-top: auto;
}

/* Sparkline SVG should not push content */
.metric-card svg[width="100%"] {
    flex-shrink: 0;
}
/* Push the sub-text to the bottom of the card so values align.
   Works for both direct .metric-sub and any trailing element.            */
.metric-card > .metric-sub,
.metric-card > .progress-bar,
.metric-card > .progress-bar-bg {
    margin-top: auto;
    padding-top: 4px;
}
/* When sub-text AND a progress bar both exist, only the last one pushes
   down so the preceding siblings stay in normal flow.                    */
.metric-card > .metric-sub ~ .progress-bar,
.metric-card > .metric-sub ~ .progress-bar-bg {
    margin-top: 4px;
}

/* Ensure chart containers center their canvas content */
.chart-container, .dashboard-card {
    display: flex;
    flex-direction: column;
}
.chart-container > .chart-wrapper,
.dashboard-card > .chart-wrapper {
    flex: 1 1 auto;
    min-height: 0;
}

/* Consistent chart heights within side-by-side grids.
   Chart.js expects position:relative on its container and uses absolute
   positioning internally, so we must NOT use display:flex here.         */
.chart-wrapper > canvas {
    width: 100% !important;
    max-width: 100%;
}

/* ── Tabular Numbers ────────────────────────────────────────────────── */
/* Use fixed-width digits so dollar amounts and counts line up in grids */
#consolidatedViewContainer .text-2xl,
#consolidatedViewContainer .text-lg,
#dashboardMetrics .text-2xl,
#dashboardMetrics .text-lg {
    font-variant-numeric: tabular-nums;
}

/* ── Tab Row Alignment ───────────────────────────────────────────────── */
/* Ensure tab button rows wrap gracefully and stay vertically centred     */
.tab-btn {
    flex-shrink: 0;
}

/* ── Two-Column Chart + Sidebar Alignment ────────────────────────────── */
/* When a 2/3 chart card sits beside a 1/3 info card, both should
   stretch to the same height so the row looks balanced.                 */
.grid > .lg\:col-span-2,
.grid > [class*="col-span"] {
    min-height: 0;
}

/* ── Sidebar-aware Content Alignment ────────────────────────────────── */
.ue-page-content .max-w-7xl {
    max-width: 72rem;
}
.ue-page-content .dashboard-header {
    max-width: none;
}
.tab-content, .tab-panel {
    width: 100%;
}

/* ── Dashboard Category Section (Overview tab) ───────────────────────── */
/* Consistent spacing between category sections rendered by dashboard-engine */
.dashboard-category + .dashboard-category {
    margin-top: 2rem;
}
.dashboard-category > .grid {
    align-items: stretch;
}

/* Typography */
.metric-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #171717;
    /* Prevent long numbers/text from breaking card layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #525252;
    margin-bottom: 4px;
    /* Prevent long labels from pushing card width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metric-sub { font-size: 0.8rem; color: #a3a3a3; margin-top: 4px; }

/* Scale down metric values on smaller KPI grids (5-6 columns) to prevent overflow */
@media (min-width: 1024px) {
    .grid.lg\:grid-cols-6 > .metric-card .metric-value,
    .grid.lg\:grid-cols-5 > .metric-card .metric-value {
        font-size: 1.5rem;
    }
}

/* Status colors (unchanged - work on both themes) */
.positive { color: #16a34a; }
.negative { color: #dc2626; }
.neutral { color: #a3a3a3; }
.warning { color: #d97706; }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; }
.badge-green { background: #dcfce7; color: #16a34a; }
.badge-yellow { background: #fef3c7; color: #d97706; }
.badge-red { background: #fee2e2; color: #dc2626; }
.badge-blue { background: #dbeafe; color: #2563eb; }
.badge-coming { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.65rem; font-weight: 600; background: #fef3c7; color: #d97706; margin-left: 8px; vertical-align: middle; }

/* Badge dark mode overrides */
[data-theme="dark"] .badge-green { background: #14532d; color: #4ade80; }
[data-theme="dark"] .badge-yellow { background: #422006; color: #fbbf24; }
[data-theme="dark"] .badge-red { background: #450a0a; color: #f87171; }
[data-theme="dark"] .badge-blue { background: #172554; color: #60a5fa; }
[data-theme="dark"] .badge-coming { background: #422006; color: #fbbf24; }

/* Header — dark ribbon matching the platform header (#171717) */
.dashboard-header {
    border-bottom: 1px solid #e5e5e5;
    padding: 1rem 1.5rem;
    background: #171717;
}
.dashboard-header h1 { color: #ffffff; margin: 0; }
.dashboard-header p { color: #d4d4d4; margin: 0; }
/* Ensure inner flex container vertically centres when title wraps */
.dashboard-header > .max-w-7xl {
    align-items: center;
    min-height: 48px;
    padding-left: 0;
    padding-right: 0;
}
/* Period selector inside dark header needs light styling */
.dashboard-header .dashboard-select,
.dashboard-header select {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.2);
    border-style: solid;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.dashboard-header .dashboard-select:hover,
.dashboard-header select:hover { border-color: rgba(255,255,255,0.4); }
.dashboard-header .dashboard-select:focus,
.dashboard-header select:focus { border-color: #ffffff; box-shadow: 0 0 0 1px rgba(255,255,255,0.5); outline: none; }
.dashboard-header .dashboard-select option,
.dashboard-header select option { background: #171717; color: #ffffff; }
/* Ensure all links and inline-styled text inside the dark header remain visible.
   Use !important to override any inline style="color: var(--text-secondary)" etc. */
.dashboard-header a { color: rgba(255,255,255,0.7) !important; }
.dashboard-header a:hover { color: #ffffff !important; }
.dashboard-header .fas, .dashboard-header svg { color: inherit; }
/* Standardised "Back to Platform" / header-action button for dark ribbon headers.
   Use class="header-action-btn" on <a> inside .dashboard-header for consistent
   appearance across all dashboards (matches the sidebar-injected button). */
.header-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7) !important;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
}
.header-action-btn:hover {
    background: rgba(255,255,255,0.18);
    color: #ffffff !important;
}

/* Buttons */
.btn-primary { background: #171717; color: #fff; }
.btn-primary:hover { background: #404040; }
.btn-secondary { background: #f5f5f5; color: #171717; border: 1px solid #e5e5e5; }
.btn-secondary:hover { background: #e5e5e5; }

/* Loading */
.loading { display: flex; align-items: center; justify-content: center; min-height: 200px; }
.spinner { width: 32px; height: 32px; border: 3px solid #e5e5e5; border-top-color: #171717; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Animations */
.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Chart wrapper — standardised height for all dashboard charts.
   Individual pages can override via inline style when needed. */
.chart-wrapper { position: relative; height: 260px; }

/* Tables */
.dashboard-table { width: 100%; border-collapse: collapse; }
.dashboard-table th { text-align: left; padding: 8px 12px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #525252; border-bottom: 1px solid #e5e5e5; }
.dashboard-table td { padding: 8px 12px; font-size: 0.85rem; color: #171717; border-bottom: 1px solid #f5f5f5; }
.dashboard-table tr:hover { background: #fafafa; }

/* Action buttons (admin dashboards) */
.btn-action { padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; border: none; }
.btn-action:hover { transform: translateY(-1px); }
.btn-trip { background: #fee2e2; color: #dc2626; }
.btn-trip:hover { background: #fecaca; }
.btn-reset { background: #dcfce7; color: #16a34a; }
.btn-reset:hover { background: #bbf7d0; }
.btn-emergency { padding: 8px 20px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; border: none; }
.btn-emergency:hover { transform: translateY(-1px); }

/* Pulse dot */
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.pulse-dot.active { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Context banner (for dashboard-context.js integration) */
.context-banner { padding: 8px 16px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 16px; }
.context-live { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
.context-demo { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.context-demo a { color: #d97706; text-decoration: underline; }

/* Period selector */
.dashboard-select {
    background: #ffffff;
    color: #171717;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23525252' d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}
.dashboard-select:hover { border-color: #a3a3a3; }
.dashboard-select:focus { outline: none; border-color: #171717; box-shadow: 0 0 0 1px #171717; }

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    min-height: 20px;
}
@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-card {
    height: 120px;
    margin-bottom: 16px;
    border-radius: 12px;
}
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    width: 60%;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.full { width: 100%; }
/* Skeleton grid: 4 columns on desktop to match the most common KPI row,
   auto-fill fallback for pages with different card counts.             */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Dashboard Layout Preferences (compact / expanded) ────────────────
   v5.15.8: Moved from individual page <style> blocks to the shared theme
   so ALL dashboard pages respond to the layout preference, not just the
   4 pages that had inline rules.                                          */

/* Compact layout: tighter spacing, smaller padding */
[data-layout="compact"] main { padding: 0.5rem 1rem !important; }
[data-layout="compact"] main .grid { gap: 0.5rem !important; }
[data-layout="compact"] main .gap-4 { gap: 0.5rem !important; }
[data-layout="compact"] main .gap-6 { gap: 0.5rem !important; }
[data-layout="compact"] main .mb-6 { margin-bottom: 0.75rem !important; }
[data-layout="compact"] main .mb-8 { margin-bottom: 1rem !important; }
[data-layout="compact"] main .py-8 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
[data-layout="compact"] main .bg-white.rounded-xl { padding: 0.75rem !important; }
[data-layout="compact"] main .metric-card { padding: 0.75rem !important; }
[data-layout="compact"] main .dashboard-card { padding: 0.75rem !important; }
[data-layout="compact"] main .p-4 { padding: 0.5rem !important; }
[data-layout="compact"] main .p-5 { padding: 0.6rem !important; }
[data-layout="compact"] main .p-6 { padding: 0.75rem !important; }

/* Expanded layout: wider, more spacious, larger text */
[data-layout="expanded"] main { max-width: 100% !important; padding: 2.5rem 3rem !important; }
[data-layout="expanded"] main .grid { gap: 2rem !important; }
[data-layout="expanded"] main .gap-4 { gap: 1.5rem !important; }
[data-layout="expanded"] main .gap-6 { gap: 2rem !important; }
[data-layout="expanded"] main .mb-6 { margin-bottom: 2rem !important; }
[data-layout="expanded"] main .mb-8 { margin-bottom: 2.5rem !important; }
[data-layout="expanded"] main .bg-white.rounded-xl { padding: 2rem !important; }
[data-layout="expanded"] main .metric-card { padding: 2rem !important; }
[data-layout="expanded"] main .dashboard-card { padding: 2rem !important; }
[data-layout="expanded"] main .p-4 { padding: 1.5rem !important; }
[data-layout="expanded"] main .p-5 { padding: 1.75rem !important; }
[data-layout="expanded"] main .p-6 { padding: 2rem !important; }
[data-layout="expanded"] main .text-2xl { font-size: 2rem !important; }
[data-layout="expanded"] main .text-xl { font-size: 1.5rem !important; }
[data-layout="expanded"] .metric-value { font-size: 2.5rem !important; }

/* Toast notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-error { background: #e74c3c; }
.toast-success { background: #2ecc71; }
.toast-warning { background: #f39c12; }
.toast-info { background: #3498db; }

/* ── Dark Mode: Top ribbon / header fix ─────────────────────────────────
   var(--accent) flips to #fafafa in dark mode (designed for text/button
   accents).  Headers and navbars that use style="background:var(--accent)"
   become white — force them back to dark.                                */
[data-theme="dark"] header[style*="background: var(--accent)"],
[data-theme="dark"] nav[style*="background: var(--accent)"] {
    background: #171717 !important;
    border-bottom: 1px solid #404040;
}

/* ── Dark Mode Base (shared across all dashboard sub-pages) ──────────── */
[data-theme="dark"] body.dashboard-body { background: #171717; color: #fafafa; }
[data-theme="dark"] .dashboard-header { background: #171717; border-color: #404040; }
[data-theme="dark"] .dashboard-header h1 { color: #ffffff; }
[data-theme="dark"] .dashboard-header p { color: #d4d4d4; }
[data-theme="dark"] .metric-card, [data-theme="dark"] .chart-container, [data-theme="dark"] .dashboard-card {
    background: #171717; border-color: #404040;
}
[data-theme="dark"] .metric-card:hover, [data-theme="dark"] .chart-container:hover, [data-theme="dark"] .dashboard-card:hover { border-color: #525252; }
[data-theme="dark"] .metric-value { color: #fafafa; }
[data-theme="dark"] .metric-label { color: #d4d4d4; }
[data-theme="dark"] .metric-sub { color: #a3a3a3; }
[data-theme="dark"] .dashboard-table th { color: #d4d4d4; border-color: #404040; }
[data-theme="dark"] .dashboard-table td { color: #fafafa; border-color: #262626; }
[data-theme="dark"] .dashboard-table tr:hover { background: #262626; }
[data-theme="dark"] .dashboard-select { background: #262626; color: #fafafa; border-color: #404040; }
[data-theme="dark"] .dashboard-select:hover { border-color: #525252; }
[data-theme="dark"] .dashboard-select:focus { border-color: #fafafa; box-shadow: 0 0 0 1px #fafafa; }
[data-theme="dark"] .dashboard-select option { background: #171717; color: #fafafa; }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #262626 25%, #333333 50%, #262626 75%); background-size: 200% 100%; }
[data-theme="dark"] .btn-secondary { background: #262626; color: #fafafa; border-color: #404040; }
[data-theme="dark"] .btn-secondary:hover { background: #333333; }
[data-theme="dark"] .context-demo { background: #422006; color: #fbbf24; border-color: #78350f; }
[data-theme="dark"] .context-demo a { color: #fbbf24; }
[data-theme="dark"] .context-live { background: #052e16; color: #4ade80; border-color: #14532d; }
[data-theme="dark"] footer { border-color: #404040; color: #737373; }

/* v5.15.7: Dashboard tab text contrast in dark mode */
[data-theme="dark"] .dashboard-tab { color: #a3a3a3 !important; }
[data-theme="dark"] .dashboard-tab.active { color: #4ade80 !important; border-color: #4ade80 !important; }
[data-theme="dark"] .dashboard-tab:hover:not(.active) { color: #d4d4d4 !important; }

/* v5.15.7: Tailwind text color overrides for dashboard content readability */
[data-theme="dark"] #dashboardContent .text-gray-500 { color: #a3a3a3 !important; }
[data-theme="dark"] #dashboardContent .text-gray-600 { color: #d4d4d4 !important; }
[data-theme="dark"] #dashboardContent .text-gray-700 { color: #e5e5e5 !important; }
[data-theme="dark"] #dashboardContent .text-gray-800,
[data-theme="dark"] #dashboardContent .text-gray-900 { color: #fafafa !important; }
[data-theme="dark"] #dashboardContent .text-slate-700 { color: #d4d4d4 !important; }
[data-theme="dark"] #dashboardContent .text-slate-800 { color: #e5e5e5 !important; }
[data-theme="dark"] #dashboardContent .text-slate-600 { color: #a3a3a3 !important; }
[data-theme="dark"] #dashboardContent .text-slate-500 { color: #999999 !important; }
[data-theme="dark"] #dashboardContent .bg-white { background: #171717 !important; }
[data-theme="dark"] #dashboardContent .bg-slate-50,
[data-theme="dark"] #dashboardContent .bg-gray-50 { background: #262626 !important; }
[data-theme="dark"] #dashboardContent .border-slate-200,
[data-theme="dark"] #dashboardContent .border-gray-200 { border-color: #404040 !important; }
[data-theme="dark"] #dashboardContent .hover\:bg-slate-50:hover,
[data-theme="dark"] #dashboardContent .hover\:bg-gray-50:hover { background: #262626 !important; }
[data-theme="dark"] #dashboardContent select { background: #262626; color: #fafafa; border-color: #404040; }
[data-theme="dark"] #dashboardContent select option { background: #262626; color: #fafafa; }

/* Dark mode: common status/impact classes used across dashboard sub-pages */
[data-theme="dark"] .impact-high { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .impact-medium { background: #422006; color: #fbbf24; }
[data-theme="dark"] .impact-low { background: #052e16; color: #86efac; }
[data-theme="dark"] .kpi-highlight { background: #172554; border-color: #1e3a5f; }
[data-theme="dark"] .action-urgent { border-left-color: #f87171; }
[data-theme="dark"] .action-monitor { border-left-color: #fbbf24; }
[data-theme="dark"] .action-positive { border-left-color: #4ade80; }

/* ── Dark Mode: Tailwind arbitrary-value class overrides ───────────────
   These cover bg-[#hex], text-[#hex], border-[#hex], and hover variants
   used in HTML templates and JS-generated content across all dashboard
   sub-pages. Without these, elements using arbitrary Tailwind values
   (e.g. bg-[#f5f5f5]) remain light-themed in dark mode.               */

/* Backgrounds */
[data-theme="dark"] .bg-\[\#ffffff\],
[data-theme="dark"] .bg-\[\#fafafa\] { background-color: #262626 !important; }
[data-theme="dark"] .bg-\[\#f8fafc\],
[data-theme="dark"] .bg-\[\#f5f5f5\],
[data-theme="dark"] .bg-\[\#f1f5f9\] { background-color: #1a1a1a !important; }
[data-theme="dark"] .bg-\[\#e5e5e5\] { background-color: #333333 !important; }
[data-theme="dark"] .bg-\[\#eff6ff\] { background-color: #172554 !important; }
[data-theme="dark"] .bg-\[\#f0fdf4\] { background-color: #052e16 !important; }
[data-theme="dark"] .bg-\[\#fef3c7\] { background-color: #422006 !important; }

/* Text colors */
[data-theme="dark"] .text-\[\#171717\] { color: #fafafa !important; }
[data-theme="dark"] .text-\[\#1e293b\] { color: #f5f5f5 !important; }
[data-theme="dark"] .text-\[\#334155\] { color: #e5e5e5 !important; }
[data-theme="dark"] .text-\[\#525252\] { color: #a3a3a3 !important; }
[data-theme="dark"] .text-\[\#6b7280\] { color: #9ca3af !important; }
[data-theme="dark"] .text-\[\#a3a3a3\] { color: #737373 !important; }
[data-theme="dark"] .text-\[\#d4d4d4\] { color: #a3a3a3 !important; }
[data-theme="dark"] .text-\[\#92400e\] { color: #fbbf24 !important; }
[data-theme="dark"] .text-\[\#d97706\] { color: #fbbf24 !important; }
[data-theme="dark"] .text-\[\#2563eb\] { color: #60a5fa !important; }

/* Borders */
[data-theme="dark"] .border-\[\#e5e5e5\] { border-color: #404040 !important; }
[data-theme="dark"] .border-\[\#f5f5f5\] { border-color: #333333 !important; }
[data-theme="dark"] .border-\[\#d4d4d4\] { border-color: #525252 !important; }
[data-theme="dark"] .border-\[\#bfdbfe\] { border-color: #1e3a5f !important; }
[data-theme="dark"] .border-\[\#fde68a\] { border-color: #78350f !important; }
[data-theme="dark"] .border-\[\#171717\] { border-color: #fafafa !important; }

/* Hover states */
[data-theme="dark"] .hover\:bg-\[\#fafafa\]:hover { background-color: #333333 !important; }
[data-theme="dark"] .hover\:bg-\[\#f5f5f5\]:hover { background-color: #333333 !important; }
[data-theme="dark"] .hover\:bg-\[\#e5e5e5\]:hover { background-color: #404040 !important; }
[data-theme="dark"] .hover\:text-\[\#525252\]:hover { color: #d4d4d4 !important; }

/* Common Tailwind utility class overrides (also needed) */
[data-theme="dark"] .bg-white { background-color: #262626 !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-neutral-50,
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-neutral-100 { background-color: #1a1a1a !important; }
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-neutral-200 { background-color: #333333 !important; }
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-neutral-900 { color: #f5f5f5 !important; }
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-neutral-800 { color: #e5e5e5 !important; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-neutral-700 { color: #d4d4d4 !important; }
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-neutral-600 { color: #a3a3a3 !important; }
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-neutral-500 { color: #999999 !important; }
[data-theme="dark"] .text-gray-400 { color: #737373 !important; }
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-neutral-200 { border-color: #404040 !important; }
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-slate-300 { border-color: #525252 !important; }
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #404040 !important; }
[data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #333333 !important; }

/* Form controls */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background-color: #333333 !important; color: #e5e5e5 !important; border-color: #525252 !important; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #737373 !important; }

/* Colored section backgrounds (financial statement tables) */
[data-theme="dark"] .bg-blue-100 { background-color: #172554 !important; }
[data-theme="dark"] .bg-blue-50 { background-color: #1e2a4a !important; }
[data-theme="dark"] .bg-purple-100 { background-color: #2e1065 !important; }
[data-theme="dark"] .bg-purple-50 { background-color: #2a1055 !important; }
[data-theme="dark"] .bg-emerald-50 { background-color: #052e16 !important; }
[data-theme="dark"] .bg-emerald-200 { background-color: #064e3b !important; }
[data-theme="dark"] .bg-amber-50 { background-color: #422006 !important; }
[data-theme="dark"] .text-blue-800 { color: #93c5fd !important; }
[data-theme="dark"] .text-purple-800 { color: #d8b4fe !important; }
[data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; }
[data-theme="dark"] .text-emerald-800 { color: #a7f3d0 !important; }
[data-theme="dark"] .text-red-600 { color: #fca5a5 !important; }
[data-theme="dark"] .text-blue-700 { color: #93c5fd !important; }
[data-theme="dark"] .text-purple-700 { color: #d8b4fe !important; }

/* Tables (generic) */
[data-theme="dark"] table thead { background-color: #262626 !important; }
[data-theme="dark"] table tbody tr { border-color: #404040 !important; }
[data-theme="dark"] table tbody tr:hover { background-color: #333333 !important; }

/* Footer */
[data-theme="dark"] footer { border-color: #404040 !important; }

/* ── Dark Mode: Shared dashboard component overrides ───────────────────
   These cover UI patterns used across multiple dashboard pages so each
   page does not need to duplicate the same dark mode rules.             */

/* Tab buttons */
[data-theme="dark"] .tab-btn { background: #262626; border-color: #404040; color: #d4d4d4; }
[data-theme="dark"] .tab-btn:hover { background: #333333; }
[data-theme="dark"] .tab-btn.active { background: #fafafa; color: #171717; border-color: #fafafa; }

/* Sub-tabs (scenario simulator, etc.) */
[data-theme="dark"] .sub-tab { background: #262626; border-color: #404040; color: #d4d4d4; }
[data-theme="dark"] .sub-tab:hover { background: #333333; }
[data-theme="dark"] .sub-tab.active { background: #fafafa; color: #171717; border-color: #fafafa; }

/* Progress bars */
[data-theme="dark"] .progress-bar { background: #404040; }
[data-theme="dark"] .progress-bar-bg { background: #404040; }

/* Filter bars / inputs */
[data-theme="dark"] .filter-bar { background: #262626; border-color: #404040; }
[data-theme="dark"] .filter-select { background: #333333; border-color: #404040; color: #e5e5e5; }
[data-theme="dark"] .filter-select:focus { border-color: #fafafa; }
[data-theme="dark"] .filter-input { background: #262626; border-color: #404040; color: #e5e5e5; }
[data-theme="dark"] .filter-input:focus { border-color: #fafafa; }
[data-theme="dark"] .filter-input::placeholder { color: #737373; }

/* Alert cards (CFO Intelligence, etc.) */
[data-theme="dark"] .alert-card { background: #262626; }

/* Driver cards (Budget Variance, Margin Expansion) */
[data-theme="dark"] .driver-card { background: #262626; border-color: #404040; }
[data-theme="dark"] .driver-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.3); }

/* Liquidity / covenant cards (Capital Efficiency) */
[data-theme="dark"] .liquidity-card { background: #262626; border-color: #404040; }
[data-theme="dark"] .covenant-card { background: #262626; border-color: #404040; }

/* Period / benchmark / insight cards (Human Capital) */
[data-theme="dark"] .period-card { background: #262626; border-color: #404040; }
[data-theme="dark"] .benchmark-row { background: #262626; border-color: #404040; }
[data-theme="dark"] .percentile-bar { background: #404040; }
[data-theme="dark"] .insight-card { background: #262626; border-color: #404040; }

/* Efficiency cards (CashFlow) */
[data-theme="dark"] .efficiency-card { border-color: #404040; }
[data-theme="dark"] .efficiency-label { color: #d4d4d4; }
[data-theme="dark"] .efficiency-current { color: #fafafa; }

/* Table footer (Profitability) */
[data-theme="dark"] .table-footer td { background: #262626; border-top-color: #fafafa; }

/* Summary bar gradient (Unit Performance) */
[data-theme="dark"] .summary-bar { background: linear-gradient(to right, #1a1a1a, #262626); }

/* Scenario planner sliders */
[data-theme="dark"] .slider-group label { color: #a3a3a3; }
[data-theme="dark"] .slider-group input[type="range"] { background: #404040; }
[data-theme="dark"] .slider-value { color: #fafafa; }

/* Preset / quick buttons (Scenario pages) */
[data-theme="dark"] .preset-btn { background: #262626; border-color: #404040; color: #d4d4d4; }
[data-theme="dark"] .preset-btn:hover { background: #333333; }
[data-theme="dark"] .preset-btn.active { background: #fafafa; color: #171717; border-color: #fafafa; }
[data-theme="dark"] .quick-btn { background: #262626; border-color: #404040; color: #a3a3a3; }
[data-theme="dark"] .quick-btn:hover { background: #333333; }

/* Shock / scenario cards (Scenario Simulator) */
[data-theme="dark"] .shock-card { border-color: #404040; }
[data-theme="dark"] .shock-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.3); }
[data-theme="dark"] .threat-row { border-color: #404040; }

/* Bridge scenario colors */
[data-theme="dark"] .bridge-positive { background: #052e16 !important; }
[data-theme="dark"] .bridge-negative { background: #450a0a !important; }
[data-theme="dark"] .bridge-total { background: #172554 !important; }

/* Peer highlight (Margin Expansion) */
[data-theme="dark"] .peer-highlight { background: #052e16 !important; }

/* Method badges (Audit Log) */
[data-theme="dark"] .method-get { background: #14532d; color: #4ade80; }
[data-theme="dark"] .method-post { background: #172554; color: #60a5fa; }
[data-theme="dark"] .method-put,
[data-theme="dark"] .method-patch { background: #422006; color: #fbbf24; }
[data-theme="dark"] .method-delete { background: #450a0a; color: #f87171; }

/* Extra badges */
[data-theme="dark"] .badge-gray { background: #333333; color: #a3a3a3; }
[data-theme="dark"] .badge-purple { background: #2e1065; color: #a78bfa; }
[data-theme="dark"] .badge-orange { background: #431407; color: #fb923c; }

/* Spinner (Loading states) */
[data-theme="dark"] .spinner { border-color: #404040; border-top-color: #fafafa; }

/* ── Dark Mode: Inline style overrides ────────────────────────────────
   JS-generated dashboard content uses inline style="color:#xxx" which
   CSS class selectors cannot override. Use attribute selectors.         */
[data-theme="dark"] [style*="color:#171717"] { color: #fafafa !important; }
[data-theme="dark"] [style*="color: #171717"] { color: #fafafa !important; }
[data-theme="dark"] [style*="color:#525252"] { color: #a3a3a3 !important; }
[data-theme="dark"] [style*="color: #525252"] { color: #a3a3a3 !important; }
[data-theme="dark"] [style*="color:#2563eb"] { color: #60a5fa !important; }
[data-theme="dark"] [style*="color: #2563eb"] { color: #60a5fa !important; }
[data-theme="dark"] [style*="color:#1e293b"] { color: #f5f5f5 !important; }
[data-theme="dark"] [style*="color: #1e293b"] { color: #f5f5f5 !important; }
[data-theme="dark"] [style*="background:#fafafa"] { background: #333333 !important; }
[data-theme="dark"] [style*="background: #fafafa"] { background: #333333 !important; }
[data-theme="dark"] [style*="background:#f5f5f5"] { background: #262626 !important; }
[data-theme="dark"] [style*="background: #f5f5f5"] { background: #262626 !important; }
[data-theme="dark"] .bg-\[\#e5e5e5\] { background-color: #404040 !important; }
[data-theme="dark"] tr.hover\:bg-\[\#fafafa\]:hover,
[data-theme="dark"] tr[class*="hover:bg-[#fafafa]"]:hover { background-color: #333333 !important; }

/* ── Dark Mode: Colored badge/button backgrounds (shared across dashboards) ── */
[data-theme="dark"] .bg-emerald-50 { background-color: #052e16 !important; }
[data-theme="dark"] .bg-emerald-100 { background-color: #052e16 !important; }
[data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-emerald-800 { color: #4ade80 !important; }
[data-theme="dark"] .text-emerald-600 { color: #6ee7b7 !important; }
[data-theme="dark"] .bg-red-50 { background-color: #450a0a !important; }
[data-theme="dark"] .bg-red-100 { background-color: #450a0a !important; }
[data-theme="dark"] .text-red-700, [data-theme="dark"] .text-red-800 { color: #fca5a5 !important; }
[data-theme="dark"] .text-red-600 { color: #f87171 !important; }
[data-theme="dark"] .bg-orange-50 { background-color: #431407 !important; }
[data-theme="dark"] .bg-orange-100 { background-color: #431407 !important; }
[data-theme="dark"] .text-orange-700, [data-theme="dark"] .text-orange-800 { color: #fb923c !important; }
[data-theme="dark"] .bg-yellow-50 { background-color: #422006 !important; }
[data-theme="dark"] .bg-yellow-100 { background-color: #422006 !important; }
[data-theme="dark"] .text-yellow-700, [data-theme="dark"] .text-yellow-800 { color: #fbbf24 !important; }
[data-theme="dark"] .bg-blue-50 { background-color: #172554 !important; }
[data-theme="dark"] .bg-blue-100 { background-color: #172554 !important; }
[data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800 { color: #60a5fa !important; }
[data-theme="dark"] .text-blue-600 { color: #60a5fa !important; }
[data-theme="dark"] .bg-green-50 { background-color: #052e16 !important; }
[data-theme="dark"] .bg-green-100 { background-color: #052e16 !important; }
[data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800 { color: #4ade80 !important; }
[data-theme="dark"] .text-green-600 { color: #4ade80 !important; }
[data-theme="dark"] .bg-purple-50 { background-color: #2e1065 !important; }
[data-theme="dark"] .bg-purple-100 { background-color: #2e1065 !important; }
[data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-800 { color: #a78bfa !important; }
[data-theme="dark"] .bg-indigo-50 { background-color: #1e1b4b !important; }
[data-theme="dark"] .bg-indigo-100 { background-color: #1e1b4b !important; }
[data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-800 { color: #818cf8 !important; }
[data-theme="dark"] .bg-teal-50 { background-color: #042f2e !important; }
[data-theme="dark"] .bg-teal-100 { background-color: #042f2e !important; }
[data-theme="dark"] .text-teal-700, [data-theme="dark"] .text-teal-800 { color: #2dd4bf !important; }
[data-theme="dark"] .bg-amber-50 { background-color: #422006 !important; }
[data-theme="dark"] .bg-amber-100 { background-color: #422006 !important; }
[data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-800 { color: #fbbf24 !important; }
[data-theme="dark"] .border-amber-200 { border-color: #92400e !important; }
[data-theme="dark"] .bg-cyan-50 { background-color: #083344 !important; }
[data-theme="dark"] .text-cyan-700, [data-theme="dark"] .text-cyan-800 { color: #22d3ee !important; }
[data-theme="dark"] .bg-pink-50 { background-color: #500724 !important; }
[data-theme="dark"] .text-pink-700, [data-theme="dark"] .text-pink-800 { color: #f472b6 !important; }
[data-theme="dark"] .bg-rose-50 { background-color: #4c0519 !important; }
[data-theme="dark"] .text-rose-700, [data-theme="dark"] .text-rose-800 { color: #fb7185 !important; }
[data-theme="dark"] .border-green-200, [data-theme="dark"] .border-emerald-200 { border-color: #14532d !important; }
[data-theme="dark"] .border-red-200 { border-color: #7f1d1d !important; }
[data-theme="dark"] .border-blue-200 { border-color: #1e3a5f !important; }
[data-theme="dark"] .border-yellow-200 { border-color: #854d0e !important; }
[data-theme="dark"] .border-purple-200 { border-color: #4c1d95 !important; }
[data-theme="dark"] .border-indigo-200 { border-color: #312e81 !important; }
[data-theme="dark"] .border-orange-200 { border-color: #9a3412 !important; }
[data-theme="dark"] .border-teal-200 { border-color: #134e4a !important; }

/* ── Dark Mode: Hover states for colored backgrounds ── */
[data-theme="dark"] .hover\:bg-red-200:hover { background-color: #7f1d1d !important; }
[data-theme="dark"] .hover\:bg-green-200:hover { background-color: #14532d !important; }
[data-theme="dark"] .hover\:bg-blue-200:hover { background-color: #1e3a5f !important; }

/* ── Dark Mode: Shadows (all depths) ── */
[data-theme="dark"] .shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.4) !important; }
[data-theme="dark"] .shadow-xl { box-shadow: 0 20px 25px rgba(0,0,0,0.5) !important; }
[data-theme="dark"] .shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,0.5) !important; }

/* ── Dark Mode: Modal overlays ── */
[data-theme="dark"] .bg-white.rounded-xl { background-color: #262626 !important; }
[data-theme="dark"] .bg-white.rounded-lg { background-color: #262626 !important; }

/* ── Dark Mode: Border utilities ── */
[data-theme="dark"] .border-t { border-color: #404040; }
[data-theme="dark"] .border-b { border-color: #404040; }
[data-theme="dark"] .border-r { border-color: #404040; }
[data-theme="dark"] .border-l { border-color: #404040; }
[data-theme="dark"] .border-slate-100 { border-color: #333333 !important; }

/* ── Dark Mode: Text colors ── */
[data-theme="dark"] .text-gray-400 { color: #737373 !important; }

/* ── Dark Mode: Additional inline-style overrides for JS-generated content ── */
[data-theme="dark"] [style*="color:#334155"] { color: #e5e5e5 !important; }
[data-theme="dark"] [style*="color: #334155"] { color: #e5e5e5 !important; }
[data-theme="dark"] [style*="color:#6b7280"] { color: #9ca3af !important; }
[data-theme="dark"] [style*="color: #6b7280"] { color: #9ca3af !important; }
[data-theme="dark"] [style*="color:#374151"] { color: #e5e5e5 !important; }
[data-theme="dark"] [style*="color: #374151"] { color: #e5e5e5 !important; }
[data-theme="dark"] [style*="background:#ffffff"] { background: #262626 !important; }
[data-theme="dark"] [style*="background: #ffffff"] { background: #262626 !important; }
[data-theme="dark"] [style*="background-color:#ffffff"] { background-color: #262626 !important; }
[data-theme="dark"] [style*="background-color: #ffffff"] { background-color: #262626 !important; }
[data-theme="dark"] [style*="background:#f8fafc"] { background: #1a1a1a !important; }
[data-theme="dark"] [style*="background: #f8fafc"] { background: #1a1a1a !important; }
[data-theme="dark"] [style*="background:#f1f5f9"] { background: #1a1a1a !important; }
[data-theme="dark"] [style*="background: #f1f5f9"] { background: #1a1a1a !important; }
[data-theme="dark"] [style*="border: 1px solid #e5e5e5"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-color:#e5e5e5"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-color: #e5e5e5"] { border-color: #404040 !important; }

/* ── Dark Mode: Extended inline-style overrides (Audit 2 — Jun 2026) ─────
   Additional hardcoded hex colors found in inline styles across ui/ pages.
   These are light-mode-only colors that become invisible/unreadable in dark. */

/* Slate palette inline colors */
[data-theme="dark"] [style*="color:#64748b"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="color: #64748b"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="color:#475569"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color: #475569"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color:#94a3b8"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color: #94a3b8"] { color: #94a3b8 !important; }
[data-theme="dark"] [style*="color:#cbd5e1"] { color: #e2e8f0 !important; }
[data-theme="dark"] [style*="color: #cbd5e1"] { color: #e2e8f0 !important; }
[data-theme="dark"] [style*="color:#a0aec0"] { color: #cbd5e1 !important; }
[data-theme="dark"] [style*="color: #a0aec0"] { color: #cbd5e1 !important; }

/* Red palette inline colors (warnings/errors — generally OK but red-800 needs lightening) */
[data-theme="dark"] [style*="color:#991b1b"] { color: #fca5a5 !important; }
[data-theme="dark"] [style*="color: #991b1b"] { color: #fca5a5 !important; }
[data-theme="dark"] [style*="color:#92400e"] { color: #fbbf24 !important; }
[data-theme="dark"] [style*="color: #92400e"] { color: #fbbf24 !important; }

/* Gray shorthand inline colors */
[data-theme="dark"] [style*="color:#999"] { color: #a3a3a3 !important; }
[data-theme="dark"] [style*="color:#666"] { color: #a3a3a3 !important; }
[data-theme="dark"] [style*="color: #666"] { color: #a3a3a3 !important; }

/* Light background inline styles (modals, badges, warning panels) */
[data-theme="dark"] [style*="background:#fef2f2"] { background: #450a0a !important; }
[data-theme="dark"] [style*="background: #fef2f2"] { background: #450a0a !important; }
[data-theme="dark"] [style*="background:#fef3c7"] { background: #422006 !important; }
[data-theme="dark"] [style*="background: #fef3c7"] { background: #422006 !important; }
[data-theme="dark"] [style*="background:#fee2e2"] { background: #450a0a !important; }
[data-theme="dark"] [style*="background: #fee2e2"] { background: #450a0a !important; }
[data-theme="dark"] [style*="background:#dbeafe"] { background: #172554 !important; }
[data-theme="dark"] [style*="background: #dbeafe"] { background: #172554 !important; }
[data-theme="dark"] [style*="background:#dcfce7"] { background: #052e16 !important; }
[data-theme="dark"] [style*="background: #dcfce7"] { background: #052e16 !important; }
[data-theme="dark"] [style*="background:#e5e5e5"] { background: #404040 !important; }
[data-theme="dark"] [style*="background: #e5e5e5"] { background: #404040 !important; }
[data-theme="dark"] [style*="background:#e2e8f0"] { background: #333333 !important; }
[data-theme="dark"] [style*="background: #e2e8f0"] { background: #333333 !important; }

/* Inline background-color (used in option/optgroup elements) */
[data-theme="dark"] [style*="background-color:#1f2937"] { background-color: #1e293b !important; }
[data-theme="dark"] [style*="background-color: #1f2937"] { background-color: #1e293b !important; }
[data-theme="dark"] [style*="background-color:#374151"] { background-color: #334155 !important; }
[data-theme="dark"] [style*="background-color: #374151"] { background-color: #334155 !important; }

/* Dark inline backgrounds used by dark-first pages (already dark, no change needed for most,
   but include border overrides for completeness) */
[data-theme="dark"] [style*="border: 1px solid rgba(255,255,255,0.1)"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-color:#e2e8f0"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-color: #e2e8f0"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-color:#fca5a5"] { border-color: #7f1d1d !important; }
[data-theme="dark"] [style*="border-color: #fca5a5"] { border-color: #7f1d1d !important; }

/* Additional light backgrounds found in JS-generated content */
[data-theme="dark"] [style*="background:#f3f4f6"] { background: #333333 !important; }
[data-theme="dark"] [style*="background: #f3f4f6"] { background: #333333 !important; }
[data-theme="dark"] [style*="background:#fff"] { background: #262626 !important; }
[data-theme="dark"] [style*="background: #fff"] { background: #262626 !important; }
[data-theme="dark"] [style*="background:#ede9fe"] { background: #2e1065 !important; }
[data-theme="dark"] [style*="background: #ede9fe"] { background: #2e1065 !important; }
[data-theme="dark"] [style*="background:#e0f2fe"] { background: #083344 !important; }
[data-theme="dark"] [style*="background: #e0f2fe"] { background: #083344 !important; }

/* Additional backgrounds found in JS files */
[data-theme="dark"] [style*="background:#fffbeb"] { background: #422006 !important; }
[data-theme="dark"] [style*="background: #fffbeb"] { background: #422006 !important; }
[data-theme="dark"] [style*="background:#ecfdf5"] { background: #052e16 !important; }
[data-theme="dark"] [style*="background: #ecfdf5"] { background: #052e16 !important; }
[data-theme="dark"] [style*="background:white"] { background: #262626 !important; }
[data-theme="dark"] [style*="background: white"] { background: #262626 !important; }
[data-theme="dark"] [style*="background:#ffc107"] { background: #854d0e !important; }
[data-theme="dark"] [style*="background: #ffc107"] { background: #854d0e !important; }

/* Additional dark text colors from JS */
[data-theme="dark"] [style*="color:#212529"] { color: #fafafa !important; }
[data-theme="dark"] [style*="color: #212529"] { color: #fafafa !important; }

/* Additional border inline overrides */
[data-theme="dark"] [style*="border:1px solid #e5e7eb"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border:1px solid #e2e8f0"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-bottom:1px solid #eee"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-bottom:1px solid #e2e8f0"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-bottom:2px solid #e2e8f0"] { border-color: #404040 !important; }
[data-theme="dark"] [style*="border-color:#d1fae5"] { border-color: #14532d !important; }
[data-theme="dark"] [style*="border-color: #d1fae5"] { border-color: #14532d !important; }
[data-theme="dark"] [style*="border:1px solid #fcd34d"] { border-color: #854d0e !important; }
[data-theme="dark"] [style*="border: 1px solid #fcd34d"] { border-color: #854d0e !important; }

/* ── Dark Mode: Missing utility-class overrides (v5.18.9) ───────────────
   Systemic gap audit: the base theme covered solid bg/text/border utilities
   but LEFT OUT interactive-state (hover:*) utilities, divide-* dividers, the
   -300 step of the gray/slate/neutral bg scale, and the slate/neutral -400
   text step. On the 34 pages that include this file, list/table row hovers,
   button hovers and divided lists flashed light (#f1f5f9 / #f9fafb white) in
   dark mode. Added here CENTRALLY so all including pages inherit the fix.   */

/* Hover backgrounds — light grays used on rows, list items, ghost buttons */
[data-theme="dark"] .hover\:bg-gray-100:hover,
[data-theme="dark"] .hover\:bg-slate-100:hover,
[data-theme="dark"] .hover\:bg-neutral-100:hover { background-color: #262626 !important; }
[data-theme="dark"] .hover\:bg-gray-200:hover,
[data-theme="dark"] .hover\:bg-slate-200:hover,
[data-theme="dark"] .hover\:bg-neutral-200:hover { background-color: #333333 !important; }
[data-theme="dark"] .hover\:bg-white:hover { background-color: #262626 !important; }

/* Hover text — dark-on-hover text turns invisible against dark surfaces */
[data-theme="dark"] .hover\:text-gray-600:hover,
[data-theme="dark"] .hover\:text-slate-600:hover,
[data-theme="dark"] .hover\:text-neutral-600:hover { color: #a3a3a3 !important; }
[data-theme="dark"] .hover\:text-gray-700:hover,
[data-theme="dark"] .hover\:text-slate-700:hover,
[data-theme="dark"] .hover\:text-neutral-700:hover { color: #d4d4d4 !important; }
[data-theme="dark"] .hover\:text-gray-800:hover,
[data-theme="dark"] .hover\:text-slate-800:hover,
[data-theme="dark"] .hover\:text-neutral-800:hover,
[data-theme="dark"] .hover\:text-gray-900:hover,
[data-theme="dark"] .hover\:text-slate-900:hover,
[data-theme="dark"] .hover\:text-neutral-900:hover { color: #f5f5f5 !important; }

/* Divide (border between children) — light divider lines on lists/tables */
[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: #404040 !important; }
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-neutral-100 > :not([hidden]) ~ :not([hidden]) { border-color: #333333 !important; }

/* -300 step of the neutral bg scale (50/100/200 were covered, 300 was not) */
[data-theme="dark"] .bg-gray-300,
[data-theme="dark"] .bg-slate-300,
[data-theme="dark"] .bg-neutral-300 { background-color: #404040 !important; }

/* -400 text step for slate/neutral (gray-400 was already covered) */
[data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-neutral-400 { color: #737373 !important; }