/* ════════════════════════════════════════════════════════
   Reddit Theme — UMH-P Formation
   Déclenché par  html[data-theme="dark"]  ou  "light"
   Chargé APRÈS les styles propres à chaque page.
════════════════════════════════════════════════════════ */

/* ── Variables Dark  (Reddit New Dark) ── */
:root[data-theme="dark"] {
  --bg:       #1A1A1B;
  --surf:     #272729;
  --surf2:    #1A1A1B;
  --surf3:    #272729;
  --border:   #474748;
  --border2:  #343536;
  --text:     #D7DADC;
  --muted:    #818384;
  --blue:     #0079D3;
  --blue-l:   #92C9F9;
  --green:    #46D160;
  --red:      #FF585B;
  --orange:   #FF4500;
  --orange-l: #C93B00;
  --purple:   #a078ff;
  --amber:    #f59e0b;
  /* alias utilisés dans admin-formation */
  --bdr:      #474748;
  --bluh:     #005EA3;
  --blul:     #92C9F9;
}

/* ── Variables Light  (Reddit) ── */
:root[data-theme="light"] {
  --bg:       #DAE0E6;
  --surf:     #FFFFFF;
  --surf2:    #F6F7F8;
  --surf3:    #FFFFFF;
  --border:   #EDEFF1;
  --border2:  #CDD3D8;
  --text:     #1C1C1C;
  --muted:    #878A8C;
  --blue:     #0079D3;
  --blue-l:   #005EA3;
  --green:    #0ACF83;
  --red:      #FF4500;
  --orange:   #FF4500;
  --orange-l: #C93B00;
  --purple:   #7759D1;
  --amber:    #C47902;
  --bdr:      #CDD3D8;
  --bluh:     #005EA3;
  --blul:     #005EA3;
}

/* ════════════════════════════════════════════════════════
   Typographie
════════════════════════════════════════════════════════ */
html[data-theme] body {
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
}

/* ════════════════════════════════════════════════════════
   Boutons — pilule Reddit
════════════════════════════════════════════════════════ */
html[data-theme] .btn-tool,
html[data-theme] .ctrl-hbtn,
html[data-theme] .ctrl-back,
html[data-theme] .hbtn,
html[data-theme] .btn-new,
html[data-theme] .btn-ok,
html[data-theme] .btn-no,
html[data-theme] .modal-cancel,
html[data-theme] .modal-confirm,
html[data-theme] .mission-generate,
html[data-theme] .mcard-open,
html[data-theme] .mcard-del,
html[data-theme] [data-theme-toggle] {
  border-radius: 20px;
}

