/* ==================================== */
/* DARK THEME - SHARED                  */
/* Theme sombre generique               */
/* ==================================== */

/* ============================================
   DARK MODE VIA ATTRIBUT data-theme
   ============================================ */

[data-theme="dark"] {
  /* Backgrounds - tons sombres neutres */
  --bg-sidebar: #1e1e1e;
  --bg-sidebar-hover: #2a2a2a;
  --bg-main: #121212;
  --bg-canvas: #1a1a1a;
  --bg-input: #252525;
  --bg-hover: #2d2d2d;

  /* Borders - subtils sur fond sombre ; medium = bordure des champs, 3,10:1
     contre --bg-input (A11Y-07) */
  --border-light: #333333;
  --border-medium: #707070;
  --border-dark: #555555;

  /* Text - contraste eleve ; muted 5,10 à 6,66:1 (A11Y-07) */
  --text-primary: #f5f5f5;
  --text-secondary: #b3b3b3;
  --text-muted: #9a9a9a;

  /* Accent - terracotta ajuste pour contraste */
  --accent-primary: #e8967a;
  --accent-primary-hover: #d97757;
  --accent-secondary: #a89888;
  --accent-success: #6dbf7b;
  --accent-success-hover: #5daf6b;
  --accent-danger: #e87676;
  --accent-danger-hover: #d86666;
  /* Texte sur fond d'accent : le blanc ne donne que 2,31:1 sur #e8967a ;
     #1a1a1a donne 7,52 (survol 5,57, success 7,78, danger 6,04), A11Y-07 */
  --text-on-accent: #1a1a1a;

  /* Anatomical */
  --anatomy-surface: rgba(180, 150, 130, 0.15);
  --anatomy-handle: #c4a88a;
  --anatomy-handle-hover: #b49878;

  /* Cartes de section (fieldsets sidebar : Favoris, Récent, …) —
     élévation subtile au lieu du voile blanc 50 % du thème clair */
  --section-card-bg: rgba(255, 255, 255, 0.04);

  /* Couleur de fond specifique */
  color-scheme: dark;
}

/* ============================================
   DARK MODE VIA PREFERENCE SYSTEME
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Backgrounds */
    --bg-sidebar: #1e1e1e;
    --bg-sidebar-hover: #2a2a2a;
    --bg-main: #121212;
    --bg-canvas: #1a1a1a;
    --bg-input: #252525;
    --bg-hover: #2d2d2d;

    /* Borders (A11Y-07) */
    --border-light: #333333;
    --border-medium: #707070;
    --border-dark: #555555;

    /* Text (A11Y-07) */
    --text-primary: #f5f5f5;
    --text-secondary: #b3b3b3;
    --text-muted: #9a9a9a;

    /* Accent */
    --accent-primary: #e8967a;
    --accent-primary-hover: #d97757;
    --accent-secondary: #a89888;
    --accent-success: #6dbf7b;
    --accent-success-hover: #5daf6b;
    --accent-danger: #e87676;
    --accent-danger-hover: #d86666;
    --text-on-accent: #1a1a1a;

    /* Anatomical */
    --anatomy-surface: rgba(180, 150, 130, 0.15);
    --anatomy-handle: #c4a88a;
    --anatomy-handle-hover: #b49878;

    /* Cartes de section (fieldsets sidebar : Favoris, Récent, …) */
    --section-card-bg: rgba(255, 255, 255, 0.04);

    color-scheme: dark;
  }
}

/* ============================================
   COMPOSANTS GENERIQUES DARK MODE
   ============================================ */

/* Modals et overlays */
[data-theme="dark"] .modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal-container {
  background: var(--bg-canvas);
  border-color: var(--border-medium);
}

/* Tables */
[data-theme="dark"] .chrono-table th {
  background: var(--bg-sidebar);
  color: var(--text-secondary);
}

[data-theme="dark"] .chrono-table tr:hover {
  background: var(--bg-hover);
}

[data-theme="dark"] .table-responsive {
  background: var(--bg-canvas);
  border-color: var(--border-medium);
}

/* Dropdown */
[data-theme="dark"] .dropdown-menu {
  background: var(--bg-canvas);
  border-color: var(--border-medium);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Form sections */
[data-theme="dark"] .form-section {
  background: var(--bg-sidebar);
  border-color: var(--border-light);
}

/* Barre d'onglets d'étape en sombre : voir Partogramme/css/dark-theme.css, seule app
   qui charge cette feuille et les onglets ; son css/main.css repose le voile crème
   du thème clair, qu'une règle posée ici ne surchargerait pas (A11Y-07) */

/* ============================================
   TOGGLE DARK MODE - BOUTON UI
   ============================================ */

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--border-radius-md);
  background: var(--bg-sidebar);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  font-size: 18px;
}

.theme-toggle:hover {
  background: var(--bg-sidebar-hover);
  border-color: var(--accent-primary);
}

.theme-toggle-icon {
  transition: transform 0.3s ease;
}

/* Icone selon le theme */
[data-theme="dark"] .theme-toggle-icon::before {
  content: '\2600'; /* Soleil */
}

.theme-toggle-icon::before {
  content: '\263D'; /* Lune */
}

/* ============================================
   TRANSITIONS DOUCES THEME
   ============================================ */

body,
.modal-container,
.form-section,
.chrono-table,
.dropdown-menu {
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
}