/* Copyright (c) 2026 LionHost. All rights reserved. LionCast is proprietary software. Unauthorized copying, redistribution, publication, sublicensing, derivative redistribution, decompilation, reverse engineering, automated dataset ingestion, model training, or use to develop/train/fine-tune AI/ML systems is prohibited except with prior written permission from LionHost. Third-party components remain under their own licenses. License: LicenseRef-LionCast-Proprietary; see /LICENSE. */
/* ============================================================
   LionCast — Broadcast Rack design system (v2)
   Concept: κάθε κάρτα = πάνελ εξοπλισμού σε rack στούντιο —
   bevel φωτισμός, βίδες στις γωνίες, segmented LED μετρητές.
   ============================================================ */

:root {
  --bg:            #0e0f13;
  --panel-top:     #1e212b;
  --panel-bot:     #16181f;
  --panel-raised:  #262a35;
  --border:        #2c2f3c;
  --border-soft:   #23252e;
  --rivet:         #3a3d48;
  --rivet-hi:      rgba(255,255,255,0.14);

  --text:          #ece9e2;
  --text-dim:      #8a8d99;
  --text-faint:    #565963;

  --live:          #ff4d3d;
  --live-dim:      #4a2420;
  --good:          #7ee787;
  --good-dim:      #1e3a24;
  --amber:         #ffb020;
  --amber-dim:     #3d2f10;
  --error:         #ff4d3d;

  --font-display:  'Barlow Condensed', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;

  --radius: 5px;
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 24px -14px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.4);
}

/* --- Light theme (προαιρετικό, ανά χρήστη μέσω /account) --- */
body.theme-light {
  --bg:            #f2f1ed;
  --panel-top:     #ffffff;
  --panel-bot:     #f7f6f2;
  --panel-raised:  #ececE6;
  --border:        #dedcd3;
  --border-soft:   #e8e6df;
  --rivet:         #c9c7bd;
  --rivet-hi:      rgba(255,255,255,0.8);

  --text:          #1c1d1f;
  --text-dim:      #5c5d61;
  --text-faint:    #8a8b8f;

  --live-dim:      #ffe2de;
  --good-dim:      #dff5e1;
  --amber-dim:     #fff0d6;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 20px -14px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.06);
}
body.theme-light .sidebar { background: linear-gradient(180deg, #fbfaf7 0%, #f2f0ea 100%); }
body.theme-light .btn { background: linear-gradient(180deg, #fdfcfa 0%, #eeece5 100%); color: var(--text); }
body.theme-light .btn:hover { background: linear-gradient(180deg, #fff0ee 0%, #ffe2de 100%); }
body.theme-light input, body.theme-light select { background: #fff; color: var(--text); }
body.theme-light { background-image: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

/* Λεπτό vignette + grain — δίνει την αίσθηση φυσικού πάνελ κάτω από φως στούντιο */
body {
  background-image:
    radial-gradient(ellipse 900px 500px at 20% -10%, rgba(255,255,255,0.035), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(255,77,61,0.03), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.008) 0px, transparent 1px, transparent 3px);
  background-attachment: fixed;
}

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin: 0 0 6px;
}
h1 { font-size: 1.9rem; text-transform: uppercase; letter-spacing: 0.03em; }
h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); }

/* ---------------- Layout: console shell ---------------- */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #191b23 0%, #14151b 100%);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 rgba(255,255,255,0.02) inset, 4px 0 20px -10px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--border);
}
.brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.nav-links {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  flex: 1;
  gap: 2px;
}
.nav-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.nav-links a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s;
}
.nav-links a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.nav-links a.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255,77,61,0.12), rgba(255,77,61,0.02));
  box-shadow: -12px 0 0 -9px var(--live);
}
.nav-links a.active::before {
  background: var(--live);
  box-shadow: 0 0 6px 1px rgba(255,77,61,0.8);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.nav-user {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border);
}.nav-user .who {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-bottom: 8px;
  word-break: break-all;
}
.nav-user .who b { color: var(--text-dim); }
.nav-user a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  text-decoration: none;
}
.nav-user a:hover { color: var(--live); }

