/*
==================================================================
  Global Stylesheet for MCQ Plugin
  @MODIFIED:
  - Added global Dark Mode CSS variables.
  - Added styles for all sidebar widgets (Topics, Subscribe, Quiz Button).
==================================================================
*/

/* --- 1. Global Theming Variables (MOVED FROM frontend.css) --- */
: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-btn-bg: #667eea;
    --nm-btn-text: #ffffff;
    --nm-correct-bg: #e7f5e8;
    --nm-correct-border: #6bbe6e;
    --nm-correct-text: #1e6f23;
    --nm-wrong-bg: #fde8e8;
    --nm-wrong-border: #e88282;
    --nm-wrong-text: #a92020;
}

body.dark-mode {
    --nm-bg-primary: #121212;
    --nm-bg-secondary: #1e1e1e;
    --nm-bg-tertiary: #2a2a2a;
    --nm-bg-explanation: #2a2a2a;
    --nm-text-primary: #e0e0e0;
    --nm-text-secondary: #e0e0e0;
    --nm-text-action: #bbbbbb;
    --nm-border-primary: #333333;
    --nm-border-secondary: #444444;
    --nm-border-hover: #555555;
    --nm-link-color: #bb86fc;
    --nm-input-bg: #2a2a2a;
    --nm-input-text: #f1f1f1;
    --nm-input-border: #555555;
    --nm-btn-bg: #bb86fc;
    --nm-btn-text: #121212;
    --nm-correct-bg: #2d572c;
    --nm-correct-border: #4e8c4c;
    --nm-correct-text: #f0fdf5;
    --nm-wrong-bg: #6b2d2d;
    --nm-wrong-border: #a94442;
    --nm-wrong-text: #fde8e8;
    background-color: var(--nm-bg-primary) !important;
    color: var(--nm-text-primary);
}


/* --- 2. Top Navigation (Original) --- */
.nm-top-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 25px;
    background: white; /* This is OK, it's a specific header bar */
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
/* ... (all other original .nm-top-nav styles) ... */
.nm-nav-item { color: #333; text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 4px; transition: all 0.2s ease; white-space: nowrap; }
.nm-nav-item:hover { background: #f0f0f0; color: #667eea; }
.nm-nav-item.active { background: #667eea; color: white; }
.nm-nav-spacer { flex: 1; }
.nm-user-greeting { color: #666; font-size: 13px; white-space: nowrap; }
.nm-nav-item.logout { color: #ff5252; }
.nm-nav-item.logout:hover { background: #ffebee; color: #c62828; }
@media (max-width: 768px) {
    .nm-top-nav { padding: 10px 15px; gap: 10px; }
    .nm-nav-item { padding: 5px 10px; font-size: 13px; }
    .nm-user-greeting { display: none; }
}


/* --- 3. Global Button Styles (for Widgets) --- */
.nm-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
.nm-btn-block {
    width: 100%;
}
.nm-btn-primary {
    background: var(--nm-btn-bg);
    color: var(--nm-btn-text);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
body.dark-mode .nm-btn-primary {
    box-shadow: 0 4px 12px rgba(187, 134, 252, 0.2);
}
.nm-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
body.dark-mode .nm-btn-primary:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(187, 134, 252, 0.3);
}
.nm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}


/* --- 4. Topic Widget Styles (MOVED FROM frontend.css) --- */
.widget_nm_mcq_topic_widget,
.widget_nm_featured_topics_widget,
.nm-widget-wrapper { 
    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,
.widget_nm_featured_topics_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; }
.nm-topic-list li { margin-bottom: 2px; list-style: none; }
.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; flex: 1; word-break: break-word; }
.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;
    margin-left: 10px;
    flex-shrink: 0; 
}

/* Specific Widget Colors */
.nm-all-topics .nm-topic-count { background: #e3f2fd; color: #1976d2; }
.nm-featured-topics .nm-topic-count { background: #fff3e0; color: #f57c00; }

/* Dark Mode Widget Overrides */
body.dark-mode .widget_nm_mcq_topic_widget .widget-title,
body.dark-mode .widget_nm_featured_topics_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-list li a:hover { background-color: var(--nm-bg-tertiary); color: var(--nm-link-color); }
body.dark-mode .nm-topic-count { background-color: var(--nm-border-primary); color: var(--nm-text-primary); }
body.dark-mode .nm-all-topics .nm-topic-count { background: #2d3d5c; color: #90caf9; }
body.dark-mode .nm-featured-topics .nm-topic-count { background: #4a3a1f; color: #ffb74d; }


/* --- 5. Subscribe Form Styles (NEW) --- */
.nm-subscribe-form {
    max-width: 500px;
    margin: 30px auto;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid var(--nm-border-primary);
}
.nm-subscribe-form h3 {
    margin-top: 0;
    color: var(--nm-text-primary);
}
.nm-subscribe-form p {
    color: var(--nm-text-secondary);
}
.nm-subscribe-form-ajax {
    margin-top: 20px;
}
.nm-subscribe-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: var(--nm-bg-primary);
    color: var(--nm-text-primary);
}
.nm-subscribe-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}
.nm-subscribe-footer {
    font-size: 12px;
    color: #888;
    margin-bottom: 0;
}
.nm-subscribe-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    display: none;
}
.nm-subscribe-message.success {
    background: #d4edda;
    color: #155724;
}
.nm-subscribe-message.error {
    background: #f8d7da;
    color: #721c24;
}

/* Dark Mode Subscribe Form */
body.dark-mode .nm-subscribe-form {
    background: var(--nm-bg-secondary);
    border-color: var(--nm-border-primary);
}
body.dark-mode .nm-subscribe-form h3,
body.dark-mode .nm-subscribe-form p {
    color: var(--nm-text-primary);
}
body.dark-mode .nm-subscribe-form input[type="email"] {
    background: var(--nm-input-bg);
    color: var(--nm-input-text);
    border-color: var(--nm-input-border);
}
body.dark-mode .nm-subscribe-footer {
    color: var(--nm-text-action);
}
body.dark-mode .nm-subscribe-message.success {
    background: var(--nm-correct-bg);
    color: var(--nm-correct-text);
}
body.dark-mode .nm-subscribe-message.error {
    background: var(--nm-wrong-bg);
    color: var(--nm-wrong-text);
}


/* --- 6. Floating Score Tracker (MOVED FROM frontend.css) --- */
.nm-score-tracker{
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: #fff;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  z-index: 998;
  min-width: 140px;
  display: none;                /* shown by JS when first answer is attempted */
  border: 2px solid #667eea;
  content-visibility: auto;
  contain: layout style paint;
}
.nm-score-tracker.visible{ display:block; }
.nm-score-title{ font-size:.85em; color:#666; margin-bottom:6px; }
.nm-score-number{ font-size:1.8em; font-weight:700; color:#667eea; }
.nm-score-label{ font-size:.8em; color:#999; }
@media (max-width: 767px){
  .nm-score-tracker{
    bottom: 70px;
    right: 15px;
    padding: 12px 16px;
    min-width: 120px;
    font-size: .9em;
  }
  .nm-score-number{ font-size: 1.5em; }
}
body.dark-mode .nm-score-tracker{
  background: var(--nm-bg-secondary);
  color: var(--nm-text-primary);
  border-color: #667eea;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
body.dark-mode .nm-score-title,
body.dark-mode .nm-score-label {
    color: var(--nm-text-action);
}