/*
 * Dark mode overrides for components with hardcoded light-mode colours.
 * MudBlazor's MudThemeProvider sets --mud-palette-* variables; these rules
 * make common elements respect them instead of using fixed hex values.
 *
 * The .mud-theme-dark class is added by MudThemeProvider when IsDarkMode=true.
 *
 * Strategy: use !important on dark overrides because scoped Blazor CSS
 * adds attribute selectors that raise specificity above global selectors.
 */

/* ═══════════════════════════════════════════════════════════════
   DARK THEME CUSTOM PROPERTIES (semantic aliases)
   ═══════════════════════════════════════════════════════════════ */
.mud-theme-dark {
    --dm-surface: var(--mud-palette-surface);
    --dm-bg: var(--mud-palette-background);
    --dm-text: var(--mud-palette-text-primary);
    --dm-text-secondary: var(--mud-palette-text-secondary);
    --dm-border: var(--mud-palette-lines-default);
    --dm-primary: var(--mud-palette-primary);

    /* Semantic status colours — dark-friendly variants */
    --dm-success-bg: #064e3b;
    --dm-success-text: #6ee7b7;
    --dm-warning-bg: #78350f;
    --dm-warning-text: #fcd34d;
    --dm-error-bg: #7f1d1d;
    --dm-error-text: #fca5a5;
    --dm-info-bg: #1e3a5f;
    --dm-info-text: #93c5fd;

    /* Subtle tinted surfaces for cards/sections */
    --dm-surface-elevated: #253147;
    --dm-surface-tinted: #1a2744;
}

