/* ══════════════════════════════════════════════════════════════════════
   AnalyTekEducatif — Design System v5  (UI/UX Layout Revision)
   Light & Dark mode — Ayitek brand palette — WCAG AA
   ══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Ayitek Brand ───────────────────────────────── */
  --ayitek-blue          : #1E4A7A;
  --ayitek-blue-light    : #2E6FB0;
  --ayitek-blue-lightest : #E6F1FB;
  --ayitek-blue-mid      : #0D2B50;
  --ayitek-dark          : #0D2540;
  --ayitek-orange        : #F5921E;

  /* ── LIGHT MODE surfaces ────────────────────────── */
  --light-bg-page        : #F0F4F9;
  --light-bg-card        : #FFFFFF;
  --light-bg-alt         : #E6F1FB;
  --light-bg-input       : #FFFFFF;
  --light-bg-sidebar     : #0D2540;
  --light-bg-navbar      : #1E4A7A;

  --light-text-primary   : #2C3E58;
  --light-text-secondary : #6B7FA0;
  --light-text-on-dark   : #EDF2F7;
  --light-text-muted-dark: #8BA4C0;

  --light-border         : #CBD5E1;
  --light-border-focus   : #2E6FB0;
  --light-shadow         : rgba(30, 74, 122, 0.08);

  /* ── DARK MODE surfaces ─────────────────────────── */
  --dark-bg-page         : #0F1C2E;
  --dark-bg-card         : #172234;
  --dark-bg-alt          : #1A293D;
  --dark-bg-input        : #1A293D;
  --dark-bg-sidebar      : #0A1628;
  --dark-bg-navbar       : #0D2540;

  --dark-text-primary    : #EDF2F7;
  --dark-text-secondary  : #8BA4C0;
  --dark-text-on-accent  : #EDF2F7;

  --dark-border          : rgba(203, 213, 225, 0.12);
  --dark-border-focus    : #2E6FB0;
  --dark-shadow          : rgba(0, 0, 0, 0.25);

  /* ── Semantic ──────────────────────────────────── */
  --success              : #1A6B3C;
  --success-bg-light     : #E8F5EE;
  --success-bg-dark      : #0F2E1C;

  --warning              : #B85C00;
  --warning-bg-light     : #FEF3E2;
  --warning-bg-dark      : #2D1A00;

  --danger               : #8B1A1A;
  --danger-bg-light      : #F9EAEA;
  --danger-bg-dark       : #2D0A0A;

  --info                 : #1E4A7A;
  --info-bg-light        : #E6F1FB;
  --info-bg-dark         : #0D2540;

  /* ── Aliases (light mode defaults) ─────────────── */
  --color-page-bg        : var(--light-bg-page);
  --color-card-bg        : var(--light-bg-card);
  --color-surface-alt    : var(--light-bg-alt);
  --color-input-bg       : var(--light-bg-input);
  --color-border         : var(--light-border);
  --color-text           : var(--light-text-primary);
  --color-muted          : var(--light-text-secondary);
  --color-primary        : var(--ayitek-blue);
  --color-accent         : var(--ayitek-blue-light);
  --color-dark-bg        : var(--ayitek-dark);
  --color-cta            : var(--ayitek-orange);
  --color-shadow         : var(--light-shadow);

  /* ── Backwards compat ───────────────────────────── */
  --success-bg           : var(--success-bg-light);
  --warning-bg           : var(--warning-bg-light);
  --danger-bg            : var(--danger-bg-light);

  /* Nav */
  --radius-nav           : 8px;
  --text-nav             : rgba(237, 242, 247, 0.78);
  --text-nav-hover       : #EDF2F7;
  --text-nav-active      : #EDF2F7;
  --accent-dim           : rgba(237, 242, 247, 0.10);
}

/* ── Dark mode token overrides ──────────────────────── */
[data-theme="dark"],
.dark-mode,
.mud-theme-dark {
  --color-page-bg    : var(--dark-bg-page);
  --color-card-bg    : var(--dark-bg-card);
  --color-surface-alt: var(--dark-bg-alt);
  --color-input-bg   : var(--dark-bg-input);
  --color-border     : var(--dark-border);
  --color-text       : var(--dark-text-primary);
  --color-muted      : var(--dark-text-secondary);
  --color-shadow     : var(--dark-shadow);
  --success-bg       : var(--success-bg-dark);
  --warning-bg       : var(--warning-bg-dark);
  --danger-bg        : var(--danger-bg-dark);
  --accent-dim       : rgba(245, 146, 30, 0.12);
}

