/* LTS HR Mobile — dark theme. Activated when <html> carries data-theme="dark".
   The bootstrap script in views/partials/head.ejs sets the attribute before
   first paint (stored choice, else prefers-color-scheme), so there is no
   white flash. All rules here are appended overrides: app.css is untouched. */

html[data-theme="dark"] {
  --bg: #0D1626;
  --card: #182840;
  --ink: #E9EFF7;
  --muted: #9AABC2;
  --line: #2C415F;
  --ok: #46B76A;
  --warn: #DCA845;
  --bad: #E36E64;
  color-scheme: dark;
}

/* Text that was navy-on-light in app.css becomes light-on-dark. */
html[data-theme="dark"] .card-h h3,
html[data-theme="dark"] .greet h2,
html[data-theme="dark"] .pill,
html[data-theme="dark"] label,
html[data-theme="dark"] .car-item h4,
html[data-theme="dark"] .install-hero h1,
html[data-theme="dark"] .install .card h2,
html[data-theme="dark"] .login-card h1,
html[data-theme="dark"] .tab.on,
html[data-theme="dark"] .form-card .btn.ghost { color: #DCE7F6; }

/* Links: accent stays #2E86DE for fills/borders; text links use a lighter
   tint of the same accent for readability on dark surfaces. */
html[data-theme="dark"] a { color: #6FB1EC; }
html[data-theme="dark"] .menulist a { color: var(--ink); }
html[data-theme="dark"] .pill { color: #DCE7F6; }
html[data-theme="dark"] .pill:active { background: #24405F; }
html[data-theme="dark"] .link-card:active { background: #24405F; }

/* Cards / surfaces with hardcoded light backgrounds in app.css. */
html[data-theme="dark"] .car-item { background: #16273E; }
html[data-theme="dark"] .ltab { background: #16273E; }
html[data-theme="dark"] .login-card { background: #1A2B46; border: 1px solid var(--line); }
html[data-theme="dark"] .form-card .btn.ghost { background: #101E33; border-color: var(--line); }

/* Navy surfaces (appbar, stat cards, profile hero, avatar, ltab.on,
   badge.pin, primary buttons) keep their navy identity on dark. */

/* Badges */
html[data-theme="dark"] .badge { background: #23405F; color: #C9DCF5; }
html[data-theme="dark"] .badge.kind { background: #24405F; color: #C9DCF5; }
html[data-theme="dark"] .badge.ok { background: rgba(70,183,106,.16); color: #6FD693; }
html[data-theme="dark"] .badge.warn { background: rgba(220,168,69,.16); color: #E9BE6A; }
html[data-theme="dark"] .badge.bad { background: rgba(227,110,100,.16); color: #F08E84; }

/* Alerts */
html[data-theme="dark"] .alert.ok { background: rgba(70,183,106,.16); color: #6FD693; }
html[data-theme="dark"] .alert.err { background: rgba(227,110,100,.16); color: #F08E84; }
html[data-theme="dark"] .alert-item.critical { background: rgba(227,110,100,.16); color: #F08E84; }
html[data-theme="dark"] .alert-item.warning { background: rgba(220,168,69,.16); color: #E9BE6A; }

/* Forms */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="search"] { background: #101E33; }
html[data-theme="dark"] input:focus { outline-color: #6FB1EC; }

/* Login */
html[data-theme="dark"] .aup-warn {
  background: #3A2F10; border-color: #8A6D1F; color: #E8C96A;
}

/* Tab bar + footer */
html[data-theme="dark"] .tabbar { background: #131F33; }
html[data-theme="dark"] .appfoot { background: rgba(13,22,38,.94); }

/* Theme toggle row in the menu */
.theme-row { cursor: pointer; }
.theme-state { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; }