/* ═══ SKY — the 101huntersqn.com look (default theme) ═══════════════════════════
   White rounded cards, sky blue + sunset orange, Plus Jakarta Sans headings,
   over scenes from the squadron's flight video (js/core/theme.js → .bg-video).
   Loaded after every other stylesheet because it also reshapes components
   (no HUD chamfers, pill buttons), not only colours.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="sky"] {
  --bg: #f5f8fc;  --bg-2: #f1f5fa;  --surface: #ffffff;  --surface-2: #f5f8fc;
  --surface-3: #eaf2fb;  --surface-hover: #e8f2fe;
  --gold: #1673e6;  --gold-light: #0f5fc4;  --orange: #ff7a1a;  --fire: #ff5a1f;
  --text: #0f1f38;  --text-2: #34465f;  --muted: #5a6a82;  --faint: #a7b3c4;
  --on-accent: #ffffff;  --on-fire: #ffffff;  --ink: #0f1f38;
  --ok: #16a34a;  --warn: #d97706;  --danger: #dc2626;  --info: #0ea5e9;
  --ok-text: #15803d;  --warn-text: #a15c07;  --danger-text: #b91c1c;  --info-text: #0369a1;
  --blue-side: #1d5fd8;  --red-side: #d62828;

  --line: #e2e9f2;  --line-strong: #cfdbe9;  --line-neutral: #e8eef5;  --row-hover: #f3f8fe;
  --grad-gold: linear-gradient(135deg, #1673e6 0%, #0ea5e9 100%);
  --grad-fire: linear-gradient(135deg, #ff8a3d 0%, #ff5a1f 100%);
  --grad-panel: #ffffff;
  --chrome-top: rgba(255, 255, 255, 0.92);
  --chrome-side: rgba(255, 255, 255, 0.95);
  --nav-active: linear-gradient(90deg, #e8f2fe, #f3f8fe);

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --r-sm: 6px;  --r-md: 12px;  --r-lg: 16px;
  --cut: 0px;
  --shadow: 0 10px 30px rgba(15, 31, 56, 0.08);
  --glow-fire: 0 8px 20px rgba(255, 90, 31, 0.28);
  --glow-gold: 0 6px 18px rgba(22, 115, 230, 0.18);
  color-scheme: light;
}

/* ── background: navy sky under the video (or a clear-sky gradient without it) ── */
:root[data-theme="sky"] body {
  background: linear-gradient(180deg, #cfe3fb 0%, #eef5fd 45%, #f5f8fc 100%) fixed;
  color: var(--text-2);
}
:root[data-theme="sky"]:not([data-decor="off"]) body { background: #0a1a33; }
.bg-video { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0a1a33; pointer-events: none; }
.bg-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.bg-video video.on { opacity: 1; }
.bg-video::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 24, 52, 0.42) 0%, rgba(6, 24, 52, 0.58) 100%); }
:root[data-theme="sky"] .sky { display: none; }          /* the radar / chart-grid decor belongs to the night themes */

/* ── app shell: white bars like the website header, frosted page over the video ── */
:root[data-theme="sky"] .sidebar { backdrop-filter: blur(14px); box-shadow: 1px 0 0 var(--line), 6px 0 24px rgba(15, 31, 56, 0.06); border-right: 0; }
:root[data-theme="sky"] .topbar { box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(15, 31, 56, 0.06); border-bottom: 0; }
:root[data-theme="sky"] .main { background: rgba(245, 248, 252, 0.6); backdrop-filter: blur(10px) saturate(1.1); }
:root[data-theme="sky"][data-decor="off"] .main { background: transparent; backdrop-filter: none; }
:root[data-theme="sky"] .brand img { filter: none; }
:root[data-theme="sky"] .brand-text strong { font-family: 'Orbitron', 'Segoe UI', sans-serif; letter-spacing: 0.12em; }
:root[data-theme="sky"] .brand-text span { font-family: var(--font-body); letter-spacing: 0.32em; color: var(--muted); }
:root[data-theme="sky"] .nav-group { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.18em; color: var(--faint); }
:root[data-theme="sky"] .nav a { color: var(--text-2); }
:root[data-theme="sky"] .nav a.active { color: var(--gold); font-weight: 600; }
:root[data-theme="sky"] .nav a.active svg { color: var(--gold); }
:root[data-theme="sky"] .nav a.active::before { background: var(--grad-gold); box-shadow: none; }
:root[data-theme="sky"] .page-title small { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.18em; color: var(--gold); }
:root[data-theme="sky"] .page-title h1, :root[data-theme="sky"] h1 { text-transform: none; letter-spacing: -0.01em; font-weight: 800; }
:root[data-theme="sky"] .user-chip .who span { color: var(--muted); }
:root[data-theme="sky"] .zulu small { color: var(--orange); }

