/* ═══════════════════════════════════════════════════════════════════════════
   Day and night.

   Night is the default palette (a near-black metallic blue) and lives in each
   page's :root. Day is <html data-theme="light">: the same layout and the
   same red on a clean clinical white. The tokens keep their names -- "ink"
   is the surface, "white" the strongest text -- so every rule written
   against them follows. The choice is set before the first paint by the
   inline script in each layout and toggled by /js/theme.js.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hooks for the pages that do not load global.css (profile, dashboard,
   checkout). Same values as the night palette there. */
:root {
  --fg-rgb: 234, 241, 250;
  --on-accent: #ffffff;
  --chip-text: #ffab9a;
  --well-rgb: 0, 0, 0;
}

html[data-theme='light'] {
  color-scheme: light;

  --ink-900: #e6ebf2;
  --ink-800: #f3f5f9;
  --ink-700: #ffffff;
  --ink-600: #ffffff;
  --ink-500: #d3dbe6;

  --red: #c41e28;
  /* A shade deeper by day so red text reads on white. */
  --red-bright: #c22a26;
  --red-deep: #8a1418;
  --red-ink: #f9e3e2;
  --ember: rgba(200, 32, 42, .28);

  --fg-rgb: 18, 24, 36;
  --white: #121824;
  --paper: rgba(18, 24, 36, .88);
  --mist: rgba(18, 24, 36, .68);
  --mute: rgba(18, 24, 36, .62);
  --line: rgba(30, 50, 80, .11);
  --line-strong: rgba(30, 50, 80, .2);

  --glass: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .76) 100%);
  --glass-hi: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, .9) 100%);
  --glass-bar: rgba(255, 255, 255, .84);
  --glass-menu: rgba(255, 255, 255, .98);
  --scrim: rgba(20, 30, 45, .45);
  --shadow: 0 18px 40px rgba(26, 38, 60, .12);
  --shadow-hover: 0 24px 54px rgba(26, 38, 60, .16);
  --shadow-lift: 0 26px 50px rgba(26, 38, 60, .16), 0 0 0 1px rgba(200, 32, 42, .3), 0 0 40px -14px var(--ember);
  --grain: .018;
  --backdrop:
    linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, .7) 36%, transparent 50%, rgba(255, 255, 255, .45) 66%, transparent 80%),
    radial-gradient(62rem 42rem at 84% -6%, rgba(98, 140, 200, .22), transparent 62%),
    radial-gradient(48rem 38rem at 0% 46%, rgba(200, 32, 42, .08), transparent 64%),
    linear-gradient(170deg, #eef2f7 0%, #e6ecf3 48%, #f2f5f9 100%);

  /* The names the app pages (profile, dashboard, checkout) use. */
  --surface: #ffffff;
  --surface-2: #f1f4f8;
  --text-color: #121824;
  --text-light: rgba(18, 24, 36, .64);
  --background: #f3f5f9;
  --background-dark: #e6ebf2;
  --border-color: rgba(30, 50, 80, .12);
  --chip-text: #a3141c;
  /* Fields and the credibility strip: a faint grey well, not a dark hole. */
  --well-rgb: 30, 50, 80;
  --well: .045;
  --well-focus: .02;
  --well-modal: .04;
}

