/* ══════════════════════════════════════════════════════════════════════════
   AnalyTekEducatif — WCAG AA Contrast Fixes  v3
   Purpose : Prevent dark-mode token bleed into light-mode surfaces.
             Enforce 4.5:1+ contrast on all interactive controls.
   Load order: after MudBlazor.min.css and app.css
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LIGHT MODE SURFACE ENFORCEMENT ──────────────────────────────────────
   These rules guarantee white/near-white surfaces in light mode even when
   MudBlazor's dark palette is inadvertently applied to a component.
   ─────────────────────────────────────────────────────────────────────── */

/* Dialog surfaces — title excluded so app.css §13 blue header wins.
   Tokens (var(--…)) : suivent automatiquement body.dark-mode. */
.mud-dialog-surface,
.mud-dialog .mud-dialog-content,
.mud-dialog .mud-dialog-actions {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

/* Input controls */
.mud-input-root,
.mud-input-slot,
.mud-input,
.mud-input-base-input,
input.mud-input-root,
.mud-select-input,
.mud-autocomplete .mud-input-root {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Native form elements */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* Autofill override — browsers inject yellow-ish bg */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--text-primary) !important;
}

/* Picker panels */
.mud-picker-content,
.mud-picker-inline-content,
.mud-picker-container {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.mud-picker-calendar .mud-picker-calendar-header * {
  color: var(--text-primary) !important;
}

.mud-picker-calendar .mud-day:not(.mud-day-selected) {
  color: var(--text-primary) !important;
}

.mud-picker-calendar .mud-day-hidden {
  color: #94A3B8 !important;
}

.mud-picker-calendar .mud-day-selected,
.mud-picker-calendar .mud-day-today {
  background-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* Popover / dropdown menus */
.mud-popover,
.mud-popover-paper,
.mud-menu-list,
.mud-select-popover {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12) !important;
}

/* Dropdown items */
.mud-list-item,
.mud-list-item-text,
.mud-menu-item,
.mud-select-item {
  color: var(--text-primary) !important;
  font-size: 0.875rem !important;
}

.mud-list-item:hover,
.mud-menu-item:hover,
.mud-select-item:hover,
.mud-list-item.mud-list-item-selected,
.mud-select-item.mud-selected {
  background-color: rgba(30,74,122,0.06) !important;
  color: var(--color-primary) !important;
}

/* Labels & helper text — 7.4:1 WCAG AA */
.mud-input-label,
.mud-helper-text,
.mud-input-helper-text {
  color: var(--text-secondary) !important;
}

.mud-input-label.mud-shrink,
.mud-input-label.mud-input-label-animated.mud-shrink {
  color: var(--color-primary) !important;
}

/* Table cells — body cells follow theme tokens */
.mud-table-cell,
.mud-td {
  color: var(--text-primary) !important;
}

/* Table headers — ENFORCE WHITE TEXT on blue background (WCAG AA) */
.mud-th,
.mud-table thead th,
.mud-table .mud-table-head th {
  color: #FFFFFF !important;
  background-color: var(--color-primary) !important;
}

/* Toolbar text */
.mud-toolbar .mud-typography,
.mud-toolbar .mud-typography-body2 {
  color: var(--text-secondary) !important;
}

/* Nav links — backstop overrides (primary rules live in app.css §4)
   Dark sidebar: text must be light (#EDF2F7) on dark navy (#0D2540) */
.mud-drawer .sidebar-nav .mud-nav-link,
.mud-drawer .mud-nav-menu .mud-nav-link,
.mud-drawer .mud-nav-group .mud-nav-link {
  color: #EDF2F7 !important;
}

.mud-drawer .sidebar-nav .mud-nav-link .mud-nav-link-text,
.mud-drawer .sidebar-nav .mud-nav-link .mud-icon-root,
.mud-drawer .sidebar-nav .mud-nav-link .mud-inherit-text,
.mud-drawer .sidebar-nav .mud-nav-link .mud-default-text,
.mud-drawer .sidebar-nav .mud-nav-link svg,
.mud-drawer .mud-nav-menu .mud-nav-link .mud-nav-link-text,
.mud-drawer .mud-nav-menu .mud-nav-link .mud-icon-root,
.mud-drawer .mud-nav-menu .mud-nav-link svg {
  color: #EDF2F7 !important;
  fill: currentColor !important;
}

.mud-drawer .sidebar-nav .mud-nav-link.active,
.mud-drawer .mud-nav-menu .mud-nav-link.active,
.mud-drawer .sidebar-nav .mud-nav-link[aria-current="page"],
.mud-drawer .sidebar-nav .mud-nav-link.active .mud-nav-link-text,
.mud-drawer .sidebar-nav .mud-nav-link.active .mud-icon-root {
  color: #EDF2F7 !important;
}

/* Chip labels */
.mud-chip-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}


