/*
 * nineanime-schedule.css — owned by the schedule area.
 * Scope: /schedule page and the #schedule-block home widget.
 *
 * Rules here extend public/assets/nineanime/css/styles.css (9anime's own
 * stylesheet, vendored verbatim — never edit it). Loaded on every page after
 * nineanime-bridge.css, so any page may reuse another area's component.
 * Comment each block with why it exists.
 */

/* ── Home "Estimated Schedule" widget (#schedule-block, partials/schedule) ──
   main.js Schedule runs the day strip as Swiper(slidesPerView:"auto",
   slidesPerGroup:2) — so each tile's width and gap come from here, set to
   9anime's own configuration (reference/ajax/schedule-widget.json: 7 per
   view / 13px from 1024, 5 / 10 from 768, 4 / 10 from 640, 3 / 10 below —
   the same numbers the hianime build used). */
.table_schedule .table_schedule-date .swiper-slide.day-item { width: calc((100% - 20px) / 3); margin-right: 10px; }
@media screen and (min-width: 640px) { .table_schedule .table_schedule-date .swiper-slide.day-item { width: calc((100% - 30px) / 4); } }
@media screen and (min-width: 768px) { .table_schedule .table_schedule-date .swiper-slide.day-item { width: calc((100% - 40px) / 5); } }
@media screen and (min-width: 1024px) { .table_schedule .table_schedule-date .swiper-slide.day-item { width: calc((100% - 78px) / 7); margin-right: 13px; } }

/* main.js moves `.active` on the slide (`.day`), 9anime styled the tile
   (`.tsd-item.active`: #5a2e98, white, the date #a885da): the same values,
   keyed off the slide. (Recoloured by the 9anime foundation pass.) */
.table_schedule .table_schedule-date .day.active .tsd-item { background: #5a2e98; color: #fff; }
.table_schedule .table_schedule-date .day.active .tsd-item .date { color: #a885da; }

/* main.js toggles `.expand` on `.body` from the `.more` button; hianime's
   expanded state was `.table_schedule-list.active` + `.btn-showmore.active`. */
#schedule-block .body.expand .table_schedule-list li { display: block !important; }
#schedule-block .body.expand .btn-showmore::before { content: "Show less"; }

/* Releases already out (a CMS state hianime did not draw). */
.table_schedule .table_schedule-list li.old .tsl-link { opacity: .6; }
.table_schedule .table_schedule-list li.na-empty { border-bottom: none; }

/* 9anime fixed the play button at 120px (90px ≤480px), which its two-digit
   episodes fit; a four-digit episode ("Episode 1180") would wrap to two lines,
   so the width is a minimum and the label stays on one line. */
.table_schedule .table_schedule-list li .film-detail .fd-play .btn-play { white-space: nowrap; min-width: 120px; width: auto; }
@media screen and (max-width: 480px) {
    .table_schedule .table_schedule-list li .film-detail .fd-play .btn-play { min-width: 90px; }
}

/* Loader: main.js Schedule dims .body to .5 while a day loads. hianime's
   widget swapped the day with no loading visual (reference/ajax/
   schedule-widget.html: $.get then .html()) and so did 9anime's, so the dim
   is cancelled. */
#schedule-block .body[style*="opacity"] { opacity: 1 !important; }

/* ── /schedule page (frontend/schedule.blade.php, owned by misc) ──
   The same widget markup as the main column of 9anime's listing frame; the
   day strip is a Swiper (slidesPerView:"auto") sized by the tile rules above.
   Only the page's own states are added here. */

/* A day is being fetched: 9anime swapped the list with no loading visual,
   so none is drawn; clicks wait for the day in flight. */
.na-schedule-page [data-na-schedule-body].is-loading { pointer-events: none; }

/* Keyboard focus on a day tile (tiles are role="tab", tabindex 0). */
.na-schedule-page .tsd-item { user-select: none; outline: none; }
.na-schedule-page .tsd-item:focus-visible { box-shadow: 0 0 0 2px #a885da; }

/* An empty day: one line in a row's place and colours. */
.table_schedule .table_schedule-list li.na-empty { padding: 15px 20px; color: #666; font-size: 15px; font-weight: 300; text-align: left; }
@media screen and (max-width: 480px) {
    .table_schedule .table_schedule-list li.na-empty { padding: 10px 15px; font-size: 14px; }
}