/* ===================================================================
   Dark Mode Overrides - MUST LOAD LAST
   Override CSS variables and element colors for dark mode
   =================================================================== */

/* ============================================================
   CRITICAL: Navigation Drawer Text Visibility Fix
   The drawer has a DARK background in BOTH light and dark modes
   MudBlazor's default nav link text is dark, making it invisible
   These rules MUST load AFTER MudBlazor.min.css to work
   ============================================================ */

/* Force white text for ALL nav links in the drawer (light AND dark mode) */
.mud-drawer .mud-nav-link,
.mud-drawer .mud-navmenu .mud-nav-link,
.mud-navmenu .mud-nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Nav link text spans - ensure visibility */
.mud-drawer .mud-nav-link-text,
.mud-drawer .mud-nav-link .mud-nav-link-text,
.mud-navmenu .mud-nav-link-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Nav link icons - lighter color for visibility */
.mud-drawer .mud-nav-link .mud-icon-root,
.mud-navmenu .mud-nav-link .mud-icon-root {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Active nav link - brighter white */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link.mud-nav-link-active,
.mud-navmenu .mud-nav-link.active,
.mud-navmenu .mud-nav-link.mud-nav-link-active {
    color: var(--white) !important;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-text,
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-text,
.mud-navmenu .mud-nav-link.active .mud-nav-link-text,
.mud-navmenu .mud-nav-link.mud-nav-link-active .mud-nav-link-text {
    color: var(--white) !important;
    font-weight: 600;
}

/* Active nav link icon - coral pink highlight */
.mud-drawer .mud-nav-link.active .mud-icon-root,
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root,
.mud-navmenu .mud-nav-link.active .mud-icon-root,
.mud-navmenu .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: var(--coral-pink, #FF6633) !important;
}

/* Hover state for nav links */
.mud-drawer .mud-nav-link:hover,
.mud-navmenu .mud-nav-link:hover {
    color: var(--white) !important;
    background: rgba(0, 184, 212, 0.08) !important;
}

.mud-drawer .mud-nav-link:hover .mud-nav-link-text,
.mud-navmenu .mud-nav-link:hover .mud-nav-link-text {
    color: var(--white) !important;
}

/* Nav group headers/titles */
.mud-drawer .mud-nav-group .mud-nav-link,
.mud-navmenu .mud-nav-group > .mud-nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.mud-drawer .mud-nav-group .mud-nav-link-text,
.mud-navmenu .mud-nav-group .mud-nav-link-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Nested nav links in groups */
.mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link,
.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link-text,
.mud-navmenu .mud-nav-group .mud-collapse-container .mud-nav-link-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Expand/collapse icons in nav groups */
.mud-drawer .mud-nav-group .mud-expand-panel-icon,
.mud-navmenu .mud-nav-group .mud-expand-panel-icon {
    color: var(--reef-aqua, #00B8D4) !important;
}

/* Section headers in navigation */
.mud-drawer .coral-nav-section-text,
.mud-navmenu .coral-nav-section-text {
    color: rgba(0, 184, 212, 0.7) !important;
}

/* ============================================================
   END Navigation Drawer Fix
   ============================================================ */

/* OVERRIDE CSS VARIABLES at component level */
body.mud-theme-dark .compliance-weather,
body.mud-theme-dark .compliance-weather--neutral,
body.mud-theme-dark .compliance-weather--sunny,
body.mud-theme-dark .compliance-weather--cloudy,
body.mud-theme-dark .compliance-weather--rainy,
body.mud-theme-dark .compliance-weather--stormy,
body.mud-theme-dark [class*="compliance-weather"] {
    --compliance-weather-text: #FFFFFF !important;
    --compliance-weather-subtext: rgba(255, 255, 255, 0.9) !important;
    --compliance-weather-grade-text: #FFFFFF !important;
    color: var(--white) !important;
}

/* TideTimer - Dark Mode Background Fix (scoped CSS override) */
html body.mud-theme-dark .tide-timer,
html body.mud-theme-dark [class*="tide-timer"]:not([class*="__"]) {
    background: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
    --tide-deadline-color: #D1D5DB !important;
    --tide-deadline-label-color: #9CA3AF !important;
    --tide-deadline-date-color: #E2E8F0 !important;
    --tide-label-color: #9CA3AF !important;
    --tide-days-label-color: #D1D5DB !important;
}

/* TideTimer critical/empty states - Dark Mode */
html body.mud-theme-dark .tide-timer--critical,
html body.mud-theme-dark .tide-timer--empty {
    background: linear-gradient(135deg, var(--tide-empty) 0%, var(--gray-800) 100%) !important;
}

body.mud-theme-dark .coral-metric-card,
body.mud-theme-dark [class*="metric-card"] {
    --navy-text: #FFFFFF !important;
    --gray-600: #A9B7C6 !important;
}

/* ============================================================
   CRITICAL FIX: Card Background Overrides for Dark Mode
   These cards have background: white in their base styles.
   Must use !important to override on initial page load.
   ============================================================ */
html body.mud-theme-dark .coral-metric-card,
html body.mud-theme-dark .coral-card,
html body.mud-theme-dark .coral-report-card,
html body.mud-theme-dark .coral-action-card,
html body.mud-theme-dark .dashboard-card,
html body.mud-theme-dark .form-section-panel,
html body.mud-theme-dark [class*="metric-card"] {
    background: var(--gray-800) !important;
    background-color: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
}

/* Quick Action Cards */
html body.mud-theme-dark .coral-action-card,
html body.mud-theme-dark .quick-action-item {
    background: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
}

html body.mud-theme-dark .coral-action-card:hover,
html body.mud-theme-dark .quick-action-item:hover {
    background: var(--gray-700) !important;
}

/* CoralCard chart card titles — ensure near-white contrast on --gray-800 dark background.
   The gray-600 token used in light mode renders near-invisible on the dark card background
   because the 05-week5-components.css dark override resolves var(--gray-400) ambiguously
   in some Blazor rendering contexts. This !important rule is the authoritative fix.
   Covers both element-selector and class-selector forms for maximum specificity. */
html body.mud-theme-dark .coral-card__title,
html body.mud-theme-dark h3.coral-card__title {
    color: var(--gray-25) !important; /* #F9FAFB — near-white, WCAG AA on --gray-800 */
}

html body.mud-theme-dark .coral-card__subtitle {
    color: var(--gray-400) !important; /* #9CA3AF in dark-mode token scope */
}

/* Form section titles/headers — navy-blue text is invisible on dark backgrounds.
   Excludes elements with inline semantic colors (e.g. Danger Zone uses --coral-error) */
html body.mud-theme-dark .form-section-title:not([style*="coral-error"]),
html body.mud-theme-dark .form-section-panel h3:not([style*="coral-error"]),
html body.mud-theme-dark .form-section-panel h4:not([style*="coral-error"]) {
    color: var(--gray-25) !important;
}

html body.mud-theme-dark .form-section-header {
    background: var(--gray-700) !important;
    border-color: var(--gray-600) !important;
}

/* Page titles using --navy-blue or --deep-sea that lack dark mode overrides */
html body.mud-theme-dark .page-title,
html body.mud-theme-dark .page-title-section h1,
html body.mud-theme-dark .page-title-section .page-title {
    color: var(--gray-25) !important;
}

/* Section headings in settings/account pages */
html body.mud-theme-dark [class*="section"] h3[style*="navy-blue"],
html body.mud-theme-dark h3[style*="color: var(--navy-blue)"] {
    color: var(--gray-25) !important;
}

/* ComplianceWeather - All elements with direct color override */
/* Include Blazor scoped attribute for maximum specificity */
body.mud-theme-dark .compliance-weather__headline,
body.mud-theme-dark .compliance-weather--neutral .compliance-weather__headline,
body.mud-theme-dark [class*="compliance-weather"] .compliance-weather__headline,
body.mud-theme-dark h3.compliance-weather__headline,
body.mud-theme-dark .compliance-weather__headline[b-85iycv4l0b],
body.mud-theme-dark .compliance-weather--neutral .compliance-weather__headline[b-85iycv4l0b] {
    color: var(--white) !important;
}

html body.mud-theme-dark .compliance-weather__subtext,
html body.mud-theme-dark .compliance-weather--neutral .compliance-weather__subtext,
html body.mud-theme-dark [class*="compliance-weather"] .compliance-weather__subtext,
html body.mud-theme-dark p.compliance-weather__subtext {
    color: rgba(255, 255, 255, 0.9) !important;
}

html body.mud-theme-dark .compliance-weather__grade,
html body.mud-theme-dark .compliance-weather__grade-label,
html body.mud-theme-dark .compliance-weather__grade-value,
html body.mud-theme-dark .compliance-weather__score,
html body.mud-theme-dark span.compliance-weather__grade-label,
html body.mud-theme-dark span.compliance-weather__grade-value,
html body.mud-theme-dark span.compliance-weather__score,
html body.mud-theme-dark [class*="compliance-weather"] .compliance-weather__grade,
html body.mud-theme-dark [class*="compliance-weather"] .compliance-weather__grade-label,
html body.mud-theme-dark [class*="compliance-weather"] .compliance-weather__grade-value,
html body.mud-theme-dark [class*="compliance-weather"] .compliance-weather__score {
    color: var(--white) !important;
}

/* TideTimer - All elements with maximum specificity */
html body.mud-theme-dark .tide-timer__days-label,
html body.mud-theme-dark span.tide-timer__days-label,
html body.mud-theme-dark [class*="tide-timer"] .tide-timer__days-label {
    color: var(--gray-300) !important;
}

html body.mud-theme-dark .tide-timer__deadline,
html body.mud-theme-dark .tide-timer__deadline-label,
html body.mud-theme-dark span.tide-timer__deadline-label,
html body.mud-theme-dark [class*="tide-timer"] .tide-timer__deadline,
html body.mud-theme-dark [class*="tide-timer"] .tide-timer__deadline-label {
    color: var(--gray-400) !important;
}

html body.mud-theme-dark .tide-timer__deadline-date,
html body.mud-theme-dark span.tide-timer__deadline-date,
html body.mud-theme-dark [class*="tide-timer"] .tide-timer__deadline-date {
    color: var(--cool-gray-200) !important;
}

html body.mud-theme-dark .tide-timer__label,
html body.mud-theme-dark span.tide-timer__label,
html body.mud-theme-dark [class*="tide-timer"] .tide-timer__label {
    color: var(--gray-400) !important;
}

/* Metric cards - Values and labels with maximum specificity */
/* IMPORTANT: var(--white) MUST NOT be used here — in dark mode it resolves to #1F2937
   (same as card background var(--gray-800)), making headline values invisible.
   var(--gray-25) = #F9FAFB is NOT overridden in dark mode, giving 14.9:1 contrast — WCAG AAA. */
html body.mud-theme-dark .metric-value,
html body.mud-theme-dark h3.metric-value,
html body.mud-theme-dark [class*="metric-value"],
html body.mud-theme-dark .coral-metric-value,
html body.mud-theme-dark .coral-metric-card .metric-value {
    color: var(--gray-25) !important; /* #F9FAFB — 14.9:1 on --gray-800 — WCAG AAA */
}

html body.mud-theme-dark .metric-label,
html body.mud-theme-dark p.metric-label,
html body.mud-theme-dark [class*="metric-label"],
html body.mud-theme-dark .coral-metric-label,
html body.mud-theme-dark .coral-metric-card .metric-label {
    color: var(--dm-text-muted) !important;
}

html body.mud-theme-dark .metric-subtitle,
html body.mud-theme-dark p.metric-subtitle,
html body.mud-theme-dark .coral-metric-card .metric-subtitle {
    color: var(--gray-400) !important;
}

/* Summary cards */
.mud-theme-dark .coral-summary-value,
.mud-theme-dark [class*="summary-value"] {
    color: var(--white) !important;
}

.mud-theme-dark .coral-summary-label,
.mud-theme-dark [class*="summary-label"] {
    color: var(--dm-text-muted) !important;
}

/* Generic dark text color overrides */
.mud-theme-dark [style*="color: #003057"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
.mud-theme-dark [style*="color:#003057"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    color: var(--gray-25) !important;
}

.mud-theme-dark [style*="color: #2d3748"],
.mud-theme-dark [style*="color:#2d3748"] {
    color: var(--cool-gray-200) !important;
}

.mud-theme-dark [style*="color: #4a5568"],
.mud-theme-dark [style*="color:#4a5568"] {
    color: var(--gray-300) !important;
}

.mud-theme-dark [style*="color: #4b5563"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
.mud-theme-dark [style*="color:#4b5563"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    color: var(--gray-300) !important;
}

.mud-theme-dark [style*="color: #6b7280"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
.mud-theme-dark [style*="color:#6b7280"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    color: var(--gray-400) !important;
}

.mud-theme-dark [style*="color: #718096"],
.mud-theme-dark [style*="color:#718096"] {
    color: var(--gray-400) !important;
}

/* NetworkGraph SVG node labels - Override fill for dark mode */
html body.mud-theme-dark .node-label,
html body.mud-theme-dark .network-graph-container .node-label,
html body.mud-theme-dark svg .node-label,
html body.mud-theme-dark text.node-label {
    fill: var(--gray-25) !important;
}

/* NetworkGraph legend - Dark mode background and text */
html body.mud-theme-dark .network-legend {
    background: rgba(31, 41, 55, 0.95) !important;
    border-color: rgba(0, 184, 212, 0.3) !important;
}

html body.mud-theme-dark .legend-item,
html body.mud-theme-dark .network-legend .legend-item,
html body.mud-theme-dark .network-legend span {
    color: var(--gray-25) !important;
}

/* ============================================================
   Page Headers - Dark Mode Overrides
   ============================================================ */

/* Page title headers (h1-h6) in dark mode */
html body.mud-theme-dark .mud-typography-h1,
html body.mud-theme-dark .mud-typography-h2,
html body.mud-theme-dark .mud-typography-h3,
html body.mud-theme-dark .mud-typography-h4,
html body.mud-theme-dark .mud-typography-h5,
html body.mud-theme-dark .mud-typography-h6 {
    color: var(--gray-25) !important;
}

/* Primary button in dark mode - use darker cyan for better contrast with white text */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-primary {
    background-color: var(--info) !important; /* Darker cyan - 4.5:1 with white */
}

/* Tertiary button (accent/coral) - use darker version for contrast */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-tertiary {
    background-color: #DC5638 !important; /* Darker coral - 4.5:1 with white */ /* TOKEN-EXCEPTION: #DC5638 — coral-dark 4.5:1 accessible variant */
}

/* Info button - ensure proper contrast */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-info {
    background-color: #1D4ED8 !important; /* Darker blue - 4.5:1 with white */ /* TOKEN-EXCEPTION: #1D4ED8 — blue-700 CTA accessible variant */
}

/* Dark button - ensure white text */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-dark {
    background-color: var(--gray-700) !important;
    color: var(--white) !important;
}

html body.mud-theme-dark .mud-button-filled.mud-button-filled-dark .mud-button-label {
    color: var(--white) !important;
}

/* Anomaly page run button - specific override */
html body.mud-theme-dark .anomaly-run-button,
html body.mud-theme-dark .anomaly-run-button .mud-button-label,
html body.mud-theme-dark .anomaly-run-button span,
html body.mud-theme-dark .anomaly-run-button p {
    color: var(--white) !important;
}

/* ============================================================
   Button Text Contrast Fixes - WCAG AA Compliance
   Ensure all filled buttons have readable text (4.5:1 contrast)
   ============================================================ */

/* Primary button - white text on cyan background */
.mud-button-filled.mud-button-filled-primary .mud-button-label,
html body .mud-button-filled.mud-button-filled-primary .mud-button-label {
    color: var(--white) !important;
}

html body.mud-theme-dark .mud-button-filled.mud-button-filled-primary .mud-button-label {
    color: var(--white) !important;
}

/* Tertiary/Coral button - white text for contrast on coral background */
.mud-button-filled.mud-button-filled-tertiary .mud-button-label,
html body .mud-button-filled.mud-button-filled-tertiary .mud-button-label {
    color: var(--white) !important;
}

html body.mud-theme-dark .mud-button-filled.mud-button-filled-tertiary .mud-button-label {
    color: var(--white) !important;
}

/* Success button - white text */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-success .mud-button-label {
    color: var(--white) !important;
}

/* Error button - white text */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-error .mud-button-label {
    color: var(--white) !important;
}

/* Info button - white text */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-info .mud-button-label {
    color: var(--white) !important;
}

/* Warning button - dark text for readability on yellow/amber */
.mud-button-filled.mud-button-filled-warning .mud-button-label,
html body.mud-theme-dark .mud-button-filled.mud-button-filled-warning .mud-button-label {
    color: var(--gray-800) !important;
}

/* Secondary button - white text on dark background */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-secondary .mud-button-label {
    color: var(--white) !important;
}

/* ============================================================
   Required Field Indicators - Bold Red Asterisk
   Make it obvious which fields are required
   ============================================================ */

/* Required field asterisk - make it bold and red */
.mud-input-label-inputcontrol .mud-input-label-text::after,
.mud-input-control .mud-input-label::after,
label.mud-input-label::after {
    content: " *";
    color: var(--coral-error) !important; /* Storm Red */
    font-weight: 700 !important;
}

/* Only show asterisk for required fields (MudBlazor adds specific classes) */
.mud-input-required .mud-input-label-text::after,
.mud-input-control-input-container .mud-input-label-inputcontrol.mud-input-label-required::after,
.mud-input-label.mud-input-label-required::after {
    content: " *";
    color: var(--coral-primary) !important; /* var(--coral-primary) Coral */
    font-weight: 700 !important;
}

/* Target the asterisk character directly in required labels */
.mud-input-required .mud-input-label-text,
.mud-input-label-required {
    font-weight: 500;
}

/* Style the asterisk in MudTextField with Required="true" */
.mud-input-control:has(input[required]) .mud-input-label::after,
.mud-input-control:has(input[aria-required="true"]) .mud-input-label::after,
.mud-input-control:has(textarea[required]) .mud-input-label::after {
    content: " *";
    color: var(--coral-primary) !important; /* var(--coral-primary) Coral */
    font-weight: 700 !important;
}

/* MudSelect required indicator */
.mud-select:has([aria-required="true"]) .mud-input-label::after {
    content: " *";
    color: var(--coral-primary) !important; /* var(--coral-primary) Coral */
    font-weight: 700 !important;
}

/* Dark mode - ensure asterisk remains visible */
html body.mud-theme-dark .mud-input-required .mud-input-label-text::after,
html body.mud-theme-dark .mud-input-label-required::after,
html body.mud-theme-dark .mud-input-control:has(input[required]) .mud-input-label::after {
    color: var(--coral-primary-light) !important; /* var(--coral-primary-light) lighter coral for dark mode */
    font-weight: 700 !important;
}

/* ============================================================
   Compliance Intelligence Page - Dark Mode Overrides
   ============================================================ */

/* Top stat cards - empty state styling */
html body.mud-theme-dark .empty-state-card {
    background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%) !important;
    border: 2px dashed rgba(156, 163, 175, 0.4) !important;
}

/* Card titles - MudText with subtitle2 typography in cards */
html body.mud-theme-dark .mud-card .mud-typography-subtitle2 {
    color: var(--gray-200) !important;
}

/* Force override for inline styles on card labels in dark mode */
/* These labels use Style="color: {(IsDarkMode ? "#E5E7EB" : "#6C757D")}" but IsDarkMode may not sync */
html body.mud-theme-dark .mud-card .mud-typography-subtitle2[style*="color"],
html body.mud-theme-dark .mud-card .mud-typography-subtitle2[style*="#6C757D"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .mud-card-content .mud-typography-subtitle2 {
    color: var(--gray-200) !important;
}

/* Caption text in cards */
html body.mud-theme-dark .mud-card .mud-typography-caption {
    color: var(--gray-400) !important;
}

/* Headings in cards (h3, h4, h5 typography) */
html body.mud-theme-dark .mud-card .mud-typography-h3,
html body.mud-theme-dark .mud-card .mud-typography-h4,
html body.mud-theme-dark .mud-card .mud-typography-h5 {
    color: var(--gray-300) !important;
}

/* MudText with Color.Secondary in dark mode - ensure visibility */
html body.mud-theme-dark .mud-card .mud-secondary-text {
    color: var(--gray-200) !important;
}

/* Empty state dash indicators */
html body.mud-theme-dark .mud-card .mud-typography-h3:empty,
html body.mud-theme-dark .mud-card .mud-typography-h5:empty {
    color: var(--gray-400) !important;
}

/* Card header titles */
html body.mud-theme-dark .mud-card-header .mud-typography-h6 {
    color: var(--gray-25) !important;
}

/* Override any inline styles with color #9e9e9e */
html body.mud-theme-dark [style*="color: #9e9e9e"],
html body.mud-theme-dark [style*="color:#9e9e9e"] {
    color: var(--gray-400) !important;
}

/* Override #6C757D (Bootstrap gray-600) - common label color */
html body.mud-theme-dark [style*="color: #6C757D"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="color:#6C757D"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="color: rgb(108, 117, 125)"],
html body.mud-theme-dark [style*="color:rgb(108,117,125)"],
html body.mud-theme-dark [style*="color: rgb(108,117,125)"] {
    color: var(--gray-200) !important;
}

/* MudPaper - General Dark Mode Background Fix */
/* MudPaper components need explicit background override in dark mode.
   Exclude .theme-card so that the theme-preview cards on the Appearance
   Settings page keep their intended inline background (white for Light,
   dark-gray for Dark, gradient for System). */
html body.mud-theme-dark .mud-paper:not(.theme-card) {
    background: var(--gray-800) !important;
    background-color: var(--gray-800) !important;
}

/* MudSwitch label text — in dark mode the label text inherits the dark-theme color
   (light/white). When the parent MudPaper background is correctly dark this is
   already readable; but add an explicit override so labels stay visible even
   if the background fix hasn't cascaded yet (e.g. on initial hydration). */
html body.mud-theme-dark .mud-switch p.mud-typography,
html body.mud-theme-dark .mud-switch span.mud-typography,
html body.mud-theme-dark .mud-switch .mud-button-label {
    color: var(--gray-25) !important;
}

/* Nested MudPaper: slightly elevated surface (#374151) to maintain visual depth.
   The general rule above sets var(--gray-800) for all .mud-paper elements including nested
   ones, overriding 04-coral-components.css's .mud-theme-dark .mud-paper .mud-paper
   rule (no !important there). This higher-specificity !important rule restores the
   intended nested-paper treatment used on the Change Password page (password
   requirements panel, security tips panel) and anywhere else cards are nested.
   .mud-paper-outlined and .theme-card are excluded because they have their own
   dark background (var(--gray-800)) + visible border rules defined below. */
html body.mud-theme-dark .mud-paper .mud-paper:not(.mud-paper-outlined):not(.theme-card) {
    background: var(--gray-700) !important;
}

/* MudSwitch label text — ensure it is readable on dark surfaces.
   MudBlazor renders the label in mud-inherit-text which may stay dark
   when form-section-panel background has not yet propagated the dark theme. */
html body.mud-theme-dark .mud-switch .mud-inherit-text,
html body.mud-theme-dark .mud-switch p.mud-typography,
html body.mud-theme-dark .mud-switch span.mud-switch-label {
    color: var(--gray-25) !important;
}

html body.mud-theme-dark .mud-paper.coral-action-card {
    background: var(--gray-800) !important;
    border: 1px solid var(--gray-700) !important;
}

html body.mud-theme-dark .mud-paper.coral-action-card:hover {
    background: var(--gray-700) !important;
}

/* MudPaper outlined - Predictive Insights cards */
html body.mud-theme-dark .mud-paper-outlined {
    background: var(--gray-800) !important;
    background-color: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
}

html body.mud-theme-dark .mud-paper-outlined .mud-typography-subtitle1 {
    color: var(--gray-25) !important;
}

html body.mud-theme-dark .mud-paper-outlined .mud-typography-h4 {
    color: inherit;
}

html body.mud-theme-dark .mud-paper-outlined .mud-typography-caption {
    color: var(--gray-400) !important;
}

/* ============================================================
   --deep-sea (var(--deep-sea)) used as TEXT COLOR — dark mode fix
   --deep-sea is intentionally left as a dark navy for backgrounds
   (navigation drawer, gradient banners) but is invisible as text
   on dark surfaces. Override only color: uses here.
   ============================================================ */

/* 1. Inline style="color: var(--deep-sea)" on any element.
      --deep-sea is NOT overridden globally (it is used for backgrounds/gradients).
      These attribute selectors target only text-color usage. */
html body.mud-theme-dark [style*="color: var(--deep-sea)"],
html body.mud-theme-dark [style*="color:var(--deep-sea)"] {
    color: var(--cool-gray-200) !important;
}

/* 2. Inline style="background: white; color: var(--deep-sea)" buttons (CookiePolicy) —
      covered by rule (1) above for the text color + the existing
      [style*="background: white"] override in 04-coral-components.css for the background */

/* 3. Utility class .text-deep-sea (02-typography.css) */
html body.mud-theme-dark .text-deep-sea {
    color: var(--gray-25) !important;
}

/* 4. .file-info-item strong (04-coral-components.css) */
html body.mud-theme-dark .file-info-item strong {
    color: var(--gray-25) !important;
}

/* 5. .trust-badge-standalone (04-coral-components.css) */
html body.mud-theme-dark .trust-badge-standalone {
    color: var(--cool-gray-200) !important;
    background: rgba(0, 184, 212, 0.08) !important;
    border-color: rgba(0, 184, 212, 0.25) !important;
}

/* 6. Scheduling stat card values (09-report-components.css) */
html body.mud-theme-dark .scheduling-stat-card--total .scheduling-stat-value,
html body.mud-theme-dark .scheduling-stat-card--next .scheduling-stat-value {
    color: var(--gray-25) !important;
}

/* 7. Scheduling stat card backgrounds — replace light tint with dark tint */
html body.mud-theme-dark .scheduling-stat-card--total,
html body.mud-theme-dark .scheduling-stat-card--next {
    background: rgba(59, 130, 246, 0.12) !important;
}

/* 8. Firm management titles (09-report-components.css) */
html body.mud-theme-dark .firm-management-title,
html body.mud-theme-dark .firm-management-subtitle {
    color: var(--gray-25) !important;
}

/* ============================================================
   Profile Settings — ReadOnly MudTextField text visibility
   MudBlazor renders ReadOnly fields with .mud-input-root-disabled
   which browsers can grey-out via opacity or -webkit-text-fill-color.
   Override to keep text readable in dark mode.
   Scoped to read-only inputs only (input[readonly]) so that genuinely
   disabled inputs retain their greyed-out appearance.
   ============================================================ */
html body.mud-theme-dark .mud-input-root-disabled:has(input[readonly]) .mud-input-slot,
html body.mud-theme-dark .mud-input-root-disabled input[readonly] {
    color: var(--coral-text-secondary) !important;
    -webkit-text-fill-color: var(--coral-text-secondary) !important;
    opacity: 1 !important;
}

/* ============================================================
   Inline background colors not yet covered by
   04-coral-components.css dark mode overrides
   ============================================================ */

/* Light-blue info tint backgrounds (#F0F9FF and variants) */
html body.mud-theme-dark [style*="background: #F0F9FF"],
html body.mud-theme-dark [style*="background:#F0F9FF"],
html body.mud-theme-dark [style*="background: #f0f9ff"],
html body.mud-theme-dark [style*="background:#f0f9ff"],
html body.mud-theme-dark [style*="background-color: #F0F9FF"],
html body.mud-theme-dark [style*="background-color:#F0F9FF"] {
    background: rgba(59, 130, 246, 0.08) !important;
    background-color: rgba(59, 130, 246, 0.08) !important;
}

/* Info gradient class — override .coral-info-gradient-bg and .coral-datagrid__toolbar
   (both use linear-gradient(135deg, var(--info-bg-2) → var(--info-light)) in light mode). */
html body.mud-theme-dark .coral-info-gradient-bg,
html body.mud-theme-dark .coral-datagrid__toolbar {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.05) 100%) !important;
}

/* Light gray backgrounds (#f5f5f5 / #F5F5F5) */
html body.mud-theme-dark [style*="background: #f5f5f5"],
html body.mud-theme-dark [style*="background:#f5f5f5"],
html body.mud-theme-dark [style*="background: #F5F5F5"],
html body.mud-theme-dark [style*="background:#F5F5F5"],
html body.mud-theme-dark [style*="background-color: #f5f5f5"],
html body.mud-theme-dark [style*="background-color:#f5f5f5"],
html body.mud-theme-dark [style*="background-color: #F5F5F5"],
html body.mud-theme-dark [style*="background-color:#F5F5F5"] {
    background: var(--gray-700) !important;
    background-color: var(--gray-700) !important;
}

/* Light coral/peach tint backgrounds (#FFF5F0) */
html body.mud-theme-dark [style*="background: #FFF5F0"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background:#FFF5F0"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background: #fff5f0"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background:#fff5f0"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    background: rgba(255, 107, 74, 0.08) !important;
}

/* Light yellow/amber tint backgrounds (#FFFBEB) */
html body.mud-theme-dark [style*="background: #FFFBEB"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background:#FFFBEB"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background: #fffbeb"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background:#fffbeb"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    background: rgba(245, 158, 11, 0.08) !important;
}

/* Light green tint backgrounds (#F0FDF4) */
html body.mud-theme-dark [style*="background: #F0FDF4"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background:#F0FDF4"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background: #f0fdf4"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark [style*="background:#f0fdf4"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    background: rgba(16, 185, 129, 0.08) !important;
    opacity: 1 !important;
}

/* ============================================================
   MudStepper — Dark Mode Overrides
   The default MudBlazor stepper connector lines and inactive
   step indicators need sufficient contrast on dark surfaces.
   ============================================================ */
html body.mud-theme-dark .mud-step-label-text {
    color: var(--gray-300) !important;
}

html body.mud-theme-dark .mud-step-label.mud-step-label-active .mud-step-label-text {
    color: var(--gray-25) !important;
}

html body.mud-theme-dark .mud-step-label.mud-step-label-completed .mud-step-label-text {
    color: var(--coral-success-light) !important;
}

html body.mud-theme-dark .mud-step-connector-line {
    border-color: var(--gray-600) !important;
}

html body.mud-theme-dark .mud-step-icon-root {
    border-color: var(--gray-600) !important;
    color: var(--gray-400) !important;
}

html body.mud-theme-dark .mud-step-icon-root.mud-step-icon-active {
    background-color: var(--reef-aqua, #00B8D4) !important;
    border-color: var(--reef-aqua, #00B8D4) !important;
    color: var(--white) !important;
}

html body.mud-theme-dark .mud-step-icon-root.mud-step-icon-completed {
    background-color: var(--coral-success-light) !important;
    border-color: var(--coral-success-light) !important;
    color: var(--white) !important;
}

/* ============================================================
   Bulk Client Import page — hardcoded inline background overrides
   BulkClientImport.razor uses these colors in the CSV template
   table, drop-zone, and result stat cards.
   Selectors are scoped to .bulk-client-import-page to avoid
   site-wide side effects on any element sharing these colors.
   ============================================================ */

/* Light gray — CSV template table + drop-zone default (#F8FAFC) */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #F8FAFC"],
html body.mud-theme-dark .bulk-client-import-page [style*="background:#F8FAFC"],
html body.mud-theme-dark .bulk-client-import-page [style*="background: #f8fafc"],
html body.mud-theme-dark .bulk-client-import-page [style*="background:#f8fafc"],
html body.mud-theme-dark .bulk-client-import-page [style*="background-color: #F8FAFC"],
html body.mud-theme-dark .bulk-client-import-page [style*="background-color:#F8FAFC"],
html body.mud-theme-dark .bulk-client-import-page [style*="background-color: #f8fafc"],
html body.mud-theme-dark .bulk-client-import-page [style*="background-color:#f8fafc"] {
    background: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
}

/* Success green — valid-rows card + file-accepted drop-zone (#ECFDF5) */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #ECFDF5"],
html body.mud-theme-dark .bulk-client-import-page [style*="background:#ECFDF5"],
html body.mud-theme-dark .bulk-client-import-page [style*="background: #ecfdf5"],
html body.mud-theme-dark .bulk-client-import-page [style*="background:#ecfdf5"] {
    background: rgba(16, 185, 129, 0.1) !important;
}

/* Error red — invalid-rows card (#FEF2F2) */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #FEF2F2"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background:#FEF2F2"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #fef2f2"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background:#fef2f2"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Warning amber — duplicate-rows card (#FEF3C7) */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #FEF3C7"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background:#FEF3C7"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #fef3c7"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background:#fef3c7"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    background: rgba(245, 158, 11, 0.1) !important;
}

/* Neutral gray — time-elapsed card + fallback stat cards (#F3F4F6) */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #F3F4F6"],
html body.mud-theme-dark .bulk-client-import-page [style*="background:#F3F4F6"],
html body.mud-theme-dark .bulk-client-import-page [style*="background: #f3f4f6"],
html body.mud-theme-dark .bulk-client-import-page [style*="background:#f3f4f6"] {
    background: var(--gray-700) !important;
}

/* Light blue — drag-active drop-zone (#E0F2FE) */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #E0F2FE"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background:#E0F2FE"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background: #e0f2fe"], /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
html body.mud-theme-dark .bulk-client-import-page [style*="background:#e0f2fe"] { /* TOKEN-EXCEPTION: inline-style selector must match literal attribute value */
    background: rgba(14, 165, 233, 0.12) !important;
}

/* ============================================================
   /settings/privacy — dark mode visibility fixes
   Issue #2: Radio button label text barely visible on dark bg
   Issue #3: Nested MudCards (data retention / data protection)
             must visually stand out from the var(--gray-800) panel bg
   ============================================================ */

/* Issue #2: Primary radio label text (no inline color — inherits).
   Explicitly set to near-white so it is readable regardless of cascade. */
html body.mud-theme-dark .mud-radio .mud-typography-body1,
html body.mud-theme-dark .mud-radio-group .mud-typography-body1 {
    color: var(--gray-25) !important;
}

/* Issue #2: Caption / hint text under each radio option.
   Uses Style="color: var(--gray-600)" inline; --gray-600 resolves to
   var(--cool-gray-200) in dark mode but we intentionally use var(--gray-300) (slightly
   dimmer) to give captions lower visual weight than body1 labels. */
html body.mud-theme-dark .mud-radio .mud-typography-caption,
html body.mud-theme-dark .mud-radio-group .mud-typography-caption {
    color: var(--gray-300) !important;
}

/* Issue #3: MudCards nested inside form-section-panel (e.g. Data
   Retention, Data Protection sections) — use var(--gray-700) so they are
   visually distinguishable from the surrounding var(--gray-800) panel background.
   The general .mud-paper !important rule would otherwise flatten them. */
html body.mud-theme-dark .form-section-panel .mud-card {
    background: var(--gray-700) !important;
}

/* Ensure body2 / subtitle2 text inside those nested cards stays readable */
html body.mud-theme-dark .form-section-panel .mud-card .mud-typography-body2,
html body.mud-theme-dark .form-section-panel .mud-card .mud-typography-subtitle2 {
    color: var(--gray-200) !important;
}

/* ============================================================
   MudSwitch label text — dark mode visibility fix
   ============================================================ */
html body.mud-theme-dark .mud-switch-label {
    color: var(--coral-text-primary) !important;
}

/* ============================================================
   Scoped CSS dark mode rules — relocated from .razor.css files
   Blazor's CSS isolation does NOT process the :global() pseudo-class,
   so rules using :global(body.mud-theme-dark) ship as invalid CSS
   and are silently dropped by browsers. All such rules live here
   in the global stylesheet instead.
   ============================================================ */

/* CurrentPeriodSummaryCard.razor */
html body.mud-theme-dark .cpsc-breakdown {
    border-top-color: rgba(255, 255, 255, 0.12);
}

html body.mud-theme-dark .cpsc-label {
    /* #A9B7C6 — 8.2:1 on gray-800 — WCAG AAA */
    color: var(--dm-text-muted, #A9B7C6) !important;
}

html body.mud-theme-dark .cpsc-value {
    color: var(--dm-text, #E0E0E0) !important;
}

html body.mud-theme-dark .cpsc-value--success {
    /* #34D399 — 5.4:1 on gray-800 — WCAG AA */
    color: var(--coral-success-light, #34D399) !important;
}

html body.mud-theme-dark .cpsc-value--info {
    /* #06B6D4 — 5.0:1 on gray-800 — WCAG AA */
    color: var(--coral-info-light, #06B6D4) !important;
}

/* DataHealthIndicatorCard.razor */
html body.mud-theme-dark .dhic-issues-list {
    border-top-color: rgba(255, 255, 255, 0.12);
}
html body.mud-theme-dark .dhic-view-details,
html body.mud-theme-dark .dhic-view-details__icon {
    color: var(--coral-info-light, #06B6D4) !important;
}

/* QuickActionCard.razor */
html body.mud-theme-dark .coral-action-card:hover {
    background: var(--gray-700) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--coral-accent-light) !important;
}
html body.mud-theme-dark .coral-action-card--disabled:hover {
    background: var(--gray-800) !important;
    border-color: var(--gray-700) !important;
}

/* ClientDetails.razor */
html body.mud-theme-dark .voh-successor-banner {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-left-color: var(--coral-warning, #F59E0B);
}

/* Clients.razor */
html body.mud-theme-dark .client-compliance-bar {
    background-color: var(--gray-700);
}
html body.mud-theme-dark .client-compliance-score {
    color: var(--dm-text);
}

/* Filing.razor */
html body.mud-theme-dark .filing-page-title {
    color: var(--white);
}

/* FirmPortal.razor */
html body.mud-theme-dark .mud-data-grid-firm-clients .mud-data-grid-col-header-cell {
    background-color: var(--gray-700) !important;
    color: var(--dm-text) !important;
    border-bottom-color: var(--gray-600) !important;
}
html body.mud-theme-dark .mud-data-grid-firm-clients .mud-data-grid-row:hover td {
    background-color: rgba(78, 205, 196, 0.06);
}
html body.mud-theme-dark .firm-overview-card .mud-card {
    background-color: var(--gray-800);
}
html body.mud-theme-dark .voh-card--warning {
    border-color: var(--coral-warning, #F59E0B);
    background-color: rgba(245, 158, 11, 0.08);
}

/* Transactions.razor */
html body.mud-theme-dark .transactions-filter-label {
    color: var(--cool-gray-400);
}
html body.mud-theme-dark .transactions-data-grid .mud-table-head .mud-table-cell {
    background-color: var(--gray-800);
    color: var(--dm-text);
    border-bottom-color: var(--gray-600);
}
html body.mud-theme-dark .transactions-data-grid .mud-table-row:hover td {
    background-color: rgba(78, 205, 196, 0.06);
}

/* VATEntry.razor */
html body.mud-theme-dark .voh-blocked-poster-band {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-left-color: var(--coral-warning, #F59E0B);
}

/* VATReturns.razor */
html body.mud-theme-dark .section56a-eligible-icon,
html body.mud-theme-dark .section56a-eligible-text {
    color: var(--coral-success-light) !important;
}
html body.mud-theme-dark .section56a-ineligible-icon {
    color: var(--coral-error-light) !important;
}
html body.mud-theme-dark .return-data-row:hover td {
    background-color: rgba(78, 205, 196, 0.06);
}
html body.mud-theme-dark .coral-table-enhanced .mud-table-head .mud-table-cell {
    background-color: var(--gray-800);
    color: var(--dm-text);
    border-bottom-color: var(--gray-600);
}

/* RegulatoryAcknowledgementModal.razor */
html body.mud-theme-dark .ram-consequence-band {
    background-color: rgba(239, 68, 68, 0.15);
    border-left-color: var(--coral-error, #EF4444);
}
html body.mud-theme-dark .ram-consequence-band__text,
html body.mud-theme-dark .ram-body-text__content,
html body.mud-theme-dark .ram-step-heading {
    color: rgba(255, 255, 255, 0.87);
}
html body.mud-theme-dark .ram-client-header {
    background-color: rgba(255, 255, 255, 0.04);
}
html body.mud-theme-dark .ram-bica-state--verifying {
    background-color: rgba(0, 184, 212, 0.10);
}
html body.mud-theme-dark .ram-bica-state--verified {
    background-color: rgba(16, 185, 129, 0.12);
}
html body.mud-theme-dark .ram-bica-state--stale {
    background-color: rgba(245, 158, 11, 0.12);
}
html body.mud-theme-dark .ram-bica-state--not-found,
html body.mud-theme-dark .ram-bica-state--unreachable {
    background-color: rgba(239, 68, 68, 0.12);
}
html body.mud-theme-dark .ram-unauthored-band {
    background-color: rgba(240, 90, 40, 0.15);
}
html body.mud-theme-dark .ram-diff__panel--prior {
    background-color: rgba(239, 68, 68, 0.10);
}
html body.mud-theme-dark .ram-diff__panel--current {
    background-color: rgba(16, 185, 129, 0.10);
}
html body.mud-theme-dark .ram-body-text {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

/* TideTimer.razor */
html body.mud-theme-dark .tide-timer {
    background: var(--gray-800);
    border-color: var(--gray-700);
}
html body.mud-theme-dark .tide-timer--critical {
    background: linear-gradient(135deg, var(--error-darkest) 0%, var(--gray-800) 100%);
}
html body.mud-theme-dark .tide-timer--empty {
    background: linear-gradient(135deg, var(--tide-empty) 0%, var(--error-darkest) 100%);
}
html body.mud-theme-dark .tide-timer__days-label,
html body.mud-theme-dark .tide-timer__label {
    color: var(--gray-300);
}
html body.mud-theme-dark .tide-timer__deadline,
html body.mud-theme-dark .tide-timer__deadline-label {
    color: var(--gray-400);
}
html body.mud-theme-dark .tide-timer__deadline-date {
    color: var(--cool-gray-200);
}

/* ── CLC-DES-024 Row Actions — destructive menu item styling ──────────────────
   Applied globally because Blazor scoped CSS cannot style MudBlazor popover
   content (rendered outside the component DOM subtree).
   WCAG AA contrast: var(--coral-error) = #EF4444 on MudBlazor dark menu bg
   #1F2937 yields ~5.2:1 ratio which passes AA (4.5:1 minimum). */
.row-actions-destructive-item {
    color: var(--coral-error) !important;
}
.row-actions-destructive-item .mud-icon-root {
    color: var(--coral-error) !important;
}
html body.mud-theme-dark .row-actions-destructive-item {
    color: var(--coral-error) !important;
}
html body.mud-theme-dark .row-actions-destructive-item .mud-icon-root {
    color: var(--coral-error) !important;
}