/* =========================
   ESTILOS GERAIS
========================= */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--theme-bg);
  color: var(--theme-text);
}

/* =========================
   BANNER DJ ATIVO
========================= */
#currentDjBanner {
  text-align: center;
  padding: 10px;
  font-weight: bold;
  display: none;
  background: var(--status-on-bg);
  color: var(--status-on-text);
  margin-bottom: 12px;
  border-radius: 6px;
}

/* =========================
   GRID DE CARDS
========================= */
#djsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 12px;
}

/* =========================
   CARD DE DJ
========================= */
.dj-card {
  background: var(--theme-card-bg);
  border: 2px solid var(--theme-card-border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dj-card.active {
  background: var(--theme-active-bg);
  border-color: var(--theme-active-border);
}

/* =========================
   TEXTO DO CARD
========================= */
.dj-card .dj-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--dj-name-color);
}

/* DJ ATIVO */
.dj-card.active .dj-name {
  color: var(--dj-name-color);
}

/* DJ INATIVO */
.dj-card:not(.active) .dj-name {
  color: var(--dj-name-inactive-color);
}


.dj-card .dj-time {
  font-size: 1.1rem;
  opacity: 0.85;
  color: var(--time-color);
}

.dj-card .dj-genre {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.75;
 /* display: inline-block;*/
  background: rgba(255,255,255,0.05);
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--dj-genre-color);
  display:none;
}

/* =========================
   STATUS
========================= */
.dj-status {
  margin-top: 6px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 6px;
  text-align: center;
  display: inline-block;
  min-width: 100px;
}

.dj-status.on {
  background: var(--status-on-bg);
  color: var(--status-on-text);
}

.dj-status.off {
  background: var(--status-off-bg);
  color: var(--status-off-text);
}