.lang-switch {
  display: flex;
  gap: 4px;
  padding: 0 20px 14px;
}
.lang-switch a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-decoration: none;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.lang-switch a:hover { color: var(--text-dim); }
.lang-switch a.active {
  color: var(--live);
  border-color: rgba(255,77,61,0.35);
  background: var(--live-dim);
}
.lang-switch-auth {
  position: absolute;
  top: 20px;
  right: 24px;
  padding: 0;
}

.container {
  flex: 1;
  max-width: 1000px;
  margin: 0;
  padding: 36px 40px 60px;
}

/* Auth pages have no sidebar */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------- Cards: rack-panel treatment ---------------- */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bot) 100%);
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
/* Βίδες πάνελ στις πάνω γωνίες — σαν rack-mounted εξοπλισμό */
.card::before, .card::after {
  content: '';
  position: absolute;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--rivet-hi), var(--rivet) 70%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
.card::before { left: 11px; }
.card::after { right: 11px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
  padding-left: 12px;
  position: relative;
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 2px;
  background: var(--live);
}

/* ---------------- Stat / meter grid ---------------- */

.stat-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.stat-box {
  flex: 1;
  min-width: 160px;
  padding-bottom: 20px;
  overflow: hidden;
}
.stat-box .num {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(255,255,255,0.06);
}
.stat-box .label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-size: 0.83rem;
  margin-top: 8px;
}
/* Διακοσμητική segmented LED λωρίδα κάτω από κάθε στατιστικό — σαν μετρητή εξοπλισμού */
.stat-box { position: relative; }
.stat-box .meter-strip {
  position: absolute;
  bottom: 0; left: 24px; right: 24px;
  height: 3px;
  display: flex;
  gap: 3px;
}
.stat-box .meter-strip span {
  flex: 1;
  border-radius: 1px;
  background: var(--border-soft);
}
.stat-box .meter-strip span.on { background: var(--live); box-shadow: 0 0 4px rgba(255,77,61,0.6); }

/* ---------------- VU meter (stream detail signature element) ---------------- */

.vu-meter {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 28px;
}
.vu-meter .seg {
  width: 8px;
  border-radius: 1px;
  background: var(--border);
  height: 100%;
  transition: background 0.2s;
}
.vu-meter .seg.lit-good { background: var(--good); box-shadow: 0 0 5px rgba(126,231,135,0.5); }
.vu-meter .seg.lit-amber { background: var(--amber); box-shadow: 0 0 5px rgba(255,176,32,0.5); }
.vu-meter .seg.lit-live { background: var(--live); box-shadow: 0 0 5px rgba(255,77,61,0.6); }

.vu-readout {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vu-readout .value {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  color: var(--text);
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}

/* ---------------- On-air badge ---------------- */

.onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px 4px 8px;
  border-radius: 20px;
}
.onair .dot { width: 7px; height: 7px; border-radius: 50%; }

.onair.running {
  background: var(--live-dim);
  color: var(--live);
  border: 1px solid rgba(255,77,61,0.35);
  box-shadow: 0 0 12px -4px rgba(255,77,61,0.5);
}
.onair.running .dot {
  background: var(--live);
  box-shadow: 0 0 6px 1px rgba(255,77,61,0.8);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.onair.stopped {
  background: var(--panel-raised);
  color: var(--text-faint);
  border: 1px solid var(--border);
}
.onair.stopped .dot { background: var(--text-faint); }

.onair.error {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid rgba(255,176,32,0.35);
}
.onair.error .dot { background: var(--amber); }

.onair.good {
  background: var(--good-dim);
  color: var(--good);
  border: 1px solid rgba(126,231,135,0.35);
}
.onair.good .dot { background: var(--good); }

/* ---------------- Tables ---------------- */

table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border-soft); font-size: 0.92rem; }
th {
  font-family: var(--font-display);
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
}
tbody tr { transition: background 0.12s; }
tbody tr:hover td { background: rgba(255,255,255,0.025); }
tbody tr:last-child td { border-bottom: none; }
td a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--text-faint); }
td a:hover { color: var(--live); border-color: var(--live); }

