/* ============================================================
   KEY App — Theme color-scheme hardening (v40)
   Fixes unreadable text on mobile when switching theme:
   - tells the browser which color scheme is active (native controls,
     form inputs, autofill, scrollbars, iOS rubber-band area)
   - keeps <html> background in sync with the theme
   - forces explicit colors on form fields and their autofill states
   Additive layer only. Does not change layout or logic.
   ============================================================ */

:root {
  color-scheme: light;
  background-color: #f4fbf8;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  background-color: #0A1411;
}

/* html and body must share the theme background so mobile overscroll
   and older WebViews paint the same color as the app surface. */
html, body {
  background-color: var(--bg, #f4fbf8) !important;
  color: var(--text, #0F1F1C);
}
[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: var(--bg, #0A1411) !important;
  color: var(--text, #E8F5F0);
}

/* Force readable colors on form fields regardless of platform defaults.
   Uses the same CSS variables the theme already defines. */
input, textarea, select {
  color: var(--text, #0F1F1C);
  background-color: var(--input-bg, #ffffff);
  caret-color: var(--neon, #0EA67D);
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color: var(--text, #E8F5F0);
  background-color: var(--input-bg, #0a1818);
  border-color: var(--border, rgba(255,255,255,.08));
}

/* Kill iOS/Android autofill yellow/blue background and unreadable text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text, #E8F5F0) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #0a1818) inset !important;
  caret-color: var(--text, #E8F5F0);
  transition: background-color 9999s ease-in-out 0s;
}

/* Native select dropdown (mobile) and its options must match the theme */
select option {
  background-color: var(--input-bg, #ffffff);
  color: var(--text, #0F1F1C);
}
[data-theme="dark"] select option {
  background-color: #0a1818;
  color: #E8F5F0;
}

/* Selection color – readable in both themes */
::selection {
  background: var(--neon, #10b981);
  color: #041a14;
}