/* ============================================================================
   MVP1 — GLASS SKIN (Glassmorphism)
   ============================================================================
   Frosted, translucent panels over a vibrant gradient. The frosting is real:
   surfaces read `backdrop-filter: var(--t-panel-blur)` in app.css, and this skin
   sets --t-panel-blur to an actual blur (other skins set it to `none`).
   Dark-tinted glass + light text = readable with OR without blur support.
   ============================================================================ */

:root {

  /* -- Frost / blur (consumed by app.css backdrop-filter) ------------------ */
  --t-panel-blur:    blur(16px) saturate(160%);
  --t-panel-shadow:  none;                          /* neumorphic extrusion off (Neumorph turns it on) */

  /* -- Page backgrounds --------------------------------------------------- */
  --t-bg:            #221a4d;
  /* Surfaces back dense text (cards, dropdown menus, modals) — kept mostly opaque so
     they stay readable over the busy gradient. The airy translucent look lives on
     --t-panel (weather/update/nav) instead. */
  --t-surface:       rgba(26, 23, 52, 0.94);   /* dark glass — readable */
  --t-surface-2:     rgba(34, 30, 64, 0.96);   /* dropdown menus */
  --t-surface-3:     rgba(44, 34, 68, 0.92);
  --t-surface-hover: rgba(255, 255, 255, 0.08);

  /* -- Text --------------------------------------------------------------- */
  --t-text:          #f4f2ff;
  --t-text-muted:    rgba(244, 242, 255, 0.66);
  --t-text-subtle:   rgba(244, 242, 255, 0.48);
  --t-text-inverse:  #1a1030;

  /* -- Borders ------------------------------------------------------------ */
  --t-border:        rgba(255, 255, 255, 0.28);
  --t-border-light:  rgba(255, 255, 255, 0.12);

  /* -- Health / readings surface (weather, cache, readings, bottom nav) ----- */
  --t-panel:         rgba(28, 25, 56, 0.40);   /* translucent frosted card */
  --t-panel-border:  rgba(255, 255, 255, 0.18);
  --t-muted:         rgba(244, 242, 255, 0.66);

  /* -- Health charts ------------------------------------------------------- */
  --t-chart-surface:  rgba(20, 18, 45, 0.55);
  --t-chart-text:     #e8e6f5;
  --t-chart-muted:    #a9a3c8;
  --t-chart-grid:     rgba(255, 255, 255, 0.10);
  --t-chart-track:    rgba(255, 255, 255, 0.08);
  --t-chart-border:   rgba(255, 255, 255, 0.14);
  --t-chart-activity: #c4b5fd;
  --t-chart-hr:       #fb7185;
  /* Google-Health sleep palette: Awake=pink, Restless=green, REM=light-blue, Light=blue, Deep=purple */
  --t-sleep-deep:     #8b6dff;
  --t-sleep-light:    #5b8ff9;
  --t-sleep-rem:      #86c8f0;
  --t-sleep-restless: #5cc27a;
  --t-sleep-wake:     #f28ba0;

  /* -- Brand -------------------------------------------------------------- */
  --t-brand:         #c4b5fd;

  /* -- Modal title bar ----------------------------------------------------- */
  --t-modal-header-bg:   rgba(124, 58, 237, 0.85);
  --t-modal-header-text: #ffffff;
  --t-modal-close-hover: #f43f5e;

  /* -- Tab bar ------------------------------------------------------------- */
  --t-tab-border:        rgba(255, 255, 255, 0.20);
  --t-tab-active-border: rgba(255, 255, 255, 0.40);
  --t-tab-inactive-bg:   rgba(255, 255, 255, 0.08);
  --t-tab-inactive-text: rgba(244, 242, 255, 0.7);
  --t-tab-hover-bg:      rgba(255, 255, 255, 0.16);
  --t-tab-hover-text:    #ffffff;
  --t-tab-active-bg:     rgba(255, 255, 255, 0.18);
  --t-tab-active-text:   #ffffff;
  --t-tab-content-bg:    rgba(28, 25, 56, 0.40);

  /* -- Device/AV sub-tabs -------------------------------------------------- */
  --t-subtab-inactive-bg:   rgba(255, 255, 255, 0.06);
  --t-subtab-active-bg:     rgba(124, 58, 237, 0.28);
  --t-subtab-active-text:   #ffffff;
  --t-subtab-pane-bg:       rgba(28, 25, 56, 0.40);
  --t-subtab-pane-radius:   0 10px 10px 10px;

  /* -- AV pane specific ---------------------------------------------------- */
  --t-av-transcript-bg:    rgba(40, 36, 74, 0.5);
  --t-av-transcript-border:rgba(255, 255, 255, 0.18);
  --t-av-transcript-empty: rgba(244, 242, 255, 0.5);
  --t-av-label-color:      #c4b5fd;
  --t-av-track-bg:         rgba(255, 255, 255, 0.10);

  /* -- Session player (full-screen dark overlay) --------------------------- */
  --t-player-bg:           #0c0a20;
  --t-player-text:         #e8ecf5;
  --t-player-save-bg:      rgba(255, 255, 255, 0.08);
  --t-player-save-border:  rgba(255, 255, 255, 0.14);
  --t-player-abort-text:   #fca5a5;
  --t-player-abort-bg:     rgba(239, 68, 68, 0.2);
  --t-player-abort-border: rgba(239, 68, 68, 0.35);

  /* -- EEG canvas/chart border --------------------------------------------- */
  --t-eeg-chart-border:    rgba(167, 139, 250, 0.3);
  --t-spectral-bg:         #0a0a1a;

  /* -- Session library buttons --------------------------------------------- */
  --t-lib-btn-bg:          rgba(255, 255, 255, 0.10);
  --t-lib-btn-border:      rgba(255, 255, 255, 0.22);
  --t-lib-btn-text:        #e8e6f5;
  --t-lib-btn-hover-bg:    rgba(255, 255, 255, 0.18);
  --t-lib-btn-hover-border:rgba(255, 255, 255, 0.4);

  /* -- Status badges ------------------------------------------------------- */
  --t-status-analyzed-bg:  rgba(34, 197, 94, 0.18);
  --t-status-analyzed-text:#4ade80;
  --t-status-completed-bg: rgba(96, 165, 250, 0.18);
  --t-status-completed-text:#93c5fd;
  --t-status-other-bg:     rgba(156, 163, 175, 0.18);
  --t-status-other-text:   #cbd5e1;

  /* -- Sim button active --------------------------------------------------- */
  --t-sim-active-bg:       rgba(245, 158, 11, 0.25);
  --t-sim-active-border:   #f59e0b;
  --t-sim-active-text:     #fbbf24;

  /* -- Video overlay ------------------------------------------------------- */
  --t-video-overlay-bg:    #000000;
  --t-smile-bar-bg:        rgba(80, 80, 80, 0.55);
  --t-smile-bar-smiling:   rgba(200, 40, 40, 0.55);
  --t-youtube-icon:        #ef4444;
  --t-pitch-badge-text:    #93c5fd;

  /* -- Skin assets --------------------------------------------------------- */
  --t-logo-url:            url('/skins/glass/logo.png');
  /* Vibrant gradient shows through the frosted panels (no image file needed). */
  --t-bg-image:            linear-gradient(135deg, #4c1d95 0%, #5b21b6 22%, #1e3a8a 48%, #0e7490 72%, #be185d 100%);

  /* -- Navbar (glassy) ----------------------------------------------------- */
  --t-navbar-bg:              rgba(20, 18, 45, 0.55);
  --t-navbar-bg-from:         rgba(30, 24, 70, 0.55);
  --t-navbar-bg-to:           rgba(20, 18, 45, 0.55);
  --t-navbar-text:            #ffffff;
  --t-navbar-border:          rgba(255, 255, 255, 0.14);
  --t-navbar-btn-border:      rgba(255, 255, 255, 0.25);
  --t-navbar-btn-hover-bg:    rgba(255, 255, 255, 0.14);
  --t-navbar-btn-hover-border:rgba(255, 255, 255, 0.5);
  --t-navbar-btn-active-bg:   rgba(255, 255, 255, 0.2);

  /* -- Accent / Links ----------------------------------------------------- */
  --t-accent:        #a78bfa;
  --t-accent-hover:  #c4b5fd;
  --t-accent-bg:     rgba(167, 139, 250, 0.16);

  /* -- Status ------------------------------------------------------------- */
  --t-success:       #34d399;
  --t-warning:       #fbbf24;
  --t-error:         #f87171;
  --t-info:          #38bdf8;
  --t-danger:        #f87171;
  --t-danger-border: rgba(248, 113, 113, 0.35);
  --t-danger-bg:     rgba(248, 113, 113, 0.15);

  --t-success-bg:    rgba(52, 211, 153, 0.14);
  --t-warning-bg:    rgba(251, 191, 36, 0.14);
  --t-error-bg:      rgba(248, 113, 113, 0.14);
  --t-warning-text:  #fbbf24;

  /* -- EEG Band colors ---------------------------------------------------- */
  --t-band-delta-a:  #6366f1;
  --t-band-delta-b:  #8b5cf6;
  --t-band-theta-a:  #3b82f6;
  --t-band-theta-b:  #06b6d4;
  --t-band-alpha-a:  #10b981;
  --t-band-alpha-b:  #22c55e;
  --t-band-beta-a:   #f59e0b;
  --t-band-beta-b:   #f97316;
  --t-band-gamma-a:  #ef4444;
  --t-band-gamma-b:  #dc2626;

  /* -- EEG canvas --------------------------------------------------------- */
  --t-eeg-canvas-bg:     rgba(20, 18, 45, 0.6);
  --t-eeg-text:          #d8d4f0;
  --t-eeg-channel-label: #d8d4f0;

  /* -- EEG connection dots ------------------------------------------------ */
  --t-eeg-dot-off:        #888888;
  --t-eeg-dot-live:       #22c55e;
  --t-eeg-dot-sim:        #38bdf8;
  --t-eeg-dot-connecting: #f59e0b;

  /* -- Accordion ---------------------------------------------------------- */
  --t-accordion-header-bg:     rgba(124, 58, 237, 0.35);
  --t-accordion-header-text:   #ffffff;
  --t-accordion-body-bg:       rgba(28, 25, 56, 0.45);
  --t-accordion-body-text:     rgba(244, 242, 255, 0.7);
  --t-accordion-content-text:  rgba(244, 242, 255, 0.85);

  /* -- Typography (modern sans for a clean glass look) --------------------- */
  --t-font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-font-mono:    'Consolas', 'Monaco', 'Courier New', monospace;

  /* -- Bootstrap overrides ------------------------------------------------ */
  --bs-body-bg:         var(--t-bg);
  --bs-body-color:      var(--t-text);
  --bs-border-color:    var(--t-border);
  --bs-link-color:      var(--t-accent);
  --bs-link-hover-color: var(--t-accent-hover);
  --bs-card-bg:         var(--t-surface);
}

[data-bs-theme="light"] {
  --bs-body-bg:    var(--t-bg);
  --bs-body-color: var(--t-text);
  --bs-card-bg:    var(--t-surface);
}

/* -- Typography base ------------------------------------------------------ */
body {
  font-family: var(--t-font-body);
  background-color: var(--t-bg);
  color: var(--t-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--t-font-heading);
}

code, pre, .font-monospace {
  font-family: var(--t-font-mono);
}

/* -- Metric status classes ------------------------------------------------ */
.metric-good   { color: var(--t-success) !important; }
.metric-normal { color: var(--t-warning) !important; }
.metric-poor   { color: var(--t-error)   !important; }