/*
 * Vantage Academy shared light/dark bridge.
 *
 * Contract:
 *   html[data-va-theme="light"] / html[data-va-theme="dark"]
 *   localStorage is owned by the child-theme switch (vantage-theme).
 *
 * New frontend UI should use the semantic --iee-theme-* variables below
 * instead of hard-coded light/dark colours.
 */

:root,
html[data-va-theme="light"] {
  --iee-theme-page: #f7f8fb;
  --iee-theme-surface: #ffffff;
  --iee-theme-surface-2: #f5f0e6;
  --iee-theme-surface-3: #faf8f3;
  --iee-theme-text: #162331;
  --iee-theme-heading: #112338;
  --iee-theme-muted: #526071;
  --iee-theme-border: #d8cbb1;
  --iee-theme-border-soft: #e6e0d5;
  --iee-theme-accent: #c9a961;
  --iee-theme-accent-strong: #8a671f;
  --iee-theme-button: #112338;
  --iee-theme-button-text: #ffffff;
  --iee-theme-input: #ffffff;
  --iee-theme-shadow: rgba(17, 35, 56, 0.10);
  --iee-theme-overlay: rgba(17, 24, 39, 0.56);
  --iee-theme-ok: #ecfdf3;
  --iee-theme-ok-border: #bbf7d0;
  --iee-theme-bad: #fef2f2;
  --iee-theme-bad-border: #fecaca;
  color-scheme: light;
}

html[data-va-theme="dark"] {
  --iee-theme-page: #08090b;
  --iee-theme-surface: #15171a;
  --iee-theme-surface-2: #1b1e22;
  --iee-theme-surface-3: #202328;
  --iee-theme-text: #f5f2eb;
  --iee-theme-heading: #ffffff;
  --iee-theme-muted: #c7c5bf;
  --iee-theme-border: #514a3c;
  --iee-theme-border-soft: #34363a;
  --iee-theme-accent: #c9a961;
  --iee-theme-accent-strong: #d6b974;
  --iee-theme-button: #c9a961;
  --iee-theme-button-text: #111111;
  --iee-theme-input: #0e0f11;
  --iee-theme-shadow: rgba(0, 0, 0, 0.28);
  --iee-theme-overlay: rgba(0, 0, 0, 0.72);
  --iee-theme-ok: #10251a;
  --iee-theme-ok-border: #246b45;
  --iee-theme-bad: #2b1517;
  --iee-theme-bad-border: #7f3439;
  color-scheme: dark;
}

html[data-va-theme] body {
  background: var(--iee-theme-page);
  color: var(--iee-theme-text);
}

/* Optional primitives for future Vantage pages. */
.va-theme-page { background: var(--iee-theme-page); color: var(--iee-theme-text); }
.va-theme-card { background: var(--iee-theme-surface); color: var(--iee-theme-text); border-color: var(--iee-theme-border); }
.va-theme-muted { color: var(--iee-theme-muted); }
.va-theme-input { background: var(--iee-theme-input); color: var(--iee-theme-text); border-color: var(--iee-theme-border); }

/* =========================================================
   Student dashboard
   ========================================================= */
