/* ════════════════════════════════════════════════════════════════════════
   EPG GRILLE multi-chaînes — overlay plein écran (js/ui/epggrid.js)
   Tizen-safe : pas de gap, pas de calc(), -webkit-flex, transforms préfixés
   ════════════════════════════════════════════════════════════════════════ */

#epg-grid {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  /* Fond 100% OPAQUE obligatoire : la couche vidéo matérielle AVPlay
     (mini-preview Direct) transperce tout fond avec alpha. */
  background: #090b11;
  /* Au-dessus de TOUT le chrome : topnav 9999, exit-dialog 10001, max app 10500 */
  z-index: 10800;
}
#epg-grid.hidden { display: none; }

/* ── En-tête ── */
#eg-header {
  position: absolute; top: 0; left: 0; right: 0; height: 72px;
  z-index: 10;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 0 40px;
  background: #10141c;
  border-bottom: 1px solid #26303f;
}
#eg-title { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: 1px; }
#eg-title .eg-brand { color: #e50914; }
#eg-cat   { margin-left: 22px; font-size: 19px; color: #9fb0c8; }
#eg-date  { margin-left: 18px; font-size: 19px; color: #e50914; font-weight: 700; }
#eg-hints { margin-left: auto; font-size: 15px; color: #6c7a90; }
#eg-hints b { color: #c9d4e3; font-weight: 600; }

/* ── Règle horaire ── */
#eg-ruler-clip {
  position: absolute; top: 72px; left: 260px; right: 0; height: 34px;
  overflow: hidden; border-bottom: 1px solid #1c2430;
}
#eg-ruler { position: absolute; top: 0; left: 0; height: 34px; }
.eg-hour {
  position: absolute; top: 7px; font-size: 14px; color: #6c7a90;
  border-left: 1px solid #1c2430; padding-left: 7px; height: 27px;
}

/* ── Corps : colonne chaînes + rangées ── */
#eg-body {
  position: absolute; top: 106px; left: 0; right: 0; bottom: 64px;
  overflow: hidden;
}
#eg-chcol {
  position: absolute; top: 0; left: 0; width: 260px; height: 100%;
  overflow: hidden; background: #0d1118; border-right: 1px solid #26303f;
  z-index: 2;
}
#eg-chcol-inner { position: absolute; top: 0; left: 0; width: 100%; }
.eg-ch {
  position: absolute; left: 0; width: 260px; height: 60px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  padding: 0 12px; border-bottom: 1px solid #141a24;
}
.eg-ch img { width: 42px; height: 42px; object-fit: contain; margin-right: 10px; }
.eg-ch-name {
  font-size: 18px; color: #e8eef6; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

#eg-rows-clip {
  position: absolute; top: 0; left: 260px; right: 0; height: 100%;
  overflow: hidden;
}
#eg-rows { position: absolute; top: 0; left: 0; }
.eg-row { position: absolute; left: 0; height: 60px; }

.eg-prog {
  position: absolute; top: 6px; height: 48px;
  background: #161d29; border: 1px solid #232d3c; border-radius: 6px;
  overflow: hidden; padding: 0 10px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
}
.eg-prog-t {
  font-size: 15px; color: #aab8cc; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.eg-prog-empty { background: #131a26; border: 1px dashed #2e3a4c; }
.eg-prog-empty .eg-prog-t { color: #7d8ba0; font-style: italic; }
.eg-row { border-bottom: 1px solid #141a24; width: 10080px; }

.eg-prog.eg-focus {
  background: #e50914; border-color: #ff5560;
  -webkit-box-shadow: 0 0 18px rgba(229, 9, 20, 0.55);
  box-shadow: 0 0 18px rgba(229, 9, 20, 0.55);
  z-index: 3;
}
.eg-prog.eg-focus .eg-prog-t { color: #fff; font-weight: 700; }

/* ── Ligne « maintenant » ── */
#eg-nowline {
  position: absolute; top: 72px; bottom: 64px; width: 2px;
  margin-left: 0; left: 260px;
  background: #e50914; z-index: 4;
  -webkit-box-shadow: 0 0 8px rgba(229, 9, 20, 0.8);
  box-shadow: 0 0 8px rgba(229, 9, 20, 0.8);
}

/* ── Barre d'info bas ── */
#eg-infobar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  z-index: 10;
  background: #10141c; border-top: 1px solid #26303f;
  padding: 0 40px; font-size: 18px; color: #c9d4e3;
  line-height: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#eg-infobar b { color: #fff; }
.eg-ib-time  { color: #6c7a90; margin-left: 6px; }
.eg-ib-state { color: #e50914; margin-left: 14px; font-weight: 600; }