/* BingeLib Global Styles — Retro Warm / Vintage-Modern */

:root {
    --primary: #cc6b49;
    --primary-dark: #b55a3a;
    --secondary: #73bda8;
    --success: #73bda8;
    --warning: #e2981a;
    --info: #73bda8;
    --error: #c44536;
    --dark-brown: #573f34;
    --golden-amber: #e2981a;

    /* BingeLib Design Tokens */
    --bl-primary: #cc6b49;
    --bl-primary-light: rgba(204, 107, 73, 0.12);
    --bl-secondary: #73bda8;
    --bl-amber: #e2981a;
    --bl-brown: #573f34;
    --bl-bg: #faf6f1;
    --bl-surface: #f0ebe4;
    --bl-text: #2c1e15;
    --bl-text-secondary: #7a6b60;
    --bl-error: #c44536;
    --bl-card-radius: 14px;
    --bl-radius-sm: 8px;
    --bl-radius-lg: 20px;
    --bl-card-border: 1px solid rgba(87, 63, 52, 0.06);
    --bl-card-shadow: 0 1px 4px rgba(87, 63, 52, 0.06), 0 4px 12px rgba(87, 63, 52, 0.04);
    --bl-card-shadow-hover: 0 8px 30px rgba(87, 63, 52, 0.14), 0 2px 8px rgba(87, 63, 52, 0.06);
    --bl-card-lift: translateY(-6px);
    --bl-transition-base: 0.2s ease;
    --bl-transition-slow: 0.35s ease;
    --bl-placeholder-gradient: linear-gradient(135deg, #573f34 0%, #8b5e3c 50%, #cc6b49 100%);
    --bl-banner-gradient: linear-gradient(135deg, #573f34 0%, #7a4f3a 40%, #cc6b49 100%);
    --bl-glass-bg: rgba(87, 63, 52, 0.75);
    --bl-overlay-bg: rgba(0, 0, 0, 0.5);
    --bl-input-radius: 10px;
    --bl-border-alpha: rgba(87, 63, 52, 0.06);
    --bl-border-alpha-med: rgba(87, 63, 52, 0.12);
    --bl-shadow-alpha-sm: rgba(87, 63, 52, 0.06);
    --bl-shadow-alpha-md: rgba(87, 63, 52, 0.10);
    --bl-shadow-alpha-lg: rgba(87, 63, 52, 0.14);
}

/* Dark mode token overrides */
.mud-theme-dark {
    --bl-primary-light: rgba(204, 107, 73, 0.18);
    --bl-card-border: 1px solid rgba(255, 255, 255, 0.06);
    --bl-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    --bl-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    --bl-glass-bg: rgba(0, 0, 0, 0.65);
    --bl-border-alpha: rgba(255, 255, 255, 0.06);
    --bl-border-alpha-med: rgba(255, 255, 255, 0.10);
    --bl-shadow-alpha-sm: rgba(0, 0, 0, 0.15);
    --bl-shadow-alpha-md: rgba(0, 0, 0, 0.25);
    --bl-shadow-alpha-lg: rgba(0, 0, 0, 0.35);
}

html, body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Loading Screen */
.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #faf6f1;
}

.loading-content {
    text-align: center;
}

.loading-content h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
}

.loading-content p {
    color: #7a6b60;
    margin-bottom: 1.5rem;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 3px solid #e0d6cc;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Error UI */
#blazor-error-ui {
    background: var(--error);
    color: white;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: none;
}

#blazor-error-ui.show {
    display: block;
}

#blazor-error-ui a {
    color: white;
    margin-left: 1rem;
}

/* Utility Classes */
.cursor-pointer {
    cursor: pointer;
}

.w-100 {
    width: 100%;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c4b5a5;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9a8b7f;
}