html .iee-student-dashboard {
  --iee-bg: var(--iee-theme-page);
  --iee-panel: var(--iee-theme-surface);
  --iee-panel-2: var(--iee-theme-surface-2);
  --iee-border: var(--iee-theme-border);
  --iee-text: var(--iee-theme-text);
  --iee-muted: var(--iee-theme-muted);
  --iee-gold: var(--iee-theme-accent);
  background: var(--iee-theme-page);
  color: var(--iee-theme-text);
}
html .iee-dashboard-sidebar { background: var(--iee-theme-surface-2); }
html .iee-dashboard-sidebar nav > a:hover,
html .iee-dashboard-sidebar nav > a.is-active { background: var(--iee-theme-surface-3); color: var(--iee-theme-accent-strong); }
html .iee-dashboard-goals select,
html .iee-dashboard-goals input,
html .iee-history-filter select,
html .iee-trajectory select {
  background: var(--iee-theme-input);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
  color-scheme: inherit;
}
html .iee-dashboard-action,
html .iee-panel,
html .iee-module-card { box-shadow: 0 8px 22px var(--iee-theme-shadow); }
html .iee-module-icon { border-color: var(--iee-theme-border); }
html .iee-button--gold { background: var(--iee-theme-accent); color: #111111; }
html .iee-button:hover,
html .iee-result-toggle:hover { background: var(--iee-theme-accent-strong); color: #111111; }

/* =========================================================
   Exercise / homework / Cambridge listing hubs
   ========================================================= */
html .iee-exercise-hub,
html .iee-module-hub { color: var(--iee-theme-text); }
html .iee-exercise-title,
html .iee-module-title,
html .iee-exercise-card-title,
html .iee-module-card-title,
html .iee-module-filter-title { color: var(--iee-theme-heading); }
html .iee-exercise-subtitle,
html .iee-module-subtitle,
html .iee-exercise-card-desc,
html .iee-module-card-desc { color: var(--iee-theme-muted); }
html .iee-exercise-kicker,
html .iee-module-kicker {
  background: var(--iee-theme-surface-2);
  color: var(--iee-theme-accent-strong);
}
html .iee-module-tab,
html .iee-level-tabs,
html .iee-exercise-card,
html .iee-module-filter-bar,
html .iee-module-card {
  background: var(--iee-theme-surface);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
  box-shadow: 0 10px 28px var(--iee-theme-shadow);
}
html .iee-module-tab:hover,
html .iee-level-tab:hover {
  background: var(--iee-theme-surface-2);
  border-color: var(--iee-theme-border);
  color: var(--iee-theme-heading);
}
html .iee-module-tab.is-active,
html .iee-level-tab.is-active {
  background: var(--iee-theme-button);
  border-color: var(--iee-theme-button);
  color: var(--iee-theme-button-text);
}
html .iee-module-tab-count,
html .iee-card-time {
  background: var(--iee-theme-surface-2);
  color: var(--iee-theme-muted);
}
html .iee-exercise-card:hover,
html .iee-module-card:hover { border-color: var(--iee-theme-accent); box-shadow: 0 18px 40px var(--iee-theme-shadow); }
html .iee-exercise-start-btn,
html .iee-module-start-btn {
  background: var(--iee-theme-button);
  color: var(--iee-theme-button-text) !important;
}
html .iee-exercise-start-btn:hover,
html .iee-module-start-btn:hover {
  background: var(--iee-theme-accent-strong);
  color: #111111 !important;
}
html .iee-exercise-empty,
html .iee-module-empty {
  background: var(--iee-theme-surface-2);
  color: var(--iee-theme-muted);
  border-color: var(--iee-theme-border);
}

/* =========================================================
   Reading + Listening tests
   ========================================================= */
html #ielts-full-reading-test {
  --bg: var(--iee-theme-surface-2);
  --card: var(--iee-theme-surface);
  --border: var(--iee-theme-border);
  --text: var(--iee-theme-text);
  --muted: var(--iee-theme-muted);
  --accent: var(--iee-theme-accent-strong);
  --soft-ok: var(--iee-theme-ok);
  --soft-bad: var(--iee-theme-bad);
  color: var(--iee-theme-text);
}
html #ielts-full-reading-test .test-header,
html #ielts-full-reading-test .section,
html #ielts-full-reading-test .passage-box,
html #ielts-full-reading-test .question-box,
html #ielts-full-reading-test .q-item,
html #ielts-full-reading-test .modal-card,
html #ielts-full-reading-test .ielts-page-nav,
html #ielts-full-reading-test .iee-radio-item,
html #ielts-full-reading-test .iee-flow-node,
html #ielts-full-reading-test .iee-checklist-item,
html #ielts-full-reading-test .iee-dnd-token,
html #ielts-full-reading-test .iee-dnd-drop,
html #ielts-full-reading-test .iee-highlight-toolbar,
html .iee-reading-test .iee-highlight-toolbar,
html .iee-listening-test .iee-highlight-toolbar,
html #ielts-full-reading-test .iee-highlight-popover,
html #ielts-full-reading-test .iee-note-popover,
html .iee-reading-test .iee-highlight-popover,
html .iee-reading-test .iee-note-popover,
html .iee-listening-test .iee-highlight-popover,
html .iee-listening-test .iee-note-popover {
  background: var(--iee-theme-surface);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
}
html #ielts-full-reading-test .section-head,
html #ielts-full-reading-test .box-head,
html #ielts-full-reading-test .iee-completion-table th,
html #ielts-full-reading-test .iee-option-bank,
html #ielts-full-reading-test .iee-dnd-bank {
  background: var(--iee-theme-surface-2);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
}
html #ielts-full-reading-test input[type="text"],
html #ielts-full-reading-test select,
html #ielts-full-reading-test textarea,
html .iee-reading-test .iee-note-popover textarea,
html .iee-listening-test .iee-note-popover textarea {
  background: var(--iee-theme-input);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
}
html #ielts-full-reading-test .ielts-gap-input { color: var(--iee-theme-text); border-bottom-color: var(--iee-theme-text) !important; }
html #ielts-full-reading-test .q-group { border-bottom-color: var(--iee-theme-border-soft); }
html #ielts-full-reading-test .review-row.correct { background: var(--iee-theme-ok); border-color: var(--iee-theme-ok-border); }
html #ielts-full-reading-test .review-row.incorrect { background: var(--iee-theme-bad); border-color: var(--iee-theme-bad-border); }
html #ielts-start-overlay { background: color-mix(in srgb, var(--iee-theme-page) 78%, transparent); }
html #ielts-start-card {
  background: var(--iee-theme-surface);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
}
html #ielts-start-card p { color: var(--iee-theme-muted); }
html #ielts-start-btn,
html #ielts-full-reading-test .primary-btn,
html #ielts-full-reading-test button#submitFullTest,
html #ielts-full-reading-test .ielts-page-nav .page-num.active {
  background: var(--iee-theme-accent-strong);
  border-color: var(--iee-theme-accent-strong);
  color: #ffffff;
}
html #ielts-full-reading-test button:not(.primary-btn):not(#submitFullTest):not(#ielts-start-btn):not(#pagePrev):not(#pageNext):not(.page-num),
html #ielts-full-reading-test .ielts-page-nav .page-num:not(.active),
html #ielts-full-reading-test .iee-highlight-toggle,
html .iee-reading-test .iee-highlight-toggle,
html .iee-listening-test .iee-highlight-toggle,
html .iee-reading-test .iee-highlight-popover button,
html .iee-reading-test .iee-note-popover button,
html .iee-listening-test .iee-highlight-popover button,
html .iee-listening-test .iee-note-popover button {
  background: var(--iee-theme-surface-2);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
}
html #ielts-full-reading-test .iee-boxmatch-options-box,
html .inline-gap-template th,
html .inline-gap-template td { border-color: var(--iee-theme-border); }