/* ── DARK MODE OVERRIDES ──────────────────────────────────────────────────
   When the dark theme is active, reverse all light-mode enforcement.
   ─────────────────────────────────────────────────────────────────────── */

body.dark-mode .mud-dialog-surface,
body.dark-mode .mud-dialog .mud-dialog-content,
body.dark-mode .mud-dialog .mud-dialog-title,
body.dark-mode .mud-dialog .mud-dialog-actions {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
}

/* Dark inputs */
body.dark-mode .mud-input-root,
body.dark-mode .mud-input-slot,
body.dark-mode .mud-input,
body.dark-mode .mud-input-base-input,
body.dark-mode input.mud-input-root,
body.dark-mode .mud-select-input {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
}

body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.dark-mode textarea,
body.dark-mode select {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
  -webkit-text-fill-color: #F8FAFC !important;
}

body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1E293B inset !important;
  -webkit-text-fill-color: #F8FAFC !important;
  caret-color: #F8FAFC !important;
}

/* Dark pickers */
body.dark-mode .mud-picker-content,
body.dark-mode .mud-picker-inline-content,
body.dark-mode .mud-picker-container {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
}

body.dark-mode .mud-picker-calendar .mud-picker-calendar-header * {
  color: #F8FAFC !important;
}

body.dark-mode .mud-picker-calendar .mud-day:not(.mud-day-selected) {
  color: #F8FAFC !important;
}

body.dark-mode .mud-picker-calendar .mud-day-hidden {
  color: #94A3B8 !important;
}

body.dark-mode .mud-picker-calendar .mud-day-selected,
body.dark-mode .mud-picker-calendar .mud-day-today {
  background-color: #38BDF8 !important;
  color: #0F172A !important;
}

/* Dark popovers */
body.dark-mode .mud-popover,
body.dark-mode .mud-popover-paper,
body.dark-mode .mud-menu-list,
body.dark-mode .mud-select-popover {
  background-color: #253347 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.40) !important;
}

body.dark-mode .mud-list-item,
body.dark-mode .mud-list-item-text,
body.dark-mode .mud-menu-item,
body.dark-mode .mud-select-item {
  color: #F8FAFC !important;
}

body.dark-mode .mud-select-item-text {
  color: #F8FAFC !important;
}

body.dark-mode .mud-list-item:hover,
body.dark-mode .mud-menu-item:hover,
body.dark-mode .mud-select-item:hover,
body.dark-mode .mud-list-item.mud-list-item-selected,
body.dark-mode .mud-select-item.mud-selected {
  background-color: rgba(56,189,248,0.08) !important;
  color: #38BDF8 !important;
}

/* Dark labels — WCAG AA strict: brighter blue for dark mode */
body.dark-mode .mud-input-label,
body.dark-mode .mud-helper-text,
body.dark-mode .mud-input-helper-text {
  color: #B5D4F4 !important;
}

body.dark-mode .mud-input-label.mud-shrink,
body.dark-mode .mud-input-label.mud-input-label-animated.mud-shrink {
  color: #38BDF8 !important;
}

/* Dark table — body cells use light text */
body.dark-mode .mud-table-cell,
body.dark-mode .mud-td {
  color: #F8FAFC !important;
}

/* Dark table headers — ENFORCE WHITE TEXT on dark blue background (WCAG AA) */
body.dark-mode .mud-th,
body.dark-mode .mud-table thead th,
body.dark-mode .mud-table .mud-table-head th {
  color: #FFFFFF !important;
  background-color: #1E3A5F !important;
}

/* Dark toolbar — brighter for readability */
body.dark-mode .mud-toolbar .mud-typography,
body.dark-mode .mud-toolbar .mud-typography-body2 {
  color: #B5D4F4 !important;
}

/* Dark nav */
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link,
body.dark-mode .mud-drawer .mud-nav-menu .mud-nav-link,
body.dark-mode .mud-drawer .mud-nav-group .mud-nav-link {
  color: #CBD5E1 !important;
}

body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link .mud-nav-link-text,
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link .mud-icon-root,
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link .mud-inherit-text,
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link .mud-default-text,
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link svg,
body.dark-mode .mud-drawer .mud-nav-menu .mud-nav-link .mud-nav-link-text,
body.dark-mode .mud-drawer .mud-nav-menu .mud-nav-link .mud-icon-root,
body.dark-mode .mud-drawer .mud-nav-menu .mud-nav-link svg {
  color: #CBD5E1 !important;
  fill: currentColor !important;
}

