/*
  Aerodesk — HUD skin (PRIMARY DESIGN).
  ========================================================================
  EVERYTHING here is scoped under `html.skin-hud`, which src/bootstrap.js
  adds by default on every host (production + beta). Users can opt out per
  browser with localStorage.aerodeskSkin = "off" → falls back to the
  classic main.css chrome. styles/main.css is untouched, so the classic
  shell is still available.

  PER-USER OPT-OUT (kept for parity / fallback):
    Console:  localStorage.setItem('aerodeskSkin','off'); location.reload();

  Design intent: deep navy glass, cyan neon frames + glow, glowing
  uppercase chrome titles, interaction transitions. Data stays legible:
  tables/pills keep their meaning and only get accents, not glow behind
  the numbers.

  Additive only — colors, borders, shadows, backgrounds, transitions. No
  display/position/sizing changes, so layouts can't break. No global
  ::before/::after (would clobber resize-handle pseudos on widget cards).
*/

html.skin-hud {
  --hud-cyan: #38e0ff;
  --hud-cyan-line: rgba(56, 224, 255, 0.30);
  --hud-cyan-faint: rgba(56, 224, 255, 0.10);
  --hud-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===================================================================== */
/* CHROME — top bar + sidebar                                            */
/* ===================================================================== */

html.skin-hud .app-topbar {
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.09), rgba(56, 224, 255, 0) 64px),
    var(--panel-deep, #0b1330);
  border-bottom: 1px solid rgba(56, 224, 255, 0.38);
  box-shadow: 0 2px 20px -6px rgba(56, 224, 255, 0.45);
}

html.skin-hud .app-sidebar {
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.05), rgba(56, 224, 255, 0) 220px),
    var(--panel-deep, #0b1330);
  border-right: 1px solid rgba(56, 224, 255, 0.22);
}
html.skin-hud .brand-sidebar h1 {
  text-shadow: 0 0 12px rgba(56, 224, 255, 0.45);
  letter-spacing: 0.04em;
}
html.skin-hud .sidebar-section {
  color: rgba(56, 224, 255, 0.62);
  letter-spacing: 0.14em;
}
html.skin-hud .nav-link {
  border-radius: 8px;
  transition: background 0.18s var(--hud-ease), color 0.18s var(--hud-ease),
    box-shadow 0.18s var(--hud-ease), transform 0.12s var(--hud-ease);
}
html.skin-hud .nav-link:hover {
  background: rgba(56, 224, 255, 0.08);
  color: #eaffff;
  transform: translateX(2px);
}
html.skin-hud .nav-link.active {
  background: linear-gradient(90deg, rgba(56, 224, 255, 0.18), rgba(56, 224, 255, 0.02));
  color: #eaffff;
  /* Left accent bar + faint frame + glow, all via box-shadow so no pseudo
     is needed (avoids clobbering anything). */
  box-shadow:
    inset 3px 0 0 var(--hud-cyan),
    inset 0 0 0 1px rgba(56, 224, 255, 0.25),
    0 0 14px rgba(56, 224, 255, 0.10);
}
html.skin-hud .nav-link.active .nav-link-icon {
  filter: drop-shadow(0 0 5px rgba(56, 224, 255, 0.55));
}

/* ===================================================================== */
/* CARDS                                                                  */
/* ===================================================================== */

html.skin-hud .card {
  border: 1px solid rgba(56, 224, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.05), rgba(56, 224, 255, 0) 120px),
    var(--panel-deep, #0b1330);
  box-shadow:
    inset 0 0 0 1px rgba(56, 224, 255, 0.06),
    0 0 14px rgba(56, 224, 255, 0.06);
  transition: box-shadow 0.22s var(--hud-ease), border-color 0.22s var(--hud-ease);
}
html.skin-hud .card:hover {
  border-color: rgba(56, 224, 255, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(56, 224, 255, 0.12),
    0 0 22px rgba(56, 224, 255, 0.16),
    0 0 50px rgba(56, 224, 255, 0.07);
}
html.skin-hud .card > .card-header {
  border-bottom: 1px solid rgba(56, 224, 255, 0.22);
  box-shadow: 0 6px 10px -9px var(--hud-cyan);
}
html.skin-hud .card > .card-header h2,
html.skin-hud .card > .card-header h3,
html.skin-hud .card > .card-header .card-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d8f6ff;
  text-shadow: 0 0 9px rgba(56, 224, 255, 0.40);
}

/* Coverage Trend card — HUD corner-bracket FRAME on all four corners.
   Drawn as eight cyan stubs (a horizontal + vertical arm per corner) on a
   single ::before, so it reads as an intentional "framed instrument"
   rather than a lone hook. Safe: not a resizable widget, so there's no
   resize-handle pseudo to clobber. */
