/* ============================================================
   theme_sphere.css
   ------------------------------------------------------------
   Visual overlay porting the look-and-feel of
     git@github.com:dgupt-stack/remix-of-observability-sphere.git

   Goal: keep all existing DOM/JS/IDs untouched. We paint over
   the live dashboard's static markup so the Go binary keeps
   serving the same shell, but the visual identity matches the
   deep-space "command room" + holographic-panel theme.

   Layers (load order):
     1. /css/colors_and_type.css   — MD3 ramp (kept for typography)
     2. /css/style.css             — original layout + glass cards
     3. /css/theme_sphere.css      — THIS file, paints on top
   ============================================================ */

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  /* OKLCH palette lifted from the remix repo (src/styles.css) */
  --sphere-bg:        oklch(0.10 0.04 260);
  --sphere-bg-deep:   oklch(0.07 0.03 260);
  --sphere-bg-floor:  oklch(0.05 0.02 260);

  --sphere-panel:     oklch(0.18 0.03 260 / 0.78);
  --sphere-panel-2:   oklch(0.22 0.04 260 / 0.78);
  --sphere-card:      oklch(0.21 0.035 260 / 0.7);

  --sphere-text:      oklch(0.96 0.01 230);
  --sphere-text-mid:  oklch(0.78 0.02 240);
  --sphere-text-dim:  oklch(0.62 0.03 240);

  --sphere-cyan:      oklch(0.82 0.18 200);
  --sphere-magenta:   oklch(0.70 0.22 330);
  --sphere-lime:      oklch(0.88 0.20 130);
  --sphere-amber:     oklch(0.82 0.18  80);
  --sphere-rose:      oklch(0.68 0.24  25);
  --sphere-success:   oklch(0.78 0.17 155);
  --sphere-primary:   oklch(0.78 0.18 195);
  --sphere-accent:    oklch(0.70 0.20 320);

  --sphere-gradient:  linear-gradient(135deg,
    oklch(0.78 0.18 195),
    oklch(0.70 0.22 330));
  --sphere-glow:      0 0 40px oklch(0.78 0.18 195 / 0.35);
  --sphere-shadow:    0 1px 0 oklch(1 0 0 / 0.05) inset,
                      0 20px 40px -20px oklch(0 0 0 / 0.6);
}

/* ─── Base ───────────────────────────────────────────────── */
html, body {
  background: var(--sphere-bg-deep);
  color: var(--sphere-text);
  font-feature-settings: "ss01", "cv11";
}

/* Replace the original ambient backdrop with deep-space gradients +
   subtle stars. The body::before/after rules in style.css are left
   intact so we just darken/replace via additional layers below. */
body::before {
  /* dim the original glow */
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, oklch(0.28 0.10 280 / 0.45), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, oklch(0.28 0.12 200 / 0.35), transparent 70%);
}
body::after {
  /* keep grid but soften */
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 70%);
}

/* ─── Command Room enclosure ────────────────────────────── */
.app {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  perspective: 1600px;
  perspective-origin: 50% 30%;
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, oklch(0.22 0.08 220 / 0.55), transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% -10%, oklch(0.26 0.14 290 / 0.45), transparent 65%),
    linear-gradient(180deg, var(--sphere-bg) 0%, var(--sphere-bg-deep) 60%, var(--sphere-bg-floor) 100%);
  overflow-x: hidden;
}

/* Twinkling stars layer — pure CSS, no DOM additions. */
.app::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, oklch(0.95 0.05 200 / 0.7), transparent 60%),
    radial-gradient(1px 1px at 78% 22%, oklch(0.90 0.10 320 / 0.6), transparent 60%),
    radial-gradient(1px 1px at 42%  8%, oklch(0.95 0.02 230 / 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 12%, oklch(0.95 0.05 200 / 0.5), transparent 60%),
    radial-gradient(1px 1px at 25% 30%, oklch(0.90 0.10 320 / 0.4), transparent 60%),
    radial-gradient(1px 1px at 62% 80%, oklch(0.88 0.20 130 / 0.4), transparent 60%),
    radial-gradient(1px 1px at 8%  72%, oklch(0.95 0.05 200 / 0.5), transparent 60%),
    radial-gradient(1px 1px at 92% 86%, oklch(0.90 0.10 320 / 0.5), transparent 60%);
  opacity: 0.6;
  animation: sphere-twinkle 6s ease-in-out infinite alternate;
}
@keyframes sphere-twinkle { 0% { opacity: 0.35; } 100% { opacity: 0.75; } }

