/* Mwingo Academy shared light/dark theme and background-overlay repair.
   Loaded last so it can normalize older page-specific glass rules. */
:root {
  color-scheme: light;
  --mw-page-text: #38271c;
  --mw-panel-bg: rgba(255, 250, 240, .88);
  --mw-panel-text: #38271c;
  --mw-panel-muted: #756457;
  --mw-panel-border: rgba(104, 67, 46, .22);
  --mw-field-bg: rgba(255, 252, 247, .94);
  --mw-field-text: #38271c;
  --mw-overlay-start: rgba(45, 27, 16, .12);
  --mw-overlay-end: rgba(45, 27, 16, .24);
  --mw-public-glass: rgba(255, 249, 239, .80);
  --mw-theme-button-bg: rgba(255, 250, 240, .94);
  --mw-theme-button-text: #4b2e20;
}
html.dark-mode {
  color-scheme: dark;
  --mw-page-text: #f7eee3;
  --mw-panel-bg: rgba(35, 27, 22, .91);
  --mw-panel-text: #f7eee3;
  --mw-panel-muted: #d0bfb0;
  --mw-panel-border: rgba(236, 214, 190, .24);
  --mw-field-bg: rgba(28, 23, 20, .96);
  --mw-field-text: #fff7ec;
  --mw-overlay-start: rgba(12, 8, 6, .56);
  --mw-overlay-end: rgba(12, 8, 6, .72);
  --mw-public-glass: rgba(31, 24, 20, .88);
  --mw-theme-button-bg: rgba(43, 31, 24, .96);
  --mw-theme-button-text: #fff4e6;
}

