/* ============================================================
   mkdocs-superquiz — DARK THEME
   quiz-dark.scss

   Applied when mkdocs-material uses [data-md-color-scheme="slate"].
   Overrides CSS custom properties and targeted component styles.
   All structure / layout is in quiz-light.scss.
   ============================================================ */


[data-md-color-scheme="slate"] {

  /* ============================================================
     1. COLOR TOKEN OVERRIDES
     ============================================================ */

  /* — Brand palette (brighter for dark surfaces) — */
  --mkq-primary:          #42a5f5;
  --mkq-success:          #66bb6a;
  --mkq-error:            #ef5350;
  --mkq-warning:          #ffa726;

  /* — Surface & text — */
  --mkq-bg:               #1e1e1e;
  --mkq-surface:          #2a2a2a;
  --mkq-border:           #424242;
  --mkq-text:             #e0e0e0;
  --mkq-text-secondary:   #9e9e9e;
  --mkq-hover:            #2a2a2a;
  --mkq-shadow:           rgba(0, 0, 0, 0.3);

  /* — Quiz type accent colors (lighter, higher contrast on dark) — */
  --mkq-mcquiz-color:     #42a5f5;
  --mkq-scquiz-color:     #ffa726;
  --mkq-fillblanks-color:    #ab47bc;
  --mkq-scdropdown-color:   #26a69a;
  --mkq-mcdropdown-color:   #f06292;

  /* — State colors (alpha variants, adjusted for dark) — */
  --mkq-success-bg:        rgba(102, 187, 106, 0.12);
  --mkq-success-bg-strong: rgba(102, 187, 106, 0.25);
  --mkq-success-border:    rgba(102, 187, 106, 0.4);
  --mkq-success-shadow:    rgba(102, 187, 106, 0.2);

  --mkq-error-bg:          rgba(239, 83, 80, 0.12);
  --mkq-error-border:      rgba(239, 83, 80, 0.4);

  --mkq-warning-bg:        rgba(255, 167, 38, 0.15);
  --mkq-primary-bg:        rgba(66, 165, 245, 0.12);
  --mkq-primary-shadow:    rgba(66, 165, 245, 0.25);


  /* ============================================================
     2. BASE QUIZ CONTAINER
     ============================================================ */
  .mkdocs-superquiz {
    background:   var(--mkq-bg);
    border-color: var(--mkq-border);

    .admonition-title { color: var(--mkq-text); }
  }


  /* ============================================================
     3. LOCK / UNLOCK ICONS
     ============================================================ */
  .mkq-unlock-btn,
  .mkq-lock-indicator {
    &.unlocked       { color: var(--mkq-success); }
    &.locked         { color: var(--mkq-warning); }
    &.locked-permanent { color: var(--mkq-error); }
  }


  /* ============================================================
     4. QUESTIONS
     ============================================================ */
  .mkq-question {
    background: var(--mkq-surface);

    .mkq-question-text {
      color: var(--mkq-text);
      .mkq-number { color: var(--mkq-primary); }
    }
  }


  /* ============================================================
     4b. RICH CONTENT (images, iframes, markdown, html)
     ============================================================ */
  .mkq-rich-content {
    img {
      opacity: 0.92;
      box-shadow: 0 0 0 1px var(--mkq-border);
    }

    iframe {
      box-shadow: 0 0 0 1px var(--mkq-border);
    }
  }

  .mkdocs-superquiz > .mkq-rich-content {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
  }

  .mkq-question .mkq-rich-content {
    background: transparent;
  }


  /* ============================================================
     5. ANSWER CHOICES  (mcquiz / scquiz)
     ============================================================ */
  .mkq-answer {
    &:hover { background: #333333; }

    .mkq-answer-text { color: var(--mkq-text); }

    .mkq-answer-feedback {
      &.correct   { color: var(--mkq-success); }
      &.incorrect { color: var(--mkq-error);   }
    }

    &.correct {
      background:  var(--mkq-success-bg);
      border-left-color: var(--mkq-success);
    }

    &.incorrect {
      background:  var(--mkq-error-bg);
      border-left-color: var(--mkq-error);
    }
  }


  /* ============================================================
     6. FILLBLANKS — INPUT FIELDS
     ============================================================ */
  .mkq-blank-input {
    background:   var(--mkq-bg);
    color:        var(--mkq-text);
    border-color: var(--mkq-border);

    &:focus { border-color: var(--mkq-primary); }

    &.correct {
      border-color: var(--mkq-success);
      background:   var(--mkq-success-bg);
      box-shadow:   0 0 0 3px var(--mkq-success-shadow);
    }

    &.incorrect {
      border-color: var(--mkq-error);
      background:   var(--mkq-error-bg);
    }
  }


  /* ============================================================
     7. FILLBLANKS — CORRECTION DISPLAY
     ============================================================ */

  .mkq-blank-wrong-label {
    background: var(--mkq-bg);
    color:      var(--mkq-error);
    text-decoration-color: var(--mkq-error);
  }

  .mkq-custom-select-btn {
    border-color: var(--mkq-success);
    background:   var(--mkq-success-bg);
    color:        var(--mkq-text);
    box-shadow:   0 2px 4px var(--mkq-success-shadow);

    &:hover { box-shadow: 0 4px 8px var(--mkq-success-border); }
    &:focus { box-shadow: 0 0 0 3px var(--mkq-success-shadow); }
  }

  .mkq-custom-select-arrow   { color: var(--mkq-success); }

  .mkq-custom-select-listbox {
    background:  var(--mkq-bg);
    border-color: var(--mkq-success);
    box-shadow:  0 10px 25px rgba(0, 0, 0, 0.4);
  }

  .mkq-custom-select-option {
    &:hover               { background: var(--mkq-success-bg-strong); }
    &[aria-selected="true"] {
      background: var(--mkq-success-bg-strong);
    }
  }


  /* ============================================================
     8. SCDROPDOWN QUIZ — INTERACTIVE SELECT
     ============================================================ */
  .mkq-custom-scdropdown {

    &-btn {
      background:   var(--mkq-bg);
      color:        var(--mkq-text);
      border-color: var(--mkq-border);

      &:hover {
        border-color: var(--mkq-primary);
        background:   rgba(255, 255, 255, 0.05);
      }
    }

    &-value { color: var(--mkq-text); }

    &-arrow { color: var(--mkq-text-secondary); }

    &-options {
      background:   var(--mkq-bg);
      border-color: var(--mkq-border);
      box-shadow:   0 4px 16px rgba(0, 0, 0, 0.4);
    }

    &-option {
      &:hover    { background: var(--mkq-hover); }
      &.selected { background: var(--mkq-primary-bg); }
    }

    &.correct .mkq-custom-scdropdown-btn {
      border-color: var(--mkq-success);
      background:   var(--mkq-success-bg);
    }

    &.incorrect .mkq-custom-scdropdown-btn {
      border-color: var(--mkq-error);
      background:   var(--mkq-error-bg);
    }
  }


  /* ============================================================
     9. SCDROPDOWN QUIZ — CORRECTION DISPLAY
     ============================================================ */
  .mkq-scdropdown-correction-wrapper {
    .mkq-custom-scdropdown.correct .mkq-custom-scdropdown-btn {
      border-color: var(--mkq-success);
      background:   var(--mkq-success-bg);
      color:        var(--mkq-text);
    }
  }


  /* ============================================================
     10. MCDROPDOWN QUIZ — INTERACTIVE SELECT
     ============================================================ */
  .mkq-custom-mcdropdown {

    &-btn {
      background:   var(--mkq-bg);
      color:        var(--mkq-text);
      border-color: var(--mkq-border);

      &:hover {
        border-color: var(--mkq-primary);
        background:   rgba(255, 255, 255, 0.05);
      }
    }

    &-value { color: var(--mkq-text); }

    &-arrow { color: var(--mkq-text-secondary); }

    &-options {
      background:   var(--mkq-bg);
      border-color: var(--mkq-border);
      box-shadow:   0 4px 16px rgba(0, 0, 0, 0.4);
    }

    &-option {
      &:hover    { background: var(--mkq-hover); }
      &.selected {
        background: rgba(240, 98, 146, 0.15);

        &::before { color: var(--mkq-mcdropdown-color); }
      }
    }

    &.correct .mkq-custom-mcdropdown-btn {
      border-color: var(--mkq-success);
      background:   var(--mkq-success-bg);
    }

    &.incorrect .mkq-custom-mcdropdown-btn {
      border-color: var(--mkq-error);
      background:   var(--mkq-error-bg);
    }
  }

  /* ============================================================
     11. MCDROPDOWN — CORRECTION DISPLAY
     ============================================================ */
  .mkq-mcdropdown-correction-wrapper {
    .mkq-custom-mcdropdown.correct .mkq-custom-mcdropdown-btn {
      border-color: var(--mkq-success);
      background:   var(--mkq-success-bg);
      color:        var(--mkq-text);
    }
  }


  /* ============================================================
     12. VALIDATE BUTTON & SCORE
     ============================================================ */
  .quiz-actions {
    border-top-color: var(--mkq-border);

    .mkq-validate-btn {
      background: var(--mkq-primary);
      color:      white;

      &:hover  { background: #1e88e5; }
      &:focus  { outline: 2px solid var(--mkq-primary); outline-offset: 2px; }
    }

    .mkq-score {
      &.good   { color: var(--mkq-success); background: var(--mkq-success-bg);  }
      &.medium { color: var(--mkq-warning); background: var(--mkq-warning-bg);  }
      &.bad    { color: var(--mkq-error);   background: var(--mkq-error-bg);    }
    }
  }


  /* ============================================================
     13. UNLOCK MODAL
     ============================================================ */
  .mkq-modal {
    background: rgba(0, 0, 0, 0.7);

    .mkq-modal-content {
      background: var(--mkq-bg);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

      h3 { color: var(--mkq-text); }

      .qr-code-section #qr-code-container { background: white; }

      .unlock-input-section {
        label { color: var(--mkq-text); }

        input[type="text"] {
          background:   var(--mkq-surface);
          color:        var(--mkq-text);
          border-color: var(--mkq-border);

          &:focus { border-color: var(--mkq-primary); }
        }

        button {
          background: var(--mkq-primary);
          &:hover    { background: #1e88e5; }
        }
      }

      .mkq-modal-close {
        color: var(--mkq-text-secondary);
        &:hover { color: var(--mkq-text); }
      }
    }
  }


/* ============================================================
     14. PAGE-LEVEL BUTTONS  (Unlock All + Reset All dans le h1)
     ============================================================ */
  .mkq-unlock-page-btn {
    background: var(--mkq-primary);

    &:hover {
      background: #1e88e5;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    &:focus { outline: 2px solid var(--mkq-primary); outline-offset: 2px; }
  }

  .mkq-refresh-page-btn {
    background: var(--mkq-success);

    &:hover {
      background: #57bb5a;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    &:focus { outline: 2px solid var(--mkq-success); outline-offset: 2px; }
  }

  /* ============================================================
     14b. HEADER BUTTONS (icônes uniquement dans le nav)
     ============================================================ */
  .mkq-header-unlock-btn,
  .mkq-header-refresh-btn {
    color: var(--mkq-text);

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      opacity: 1;
    }
  }

  .mkq-header-refresh-btn {
    filter: hue-rotate(0deg) saturate(2) brightness(1.2);
  }

    /* ============================================================
     14c. ORDERQUIZ — DRAG & DROP (dark overrides)
     ============================================================ */
  .mkdocs-superquiz[data-quiz-type="orderquiz"] {
    border-color: #ffa040;
    .admonition-title, .mkq-number { color: #ffa040; }
  }

  .mkq-order-item {
    background:   var(--mkq-surface);
    border-color: var(--mkq-border);

    &:hover {
      border-color: #ffa040;
      box-shadow: 0 2px 8px rgba(255, 160, 64, 0.2);
    }

    &.drag-over {
      border-color: #ffa040;
      background: rgba(255, 160, 64, 0.1);
      box-shadow: 0 4px 12px rgba(255, 160, 64, 0.3);
    }

    &.correct {
      border-color: var(--mkq-success);
      background:   var(--mkq-success-bg);
    }

    &.incorrect {
      border-color: var(--mkq-error);
      background:   var(--mkq-error-bg);
    }
  }

  .mkq-order-ghost {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }

  .mkq-order-placeholder {
      background: rgba(#ffa040, 0.15);
      border-color: #ffa040;
  }

  /* ============================================================
     15. PER-QUIZ-TYPE ACCENT BORDERS & TITLE COLORS
     ============================================================ */
  .mkdocs-superquiz {

    &[data-quiz-type="mcquiz"] {
      border-color: var(--mkq-mcquiz-color);
      .admonition-title, .mkq-number { color: var(--mkq-mcquiz-color); }
    }

    &[data-quiz-type="scquiz"] {
      border-color: var(--mkq-scquiz-color);
      .admonition-title, .mkq-number { color: var(--mkq-scquiz-color); }
    }

    &[data-quiz-type="fillblanks"] {
      border-color: var(--mkq-fillblanks-color);
      .admonition-title, .mkq-number { color: var(--mkq-fillblanks-color); }
    }

    &[data-quiz-type="scdropdown"] {
      border-color: var(--mkq-scdropdown-color);
      .admonition-title, .mkq-number { color: var(--mkq-scdropdown-color); }
    }

    &[data-quiz-type="mcdropdown"] {
      border-color: var(--mkq-mcdropdown-color);
      .admonition-title, .mkq-number { color: var(--mkq-mcdropdown-color); }
    }
  }


  /* ============================================================
     16. INLINE CORRECTION HINT
     ============================================================ */
  .mkq-question-correction {
    background:  var(--mkq-primary-bg);
    border-left-color: var(--mkq-primary);
    color:       var(--mkq-text);

    &::before { color: var(--mkq-primary); }
  }


  /* ============================================================
     17. RESPONSIVE (dark-specific overrides if needed)
     ============================================================ */
  @media (max-width: 768px) {
    .mkq-page-buttons button { flex: 1; }
  }

} // end [data-md-color-scheme="slate"]