/* ============================================================================
   Apollo Shell — constellation-as-the-page redesign (Phase 1)
   - dark only (light theme retired)
   - left sidebar hidden, replaced by a floating crystal dock
   - space backdrop behind every view so panels float "over the constellation"
   Loaded last so it overrides styles.css where needed.
   ============================================================================ */

/* ---- force dark, retire the light/dark toggle UI ---- */
html:not(.theme-dark){ /* safety: should never happen now, but keep dark */ }
.theme-toggle{ display:none !important; }

/* ---- space backdrop (sits behind all views; constellation feel everywhere) ---- */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:#000000;   /* pure black space — the only light is the sun in-scene */
}
#starfield-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ---- hide the old sidebar; main goes full-bleed ----
   The shell is a CSS grid (250px sidebar + 1fr main). Hiding the sidebar leaves
   the grid with an empty 250px column, so collapse it to a single column. */
#view-dashboard .sidebar{ display:none !important; }
#view-dashboard.active{ grid-template-columns: 1fr !important; }
#view-dashboard .main{
  margin-left:0 !important; width:100% !important; max-width:100% !important;
  position:relative; z-index:1;
}

/* give NON-constellation views breathing room above the dock.
   On the constellation we want true full-bleed (no bottom gap). */
body:not(.apollo-active) .main{ padding-bottom:120px !important; }

/* ============================================================================
   FULL-BLEED CONSTELLATION
   The Apollo shell is a flex column (header + sections). Make the constellation
   block flex-fill the viewport so the stage goes edge-to-edge with no gap.
   ============================================================================ */
body.apollo-active #view-apollo > .apollo-shell{ padding:0 !important; gap:0 !important; min-height:100vh; position:relative; }
/* QA / Underperformers are no longer top tabs — they're dock buttons now */
body.apollo-active .apollo-section-nav{ display:none !important; }
/* The constellation canvas is pinned to the WHOLE viewport so nothing can leave
   a band at the top. Everything else (header, search, dock) floats above it. */
body.apollo-active .apollo-constellation-block{ position:static; margin:0 !important; }
body.apollo-active .constellation-stage{
  position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important;
  min-height:100vh !important; border-radius:0 !important; border:none !important; z-index:1;
}
/* header (APOLLO v5.0 + RIP ANDY + SYSTEM ONLINE) floats over the constellation,
   with comfortable inset so the badges aren't jammed against the top edge.
   absolute (not fixed) so it stays inside the apollo-shell stacking context and
   paints ABOVE the fixed canvas; high z-index guarantees it's on top. */
body.apollo-active .apollo-header{
  position:absolute !important; top:0; left:0; right:0; z-index:40 !important;
  margin:0 !important; padding:16px 24px !important; min-height:0 !important;
  background:transparent !important; pointer-events:none;
}
body.apollo-active .apollo-header > *{ pointer-events:auto; }
/* nudge the corner badges off the very edge (abs-pos children ignore header padding) */
body.apollo-active .apollo-mission-block{ top:14px; left:20px; }
body.apollo-active .apollo-status-block{ top:14px; right:20px; }
/* keep the "Apollo say a client name" bar clear of the APOLLO v5.0 badge */
body.apollo-active .constellation-search{ top:72px !important; }

/* ============================================================================
   QA / UNDERPERFORMERS as crystal overlay panels (opened from the dock)
   ============================================================================ */
/* hidden while on the constellation */
body.apollo-active [data-apollo-section="help"],
body.apollo-active [data-apollo-section="underperformers"],
body.apollo-active [data-apollo-section="payments"]{ display:none !important; }
/* shown as a centered crystal panel when its dock button is active */
body.apollo-panel-help [data-apollo-section="help"],
body.apollo-panel-underperformers [data-apollo-section="underperformers"],
body.apollo-panel-payments [data-apollo-section="payments"]{
  display:block !important;
  /* !important needed: `.apollo-shell > :not(...)` (specificity 0,3,0) otherwise
     pins these to position:relative/z-index:1 and the panel renders behind everything. */
  /* Center with inset+margin:auto (NOT translate -50%): a translate-based center
     lands on half-pixels and, combined with backdrop-filter, blurs the text. */
  /* Leave 104px clear at the bottom so the floating dock never covers content,
     and fade the last rows out (mask) so the scroll edge looks soft, not cut. */
  position:fixed !important; inset:18px 0 104px !important; margin:auto !important; transform:none !important;
  width:min(1600px,95vw); height:max-content; max-height:calc(100vh - 150px); overflow:auto; z-index:70 !important;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  /* Solid, opaque panel (no backdrop-filter on the panel itself): a large
     backdrop-blur promotes the panel to a GPU layer that rasterizes its TEXT
     soft/blurry. The blurred constellation behind comes from #apollo-panel-backdrop. */
  background:rgba(12,19,38,1) !important; border:1px solid rgba(120,160,255,.3); border-radius:22px;
  padding:28px;
  box-shadow:0 36px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.08);
}
/* The panel lives inside <main> (position:relative; z-index:1), a stacking
   context BELOW #apollo-panel-backdrop (z65) — so the backdrop painted on top and
   stole the clicks (closing the panel). Lift <main> above the backdrop while a
   panel is open so the panel (and its buttons) are actually clickable. */
