/* ===== theme.css ===== */
/**
 * Theme behaviour layer.
 *
 * The home markup is a static snapshot of the React app. In the live app the
 * modal "overlayContainer" portals are only mounted while a dialog is open;
 * in the snapshot they are all present at once and (because they are
 * position:fixed) cover the whole page. Hide them by default and reveal one
 * only when JS adds .is-open.
 */
.overlayContainer {
    display: none !important;
}

.overlayContainer.is-open,
.overlayContainer.visible {
    display: flex !important;
}

/* The standalone backdrop overlays (empty divs) stay hidden until JS opens the
 * matching drawer and adds .visible — then they act as the dimmed backdrop. */
.overlayContainer:empty {
    display: none !important;
}

.overlayContainer:empty.visible {
    display: block !important;
}

/* Body scroll lock while a drawer / modal is open. */
body.miruro-no-scroll {
    overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Shared custom-select (assets/js/select.js — MiruroSelect).
 *
 * The compiled style.css ships react-select's control / option / value
 * classes, but NOT the menu, placeholder, multi-value chip or container
 * styles (those lived only in the live React bundle). Port them here so the
 * same control works on /search, in Settings and in the AniList editor.
 * ------------------------------------------------------------------ */
.css-1cz8olw-container,
.select-box--default {
    position: relative;
    box-sizing: border-box;
}

.css-6kt86s-control {
    cursor: pointer;
}

/* Single value + placeholder share the grid cell with the typing input. */
.css-vwse6m-singleValue {
    grid-area: 1 / 1 / 2 / 3;
    max-width: 100%;
    margin: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--global-text);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.css-1gbkqsz-placeholder {
    grid-area: 1 / 1 / 2 / 3;
    margin: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--global-text-muted, #8b8b94);
    box-sizing: border-box;
}

/* Typing input wrapper (kept tiny like react-select; it grows as you type). */
.css-1ojbrpo {
    visibility: visible;
    flex: 1 1 auto;
    display: inline-grid;
    grid-area: 1 / 1 / 2 / 3;
    grid-template-columns: 0 min-content;
    margin: 2px;
    box-sizing: border-box;
}

.mi-select-input {
    width: 100%;
    min-width: 2px;
    grid-area: 1 / 2;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    border: 0;
    outline: 0;
    box-sizing: content-box;
}

/* Multi-value row (chips + input). */
.css-1dyz3mf {
    display: flex;
    flex: 1 1 0%;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 2px 8px;
    box-sizing: border-box;
}

.css-s5qqol-multiValue {
    display: flex;
    min-width: 0;
    margin: 2px;
    background-color: var(--global-button-bg-light, #2a2a31);
    border-radius: var(--global-border-radius);
    box-sizing: border-box;
}

.css-e7hlbs {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--global-text);
    font-size: 85%;
    padding: 3px 3px 3px 6px;
    border-radius: var(--global-border-radius);
    box-sizing: border-box;
}

.css-1tz3wjm {
    display: flex;
    align-items: center;
    padding: 0 4px;
    cursor: pointer;
    border-radius: 0.1rem 0.5rem 0.5rem 0.1rem;
    box-sizing: border-box;
}

.css-1tz3wjm:hover {
    color: #fff;
    background-color: var(--cancelled, #e0566c);
}

/* Drop-down menu. */
.css-1aarlsx-menu {
    position: absolute;
    top: 100%;
    width: 100%;
    z-index: 20;
    margin: 8px 0;
    padding: 0.25rem;
    font-size: 0.8rem;
    color: var(--global-text);
    background-color: var(--global-secondary-bg);
    border: 1px solid var(--global-border-color);
    border-radius: var(--global-border-radius);
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;
    box-sizing: border-box;
    animation: 0.18s ease-in-out slideDown;
}

.css-qr46ko {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
    box-sizing: border-box;
}

.css-rzpvr5-option,
.css-659vw1-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 0.25rem;
    font-size: inherit;
    cursor: pointer;
    user-select: none;
    border-radius: var(--global-border-radius);
    box-sizing: border-box;
}

.css-rzpvr5-option {
    color: var(--global-text);
    background-color: var(--global-secondary-bg);
}

/* Selected option (and keyboard-highlighted) = accent text + tinted row. */
.css-659vw1-option,
.css-rzpvr5-option:hover,
.css-rzpvr5-option.mi-select-active,
.css-659vw1-option.mi-select-active {
    color: var(--primary-accent);
    background-color: var(--global-tertiary-bg);
}

.css-659vw1-option .optionRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mi-select-empty {
    color: var(--global-text-muted, #8b8b94);
    cursor: default;
}

/* Card "+" (add to list) button — top-right of a vertical card, reveal on hover. */
._cardAddButton_miruro {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    font-size: 1.1rem;
    color: #fff;
    cursor: pointer;
    background: #000000a6;
    border: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.18s ease, background-color 0.18s ease, transform 0.1s ease;
}

.verticalCardShell:hover ._cardAddButton_miruro,
._cardAddButton_miruro:focus-visible {
    opacity: 1;
}

._cardAddButton_miruro:hover {
    background: var(--primary-accent, #6ca2ff);
}

._cardAddButton_miruro:active {
    transform: scale(0.9);
}

/* Touch devices have no hover — always show the add button. */
@media (hover: none) {
    ._cardAddButton_miruro {
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ *
 * Single anime: tab panels (Characters / Artwork / Episodes).
 *
 * The React build sizes these panels by JS-measuring a fixed-height info card
 * and letting flex children fill the leftover space — hence `height: 0` /
 * `overflow: hidden` on the scrollable section and `height: 100%` on the
 * episode list. The static, server-rendered page has no fixed card height, so
 * those rules collapse the panels to nothing. Let the panels flow at their
 * natural height instead; the inner grids keep their own max-height + scroll.
 * ------------------------------------------------------------------ */
.infoScrollableSection,
.infoScrollableSection > * {
    height: auto !important;
    overflow: visible !important;
}

.scrollWrapper_hsaph,
.scrollWrapper {
    overflow: visible !important;
}

.listContainer {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Cap the episode list so very long seasons scroll instead of running on. */
.episodeGrid {
    max-height: 53rem;
    overflow-y: auto;
}

/* ===== account.css ===== */
/**
 * AniList account UI (login state, notifications, list editor, profile).
 *
 * Layered on top of style.css (which already ships the original build's module
 * classes). This file only styles the bits we render dynamically and the small
 * custom hooks (toasts, notification rows, the profile grid view, and the
 * "on list" state of the + / edit-list buttons).
 */

/* ------------------------------------------------------------------ *
 * Toasts — Sonner-style (matches the `sonner` library the official site
 * uses): bottom-right stack, rounded card, icon + title, slide-up enter.
 * ------------------------------------------------------------------ */
[data-sonner-toaster] {
	position: fixed;
	bottom: max(24px, env(safe-area-inset-bottom));
	right: 24px;
	z-index: 999999999;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 356px;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	outline: none;
}

[data-sonner-toast] {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 16px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	/* Sonner light theme defaults. */
	background: #fff;
	border: 1px solid hsl(0, 0%, 93%);
	color: hsl(0, 0%, 9%);
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.21, 1.02, 0.73, 1), opacity 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
}

[data-sonner-toaster][data-theme="dark"] [data-sonner-toast] {
	background: hsl(0, 0%, 9%);
	border-color: hsl(0, 0%, 18%);
	color: hsl(0, 0%, 99%);
}

[data-sonner-toast][data-mounted="true"] {
	transform: translateY(0);
	opacity: 1;
}

[data-sonner-toast][data-removed="true"] {
	transform: translateY(16px);
	opacity: 0;
}

[data-sonner-toast] [data-icon] {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

[data-sonner-toast][data-type="success"] [data-icon] {
	color: hsl(143, 85%, 40%);
}

[data-sonner-toast][data-type="error"] [data-icon] {
	color: hsl(0, 84%, 60%);
}

[data-sonner-toast] [data-content] {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

[data-sonner-toast] [data-title] {
	font-weight: 500;
}

/* ------------------------------------------------------------------ *
 * Profile: loading spinner + avatar rounding.
 * ------------------------------------------------------------------ */
.miruro-profile-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 50vh;
}

.miruro-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid var(--global-border-color, #2a2a31);
	border-top-color: var(--primary-accent, #6ca2ff);
	border-radius: 50%;
	animation: miruro-spin 0.8s linear infinite;
}

@keyframes miruro-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------ *
 * Notifications drawer — relative time on non-airing notification cards
 * (airing cards show the air date as a tag instead, see style.css).
 * ------------------------------------------------------------------ */
.detailsContainer_196 time {
	font-size: 0.72rem;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * Profile status filter: a button list with sections on desktop, the
 * compact <select> on mobile (the SPA renders one or the other by
 * viewport; we render both and toggle with a media query at the same
 * 1200px breakpoint style.css uses for the filters column layout).
 * ------------------------------------------------------------------ */
[data-miruro-status-buttons] {
	display: none;
}

[data-miruro-status-select] {
	display: block;
	width: 100%;
}

@media (min-width: 1200px) {
	[data-miruro-status-buttons] {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}

	[data-miruro-status-select] {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * "On list" state for the + / edit-list buttons.
 *
 * The original .isOnList already tints the SVG with
 * --list-button-accent; we add the equivalent for the custom card "+" button
 * and keep it permanently visible (it doubles as the "play / on list" badge).
 * ------------------------------------------------------------------ */
._cardAddButton_miruro.miruro-on-list {
	opacity: 1;
	color: #fff;
	background: var(--list-button-accent, var(--primary-accent, #6ca2ff));
}

._cardAddButton_miruro.miruro-on-list:hover {
	filter: brightness(1.1);
	background: var(--list-button-accent, var(--primary-accent, #6ca2ff));
}

/* Card / side-list edit buttons keep their accent border when on the list. */
.editListButton.miruro-on-list svg {
	color: var(--list-button-accent, var(--global-text));
}

.editListButton.miruro-on-list {
	border-color: var(--list-button-accent, var(--global-border-color));
}