/* ===================================================================
   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: #FFFFFF !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: #FFFFFF !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: #FFFFFF !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: #FFFFFF !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: #FFFFFF !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: #1F2937 !important;
    border-color: #374151 !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, #7F1D1D 0%, #1F2937 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 .coral-summary-card,
html body.mud-theme-dark .coral-health-card,
html body.mud-theme-dark .coral-opportunity-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: #1F2937 !important;
    border-color: #374151 !important;
}

/* Quick Action Cards */
html body.mud-theme-dark .coral-action-card,
html body.mud-theme-dark .quick-action-item {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

html body.mud-theme-dark .coral-action-card:hover,
html body.mud-theme-dark .quick-action-item:hover {
    background: #374151 !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: #FFFFFF !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: #FFFFFF !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: #D1D5DB !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: #9CA3AF !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: #E2E8F0 !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: #9CA3AF !important;
}

/* Metric cards - Values and labels with maximum specificity */
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: #FFFFFF !important;
}

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: #A9B7C6 !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: #9CA3AF !important;
}

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

.mud-theme-dark .coral-summary-label,
.mud-theme-dark [class*="summary-label"] {
    color: #A9B7C6 !important;
}

/* Generic dark text color overrides */
.mud-theme-dark [style*="color: #003057"],
.mud-theme-dark [style*="color:#003057"] {
    color: #F9FAFB !important;
}

.mud-theme-dark [style*="color: #2d3748"],
.mud-theme-dark [style*="color:#2d3748"] {
    color: #E2E8F0 !important;
}

.mud-theme-dark [style*="color: #4a5568"],
.mud-theme-dark [style*="color:#4a5568"] {
    color: #D1D5DB !important;
}

.mud-theme-dark [style*="color: #4b5563"],
.mud-theme-dark [style*="color:#4b5563"] {
    color: #D1D5DB !important;
}

.mud-theme-dark [style*="color: #6b7280"],
.mud-theme-dark [style*="color:#6b7280"] {
    color: #9CA3AF !important;
}

.mud-theme-dark [style*="color: #718096"],
.mud-theme-dark [style*="color:#718096"] {
    color: #9CA3AF !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: #F9FAFB !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: #F9FAFB !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: #F9FAFB !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: #0891B2 !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 */
}

/* 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 */
}

/* Dark button - ensure white text */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-dark {
    background-color: #374151 !important;
    color: #FFFFFF !important;
}

html body.mud-theme-dark .mud-button-filled.mud-button-filled-dark .mud-button-label {
    color: #FFFFFF !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: #FFFFFF !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: #FFFFFF !important;
}

html body.mud-theme-dark .mud-button-filled.mud-button-filled-primary .mud-button-label {
    color: #FFFFFF !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: #FFFFFF !important;
}

html body.mud-theme-dark .mud-button-filled.mud-button-filled-tertiary .mud-button-label {
    color: #FFFFFF !important;
}

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

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

/* Info button - white text */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-info .mud-button-label {
    color: #FFFFFF !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: #1F2937 !important;
}

/* Secondary button - white text on dark background */
html body.mud-theme-dark .mud-button-filled.mud-button-filled-secondary .mud-button-label {
    color: #FFFFFF !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: #EF4444 !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; /* #FF6B4A 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; /* #FF6B4A Coral */
    font-weight: 700 !important;
}

/* MudSelect required indicator */
.mud-select:has([aria-required="true"]) .mud-input-label::after {
    content: " *";
    color: var(--coral-primary) !important; /* #FF6B4A 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; /* #FF8B70 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, #374151 0%, #1F2937 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: #E5E7EB !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"],
html body.mud-theme-dark .mud-card-content .mud-typography-subtitle2 {
    color: #E5E7EB !important;
}

/* Caption text in cards */
html body.mud-theme-dark .mud-card .mud-typography-caption {
    color: #9CA3AF !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: #D1D5DB !important;
}

/* MudText with Color.Secondary in dark mode - ensure visibility */
html body.mud-theme-dark .mud-card .mud-secondary-text {
    color: #E5E7EB !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: #9CA3AF !important;
}

/* Card header titles */
html body.mud-theme-dark .mud-card-header .mud-typography-h6 {
    color: #F9FAFB !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: #9CA3AF !important;
}

/* Override #6C757D (Bootstrap gray-600) - common label color */
html body.mud-theme-dark [style*="color: #6C757D"],
html body.mud-theme-dark [style*="color:#6C757D"],
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: #E5E7EB !important;
}

/* MudPaper - General Dark Mode Background Fix */
/* MudPaper components need explicit background override in dark mode */
html body.mud-theme-dark .mud-paper {
    background: #1F2937 !important;
}

html body.mud-theme-dark .mud-paper.coral-action-card {
    background: #1F2937 !important;
    border: 1px solid #374151 !important;
}

html body.mud-theme-dark .mud-paper.coral-action-card:hover {
    background: #374151 !important;
}

/* MudPaper outlined - Predictive Insights cards */
html body.mud-theme-dark .mud-paper-outlined {
    background: #1F2937 !important;
    border-color: #374151 !important;
}

html body.mud-theme-dark .mud-paper-outlined .mud-typography-subtitle1 {
    color: #F9FAFB !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: #9CA3AF !important;
}