/* ═══════════════════════════════════════════════════════════════
   1. GLOBAL ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.mud-theme-dark body,
.mud-theme-dark html {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .main,
.mud-theme-dark .mud-main-content {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. MUD COMPONENTS — core overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── Paper / Card ── */
.mud-theme-dark .mud-paper:not(.select-paper),
.mud-theme-dark .mud-card,
.mud-theme-dark .mud-card-content,
.mud-theme-dark .mud-card-header {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-paper.mud-paper-outlined {
    border-color: var(--dm-border) !important;
}

/* ── Tables ── */
.mud-theme-dark .mud-table .mud-table-head .mud-table-cell {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-table .mud-table-body .mud-table-cell {
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-table .mud-table-row:hover {
    background-color: var(--dm-bg) !important;
}

.mud-theme-dark .mud-table .mud-table-body .mud-table-row:nth-child(even) {
    background-color: var(--dm-bg) !important;
}

.mud-theme-dark .mud-table-row.mud-table-row-group-indented-1 {
    background-color: var(--dm-bg) !important;
}

/* ── Data Grid ── */
.mud-theme-dark .mud-data-grid .mud-table-container {
    background-color: var(--dm-surface) !important;
}

.mud-theme-dark .mud-data-grid .mud-table-head .mud-table-cell {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-data-grid .mud-table-body .mud-table-cell {
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

.mud-theme-dark .mud-data-grid .mud-table-body .mud-table-row:hover {
    background-color: var(--dm-bg) !important;
}

.mud-theme-dark .mud-data-grid .mud-table-foot .mud-table-cell {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-data-grid .mud-table-pagination {
    color: var(--dm-text) !important;
}

/* ── Tabs (FIXED — all tab parts) ── */
.mud-theme-dark .mud-tabs,
.mud-theme-dark .mud-tabs-panels,
.mud-theme-dark .mud-tabs-header,
.mud-theme-dark .mud-tab {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-tab:hover {
    background-color: var(--dm-bg) !important;
}

.mud-theme-dark .mud-tab.mud-tab-active {
    color: var(--dm-primary) !important;
}

.mud-theme-dark .mud-tabs-toolbar {
    background-color: var(--dm-surface) !important;
}

.mud-theme-dark .mud-tabs-toolbar .mud-tab-slider {
    background: var(--dm-primary) !important;
}

/* ── Chips (FIXED — default chips visible in dark mode) ── */
.mud-theme-dark .mud-chip.mud-chip-default {
    background-color: var(--dm-surface-elevated) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-chip.mud-chip-outlined {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* ── Inputs / Text Fields ── */
.mud-theme-dark .mud-input,
.mud-theme-dark .mud-input-slot {
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-input-control {
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-input-label,
.mud-theme-dark .mud-input-helper-text {
    color: var(--dm-text-secondary) !important;
}

.mud-theme-dark .mud-input.mud-input-underline::before {
    border-color: var(--dm-border) !important;
}

/* ── Selects / Dropdowns / Popovers ── */
.mud-theme-dark .mud-popover {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-list-item {
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-list-item:hover {
    background-color: var(--dm-bg) !important;
}

.mud-theme-dark .mud-list-item-text {
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-select .mud-menu .mud-list {
    background-color: var(--dm-surface) !important;
}

/* ── Dialogs ── */
.mud-theme-dark .mud-dialog {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ── Nav links ── */
.mud-theme-dark .mud-nav-link {
    color: var(--dm-text) !important;
}

/* ── Links ── */
.mud-theme-dark .mud-link {
    color: var(--dm-primary) !important;
}

/* ── Expansion panels ── */
.mud-theme-dark .mud-expand-panel {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ── Alerts (tinted for dark mode) ── */
.mud-theme-dark .mud-alert {
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-alert-filled-success {
    background-color: var(--dm-success-bg) !important;
    color: var(--dm-success-text) !important;
}

.mud-theme-dark .mud-alert-filled-error {
    background-color: var(--dm-error-bg) !important;
    color: var(--dm-error-text) !important;
}

.mud-theme-dark .mud-alert-filled-warning {
    background-color: var(--dm-warning-bg) !important;
    color: var(--dm-warning-text) !important;
}

.mud-theme-dark .mud-alert-filled-info {
    background-color: var(--dm-info-bg) !important;
    color: var(--dm-info-text) !important;
}

/* ── Menu / context menus ── */
.mud-theme-dark .mud-menu .mud-list {
    background-color: var(--dm-surface) !important;
}

.mud-theme-dark .mud-menu .mud-list-item:hover {
    background-color: var(--dm-bg) !important;
}

/* ── Tree view ── */
.mud-theme-dark .mud-treeview-item-content {
    color: var(--dm-text) !important;
}

/* ── Breadcrumbs ── */
.mud-theme-dark .mud-breadcrumb-item {
    color: var(--dm-text-secondary) !important;
}

.mud-theme-dark .mud-breadcrumb-item a {
    color: var(--dm-primary) !important;
}

/* ── Skeleton ── */
.mud-theme-dark .mud-skeleton {
    background-color: var(--dm-bg) !important;
}

/* ── Blazor error UI ── */
.mud-theme-dark #blazor-error-ui {
    background: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ── Reconnect modal ── */
.mud-theme-dark .reconnect-card {
    background: rgba(30, 41, 59, 0.92) !important;
    color: var(--dm-text) !important;
}

/* ── Simple table ── */
.mud-theme-dark .mud-simple-table td,
.mud-theme-dark .mud-simple-table th {
    color: var(--dm-text) !important;
}

/* ── Rating ── */
.mud-theme-dark .mud-rating .mud-rating-item {
    color: var(--dm-text-secondary) !important;
}

/* ── Toolbar ── */
.mud-theme-dark .mud-toolbar {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. INLINE STYLE OVERRIDES (attribute selectors)
   Catches hardcoded colors in Style="..." attributes
   ═══════════════════════════════════════════════════════════════ */

/* ── White / near-white backgrounds ── */
.mud-theme-dark [style*="background-color: white"],
.mud-theme-dark [style*="background-color:white"],
.mud-theme-dark [style*="background-color: #fff"],
.mud-theme-dark [style*="background-color:#fff"],
.mud-theme-dark [style*="background-color: #FFF"],
.mud-theme-dark [style*="background-color:#FFF"],
.mud-theme-dark [style*="background-color: #ffffff"],
.mud-theme-dark [style*="background-color:#ffffff"],
.mud-theme-dark [style*="background-color: #FFFFFF"],
.mud-theme-dark [style*="background: white"],
.mud-theme-dark [style*="background: #fff"],
.mud-theme-dark [style*="background: #FFF"],
.mud-theme-dark [style*="background: #ffffff"] {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ── Light gray backgrounds ── */
.mud-theme-dark [style*="background-color: #f9f9f9"],
.mud-theme-dark [style*="background-color:#f9f9f9"],
.mud-theme-dark [style*="background-color: #f7f7f7"],
.mud-theme-dark [style*="background-color:#f7f7f7"],
.mud-theme-dark [style*="background-color: #fafafa"],
.mud-theme-dark [style*="background-color:#fafafa"],
.mud-theme-dark [style*="background-color: #f8f9fa"],
.mud-theme-dark [style*="background-color:#f8f9fa"],
.mud-theme-dark [style*="background-color: #F9FAFB"],
.mud-theme-dark [style*="background-color:#F9FAFB"],
.mud-theme-dark [style*="background-color: #f9fafb"],
.mud-theme-dark [style*="background-color: #F3F4F6"],
.mud-theme-dark [style*="background-color:#F3F4F6"],
.mud-theme-dark [style*="background-color: #E3F2FD"],
.mud-theme-dark [style*="background-color: #e3f2fd"],
.mud-theme-dark [style*="background-color: #F9F7F7"],
.mud-theme-dark [style*="background-color: #EFECE9"] {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ── Dark text colours that vanish on dark backgrounds ── */
.mud-theme-dark [style*="color: #333"],
.mud-theme-dark [style*="color:#333"],
.mud-theme-dark [style*="color: #1F2937"],
.mud-theme-dark [style*="color:#1F2937"],
.mud-theme-dark [style*="color: #1f2937"],
.mud-theme-dark [style*="color: #111827"],
.mud-theme-dark [style*="color:#111827"],
.mud-theme-dark [style*="color: #1a1a2e"],
.mud-theme-dark [style*="color:#1a1a2e"],
.mud-theme-dark [style*="color: #2c3e50"],
.mud-theme-dark [style*="color: #374151"],
.mud-theme-dark [style*="color:#374151"],
.mud-theme-dark [style*="color: #1E3A8A"],
.mud-theme-dark [style*="color:#1E3A8A"],
.mud-theme-dark [style*="color: #1e3a8a"],
.mud-theme-dark [style*="color: black"],
.mud-theme-dark [style*="color:black"] {
    color: var(--dm-text) !important;
}

/* ── Secondary/muted text colours ── */
.mud-theme-dark [style*="color: #6b7280"],
.mud-theme-dark [style*="color: #6B7280"],
.mud-theme-dark [style*="color: #9CA3AF"],
.mud-theme-dark [style*="color: #9ca3af"],
.mud-theme-dark [style*="color: #4B5563"],
.mud-theme-dark [style*="color:#4B5563"],
.mud-theme-dark [style*="color: #5b6478"] {
    color: var(--dm-text-secondary) !important;
}

/* ── Border overrides ── */
.mud-theme-dark [style*="border: 5px solid #F9F7F7"],
.mud-theme-dark [style*="border: 1px solid #DFDFDF"],
.mud-theme-dark [style*="border: 1px solid #e2e6ee"],
.mud-theme-dark [style*="border-color: #e2e6ee"] {
    border-color: var(--dm-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. SCOPED CSS OVERRIDES
   These override hardcoded colours in .razor.css files.
   Uses high specificity with !important to beat scoped selectors.
   ═══════════════════════════════════════════════════════════════ */

/* ── Generic: any element with hardcoded white/light bg in scoped CSS ── */
.mud-theme-dark [style*="background: #fff"],
.mud-theme-dark [style*="background:#fff"],
.mud-theme-dark [style*="background: white"],
.mud-theme-dark [style*="background: #ffffff"] {
    background: var(--dm-surface) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. STATUS COLOUR OVERRIDES
   Light-mode status backgrounds → dark-friendly equivalents
   ═══════════════════════════════════════════════════════════════ */

/* ── Success greens ── */
.mud-theme-dark [style*="background-color: #f0fdf4"],
.mud-theme-dark [style*="background-color:#f0fdf4"],
.mud-theme-dark [style*="background-color: #F0FDF4"],
.mud-theme-dark [style*="background: #F0FDF4"],
.mud-theme-dark [style*="background: #f0fdf4"],
.mud-theme-dark [style*="background-color: #bbf7d0"] {
    background-color: var(--dm-success-bg) !important;
    color: var(--dm-success-text) !important;
}

.mud-theme-dark [style*="color: #047857"],
.mud-theme-dark [style*="color:#047857"],
.mud-theme-dark [style*="color: #065f46"],
.mud-theme-dark [style*="color: #059669"],
.mud-theme-dark [style*="color: #15803d"],
.mud-theme-dark [style*="color: #16A34A"],
.mud-theme-dark [style*="color: #16a34a"] {
    color: var(--dm-success-text) !important;
}

/* ── Error reds ── */
.mud-theme-dark [style*="background-color: #fef2f2"],
.mud-theme-dark [style*="background-color:#fef2f2"],
.mud-theme-dark [style*="background-color: #FEF2F2"],
.mud-theme-dark [style*="background: #FEF2F2"],
.mud-theme-dark [style*="background: #fef2f2"],
.mud-theme-dark [style*="background-color: #FEE2E2"],
.mud-theme-dark [style*="background: #FEE2E2"],
.mud-theme-dark [style*="background-color: #fecaca"] {
    background-color: var(--dm-error-bg) !important;
    color: var(--dm-error-text) !important;
}

.mud-theme-dark [style*="color: #c53030"],
.mud-theme-dark [style*="color: #B91C1C"],
.mud-theme-dark [style*="color: #b91c1c"],
.mud-theme-dark [style*="color: #DC2626"],
.mud-theme-dark [style*="color: #dc2626"] {
    color: var(--dm-error-text) !important;
}

/* ── Warning yellows ── */
.mud-theme-dark [style*="background-color: #FFFBEB"],
.mud-theme-dark [style*="background-color:#FFFBEB"],
.mud-theme-dark [style*="background: #FFFBEB"],
.mud-theme-dark [style*="background: #fffbeb"],
.mud-theme-dark [style*="background-color: #FEF3C7"],
.mud-theme-dark [style*="background: #FEF3C7"],
.mud-theme-dark [style*="background-color: #FEF08A"],
.mud-theme-dark [style*="background: #FEF08A"] {
    background-color: var(--dm-warning-bg) !important;
    color: var(--dm-warning-text) !important;
}

/* ── Info blues ── */
.mud-theme-dark [style*="background-color: #F0F4FF"],
.mud-theme-dark [style*="background-color:#F0F4FF"],
.mud-theme-dark [style*="background: #F0F4FF"],
.mud-theme-dark [style*="background: #f0f4ff"],
.mud-theme-dark [style*="background-color: #F0F9FF"],
.mud-theme-dark [style*="background: #F0F9FF"],
.mud-theme-dark [style*="background-color: #EFF6FF"],
.mud-theme-dark [style*="background: #EFF6FF"] {
    background-color: var(--dm-info-bg) !important;
    color: var(--dm-info-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. SITE.CSS OVERRIDES
   Catches hardcoded colours from the legacy site.css
   ═══════════════════════════════════════════════════════════════ */

.mud-theme-dark #navhead,
.mud-theme-dark .staff-tools,
.mud-theme-dark .tool-btn,
.mud-theme-dark .news-paper,
.mud-theme-dark .dropdown-menu {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .news-title,
.mud-theme-dark .news-subheading,
.mud-theme-dark h2 {
    color: var(--dm-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. PAGE-SPECIFIC SCOPED CSS OVERRIDES
   These use broad selectors with !important to override
   scoped CSS attribute selectors.
   ═══════════════════════════════════════════════════════════════ */

/*
 * The scoped CSS files use hardcoded hex values like:
 *   background: #fff;
 *   background: #F0F4FF;
 *   color: #1F2937;
 *
 * Since scoped CSS adds [b-xxxxx] attribute selectors, we need
 * !important to override them. These broad class-based selectors
 * target common patterns across ALL scoped pages.
 */

/* ── Any MudPaper with Outlined + hardcoded bg ── */
.mud-theme-dark .mud-paper-outlined {
    background-color: var(--dm-surface) !important;
}

/* ── MudContainer areas ── */
.mud-theme-dark .mud-container {
    color: var(--dm-text) !important;
}

/* ── Common page wrapper patterns ── */
.mud-theme-dark .page-header,
.mud-theme-dark .page-toolbar,
.mud-theme-dark .search-bar,
.mud-theme-dark .filter-bar {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. HELP CENTER
   ═══════════════════════════════════════════════════════════════ */
.mud-theme-dark .help-article,
.mud-theme-dark .help-card,
.mud-theme-dark .help-sidebar,
.mud-theme-dark .help-content {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. MISCELLANEOUS
   ═══════════════════════════════════════════════════════════════ */

/* ── MudDatePicker / MudTimePicker ── */
.mud-theme-dark .mud-picker {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
}

.mud-theme-dark .mud-picker-calendar-header {
    background-color: var(--dm-surface) !important;
}

/* ── MudToggleGroup ── */
.mud-theme-dark .mud-toggle-group {
    background-color: var(--dm-surface) !important;
}

/* ── MudSwitch labels ── */
.mud-theme-dark .mud-switch .mud-switch-label {
    color: var(--dm-text) !important;
}

/* ── MudCheckBox labels ── */
.mud-theme-dark .mud-checkbox .mud-typography {
    color: var(--dm-text) !important;
}

/* ── Code / monospace text ── */
.mud-theme-dark .code-text,
.mud-theme-dark code,
.mud-theme-dark pre {
    color: var(--dm-text) !important;
}

/* ── MudDivider ── */
.mud-theme-dark .mud-divider {
    border-color: var(--dm-border) !important;
}

/* ── MudTooltip ── */
.mud-theme-dark .mud-tooltip {
    background-color: var(--dm-surface-elevated) !important;
    color: var(--dm-text) !important;
}

/* ── Scrollbar styling in dark mode ── */
.mud-theme-dark ::-webkit-scrollbar-track {
    background: var(--dm-bg);
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 4px;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-secondary);
}