/* Nunito, Self Hosted, Latin And Latin Extended */
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../Fonts/Nunito-Latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../Fonts/Nunito-LatinExt.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../Fonts/Nunito-Italic-Latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Nunito";
    font-style: italic;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../Fonts/Nunito-Italic-LatinExt.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Shared Tokens */
:root {
    --radius-panel: 20px;
    --radius-video: 30px;
    --manga-page-ratio: 0.667;
    --poster-ratio: 2 / 3;
    --glass-opacity: 66%;
    --glass-blur: blur(12px);
    --popover-width: clamp(200px, 90vw, 500px);
    --popover-narrow-width: clamp(200px, 90vw, 320px);
    --row-hover-amount: 12%;
    --row-watched: color-mix(in srgb, var(--mud-palette-black) 8%, transparent);
    --row-hover: color-mix(in srgb, var(--mud-palette-black) var(--row-hover-amount), transparent);
    --row-selected: color-mix(in srgb, var(--mud-palette-black) 18%, transparent);
    --row-edge-color: color-mix(in srgb, var(--mud-palette-black) calc(var(--row-hover-amount) / 3), var(--mud-palette-surface));
    --row-edge: inset 0 1px var(--row-edge-color), inset 0 -1px var(--row-edge-color);
}

/* App Bar Glass On Menus, Selects And Dropdowns */
.mud-popover.mud-paper {
    background-color: color-mix(in srgb, var(--mud-palette-surface) var(--glass-opacity), transparent);
    backdrop-filter: var(--glass-blur);
}

/* Dialogs Blur The Page Behind Them */
.mud-overlay-scrim.mud-overlay-dark {
    backdrop-filter: var(--glass-blur);
}

/* Shared Panel Radius */
.rounded-panel {
    border-radius: var(--radius-panel) !important;
}

/* Theme Values Win Over Bootstrap Reboot */
html, body {
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
    scroll-behavior: smooth;
}

/* Responsive */
@media (max-width: 900px) {
    .anime-info-layout {
        flex-direction: column !important;
    }
}

/* Player */
/* Player Banner, Slightly Blurred Under Its Dim Layers */
.player-backdrop {
    --player-backdrop-blur: 4px;
    isolation: isolate;
}

    .player-backdrop::before {
        content: "";
        position: absolute;
        inset: calc(var(--player-backdrop-blur) * -2);
        z-index: -1;
        background-image: var(--player-backdrop);
        background-size: cover;
        background-position: center;
        filter: blur(var(--player-backdrop-blur));
    }

.player {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: calc(100vh - 100px);
    max-width: calc((100vh - 100px) * (16 / 9));
    margin: 0 auto;
    position: relative;
    background: #000;
    border-radius: var(--radius-video);
}

/* Search Bar */
.search-popover {
    --search-popover-height: calc(100dvh - 100px);
    --search-footer-height: 50px;
    max-height: var(--search-popover-height) !important;
    width: var(--popover-width) !important;
    max-width: initial !important;
}

/* Filter Menu */
.filter-menu-popover {
    max-height: calc(100dvh - 220px) !important;
    overflow-y: auto !important;
}

.search-popover.no-results {
    width: initial !important;
}

.search-popover .media-list-item:hover {
    background: initial !important;
    box-shadow: none;
}

/* Only The Results Scroll, The Footer Sits Below Them */
.search-popover.mud-popover {
    overflow: hidden !important;
}

    .search-popover.mud-popover:has(.mud-autocomplete-after-items:not(:empty)) {
        padding-bottom: var(--search-footer-height);
    }

    .search-popover.mud-popover .mud-list {
        position: static;
        overflow-y: auto !important;
        max-height: calc(var(--search-popover-height) - var(--search-footer-height)) !important;
    }

/* Footer Hugs The Edges Instead Of MudBlazor's Padding */
.search-popover .mud-autocomplete-after-items,
.search-popover .mud-autocomplete-no-items {
    padding: 0;
}