/* Subtle scanline overlay across the whole app. */
.app::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, oklch(1 0 0 / 0.022) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* Vignette at bottom so the floor reads like a control-room floor */
.main { position: relative; z-index: 3; }

/* ─── Topbar — glow + gradient brand ───────────────────── */
.topbar {
  background: linear-gradient(180deg,
    oklch(0.12 0.04 260 / 0.95),
    oklch(0.10 0.03 260 / 0.85));
  border-bottom: 1px solid oklch(from var(--sphere-primary) l c h / 0.18);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 12px 40px -20px oklch(from var(--sphere-primary) l c h / 0.35);
}
.topbar__brand-mark {
  background: var(--sphere-gradient);
  box-shadow:
    0 0 24px oklch(from var(--sphere-primary) l c h / 0.5),
    inset 0 1px 0 oklch(1 0 0 / 0.18);
  color: oklch(0.10 0.04 260);
}
.topbar__title {
  background: var(--sphere-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topbar__chip {
  border-color: oklch(1 0 0 / 0.08);
  background: oklch(0.18 0.03 260 / 0.6);
}
.topbar__chip.is-live {
  border-color: oklch(from var(--sphere-success) l c h / 0.35);
  background: oklch(from var(--sphere-success) l c h / 0.12);
  color: var(--sphere-success);
}
.topbar__chip.is-live .dot {
  background: var(--sphere-success);
  box-shadow: 0 0 10px var(--sphere-success);
  animation: sphere-pulse 1.8s ease-in-out infinite;
}
@keyframes sphere-pulse {
  0%,100% { opacity: 0.85; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.25); }
}
.topbar__user {
  background: var(--sphere-gradient);
  color: oklch(0.10 0.04 260);
  box-shadow: 0 0 16px oklch(from var(--sphere-primary) l c h / 0.5);
}
.topbar__nav button.is-active {
  color: var(--sphere-text);
  border-bottom-color: var(--sphere-primary);
  box-shadow: inset 0 -2px 0 var(--sphere-primary), 0 0 14px oklch(from var(--sphere-primary) l c h / 0.45);
}

/* ─── Holo Panel — applied to every .panel ─────────────── */
.panel {
  position: relative;
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      oklch(0.22 0.04 260 / 0.78),
      oklch(0.14 0.03 260 / 0.85));
  border: 1px solid oklch(from var(--sphere-cyan) l c h / 0.22);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.05) inset,
    0 0 0 1px oklch(0 0 0 / 0.4) inset,
    0 20px 50px -28px oklch(from var(--sphere-cyan) l c h / 0.45),
    0 0 28px -10px oklch(from var(--sphere-cyan) l c h / 0.25);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.panel::before {
  /* gradient border overlay */
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    oklch(from var(--sphere-cyan) l c h / 0.55),
    transparent 35%, transparent 65%,
    oklch(from var(--sphere-cyan) l c h / 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.85;
  z-index: 0;
}
.panel::after {
  /* top hairline glow */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
    oklch(from var(--sphere-cyan) l c h / 0.9), transparent);
  filter: blur(0.5px); opacity: 0.6;
  pointer-events: none; z-index: 1;
}
.panel:hover {
  border-color: oklch(from var(--sphere-cyan) l c h / 0.42);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.08) inset,
    0 0 0 1px oklch(0 0 0 / 0.4) inset,
    0 26px 60px -28px oklch(from var(--sphere-cyan) l c h / 0.6),
    0 0 40px -8px oklch(from var(--sphere-cyan) l c h / 0.35);
}
/* keep panel content above the ::before overlay — but DON'T override
   absolutely-positioned children (e.g. .globe-canvas needs inset:0). */
.panel > *:not(.globe-canvas):not(.globe-overlay) {
  position: relative;
  z-index: 2;
}
/* explicit globe layering: canvas behind, overlay in front, panel
   chrome (::before/::after gradient border) on top of both. */