/* Onglets et petits boutons utilitaires : arrondi doux */
html[data-theme] .j-tab,
html[data-theme] .cas-tab,
html[data-theme] .draw-sz,
html[data-theme] .draw-act,
html[data-theme] .draw-swatch,
html[data-theme] .ib,
html[data-theme] .hdr-radio-btn,
html[data-theme] .radio-btn {
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════
   Inputs et panels — arrondi 4px
════════════════════════════════════════════════════════ */
html[data-theme] input[type="text"],
html[data-theme] input[type="date"],
html[data-theme] input[type="time"],
html[data-theme] input[type="datetime-local"],
html[data-theme] input[type="number"],
html[data-theme] input[type="search"],
html[data-theme] textarea,
html[data-theme] select,
html[data-theme] .sec-time,
html[data-theme] .phrase-card,
html[data-theme] .stat-card,
html[data-theme] #radioWrap,
html[data-theme] .tirage-modal,
html[data-theme] .modal-box,
html[data-theme] .mission-box,
html[data-theme] .sec-card,
html[data-theme] .mcard,
html[data-theme] .bloc,
html[data-theme] .li,
html[data-theme] .inline-form,
html[data-theme] .spill {
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════
   Orange Reddit comme couleur primaire
════════════════════════════════════════════════════════ */

/* Boutons d'action principaux */
html[data-theme] .btn-tool.blue,
html[data-theme] .btn-new,
html[data-theme] .btn-ok,
html[data-theme] .modal-confirm,
html[data-theme] .mission-generate,
html[data-theme] .mcard-open {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}
html[data-theme] .btn-tool.blue:hover,
html[data-theme] .btn-new:hover,
html[data-theme] .btn-ok:hover,
html[data-theme] .modal-confirm:hover,
html[data-theme] .mission-generate:hover,
html[data-theme] .mcard-open:hover {
  background: var(--orange-l) !important;
  border-color: var(--orange-l) !important;
  opacity: 1 !important;
}

/* Onglet actif */
html[data-theme] .j-tab.active {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
}

/* Bouton actif dans le header (plein écran, aperçu…) */
html[data-theme] .ctrl-hbtn.active {
  color: var(--orange) !important;
  border-color: var(--orange) !important;
  background: rgba(255, 69, 0, 0.08) !important;
}

/* Inputs focus */
html[data-theme] input:focus,
html[data-theme] textarea:focus,
html[data-theme] select:focus,
html[data-theme] .sec-time:focus,
html[data-theme] #phraseInput:focus {
  border-color: var(--orange) !important;
  outline: none;
}

/* Cas-tab actif */
html[data-theme] .cas-tab.active {
  background: rgba(255,69,0,.1) !important;
  border-color: rgba(255,69,0,.4) !important;
  color: var(--orange) !important;
}

/* Puce radio-item active */
html[data-theme] .radio-item.active,
html[data-theme] .radio-item.active .radio-dot {
  color: var(--orange) !important;
  background-color: var(--orange) !important;
}
html[data-theme] .radio-item.active { background-color: transparent !important; }

/* Dot radio-now dans header (controle.html) */
html[data-theme] .hdr-radio-now.on {
  color: var(--orange) !important;
}

/* Lien active sidebar */
html[data-theme] .li.active {
  background: rgba(255,69,0,.08) !important;
  border-color: rgba(255,69,0,.25) !important;
}

/* Séparateur resize */
html[data-theme] .h-resizer:hover,
html[data-theme] .h-resizer.dragging,
html[data-theme] .v-resizer:hover,
html[data-theme] .v-resizer.dragging {
  background: var(--orange) !important;
}

/* Sliders */
html[data-theme] .radio-slider,
html[data-theme] .hdr-radio-vol,
html[data-theme] .disp-slider {
  background: linear-gradient(to right, var(--orange) var(--v, 60%), var(--border2) var(--v, 60%)) !important;
}
html[data-theme] .radio-slider::-webkit-slider-thumb,
html[data-theme] .hdr-radio-vol::-webkit-slider-thumb,
html[data-theme] .disp-slider::-webkit-slider-thumb {
  background: #FF6534 !important;
}
html[data-theme] .radio-slider::-moz-range-thumb,
html[data-theme] .hdr-radio-vol::-moz-range-thumb,
html[data-theme] .disp-slider::-moz-range-thumb {
  background: #FF6534 !important;
  border: none;
}

/* ════════════════════════════════════════════════════════
   Light mode — spécifiques
════════════════════════════════════════════════════════ */
html[data-theme="light"] header,
html[data-theme="light"] .ctrl-header {
  background: #FFFFFF;
  border-bottom-color: #EDEFF1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}

html[data-theme="light"] .phrase-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] #radioWrap,
html[data-theme="light"] .sec-card,
html[data-theme="light"] .mcard,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .mission-box {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
}

/* Boutons ghost plus visibles sur fond clair */
html[data-theme="light"] .btn-tool.ghost {
  border-color: #CDD3D8 !important;
  background: #FFFFFF;
  color: #1C1C1C;
}
html[data-theme="light"] .btn-tool.ghost:hover {
  background: #F6F7F8 !important;
  border-color: #A0A5A9 !important;
  color: #1C1C1C !important;
}

/* Buttons header sur fond blanc */
html[data-theme="light"] .ctrl-hbtn,
html[data-theme="light"] .ctrl-back,
html[data-theme="light"] .hbtn {
  color: #1C1C1C;
  border-color: #CDD3D8;
}
html[data-theme="light"] .ctrl-hbtn:hover,
html[data-theme="light"] .ctrl-back:hover,
html[data-theme="light"] .hbtn:hover {
  background: #F6F7F8;
  border-color: #A0A5A9;
  color: #1C1C1C;
}

/* Tabs journées + barre formation active */
html[data-theme="light"] .j-tabs-card,
html[data-theme="light"] .j-frame-card {
  background: #F6F7F8;
}
html[data-theme="light"] .j-tab {
  color: #878A8C;
}
html[data-theme="light"] .j-tab:hover {
  background: #EDEFF1;
  color: #1C1C1C;
}
html[data-theme="light"] .form-bar-name {
  color: #1C1C1C;
}
html[data-theme="light"] .pres-empty {
  background: #FFFFFF;
}

/* Modal overlay backdrop */
html[data-theme="light"] .tirage-modal,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .mission-box {
  border-color: #EDEFF1;
}

/* Resizers */
html[data-theme="light"] .h-resizer,
html[data-theme="light"] .v-resizer {
  background: #EDEFF1;
}

/* Mode dessin boutons */
html[data-theme="light"] .draw-act,
html[data-theme="light"] .draw-sz {
  color: #1C1C1C;
  border-color: #CDD3D8;
}
html[data-theme="light"] .draw-act:hover,
html[data-theme="light"] .draw-sz:hover {
  background: #F6F7F8;
  color: #1C1C1C;
}

/* Formulaires */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: #FFFFFF;
  color: #1C1C1C;
  border-color: #CDD3D8;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #9CA3A8; }

/* Save pill (admin) */
html[data-theme="light"] .spill {
  background: #F6F7F8;
  border-color: #CDD3D8;
}

/* Bloc éditeur */
html[data-theme="light"] .bloc {
  background: #F6F7F8;
  border-color: #EDEFF1;
}
html[data-theme="light"] .sec-head {
  background: #F6F7F8;
  border-bottom-color: #EDEFF1;
}

/* Liste items sidebar */
html[data-theme="light"] .li:hover {
  background: #F6F7F8;
}
html[data-theme="light"] .col-head,
html[data-theme="light"] .jour-title-bar {
  background: #F6F7F8;
  border-bottom-color: #EDEFF1;
}
html[data-theme="light"] .col {
  border-right-color: #EDEFF1;
}

/* Footer */
html[data-theme="light"] footer {
  border-top-color: #EDEFF1;
}

/* block-label dans controle.html */
html[data-theme="light"] .block-label {
  background: #F6F7F8;
  border-bottom-color: #EDEFF1;
  color: #878A8C;
}

/* Contrôle — panneau cas/missions (no-form) en mode clair */
html[data-theme="light"] .ctrl-list-scroll {
  background: #FFFFFF;
}
html[data-theme="light"] .ctrl-list-item {
  border-bottom-color: #EDEFF1;
  color: #1C1C1C;
}
html[data-theme="light"] .ctrl-list-item:hover {
  background: #F6F7F8;
}
html[data-theme="light"] .ctrl-list-item-sub {
  color: #878A8C;
}
html[data-theme="light"] .ctrl-list-empty {
  color: #878A8C;
}

/* Radio head */
html[data-theme="light"] .radio-head {
  background: #F6F7F8;
  border-bottom-color: #EDEFF1;
}
html[data-theme="light"] .radio-head:hover {
  background: #EDEFF1;
}
html[data-theme="light"] .radio-item:hover {
  background: #F6F7F8;
}

/* Scrollbars light */
html[data-theme="light"] ::-webkit-scrollbar {
  width: 6px;
  background: #EDEFF1;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #CDD3D8;
  border-radius: 4px;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #A0A5A9;
}

/* Stat cards en mode clair : valeur orange pour l'accent Reddit */
html[data-theme="light"] .stat-blue   { border-top-color: var(--orange); }
html[data-theme="light"] .stat-teal   { border-top-color: var(--green); }
html[data-theme="light"] .stat-purple { border-top-color: var(--purple); }
html[data-theme="light"] .stat-blue   .stat-value { color: var(--orange); }
html[data-theme="light"] .stat-teal   .stat-value { color: var(--green); }
html[data-theme="light"] .stat-purple .stat-value { color: var(--purple); }

/* ════════════════════════════════════════════════════════
   Dark mode scrollbars
════════════════════════════════════════════════════════ */
html[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  background: var(--bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--border);
}

/* ════════════════════════════════════════════════════════
   Bouton toggle thème (commun à toutes les pages)
════════════════════════════════════════════════════════ */
[data-theme-toggle] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}