/* =======================
   🌾 AgriAchiever - Redesigned Dark Theme
   Professional + Student-friendly
   Clear hierarchy, semantic colors
   ======================= */

/* Dark Mode Variables */
html[data-theme="dark"] {
    color-scheme: dark;

    /* ── Backgrounds ── */
    --bg-page:       #080e1a;   /* deepest layer */
    --bg-card:       #111827;   /* card surfaces  */
    --bg-card-hover: #1a2538;   /* hover state    */
    --bg-elevated:   #162032;   /* modals, menus  */
    --bg-input:      #0d1525;   /* inputs         */

    /* ── Borders ── */
    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-card:   rgba(255, 255, 255, 0.12);
    --border-focus:  #6366f1;

    /* ── Text ── */
    --text-primary:   #f0f4ff;
    --text-secondary: #94a3b8;
    --text-muted:     #4b5e78;

    /* ── Brand Gold (headings, XP, streaks only) ── */
    --gold:       #f59e0b;
    --gold-light: #fcd34d;
    --gold-dim:   #b45309;

    /* ── Interactive / Accent ── */
    --indigo:       #6366f1;
    --indigo-light: #818cf8;
    --indigo-dim:   #3730a3;

    /* ── Semantic (success / danger) ── */
    --success:     #10b981;
    --success-bg:  rgba(16, 185, 129, 0.12);
    --danger:      #f43f5e;
    --danger-bg:   rgba(244, 63, 94, 0.12);
    --warning-bg:  rgba(245, 158, 11, 0.12);
}

/* ── Base ── */
html[data-theme="dark"] body {
    background:  var(--bg-page) !important;
    color:       var(--text-primary) !important;
    font-family: 'Outfit', 'Inter', 'Poppins', sans-serif;
}

/* Global text reset — only essentials, no !important sledgehammer */
html[data-theme="dark"] {
    color: var(--text-primary);
}


/* ════════════════════════════════════════
   TYPOGRAPHY
════════════════════════════════════════ */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .my-subjects-title {
    color: var(--text-primary) !important;
}

/* Accent gold for special headline moments */
html[data-theme="dark"] .page-title-gold,
html[data-theme="dark"] .premium-gradient-text,
html[data-theme="dark"] .app-hero-title {
    color: var(--gold) !important;
}

