/* =========================================================================
   EDUVAL — DARK MODE
   Re-maps the semantic CSS variables when [data-theme="dark"] is on <html>.
   Brand colors stay the same; only surfaces/text flip. Navy-tinted (not flat
   black) so the platform keeps its identity in the dark.
   !important is permitted here per spec (dark-mode overrides only).
   ========================================================================= */

[data-theme="dark"] {
    --eduval-bg:         #0f1729; /* navy-tinted base, not flat black */
    --eduval-bg-alt:     #131c30;
    --eduval-surface:    #16203a;
    --eduval-surface-2:  #1e2a47;
    --eduval-text:       #e7ecf3;
    --eduval-text-muted: #9aa6b8;
    --eduval-border:     #28344f;
    --eduval-heading:    #f0f4fb;
    --eduval-link:       var(--eduval-accent);
    --eduval-link-hover: #ffffff;

    --eduval-shadow:      0 6px 24px rgba(0, 0, 0, 0.45);
    --eduval-shadow-lift: 0 14px 38px rgba(0, 0, 0, 0.55);
}

/* Whole-page background in dark mode (covers every template consistently) */
[data-theme="dark"] body {
    background:
        radial-gradient(1100px 600px at 85% -10%, rgba(var(--eduval-secondary-rgb), .10), transparent 60%),
        var(--eduval-bg) !important;
}

/* Headings stay light in dark mode rather than navy */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--eduval-heading) !important;
}

[data-theme="dark"] .eduval-logo__text { color: var(--eduval-accent) !important; }
[data-theme="dark"] .eduval-card__title a { color: var(--eduval-heading) !important; }

/* Prices use --eduval-primary (navy), which is near-invisible on the dark
   surface. Switch to the accent — same rule as the dark-mode hover contrast
   fix. Free/owned prices already use --eduval-success and read fine. */
[data-theme="dark"] .eduval-card__price,
[data-theme="dark"] .eduval-price-card__amount { color: var(--eduval-accent) !important; }
[data-theme="dark"] .eduval-hero {
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(var(--eduval-secondary-rgb), .18), transparent 60%),
        linear-gradient(135deg, rgba(var(--eduval-primary-rgb), .25), rgba(var(--eduval-secondary-rgb), .08)) !important;
}