body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link.active,
body.dark-mode .mud-drawer .mud-nav-menu .mud-nav-link.active,
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link[aria-current="page"],
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link.active .mud-nav-link-text,
body.dark-mode .mud-drawer .sidebar-nav .mud-nav-link.active .mud-icon-root {
  color: #38BDF8 !important;
}

/* ── KPI CARD TEXT COLOR FIXES — OVERRIDE MUDBLAZOR DEFAULTS ──────────────
   MudText inside KPI cards must stay dark (#0D1B2A / #2C3E50) on white background.
   Problem: MudTheme.TextPrimary applies after render, overriding inline styles.
   Solution: Use CSS classes with !important to force correct colors
   Ratio: #0D1B2A on #FFFFFF = 19.1:1 ✅ (AAA)
   Ratio: #2C3E50 on #FFFFFF = 7.4:1 ✅ (AA)
   ───────────────────────────────────────────────────────────────────────── */

/* KPI Card value text — dark navy for maximum contrast */
.kpi-card-value,
.kpi-card-value.mud-text,
.kpi-card-value.mud-typography {
  color: #0D1B2A !important;
}

/* KPI Card label text — gray-blue for secondary hierarchy */
.kpi-card-label,
.kpi-card-label.mud-text,
.kpi-card-label.mud-typography {
  color: #2C3E50 !important;
}

/* Dark mode: brighten KPI text for readability on dark cards */
[data-theme="dark"] .kpi-card-value,
.dark-mode .kpi-card-value {
  color: #85B7EB !important;
}

[data-theme="dark"] .kpi-card-label,
.dark-mode .kpi-card-label {
  color: #B5D4F4 !important;
}

/* Parameter card text — ensure visibility on white backgrounds */
.parameter-card-label,
.parameter-card-label.mud-text,
.parameter-card-label.mud-typography {
  color: #0D1B2A !important;
  font-weight: 600 !important;
}

.parameter-card-description,
.parameter-card-description.mud-text,
.parameter-card-description.mud-typography {
  color: #2C3E50 !important;
}

/* ── PRIMARY BLUE BACKGROUND (#1E4A7A) — ENFORCE WHITE TEXT ───────────────
   All elements with background #1E4A7A MUST have white text for WCAG AA compliance.
   Ratio: #FFFFFF on #1E4A7A = 8.9:1 ✅
   ─────────────────────────────────────────────────────────────────────── */

/* AppBar — Navbar styling */
.mud-appbar {
  background-color: #1E4A7A !important;
}

.mud-appbar,
.mud-appbar .mud-typography,
.mud-appbar .mud-text,
.mud-appbar .mud-icon-root,
.mud-appbar .mud-chip {
  color: #FFFFFF !important;
}

.mud-appbar .mud-chip-label {
  color: #FFFFFF !important;
}

/* ── MUDBLAZOR BUTTONS — WHITE TEXT ON PRIMARY BLUE ──────────────────────
   All button variants with Color.Primary must have white text */

.mud-button-filled-primary {
  background-color: #1E4A7A !important;
  color: #FFFFFF !important;
}

.mud-button-filled-primary,
.mud-button-filled-primary .mud-button-label,
.mud-button-filled-primary .mud-icon-root,
.mud-button-filled-primary .mud-typography,
.mud-button-filled-primary .mud-progresscircular {
  color: #FFFFFF !important;
}

/* Buttons with explicit primary color */
.mud-button.mud-button-filled-primary,
button[class*="mud-button-filled-primary"],
.mud-button[color="primary"] {
  color: #FFFFFF !important;
}

.mud-button.mud-button-filled-primary *,
.mud-button[color="primary"] * {
  color: #FFFFFF !important;
}

/* Buttons with primary background */
button[style*="background-color: rgb(30, 74, 122)"],
button[style*="background: #1E4A7A"],
button[style*="background-color: #1E4A7A"] {
  color: #FFFFFF !important;
}

/* ── TEXT ON PRIMARY BACKGROUNDS ──────────────────────────────────────────
   All text elements with primary blue backgrounds */

[style*="background-color: #1E4A7A"],
[style*="background: #1E4A7A"],
[style="background-color: rgb(30, 74, 122)"] {
  color: #FFFFFF !important;
}

[style*="background-color: #1E4A7A"] *,
[style*="background: #1E4A7A"] *,
[style="background-color: rgb(30, 74, 122)"] * {
  color: #FFFFFF !important;
}

