/**
 * Dark mode for student-facing pages.
 *
 * Switched on by the "Dark Mode" button (a11y module, invert plugin), which
 * puts the a11y-dark class on <html>. The server adds the class for
 * logged-in users so pages arrive dark. Every rule is scoped to
 * html.a11y-dark, so the light theme is untouched. Brand maroon (#880014)
 * bars and buttons keep their real colors.
 */

html.a11y-dark {
  color-scheme: dark;

  --dk-bg: #121417;         /* page background */
  --dk-surface: #1c1f24;    /* content box, cards, dialogs */
  --dk-surface-2: #262a31;  /* inputs, table headers, details, code */
  --dk-surface-3: #30353d;  /* hover, zebra rows */
  --dk-border: #4b525d;
  --dk-text: #e4e6ea;
  --dk-muted: #a7aeb9;
  --dk-heading: #f3f4f6;
  --dk-link: #7db7ff;
  --dk-link-hover: #a9cfff;
  --dk-brand: #880014;
  --dk-brand-text: #f7f7f7;

  /* Solo's table colors. */
  --solo-thead: var(--dk-surface-2);
  --solo-odd: var(--dk-surface);
  --solo-even: #22262c;
}

html.a11y-dark body {
  background-color: var(--dk-bg);
  color: var(--dk-text);
}

/* Page background: keep the maroon stripe and a hint of the gold header,
   fading to the dark background. */
html.a11y-dark .page-wrapper {
  --main-bg-color: #3b3115;
  --second-bg-color: var(--dk-bg);
  --r-tx: var(--dk-text);
  background-color: var(--dk-bg);
}

/* Solo sets region colors inline (style="--r-bg:..."); override the light
   ones. Maroon regions (menus) are left alone. */
html.a11y-dark [style*="--r-bg:#f7f7f7"],
html.a11y-dark .main-box-inner {
  --r-bg: var(--dk-surface) !important;
  --r-tx: var(--dk-text) !important;
  background-color: var(--dk-surface) !important;
  color: var(--dk-text);
}
html.a11y-dark #main-container {
  --r-br: var(--dk-border) !important;
  border-color: var(--dk-border);
}

/* ---------- Text and links (main content only, not the brand bars) ---- */

html.a11y-dark #main-container :is(h1, h2, h3, h4, h5, h6),
html.a11y-dark #main-container .page-title {
  color: var(--dk-heading);
}
html.a11y-dark #main-container a:not(.button):not(.solo-button) {
  color: var(--dk-link);
}
html.a11y-dark #main-container a:not(.button):not(.solo-button):hover,
html.a11y-dark #main-container a:not(.button):not(.solo-button):focus {
  color: var(--dk-link-hover);
}
html.a11y-dark #main-container :is(.description, small, figcaption, .form-item__description, .breadcrumb) {
  color: var(--dk-muted);
}
html.a11y-dark hr {
  border-color: var(--dk-border);
}
html.a11y-dark :is(code, pre, kbd, samp) {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
}
html.a11y-dark blockquote {
  border-color: var(--dk-border);
  color: var(--dk-muted);
}

/* ---------- Tables ---------- */

html.a11y-dark #main-container :is(table, th, td, thead, tbody, tr) {
  border-color: var(--dk-border) !important;
}
html.a11y-dark #main-container th,
html.a11y-dark #main-container thead td {
  background-color: var(--dk-surface-2);
  color: var(--dk-heading);
}
html.a11y-dark #main-container td {
  color: var(--dk-text);
}

/* ---------- Details, fieldsets, boxes ---------- */

html.a11y-dark details.form-wrapper {
  border-bottom-color: var(--dk-border) !important;
}
html.a11y-dark details.form-wrapper[open] {
  border-color: var(--dk-border) !important;
}
html.a11y-dark #main-container fieldset {
  border-color: var(--dk-border);
}
html.a11y-dark #main-container :is(legend, summary) {
  color: var(--dk-heading);
}

/* ---------- Forms ---------- */

html.a11y-dark .page-wrapper :is(input:not(.button):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]), textarea, select),
html.a11y-dark .ui-dialog :is(input:not(.button):not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select) {
  background-color: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
html.a11y-dark .page-wrapper :is(input, textarea)::placeholder {
  color: var(--dk-muted);
}
html.a11y-dark :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--dk-link);
}

/* Rich text editor (CKEditor). */
html.a11y-dark :is(.ck-editor__main, .cke_bottom, .ck.ck-editor__editable, .ck-content) {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
}
html.a11y-dark .ck.ck-toolbar {
  background: var(--dk-surface-3) !important;
  border-color: var(--dk-border) !important;
}

/* ---------- Buttons ---------- */

/* Plain (non-brand) buttons: dark gray with light text. */
html.a11y-dark #main-container :is(input[type="submit"], button, .button, .solo-button):not(.button--primary):not(.contents-button) {
  background-color: var(--dk-surface-3);
  color: var(--dk-text);
  border-color: var(--dk-border);
}
html.a11y-dark #main-container :is(input[type="submit"], button, .button, .solo-button):not(.button--primary):not(.contents-button):hover {
  background-color: #3b414b;
}

