/* ─── epg.css ────────────────────────────────────────────────────────────────
   EPG / TV Guide page styles.
   ─────────────────────────────────────────────────────────────────────────── */

.epg-hero {
  padding:     calc(var(--nav-h) + 2.5rem) 0 2.5rem;
  background:  linear-gradient(180deg, rgba(124,92,252,0.08) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}

/* ─── Tab bars ───────────────────────────────────────────────────────────────*/
.epg-tabs-row {
  display:    flex;
  gap:        0.5rem;
  flex-wrap:  wrap;
  margin-bottom: 0.5rem;
}
.epg-tab {
  padding:      0.45rem 1rem;
  border:       1px solid var(--border);
  border-radius: 50px;
  font-size:    0.85rem;
  font-weight:  600;
  color:        var(--text-muted);
  background:   var(--glass);
  transition:   all 0.2s;
  white-space:  nowrap;
}
.epg-tab:hover  { border-color: var(--accent); color: var(--text); }
.epg-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ─── Grid ───────────────────────────────────────────────────────────────────*/
#epg-grid {
  display:   flex;
  flex-direction: column;
  gap:       0;
  border:    1px solid var(--border);
  border-radius: var(--radius);
  overflow:  hidden;
  margin-top: 1.5rem;
}
.epg-row {
  display:       grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--border);
  min-height:    80px;
}
.epg-row:last-child { border-bottom: none; }

.epg-channel {
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
  padding:        1rem;
  background:     var(--surface2);
  border-right:   1px solid var(--border);
  position:       sticky;
  left:           0;
  z-index:        1;
}
.epg-ch-logo { font-size: 1.5rem; flex-shrink: 0; }
.epg-ch-info { display: flex; flex-direction: column; }
.epg-ch-name { font-size: 0.88rem; font-weight: 700; }
.epg-ch-cat  { font-size: 0.72rem; color: var(--text-muted); }

.epg-timeline {
  display:    flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.epg-program {
  flex-shrink:   0;
  min-width:     200px;
  max-width:     280px;
  padding:       0.75rem 1rem;
  border-right:  1px solid var(--border);
  cursor:        pointer;
  transition:    background 0.2s;
  scroll-snap-align: start;
}
.epg-program:last-child { border-right: none; }
.epg-program:hover      { background: var(--glass); }
.epg-program--live      { background: rgba(124,92,252,0.08); border-left: 3px solid var(--accent); }

.epg-prog-header   { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.epg-prog-time     { font-size: 0.75rem; color: var(--text-muted); }
.epg-live-badge    {
  background:    #ff4444;
  color:         #fff;
  padding:       0.08rem 0.4rem;
  border-radius: 4px;
  font-size:     0.65rem;
  font-weight:   700;
}
.epg-prog-title    { font-size: 0.88rem; font-weight: 600; display: block; margin-bottom: 0.3rem; }
.epg-prog-duration { font-size: 0.72rem; color: var(--text-muted); }

.epg-genre-badge {
  padding:       0.1rem 0.45rem;
  border-radius: 4px;
  font-size:     0.68rem;
  font-weight:   600;
  text-transform: uppercase;
}
.epg-genre-badge--live        { background: rgba(255, 68, 68, 0.2); color: #ff6b6b; }
.epg-genre-badge--news        { background: rgba(0, 229, 176, 0.15); color: var(--accent2); }
.epg-genre-badge--sports      { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.epg-genre-badge--movie,
.epg-genre-badge--movies      { background: rgba(124, 92, 252, 0.15); color: var(--accent); }
.epg-genre-badge--drama       { background: rgba(236, 72, 153, 0.15); color: #ec4899; }
.epg-genre-badge--kids        { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.epg-genre-badge--music       { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.epg-genre-badge--magazine,
.epg-genre-badge--talk\ show  { background: rgba(99, 102, 241, 0.15); color: #818cf8; }

.epg-empty { padding: 3rem; text-align: center; color: var(--text-muted); }

/* ─── Channel logo (real image or fallback letter) ───────────────────────────*/
.epg-ch-logo       { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.epg-ch-logo-img   { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: var(--surface2); }
.epg-ch-logo-fallback {
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #9b7dff);
  color: #fff; font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}

/* ─── API status bar ─────────────────────────────────────────────────────────*/
#epg-api-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 50px;
  display: inline-block;
}

@media (max-width: 768px) {
  .epg-row { grid-template-columns: 110px 1fr; }
  .epg-ch-name { font-size: 0.78rem; }
  .epg-ch-cat  { display: none; }
}