/* ==================================== */
/* 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 */
  --border-light: #333333;
  --border-medium: #444444;
  --border-dark: #555555;

  /* Text - contraste eleve */
  --text-primary: #f5f5f5;
  --text-secondary: #b3b3b3;
  --text-muted: #808080;

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

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

  /* 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 */
    --border-light: #333333;
    --border-medium: #444444;
    --border-dark: #555555;

    /* Text */
    --text-primary: #f5f5f5;
    --text-secondary: #b3b3b3;
    --text-muted: #808080;

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

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

    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);
}

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