/* MudText and MudTypography with blue backgrounds — ONLY background, not borders */
[style*="background-color: #1E4A7A"] .mud-text,
[style*="background-color: #1E4A7A"] .mud-typography {
  color: #FFFFFF !important;
}

/* ── DRAWER & SIDEBAR STYLING ──────────────────────────────────────────── */

/* Drawer header — dark navy sidebar */
.mud-drawer-header,
.sidebar-header {
  background-color: #0D2540 !important;
  color: #FFFFFF !important;
}

.sidebar-header .mud-text,
.sidebar-header .mud-typography,
.mud-drawer-header .mud-text,
.mud-drawer-header .mud-typography {
  color: #FFFFFF !important;
}

/* ── DARK BLUE BACKGROUNDS (Variations) ─────────────────────────────────── */

/* #0D2540 (Darker Navy) - used for sidebars and dark elements */
[style*="background-color: #0D2540"],
[style*="background: #0D2540"],
[style="background-color: rgb(13, 37, 64)"],
[style*="background:linear-gradient"] /* Gradients with blue base */ {
  color: #FFFFFF !important;
}

[style*="background-color: #0D2540"] *,
[style="background-color: rgb(13, 37, 64)"] *,
[style*="background:linear-gradient"] * {
  color: #FFFFFF !important;
}

/* #2E6FB0 (Light Blue Variant) */
[style*="background-color: #2E6FB0"],
[style*="background: #2E6FB0"],
[style="background-color: rgb(46, 111, 176)"] {
  color: #FFFFFF !important;
}

[style*="background-color: #2E6FB0"] *,
[style="background-color: rgb(46, 111, 176)"] * {
  color: #FFFFFF !important;
}

/* ── MUDPAPER WITH BLUE BACKGROUNDS ─────────────────────────────────────── */

/* MudPaper with blue backgrounds — common in dashboards */
.mud-paper[style*="background:linear-gradient"] {
  color: #FFFFFF !important;
}

.mud-paper[style*="background:linear-gradient"] *,
.mud-paper[style*="background-color: #1E4A7A"] *,
.mud-paper[style*="background-color: #0D2540"] * {
  color: #FFFFFF !important;
}

/* All text in cards with blue backgrounds */
.mud-paper .mud-text,
.mud-paper .mud-typography {
    /*color: inherit !important;*/
    color: #F5921E;
}

/* Force white in blue-gradient papers */
.mud-paper[style*="background:linear-gradient"] .mud-text,
.mud-paper[style*="background:linear-gradient"] .mud-typography {
  color: #FFFFFF !important;
}

/* ── REMOVED: OVERLY BROAD FALLBACK RULES ────────────────────────────────
   DELETED: Selectors like div[style*="#1E4A7A"] matched ANY style containing
   that color string (borders, background, etc.) and forced children white.
   This broke parameter cards with colored borders.

   INSTEAD: Use specific classes (.kpi-card-value, .parameter-card-label)
   defined above, or restrict to background-color ONLY.
   ──────────────────────────────────────────────────────────────────────── */

/* ── CONTRAST RATIO REFERENCE ─────────────────────────────────────────────
   WCAG AA: 4.5:1 normal text · 3:1 large text/UI components

   Light mode                          Ratio
   #0F172A on #FFFFFF                  19.1:1  ✅
   #0F172A on #F8FAFC                  18.1:1  ✅
   #475569 on #FFFFFF                   7.4:1  ✅
   #475569 on #F1F5F9 (table header)    6.9:1  ✅
   #1E4A7A on #FFFFFF                   8.9:1  ✅
   #FFFFFF on #1E4A7A                   8.9:1  ✅ ⭐ PRIMARY BLUE
   #065F46 on #E6F4EA (success)         7.1:1  ✅
   #92400E on #FEF3C7 (warning)         5.3:1  ✅
   #991B1B on #FEE2E2 (danger)          5.9:1  ✅
   #1D4ED8 on #EFF6FF (info)            6.4:1  ✅

   Dark mode                           Ratio
   #F8FAFC on #0F172A                  18.9:1  ✅
   #F8FAFC on #1E293B                  14.6:1  ✅
   #94A3B8 on #1E293B                   5.5:1  ✅
   #38BDF8 on #0F172A                   8.7:1  ✅
   #38BDF8 on #1E293B                   6.7:1  ✅
   #0F172A on #38BDF8 (button text)     8.7:1  ✅
   #34D399 on #1E293B (success chip)    5.1:1  ✅
   #F87171 on #1E293B (danger chip)     4.7:1  ✅
   ─────────────────────────────────────────────────────────────────────── */