/* MDS Training Portal — utilities not easily expressed inline. */

html, body { height: 100%; }

/* Tell the browser which mode native widgets (select popups, scrollbars,
   form controls, file pickers) should render in. */
:root      { color-scheme: light; }
html.dark  { color-scheme: dark; }

/* Smooth color transitions on theme switch (avoid jarring flips). */
body, header, footer, main, .mds-card { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }

/* Brand-tinted hero background for the auth pages. */
.mds-hero {
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(95,184,73,0.10) 0%, transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(44,127,181,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
}
.dark .mds-hero {
  background:
    radial-gradient(60% 80% at 80% 20%, rgba(95,184,73,0.18) 0%, transparent 60%),
    radial-gradient(50% 70% at 10% 90%, rgba(44,127,181,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0a1628 0%, #0e1f3a 60%, #13294b 100%);
}

/* Subtle decorative line accent (echoes the mock). */
.mds-accent-line {
  background: linear-gradient(90deg, transparent, #5fb849 30%, #2c7fb5 70%, transparent);
  height: 2px;
  width: 64px;
  border-radius: 2px;
}

/* Custom scrollbars in dark mode look better. */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Native <select> popups inherit OS chrome; explicit colors keep options
   readable in both themes. Safari mobile may still override (best-effort). */
select option {
  color: #475569;          /* slate-600 — visible against light & default popup */
  background-color: #ffffff;
}
.dark select option {
  color: #cbd5e1;          /* slate-300 — readable on dark popup background */
  background-color: #13294b; /* mds-navy2 — match the dark form surfaces */
}
select option:checked {
  /* keep the selected entry distinguishable but still grey, per spec */
  color: #1e293b;          /* slate-800 in light */
  background-color: #e2e8f0; /* slate-200 */
}
.dark select option:checked {
  color: #f1f5f9;          /* slate-100 */
  background-color: #1e3a5f;
}