/* =====================================================================
   TITLE | LABEL: Theme Extras | NOVA Pure White Theme + Hide Everything Toggle (2026-10-20)
   PURPOSE: 1) Widens the theme bar from 3 to 4 themes (VOID / CELESTIAL / TWILIGHT / NOVA) and adds
               the hide-everything toggle (✕ / ✓) at the end of the same bar.
            2) NOVA chrome: the parts of the white theme that are styled by hand (page background,
               top bar, theme bar, background effects). Page colours are re-mapped live by
               static/js/theme_white.js; this sheet is skipped by that engine (id piesThemeExtrasCss).
            3) Hide-everything mode (static/js/hide_all.js): everything fades out except the background
               and the theme bar, which tucks away upward when the mouse leaves the top of the screen.
   LOADED BY: templates/dashboard.html <head>, after dashboard.css.
   ===================================================================== */

/* ---------- 1. Four-theme bar + hide toggle ------------------------------------------------- */
.theme-triple-switch {
  --hide-w: 26px;
  width: 296px;
  grid-template-columns: 1fr 1fr 1fr 1fr var(--hide-w);
}
.theme-triple-switch .triple-switch-slider {
  width: calc((100% - 4px - var(--hide-w)) / 4);
  box-sizing: border-box;   /* keep the 1px border inside, so the slider never spills into the ✕ cell */
}
.theme-triple-switch.theme-white .triple-switch-slider {
  transform: translateX(300%);
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
.theme-triple-switch.theme-white .triple-switch-segment[data-theme="white"] {
  color: #0f172a;
  text-shadow: none;
}

/* Hide-everything toggle: last cell of the bar, split off by a thin divider. */
.theme-hide-toggle {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(148, 163, 184, 0.35);
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background 0.2s ease;
}
.theme-hide-toggle:hover { color: #f1f5f9; background: rgba(148, 163, 184, 0.14); }
.theme-hide-toggle .hide-icon-on { display: none; }
body.pies-hide-all .theme-hide-toggle { color: #22c55e; }
body.pies-hide-all .theme-hide-toggle .hide-icon-off { display: none; }
body.pies-hide-all .theme-hide-toggle .hide-icon-on { display: inline; }

@media (max-width: 768px) {
  .theme-hide-toggle::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 40px; margin-top: -20px;
  }
}
/* Phones: dashboard.css squeezes the bar to 180px (sized for 3 themes). With 4 themes + the toggle
   it needs ~270px or the labels run together, so widen it (never wider than its row). */
@media (max-width: 768px) {
  .theme-triple-switch { width: min(272px, 100%) !important; --hide-w: 26px; }
}

/* ---------- 2. NOVA pure white chrome ---------------------------------------------------- */
html:has(body.pies-theme-white),
body.pies-theme-white {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a;
  color-scheme: light;
}

/* Animated background effects: flip the whole layer (dark becomes white, neon becomes deep ink /
   pastel, hues kept) instead of re-colouring each effect. Every effect keeps working, and the
   student's own strength setting (inline opacity from applyDashboardPattern) still applies. */
body.pies-theme-white #circuitBgLayer {
  filter: invert(1) hue-rotate(180deg);
}

/* Script-drawn pictures the colour engine can't reach (it re-colours CSS, not canvas pixels):
   drawing boards and microphone waveforms, plus drawn SVG pictures (marked data-pies-flip by
   theme_white.js), are flipped like the background (dark -> white,
   neon strokes -> deep ink, hues kept). Charts are re-coloured by the engine itself, and game
   scenes and PDF pages are pictures, so those are left as they are. */
body.pies-theme-white #crewWhiteboardCanvas,
body.pies-theme-white #adminWbCanvas,
body.pies-theme-white #s1Waveform,
body.pies-theme-white #s2PitchCanvas,
body.pies-theme-white #liveRecordWaveform,
body.pies-theme-white canvas[id^="waveform_"],
body.pies-theme-white svg[data-pies-flip] {
  filter: invert(1) hue-rotate(180deg);
}

/* Top bar */
body.pies-theme-white header.docked-hud-student {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid transparent !important;
}
body.pies-theme-white header.docked-hud-student.hud-scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
}

/* Theme bar in NOVA */
body.pies-theme-white .theme-triple-switch {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
body.pies-theme-white .triple-switch-segment { color: #64748b !important; text-shadow: none !important; }
body.pies-theme-white .triple-switch-segment:hover { color: #0f172a !important; }
/* Selected NOVA = solid ink pill with white text: the clearest "selected" mark on a light bar. */
body.pies-theme-white .theme-triple-switch.theme-white .triple-switch-segment[data-theme="white"] { color: #ffffff !important; }
body.pies-theme-white .theme-triple-switch.theme-white .triple-switch-slider {
  background: #0f172a !important;
  border: 1px solid #0f172a !important;
  box-shadow: none !important;
}
body.pies-theme-white .theme-hide-toggle { border-left-color: #cbd5e1; color: #64748b; }
body.pies-theme-white .theme-hide-toggle:hover { color: #0f172a; background: #e2e8f0; }
body.pies-theme-white.pies-hide-all .theme-hide-toggle { color: #15803d; }

/* Top-panel chevron (▲/▼): its colour comes from --text-dim, which other sheets also use as a
   background, so the engine can't tell which it is. Set it by hand. */
body.pies-theme-white .hud-chevron-toggle {
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  text-shadow: none !important;
}
body.pies-theme-white .hud-chevron-toggle:hover { color: #0f766e !important; border-color: #0f766e !important; background: #f0fdfa !important; }

/* Tabs: quiet white tabs, the active one takes the deep version of its own colour. */
body.pies-theme-white .chamfer-tab-exact {
  background: #ffffff !important;
  color: #475569 !important;
  text-shadow: none !important;
}
body.pies-theme-white .chamfer-tab-exact:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
body.pies-theme-white .chamfer-tab-exact.active,
body.pies-theme-white .chamfer-tab-exact.active-tab {
  background: #f8fafc !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Scrollbars */
body.pies-theme-white { scrollbar-color: #cbd5e1 #ffffff; }
body.pies-theme-white ::-webkit-scrollbar-track { background: #ffffff !important; }
body.pies-theme-white ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-color: #ffffff !important; }

/* Text selection */
body.pies-theme-white ::selection { background: rgba(15, 118, 110, 0.18); color: #0f172a; }

/* ---------- 3. Hide-everything mode ---------------------------------------------------- */
/* Every top-level part of the page fades out; the background layer and the dock stay. */
body.pies-hide-all > *:not(#circuitBgLayer):not(.pies-hideall-dock):not(script):not(style):not(link) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s !important;
}
html:has(body.pies-hide-all) { overflow: hidden !important; }
/* Show the background at full strength: drop the dimming scrim over the effects. */
body.pies-hide-all .circuit-bg-layer::after { opacity: 0 !important; transition: opacity 0.35s ease; }

/* The dock that holds the theme bar while everything is hidden. */
.pies-hideall-dock {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 2147483000;
  transform: translate(-50%, 0);
  transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  pointer-events: auto;
}
.pies-hideall-dock.tucked {
  transform: translate(-50%, calc(-100% - 20px));
  opacity: 0;
}