/* Focus Styles */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Link Styles */
a {
    color: var(--secondary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Selection */
::selection {
    background: var(--primary);
    color: white;
}

/* Warm elevation overrides */
.mud-elevation-1 { box-shadow: 0 1px 3px var(--bl-shadow-alpha-md), 0 1px 2px var(--bl-shadow-alpha-sm) !important; }
.mud-elevation-2 { box-shadow: 0 2px 8px var(--bl-shadow-alpha-md), 0 1px 4px var(--bl-shadow-alpha-sm) !important; }
.mud-elevation-3 { box-shadow: 0 4px 14px var(--bl-shadow-alpha-md), 0 2px 6px var(--bl-shadow-alpha-sm) !important; }
.mud-elevation-4 { box-shadow: 0 8px 24px var(--bl-shadow-alpha-md), 0 3px 8px var(--bl-shadow-alpha-sm) !important; }


/* ============================================================
   GLOBAL MUDBLAZOR OVERRIDES — the real visual upgrades
   ============================================================ */

/* Cards: softer, rounder */
.mud-card {
    border: var(--bl-card-border);
    border-radius: var(--bl-card-radius) !important;
    box-shadow: var(--bl-card-shadow) !important;
}

/* Inputs: rounded, taller, softer borders */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--bl-input-radius) !important;
    border-color: var(--bl-border-alpha-med) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--bl-primary) !important;
    border-color: color-mix(in srgb, var(--bl-primary) 40%, transparent) !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--bl-primary) !important;
    box-shadow: 0 0 0 3px var(--bl-primary-light) !important;
}

/* Selects: match the rounded input style */
.mud-select .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--bl-input-radius) !important;
}

/* Buttons: rounder, nicer transitions */
.mud-button-root {
    border-radius: var(--bl-input-radius) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transition: all 0.2s ease !important;
}

.mud-button-filled:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(204, 107, 73, 0.3) !important;
}

.mud-button-outlined {
    border-width: 1.5px !important;
}

/* Button groups: segmented control look */
.mud-button-group-root {
    border-radius: var(--bl-input-radius) !important;
    overflow: hidden;
    box-shadow: 0 1px 4px var(--bl-shadow-alpha-sm);
}

.mud-button-group-root .mud-button-root {
    border-radius: 0 !important;
    border-right-width: 0 !important;
    padding: 8px 20px !important;
    font-size: 0.875rem !important;
}

.mud-button-group-root .mud-button-root:first-child {
    border-radius: var(--bl-input-radius) 0 0 var(--bl-input-radius) !important;
}

.mud-button-group-root .mud-button-root:last-child {
    border-radius: 0 var(--bl-input-radius) var(--bl-input-radius) 0 !important;
    border-right-width: 1.5px !important;
}

.mud-button-group-root .mud-button-root:hover {
    background: var(--bl-primary-light) !important;
    color: var(--bl-primary) !important;
}

/* Tabs: pill-style indicator, clean look */
.mud-tabs {
    border-bottom: 1px solid var(--bl-border-alpha);
}

.mud-tab {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    min-width: auto !important;
    padding: 12px 20px !important;
}

.mud-tab:hover {
    opacity: 1;
    background: var(--bl-primary-light) !important;
    border-radius: var(--bl-radius-sm) var(--bl-radius-sm) 0 0;
}

.mud-tab.mud-tab-active {
    opacity: 1;
    color: var(--bl-primary) !important;
    font-weight: 600 !important;
}

.mud-tabs-toolbar .mud-tab-slider {
    background: var(--bl-primary) !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0;
}

/* Chips: rounder, softer */
.mud-chip {
    border-radius: 20px !important;
    font-weight: 500 !important;
}

/* Dialogs: rounder */
.mud-dialog {
    border-radius: var(--bl-radius-lg) !important;
}

/* Alerts: rounder */
.mud-alert {
    border-radius: var(--bl-card-radius) !important;
}

/* Paper: rounder by default */
.mud-paper {
    border-radius: var(--bl-card-radius) !important;
}

/* Snackbar: rounder */
.mud-snackbar {
    border-radius: var(--bl-card-radius) !important;
}

/* Select menu / popover: rounder, no horizontal overflow */
.mud-popover-paper {
    border-radius: var(--bl-card-radius) !important;
    box-shadow: 0 8px 30px var(--bl-shadow-alpha-lg) !important;
    border: 1px solid var(--bl-border-alpha) !important;
    overflow-x: hidden !important;
}