body.apollo-panel-help main.main,
body.apollo-panel-underperformers main.main,
body.apollo-panel-payments main.main{ z-index:66 !important; }

/* Expanded QA Center inside the panel: lay the 3 cards out as a responsive flex
   row that fills the (now wider) panel. The original absolute ±px spread was built
   for the old full-width Apollo page and clipped / cramped the columns. */
body.apollo-panel-help [data-apollo-section="help"][data-qa-layout="expanded"] .apollo-qa-carousel{
  display:flex !important; gap:22px !important; height:auto !important; overflow:visible !important;
  align-items:flex-start !important; justify-content:stretch !important; padding:4px 2px;
}
body.apollo-panel-help [data-apollo-section="help"][data-qa-layout="expanded"] .apollo-tool{
  position:static !important; transform:none !important; left:auto !important; top:auto !important;
  flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important;
  max-height:calc(100vh - 250px) !important; overflow:auto !important;
  opacity:1 !important; filter:none !important;
}
/* Blur the constellation behind the panel by filtering the canvas ITSELF, not via
   backdrop-filter: a full-screen backdrop-filter + the fixed panel/dock on top made
   Chromium render the whole overlay blurry. This blurs only the constellation. */
body.apollo-panel-help .constellation-stage,
body.apollo-panel-underperformers .constellation-stage,
body.apollo-panel-payments .constellation-stage{ filter:blur(7px) !important; }
/* The full-screen constellation sits at z-index 9000; drop it below the panel. */
body.apollo-panel-help .constellation-stage.is-fullscreen,
body.apollo-panel-underperformers .constellation-stage.is-fullscreen,
body.apollo-panel-payments .constellation-stage.is-fullscreen{ z-index:1 !important; }

/* Plain dim overlay (NO backdrop-filter — see note above). */
#apollo-panel-backdrop{ display:none; position:fixed; inset:0; z-index:65; background:rgba(4,7,14,.62); }
#apollo-panel-close{ display:none; position:fixed; z-index:73; top:max(7vh,18px); right:max(4vw,18px);
  width:42px; height:42px; border-radius:50%; align-items:center; justify-content:center;
  background:rgba(16,24,44,.95); border:1px solid rgba(120,160,255,.35); color:#dce6fb; font-size:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.5); cursor:pointer; }
#apollo-panel-close:hover{ background:rgba(40,54,86,.9); }
body.apollo-panel-help #apollo-panel-backdrop,
body.apollo-panel-underperformers #apollo-panel-backdrop,
body.apollo-panel-payments #apollo-panel-backdrop{ display:block; }
body.apollo-panel-help #apollo-panel-close,
body.apollo-panel-underperformers #apollo-panel-close,
body.apollo-panel-payments #apollo-panel-close{ display:flex; }

/* the Apollo "tools" dock items (QA / Under) get a subtle accent */
.dock-item[data-sec]{ background:rgba(34,52,92,.5); }
.dock-item[data-sec].active{ background:linear-gradient(135deg,#6366f1,#22d3ee); }

/* ============================================================================
   CRYSTAL DOCK
   ============================================================================ */
#apollo-dock{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:6px; padding:11px 14px; z-index:80;
  border-radius:22px;
  /* Glossy clear crystal — neutral, no color. */
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(26px) saturate(135%); -webkit-backdrop-filter:blur(26px) saturate(135%);
  box-shadow:0 20px 60px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.30),
             inset 0 -1px 0 rgba(255,255,255,.05);
  max-width:calc(100vw - 32px);
}
#apollo-dock .dock-sep{ width:1px; height:38px; margin:0 4px; background:rgba(255,255,255,.14); }
.dock-item{
  appearance:none; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05);
  width:56px; height:56px; border-radius:15px; cursor:pointer; color:#e8eef7;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.dock-item .dock-ico{ font-size:20px; line-height:1; }
.dock-item .dock-ico svg{ width:21px; height:21px; }
.dock-item .dock-lbl{ font-size:8.5px; font-weight:700; letter-spacing:.2px; color:#cfd8e6; white-space:nowrap; }
.dock-item:hover{ transform:translateY(-7px); background:rgba(255,255,255,.13);
  box-shadow:0 12px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.24); }
.dock-item.active{
  background:rgba(255,255,255,.20); color:#fff; border-color:rgba(255,255,255,.5);
  box-shadow:0 10px 26px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -2px 7px rgba(255,255,255,.08);
}
.dock-item.active .dock-lbl{ color:#fff; }
/* tooltip on hover */
.dock-item::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:rgba(18,22,30,.92); border:1px solid rgba(255,255,255,.18); color:#eef2f8;
  font-size:11px; font-weight:600; padding:5px 9px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .14s; box-shadow:0 8px 20px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.dock-item:hover::after{ opacity:1; }
.dock-item.dock-account{ background:transparent; border:1px solid rgba(255,255,255,.22); padding:0; overflow:hidden; }
.dock-item.dock-account .dock-avatar{ width:100%; height:100%; border-radius:14px; object-fit:cover; display:block; }

/* dock stays visible in full-screen focus mode but lifts slightly so it never
   collides with the client popup; tweak here if it ever overlaps. */
body.cnst-fullscreen #apollo-dock{ bottom:18px; }

@media (max-width:760px){
  .dock-item{ width:48px; height:48px; }
  .dock-item .dock-lbl{ display:none; }
}