* { box-sizing: border-box; }

body {
  margin: 0;
  background: #000;
  color: #e5e5e5;
  font-family: system-ui, -apple-system;
}

/* FILTER BAR */
.filter-bar {
  margin-top: 5px;
  margin-left: 5px;
  display: flex;
  gap: 50px;
  padding: 10px;
}
.filter span {
  font-size: 9.5px;
  color: #fff;
}
.filter select {
  background: #fff;
  margin-left: 5px;
  border-radius: 4px;
  color: --red;
  border: 1px solid #e50914;
  font-size: 8.49px;
  padding: 2px;
}

/* DAY BAR */
#dayBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #000;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
}

/* hide scrollbar */
#dayBar::-webkit-scrollbar {
  display: none;
}

/* Fixed 3 days */
.fixed-days {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Scrollable rest */
.scroll-days {
  display: flex;
  gap: 8px;
  min-width: 400px;        /* 🔑 makes scroll WORK */
}

/* Day pill */
.day {
  padding: 6px 20px;
  font-size: 8px;
  border-radius: 5px;
  background: #131313;
  margin-left: 4px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* Today highlight */
.day.today {
  background: #e50914;
  color: #fff;
  transform: scale(1.05);
}


/* TIME HEADER */
.time-wrapper {
  overflow: hidden;
  border-bottom: 10px solid #000;
}
.time-header {
  display: flex;
  width: calc(1440 * 6px);
}
.time-slot {
  width: 180px;
  font-size: 10px;
  color: #ffffff;
  text-align: center;
}

/* MAIN */
.epg-container {
  display: flex;
  height: calc(72vh - 100px);
}

/* CHANNEL COLUMN */
.channel-column {
  width: 50px;
  padding-left: 10px;
}
.channel-row {
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.channel-row img {
  aspect-ratio: 3.5 / 2;   /* SAME box for all */
  height: 40px;          /* ONE constraint required */
  
  padding: 1px 8px;
  background: #fff;
  border-radius: 6px;

  object-fit: contain;
  margin-left: 25px;
  display: block;
}


/* GRID */

/* Parent flex container: channels on left, EPG on right */
.epg-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.epg-scroll {
  flex: 1;
  margin-left: 35px;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}
.epg-grid {
  width: calc(1440 * 6px);
  padding-top: 3px;
}
.epg-row {
  display: flex;
  height: 48px;
  background: #000;
}
.epg-box {
  width: 120px;             /* MUST = SLOT_WIDTH */
  height: 43px;
  padding: 6px 8px;
  box-sizing: border-box;
  background: #1c1c1c;
  color: #a7a7a7;
  font-size: 10px;
  border-radius: 8px;       /* ✅ requested */
  border: 2px solid #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;       
  flex-wrap: wrap;
  display: flex;
  align-items: center;
}

/* NOW LINE */
.now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e50914;
  z-index: 10;
  transition: left 0.9s linear;
}
.now-pill {
  position: absolute;
  left: -18px;
  background: #e50914;
  color: #fff;
  font-size: px;
  padding: 2px 6px;
  border-radius: 5px;
}