/*
==================================================================
  Master Stylesheet for MCQ Plugin
==================================================================
This single file now contains all base styles, widget styles, 
and aggressive dark mode overrides to fix theme conflicts.
*/

/* --- 1. Global Theming Variables --- */
:root {
    --nm-bg-primary: #ffffff;
    --nm-bg-secondary: #fcfcfc;
    --nm-bg-tertiary: #f9f9f9;
    --nm-bg-explanation: #f3f6f9;
    --nm-border-primary: #e0e0e0;
    --nm-border-secondary: #ccc;
    --nm-border-hover: #9ac5f0;
    --nm-text-primary: #2c3e50;
    --nm-text-secondary: #333;
    --nm-text-action: #555;
    --nm-brand-color: #3498db;
    --nm-correct-bg: #e7f5e8;
    --nm-correct-border: #6bbe6e;
    --nm-correct-text: #1e6f23;
    --nm-wrong-bg: #fde8e8;
    --nm-wrong-border: #e88282;
    --nm-wrong-text: #a92020;
}

/* --- 2. Main MCQ Container & Elements --- */
.nm-mcq-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 1px solid var(--nm-border-primary);
    border-radius: 8px;
    padding: 20px;
    background-color: var(--nm-bg-primary);
    max-width: 700px;
    margin: 20px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.nm-mcq-list { margin-top: 20px; }
