/* ============================================================
   Extra themes — Liquid Glass + Fighter Jet
   Day/Night live in index.css; this file adds the other themes
   plus the theme-picker swatches (theme-independent).
   ============================================================ */

/* ==================== Theme picker (Settings) ==================== */
.theme-row { cursor: default; }
.theme-swatches { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
.theme-swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  padding: 0;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.theme-swatch:hover { transform: scale(1.08); }
.theme-swatch.active { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--gold); }

/* ============================================================
   Liquid Glass — clean frosted glass, teal accent
   ============================================================ */
[data-theme="glass"] {
  --bg-0: #E4EDF1;                       /* solid base: inputs, meta color, fallbacks */
  --bg-1: rgba(255, 255, 255, 0.58);
  --bg-2: rgba(255, 255, 255, 0.42);
  --surface:        rgba(255, 255, 255, 0.52);
  --surface-hover:  rgba(255, 255, 255, 0.70);
  --border:         rgba(255, 255, 255, 0.55);
  --border-strong:  rgba(255, 255, 255, 0.85);

  --text:       #1C2B33;
  --text-dim:   #47606A;
  --text-muted: #7C929B;

  --accent:        #0E7490;
  --accent-2:      #0E7490;
  --accent-hover:  #0A5D74;
  --on-accent:     #FFFFFF;
  --gold:          #6E98A5;              /* cool steel replaces camel hairlines */
  --success:       #0E7490;
  --warning:       #C07A3D;
  --danger:        #B3453E;

  --tint-accent:        rgba(14, 116, 144, 0.08);
  --tint-accent-strong: rgba(14, 116, 144, 0.16);
  --tint-gold:          rgba(110, 152, 165, 0.14);
  --tint-gold-strong:   rgba(110, 152, 165, 0.24);
  --tint-success:       rgba(14, 116, 144, 0.10);
  --tint-danger:        rgba(179, 69, 62, 0.10);
  --tint-danger-strong: rgba(179, 69, 62, 0.20);

  --phase-deep:  #0E7490;
  --phase-light: #5BA3B5;
  --phase-rem:   #C07A3D;
  --phase-awake: #B3453E;

  --timeline-track: rgba(255, 255, 255, 0.30);
  --sleep-icon-bg:  rgba(14, 116, 144, 0.14);
  --sleep-icon-fg:  #0E7490;

  --shadow:    0 2px 10px rgba(30, 60, 70, 0.08);
  --shadow-lg: 0 18px 44px rgba(30, 60, 70, 0.20);

  --glass-blur: blur(18px) saturate(160%);
  color-scheme: light;
}

/* Fixed soft backdrop so the blur has something to sample.
   body::before instead of background-attachment: fixed (broken on iOS Safari). */
[data-theme="glass"] body { background: #E4EDF1; }
[data-theme="glass"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(120, 190, 205, 0.35), transparent 60%),
    radial-gradient(900px 600px at -10% 100%, rgba(150, 175, 195, 0.30), transparent 55%),
    linear-gradient(160deg, #E9F1F4 0%, #D8E6EB 45%, #CCDEE4 100%);
}

/* One shared frosted-surface rule: translucent fill + blur + specular top edge */
[data-theme="glass"] .card,
[data-theme="glass"] .settings-row,
[data-theme="glass"] .topbar,
[data-theme="glass"] .nav,
[data-theme="glass"] .nav-btn.topbar-home,
[data-theme="glass"] .options-drawer,
[data-theme="glass"] .detail-modal,
[data-theme="glass"] .mode-picker-menu,
[data-theme="glass"] .auth-card,
[data-theme="glass"] .ex-sheet,
[data-theme="glass"] .app-update-banner {
  background: var(--surface);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--shadow);
}
[data-theme="glass"] .options-drawer,
[data-theme="glass"] .detail-modal {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), var(--shadow-lg);
}

/* Always-dark active strip becomes dark teal glass */
[data-theme="glass"] .active-strip {
  background: rgba(28, 43, 51, 0.72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top-color: rgba(255, 255, 255, 0.25);
}

/* Where backdrop-filter is unsupported, surfaces go near-opaque for readability */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="glass"] {
    --surface:       rgba(255, 255, 255, 0.85);
    --surface-hover: rgba(255, 255, 255, 0.95);
    --bg-1:          rgba(255, 255, 255, 0.88);
  }
}

/* ============================================================
   Fighter Jet — near-black cockpit, phosphor green HUD, amber
   ============================================================ */
[data-theme="jet"] {
  --bg-0: #050807;
  --bg-1: #0A0F0C;
  --bg-2: #111A13;
  --surface:        #0A110C;
  --surface-hover:  #132016;
  --border:         #1B3322;
  --border-strong:  #2C5237;

  --text:       #D9FFE0;         /* pale phosphor */
  --text-dim:   #6FA37B;
  --text-muted: #47694F;

  --accent:        #00FF41;      /* HUD phosphor green */
  --accent-2:      #00FF41;
  --accent-hover:  #4DFF75;
  --on-accent:     #021107;
  --gold:          #FFB000;      /* avionics amber */
  --success:       #00FF41;
  --warning:       #FFB000;
  --danger:        #FF453A;

  --tint-accent:        rgba(0, 255, 65, 0.07);
  --tint-accent-strong: rgba(0, 255, 65, 0.15);
  --tint-gold:          rgba(255, 176, 0, 0.10);
  --tint-gold-strong:   rgba(255, 176, 0, 0.20);
  --tint-success:       rgba(0, 255, 65, 0.09);
  --tint-danger:        rgba(255, 69, 58, 0.12);
  --tint-danger-strong: rgba(255, 69, 58, 0.22);

  --phase-deep:  #00E53A;
  --phase-light: #1F7A3C;
  --phase-rem:   #FFB000;
  --phase-awake: #FF453A;

  --timeline-track: #030504;
  --sleep-icon-bg:  rgba(0, 255, 65, 0.12);
  --sleep-icon-fg:  #00FF41;

  --shadow:    0 1px 0 rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 255, 65, 0.06);

  color-scheme: dark;
}

/* Restrained phosphor glow on the two headline readouts */
[data-theme="jet"] .today-label,
[data-theme="jet"] .active-strip .active-time {
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.35);
}

/* Active strip hardcodes sea/snowy/camel — re-theme it to the cockpit look */
[data-theme="jet"] .active-strip {
  background: #0A110C;
  border-top-color: var(--gold);
}
[data-theme="jet"] .active-strip .active-info,
[data-theme="jet"] .active-strip .active-time { color: var(--accent); }
[data-theme="jet"] .active-strip .active-icon { background: var(--tint-accent-strong); color: var(--gold); }
[data-theme="jet"] .active-strip .active-mode { color: var(--text-dim); }
[data-theme="jet"] .active-strip .active-stop {
  color: var(--accent);
  border-color: var(--gold);
}
[data-theme="jet"] .active-strip .active-stop:hover { background: var(--tint-gold-strong); }