/* Day / night switch, shared by every page, and night mode for the
   standalone pages (sign-in, onboarding, password reset, admin), which
   carry their own styles and opt in with <body class="vd-plain">.

   Night mode is modelled on a flight deck with the panel lights on:
   charcoal panels, legends in warm backlit white, and the display
   colours for meaning (cyan for what you can act on, green for normal,
   amber for caution, red for warning). The same palette is used in
   app.css and public.css. */

.theme-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 500;
  width: 48px; height: 48px; border-radius: 50%;
  background: #FFFFFF; border: 1px solid #D0D5DD; color: #101828;
  box-shadow: 0 4px 16px rgba(16,24,40,0.14);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 3px; }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle .icon-moon, .app-theme .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun, :root[data-theme="dark"] .app-theme .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon, :root[data-theme="dark"] .app-theme .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle {
  background: #161B21; border-color: #3A444F; color: #FFD58A;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.5), 0 0 14px -4px rgba(255,200,110,0.45);
}
:root[data-theme="dark"] .theme-toggle svg { filter: drop-shadow(0 0 4px rgba(255,200,110,0.55)); }
:root[data-theme="dark"] .theme-toggle:focus-visible { outline-color: #48D3E6; }
@media (max-width: 560px) { .theme-toggle { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* ---- Standalone pages at night ---- */
:root[data-theme="dark"] body.vd-plain {
  --face: #161B21; --face-dark: #0A0D10; --white: #1B2128;
  --titlebar: #48D3E6; --titlebar-2: #7DE3F0;
  --text: #EFE6D2; --text-muted: #A3998A;
  --border: #333C46; --shadow-dk: #3A444F; --shadow-md: #262E37;
  --red: #FF6259; --red-bg: rgba(255,98,89,0.12); --green: #46DB86;
  color-scheme: dark; color: var(--text);
  background: #0A0D10 radial-gradient(ellipse at 50% 0%, rgba(72,211,230,0.05), transparent 60%);
}
:root[data-theme="dark"] body.vd-plain .panel {
  background: linear-gradient(180deg, #181D23 0%, #14181D 100%); border-color: #2A323B;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 30px rgba(0,0,0,0.5);
}
:root[data-theme="dark"] body.vd-plain .panel-header {
  background: #0F1317; color: #F3E7CC; border-bottom: 1px solid #262E37;
  text-shadow: 0 0 8px rgba(255,200,120,0.35);
}
:root[data-theme="dark"] body.vd-plain .panel-header a { color: #48D3E6; }
:root[data-theme="dark"] body.vd-plain input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] body.vd-plain select, :root[data-theme="dark"] body.vd-plain textarea {
  background: #0F1317; color: var(--text); border-color: #333C46;
}
:root[data-theme="dark"] body.vd-plain input:focus, :root[data-theme="dark"] body.vd-plain select:focus {
  border-color: #48D3E6; box-shadow: 0 0 0 3px rgba(72,211,230,0.18);
}
:root[data-theme="dark"] body.vd-plain button[type="submit"],
:root[data-theme="dark"] body.vd-plain .demo-form button,
:root[data-theme="dark"] body.vd-plain .btn-primary {
  color: #06181C; box-shadow: 0 0 14px -4px rgba(72,211,230,0.6);
}
:root[data-theme="dark"] body.vd-plain .error { background: rgba(255,98,89,0.1); border-color: rgba(255,98,89,0.4); }
:root[data-theme="dark"] body.vd-plain .notice { background: rgba(70,219,134,0.08); border-color: rgba(70,219,134,0.35); }
:root[data-theme="dark"] body.vd-plain a { color: #48D3E6; }