.globe-panel .globe-canvas  { z-index: 0; }
.globe-panel .globe-overlay { z-index: 2; }
.globe-panel::before        { z-index: 3; }

/* corner ticks — drawn via box-shadow on absolutely-positioned pseudo */
.panel .panel__header::before,
.panel .panel__header::after {
  display: none; /* keep header layout as-is */
}

/* ─── Per-panel accent assignment ──────────────────────── */
/* Each accent recolors --holo through the same gradient + glow vars. */
.center .panel.globe-panel,
.charts .chart-card,
.left .panel.fleet                       { --holo-color: var(--sphere-cyan);    }
.left  #sloPanel                          { --holo-color: var(--sphere-lime);    }
.left  section.panel:nth-of-type(3)       { --holo-color: var(--sphere-amber);   }
.right .panel.incident                    { --holo-color: var(--sphere-magenta); }
.right section.panel:nth-of-type(2)       { --holo-color: var(--sphere-amber);   }
.charts .chart-card:nth-child(1)          { --holo-color: var(--sphere-cyan);    }
.charts .chart-card:nth-child(2)          { --holo-color: var(--sphere-magenta); }
.charts .chart-card:nth-child(3)          { --holo-color: var(--sphere-lime);    }

.panel,
.chart-card {
  /* let per-section accent override base cyan */
  border-color: oklch(from var(--holo-color, var(--sphere-cyan)) l c h / 0.22);
}
.panel::before,
.chart-card::before {
  background: linear-gradient(135deg,
    oklch(from var(--holo-color, var(--sphere-cyan)) l c h / 0.55),
    transparent 35%, transparent 65%,
    oklch(from var(--holo-color, var(--sphere-cyan)) l c h / 0.35));
}
.panel::after,
.chart-card::after {
  background: linear-gradient(90deg, transparent,
    oklch(from var(--holo-color, var(--sphere-cyan)) l c h / 0.9), transparent);
}

/* ─── Chart cards (already styled by style.css) ───────── */
.chart-card {
  position: relative;
  background:
    linear-gradient(180deg,
      oklch(0.22 0.04 260 / 0.78),
      oklch(0.14 0.03 260 / 0.85));
  border: 1px solid oklch(from var(--holo-color, var(--sphere-cyan)) l c h / 0.22);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(120%);
}
.chart-card > * { position: relative; z-index: 2; }

