/* =========================================================
   EPISODE PLAYLIST MODULE
   - Custom colors for episode chip + dark mode
   - Do not affect other parts of the theme
   ========================================================= */

/* Token for the playlist */
:root{
  --ep-bg:#f8fafc;
  --ep-text:#0f172a;
  --ep-line:#e5e7eb;
  --ep-brand:#6366f1;
  --ep-ok:#22c55e;
  --ep-watched:#4bb980;
}

/* Dark mode for the playlist */
body.darkmode{
  --ep-bg:#0b1220;
  --ep-text:#e5e7eb;
  --ep-line:#1f2937;
  --ep-brand:#8b93ff;
  --ep-ok:#22c55e;
  --ep-watched:#51423b;
}

/* Episode number (chip) button */
.episode-number{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:32px;
  padding:0 .6rem;
  border-radius:10px;
  border:1px solid var(--ep-line);
  background:var(--ep-bg);
  color:var(--ep-text);
  font-weight:600;
  text-decoration:none;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    color .12s ease,
    border-color .12s ease;
}

.episode-number:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.episode-number:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ep-brand) 40%, transparent);
}

/* Watched */
.episode-number.watched{
  border-color:color-mix(in srgb, var(--ep-ok) 45%, var(--ep-line));
  background:var(--ep-watched);
  color:color-mix(in srgb, var(--ep-ok) 68%, var(--ep-text));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--ep-ok) 12%, transparent);
}
.episode-number.watched:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.episode-number.watched::after{
  content:"✓";
  position:absolute;
  top:-6px;
  right:-6px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:900;
  line-height:1;
  color:#fff;
  background:var(--ep-ok);
  border:2px solid var(--ep-bg);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.episode-number.watched.current-ep{
  border-color:color-mix(in srgb, var(--ep-ok) 65%, var(--ep-line));
}

/* Internal token for playlist block */
.as-episode-module{
  --as-accent: var(--ep-brand);
  --as-card-bg:#ffffff;
  --as-border:rgba(0,0,0,.08);
  --as-chip-bg:#f2f4f7;
  --as-chip-fg:#111827;
  --as-chip-bg-hover:#e5e7eb;
  --as-input-bg:#ffffff;
  --as-input-fg:#111827;
  --as-input-border:rgba(0,0,0,.12);
}

body.darkmode .as-episode-module{
  --as-card-bg:#1f2329;
  --as-border:rgba(255,255,255,.08);
  --as-chip-bg:#2b2f36;
  --as-chip-fg:#e5e7eb;
  --as-chip-bg-hover:#353b44;
  --as-input-bg:#2b2f36;
  --as-input-fg:#e5e7eb;
  --as-input-border:rgba(255,255,255,.12);
}

@media (prefers-color-scheme: dark){
  body:not(.lightmode) .as-episode-module{
    --as-card-bg:#1f2329;
    --as-border:rgba(255,255,255,.08);
    --as-chip-bg:#2b2f36;
    --as-chip-fg:#e5e7eb;
    --as-chip-bg-hover:#353b44;
    --as-input-bg:#2b2f36;
    --as-input-fg:#e5e7eb;
    --as-input-border:rgba(255,255,255,.12);
  }
}

/* Card container for the playlist */
.as-episode-module .bixbox.infx{
  background:var(--as-card-bg);
  border-color:var(--as-border);
}

/* === Filters (range + search) === */
.as-episode-module .episode-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  margin-bottom:12px;
}

.as-episode-module .episode-filters select,
.as-episode-module .episode-filters .episode-search{
  background:var(--as-input-bg);
  color:var(--as-input-fg);
  border:1px solid var(--as-input-border);
  border-radius:6px;
  font-size:13px;
  padding:6px 8px;
}

/* === Container list of episodes === */
.as-episode-module .episode-numbers{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-height:220px;
  overflow:auto;
  margin:0;
  padding:10px 6px 10px 0;
}

/* Override the chip color in the module */
/* .as-episode-module .episode-number{
  background:var(--as-chip-bg);
  color:var(--as-chip-fg);
}*/

.as-episode-module .episode-number:hover{
  background:var(--as-chip-bg-hover);
}

/* Current episode */
.as-episode-module .episode-number.current-ep,
.as-episode-module .episode-number.active{
  background:var(--as-accent);
  color:#fff;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--as-accent) 35%, transparent);
}

/* Exit fullscreen button in the player */
#pembed #exitFullscreenBtn{
  background:rgba(0,0,0,.7);
  color:#fff;
}
body.lightmode #pembed #exitFullscreenBtn{
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
body.darkmode #pembed #exitFullscreenBtn{
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}