/*
 * theme.css — TAK Day 2026 Visual Theme
 * ======================================
 * All CSS custom properties (variables) for the TAK Day 2026 interface.
 * Loaded by every HTML page via <link rel="stylesheet" href="/theme.css">.
 *
 * To create an alternative theme:
 *   1. Copy this file (e.g. theme-light.css)
 *   2. Change the variable values in :root
 *   3. Set THEME_NAME=light in config.env
 *      (server.py will serve /theme.css → theme-light.css at runtime)
 *
 * The current theme: Tactical Dark
 * Palette: near-black background, olive/amber accents, muted green text.
 */

/* ── Google Fonts ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700;900&display=swap');

/* ── Custom properties ───────────────────────────────────────────────────── */
:root {

  /* Core backgrounds */
  --black:        #080a08;   /* page background */
  --dark:         #0e110e;   /* input backgrounds, status bar */
  --panel:        #131a12;   /* card / panel backgrounds */
  --grid:         #1a211a;   /* background grid lines */

  /* Borders */
  --border:       #2a3328;   /* standard border colour */

  /* Primary accent — olive green */
  --olive:        #6b7c4a;   /* borders, labels, subdued accents */
  --olive-lt:     #8a9e60;   /* bright accent, active state */

  /* Secondary accent — amber */
  --amber:        #c8960a;   /* callsigns, warnings, highlights */
  --amber-dim:    rgba(200, 150, 10, 0.15);

  /* Status colours */
  --red:          #8b2020;   /* error, rejected, danger */
  --red-lt:       #c84040;   /* bright error text */
  --red-dim:      rgba(139, 32, 32, 0.3);
  --green:        #3a6b3a;   /* approved, success (background) */
  --green-lt:     #5a9e5a;   /* approved, success (text) */

  /* Blue (used for "registered" stat) */
  --blue-lt:      #5a8abf;

  /* Team colours */
  --team-white:   #c8d4b8;
  --team-red:     #c84040;
  --team-green:   #5a9e5a;
  --team-blue:    #5a8abf;

  /* Text */
  --text:         #c8d4b8;   /* primary text */
  --muted:        #5a6b50;   /* secondary / placeholder text */

  /* Typography */
  --mono:         'Share Tech Mono', 'Courier New', monospace;
  --cond:         'Barlow Condensed', Impact, sans-serif;

  /* Shared UI dimensions */
  --statusbar-h:  28px;
  --footerbar-h:  24px;
  --radius:       2px;
}

/* ── Shared base resets ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Shared scan-line overlay (applied to body::before in each page) ─────── */
/*
 * Each page applies this individually because some pages set overflow:hidden
 * and some don't. The values are defined here for reference:
 *
 *   background: repeating-linear-gradient(
 *     0deg,
 *     transparent, transparent 2px,
 *     rgba(0,0,0,0.14) 2px, rgba(0,0,0,0.14) 4px
 *   );
 */

/* ── Shared scrollbar styling ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Shared status bar ───────────────────────────────────────────────────── */
.statusbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--statusbar-h);
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.12em;
  z-index: 997;
  justify-content: space-between;
  font-family: var(--mono);
}

.statusbar .left { display: flex; gap: 20px; align-items: center; }

.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 2s ease-in-out infinite;
}

.status-dot.online  { background: var(--green-lt); box-shadow: 0 0 6px var(--green-lt); }
.status-dot.warning { background: var(--amber);    box-shadow: 0 0 6px var(--amber); }

/* ── Shared footer bar ───────────────────────────────────────────────────── */
.footerbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--footerbar-h);
  background: var(--dark);
  border-top: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.1em;
  z-index: 997;
  justify-content: space-between;
  font-family: var(--mono);
}

/* ── Shared animations ───────────────────────────────────────────────────── */
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes init     { 0%{opacity:0;clip-path:inset(50% 0 50% 0)} 40%{opacity:1;clip-path:inset(44% 0 44% 0)} 100%{opacity:1;clip-path:inset(0% 0 0% 0)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes toastIn  { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp  { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }

.blink { animation: blink 1.2s step-end infinite; }

/* ── Shared small button (logout etc.) ───────────────────────────────────── */
.btn-sm {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-sm:hover { color: var(--olive-lt); border-color: var(--olive); }

/* ── Shared toast notification ───────────────────────────────────────────── */
.toast {
  position: fixed; top: 38px; right: 20px; z-index: 2000;
  padding: 10px 16px;
  font-size: 11px; letter-spacing: 0.1em;
  border: 1px solid;
  max-width: 420px; line-height: 1.5;
  animation: toastIn 0.2s ease;
  pointer-events: none;
  font-family: var(--mono);
}
.toast.ok   { background:rgba(58,107,58,0.15);   border-color:var(--green);              color:var(--green-lt); }
.toast.err  { background:rgba(139,32,32,0.15);   border-color:var(--red);                color:var(--red-lt); }
.toast.info { background:rgba(200,150,10,0.1);   border-color:rgba(200,150,10,0.4);      color:var(--amber); }

/* ── Shared panel / card ─────────────────────────────────────────────────── */
.panel-accent {
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--olive) transparent transparent;
}

/* ── Shared status badges ────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid;
  white-space: nowrap;
  font-family: var(--mono);
}

/* ── Shared team dot ─────────────────────────────────────────────────────── */
.team-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.15);
}
.team-white { background: var(--team-white); }
.team-red   { background: var(--team-red);   }
.team-green { background: var(--team-green); }
.team-blue  { background: var(--team-blue);  }