.mud-popover-paper .mud-list {
    overflow-x: hidden !important;
    padding: 4px !important;
}

.mud-list-item {
    border-radius: var(--bl-radius-sm) !important;
    margin: 2px 0 !important;
}

.mud-list-item:hover {
    background: var(--bl-primary-light) !important;
}

/* Avatars: subtle shadow */
.mud-avatar {
    box-shadow: 0 2px 8px var(--bl-shadow-alpha-md);
}

/* Skeleton: warmer colors */
.mud-skeleton {
    border-radius: var(--bl-radius-sm) !important;
}


/* ============================================================
   BL UTILITY CLASSES
   ============================================================ */

/* Card with hover lift */
.bl-card {
    border-radius: var(--bl-card-radius);
    border: var(--bl-card-border);
    box-shadow: var(--bl-card-shadow);
    transition: transform var(--bl-transition-base), box-shadow var(--bl-transition-base);
    overflow: hidden;
}

.bl-card:hover {
    transform: var(--bl-card-lift);
    box-shadow: var(--bl-card-shadow-hover);
}

/* Image zoom on card hover */
.bl-card:hover .mud-card-media {
    transform: scale(1.04);
}

.bl-card .mud-card-media {
    transition: transform var(--bl-transition-slow);
}

/* Placeholder gradient for missing images */
.bl-placeholder {
    background: var(--bl-placeholder-gradient);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Overlay action (delete, quick-add) */
.bl-overlay-action {
    position: absolute;
    top: 8px;
    right: 8px;
    opacity: 0;
    transition: opacity var(--bl-transition-base);
    background: var(--bl-glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--bl-radius-sm);
}

.bl-overlay-action:hover {
    opacity: 1;
}

/* Show overlay on parent hover */
*:hover > .bl-overlay-action {
    opacity: 1;
}

/* Touch devices: always visible */
@media (hover: none) {
    .bl-overlay-action {
        opacity: 1;
    }
}

/* Page containers */
.bl-page-container {
    max-width: 1400px;
    margin: 0 auto;
}

.bl-page-container--narrow {
    max-width: 1200px;
    margin: 0 auto;
}

.bl-page-container--feed {
    max-width: 700px;
    margin: 0 auto;
}

/* Filter bar — compact inline row */
.bl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.bl-filter-bar .mud-input-control {
    margin: 0 !important;
}

.bl-filter-bar .mud-select {
    min-width: 130px;
    max-width: 180px;
}

.bl-filter-bar .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--bl-input-radius) !important;
}

.bl-filter-bar .mud-button-filled {
    border-radius: 20px !important;
    padding: 4px 16px !important;
    font-size: 0.8rem !important;
}

.bl-filter-bar .mud-icon-button-root {
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
}


/* Empty state */
.bl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    background: var(--mud-palette-surface);
    border-radius: var(--bl-radius-lg);
    border: 1px dashed var(--bl-border-alpha-med);
}

/* Divider text ("or" separator) */
.bl-divider-text {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
    color: var(--bl-text-secondary);
    font-size: 0.875rem;
}

.bl-divider-text::before,
.bl-divider-text::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--bl-border-alpha-med);
}

/* Section title */
.bl-section-title {
    font-family: 'DM Serif Display', Georgia, serif;
}

/* Banner gradient (donation, etc.) */
.bl-banner {
    background: var(--bl-banner-gradient);
    border-radius: var(--bl-card-radius);
    box-shadow: 0 4px 20px var(--bl-shadow-alpha-lg);
}

/* Auth page background */
.auth-page-bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(204, 107, 73, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(115, 189, 168, 0.04) 0%, transparent 60%);
}

/* Status panel — the "My Status" sidebar on media detail */
.bl-status-panel {
    background: var(--mud-palette-surface);
    border-radius: var(--bl-card-radius);
    border: 1px solid var(--bl-border-alpha);
    overflow: hidden;
}