/* ── Base ────────────────────────────────────────────── */
html, body {
  overflow-x    : hidden;
  max-width     : 100vw;
  margin        : 0;
  padding       : 0;
  font-family   : 'Inter', 'Segoe UI', Arial, sans-serif;
  background    : var(--color-page-bg);
  color         : var(--color-text);
  font-size     : 14px;
  line-height   : 1.6;
  letter-spacing: 0.01em;
}

.main-content,
.mud-main-content,
[class*="content-wrapper"],
[class*="page-wrapper"],
[class*="layout-wrapper"] {
  min-width  : 0;
  overflow-x : hidden;
  max-width  : 100%;
  box-sizing : border-box;
}

/* ── Sidebar width enforcement ──────────────────────── */
.mud-drawer,
.mud-drawer-open {
  flex-shrink : 0;
  overflow-x  : hidden;
  width       : 220px !important;
  min-width   : 220px !important;
  max-width   : 220px !important;
}

.mud-table-container {
  overflow-x : auto;
  max-width  : 100%;
}

/* ── Typography ─────────────────────────────────────── */
h1 { color: var(--ayitek-blue);          font-weight: 600; font-size: 22px; line-height: 1.3; }
h2 { color: var(--light-text-primary);   font-weight: 600; font-size: 18px; line-height: 1.3; }
h3 { color: var(--light-text-primary);   font-weight: 500; font-size: 15px; line-height: 1.3; }