/* ─── KPI strip — "metric card" treatment ─────────────── */
.kpis {
  position: relative;
  z-index: 3;
}
.kpis .kpi,
.kpi {
  position: relative;
  background: linear-gradient(180deg,
    oklch(0.22 0.04 260 / 0.78),
    oklch(0.14 0.03 260 / 0.85));
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.05) inset,
    0 12px 30px -20px oklch(from var(--sphere-primary) l c h / 0.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kpi:hover {
  transform: translateY(-1px);
  border-color: oklch(from var(--sphere-primary) l c h / 0.32);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.08) inset,
    0 20px 40px -20px oklch(from var(--sphere-primary) l c h / 0.5);
}
.kpi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent,
    oklch(from var(--sphere-primary) l c h / 0.8), transparent);
  filter: blur(0.5px); opacity: 0.55;
}
.kpi .kpi__num,
.kpi__num {
  background: var(--sphere-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── Globe panel — keep the canvas, add glow ring ────── */
.globe-panel {
  --holo-color: var(--sphere-cyan);
}
.globe-overlay__title h2 {
  background: var(--sphere-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.globe-stat__num {
  background: var(--sphere-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.globe-canvas {
  /* keep absolute positioning from style.css; add a subtle space-haze
     backdrop so the canvas reads against the panel chrome. */
  background:
    radial-gradient(circle at 50% 50%,
      oklch(0.16 0.05 230 / 0.4),
      oklch(0.06 0.02 260 / 0.85) 70%);
}

/* ─── Service list / SLO list / Alerts feed ─────────── */
.svc-list .svc,
.alerts .alert,
.slo-list .slo {
  border-radius: 10px;
  background: oklch(0.18 0.03 260 / 0.55);
  border: 1px solid oklch(1 0 0 / 0.05);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.svc-list .svc:hover,
.alerts .alert:hover,
.slo-list .slo:hover {
  background: oklch(0.22 0.04 260 / 0.7);
  border-color: oklch(from var(--sphere-primary) l c h / 0.25);
  transform: translateX(1px);
}

/* ─── Incident card — magenta accent ──────────────────── */
.incident { --holo-color: var(--sphere-magenta); }
.incident__title {
  background: linear-gradient(135deg, var(--sphere-magenta), oklch(0.82 0.18 200));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.incident__sev .dot {
  background: var(--sphere-magenta);
  box-shadow: 0 0 12px var(--sphere-magenta);
  animation: sphere-pulse 1.8s ease-in-out infinite;
}

/* ─── Filter bar — same dark glass ────────────────────── */
.filterbar {
  background: oklch(0.10 0.03 260 / 0.85);
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
}
.facet__chips button.is-active,
.facet__chips button[aria-pressed="true"] {
  background: oklch(from var(--sphere-primary) l c h / 0.18);
  border-color: oklch(from var(--sphere-primary) l c h / 0.45);
  color: oklch(0.92 0.05 230);
  box-shadow: 0 0 14px oklch(from var(--sphere-primary) l c h / 0.35);
}

/* ─── Tweaks panel — float glass with accent ──────────── */
.tweaks {
  background: linear-gradient(180deg,
    oklch(0.22 0.04 260 / 0.92),
    oklch(0.14 0.03 260 / 0.95));
  border: 1px solid oklch(from var(--sphere-primary) l c h / 0.3);
  box-shadow:
    0 30px 60px -20px oklch(0 0 0 / 0.7),
    0 0 40px -10px oklch(from var(--sphere-primary) l c h / 0.4);
}

/* ─── Sign-in overlay — already inline-styled by auth.js; we
       add a soft glow on the brand mark + button via a global hook ─ */
#obsSigninOverlay .obs-brand,
#obsSigninOverlay [id^="obs"] button[id="obsSubmitBtn"] {
  /* gradient is already inline; just add a glow halo */
  box-shadow: 0 0 24px oklch(from var(--sphere-primary) l c h / 0.55) !important;
}

/* ─── DEMO banner ──────────────────────────────────────── */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  font: 600 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(0.10 0.04 260);
  background:
    repeating-linear-gradient(
      45deg,
      oklch(0.82 0.18  80 / 0.92) 0 14px,   /* amber */
      oklch(0.74 0.22  60 / 0.92) 14px 28px /* deeper amber */
    );
  border-bottom: 1px solid oklch(0.50 0.18 60 / 0.55);
  box-shadow: 0 6px 22px -10px oklch(0.82 0.18 80 / 0.55);
}
.demo-banner strong {
  font: 800 12px/1 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: oklch(0.08 0.03 260);
}
.demo-banner__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: oklch(0.10 0.04 260);
  box-shadow: 0 0 0 2px oklch(1 0 0 / 0.35),
              0 0 12px oklch(0.10 0.04 260 / 0.6);
  animation: demo-pulse 1.6s ease-in-out infinite;
}
.demo-banner__sep {
  opacity: 0.5;
}
.demo-banner__msg {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: oklch(0.18 0.05 60);
}
.demo-banner__close {
  margin-left: auto;
  appearance: none;
  border: 0;
  background: oklch(0.10 0.04 260 / 0.18);
  color: oklch(0.10 0.04 260);
  font: 600 14px/1 'Manrope', system-ui, sans-serif;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.demo-banner__close:hover {
  background: oklch(0.10 0.04 260 / 0.32);
  transform: scale(1.06);
}
.demo-banner.is-hidden { display: none; }
@keyframes demo-pulse {
  0%,100% { opacity: 0.7; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.18); }
}

/* When the banner is sticky-pinned, push the topbar's sticky offset
   down by its height so they stack cleanly. */
.demo-banner ~ .app .topbar       { top: 32px; }
.demo-banner ~ .app .filterbar    { top: 88px; }

/* ─── Motion preferences ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .app::before,
  .topbar__chip.is-live .dot,
  .incident__sev .dot { animation: none !important; }
}