html.skin-hud #coverageTrendCardUniversal::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--hud-cyan), var(--hud-cyan)),  /* TL — top arm   */
    linear-gradient(var(--hud-cyan), var(--hud-cyan)),  /* TL — left arm  */
    linear-gradient(var(--hud-cyan), var(--hud-cyan)),  /* TR — top arm   */
    linear-gradient(var(--hud-cyan), var(--hud-cyan)),  /* TR — right arm */
    linear-gradient(var(--hud-cyan), var(--hud-cyan)),  /* BL — bot arm   */
    linear-gradient(var(--hud-cyan), var(--hud-cyan)),  /* BL — left arm  */
    linear-gradient(var(--hud-cyan), var(--hud-cyan)),  /* BR — bot arm   */
    linear-gradient(var(--hud-cyan), var(--hud-cyan));  /* BR — right arm */
  background-position:
    top left, top left,
    top right, top right,
    bottom left, bottom left,
    bottom right, bottom right;
  background-size:
    18px 2px, 2px 18px,
    18px 2px, 2px 18px,
    18px 2px, 2px 18px,
    18px 2px, 2px 18px;
  filter: drop-shadow(0 0 3px rgba(56, 224, 255, 0.5));
}

/* Scheduler / day section headers — cyan accent. */
html.skin-hud .day-section-title {
  border-left-color: var(--hud-cyan);
}

/* ===================================================================== */
/* BUTTONS + TABS                                                         */
/* ===================================================================== */

html.skin-hud .btn {
  transition: background 0.18s var(--hud-ease), border-color 0.18s var(--hud-ease),
    box-shadow 0.18s var(--hud-ease), transform 0.08s ease;
}
html.skin-hud .btn:not(:disabled):active {
  transform: translateY(1px);
}
html.skin-hud .btn.primary,
html.skin-hud .bid-btn-primary,
html.skin-hud .btn-attn {
  background: linear-gradient(180deg, rgba(56, 224, 255, 0.24), rgba(56, 224, 255, 0.10));
  border: 1px solid rgba(56, 224, 255, 0.60);
  color: #eaffff;
  box-shadow: 0 0 14px rgba(56, 224, 255, 0.20), inset 0 0 10px rgba(56, 224, 255, 0.10);
  text-shadow: 0 0 8px rgba(56, 224, 255, 0.40);
}
html.skin-hud .btn.primary:not(:disabled):hover,
html.skin-hud .bid-btn-primary:not(:disabled):hover,
html.skin-hud .btn-attn:not(:disabled):hover {
  border-color: var(--hud-cyan);
  box-shadow: 0 0 24px rgba(56, 224, 255, 0.36), inset 0 0 12px rgba(56, 224, 255, 0.18);
}
html.skin-hud .btn.secondary,
html.skin-hud .bid-btn-secondary {
  border-color: rgba(56, 224, 255, 0.40);
  background: rgba(56, 224, 255, 0.05);
}
html.skin-hud .btn.secondary:not(:disabled):hover,
html.skin-hud .bid-btn-secondary:not(:disabled):hover {
  border-color: rgba(56, 224, 255, 0.72);
  background: rgba(56, 224, 255, 0.11);
}

html.skin-hud .tab {
  transition: background 0.16s var(--hud-ease), color 0.16s var(--hud-ease),
    border-color 0.16s var(--hud-ease), box-shadow 0.16s var(--hud-ease);
}
html.skin-hud .tab:hover {
  color: #eaffff;
}
html.skin-hud .tab.active {
  border-color: rgba(56, 224, 255, 0.70);
  color: #eaffff;
  box-shadow: 0 0 12px rgba(56, 224, 255, 0.28), inset 0 0 8px rgba(56, 224, 255, 0.14);
}

/* ===================================================================== */
/* FORM FIELDS (text-like inputs / selects / textareas)                  */
/* ===================================================================== */

html.skin-hud input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
html.skin-hud select,
html.skin-hud textarea {
  border: 1px solid rgba(56, 224, 255, 0.22);
  background: rgba(56, 224, 255, 0.04);
  /* The HUD field background is dark, so force light text. Without this,
     any control NOT already covered by the base `color: var(--text)`
     rules (e.g. the shift-edit dialog's user/date/status selects, which
     previously relied on the browser's white field + black text) renders
     black-on-dark and is unreadable. */
  color: var(--text);
  transition: border-color 0.16s var(--hud-ease), box-shadow 0.16s var(--hud-ease),
    background 0.16s var(--hud-ease);
}
/* The dropdown popup itself (native <option>s) — give it a dark panel +
   light text so the open list matches the field. Honored by Chromium /
   Firefox on Win/Linux; macOS uses the system menu (already legible). */