/* ---------------- Buttons: bevel + press feedback ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  background: linear-gradient(180deg, #292d39 0%, #1d2029 100%);
  color: var(--text);
  border: 1px solid var(--border);
  border-top-color: rgba(255,255,255,0.09);
  padding: 9px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset;
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.08s, box-shadow 0.15s;
}
.btn:hover { border-color: #ff6b5c88; color: var(--text); background: linear-gradient(180deg, #332420 0%, #241814 100%); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 1px rgba(0,0,0,0.4) inset; }

.btn-primary {
  background: linear-gradient(180deg, #ff6b5c 0%, var(--live) 100%);
  color: #200a07;
  border-color: var(--live);
  box-shadow: 0 2px 10px -3px rgba(255,77,61,0.55), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.btn-primary:hover { background: linear-gradient(180deg, #ff7d70 0%, #ff5c4c 100%); border-color: #ff6b5c; color: #200a07; }

.btn-danger { color: var(--live); }
.btn-danger:hover { background: linear-gradient(180deg, #332420 0%, #241814 100%); border-color: var(--live); }

.btn-secondary { color: var(--text-dim); }

/* ---------------- Forms ---------------- */

form.stack { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: -8px;
}
input, select {
  background: #0c0d11;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: var(--font-body);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) inset;
}
input:focus, select:focus, .btn:focus, a:focus {
  outline: 2px solid var(--live);
  outline-offset: 1px;
}
input::placeholder { color: var(--text-faint); }