html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .app-subhead,
html[data-theme="dark"] p,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .exam-meta,
html[data-theme="dark"] .feature-list li span {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small:not(.special),
html[data-theme="dark"] .helper-text {
    color: var(--text-muted) !important;
}


/* ════════════════════════════════════════
   CARDS
════════════════════════════════════════ */

html[data-theme="dark"] .action-card,
html[data-theme="dark"] .progress-header,
html[data-theme="dark"] .exam-card,
html[data-theme="dark"] .subject-card,
html[data-theme="dark"] .learn-card,
html[data-theme="dark"] .quiz-panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .exam-selector,
html[data-theme="dark"] .my-subjects-section,
html[data-theme="dark"] .saved-card,
html[data-theme="dark"] .streak-display,
html[data-theme="dark"] .premium-prompt-content,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .plan-selector,
html[data-theme="dark"] .selected-plan-details,
html[data-theme="dark"] .verification-box,
html[data-theme="dark"] .container {
    background:    var(--bg-card) !important;
    border:        1px solid var(--border-card) !important;
    border-radius: 20px !important;
    box-shadow:    0 4px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Card hover — lifts with indigo border accent */
html[data-theme="dark"] .action-card:hover,
html[data-theme="dark"] .exam-card:hover,
html[data-theme="dark"] .subject-card:hover,
html[data-theme="dark"] .learn-card:hover {
    background:    var(--bg-card-hover) !important;
    border-color:  var(--indigo) !important;
    transform:     translateY(-4px);
    box-shadow:    0 12px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Card icons */
html[data-theme="dark"] .card-icon {
    background:    var(--bg-page) !important;
    border-radius: 14px !important;
}

html[data-theme="dark"] .card-icon i,
html[data-theme="dark"] .exam-card i,
html[data-theme="dark"] .subject-card .subject-icon i {
    color:     var(--indigo-light) !important;
    font-size: 24px;
}


/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */

/* Primary — indigo gradient, white text */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .buy-subject-btn,
html[data-theme="dark"] .pulse-button,
html[data-theme="dark"] .apply-coupon-btn,
html[data-theme="dark"] button[class*="primary"],
html[data-theme="dark"] .login-btn-header {
    background:  linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color:       #ffffff !important;
    font-weight: 700 !important;
    border:      none !important;
    box-shadow:  0 4px 16px rgba(99, 102, 241, 0.35) !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .buy-subject-btn:hover {
    filter:    brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45) !important;
}

/* Secondary — subtle dark */
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .back-btn,
html[data-theme="dark"] .home-btn,
html[data-theme="dark"] .reset-link,
html[data-theme="dark"] .btn-google {
    background:   var(--bg-input) !important;
    border:       1px solid var(--border-card) !important;
    color:        var(--text-secondary) !important;
    font-weight:  500 !important;
}

html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .back-btn:hover,
html[data-theme="dark"] .home-btn:hover {
    background:   var(--bg-card-hover) !important;
    border-color: var(--indigo) !important;
    color:        var(--indigo-light) !important;
}

/* Premium / Gold CTA */
html[data-theme="dark"] .btn-gold,
html[data-theme="dark"] .premium-cta-btn {
    background:  linear-gradient(135deg, #f59e0b, #d97706) !important;
    color:       #1a0a00 !important;
    font-weight: 700 !important;
    box-shadow:  0 4px 14px rgba(245, 158, 11, 0.35) !important;
}


/* ════════════════════════════════════════
   QUIZ OPTIONS
════════════════════════════════════════ */

html[data-theme="dark"] .options button,
html[data-theme="dark"] .option-btn,
html[data-theme="dark"] .option-wrapper .option-label,
html[data-theme="dark"] .option-label {
    background:    var(--bg-input) !important;
    border:        1.5px solid var(--border-card) !important;
    color:         var(--text-primary) !important;
    border-radius: 12px !important;
    padding:       12px 16px !important;
    transition:    border-color 0.15s, background 0.15s !important;
}

html[data-theme="dark"] .options button:hover,
html[data-theme="dark"] .option-btn:hover,
html[data-theme="dark"] .option-label:hover:not(.disabled-option) {
    background:   var(--bg-elevated) !important;
    border-color: var(--indigo) !important;
}

/* Selected (before reveal) */
html[data-theme="dark"] .options button.selected,
html[data-theme="dark"] .option-btn.selected,
html[data-theme="dark"] .option-label.selected-option {
    background:   rgba(99, 102, 241, 0.1) !important;
    border-color: var(--indigo) !important;
    color:        var(--indigo-light) !important;
}

/* Correct answer */
html[data-theme="dark"] .options button.correct,
html[data-theme="dark"] .option-btn.correct-option,
html[data-theme="dark"] .option-label.correct-option {
    background:   var(--success-bg) !important;
    border-color: var(--success) !important;
    color:        #6ee7b7 !important;
}

/* Wrong answer */
html[data-theme="dark"] .options button.incorrect,
html[data-theme="dark"] .option-btn.wrong-option,
html[data-theme="dark"] .option-label.wrong-option {
    background:   var(--danger-bg) !important;
    border-color: var(--danger) !important;
    color:        #fda4af !important;
}

/* Option prefix letters (A B C D) */
html[data-theme="dark"] .option-prefix {
    background: rgba(255, 255, 255, 0.07) !important;
    color:      var(--text-secondary) !important;
    border:     1px solid var(--border-subtle) !important;
}

html[data-theme="dark"] .selected .option-prefix,
html[data-theme="dark"] .selected-option .option-prefix {
    background: var(--indigo) !important;
    color:      #fff !important;
    border:     none !important;
}

html[data-theme="dark"] .correct .option-prefix,
html[data-theme="dark"] .correct-option .option-prefix {
    background: var(--success) !important;
    color:      #fff !important;
    border:     none !important;
}

html[data-theme="dark"] .incorrect .option-prefix,
html[data-theme="dark"] .wrong-option .option-prefix {
    background: var(--danger) !important;
    color:      #fff !important;
    border:     none !important;
}


/* ════════════════════════════════════════
   FORMS & INPUTS
════════════════════════════════════════ */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .plan-dropdown,
html[data-theme="dark"] .input-field {
    background:    var(--bg-input) !important;
    color:         var(--text-primary) !important;
    border:        1.5px solid var(--border-card) !important;
    border-radius: 12px !important;
    padding:       12px 16px !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--indigo) !important;
    outline:      none;
    box-shadow:   0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}


/* ════════════════════════════════════════
   LINKS & NAVIGATION
════════════════════════════════════════ */

html[data-theme="dark"] a,
html[data-theme="dark"] .links-row a {
    color: var(--indigo-light) !important;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] .links-row a:hover {
    color: #c7d2fe !important;
}

html[data-theme="dark"] .nav-item i,
html[data-theme="dark"] .bottom-nav .nav-item i {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .nav-item.active i,
html[data-theme="dark"] .bottom-nav .nav-item.active i {
    color: var(--indigo-light) !important;
}

html[data-theme="dark"] .nav-item:hover i {
    color: var(--text-secondary) !important;
}


/* ════════════════════════════════════════
   PREMIUM & GOLD ELEMENTS
════════════════════════════════════════ */

html[data-theme="dark"] .premium-pill,
html[data-theme="dark"] .crown-icon,
html[data-theme="dark"] .premium-status-indicator,
html[data-theme="dark"] .premium-attraction-card h3 {
    color: var(--gold) !important;
}

html[data-theme="dark"] .streak-display,
html[data-theme="dark"] .fire-icon,
html[data-theme="dark"] .streak-count {
    color: var(--gold) !important;
}

html[data-theme="dark"] .premium-prompt-content,
html[data-theme="dark"] .premium-attraction-card {
    background: linear-gradient(135deg, #1a1040 0%, #111827 60%) !important;
    border:      1px solid rgba(99, 102, 241, 0.3) !important;
}


/* ════════════════════════════════════════
   PROGRESS BARS & XP
════════════════════════════════════════ */

html[data-theme="dark"] .progress-bar-container,
html[data-theme="dark"] .xp-bar {
    background:    rgba(255, 255, 255, 0.06) !important;
    border-radius: 999px !important;
}

html[data-theme="dark"] .progress-fill,
html[data-theme="dark"] .xp-progress {
    background:    linear-gradient(90deg, var(--indigo), var(--gold)) !important;
    border-radius: 999px !important;
}

html[data-theme="dark"] .stat-badge {
    background: var(--bg-elevated) !important;
    border:     1px solid var(--border-card) !important;
    color:      var(--text-primary) !important;
}

html[data-theme="dark"] .timer-section {
    background: var(--warning-bg) !important;
    border:     1px solid rgba(245, 158, 11, 0.2) !important;
    color:      var(--gold) !important;
}


/* ════════════════════════════════════════
   RESULT & EXPLANATION MESSAGES
════════════════════════════════════════ */

html[data-theme="dark"] .result.correct {
    background:   var(--success-bg) !important;
    color:        #6ee7b7 !important;
    border-left:  4px solid var(--success) !important;
    border-radius: 0 12px 12px 0 !important;
}

html[data-theme="dark"] .result.incorrect {
    background:   var(--danger-bg) !important;
    color:        #fda4af !important;
    border-left:  4px solid var(--danger) !important;
    border-radius: 0 12px 12px 0 !important;
}

html[data-theme="dark"] .explanation-text {
    background:   var(--bg-input) !important;
    border-left:  4px solid var(--indigo) !important;
    border-radius: 0 12px 12px 0 !important;
    color:        var(--text-secondary) !important;
}


/* ════════════════════════════════════════
   QUESTION OF THE DAY
════════════════════════════════════════ */

html[data-theme="dark"] .header-gradient {
    background: linear-gradient(135deg, #1e1b4b, #312e81) !important;
}

html[data-theme="dark"] .question {
    background:        var(--bg-input) !important;
    color:             var(--text-primary) !important;
    border-left-color: var(--indigo) !important;
}

html[data-theme="dark"] .progress-container {
    background: var(--bg-input) !important;
}

html[data-theme="dark"] .progress-dot {
    background:   var(--bg-card) !important;
    color:        var(--text-secondary) !important;
    border-color: var(--border-card) !important;
}

html[data-theme="dark"] .progress-dot.answered.correct {
    background: var(--success) !important;
    color:      #f0fdf4 !important;
}

html[data-theme="dark"] .progress-dot.answered.incorrect {
    background: var(--danger) !important;
    color:      #fff1f2 !important;
}

html[data-theme="dark"] .progress-dot.current {
    border-color: var(--indigo) !important;
    background:   rgba(99, 102, 241, 0.12) !important;
    color:        var(--indigo-light) !important;
}

html[data-theme="dark"] .date-display,
html[data-theme="dark"] .icon-container {
    background: var(--bg-input) !important;
    color:      var(--text-secondary) !important;
}

html[data-theme="dark"] #completionMessage {
    background: var(--bg-card) !important;
    color:      var(--text-primary) !important;
}

html[data-theme="dark"] #completionMessage h2,
html[data-theme="dark"] #completionMessage p {
    color: var(--text-primary) !important;
}


/* ════════════════════════════════════════
   SLIDE MENU
════════════════════════════════════════ */

html[data-theme="dark"] .slide-menu {
    background: var(--bg-elevated) !important;
    border:     1px solid var(--border-card) !important;
}

html[data-theme="dark"] .slide-menu button {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .slide-menu button:hover {
    background: var(--bg-card-hover) !important;
    color:      var(--indigo-light) !important;
}


/* ════════════════════════════════════════
   BADGES & TAGS
════════════════════════════════════════ */

html[data-theme="dark"] .card-badge {
    background: rgba(99, 102, 241, 0.12) !important;
    color:      var(--indigo-light) !important;
    border:     1px solid rgba(99, 102, 241, 0.2) !important;
}

html[data-theme="dark"] .discount-badge,
html[data-theme="dark"] .limited-badge {
    background: var(--warning-bg) !important;
    color:      var(--gold) !important;
    border:     1px solid rgba(245, 158, 11, 0.25) !important;
}


/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */

html[data-theme="dark"] footer {
    background:  var(--bg-card) !important;
    border-top:  1px solid var(--border-card) !important;
    color:       var(--text-secondary) !important;
}

html[data-theme="dark"] footer a {
    color: var(--indigo-light) !important;
}


/* ════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════ */

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background:    var(--bg-page);
    border-radius: 999px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background:    rgba(99, 102, 241, 0.4);
    border-radius: 999px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--indigo);
}