/* Overrides spécifiques pour le thème clair */

/* HTML Viewer - Police plus foncée */
:root.light-theme .markup {
  color: #333;
}

:root.light-theme .markup .enhance {
  background: rgba(0,123,255,.2);
  color: #000;
}

:root.light-theme tag {
  color: #0066cc;
  font-weight: 600;
}

/* Bouton aide - Meilleure lisibilité */
:root.light-theme .note-toggle {
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.7);
  border: 1px solid rgba(0,0,0,.15);
}

:root.light-theme .note-toggle:hover {
  background: rgba(0,0,0,.12);
  color: rgba(0,0,0,.9);
  text-decoration: underline;
}

/* Panneau latéral droit */
:root.light-theme .right-col {
  background: #f8f8f8;
}

:root.light-theme .right-col .help-wrapper {
  background: rgba(0,0,0,.03);
}

:root.light-theme .level-menu {
  background: rgba(255,255,255,.95);
  color: #333;
  box-shadow: -5px 0 10px rgba(0,0,0,.1);
}

:root.light-theme .level-menu h2 {
  color: #333;
  opacity: 1;
}

:root.light-theme .level-menu .levels a {
  color: #666;
  border-top: solid 1px rgba(0,0,0,.08);
}

:root.light-theme .level-menu .levels a:hover {
  background: rgba(0,0,0,.05);
  color: #333;
}

:root.light-theme .level-menu .levels a.current {
  background: rgba(0,123,255,.1);
  color: #0066cc;
}

:root.light-theme .level-menu .levels a.completed {
  color: #28a745;
}

:root.light-theme .level-menu .levels a.completed .checkmark {
  border-color: #28a745;
}

:root.light-theme .level-menu .levels a.completed .checkmark:after {
  border-color: #28a745;
}

:root.light-theme .reset-progress {
  color: #dc3545;
}

:root.light-theme .reset-progress:hover {
  color: #c82333;
  background: rgba(220,53,69,.1);
}

/* Niveau header */
:root.light-theme .level-header {
  color: rgba(0,0,0,.8);
}

:root.light-theme .level-header .level-text {
  color: rgba(0,0,0,.6);
}

:root.light-theme .level-header.completed .checkmark:after {
  border-color: #28a745;
}

/* Affichage de l'aide */
:root.light-theme .display-help {
  color: rgba(0,0,0,.8);
}

:root.light-theme .display-help .selector-name {
  color: #0066cc;
}

:root.light-theme .display-help .title {
  color: rgba(0,0,0,.7);
}

:root.light-theme .display-help .syntax {
  color: rgba(0,0,0,.8);
}

:root.light-theme .display-help .hint {
  color: rgba(0,0,0,.75);
}

:root.light-theme .display-help .example {
  color: rgba(0,0,0,.7);
}

:root.light-theme .display-help strong {
  color: #0066cc;
  font-weight: 700;
}

/* Navigation des niveaux */
:root.light-theme .level-nav a {
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.15);
}

:root.light-theme .level-nav a:hover {
  background: rgba(0,0,0,.12);
}

:root.light-theme .level-progress {
  background: rgba(0,0,0,.1);
}

:root.light-theme .level-progress .progress {
  background: #28a745;
}

/* Menu toggle */
:root.light-theme .level-menu-toggle-wrapper {
  background: rgba(0,0,0,.05);
  border-left: 1px solid rgba(0,0,0,.1);
}

:root.light-theme .level-menu-toggle {
  background: rgba(0,0,0,.1);
}

:root.light-theme .level-menu-toggle:hover {
  background: rgba(0,0,0,.15);
}

/* Autres éléments */
:root.light-theme .helper {
  background: white;
  color: #444;
  border-bottom: solid 2px #999;
  box-shadow: 0px 5px 0px rgba(0,0,0,.15);
}

:root.light-theme .note {
  background: white;
  color: #444;
  border: solid 2px #ddd;
}

:root.light-theme .note a {
  color: #0066cc;
  background: rgba(0,102,204,.1);
}

:root.light-theme .note .note-toggle:hover {
  color: #0066cc;
  background: rgba(0,102,204,.15);
}

:root.light-theme .what-is-this {
  color: rgba(0,0,0,.7);
}

:root.light-theme .what-is-this a {
  color: #0066cc;
}

:root.light-theme .order {
  color: rgba(0,0,0,.9);
  font-weight: 600;
}

:root.light-theme .input-strobe {
  border-color: #999;
}

:root.light-theme .line-numbers {
  color: #999;
}

:root.light-theme .editor-pane:last-child {
  border-right: solid 1px rgba(0,0,0,.05);
  border-bottom: solid 1px rgba(0,0,0,.05);
}

:root.light-theme .table-surface {
  box-shadow: 0px 40px 10px rgba(0,0,0,.15);
}

:root.light-theme .nametag {
  background: rgba(255,255,255,.9);
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.1);
}

:root.light-theme .enter-button {
  background: #e0e0e0;
  color: #333;
  border-color: #999;
}

:root.light-theme .enter-button:hover {
  background: #d0d0d0;
}