.nm-quiz-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--nm-border-primary); }
.nm-filters-wrapper { display: flex; gap: 20px; flex-wrap: wrap; }
.nm-topic-filter-wrapper, .nm-subtopic-filter-wrapper { display: flex; align-items: center; gap: 10px; }
.nm-topic-filter-wrapper label, .nm-subtopic-filter-wrapper label { font-weight: 600; color: var(--nm-text-secondary); }
.nm-topic-filter-wrapper select, .nm-subtopic-filter-wrapper select { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--nm-border-secondary); background-color: var(--nm-bg-tertiary); color: var(--nm-text-primary); }
.nm-dark-mode-toggle { margin-left: auto; }
.nm-switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.nm-switch input { opacity: 0; width: 0; height: 0; }
.nm-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.nm-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .nm-slider { background-color: var(--nm-brand-color); }
input:checked + .nm-slider:before { transform: translateX(26px); }
.nm-slider.nm-round { border-radius: 34px; }
.nm-slider.nm-round:before { border-radius: 50%; }
.nm-mcq-item { padding: 20px; margin-bottom: 20px; border: 1px solid var(--nm-border-primary); border-radius: 8px; background-color: var(--nm-bg-secondary); }
.nm-mcq-question { font-size: 1.1em; font-weight: 600; color: var(--nm-text-primary); margin: 0 0 15px 0; line-height: 1.4; }
.nm-mcq-options { list-style: none; padding: 0; margin: 0; }
.nm-mcq-option { padding: 12px 15px; border: 1px solid var(--nm-border-secondary); color: var(--nm-text-primary); border-radius: 6px; margin-bottom: 8px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.nm-mcq-option:hover { background-color: var(--nm-bg-tertiary); border-color: var(--nm-border-hover); }
.nm-mcq-item.answered .nm-mcq-option { cursor: default; pointer-events: none; }
.nm-mcq-option.correct { background-color: var(--nm-correct-bg); border-color: var(--nm-correct-border); color: var(--nm-correct-text); font-weight: 600; }
.nm-mcq-option.wrong { background-color: var(--nm-wrong-bg); border-color: var(--nm-wrong-border); color: var(--nm-wrong-text); font-weight: 600; }
.nm-mcq-feedback { margin-top: 10px; font-weight: bold; }
.nm-mcq-feedback.correct { color: var(--nm-correct-text); }
.nm-mcq-feedback.wrong { color: var(--nm-wrong-text); }
.nm-mcq-actions { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; }
.nm-mcq-actions button { background-color: var(--nm-bg-tertiary); border: 1px solid var(--nm-border-secondary); color: var(--nm-text-action); padding: 8px 12px; border-radius: 5px; cursor: pointer; font-size: 0.9em; }
.nm-mcq-actions button:hover { background-color: var(--nm-border-primary); }
.nm-mcq-explanation { margin-top: 15px; padding: 15px; background-color: var(--nm-bg-explanation); border-left: 4px solid var(--nm-brand-color); border-radius: 4px; }
.nm-loader-wrapper { display: flex; justify-content: center; align-items: center; min-height: 150px; }
.nm-loader { border: 5px solid var(--nm-border-primary); border-top: 5px solid var(--nm-brand-color); border-radius: 50%; width: 40px; height: 40px; animation: nm-spin 1s linear infinite; }
@keyframes nm-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- 3. SMART WIDGET STYLES (COMPACT) --- */
.widget_nm_mcq_topic_widget { border: 1px solid var(--nm-border-primary); border-radius: 8px; padding: 20px; background-color: var(--nm-bg-primary); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
.widget_nm_mcq_topic_widget .widget-title { font-size: 1.2em; font-weight: 600; color: var(--nm-text-primary); margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid var(--nm-bg-tertiary); }
.nm-topic-list { list-style: none; padding: 0; margin: 0; }
/* FIX: Reduced margin and padding for a compact look */
.nm-topic-list li { margin-bottom: 2px; }
.nm-topic-list li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; text-decoration: none; color: var(--nm-text-secondary); border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease; }
.nm-topic-list li a:hover { background-color: var(--nm-bg-tertiary); color: var(--nm-brand-color); }
.nm-topic-name { font-weight: 500; }
.nm-topic-count { font-size: 0.8em; background-color: var(--nm-bg-tertiary); color: var(--nm-text-action); padding: 2px 7px; border-radius: 10px; font-weight: 600; }

/*
==================================================================
  MASTER DARK MODE OVERRIDES (MERGED)
==================================================================
*/

/* --- Dark Mode Variables --- */
body.dark-mode {
    --nm-bg-primary: #121212;
    --nm-bg-secondary: #1e1e1e;
    --nm-text-primary: #e0e0e0;
    --nm-border-primary: #333333;
    --nm-link-color: #bb86fc;
    --nm-input-bg: #2a2a2a;
    --nm-input-text: #f1f1f1;
    --nm-input-border: #555555;
    background-color: var(--nm-bg-primary) !important;
    color: var(--nm-text-primary);
}

/* --- Dark Mode General Theme Adjustments --- */
body.dark-mode a { color: var(--nm-link-color); }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 { color: #ffffff; }
body.dark-mode .ast-separate-container .ast-article-post,
body.dark-mode .ast-separate-container .ast-article-single { background-color: var(--nm-bg-secondary); }

/* --- Dark Mode Plugin Component Adjustments --- */
body.dark-mode .nm-mcq-container,
body.dark-mode .nm-topic-filter-wrapper select,
body.dark-mode .widget_nm_mcq_topic_widget {
    background-color: var(--nm-bg-secondary);
    border-color: var(--nm-border-primary);
    color: var(--nm-text-primary);
}
body.dark-mode .nm-mcq-option { color: var(--nm-text-primary); }
body.dark-mode .widget_nm_mcq_topic_widget .widget-title { color: var(--nm-text-primary); border-bottom-color: var(--nm-border-primary); }
body.dark-mode .nm-topic-list li a { color: var(--nm-text-primary); }
body.dark-mode .nm-topic-count { background-color: var(--nm-border-primary); color: var(--nm-text-primary); }
body.dark-mode .nm-mcq-question { color: #fff; }

/* --- DEFINITIVE FIX: Topic Heading & White Box --- */
body.dark-mode.ast-separate-container #primary #main .ast-archive-description,
body.dark-mode.ast-separate-container #primary.content-area .ast-article-post .entry-header {
    background-color: var(--nm-bg-secondary) !important;
    border: none !important;
}

/* --- DEFINITIVE FIX: Quiz Modal Hover & Suggestions --- */
body.dark-mode #nm-quiz-modal-content .nm-quiz-options .quiz-option:hover {
    color: var(--nm-input-text) !important;
    background-color: #333 !important;
}
body.dark-mode #nm-quiz-modal-content #nm-topic-suggestions {
    background: var(--nm-input-bg) !important;
    color: var(--nm-input-text) !important;
    border-color: var(--nm-input-border) !important;
}
body.dark-mode #nm-quiz-modal-content #nm-topic-suggestions div:hover {
    background: #333 !important;
}