/* ── cards instead of HUD panels ── */
:root[data-theme="sky"] .panel { clip-path: none; border-radius: var(--r-lg); border-color: var(--line); box-shadow: var(--shadow); }
:root[data-theme="sky"] .panel::after, :root[data-theme="sky"] .panel::before { display: none; }
:root[data-theme="sky"] .panel-head h2, :root[data-theme="sky"] .label {
  font: 700 12px var(--font-body); letter-spacing: 0.14em; color: var(--gold);
}
:root[data-theme="sky"] .panel-head h2::before { content: none; }
:root[data-theme="sky"] .panel.hoverable:hover { box-shadow: 0 16px 40px rgba(15, 31, 56, 0.14); border-color: var(--line-strong); }
:root[data-theme="sky"] .stat .label { color: var(--muted); }
:root[data-theme="sky"] .stat .value { font-weight: 800; letter-spacing: -0.01em; }

/* ── buttons: pills like the website ── */
:root[data-theme="sky"] .btn { border-radius: var(--r-full); }
:root[data-theme="sky"] .btn:not(.primary, .gold, .ghost, .danger, .ok, .discord, .on) { border-color: var(--line-strong); background: var(--surface); }
:root[data-theme="sky"] .btn:not(.primary, .gold, .ghost, .danger, .ok, .discord, .on):hover { border-color: var(--gold); color: var(--gold); }
:root[data-theme="sky"] .btn.primary { color: #fff; }
:root[data-theme="sky"] .btn.primary:hover { color: #fff; filter: brightness(1.05); box-shadow: 0 12px 26px rgba(255, 90, 31, 0.38); }
:root[data-theme="sky"] .btn.gold { color: var(--gold); }
:root[data-theme="sky"] .btn.gold:hover { color: #fff; background: var(--gold); }
:root[data-theme="sky"] .btn.ghost { background: transparent; border-color: transparent; }
:root[data-theme="sky"] .btn.ghost:hover { background: var(--surface-hover); border-color: transparent; }
:root[data-theme="sky"] .btn.danger:hover, :root[data-theme="sky"] .btn.ok:hover { color: #fff; }
:root[data-theme="sky"] .btn-group .btn:first-child { border-radius: var(--r-full) 0 0 var(--r-full); }
:root[data-theme="sky"] .btn-group .btn:last-child { border-radius: 0 var(--r-full) var(--r-full) 0; }
:root[data-theme="sky"] .btn-group .btn.on { color: #fff; }
:root[data-theme="sky"] .btn.discord { background: #5865f2; border-color: #5865f2; color: #fff; }

/* ── forms, chips, badges, tables, tabs ── */
:root[data-theme="sky"] :is(input, select, textarea):not([type=checkbox]):not([type=radio]) { background: #fff; border-color: var(--line-strong); }
:root[data-theme="sky"] input:focus, :root[data-theme="sky"] select:focus, :root[data-theme="sky"] textarea:focus { box-shadow: 0 0 0 3px rgba(22, 115, 230, 0.15); }
:root[data-theme="sky"] .chip { background: #fff; border-color: var(--line-strong); }
:root[data-theme="sky"] .chip.on { background: var(--gold); border-color: var(--gold); color: #fff; }
:root[data-theme="sky"] .badge { border-radius: var(--r-full); }
:root[data-theme="sky"] .badge.gold { background: #e8f2fe; color: #0f5fc4; border-color: #cfe3fb; }
:root[data-theme="sky"] .table th { font: 700 11px var(--font-body); letter-spacing: 0.1em; background: var(--surface-2); }
:root[data-theme="sky"] .tabs { background: #fff; border: 1px solid var(--line); border-radius: var(--r-full); padding: 4px; gap: 2px; box-shadow: var(--shadow); width: max-content; max-width: 100%; }
:root[data-theme="sky"] .tab { font: 700 12px var(--font-body); letter-spacing: 0.04em; text-transform: none; border-radius: var(--r-full); padding: 8px 16px; }
:root[data-theme="sky"] .tab.on { background: var(--grad-gold); color: #fff; }
:root[data-theme="sky"] .tab.on::after { content: none; }
:root[data-theme="sky"] .tab.on .count { color: #fff; opacity: 0.85; }
:root[data-theme="sky"] .callout { background: #fff; }
:root[data-theme="sky"] .callout.warn { background: #fff8eb; }
:root[data-theme="sky"] .callout.danger { background: #fef2f2; }
:root[data-theme="sky"] .callout.info { background: #f0f9ff; }
:root[data-theme="sky"] .avatar { color: var(--gold); }
:root[data-theme="sky"] .avatar.lg { border-color: #fff; box-shadow: 0 6px 18px rgba(15, 31, 56, 0.18); }
:root[data-theme="sky"] .server-num { border-radius: var(--r-md); }
:root[data-theme="sky"] .modal-backdrop { background: rgba(6, 24, 52, 0.55); }
:root[data-theme="sky"] .modal-head h2 { text-transform: none; letter-spacing: 0; font-weight: 800; font-size: var(--fs-lg); }
:root[data-theme="sky"] .menu, :root[data-theme="sky"] .search-results { border-color: var(--line); box-shadow: var(--shadow); }
:root[data-theme="sky"] .menu .menu-label, :root[data-theme="sky"] .search-results h4,
:root[data-theme="sky"] .theme-card b, :root[data-theme="sky"] .stats-editor h4 { font-family: var(--font-body); letter-spacing: 0.12em; }
:root[data-theme="sky"] .log { background: #0f1f38; color: #d6e2f2; }
:root[data-theme="sky"] .log .err { color: #fca5a5; } :root[data-theme="sky"] .log .warn { color: #fcd34d; }
:root[data-theme="sky"] .ac-label { background: rgba(255, 255, 255, 0.94) !important; color: #0f1f38 !important; }
:root[data-theme="sky"] .boot { color: #fff; font-family: 'Orbitron', sans-serif; }
:root[data-theme="sky"][data-decor="off"] .boot { color: var(--gold); }

/* ── login: the video at full strength, a white card in the middle (like the website hero) ── */
:root[data-theme="sky"] .login { background: transparent; }
:root[data-theme="sky"][data-decor="off"] .login { background: linear-gradient(180deg, #cfe3fb, #f5f8fc); }
:root[data-theme="sky"] .login-card { border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
:root[data-theme="sky"] .login-brand img { filter: drop-shadow(0 8px 18px rgba(15, 31, 56, 0.25)); }
:root[data-theme="sky"] .login-brand h1 { font-family: 'Orbitron', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
:root[data-theme="sky"] .login-brand p { font-family: var(--font-body); letter-spacing: 0.24em; color: var(--muted); }
:root[data-theme="sky"] .login-foot { color: var(--muted); }

/* the shell sits above the video layer */
.shell, .login { position: relative; z-index: 1; }

@media (max-width: 900px) {
  :root[data-theme="sky"] .main { background: rgba(245, 248, 252, 0.8); backdrop-filter: none; }
  :root[data-theme="sky"] .tabs { width: auto; }
}