/* ======================================================
   LIQUIDSOAP INDUSTRIAL PANEL – PROFESSIONAL THEME v2
   Author: GPT-5 x User Collab
   ====================================================== */

:root {
  --bg:#0e1115;          /* fő háttér */
  --panel:#121820;       /* panel háttér */
  --panel-2:#0c1218;     /* mélyebb sávok */
  --steel:#232b36;       /* acél keret */
  --accent:#00e5ff;      /* kék LED */
  --accent-2:#ffd166;    /* borostyán LED */
  --danger:#ff4d4f;      /* hibajelzés */
  --ok:#58e06f;          /* ok jelzés */
  --muted:#9fb0c0;
  --text-main:#e6eef6;
  --radius:16px;
  --transition:.25s ease;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text-main);
  font-family: "Rajdhani", system-ui, Segoe UI, sans-serif;
  letter-spacing: .02em;
}

/* ===================================== */
/* Ipari háttér fény és mozgó aura       */
/* ===================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, #0b0f14 0%, #121820 60%, #0b0f14 100%),
    radial-gradient(1200px 600px at 10% -10%, rgba(0,229,255,.08), transparent 60%),
    radial-gradient(1000px 500px at 110% 110%, rgba(255,209,102,.06), transparent 60%);
  mix-blend-mode: screen;
  animation: bgmove 30s linear infinite;
  z-index: 0;
}

@keyframes bgmove {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 200px 100px, -200px -100px; }
}

/* Honeycomb textúra overlay */
.honey {
  position: fixed;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 2px);
  background-size: 22px 22px;
  mask: radial-gradient(1200px 800px at 50% 30%, black 55%, transparent 70%);
}

/* ===================================== */
/* TOPBAR + visszalépés gomb             */
/* ===================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(10,14,19,.85), rgba(10,14,19,.6));
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
}

.brand {
  letter-spacing: .1em;
  font-weight: 700;
  color: #d8e8f6;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,229,255,.2);
}
.brand .dot {
  color: var(--accent);
  animation: blink 2s infinite ease-in-out;
}
@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: .4; }
}

#backBtn {
  font-size: .9rem;
  border-radius: 10px;
  padding: .3rem .8rem;
  border: 1px solid var(--steel);
  background: linear-gradient(180deg,#1b2330,#0e141c);
  color: var(--muted);
  transition: var(--transition);
}
#backBtn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ===================================== */
/* Frame / Kártyák                      */
/* ===================================== */