/* Private application pages: retain the background photograph, adjust only its overlay. */
html body.system-page, html body.dashboard-page, html body.parent-page {
  color: var(--mw-page-text) !important;
}
html body.system-page::before, html body.dashboard-page::before, html body.parent-page::before {
  background: linear-gradient(var(--mw-overlay-start), var(--mw-overlay-end)) !important;
}
html.dark-mode body.system-page, html.dark-mode body.dashboard-page, html.dark-mode body.parent-page {
  background-color: #1b1511 !important;
}
html.dark-mode body.system-page :is(.panel,.card,.notice,.stat-card,.report-card,.parent-card,.parent-header,.modal,.dropdown-menu,.table-wrap,.form-card),
html.dark-mode body.dashboard-page :is(.panel,.card,.notice,.stat-card,.report-card,.dashboard-panel,.dashboard-stat,.dashboard-action-card,.dashboard-message-card),
html.dark-mode body.parent-page :is(.panel,.card,.notice,.stat-card,.report-card,.parent-card,.parent-header,.parent-info div) {
  background-color: var(--mw-panel-bg) !important;
  color: var(--mw-panel-text) !important;
  border-color: var(--mw-panel-border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}
html.dark-mode body.system-page :is(h1,h2,h3,h4,p,label,small,td,th,li,.muted,.help-text),
html.dark-mode body.dashboard-page :is(h1,h2,h3,h4,p,label,small,td,th,li,.muted,.help-text),
html.dark-mode body.parent-page :is(h1,h2,h3,h4,p,label,small,td,th,li,.muted,.help-text) {
  color: var(--mw-panel-text);
}
html.dark-mode body :is(input,select,textarea) {
  background-color: var(--mw-field-bg) !important;
  color: var(--mw-field-text) !important;
  border-color: var(--mw-panel-border) !important;
}
html.dark-mode body :is(table,thead,tbody,tr,th,td) {
  border-color: var(--mw-panel-border) !important;
}
html.dark-mode body :is(thead th, .table thead th) {
  background-color: rgba(93, 62, 43, .9) !important;
  color: #fff4e6 !important;
}
html.dark-mode body :is(tbody tr:nth-child(even), .table-striped tbody tr:nth-child(even)) {
  background-color: rgba(255, 245, 230, .045) !important;
}
html.dark-mode body a:not(.mw-nav-item):not(.btn):not(button) { color: #e8c39e; }
html.dark-mode body button, html.dark-mode body input[type="submit"] {
  border-color: var(--mw-panel-border);
}

/* Login and welcome overlays need an actual light/dark distinction too. */
html:not(.dark-mode) body.login-page .login-overlay {
  background: linear-gradient(135deg, rgba(35,21,12,.34), rgba(108,66,34,.16), rgba(30,17,11,.42)) !important;
}
html.dark-mode body.login-page .login-overlay {
  background: linear-gradient(135deg, rgba(8,5,4,.78), rgba(44,27,18,.68), rgba(8,5,4,.86)) !important;
}
html:not(.dark-mode) body.welcome-page .welcome-overlay {
  background: linear-gradient(135deg, rgba(45,27,16,.52), rgba(108,66,34,.34), rgba(35,21,12,.58)) !important;
}
html.dark-mode body.welcome-page .welcome-overlay {
  background: linear-gradient(135deg, rgba(8,5,4,.82), rgba(44,27,18,.74), rgba(8,5,4,.88)) !important;
}

/* Public pages: override hard-coded cream-glass rules when dark mode is selected. */
html.dark-mode body:not(.no-public-glass) {
  color: #f7eee3 !important;
  background-color: #17110d !important;
  background-image: linear-gradient(135deg, rgba(8,5,4,.70), rgba(25,16,11,.78)), url('mwingo_background.jpg') !important;
}
html.dark-mode body :is(.public-header,.contact-header,.header,.public-nav,.contact-main,.hero,.stat,.about-card,.feature-card,.news-card,.card,.contact-card,.contact-form-card,.contact-hero,.news-hero,.news-empty,.empty,.public-shell>.panel,.page .stat,.page .card,.page .empty) {
  background-color: var(--mw-public-glass) !important;
  background-image: none !important;
  border-color: var(--mw-panel-border) !important;
  color: var(--mw-panel-text) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.30) !important;
}
html.dark-mode body :is(.hero,.page .hero) {
  background-image: linear-gradient(125deg, rgba(28,19,14,.94), rgba(58,39,27,.90)) !important;
  color: #fff4e6 !important;
}
html.dark-mode body :is(.public-brand,.public-brand-text,.public-brand-name,.contact-brand,.brand,.section-title h2,.about-card h3,.stat-number,.stat-label,.news-hero h1,.news-card h2,.contact-hero h1,.contact-card h2,.contact-form-card h2,.page .stat b,.page .body h2) {
  color: #fff0df !important;
}
html.dark-mode body :is(.public-brand-motto,.public-brand small,.contact-brand small,.section-title p,.stat span,.about-card p,.about-list,.feature-card p,.news-hero p,.news-summary,.news-body,.contact-hero p,.contact-form-card p,.contact-card p,.contact-card small,.page .desc,.page .date) {
  color: #d8c6b6 !important;
}
html.dark-mode body :is(.contact-form input,.contact-form textarea,input,select,textarea) {
  background: rgba(28,23,20,.96) !important;
  color: #fff7ec !important;
  border-color: rgba(236,214,190,.30) !important;
}
html.dark-mode body :is(.contact-form input,.contact-form textarea)::placeholder { color: #c7b7a9 !important; }
html.dark-mode body .public-footer, html.dark-mode body .page .footer, html.dark-mode body.contact-page>footer {
  background: rgba(20,14,10,.88) !important;
  color: #f7eee3 !important;
}
html.dark-mode body :is(.public-links a,.links a,.contact-header nav a,.legal-nav a) { color: #f7eee3 !important; }
html.dark-mode body :is(.public-links a:hover,.public-links .active,.links a:hover,.links .active,.links .login,.contact-header nav a:hover,.contact-header nav .contact-nav-active) {
  background: linear-gradient(135deg,#68432e,#3b2519) !important;
  color: #fff4e6 !important;
}

/* Legal pages and standalone parent pages share the same toggle and palette. */
html.dark-mode body:has(.legal-card) { background: #19130f !important; color: #f7eee3 !important; }
html.dark-mode .legal-card, html.dark-mode .parent-card, html.dark-mode .parent-header {
  background: var(--mw-panel-bg) !important; color: var(--mw-panel-text) !important; border-color: var(--mw-panel-border) !important;
}
html.dark-mode body:has(.legal-card) :is(h1,h2,h3,p,li,.updated,.legal-footer) { color: #e8d9ca !important; }
html.dark-mode body:has(.legal-card) .legal-header { background: #211710 !important; }
html.dark-mode body:has(.legal-card) .legal-footer a { color: #e8c39e !important; }

/* The floating control is used only on pages without the private header's own toggle. */
.mw-theme-floating {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(104,67,46,.28) !important;
  border-radius: 999px !important;
  background: var(--mw-theme-button-bg) !important;
  color: var(--mw-theme-button-text) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
  font: 700 13px/1.2 Arial, sans-serif !important;
  cursor: pointer !important;
}
html.dark-mode .mw-theme-floating { border-color: rgba(236,214,190,.28) !important; }
@media(max-width:600px) { .mw-theme-floating { right: 12px !important; bottom: 12px !important; } }

/* Catch standalone admin/parent tools that do not use the shared staff header. */
html.dark-mode body :is(.panel,.card,.box,.container-card,.form-container,.table-container,.content-card,.parent-card,.parent-header,.parent-info div) {
  background-color: var(--mw-panel-bg) !important;
  color: var(--mw-panel-text) !important;
  border-color: var(--mw-panel-border) !important;
}
html.dark-mode body :is(h1,h2,h3,h4,p,label,small,li,td,th,legend,dt,dd) {
  color: var(--mw-page-text);
}
html.dark-mode body :is(.container,.section,.section-light,.section-blue,.section-dark,.about-grid,.stats) {
  color: #f7eee3 !important;
}
html.dark-mode body :is(.section-light,.section-blue) {
  background: rgba(31,24,20,.72) !important;
}
html.dark-mode body :is(.contact-main,.public-shell,.page) { color: #f7eee3 !important; }


/* Phase 2B: normalize common controls, overlays, and standalone quiz history. */
html.dark-mode body :is(select option, optgroup) {
  background-color: #211710 !important;
  color: #fff4e6 !important;
}
html.dark-mode body :is(input, select, textarea, button, a, summary):focus-visible {
  outline: 2px solid #d8aa7a !important;
  outline-offset: 2px;
}
html.dark-mode body :is(input, select, textarea):disabled,
html.dark-mode body :is(button, input[type="submit"]):disabled {
  opacity: .68;
  cursor: not-allowed;
}
html.dark-mode body :is(input, textarea)::placeholder { color: #c7b7a9 !important; opacity: 1; }
html.dark-mode body :is(.modal,.modal-content,.dialog,.dialog-content,[role="dialog"],.dropdown-menu,.dropdown-content,.menu-dropdown,.popover,.tooltip) {
  background-color: var(--mw-panel-bg) !important;
  color: var(--mw-panel-text) !important;
  border-color: var(--mw-panel-border) !important;
}
html.dark-mode body :is(.modal,.modal-content,.dialog,.dialog-content,[role="dialog"],.dropdown-menu,.dropdown-content,.menu-dropdown,.popover) :is(h1,h2,h3,h4,p,label,small,li,span,td,th) {
  color: var(--mw-panel-text) !important;
}

/* Parent Quiz History was added after the shared theme patch; include it now. */
body.parent-quiz-history-page { color: var(--mw-page-text); }
body.parent-quiz-history-page::before {
  background: linear-gradient(var(--mw-overlay-start), var(--mw-overlay-end)) !important;
}
html.dark-mode body.parent-quiz-history-page { background-color: #1b1511 !important; }
html.dark-mode body.parent-quiz-history-page > header {
  background: rgba(31,24,20,.94) !important;
  color: #fff4e6 !important;
  border-color: var(--mw-panel-border) !important;
}
html.dark-mode body.parent-quiz-history-page > header :is(.brand,small,a) { color: #fff4e6 !important; }
html.dark-mode body.parent-quiz-history-page .history-panel {
  background: var(--mw-panel-bg) !important;
  color: var(--mw-panel-text) !important;
  border-color: var(--mw-panel-border) !important;
}
html.dark-mode body.parent-quiz-history-page .history-panel :is(h1,h2,h3,p,li,td,th,strong,span) { color: var(--mw-panel-text) !important; }
html.dark-mode body.parent-quiz-history-page .history-muted { color: var(--mw-panel-muted) !important; }
html.dark-mode body.parent-quiz-history-page .history-table th {
  background: rgba(93,62,43,.9) !important;
  color: #fff4e6 !important;
}
html.dark-mode body.parent-quiz-history-page .history-table td { border-color: var(--mw-panel-border) !important; }
html.dark-mode body.parent-quiz-history-page .history-status {
  background: rgba(104,67,46,.55) !important;
  color: #fff4e6 !important;
}

/* Printing must remain light and legible regardless of the selected screen theme. */
@media print {
  html, html.dark-mode { color-scheme: light !important; }
  html.dark-mode body { background-color: #fff !important; }
  html.dark-mode body::before { display: none !important; }
  .mw-theme-floating, #themeToggle { display: none !important; }
}