.bl-status-panel-header {
    background: var(--bl-placeholder-gradient);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bl-status-panel-header .mud-text {
    color: white !important;
}

.bl-status-panel-body {
    padding: 20px;
}

/* Segmented status buttons for "not in library" state */
.bl-status-buttons {
    display: flex;
    gap: 0;
    border-radius: var(--bl-card-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px var(--bl-shadow-alpha-sm);
    border: 1.5px solid var(--bl-primary);
}

.bl-status-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    border: none;
    background: transparent;
    color: var(--bl-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    border-right: 1px solid rgba(204, 107, 73, 0.2);
}

.bl-status-btn:last-child {
    border-right: none;
}

.bl-status-btn:hover {
    background: var(--bl-primary);
    color: white;
}

.bl-status-btn .mud-icon-root {
    font-size: 1.4rem;
}

/* Active status indicator */
.bl-status-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.bl-status-active.want {
    background: rgba(115, 189, 168, 0.12);
    color: #4a9e88;
}

.bl-status-active.started {
    background: rgba(226, 152, 26, 0.12);
    color: #c88412;
}

.bl-status-active.finished {
    background: rgba(115, 189, 168, 0.15);
    color: #2d8c6f;
}


/* ============================================================
   CANONICAL COMPONENT STYLES
   ============================================================ */

/* --- .collection-card --- */
.collection-card {
    height: 100%;
    transition: transform var(--bl-transition-base), box-shadow var(--bl-transition-base);
    overflow: hidden;
}

.collection-card:hover {
    transform: var(--bl-card-lift);
    box-shadow: var(--bl-card-shadow-hover);
}

.collection-cover {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: var(--mud-palette-background-grey);
}

.collection-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--bl-transition-slow);
}

.collection-card:hover .collection-image {
    transform: scale(1.05);
}

.collection-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bl-placeholder-gradient);
}

.item-count-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.privacy-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-title {
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.collection-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

/* --- .media-item-wrapper --- */
.media-item-wrapper {
    position: relative;
}

/* --- Rating stars --- */
.rating-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--bl-amber);
}

.rating-stars .star-half {
    background: linear-gradient(90deg, var(--bl-amber) 50%, transparent 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.rating-stars:not(.rating-stars--readonly) span {
    cursor: pointer;
    transition: transform 0.15s;
}

.rating-stars:not(.rating-stars--readonly) span:hover {
    transform: scale(1.35);
}

/* --- Media card title --- */
.media-card-title {
    font-family: 'DM Serif Display', Georgia, serif;
}

/* --- Feature icon wrapper (landing page) --- */
.feature-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bl-primary-light);
    margin-bottom: 16px;
    transition: transform 0.2s, background 0.2s;
}

.feature-card:hover .feature-icon-wrapper {
    transform: scale(1.1);
    background: rgba(204, 107, 73, 0.18);
}

/* --- Profile avatar ring --- */
.profile-avatar-ring {
    border: 3px solid var(--bl-primary);
    box-shadow: 0 4px 16px rgba(204, 107, 73, 0.25);
    border-radius: 50%;
}

/* --- Media detail cover --- */
.cover-container {
    border-radius: var(--bl-card-radius);
    overflow: hidden;
}

.cover-image {
    width: 100%;
    aspect-ratio: 2/3;
}

/* --- Collection detail item --- */
.media-type-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    line-height: 1.4;
    backdrop-filter: blur(4px);
}

/* --- Page headings — serif font (color handled by MudBlazor theme) --- */
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-family: 'DM Serif Display', Georgia, serif !important;
}

/* --- Library page specific --- */
.library-page .mud-tabs .mud-tab {
    font-size: 0.9rem;
}

/* --- Search page specific --- */
.search-page .mud-tabs .mud-tab {
    font-size: 0.9rem;
}

/* --- Your Review card on media detail --- */
.reviews-section .mud-paper {
    border-radius: var(--bl-card-radius) !important;
    border: 1px solid var(--bl-border-alpha) !important;
}

/* --- Donation banner enhancements --- */
.bl-banner .mud-button-filled {
    border-radius: 20px !important;
    font-weight: 700 !important;
    padding: 6px 20px !important;
}