/* public/css/theme.css
   FlowX shared theme — "habit control room" / retro-LCD terminal.
   Single source of truth for palette, type scale, and base chrome across the
   landing, recording, dashboard, and settings surfaces. The OBS widget keeps
   its own transparent stylesheet (public/widget/widget.css) but borrows the
   same LCD colour tokens for visual continuity. */

/* ---- Fonts ---------------------------------------------------------------
   Chakra Petch — angular tactical/HUD display + UI font.
   JetBrains Mono — readable monospace for data, code, inputs.
   Share Tech Mono — segmented-LCD numerals for the scoreboard digits. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Share+Tech+Mono&display=swap');

:root {
  /* Phosphor palette */
  --lcd-green: #39ff7a;
  --lcd-green-soft: #5bffa0;
  --lcd-green-dim: rgba(57, 255, 122, 0.16);
  --amber: #ffcf6e;
  --alarm-red: #ff2b2b;
  --alarm-red-dim: rgba(255, 43, 43, 0.18);

  /* Surfaces — near-black with a faint green cast (CRT phosphor) */
  --bg-0: #05080a;          /* page void */
  --bg-1: #0a0f12;          /* base panel */
  --bg-2: #0f161a;          /* raised panel */
  --bg-3: #16201f;          /* input / inset */
  --line: #1d2c2a;          /* hairline borders */
  --line-bright: #2c4540;

  /* Text */
  --ink: #d6f5e4;           /* primary text (cool off-white) */
  --ink-dim: #8aa79c;       /* secondary text */
  --ink-faint: #56716a;     /* tertiary / captions */

  /* Effects */
  --glow-green: 0 0 8px rgba(57, 255, 122, 0.55), 0 0 22px rgba(57, 255, 122, 0.18);
  --glow-red: 0 0 8px rgba(255, 43, 43, 0.6), 0 0 22px rgba(255, 43, 43, 0.25);
  --radius: 4px;
  --radius-lg: 8px;

  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-lcd: 'Share Tech Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: var(--bg-0);
  /* layered atmosphere: corner glow + faint grid, never a flat fill */
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(57, 255, 122, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255, 43, 43, 0.045), transparent 55%),
    linear-gradient(transparent 0 96%, rgba(57, 255, 122, 0.025) 96% 100%),
    linear-gradient(90deg, transparent 0 96%, rgba(57, 255, 122, 0.025) 96% 100%);
  background-size: auto, auto, 100% 28px, 28px 100%;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint moving scanline veil over the whole UI (decorative, non-interactive) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.05) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
}

a { color: var(--lcd-green); text-decoration: none; }
a:hover { color: var(--lcd-green-soft); text-shadow: var(--glow-green); }

code, kbd, samp { font-family: var(--font-mono); }

/* ---- Eyebrow / tactical labels ----------------------------------------- */
.fx-eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- Top navigation chrome (shared by app/dashboard/settings) ---------- */
.fx-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15, 22, 26, 0.9), rgba(10, 15, 18, 0.6));
  backdrop-filter: blur(4px);
}
.fx-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--ink);
}
.fx-brand .fx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lcd-green);
  box-shadow: var(--glow-green);
}
/* Active capture session (connecting/recording/paused): red + pulsing.
   Toggled app-wide by shell.js via .fx-dot--rec; idle stays steady green. */
.fx-brand .fx-dot--rec {
  background: var(--alarm-red);
  box-shadow: var(--glow-red);
  animation: fx-pulse 1.2s ease-in-out infinite;
}
@keyframes fx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
.fx-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}
.fx-nav a {
  color: var(--ink-dim);
  padding: 0.35rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-transform: uppercase;
}
.fx-nav a:hover {
  color: var(--lcd-green);
  border-color: var(--line-bright);
  text-shadow: none;
}
.fx-nav a[aria-current="page"] {
  color: var(--lcd-green);
  border-color: var(--line-bright);
  background: var(--lcd-green-dim);
}

/* ---- Panels ------------------------------------------------------------- */
.fx-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(22, 32, 31, 0.55), rgba(10, 15, 18, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
}
.fx-panel::before {
  /* corner tick — tactical bracket */
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--line-bright);
  border-left: 2px solid var(--line-bright);
  border-top-left-radius: var(--radius-lg);
}
.fx-panel-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 1rem;
}

/* ---- Buttons ------------------------------------------------------------ */
.fx-btn {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.6rem 1.1rem;
  color: var(--lcd-green);
  background: var(--bg-3);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fx-btn:hover:not(:disabled) {
  border-color: var(--lcd-green);
  box-shadow: var(--glow-green);
  color: var(--lcd-green-soft);
}
.fx-btn:active:not(:disabled) { transform: translateY(1px); }
.fx-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.fx-btn--primary {
  color: var(--bg-0);
  background: var(--lcd-green);
  border-color: var(--lcd-green);
  box-shadow: var(--glow-green);
}
.fx-btn--primary:hover:not(:disabled) {
  background: var(--lcd-green-soft);
  color: var(--bg-0);
}

.fx-btn--warn { color: var(--amber); border-color: rgba(255, 207, 110, 0.45); }
.fx-btn--warn:hover:not(:disabled) {
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255, 207, 110, 0.45);
  color: var(--amber);
}

.fx-btn--danger {
  color: #ffd9d9;
  background: rgba(90, 16, 16, 0.6);
  border-color: rgba(255, 43, 43, 0.45);
}
.fx-btn--danger:hover:not(:disabled) {
  border-color: var(--alarm-red);
  box-shadow: var(--glow-red);
  background: rgba(122, 20, 20, 0.7);
}

/* ---- Form controls ------------------------------------------------------ */
input[type="number"],
input[type="text"],
select {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
}
input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
  outline: none;
  border-color: var(--lcd-green);
  box-shadow: 0 0 0 1px var(--lcd-green-dim);
}
input[type="range"] { accent-color: var(--lcd-green); width: 100%; }

::selection { background: var(--lcd-green); color: var(--bg-0); }

/* respect reduced-motion for all decorative animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}