/* Phase 119: Series Room — Text Legibility & Polish
   Fixes amber/gold buttons with dark-brown text that reads poorly, lightens
   the overall color scheme, and removes z-index stacking issues that let
   buttons/windows overlap text content.
   Targets all sr4x-sr5x class prefixes used across the Series Room suite.
*/

/* ═══════════════════════════════════════════════════════════════════════════
   1. PRIMARY ACTION BUTTONS — replace near-black text on gold gradient with
      white text on a more readable solid dark button
   ═══════════════════════════════════════════════════════════════════════════ */

.sr45-btn,
.sr47-btn, .sr47-chip-btn,
.sr50-btn, .sr50-mini-btn,
.sr53-btn, .sr53-mini-btn,
.sr55-btn, .sr55-mini-btn {
  background: linear-gradient(160deg, #2563EB, #1D4ED8) !important;
  color: #ffffff !important;
  border-color: #1D4ED8 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

.sr45-btn:hover,
.sr47-btn:hover, .sr47-chip-btn:hover,
.sr50-btn:hover, .sr50-mini-btn:hover,
.sr53-btn:hover, .sr53-mini-btn:hover,
.sr55-btn:hover, .sr55-mini-btn:hover {
  background: linear-gradient(160deg, #1D4ED8, #1E40AF) !important;
  color: #ffffff !important;
}

/* Ghost / secondary buttons: keep warm border but legible text */
.sr45-btn.ghost,
.sr47-btn.ghost, .sr50-btn.ghost, .sr53-btn.ghost, .sr55-btn.ghost,
.sr45-btn-secondary, .sr47-btn-secondary, .sr50-btn-secondary,
.sr53-btn-secondary, .sr55-btn-secondary {
  background: transparent !important;
  color: #111827 !important;
  border: 1px solid #D1D5DB !important;
  text-shadow: none !important;
}

.sr45-btn.ghost:hover,
.sr47-btn.ghost:hover, .sr50-btn.ghost:hover, .sr53-btn.ghost:hover, .sr55-btn.ghost:hover {
  background: #F3F4F6 !important;
  color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. EYEBROW / KICKER LABELS — gold labels on dark backgrounds are fine,
      but gold on white/off-white panels creates poor contrast. Normalize
      to a neutral muted-ink color on light surfaces.
   ═══════════════════════════════════════════════════════════════════════════ */

.sr45-eyebrow,
.sr47-eyebrow,
.sr50-eyebrow, .sr50-kicker,
.sr53-eyebrow, .sr53-kicker,
.sr55-eyebrow, .sr55-kicker {
  color: #6B7280 !important;
  text-shadow: none !important;
}

/* When an eyebrow sits inside a dark-background card, let it be light */
.sr45-hero .sr45-eyebrow,
.sr47-hero .sr47-eyebrow,
.sr50-hero .sr50-eyebrow,
.sr53-hero .sr53-eyebrow,
.sr55-hero .sr55-eyebrow {
  color: rgba(255,255,255,.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. HEAT / STATUS BADGES — warm badge had near-white text (#fff2b9) on
      a very light yellow background. Fix to readable dark amber.
   ═══════════════════════════════════════════════════════════════════════════ */

.hot  { background: rgba(239,68,68,.12) !important;  color: #991B1B !important; font-weight: 700 !important; }
.warm { background: rgba(245,158,11,.14) !important; color: #92400E !important; font-weight: 700 !important; }
.cool { background: rgba(59,130,246,.12) !important; color: #1E40AF !important; font-weight: 700 !important; }
.cold { background: rgba(107,114,128,.1) !important; color: #374151 !important; font-weight: 700 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. PANEL / CARD Z-INDEX STACKING — ensure action buttons and modal-like
      panels have proper stacking so they never slip behind content blocks
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generic Series Room action buttons — sit above card content */
.sr45-btn, .sr47-btn, .sr50-btn, .sr53-btn, .sr55-btn,
.sr45-mini-btn, .sr47-mini-btn, .sr50-mini-btn, .sr53-mini-btn, .sr55-mini-btn {
  position: relative;
  z-index: 5;
}

/* Slide-over / detail panels above the episode grid */
.sr45-side-panel, .sr47-side-panel, .sr50-side-panel,
.sr53-side-panel, .sr55-side-panel,
[class*="side-panel"], [class*="detail-panel"], [class*="ep-panel"] {
  z-index: 50 !important;
}

/* Dropdown menus and season selectors above column headers */
.sr45-season-sel, .sr50-season-sel, .sr53-season-sel, .sr55-season-sel,
select[class*="sr4"], select[class*="sr5"] {
  position: relative;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. GENERAL TEXT LEGIBILITY — any instance of sr*-text or sr*-label that
      inherited the gold color; force to readable ink.
   ═══════════════════════════════════════════════════════════════════════════ */

[class*="sr4"][class*="-label"],
[class*="sr5"][class*="-label"],
[class*="sr4"][class*="-text"],
[class*="sr5"][class*="-text"] {
  color: #111827 !important;
  text-shadow: none !important;
}

/* Exception: items explicitly styled for dark-card reversed text */
[class*="sr4"][class*="-label"].reversed,
[class*="sr5"][class*="-label"].reversed {
  color: rgba(255,255,255,.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. EPISODE COLUMN HEADERS & LABELS — ensure column titles are dark on
      white backgrounds regardless of the gold theme
   ═══════════════════════════════════════════════════════════════════════════ */

.sr45-col-head, .sr47-col-head, .sr50-col-head, .sr53-col-head, .sr55-col-head,
.sr45-col-label, .sr47-col-label, .sr50-col-label, .sr53-col-label, .sr55-col-label {
  color: #374151 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Episode card title text — always dark ink */
.sr45-ep-title, .sr47-ep-title, .sr50-ep-title, .sr53-ep-title, .sr55-ep-title,
.sr45-ep-name, .sr47-ep-name, .sr50-ep-name, .sr53-ep-name, .sr55-ep-name {
  color: #111827 !important;
}

/* Muted meta text: date, page count, etc. */
.sr45-ep-meta, .sr47-ep-meta, .sr50-ep-meta, .sr53-ep-meta, .sr55-ep-meta {
  color: #6B7280 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SERIES ROOM SHELL — clean up the background and top-level typography
   ═══════════════════════════════════════════════════════════════════════════ */

#seriesroom-app {
  --sr-ink: #111827;
  --sr-muted: #6B7280;
  --sr-border: #E5E7EB;
  --sr-surface: #FFFFFF;
  --sr-accent: #2563EB;
}

/* Make sure the series room app-level container doesn't clip buttons */
#seriesroom-app,
#seriesroom-app > * {
  overflow: visible;
}

#seriesroom-app .hidden { display: none !important; }