/* =========================================================
   Writing tests
   ========================================================= */
html .iee-writing-test { color: var(--iee-theme-text); }
html .iee-writing-topbar,
html .iee-writing-tab,
html .iee-writing-question-panel,
html .iee-writing-editor-panel,
html .iee-writing-textarea,
html .iee-writing-result-box {
  background: var(--iee-theme-surface);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
}
html .iee-writing-tab:hover,
html .iee-writing-instruction,
html .iee-writing-task-image,
html .iee-writing-word-count,
html .iee-writing-result-table th {
  background: var(--iee-theme-surface-2);
  color: var(--iee-theme-text);
  border-color: var(--iee-theme-border);
}
html .iee-writing-tab.is-active,
html .iee-writing-next-button,
html .iee-writing-submit-button,
html .iee-writing-close-result {
  background: var(--iee-theme-button);
  border-color: var(--iee-theme-button);
  color: var(--iee-theme-button-text);
}
html .iee-writing-test-title,
html .iee-writing-heading,
html .iee-writing-question-text,
html .iee-writing-editor-header h3,
html .iee-writing-word-count,
html .iee-writing-result-box h3,
html .iee-writing-result-table th,
html .iee-writing-result-table td { color: var(--iee-theme-heading); }
html .iee-writing-kicker,
html .iee-writing-editor-header p,
html .iee-writing-word-status,
html .iee-writing-result-box p { color: var(--iee-theme-muted); }
html .iee-writing-textarea:focus {
  border-color: var(--iee-theme-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--iee-theme-accent) 20%, transparent);
}
html .iee-writing-result { background: var(--iee-theme-overlay); }
html .iee-writing-result-table th,
html .iee-writing-result-table td { border-color: var(--iee-theme-border); }

@media (prefers-reduced-motion: no-preference) {
  html[data-va-theme] body,
  html[data-va-theme] .iee-student-dashboard,
  html[data-va-theme] .iee-exercise-card,
  html[data-va-theme] .iee-module-card,
  html[data-va-theme] #ielts-full-reading-test .section,
  html[data-va-theme] .iee-writing-question-panel,
  html[data-va-theme] .iee-writing-editor-panel {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
}

/* Keep the shared .iee-module-card class from leaking listing hover styling into the dashboard. */
html .iee-student-dashboard .iee-module-card:hover {
  border-color: var(--iee-theme-border);
  box-shadow: 0 8px 22px var(--iee-theme-shadow);
}