.frame {
  border: 1px solid #1b222c;
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 10px 40px rgba(0,0,0,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.frame:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 12px 45px rgba(0,0,0,.45);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .1;
  background:
    radial-gradient(circle at 12px 12px, #a8b6c6 2px, transparent 2px) 0 0/48px 48px;
}

/* ===================================== */
/* Szekció cím, elválasztó              */
/* ===================================== */

.section-title {
  font-weight: 700;
  color: #bcd1e5;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #3a4758, transparent);
  margin: .6rem 0;
}

/* ===================================== */
/* LED indikátorok                      */
/* ===================================== */

.led {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}
.led-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}
.led--ok   { color: var(--ok); }
.led--warn { color: var(--accent-2); }
.led--err  { color: var(--danger); }

/* ===================================== */
/* Ipari gombok                         */
/* ===================================== */

.ctrl-btn {
  border: 1px solid #283444;
  color: #e7f1f8;
  background: linear-gradient(180deg,#1a2330,#0e141c);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  border-radius: 12px;
  padding: .8rem 1rem;
  box-shadow:
    0 4px 0 #0a0f16,
    inset 0 1px 0 rgba(255,255,255,.07);
  transition: var(--transition);
}
.ctrl-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 0 #0a0f16,
    0 0 24px rgba(0,229,255,.12),
    inset 0 1px 0 rgba(255,255,255,.1);
}
.ctrl-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 0 #0a0f16,
    inset 0 1px 0 rgba(255,255,255,.04);
}
.ctrl-btn.start { border-color:#0b3a3a; background:linear-gradient(180deg,#1a4a31,#0f2419); }
.ctrl-btn.stop  { border-color:#402227; background:linear-gradient(180deg,#3b1b22,#1b0e12); }
.ctrl-btn.warn  { border-color:#42370f; background:linear-gradient(180deg,#3d2f12,#1a1407); }
.ctrl-btn.info  { border-color:#163543; background:linear-gradient(180deg,#193445,#0f1f29); }

/* ===================================== */
/* Gauge – fix méretű, fényes kör       */
/* ===================================== */

.gauge {
  --val: 65;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--accent) calc(var(--val)*1%), #1b222c 0),
    radial-gradient(circle at 50% 50%, #0b1118 58%, transparent 59%);
  border: 2px solid #28313d;
  box-shadow:
    0 0 20px rgba(0, 229, 255, .25),
    inset 0 0 30px rgba(0, 229, 255, .15),
    0 10px 30px rgba(0, 0, 0, .5);
  overflow: hidden;
}

.gauge::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,229,255,.25), transparent 70%);
  animation: pulseGlow 3s ease-in-out infinite;
  z-index: 0;
}
@keyframes pulseGlow {
  0%,100% { opacity: .25; transform: scale(1); }
  50%     { opacity: .5;  transform: scale(1.05); }
}

.gauge .val {
  position: absolute;
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--text-main);
  text-shadow: 0 0 12px rgba(0,229,255,.5);
  z-index: 2;
}
.gauge::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px;
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  z-index: 2;
}
.gauge .cover {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%);
  z-index: 1;
  pointer-events: none;
}

/* ===================================== */
/* ICE státusz-sorok                    */
/* ===================================== */

.status-line {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, Consolas, Menlo, monospace;
  color: #bcd1e5;
  border-bottom: 1px solid rgba(255,255,255,.04);
  padding: 2px 0;
}
.status-line .k {
  color: var(--accent);
  font-weight: 600;
}
.status-line .v {
  color: var(--ok);
  text-shadow: 0 0 8px rgba(88,224,111,.4);
  transition: color .3s ease, text-shadow .3s ease;
}
.status-line:hover .v {
  color: var(--accent-2);
  text-shadow: 0 0 12px rgba(255,209,102,.5);
}

/* ===================================== */
/* EQ bars                              */
/* ===================================== */

.eq {
  height: 36px;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.bar {
  width: 8px;
  background: #22d8ff;
  border-radius: 2px;
  animation: eq 1.2s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(0,229,255,.4);
}
.bar:nth-child(2){animation-delay:.15s}
.bar:nth-child(3){animation-delay:.3s}
.bar:nth-child(4){animation-delay:.45s}
.bar:nth-child(5){animation-delay:.6s}
@keyframes eq {
  0%,100% {height:10%;opacity:.6}
  50% {height:100%;opacity:1}
}

/* ===================================== */
/* Playlist kompakt táblázat            */
/* ===================================== */

#playlistTable td, #playlistTable th {
  padding: .25rem .4rem;
}
#playlistTable tbody td {
  font-size: .9rem;
}
#playlistTable thead {
  background: #141a22;
}
#playlistTable tr:hover {
  background-color: #1a222d;
}
#playlistTable .ctrl-btn {
  padding: .3rem .5rem;
  border-radius: 8px;
  font-size: .85rem;
}
#playlistTable th[data-sort] {
  cursor: pointer;
}
#playlistTable th[data-sort]:hover {
  color: var(--accent);
}
.progress-bar {
  transition: width .25s linear;
  background: var(--accent);
}

/* ===================================== */
/* Footer                               */
/* ===================================== */

.small { color: var(--muted); }
.footer {
  color: #8ca0b3;
  font-size: .9rem;
  text-align: center;
  margin-top: 1rem;
}
.footer a {
  color: var(--accent);
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}