/* ================================================================
   RG RADIO — EXTRAS v4 CSS
   Custom EQ Panel + VU meter / LED bar / Dot-matrix styles
   ================================================================ */

/* ─── EQ+ trigger button ─── */
#ceqTriggerBtn {
  background: rgba(94,92,230,0.14) !important;
  border-color: rgba(94,92,230,0.44) !important;
  color: rgba(180,172,255,0.95) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition: all .18s ease !important;
}
#ceqTriggerBtn.active,
#ceqTriggerBtn:hover {
  background: rgba(94,92,230,0.26) !important;
  border-color: rgba(94,92,230,0.68) !important;
  color: rgba(200,196,255,1) !important;
  box-shadow: none !important;
}

/* ─── EQ Panel container ─── */
#ceqPanel {
  position: fixed;
  z-index: 999999;
  background: rgba(10,10,14,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow:
    0 32px 100px rgba(0,0,0,0.80),
    0 0 0 1px rgba(94,92,230,0.10) inset;
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  padding: 14px;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  user-select: none;
  animation: ceqReveal .22s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes ceqReveal {
  from { opacity:0; transform:translateY(-10px) scale(0.96); }
  to   { opacity:1; transform:translateY(0)     scale(1); }
}

/* Head */
.ceq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ceq-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: rgba(175,168,255,0.95);
}
.ceq-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(94,92,230,0.9);
  box-shadow: none;
}
.ceq-close {
  width: 28px; height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.ceq-close:hover { background: rgba(255,70,50,0.18); color: rgba(255,80,60,0.9); border-color: rgba(255,70,50,0.28); }

/* Presets */
.ceq-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.ceq-preset-btn {
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.50);
  font-family: ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all .15s ease;
}
.ceq-preset-btn:hover {
  background: rgba(94,92,230,0.12);
  border-color: rgba(94,92,230,0.38);
  color: rgba(175,168,255,0.90);
}
.ceq-preset-btn.active {
  background: rgba(94,92,230,0.22);
  border-color: rgba(94,92,230,0.62);
  color: rgba(200,196,255,1);
  box-shadow: none;
}

/* Body: bands + balance */
.ceq-body {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ceq-bands {
  display: flex;
  gap: 7px;
  align-items: flex-end;
  flex: 1;
}
.ceq-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* Band track (the vertical slider area) */
.ceq-band-track {
  width: 22px;
  height: 120px;
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  cursor: ns-resize;
  touch-action: none;
}
.ceq-band-track:hover { border-color: rgba(94,92,230,0.30); }

.ceq-band-fill {
  position: absolute;
  left: 0; right: 0;
  bottom: 50%;
  height: 0;
  pointer-events: none;
  transition: height .08s ease, background .15s ease;
}

.ceq-center-line {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.22);
  transform: translateY(-50%);
  pointer-events: none;
}

.ceq-band-thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(50% - 6px);
  width: 14px;
  height: 12px;
  border-radius: 4px;
  background: rgba(94,92,230,0.85);
  border: 1px solid rgba(180,172,255,0.7);
  box-shadow: none;
  pointer-events: none;
  transition: top .08s ease;
}

.ceq-band-val {
  font-size: 7.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.50);
  text-align: center;
  min-width: 28px;
  white-space: nowrap;
}
.ceq-band-label {
  font-size: 7px;
  font-weight: 700;
  color: rgba(175,168,255,0.55);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* Balance strip (vertical) */
.ceq-bal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}
.ceq-bal-track {
  width: 18px;
  height: 120px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  overflow: hidden;
}
.ceq-bal-track:hover { border-color: rgba(0,255,136,0.28); }
.ceq-bal-thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(50% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0,255,136,0.85);
  border: 1px solid rgba(180,255,220,0.7);
  box-shadow: none;
  pointer-events: none;
  transition: top .06s ease;
}
.ceq-bal-label {
  font-size: 7px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
}
.ceq-bal-val {
  font-size: 8px;
  font-weight: 800;
  color: rgba(0,255,136,0.70);
  letter-spacing: 0.5px;
}

/* Footer */
.ceq-foot {
  display: flex;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ceq-fb {
  flex: 1;
  height: 27px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s ease;
}
.ceq-fb:hover {
  background: rgba(0,255,136,0.08);
  border-color: rgba(0,255,136,0.28);
  color: rgba(0,255,136,0.82);
}

/* ─── Expired worker fade ─── */
.duty-block {
  transition: opacity .4s ease, transform .4s ease !important;
}
.duty-block.fading-out {
  opacity: 0 !important;
  transform: translateX(-20px) !important;
  pointer-events: none !important;
}

/* ─── Timer warning states ─── */
.duty-timer.warning-low .val {
  color: rgba(255,159,10,0.95) !important;
  text-shadow: none !important;
  animation: timerFlash 1.2s ease-in-out infinite !important;
}
.duty-timer.warning-critical .val {
  color: rgba(255,55,55,0.95) !important;
  text-shadow: none !important;
  animation: timerFlash 0.55s ease-in-out infinite !important;
}
@keyframes timerFlash {
  0%,100% { opacity:1; }
  50%      { opacity:0.5; }
}


/* ── EQ PANEL IMPROVEMENTS ── */
/* Override band tracks to be larger and smoother */
.ceq-band-track {
  width: 26px !important;
  height: 140px !important;
  border-radius: 6px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ceq-band-track:hover {
  border-color: rgba(94,92,230,0.38) !important;
  box-shadow: none !important;
}
.ceq-band-fill {
  transition: none; /* instant for live drag */
}
.ceq-band-thumb {
  width: 20px !important;
  height: 14px !important;
  border-radius: 5px !important;
  background: linear-gradient(180deg, rgba(130,126,255,0.98), rgba(80,76,200,0.88)) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
  transition: none; /* instant during drag */
}

/* Wider panel */
#ceqPanel {
  min-width: 340px !important;
}

/* Fader label font improvements */
.ceq-band-val {
  font-size: 8px !important;
  color: rgba(255,255,255,0.65) !important;
  min-width: 32px !important;
}
.ceq-band-label {
  font-size: 7.5px !important;
  color: rgba(175,168,255,0.70) !important;
}

/* Active drag state */
.ceq-band-track:active .ceq-band-thumb,
.ceq-band-track.dragging .ceq-band-thumb {
  box-shadow: 0 0 0 2px rgba(180,172,255,0.4) !important;
}

/* EQ center line stronger */
.ceq-center-line {
  background: rgba(255,255,255,0.28) !important;
  height: 1.5px !important;
}