/* Radius Scale */
:root {
    --radius-panel: 20px;
}

html, body {
    background-color: #222222;
    color: white;
    font-family: "Segoe UI", Roboto, Helvetica, Arial;
    scroll-behavior: smooth;
}

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

/* Player */
.player {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: calc(100vh - 100px);
    max-width: calc((100vh - 100px) * (16 / 9));
    margin: 0 auto;
}

/* Search Bar */
.search-popover {
    max-height: calc(100dvh - 100px) !important;
    width: clamp(200px, 90vw, 500px) !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;
}

.search-popover .mud-chip-container div {
    box-shadow: rgb(68 68 68) 0px 0px 8px 0px;
}

.search-popover .mud-select {
    width: 250px;
    flex-grow: initial;
}

.search-popover .mud-list {
    overflow-y: visible !important;
}

.search-popover .mud-autocomplete-after-items {
    position: sticky;
    bottom: 0;
    z-index: 1;
}

/* Covers The Sub-Pixel Seam Below The Sticky Footer */
.search-popover .search-popover-footer {
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 4px 0 0 var(--mud-palette-surface);
}

/* 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 {
    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);
    }
}

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

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

/* #region MudBlazor Overriddes */
/* Nav Menu */
a.mud-nav-link.mud-ripple.active {
    box-shadow: 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}

/* Nav Link */
.mud-nav-link {
    border-radius: 15px;
    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;
}

/* Chip */
.mud-chip {
    box-shadow: var(--mud-elevation-8);
}

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

/* List Item */
.media-list-item {
    cursor: pointer;
}

    .media-list-item:hover {
        background: rgba(0,0,0,0.04) !important;
    }

/* Selected List Item */
.media-list-item-selected {
    background: rgba(0,0,0,0.14) !important;
}

/* Table */
.mud-elevation-5.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: #22222260;
}

.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;
    }

/* AniList Menu Button */
.anilist-menu-btn .mud-button-filled-size-small.mud-icon-button {
    padding: 3px;
}

/* #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 #22222275;
}

/* 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: rgba(0,0,0,0.1);
}

    /* Watched Hover */
    .episode-item.watched-episode:hover {
        background: rgba(0,0,0,0.10) !important;
    }

/* Selected Hover */
.episode-item.selected-episode:hover {
    background: rgba(0,0,0,0.18) !important;
}

/* Item Hover */
.episode-item:hover {
    background: rgba(0,0,0,0.04) !important;
}
/* #endregion */

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

/* Lets The Last Section Scroll Up To The Top */
.home-fill-bottom {
    min-height: calc(100vh - 100px);
}

/* Sidebar Locks To The Top And Stays There While Scrolling */
.section-nav-sidebar {
    position: sticky;
    top: 80px;
    width: 240px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* 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 */