/* pagination */

.page-item.active .page-link {
    background-color: var(--bs-gray-600);
    border-color: var(--bs-gray-600);
    color: white;
}

.page-link {
    color: var(--bs-gray-600);
}

/* cards */

.card {
    margin-bottom: 1rem;
}

.card .card {
    margin-bottom: 0;
}

.card-work {
    border-left: 8px solid var(--work-color, transparent);
}

/* status buttons */

.btn-group.status button {
    --status-color: #000;
    color: var(--status-color);
    background-color: var(--bs-btn-bg);
}

.btn-group.status button.selected {
    color: white;
    background-color: var(--status-color);
    opacity: 0.6;
}

.btn-group.status button:hover {
    color: white;
    background-color: var(--status-color);
    opacity: 0.4;
}

/* downloads by release group, a row per channel (Nyaa, AnimeBytes) */

.release-channel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
}

.release-channel + .release-channel {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.release-channel-label {
    min-width: 5.5rem;
    font-size: 0.875rem;
}

/* episodes as lines: number, date, the preferred download, the others under "more" */

/* chapter overview: a work's cover in front, its title and episodes beside it */

.card-series {
    flex-direction: row;
}

/* as wide for every work, so titles and episodes line up across cards; the cover itself
   keeps its own shape inside it, never stretched or cut */
.series-cover {
    flex: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: calc(79px + 1rem);
    padding: 0.5rem;
    border-right: 1px solid var(--bs-border-color-translucent);
}

.series-cover img {
    display: block;
    width: auto;
    height: auto;
    max-width: 79px;
    max-height: 79px;
    border-radius: var(--bs-border-radius-sm);
}

/* the placeholder of a work without an icon sizes itself inline */
.series-cover > div {
    width: 79px !important;
    height: 79px !important;
}

.series-main {
    flex: 1;
    min-width: 0;
}

.series-main > .card-header {
    border-top-left-radius: 0;
}

@media (max-width: 575.98px) {
    .series-cover {
        width: calc(48px + 1rem);
    }

    .series-cover img {
        max-width: 48px;
        max-height: 48px;
    }

    .series-cover > div {
        width: 48px !important;
        height: 48px !important;
    }
}

.episode-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
}

/* the rows lay out by the card's width, not the screen's: beside a sidebar a card is narrow */
.series-main,
.card-work {
    container-type: inline-size;
}

/* in a narrow card the download gets a line of its own, starting where every other one does */
@container (max-width: 39.99rem) {
    .episode-download {
        flex-basis: 100%;
        margin-left: 0;
    }

    /* small enough to stay one line next to the longest channel's badge */
    .download-primary .btn {
        --bs-btn-padding-x: 0.5rem;
        --bs-btn-font-size: 0.875rem;
    }
}

/* in columns, so every episode's name, date and download start where the others' do */
@container (min-width: 40rem) {
    .episode-row {
        display: grid;
        grid-template-columns: auto 6rem 7rem minmax(0, 1fr) 4.75rem;
        column-gap: 0.5rem;
    }

    .episode-download {
        grid-column: 4;
        margin-left: 0 !important;
    }

    .episode-more {
        grid-column: 5;
    }
}

.episode-row + .episode-row {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.episode-name {
    min-width: 5.5rem;
    overflow-wrap: anywhere;
    font-weight: 600;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}

.episode-date {
    min-width: 7rem;
    font-size: 0.875rem;
}

.episode-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* also over the dark theme's btn-light, which the release types draw */
.download-primary .btn,
[data-bs-theme=dark] .download-primary .btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
    --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);
    font-weight: 600;
    white-space: nowrap;
}

.episode-more {
    /* as wide for "Less" as for "4 more", so nothing on the line shifts when it opens */
    min-width: 4.75rem;
    text-align: start;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    font-size: 0.875rem;
    background: none;
}

.episode-more:hover {
    color: var(--bs-emphasis-color) !important;
}

.episode-more::after {
    content: " \25BE";
}

.episode-more[aria-expanded=true]::after {
    content: " \25B4";
}