.search-popover .mud-autocomplete-after-items {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--search-footer-height);
}

.popover-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Centered Overview HTML Content */
.mud-typography ul,
.mud-typography ol {
    list-style-position: inside;
    padding-left: 0;
}

/* Highlight */
.mark, mark {
    padding: 0 !important;
}

/* Fades Instead Of Snapping Into View */
.mud-scroll-to-top {
    transition: opacity 0.25s ease !important;
}

/* Mirrors The MudBlazor App Bar Height At Every Breakpoint */
.manga-reader {
    --reader-fab-inset: 32px;
    --reader-fab-size: 40px;
    top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
}

@media (min-width: 0px) and (orientation: landscape) {
    .manga-reader {
        top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    }
}

@media (min-width: 600px) {
    .manga-reader {
        top: var(--mud-appbar-height);
    }
}

/* Hidden Until The Reader Scrolls Down, Stacked Over The Next Chapter Button */
.manga-scroll-top {
    position: fixed;
    right: var(--reader-fab-inset);
    bottom: calc(var(--mud-appbar-height) + var(--reader-fab-inset) + var(--reader-fab-size));
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

    .manga-scroll-top.visible {
        opacity: 1;
        pointer-events: auto;
    }

/* One Slot Per Page, Repeated Hundreds Of Times, So It Carries No Inline Style */
.manga-page-slot {
    min-height: var(--manga-page-height);
}

    .manga-page-slot.snap {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

.manga-page-frame {
    position: relative;
    margin: 8px auto;
    min-height: var(--manga-page-height, 0px);
    background: transparent;
    width: fit-content;
}

    .manga-page-frame.zoom {
        width: var(--manga-page-zoom);
        max-width: var(--manga-page-width);
    }

.manga-page-image {
    aspect-ratio: auto var(--manga-page-ratio);
    max-height: var(--manga-page-height);
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: var(--radius-panel);
    display: block;
}

    .manga-page-image.zoom {
        max-height: none;
        width: 100%;
    }

/* Reads As A Small Filled Chip Without The Chip Markup */
.manga-page-number {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 2px 8px;
    border-radius: var(--mud-default-borderradius);
    font-size: 0.75rem;
    line-height: 1.5;
    background-color: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
}

/* One Width For Every Identity Form */
.auth-card {
    width: auto;
    max-width: 500px;
}

/* Marks Values Selectable Where MudBlazor Suppresses Selection */
.selectable-text {
    user-select: text;
    -webkit-user-select: text;
}

/* #region ApexCharts Overrides */
svg.apexcharts-svg {
    background-color: initial !important;
}
/* #endregion */

/* #region MudBlazor Overrides */
/* Nav Menu */
a.mud-nav-link.mud-ripple.active {
    box-shadow: var(--mud-elevation-4);
}

/* Nav Link */
.mud-nav-link {
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 2px;
    text-decoration: none;
}

/* Main Content */
/* Clip Horizontally Only So Sticky Children Still Work */
.mud-main-content {
    min-height: 0 !important;
    overflow-x: clip !important;
}

/* Text Field */
.mud-input > input.mud-input-root-outlined.mud-input-root:-webkit-autofill,
div.mud-input-slot.mud-input-root-outlined.mud-input-root:-webkit-autofill {
    border-radius: var(--radius-panel) !important;
}

/* List */
.mud-popover .mud-list {
    max-height: unset !important;
}

/* List Item, Rows Darken Between Two Light Edges */
.media-list-item {
    cursor: pointer;
}

    .media-list-item:hover {
        background: var(--row-hover) !important;
        box-shadow: var(--row-edge);
    }

/* Selected List Item */
.media-list-item-selected,
.media-list-item-selected:hover {
    background: var(--row-selected) !important;
    box-shadow: var(--row-edge);
}

/* Dropdown Rows Take The Same Look Through Their Wrapper */
.search-popover .mud-list-item-clickable:hover,
.search-popover .mud-list-item-clickable:focus {
    background-color: var(--row-hover);
    box-shadow: var(--row-edge);
}

.search-popover .mud-selected-item {
    background-color: var(--row-selected) !important;
    box-shadow: var(--row-edge);
}

/* A Result Card Darkens As One Surface, So No Rim Shows */
.media-result-card:has(.media-list-item:hover) {
    background-color: color-mix(in srgb, var(--mud-palette-black) var(--row-hover-amount), var(--mud-palette-surface));
}

.media-result-card .media-list-item:hover {
    background: none !important;
    box-shadow: none;
}

/* Chips Carry The Slightest Theme Shadow */
.mud-chip {
    box-shadow: var(--mud-elevation-1);
}

/* Filled Buttons Take The Theme Shadow Instead Of Material's Own */
.mud-button-filled,
.mud-button-filled:hover,
.mud-button-filled:focus-visible,
.mud-button-filled:active {
    box-shadow: var(--mud-elevation-1);
}

    /* Ripple Reaches Over The Transparent Border, So No Rim */
    .mud-button-filled.mud-icon-button {
        overflow: clip;
        overflow-clip-margin: border-box;
    }

/* Table */
.mud-elevation-4.mud-table .mud-table-head .mud-table-cell {
    border-radius: 0 !important;
}

/* Snackbar */
.mud-snackbar.mud-alert-text-success.mud-snackbar-blurred {
    max-width: calc(100vw - 50px);
}

/* Tabs */
.mud-tabs .mud-tab-active {
    background-color: color-mix(in srgb, var(--mud-palette-background) 38%, transparent);
}

.mud-tab {
    min-width: initial !important;
}

    .mud-tab .mud-badge-root,
    .mud-tab .mud-badge-wrapper,
    .mud-tab .mud-badge {
        position: static;
        transform: none;
        margin-top: 1px;
    }

    .mud-tab .mud-badge-root {
        align-self: flex-start;
    }

/* #endregion */

/* #region Hover Actions */
/* Card And Row Buttons Appear Only Where A Pointer Can Hover */
@media (hover: hover) and (pointer: fine) {
    .hover-action {
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .hover-host:hover .hover-action,
    .hover-host:focus-within .hover-action {
        opacity: 1;
    }
}
/* #endregion */

/* #region Watch Panels */
/* Episode And Related Panels Share One Height Cap */
.watch-panel {
    height: fit-content;
    max-height: 554px;
}

/* Header Shadow Floats Above The Scrolling Body */
.watch-panel-header {
    box-shadow: 0px 0px 20px 20px color-mix(in srgb, var(--mud-palette-background) 46%, transparent);
}

/* Body Takes The Height Left By The Header */
.watch-panel-body {
    flex: 1;
    min-height: 0;
}
/* #endregion */

/* #region Episode List */
/* Watched Item */
.episode-item.watched-episode {
    background: var(--row-watched);
}
/* #endregion */

/* #region Home Section Navigation */
/* Offset Anchors So They Land Below The Fixed App Bar */
.section-anchor {
    scroll-margin-top: 96px;
}

/* Tighter Even Padding Instead Of Default Gutters */
.mobile-section-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding: 0 20px 20px 20px;
}

/* Touch Browsers Emulate Hover And Stick Tooltips Open */
@media (hover: none), (pointer: coarse) {
    .mud-tooltip {
        display: none;
    }
}
/* #endregion */

/* #region Log Console */
/* Newest Line Pins To The Bottom Like A Terminal */
.log-console {
    display: flex;
    flex-direction: column-reverse;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.4;
}

    .log-console pre {
        flex-shrink: 0;
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
    }

.log-line-error {
    color: #f14c4c;
}

.log-line-warning {
    color: #e5c07b;
}

.log-line-info {
    color: #d4d4d4;
}

.log-line-debug {
    color: #808080;
}
/* #endregion */