/* The app pages paint their own crimson pools; by day a soft blue sheen. */
html[data-theme='light'] body { background: var(--background, #f3f5f9); }

/* Switching cross-fades for a moment instead of snapping. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, box-shadow .45s ease !important;
}

/* ── The switch ─────────────────────────────────────────────────────────────
   Night: a moon over a dusk sky with a few stars. Day: the moon slides across
   and becomes the sun, the sky turns to noon and a cloud drifts in. */
.themeSwitch {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(160, 190, 230, .3);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, #0a1322 0%, #18284a 60%, #24365e 100%);
  box-shadow: inset 0 2px 7px rgba(0, 0, 0, .6);
  transition: background .6s ease, border-color .6s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.themeSwitch:hover { box-shadow: inset 0 2px 7px rgba(0, 0, 0, .6), 0 0 0 3px rgba(232, 66, 58, .28); }
.themeSwitch:focus-visible { outline: 2px solid var(--red-bright, #e8423a); outline-offset: 3px; }
.themeSwitch__sky { position: absolute; inset: 0; pointer-events: none; }
.themeSwitch__star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, .7);
  transition: opacity .5s ease, transform .6s ease;
  animation: themeSwitchTwinkle 2.6s ease-in-out infinite;
}
.themeSwitch__star--a { top: 7px; left: 9px; }
.themeSwitch__star--b { top: 16px; left: 18px; width: 1.5px; height: 1.5px; animation-delay: .9s; }
.themeSwitch__star--c { top: 8px; left: 25px; width: 1.5px; height: 1.5px; animation-delay: 1.7s; }
.themeSwitch__cloud {
  position: absolute; top: 14px; right: 4px; width: 18px; height: 6px; border-radius: 999px; background: #fff;
  opacity: 0; transform: translateX(14px);
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.themeSwitch__cloud::before, .themeSwitch__cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.themeSwitch__cloud::before { width: 8px; height: 8px; top: -4px; left: 3px; }
.themeSwitch__cloud::after { width: 6px; height: 6px; top: -3px; left: 9px; }
.themeSwitch__knob {
  position: absolute; top: 2px; left: 34px; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #ffffff 0%, #e6ebf3 55%, #c3ccda 100%);
  box-shadow: 0 0 10px 2px rgba(200, 220, 255, .45), inset -3px -3px 6px rgba(80, 100, 140, .35);
  transition: left .6s cubic-bezier(.68, -.35, .27, 1.35), background .6s ease, box-shadow .6s ease, transform .6s ease;
}
.themeSwitch__crater { position: absolute; border-radius: 50%; background: rgba(120, 135, 165, .45); transition: opacity .4s ease; }
.themeSwitch__crater--a { width: 5px; height: 5px; top: 5px; left: 11px; }
.themeSwitch__crater--b { width: 4px; height: 4px; top: 12px; left: 5px; }

html[data-theme='light'] .themeSwitch {
  border-color: rgba(30, 90, 160, .25);
  background: linear-gradient(135deg, #9fdcff 0%, #5cb2f2 55%, #3f95e4 100%);
  box-shadow: inset 0 2px 6px rgba(20, 70, 140, .35);
}
html[data-theme='light'] .themeSwitch__star { opacity: 0; transform: translateY(6px); animation: none; }
html[data-theme='light'] .themeSwitch__cloud { opacity: .95; transform: none; }
html[data-theme='light'] .themeSwitch__crater { opacity: 0; }
html[data-theme='light'] .themeSwitch__knob {
  left: 2px; transform: rotate(180deg);
  background: radial-gradient(circle at 40% 38%, #fffbe0 0%, #ffd84a 45%, #ffad1f 100%);
  box-shadow: 0 0 14px 4px rgba(255, 196, 64, .75), 0 0 2px rgba(255, 150, 0, .6);
}
@keyframes themeSwitchTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .themeSwitch, .themeSwitch * { transition: none !important; animation: none !important; }
}

/* In the app pages' sidebar it sits with the language selector. */
.themeSwitch-item { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; color: var(--text-light, var(--mist)); font-size: .9rem; }

/* Public header: the menu keeps to the right, the switch sits after it. */
.nav-container .nav-menu { margin-left: auto; }
.themeSwitch--nav { margin-left: -1rem; }
@media (max-width: 768px) { .themeSwitch--nav { margin-left: auto; } }

/* ── Day fixes for the app pages (profile, dashboard) ──────────────────────
   Their language selector and a few notices carry fixed light colours, some
   inline and some !important, written for a dark page. */
html[data-theme='light'] .language-btn { color: var(--text-light) !important; border-color: var(--border-color) !important; }
html[data-theme='light'] .language-btn:hover { color: #fff !important; }
html[data-theme='light'] .language-dropdown { background: #ffffff !important; border-color: var(--border-color) !important; box-shadow: 0 10px 24px rgba(26, 38, 60, .14) !important; }
html[data-theme='light'] .language-option { color: var(--text-color) !important; border-color: var(--border-color) !important; }
html[data-theme='light'] .language-option:hover, html[data-theme='light'] .language-option.active { color: #fff !important; }
html[data-theme='light'] .sidebar-header p { color: var(--text-light) !important; }
/* Pastel notice colours that only read on black, darkened for white. */
html[data-theme='light'] [style*="#fbbf24"], html[data-theme='light'] .status-paused, html[data-theme='light'] .health-status.warning { color: #8a5a00 !important; }
html[data-theme='light'] [style*="#f59e0b"] { color: #a35100 !important; }
html[data-theme='light'] [style*="#34d399"], html[data-theme='light'] .status-active, html[data-theme='light'] .health-status.healthy, html[data-theme='light'] .btn-unban-user, html[data-theme='light'] .access-ok { color: #0b7a52 !important; }
html[data-theme='light'] [style*="#fb7185"], html[data-theme='light'] .status-inactive, html[data-theme='light'] .health-status.error, html[data-theme='light'] .btn-ban-user, html[data-theme='light'] .btn-delete-user, html[data-theme='light'] .access-no { color: #b4232f !important; }
html[data-theme='light'] [style*="#93c5fd"], html[data-theme='light'] .btn-edit-user, html[data-theme='light'] .proposal-row__head a { color: #1d5fa8 !important; }
html[data-theme='light'] [style*="border: 1px solid #93c5fd"] { border-color: rgba(29, 95, 168, .35) !important; }

/* ── Panels the scripts build with fixed light-theme colours ───────────────
   profile.js, dashboard.js and script.js write device cards, tables, forms
   and notices with inline colours from an old white design. In the night
   theme that left white islands, and text that inherits the page colour
   came out white on white. These follow the theme instead, by day and by
   night. The small coloured counters (purple/blue/green/red chips) carry
   their own background and stay as they are. */
:is([style*="background:white"], [style*="background: white"], [style*="background:#fff;"], [style*="background:#fff\""], [style*="background:#f8fafc"], [style*="background:#f9fafb"], [style*="background:#f3f4f6"]) {
  background: rgba(var(--fg-rgb), .045) !important;
  color: var(--text-color, var(--paper)) !important;
}
[style*="background:#faf5ff"] { background: rgba(124, 58, 237, .10) !important; }
[style*="background:#eff6ff"] { background: rgba(29, 78, 216, .10) !important; }
[style*="background:#f0fdf4"] { background: rgba(16, 150, 100, .12) !important; }
[style*="background:#fff7f7"], [style*="background:#fff5f5"] { background: rgba(251, 113, 133, .08) !important; }
[style*="border:1px solid #e5e7eb"] { border-color: var(--border-color, var(--line)) !important; }
[style*="border:1px solid #d1d5db"] { border-color: var(--border-color, var(--line-strong)) !important; }
[style*="color:#111827"], [style*="color:#374151"] { color: var(--text-color, var(--white)) !important; }
[style*="color:#6b7280"], [style*="color:#9ca3af"], [style*="color: #9ca3af"] { color: var(--text-light, var(--mist)) !important; }
[style*="color:#166534"]:not([style*="background:#dcfce7"]), [style*="color:#059669"] { color: #34d399 !important; }
html[data-theme='light'] [style*="color:#166534"]:not([style*="background:#dcfce7"]), html[data-theme='light'] [style*="color:#059669"] { color: #0b7a52 !important; }
/* The sandbox purchase notice (script.js) is a white card on a scrim. */
#sandboxSuccessModal > div { background: var(--ink-700, #101926) !important; color: var(--paper, #fff); border: 1px solid var(--line-strong); }
#sandboxSuccessModal [style*="background:#f3f4f6"] { background: rgba(var(--fg-rgb), .06) !important; }

/* Logout in the app sidebar: a light coral written for black, deeper by day. */
html[data-theme='light'] .logout-btn, html[data-theme='light'] .logout-btn:hover { color: #b4232f !important; }
/* Product badges sit on the photo: by day a white pill with dark text. */
html[data-theme='light'] .shop-card__badge:not(.shop-card__badge--hot) { background: rgba(255, 255, 255, .9); }
/* Phone: the open menu is a full-width panel from the top; the logo, the
   switch and the close button stay above it. */
@media (max-width: 768px) {
  .nav-logo, .themeSwitch--nav, .nav-toggle { position: relative; z-index: 2; }
}