/* Accessibility buttons (Dyslexic Font / Dark Mode) and tour button. */
html.a11y-dark .a11y-control,
html.a11y-dark .tour-button {
  background-color: var(--dk-surface-3);
  color: var(--dk-text);
  border-color: var(--dk-border);
}
html.a11y-dark .a11y-control .a11y-label {
  color: var(--dk-text);
}
html.a11y-dark .a11y-accesibility > .is-active {
  background-color: #4b525d;
}

/* Lab save bar: "Save and Edit" was white with blue text. */
html.a11y-dark .save-and-edit,
html.a11y-dark .lab-save-buttons-wrapper button[data-action="save-edit"] {
  background-color: var(--dk-surface-2) !important;
  color: var(--dk-link) !important;
  border-color: var(--dk-link) !important;
}

/* ---------- Dialogs, media library, notifications ---------- */

html.a11y-dark :is(.ui-dialog, #drupal-modal, .ui-dialog-content, .ui-dialog-buttonpane, #media-library-content, #media-library-wrapper, .ui-dialog.media-library-widget-modal) {
  background: var(--dk-surface) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
}
html.a11y-dark .ui-dialog .ui-dialog-titlebar {
  background: var(--dk-surface-2);
  color: var(--dk-heading);
  border-color: var(--dk-border);
}
html.a11y-dark .ui-widget-overlay {
  background: #000;
  opacity: 0.7;
}

html.a11y-dark .notification-dropdown {
  background: var(--dk-surface) !important;
  color: var(--dk-text);
  border-color: var(--dk-border);
}
html.a11y-dark .notification-dropdown a {
  color: var(--dk-link);
}

/* Drupal status / warning / error messages. */
html.a11y-dark .messages {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border-color: var(--dk-border);
}
html.a11y-dark .messages--status { border-left: 4px solid #3fa463; }
html.a11y-dark .messages--warning { border-left: 4px solid #d6a019; }
html.a11y-dark .messages--error { border-left: 4px solid #e05260; }

/* Quick tabs (textbook). */
html.a11y-dark .on-the-gray ul.quicktabs-tabs li {
  background-color: var(--dk-surface-2);
}

/* Google Translate dropdown. */
html.a11y-dark #block-solo-vector-translate select.goog-te-combo {
  background-color: var(--dk-surface-2);
  color: var(--dk-text);
  border-color: var(--dk-border);
}

/* ---------- Content with inline light colors ---------- */

/* Lab and textbook HTML sometimes sets light backgrounds or dark text
   inline (e.g. style="background: #f9f9f9"). Darken those so text stays
   readable. */
html.a11y-dark #main-container :is(
  [style*="background: #f"], [style*="background:#f"],
  [style*="background-color: #f"], [style*="background-color:#f"],
  [style*="background: #e"], [style*="background:#e"],
  [style*="background-color: #e"], [style*="background-color:#e"],
  [style*="background: white"], [style*="background:white"],
  [style*="background-color: white"], [style*="background-color:white"]
) {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
}
html.a11y-dark #main-container :is(
  [style*="color: #000"], [style*="color:#000"],
  [style*="color: #333"], [style*="color:#333"],
  [style*="color: #222"], [style*="color:#222"],
  [style*="color: #444"], [style*="color:#444"],
  [style*="color: #666"], [style*="color:#666"],
  [style*="color: black"], [style*="color:black"]
):not([style*="background"]) {
  color: var(--dk-text) !important;
}

/* ---------- Fixes from first review ---------- */

/* View / Edit / Restore tabs: text color, not link blue. */
html.a11y-dark #main-container .task-local a,
html.a11y-dark #main-container .task-local a:hover {
  color: var(--dk-text);
}
html.a11y-dark #main-container .task-local.is-active,
html.a11y-dark #main-container .task-local.is-active a {
  color: var(--dk-heading);
  background-color: var(--dk-surface-2);
}

/* Lab save bar "Current State" box (light yellow set inline in
   lab-save-buttons.html.twig): dark amber with light text. */
html.a11y-dark .assessment-status-display {
  background: #3a3218 !important;
  border-color: #6b5a1e !important;
  color: #f3e2a9 !important;
}
html.a11y-dark .assessment-status-display * {
  color: inherit !important;
}

/* ---------- Header ---------- */

/* Clean dark header: maroon stripe, then a subtle dark-gray fade (the gold
   tint looked muddy on dark). */
html.a11y-dark .page-wrapper {
  --main-bg-color: #23272e;
  --second-bg-color: var(--dk-bg);
}

/* Logo with white "LEARN" text (images/logo-dark.svg: same SVG with a light
   default fill; the GIS text and maroon circle are unchanged). */
html.a11y-dark .site-logo-img {
  content: url("../images/logo-dark.svg");
}