/* ---------------- Misc ---------------- */

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions form { display: inline; }
.mono { font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-dim); }
.error-msg {
  background: var(--live-dim);
  color: #ffb3ab;
  border: 1px solid rgba(255,77,61,0.35);
  padding: 11px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.flash {
  padding: 11px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-family: var(--font-mono);
}
.flash.good  { background: var(--good-dim);  color: var(--good);  border: 1px solid rgba(126,231,135,0.35); }
.flash.error { background: var(--live-dim);  color: #ffb3ab;      border: 1px solid rgba(255,77,61,0.35); }
.flash.live  { background: var(--live-dim);  color: var(--live);  border: 1px solid rgba(255,77,61,0.35); }
.flash.amber { background: var(--amber-dim); color: var(--amber); border: 1px solid rgba(255,176,32,0.35); }
.hint { color: var(--text-faint); font-size: 0.85rem; }

/* ---------------- Responsive ---------------- */

@media (max-width: 760px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; }
  .nav-links { flex-direction: row; flex-wrap: wrap; padding: 8px 12px; }
  .nav-links a.active { box-shadow: none; }
  .container { padding: 24px 18px 40px; }
  .stat-box { min-width: 100%; }
}

/* ============================================================
   LionCast v0.6 UI — Lion Console
   Graphite + gold visual system, intentionally distinct from AzuraCast.
   ============================================================ */
:root{
 --gold:#e8b84b;--gold-hi:#ffd978;--gold-dim:rgba(232,184,75,.12);
 --bg:#090c10;--panel-top:#11161c;--panel-bot:#0d1217;--panel-raised:#161d24;
 --border:#242c34;--border-soft:#1b232b;--text:#f0f2f3;--text-dim:#9ca6ae;--text-faint:#64707a;
 --live:#e8b84b;--live-dim:rgba(232,184,75,.12);--radius:10px;
}
body{background-image:radial-gradient(ellipse 900px 500px at 25% -10%,rgba(232,184,75,.055),transparent 60%),linear-gradient(180deg,#090c10,#0b0f13);}
.sidebar{width:238px;background:linear-gradient(180deg,#0d1116,#090c10);border-right-color:#1e252c;}
.brand{padding:22px 18px;border-bottom-color:#1e252c}.brand-logo{width:38px;height:38px}.brand-text{color:#f2d58b;font-size:1.35rem}
.nav-links{padding:10px 10px 18px;overflow-y:auto;gap:1px}.nav-links .nav-section{font:600 .66rem var(--font-body);letter-spacing:.11em;text-transform:uppercase;color:#59636c;padding:15px 11px 5px}
.nav-links a{font-family:var(--font-body);font-size:.82rem;text-transform:none;letter-spacing:0;padding:8px 11px;border-radius:7px}
.nav-links a::before{width:6px;height:6px}.nav-links a.active{color:#f7d778;background:linear-gradient(90deg,rgba(232,184,75,.18),rgba(232,184,75,.04));box-shadow:inset 3px 0 #e8b84b}.nav-links a.active::before{background:#e8b84b;box-shadow:0 0 8px rgba(232,184,75,.75)}
.container{max-width:none;width:calc(100vw - 238px);padding:24px 28px 54px}.card{border-radius:10px;padding:20px 22px;background:linear-gradient(180deg,#12181e,#0e1318);box-shadow:0 10px 35px rgba(0,0,0,.18)}.card::before,.card::after{display:none}
.btn{border-radius:7px}.btn-primary{background:linear-gradient(180deg,#f0c65e,#c8942d)!important;color:#17120a!important;border-color:#e0ad3e!important;font-weight:700}.btn-primary:hover{filter:brightness(1.07)}
.eyebrow{color:#d2a944}.eyebrow::before{background:#e8b84b}.onair.running,.onair.good{border-radius:999px}
.stat-grid{grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}.stat-box .num{color:#f2c75e}
.lion-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 18px;margin-bottom:4px;border-bottom:1px solid #1b232b}.lion-top-title{display:flex;align-items:center;gap:10px}.lion-top-title strong{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.03em}.lion-health{display:flex;gap:8px;flex-wrap:wrap}.lion-chip{padding:7px 11px;border:1px solid #26303a;border-radius:8px;background:#0e1419;font-size:.75rem;color:#a8b1b8}.lion-chip b{color:#f0c75f}
.lion-console{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.85fr);gap:14px;margin:16px 0}.lion-live{min-height:220px;background:radial-gradient(circle at 12% 30%,rgba(232,184,75,.12),transparent 28%),linear-gradient(145deg,#121920,#0c1116)}.lion-live-head{display:flex;justify-content:space-between;align-items:center}.lion-live-title{font-size:2rem;margin-top:22px}.lion-wave{height:42px;display:flex;align-items:end;gap:3px;margin-top:24px}.lion-wave i{display:block;width:4px;border-radius:2px;background:linear-gradient(#ffd56b,#a87517);opacity:.9}.lion-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.lion-quick a{display:flex;align-items:center;justify-content:center;min-height:54px;text-decoration:none;border:1px solid #28313a;border-radius:8px;background:#11171d;font-size:.78rem}.lion-quick a:hover{border-color:#8f6b25;color:#f0c75f;background:#17170f}.lion-side-stat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.lion-side-stat>div{background:#0b1014;border:1px solid #202932;border-radius:8px;padding:13px}.lion-side-stat strong{display:block;font:600 1.45rem var(--font-display);color:#f1c65b}
@media(max-width:900px){.sidebar{width:72px}.brand-text,.nav-links .nav-section,.nav-links a{font-size:0}.nav-links a{justify-content:center;padding:12px}.nav-links a::before{width:9px;height:9px}.nav-user,.lang-switch{padding-left:10px;padding-right:10px}.nav-user .who{display:none}.container{width:calc(100vw - 72px);padding:18px}.lion-console{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shell{display:block}.sidebar{position:fixed;bottom:0;top:auto;width:100%;height:62px;z-index:100;border-right:0;border-top:1px solid #28313a}.brand,.nav-user,.lang-switch,.nav-links .nav-section{display:none}.nav-links{padding:7px;display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden}.nav-links a{display:none}.nav-links a:nth-of-type(-n+5){display:flex;font-size:0}.container{width:100%;padding:15px 12px 82px}.stat-grid{grid-template-columns:1fr 1fr}.lion-topbar{align-items:flex-start}.lion-health{justify-content:flex-end}.lion-quick{grid-template-columns:repeat(2,1fr)}}