/* ============================================================
   Dinflix web overrides on top of style.css.

   style.css was authored for a fixed-1920 Tizen TV viewport: rigid flex
   row, no media queries, oversized paddings, 6-column movie grid. This
   sheet adapts the same markup to arbitrary browser viewports and hides
   per-user / TV-only UI bits the shared main.js still emits.
   ============================================================ */

/* ---------- Player overlay tweaks ---------- */
/* The Tizen #status overlay shows a big red spinner during loading;
   the browser's native <video controls> already shows its own buffering
   indicator on web, so the two stack. Hide the custom spinner — the
   text underneath still surfaces resolution stage messages. */
html.dinflix-web #status .spinner { display: none !important; }
html.dinflix-web #status { background: rgba(0,0,0,0.55); padding: 14px 22px; border-radius: 8px; }

/* The Tizen HUD's bottom bar duplicates the native video controls
   (curTime · progress bar · durTime). Hide the time/progress widgets so
   only one seekbar is on screen; keep the "Next →" button intact for
   series playback. */
html.dinflix-web #hud #curTime,
html.dinflix-web #hud #durTime,
html.dinflix-web #hud .progress-bar { display: none !important; }
/* Move the Next button so it doesn't sit empty-floating where the bar
   used to be. Top-right corner, away from the back button. */
html.dinflix-web #hud .hud-bottom { justify-content: flex-end; padding: 18px 24px; }

/* ---------- Admin-gated Update controls ---------- */
/* The shim sets <html class="dinflix-noadmin"> when /api/admin/me says
   the visitor isn't authed. main.js's updateHeaderControls still tries
   to show these on Tamil/Dubbed tabs — !important locks them off. */
html.dinflix-noadmin #updateBtn,
html.dinflix-noadmin #cleanUpdateBtn { display: none !important; }

/* ---------- Hide TV-only / per-user UI ---------- */
html.dinflix-web .channel-fav,
html.dinflix-web .channel-action[data-action="fav"] { display: none !important; }

html.dinflix-web .episode-btn.ep-watched::after,
html.dinflix-web .episode-btn.ep-dead::after { display: none !important; }
html.dinflix-web .episode-btn .ep-active-tag { display: none !important; }

/* ---------- Page chrome ---------- */
html.dinflix-web body { overflow-x: hidden; }
html.dinflix-web .container { padding: 16px 24px; max-width: 100%; }

/* Header: single row — title · tabs · search. Tabs take the remaining
   space and scroll horizontally when there's not enough room, instead of
   wrapping to a second line. Search sits at the far right. */
html.dinflix-web header {
  flex-wrap: nowrap;
  gap: 16px;
  padding: 12px 0;
  align-items: center;
  min-width: 0;
}
html.dinflix-web header > * + * { margin-left: 0; }
html.dinflix-web header h1 { font-size: 22px; flex-shrink: 0; }

/* ---------- Tab bar ---------- */
html.dinflix-web .tab-bar {
  flex: 1 1 0;
  min-width: 0;                 /* lets the flex item actually shrink */
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  justify-content: center;      /* center tabs in the space between title and search */
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
  padding-bottom: 4px;
}
html.dinflix-web .tab-bar::-webkit-scrollbar { height: 6px; }
html.dinflix-web .tab-bar::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

html.dinflix-web .tab-btn {
  padding: 7px 14px;
  font-size: 13px;
  flex-shrink: 0;
}

/* ---------- Search ---------- */
html.dinflix-web .search-wrapper {
  flex-shrink: 0;
  min-width: 0;
}
html.dinflix-web .search-input {
  width: 220px;
  max-width: 220px;
  font-size: 14px;
  padding: 8px 14px;
}

/* ---------- Movie grid (responsive) ---------- */
/* Replace the rigid 6-column grid with auto-fill so cards re-layout to
   fit any viewport. ~180px min keeps posters readable at all sizes. */
html.dinflix-web .movie-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  padding: 12px 0;
}

/* ---------- Schedule toolbar (cricket sources) ---------- */
/* Already wrap-aware, just tighten padding so it doesn't dominate the
   narrow viewport. */
html.dinflix-web .schedule-toolbar {
  gap: 10px;
  margin-bottom: 14px;
}
html.dinflix-web .source-picker { padding: 4px 8px 4px 12px; gap: 6px; }
html.dinflix-web .source-pill { padding: 6px 12px; font-size: 13px; }
html.dinflix-web .source-picker-label { font-size: 11px; }
html.dinflix-web .refresh-btn { padding: 8px 16px; font-size: 14px; }

/* ---------- Episode grid: tile size scales down on small viewports ---------- */
html.dinflix-web .episode-btn {
  width: 110px;
  height: 84px;
}
html.dinflix-web .episode-btn .ep-num { font-size: 28px; }

/* ---------- Smaller breakpoints ---------- */
@media (max-width: 760px) {
  html.dinflix-web .container { padding: 10px 14px; }
  html.dinflix-web header h1 { font-size: 18px; }
  html.dinflix-web .tab-btn { padding: 6px 11px; font-size: 12px; }
  html.dinflix-web .search-input { max-width: 200px; font-size: 13px; padding: 7px 12px; }
  html.dinflix-web .movie-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  html.dinflix-web .episode-btn { width: 96px; height: 76px; }
  html.dinflix-web .episode-btn .ep-num { font-size: 24px; }
  html.dinflix-web .match-card { padding: 14px 18px; }
  html.dinflix-web .match-title { font-size: 16px; }
}

@media (max-width: 480px) {
  html.dinflix-web .header-btn { font-size: 12px; padding: 5px 10px; }
  html.dinflix-web .search-input { width: 140px; max-width: 140px; font-size: 13px; padding: 7px 12px; }
  html.dinflix-web header h1 { font-size: 18px; }
  html.dinflix-web .movie-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}