html.skin-hud select option,
html.skin-hud select optgroup {
  background: var(--panel-deep, #0b1330);
  color: var(--text);
}
html.skin-hud input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):focus,
html.skin-hud select:focus,
html.skin-hud textarea:focus {
  border-color: var(--hud-cyan);
  background: rgba(56, 224, 255, 0.07);
  box-shadow: 0 0 0 1px rgba(56, 224, 255, 0.40), 0 0 14px rgba(56, 224, 255, 0.18);
  outline: none;
}

/* ===================================================================== */
/* TABLES — accents only; data stays legible                             */
/* ===================================================================== */

html.skin-hud th {
  color: rgba(56, 224, 255, 0.85);
  border-bottom-color: rgba(56, 224, 255, 0.25) !important;
  letter-spacing: 0.04em;
}
html.skin-hud tbody tr {
  transition: background 0.12s ease;
}
html.skin-hud tbody tr:hover {
  background: rgba(56, 224, 255, 0.05);
}

/* ===================================================================== */
/* SHIFT PILLS — keep status meaning, add a hover glow                    */
/* ===================================================================== */

html.skin-hud .shift-pill {
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
html.skin-hud .shift-pill.supervisor-editable:hover {
  box-shadow: 0 0 12px rgba(56, 224, 255, 0.20);
}

/* ===================================================================== */
/* DIALOGS — glass frame + blurred backdrop                              */
/* ===================================================================== */

html.skin-hud .shift-dialog {
  background:
    linear-gradient(180deg, rgba(56, 224, 255, 0.06), rgba(56, 224, 255, 0) 150px),
    var(--panel-deep, #0b1330);
  border: 1px solid rgba(56, 224, 255, 0.42);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(56, 224, 255, 0.10),
    0 0 40px rgba(56, 224, 255, 0.15),
    0 22px 60px rgba(0, 0, 0, 0.60);
}
html.skin-hud .shift-dialog::backdrop {
  background: rgba(2, 8, 20, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Shift-edit dialog action row. At the base button padding the four
   buttons (Move to open / Remove / Cancel / Save) overflow the 420px
   dialog and wrap into an awkward 2×2 stack. Trim their size + gaps so
   they sit on a single row. */
html.skin-hud .shift-dialog-actions .btn {
  padding: 7px 11px;
  font-size: 0.85rem;
  border-radius: 8px;
}
html.skin-hud .shift-dialog-actions { gap: 8px; }
html.skin-hud .shift-dialog-actions-danger,
html.skin-hud .shift-dialog-actions-main { gap: 6px; }

/* ===================================================================== */
/* LOGIN — subtle glow on the bespoke SVG screen (no hard frame)         */
/* ===================================================================== */

html.skin-hud .login-card h2,
html.skin-hud .login-card .login-title {
  text-shadow: 0 0 12px rgba(56, 224, 255, 0.45);
}

/* ===================================================================== */
/* SCROLLBARS — thin cyan                                                 */
/* ===================================================================== */

html.skin-hud *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.skin-hud *::-webkit-scrollbar-track {
  background: rgba(56, 224, 255, 0.04);
}
html.skin-hud *::-webkit-scrollbar-thumb {
  background: rgba(56, 224, 255, 0.28);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html.skin-hud *::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 224, 255, 0.48);
}

/* ===================================================================== */
/* MOTION — honor reduced-motion for everything we animate               */
/* ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.skin-hud .nav-link,
  html.skin-hud .btn,
  html.skin-hud .tab,
  html.skin-hud .card,
  html.skin-hud input,
  html.skin-hud select,
  html.skin-hud textarea,
  html.skin-hud tbody tr,
  html.skin-hud .shift-pill {
    transition: none;
  }
  html.skin-hud .nav-link:hover {
    transform: none;
  }
}

/* ---- Seamless: drop the legacy blue accents ----
   The per-view blue accent rail at the top of every card and the animated
   blue topbar sweep clash with the cyan HUD frame — remove them so the
   theme reads as one continuous surface. WIP cards keep their own striped
   ::before marker (excluded via :not(.is-wip)). */
html.skin-hud .view .card:not(.is-wip)::before { display: none; }
html.skin-hud .topbar-accent-sweep { display: none; }

/* Daily OPs Brief — HUD accents. The region blocks read as glowing
   left-rail entries consistent with the HUD frame language. */
html.skin-hud .opsbrief-region {
  border-left-color: var(--view-accent);
}
html.skin-hud .opsbrief-region-text:focus {
  box-shadow: 0 0 0 1px var(--view-accent-soft);
}
html.skin-hud .opsbrief-region-label {
  text-shadow: 0 0 8px var(--view-accent-soft);
}