/* Footer is always navy; in dark mode push it a touch deeper */
[data-theme="dark"] .eduval-footer { background: #0b1430 !important; }

/* ---- Logo dark/light swap ----
   The actual show/hide rules live in main.css (scoped to .eduval-logo so they
   beat the generic image rule). Light mode shows logo.png; dark mode shows
   logo-dark.png. The footer always uses the white logo (handled in markup). */

/* ---- Tutor content player (lesson + quiz) dark-mode safety net ----
   Tutor's markup hardcodes light-theme colors (.tutor-color-black →
   var(--tutor-body-color), dark text; white card/table backgrounds), which are
   invisible on our dark surface. Scoped to .eduval-player-page so ONLY the
   themed lesson/quiz shell is affected (never Tutor modals-on-white elsewhere).
   Remapping the variable catches every Tutor sub-template at once; the surface
   flips stop light text landing on a white card. */
[data-theme="dark"] .eduval-player-page {
    --tutor-body-color: var(--eduval-text);
}
[data-theme="dark"] .eduval-player-page .tutor-color-black { color: var(--eduval-text) !important; }
[data-theme="dark"] .eduval-player-page .tutor-color-secondary { color: var(--eduval-text-muted) !important; }
[data-theme="dark"] .eduval-player-page .tutor-bg-white,
[data-theme="dark"] .eduval-player-page .tutor-table,
[data-theme="dark"] .eduval-player-page .tutor-table-quiz-attempts,
[data-theme="dark"] .eduval-player-page [class*="tutor-card"] {
    background-color: var(--eduval-surface) !important;
    color: var(--eduval-text) !important;
    border-color: var(--eduval-border) !important;
}
[data-theme="dark"] .eduval-player-page .tutor-table th,
[data-theme="dark"] .eduval-player-page .tutor-table td,
[data-theme="dark"] .eduval-player-page .tutor-table-quiz-attempts th,
[data-theme="dark"] .eduval-player-page .tutor-table-quiz-attempts td {
    background-color: transparent !important; color: var(--eduval-text) !important;
    border-color: var(--eduval-border) !important;
}

/* ---- Ghost buttons in dark mode ----
   .eduval-btn--ghost uses the brand navy (--eduval-primary) for its text/border
   on a transparent background — which is nearly invisible against the dark navy
   page. Give it light text + a visible border, and a brand fill on hover.
   Covers the cart's Continue Browsing / Apply coupon / Update cart buttons. */
[data-theme="dark"] .eduval-btn--ghost {
    color: var(--eduval-text) !important;
    border-color: var(--eduval-border) !important;
    background: transparent !important;
}
[data-theme="dark"] .eduval-btn--ghost:hover {
    background: var(--eduval-secondary) !important;
    border-color: var(--eduval-secondary) !important;
    color: #fff !important;
}
/* The dashboard banner button sits ON a coloured gradient, so it must stay a
   clean frosted-white pill with NO border — override the generic ghost rule
   above (which otherwise gave it a dark border line in dark mode). */
[data-theme="dark"] .eduval-dash-banner .eduval-btn--ghost {
    background: rgba(255,255,255,.16) !important;
    border-color: transparent !important;
    color: #fff !important;
}
[data-theme="dark"] .eduval-dash-banner .eduval-btn--ghost:hover {
    background: #fff !important; color: var(--eduval-primary) !important; border-color: transparent !important;
}

/* Cart/checkout inputs + coupon field: readable surfaces in dark mode */
[data-theme="dark"] .eduval-cart input.input-text,
[data-theme="dark"] .eduval-cart input#coupon_code,
[data-theme="dark"] .eduval-checkout input.input-text,
[data-theme="dark"] .eduval-checkout textarea,
[data-theme="dark"] .eduval-checkout select {
    background: var(--eduval-surface) !important;
    color: var(--eduval-text) !important;
    border-color: var(--eduval-border) !important;
}
[data-theme="dark"] .eduval-cart input#coupon_code::placeholder { color: var(--eduval-text-muted); }

/* Cart totals + checkout order cards: proper dark surfaces */
[data-theme="dark"] .eduval-cart__collaterals .cart_totals,
[data-theme="dark"] .eduval-checkout__order {
    background: var(--eduval-surface) !important;
    border-color: var(--eduval-border) !important;
}

/* ---- Dark mode: fix low-contrast hover / active text theme-wide ----
   Many interactive elements set color:var(--eduval-primary) (deep navy #1a2b5c)
   on hover/active over a dark surface — nearly invisible in dark mode. Swap that
   navy foreground for the bright accent (cyan #2ec4e6) so hovered/active text
   stays clearly readable everywhere. Backgrounds are unchanged. */
[data-theme="dark"] .eduval-account__menu a:hover,
[data-theme="dark"] .eduval-tab:hover,
[data-theme="dark"] .eduval-tab.is-active,
[data-theme="dark"] .eduval-megamenu__item:hover,
[data-theme="dark"] .eduval-breadcrumb a:hover,
[data-theme="dark"] .eduval-dash-nav__link:hover,
[data-theme="dark"] .eduval-drawer__list a:hover,
[data-theme="dark"] .tutor-dashboard .tutor-dashboard-permalinks ul li a:hover,
[data-theme="dark"] .tutor-dashboard .tutor-dashboard-permalinks ul li.active a,
[data-theme="dark"] .eduval-tutor-dash-wrap .tutor-dashboard-permalinks ul li a:hover,
[data-theme="dark"] .eduval-tutor-dash-wrap .tutor-dashboard-permalinks ul li.active a,
[data-theme="dark"] .eduval-player-sidebar__close:hover,
[data-theme="dark"] .eduval-player-topic__head.is-active,
[data-theme="dark"] .eduval-player-topic__head.is-active .eduval-player-topic__chevron,
[data-theme="dark"] .eduval-player-item.is-active,
[data-theme="dark"] .eduval-player-item.is-active .eduval-player-item__icon,
[data-theme="dark"] .eduval-player-item:hover .eduval-player-item__icon,
[data-theme="dark"] .eduval-tutor-lesson .tutor-nav-link.is-active,
[data-theme="dark"] .eduval-tutor-lesson .tutor-nav-item a.active,
[data-theme="dark"] .eduval-tutor-lesson .tutor-course-spotlight-nav .tutor-nav-link.is-active,
[data-theme="dark"] .eduval-player-stage .tutor-nav-link.is-active,
[data-theme="dark"] .eduval-quiz-stage .tutor-btn-ghost:hover,
[data-theme="dark"] .eduval-quiz-stage .skip-quiz-btn:hover,
[data-theme="dark"] .eduval-player-stage .tutor-btn-secondary:hover,
[data-theme="dark"] .eduval-player-stage .tutor-btn-tertiary:hover,
[data-theme="dark"] .eduval-player-stage .tutor-single-course-content-prev .tutor-btn:hover {
    color: var(--eduval-accent) !important;
}
/* Where the same states also colored their border/accent-bar navy, brighten it. */
[data-theme="dark"] .eduval-player-stage .tutor-btn-tertiary:hover,
[data-theme="dark"] .eduval-player-stage .tutor-single-course-content-prev .tutor-btn:hover {
    border-color: var(--eduval-accent) !important;
}
/* The Next (filled) button keeps WHITE text on hover — its hover background is
   cyan, so accent-cyan text would wash out (cyan-on-cyan). This overrides the
   generic .tutor-btn-secondary:hover accent above for the Next button only. */
[data-theme="dark"] .eduval-player-stage .tutor-single-course-content-next .tutor-btn:hover {
    color: #fff !important;
}
[data-theme="dark"] .eduval-player-item.is-active {
    box-shadow: inset 3px 0 0 var(--eduval-secondary) !important;
}

/* Safety net: any solid brand-filled button keeps WHITE text on hover in dark
   mode (never let the label take the background colour). */
[data-theme="dark"] .eduval-btn:hover,
[data-theme="dark"] .eduval-btn--secondary:hover,
[data-theme="dark"] .eduval-btn--success:hover {
    color: #fff !important;
}

/* Smooth global transition between modes */
html, body,
.eduval-header, .eduval-card, .eduval-feature, .eduval-uni,
.eduval-filters, .eduval-pricecard, .eduval-auth__card,
.eduval-icon-btn, .eduval-account__btn, .eduval-tab {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Contact block on the legal pages: the underlined links must use the cyan
   accent, never the navy primary, which is invisible on the dark surface. */
[data-theme="dark"] .eduval-contact-block a,
[data-theme="dark"] .eduval-about__contact a { color: var(--eduval-accent); }