.episode-more[aria-expanded=false] .when-open,
.episode-more[aria-expanded=true] .when-closed {
    display: none;
}

/* the others take a line of their own under the episode; the button stays where it is */
.episode-panel,
.episode-all {
    flex-basis: 100%;
    grid-column: 1 / -1;
}

.episode-panel[hidden] {
    display: none;
}

/* chapter dots */

.chapter-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    vertical-align: middle;
    background: none;
    border: none;
    padding: 0;
}

.chapter-dot::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--bs-gray-400);
}

.chapter-dot.finished::after {
    background-color: #4caf50;
    border-color: #4caf50;
}

.chapter-dot:hover::after {
    border-color: #4caf50;
}

.chapter-dot.preview::after {
    opacity: 0.4;
}

/* mobile responsive */

.card-work .btn-group {
    flex-wrap: wrap;
}

.card-work > .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.25rem;
}

.card-work > .card-header > .float-end {
    float: none !important;
    margin-left: auto;
}

.btn-group.status {
    flex-wrap: wrap;
}

.status-controls {
    width: fit-content;
    max-width: 100%;
}

/* a fixed icon column, so the status column, and with it the button size, is the same on every card */
@media (min-width: 576px) {
    .work-icon-column {
        width: calc(90px + var(--bs-gutter-x));
    }

    .work-icon-column img {
        max-width: 100%;
        object-fit: contain;
    }
}

/* smaller status buttons when their column gets narrow, so they stay on one line */
.work-status-column {
    container-type: inline-size;
}

@container (max-width: 490px) {
    .btn-group.status .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

@container (max-width: 405px) {
    .btn-group.status .btn {
        padding: 0.25rem 0.3rem;
        font-size: 0.8rem;
    }
}

.pagination {
    flex-wrap: wrap;
}

/* compact mode */

.card-compact {
    margin-bottom: 2px;
}

.card-compact .card-header {
    padding: 0.5rem 0.75rem;
}

.card-compact .btn-group .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* dark mode */

/* btn-light stays light in Bootstrap's dark theme, so blend it in with the surface instead */
[data-bs-theme=dark] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-tertiary-bg);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-secondary-bg);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-secondary-bg);
}

/* status colours are picked for a light background (undefined is black), so lighten the text on a dark one */
[data-bs-theme=dark] .btn-group.status button:not(.selected, :hover) {
    color: color-mix(in srgb, var(--status-color), white 50%);
}

/* a week of chapters by day (weekly, history): columns by the width there is, not the screen's,
   so seven days only stand side by side when each fits a cover and a title */

.week {
    container-type: inline-size;
}

.week-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

@container (min-width: 30rem) {
    .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 46rem) {
    .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (min-width: 60rem) {
    .week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.week-day {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-body-bg);
}

.week-day.today {
    background: rgba(255, 157, 59, 0.15);
}

/* the day above its count, so every day's header is as high and the cards start level */
.week-day-header {
    display: flex;
    flex-direction: column;
    padding: 0 0.25rem 0.375rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    line-height: 1.3;
}


.week-day-count {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.week-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.5rem;
    border-left: 5px solid var(--work-color, var(--bs-border-color));
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-tertiary-bg);
    color: inherit;
    text-decoration: none;
}

.week-item:hover {
    background: var(--bs-secondary-bg);
}

/* as high for every cover, each in its own shape and never wider than the day */
.week-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
}

.week-cover img {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    border-radius: var(--bs-border-radius-sm);
}

.week-cover > div {
    max-width: 100%;
}

.week-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* the time goes under the episode rather than cutting it short in a narrow day */
.week-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.week-episodes {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-time {
    margin-left: auto;
    flex: none;
}

/* one day a row: the cover beside the title, not above it */
@container (max-width: 29.99rem) {
    .week-item {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 0.75rem;
    }

    .week-cover {
        grid-row: 1 / 3;
        height: 5.5rem;
    }

    .week-cover img {
        max-height: 5.5rem;
    }

    .week-cover > div {
        width: 4rem !important;
        height: 4rem !important;
    }

    .week-meta {
        align-self: end;
    }
}

.week-empty {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--bs-secondary-color);
}