.mud-theme-dark h1 { color: var(--dark-text-primary); }
.mud-theme-dark h2 { color: var(--dark-text-primary); }
.mud-theme-dark h3 { color: #CBD5E1; }

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar             { width: 5px; height: 5px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: rgba(46, 111, 176, 0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ayitek-blue-light); }

/* ═══════════════════════════════════════════════════════════════════════
   SIDEBAR — always dark navy in both modes
   ══════════════════════════════════════════════════════════════════════ */

.sidebar-header {
  padding    : 16px 16px 8px !important;
  min-height : unset !important;
}

.sidebar-divider {
  border-color: rgba(237, 242, 247, 0.08) !important;
}

.mud-nav-link {
  color         : var(--text-nav) !important;
  font-size     : 0.875rem;
  font-weight   : 400;
  border-radius : var(--radius-nav) !important;
  margin        : 1px 10px !important;
  padding       : 8px 12px !important;
  transition    : background 0.15s ease, color 0.15s ease;
  border-left   : none !important;
  position      : relative;
}

.mud-nav-link .mud-icon-root {
  color      : rgba(237, 242, 247, 0.45) !important;
  font-size  : 1.2rem !important;
  transition : color 0.15s ease;
}

.mud-nav-link:hover {
  background : rgba(237, 242, 247, 0.06) !important;
  color      : var(--text-nav-hover) !important;
}

.mud-nav-link:hover .mud-icon-root {
  color : rgba(237, 242, 247, 0.75) !important;
}

.mud-nav-link.active,
.mud-nav-link[class*=" active"] {
  background  : rgba(237, 242, 247, 0.10) !important;
  color       : var(--text-nav-active) !important;
  font-weight : 500;
}

.mud-nav-link.active .mud-icon-root,
.mud-nav-link[class*=" active"] .mud-icon-root {
  color : var(--text-nav-active) !important;
}

.mud-nav-link.active::before {
  content       : '';
  position      : absolute;
  left          : 0;
  top           : 20%;
  height        : 60%;
  width         : 3px;
  background    : var(--ayitek-orange);
  border-radius : 0 3px 3px 0;
}

.mud-nav-group .mud-nav-group-toggle,
.mud-drawer .mud-nav-group-toggle {
  color             : var(--text-nav) !important;
  background-color  : transparent !important;
  font-size         : 0.875rem;
  border-radius     : var(--radius-nav) !important;
  margin            : 1px 10px !important;
  padding           : 9px 12px !important;
  transition        : background 0.15s, color 0.15s;
  position          : relative;
}

.mud-nav-group .mud-nav-group-toggle:hover,
.mud-drawer .mud-nav-group-toggle:hover {
  background-color : rgba(237, 242, 247, 0.06) !important;
  color            : var(--text-nav-hover) !important;
}

.mud-nav-group .mud-nav-group-toggle .mud-icon-root,
.mud-drawer .mud-nav-group-toggle .mud-icon-root {
  color : rgba(237, 242, 247, 0.45) !important;
}

.mud-drawer .mud-nav-group.mud-nav-group-expanded .mud-nav-group-toggle,
.mud-drawer .mud-nav-group .mud-nav-group-toggle.active,
.mud-drawer .mud-nav-group .mud-nav-group-toggle[aria-expanded="true"] {
    background-color: rgba(237, 242, 247, 0.10) !important;
    color: var(--text-nav-active) !important;
    font-weight: 500;
}

.mud-drawer .mud-nav-group.mud-nav-group-expanded .mud-nav-group-toggle .mud-icon-root,
.mud-drawer .mud-nav-group .mud-nav-group-toggle.active .mud-icon-root,
.mud-drawer .mud-nav-group .mud-nav-group-toggle[aria-expanded="true"] .mud-icon-root {
  color : var(--text-nav-active) !important;
}

.mud-nav-group .mud-nav-link {
  margin-left  : 14px !important;
  margin-right : 10px !important;
  font-size    : 0.84rem;
  max-width    : calc(100% - 24px);
  overflow     : hidden;
}

.nav-admin { color : rgba(245, 146, 30, 0.90) !important; }
.nav-admin .mud-icon-root { color : rgba(245, 146, 30, 0.70) !important; }
.nav-admin:hover { background : rgba(245, 146, 30, 0.10) !important; color : var(--ayitek-orange) !important; }
.nav-admin:hover .mud-icon-root { color : var(--ayitek-orange) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   CARDS & SURFACES
   ══════════════════════════════════════════════════════════════════════ */

.mud-card,
.mud-paper {
  transition    : transform 0.15s ease, box-shadow 0.18s ease;
  border-radius : 10px !important;
}

.mud-card {
  border     : 1px solid var(--light-border) !important;
  box-shadow : 0 1px 4px var(--light-shadow) !important;
}

.mud-card:hover {
  transform  : translateY(-1px);
  box-shadow : 0 4px 16px rgba(30, 74, 122, 0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════ */

.mud-table-head .mud-table-cell {
  background-color : var(--ayitek-blue) !important;
  color            : #EDF2F7 !important;
  font-weight      : 700;
  font-size        : 0.78rem;
  letter-spacing   : 0.04em;
  text-transform   : uppercase;
  border-bottom    : 2px solid var(--ayitek-blue-light) !important;
  padding          : 10px 14px !important;
}

.mud-table-body .mud-table-row td {
  color        : var(--light-text-primary) !important;
  border-color : var(--light-border) !important;
  padding      : 10px 14px !important;
}

.mud-table-body .mud-table-row:nth-child(odd) td  { background-color: var(--light-bg-card) !important; }
.mud-table-body .mud-table-row:nth-child(even) td { background-color: var(--light-bg-page) !important; }

.mud-table-row:hover td {
  background : var(--ayitek-blue-lightest) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

.mud-button-filled-primary {
  background-color : var(--ayitek-blue) !important;
  color            : #EDF2F7 !important;
  border-radius    : 6px !important;
}

.mud-button-filled-primary:hover {
  background-color : var(--ayitek-blue-light) !important;
}

.mud-button-filled-secondary {
  background-color : var(--ayitek-orange) !important;
  color            : #EDF2F7 !important;
  border-radius    : 6px !important;
}

.mud-button-filled-secondary:hover {
  background-color : #B85C00 !important;
}

.mud-button-outlined-primary {
  border-color     : var(--light-border) !important;
  color            : var(--light-text-primary) !important;
  background-color : var(--light-bg-page) !important;
  border-radius    : 6px !important;
}

.mud-button-outlined-primary:hover {
  background-color : var(--ayitek-blue-lightest) !important;
  color            : var(--ayitek-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   INPUTS & FORMS
   ══════════════════════════════════════════════════════════════════════ */

.mud-input-outlined .mud-input-root {
  background-color : var(--light-bg-input);
  border-radius    : 6px;
}

.mud-input-outlined .mud-input-outlined-border {
  border-color : var(--light-border) !important;
}

.mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color : var(--light-border-focus) !important;
  box-shadow   : 0 0 0 3px rgba(46, 111, 176, 0.15);
}

.mud-input-label-outlined.mud-focused {
  color : var(--light-border-focus) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   BADGE / STATUS TAGS
   ══════════════════════════════════════════════════════════════════════ */

.tag-success, .tag-avec-photo {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--success-bg-light);
  color            : var(--success);
  border           : 1px solid var(--success);
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-warning {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--warning-bg-light);
  color            : var(--warning);
  border           : 1px solid var(--warning);
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-danger, .tag-sans-photo {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--danger-bg-light);
  color            : var(--danger);
  border           : 1px solid var(--danger);
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-info {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--info-bg-light);
  color            : var(--info);
  border           : 1px solid var(--light-border);
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

.tag-neutral {
  display          : inline-flex;
  align-items      : center;
  gap              : 4px;
  background-color : var(--light-bg-page);
  color            : var(--light-text-secondary);
  border           : 1px solid var(--light-border);
  font-size        : 0.72rem;
  font-weight      : 600;
  padding          : 2px 8px;
  border-radius    : 999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — MudBlazor overrides
   ══════════════════════════════════════════════════════════════════════ */

.mud-theme-dark body,
body.mud-theme-dark {
  background-color : var(--dark-bg-page);
}

.mud-theme-dark .mud-paper,
.mud-theme-dark .mud-card {
  background-color : var(--dark-bg-card) !important;
  border-color     : var(--dark-border) !important;
  box-shadow       : 0 1px 6px var(--dark-shadow) !important;
}

.mud-theme-dark .mud-popover-paper,
.mud-theme-dark .mud-dialog .mud-dialog-content,
.mud-theme-dark .mud-menu-list {
  background-color : var(--dark-bg-card) !important;
}

.mud-theme-dark .mud-table-head .mud-table-cell {
  background-color : var(--dark-bg-navbar) !important;
  color            : #EDF2F7 !important;
  border-bottom    : 2px solid rgba(46, 111, 176, 0.5) !important;
}

.mud-theme-dark .mud-table-body .mud-table-row:nth-child(odd) td {
  background-color : var(--dark-bg-card) !important;
  color            : #CBD5E1 !important;
}

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

.mud-theme-dark .mud-table-body .mud-table-row td {
  border-color : rgba(203, 213, 225, 0.08) !important;
}

.mud-theme-dark .mud-table-row:hover td {
  background : rgba(46, 111, 176, 0.10) !important;
}

.mud-theme-dark .mud-input-outlined .mud-input-root,
.mud-theme-dark .mud-input-outlined {
  background-color : var(--dark-bg-input) !important;
  border-radius    : 6px;
}

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

.mud-theme-dark .mud-input-root,
.mud-theme-dark .mud-input-base-input {
  color            : var(--dark-text-primary) !important;
  background-color : transparent !important;
}

.mud-theme-dark .mud-input-base-input::placeholder {
  color : var(--dark-text-secondary) !important;
}

.mud-theme-dark .mud-input-outlined:focus-within .mud-input-outlined-border {
  border-color : var(--dark-border-focus) !important;
  box-shadow   : 0 0 0 3px rgba(46, 111, 176, 0.20);
}

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

.mud-theme-dark .mud-input-label-outlined.mud-focused {
  color : var(--ayitek-orange) !important;
}

.mud-theme-dark .mud-select-input .mud-input-root,
.mud-theme-dark .mud-autocomplete .mud-input-root {
  background-color : var(--dark-bg-input) !important;
}

.mud-theme-dark .mud-button-filled-primary {
  background-color : var(--ayitek-blue-light) !important;
  color            : #EDF2F7 !important;
}

.mud-theme-dark .mud-button-filled-primary:hover {
  background-color : var(--ayitek-blue) !important;
}

.mud-theme-dark .mud-button-outlined-primary {
  border-color : var(--dark-border) !important;
  color        : #CBD5E1 !important;
  background   : var(--dark-bg-alt) !important;
}

.mud-theme-dark .mud-button-outlined-primary:hover {
  background : var(--dark-bg-card) !important;
  color      : #85B7EB !important;
}

.mud-theme-dark .mud-button-outlined-secondary {
  border-color : var(--ayitek-orange) !important;
  color        : var(--ayitek-orange) !important;
}

.mud-theme-dark .tag-success, .mud-theme-dark .tag-avec-photo {
  background-color : var(--success-bg-dark);
  color            : #4ACA84;
  border-color     : var(--success);
}

.mud-theme-dark .tag-warning {
  background-color : var(--warning-bg-dark);
  color            : #F5A957;
  border-color     : var(--warning);
}

.mud-theme-dark .tag-danger, .mud-theme-dark .tag-sans-photo {
  background-color : var(--danger-bg-dark);
  color            : #F08080;
  border-color     : var(--danger);
}

.mud-theme-dark .tag-info {
  background-color : var(--info-bg-dark);
  color            : #85B7EB;
  border-color     : rgba(133, 183, 235, 0.3);
}

.mud-theme-dark .tag-neutral {
  background-color : var(--dark-bg-alt);
  color            : var(--dark-text-secondary);
  border-color     : var(--dark-border);
}

.mud-theme-dark .mud-alert-message { color : inherit !important; }

.mud-theme-dark ::-webkit-scrollbar-thumb { background : rgba(46, 111, 176, 0.4); }

/* ═══════════════════════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ══════════════════════════════════════════════════════════════════════ */

#blazor-error-ui {
  background : var(--danger-bg-light);
  color      : var(--danger);
  bottom     : 0;
  box-shadow : 0 -2px 8px rgba(44, 62, 88, 0.15);
  display    : none;
  left       : 0;
  padding    : 0.6rem 1.25rem 0.7rem;
  position   : fixed;
  width      : 100%;
  z-index    : 1000;
  font-size  : 0.85rem;
}

#blazor-error-ui a {
  color           : var(--danger);
  font-weight     : 600;
  text-decoration : underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   FORM INPUTS — CRITICAL READABILITY FIX
   Prevents dark backgrounds from bleeding into inputs and modal forms
   ══════════════════════════════════════════════════════════════════════ */

/* ── All MudBlazor input surfaces — explicit white in light mode ───── */
.mud-input-root,
.mud-input-outlined .mud-input-root,
.mud-input-filled .mud-input-root,
.mud-input-underline .mud-input-root,
.mud-input-base-input,
.mud-input-outlined-inner input,
.mud-input-outlined-inner textarea,
.mud-select .mud-input-root,
.mud-autocomplete .mud-input-root {
  background-color : var(--color-input-bg) !important;
  color            : var(--color-text) !important;
}

.mud-input-base-input::placeholder,
.mud-input-base-input input::placeholder {
  color   : var(--color-muted) !important;
  opacity : 1 !important;
}

/* ── Labels ─────────────────────────────────────── */
.mud-input-label,
.mud-input-label-outlined,
.mud-input-helper-text {
  color       : var(--color-muted) !important;
  font-size   : 12px !important;
  font-weight : 500 !important;
}

.mud-input-label.mud-focused,
.mud-input-label-outlined.mud-focused {
  color : var(--light-border-focus) !important;
}

/* ── Input: readonly ────────────────────────────── */
input:read-only,
input[readonly] {
  background-color : var(--light-bg-page) !important;
  color            : var(--light-text-secondary) !important;
  cursor           : default !important;
}

/* ── Form spacing ───────────────────────────────── */
.mud-input-control {
  margin-bottom : 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DIALOG / MODAL — always light in light mode
   ══════════════════════════════════════════════════════════════════════ */

.mud-dialog-surface {
  background-color : var(--light-bg-card) !important;
  color            : var(--light-text-primary) !important;
  border-radius    : 12px !important;
  box-shadow       : 0 8px 24px rgba(13, 37, 64, 0.12) !important;
}

.mud-dialog-content {
  background-color : var(--light-bg-card) !important;
  color            : var(--light-text-primary) !important;
  padding          : 20px 24px !important;
}

.mud-dialog-title {
  color       : var(--ayitek-blue) !important;
  font-weight : 600 !important;
  font-size   : 18px !important;
}

.mud-dialog-actions {
  background-color : var(--light-bg-card) !important;
  padding          : 12px 20px 16px !important;
  gap              : 8px !important;
  margin-top       : 24px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOGGLE SWITCH — replace green with Ayitek Blue
   ══════════════════════════════════════════════════════════════════════ */

/* Track OFF state */
.mud-switch-track {
  background-color : var(--light-border) !important;
  border           : none !important;
}

/* Track ON state — all color variants → Ayitek Blue */
.mud-checked .mud-switch-track,
.mud-switch-checked .mud-switch-track,
.mud-switch .mud-checked .mud-switch-track,
.mud-input-slot .mud-checked .mud-switch-track,
.mud-switch-color-primary .mud-checked .mud-switch-track,
.mud-switch-color-success .mud-checked .mud-switch-track,
.mud-switch-color-secondary .mud-checked .mud-switch-track,
.mud-switch-color-info .mud-checked .mud-switch-track {
  background-color : var(--ayitek-blue) !important;
}

.mud-switch-label,
.mud-form-label {
  color      : var(--light-text-primary) !important;
  font-size  : 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   FORM BUTTONS — inside modals/panels
   ══════════════════════════════════════════════════════════════════════ */

/* "Enregistrer" / primary save button */
.mud-dialog-actions .mud-button-filled-primary,
.panel-actions .mud-button-filled-primary {
  background-color : var(--ayitek-blue) !important;
  color            : #EDF2F7 !important;
  border-radius    : 6px !important;
  padding          : 8px 20px !important;
  font-weight      : 500 !important;
}

.mud-dialog-actions .mud-button-filled-primary:hover,
.panel-actions .mud-button-filled-primary:hover {
  background-color : var(--ayitek-blue-light) !important;
}

/* "Annuler" / secondary cancel button */
.mud-dialog-actions .mud-button-outlined,
.mud-dialog-actions .mud-button-text,
.panel-actions .mud-button-outlined,
.panel-actions .mud-button-text {
  background-color : var(--light-bg-page) !important;
  color            : var(--light-text-primary) !important;
  border-color     : var(--light-border) !important;
  border-radius    : 6px !important;
}

.mud-dialog-actions .mud-button-outlined:hover,
.mud-dialog-actions .mud-button-text:hover {
  background-color : var(--ayitek-blue-lightest) !important;
  color            : var(--ayitek-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — Form / Dialog / Toggle overrides
   ══════════════════════════════════════════════════════════════════════ */

.mud-theme-dark .mud-dialog-surface {
  background-color : var(--dark-bg-card) !important;
  color            : var(--dark-text-primary) !important;
  box-shadow       : 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.mud-theme-dark .mud-dialog-content {
  background-color : var(--dark-bg-card) !important;
  color            : var(--dark-text-primary) !important;
}

.mud-theme-dark .mud-dialog-title {
  color : var(--dark-text-primary) !important;
}

.mud-theme-dark .mud-dialog-actions {
  background-color : var(--dark-bg-card) !important;
}

/* Dark inputs — override the universal rule above */
.mud-theme-dark .mud-input-root,
.mud-theme-dark .mud-input-outlined .mud-input-root,
.mud-theme-dark .mud-input-base-input,
.mud-theme-dark .mud-input-outlined-inner input,
.mud-theme-dark .mud-input-outlined-inner textarea,
.mud-theme-dark .mud-select .mud-input-root,
.mud-theme-dark .mud-autocomplete .mud-input-root {
  background-color : var(--dark-bg-input) !important;
  color            : var(--dark-text-primary) !important;
}

.mud-theme-dark .mud-input-base-input::placeholder {
  color : var(--dark-text-secondary) !important;
}

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

.mud-theme-dark .mud-input-label.mud-focused,
.mud-theme-dark .mud-input-label-outlined.mud-focused {
  color : var(--ayitek-orange) !important;
}

/* Dark toggle switch */
.mud-theme-dark .mud-switch-track {
  background-color : var(--dark-bg-alt) !important;
  border           : 1px solid var(--dark-border) !important;
}

.mud-theme-dark .mud-checked .mud-switch-track,
.mud-theme-dark .mud-switch-checked .mud-switch-track,
.mud-theme-dark .mud-switch-color-primary .mud-checked .mud-switch-track,
.mud-theme-dark .mud-switch-color-success .mud-checked .mud-switch-track,
.mud-theme-dark .mud-switch-color-secondary .mud-checked .mud-switch-track {
  background-color : var(--ayitek-blue-light) !important;
}

.mud-theme-dark .mud-switch-label,
.mud-theme-dark .mud-form-label {
  color : var(--dark-text-primary) !important;
}

/* Dark readonly inputs */
.mud-theme-dark input:read-only,
.mud-theme-dark input[readonly] {
  background-color : var(--dark-bg-page) !important;
  color            : var(--dark-text-secondary) !important;
}

/* Dark cancel button */
.mud-theme-dark .mud-dialog-actions .mud-button-outlined,
.mud-theme-dark .mud-dialog-actions .mud-button-text {
  background-color : var(--dark-bg-alt) !important;
  color            : #CBD5E1 !important;
  border-color     : var(--dark-border) !important;
}

.mud-theme-dark .mud-dialog-actions .mud-button-outlined:hover,
.mud-theme-dark .mud-dialog-actions .mud-button-text:hover {
  background-color : var(--dark-bg-card) !important;
  color            : #85B7EB !important;
}