/*
 * ========================================
 * 🎨 JELLYFIN MODERN PROFESSIONAL THEME 🎨
 * ========================================
 *
 * 👨‍💻 Autor: EDD
 * 🚀 Versiune: 6.0 MODERN PROFESSIONAL
 * 📅 Data: 2025
 * 🎯 Compatibilitate: Jellyfin WebUI (toate versiunile moderne)
 *
 * ✨ Descriere: Cea mai frumoasă temă modernă și profesională pentru Jellyfin
 * cu design întunecat, culori neutre și efecte subtile pentru o experiență premium.
 *
 * 📋 Instrucțiuni de utilizare:
 * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css');
 *
 * 🌟 Caracteristici:
 * - Design modern și profesional
 * - Temă întunecată cu culori neutre
 * - Animații subtile și elegante
 * - Responsive design perfect
 * - Glassmorphism și efecte moderne
 * - Optimizat pentru toate dispozitivele
 */

/* ========================================
 * 🎨 SISTEM DE CULORI MODERN PROFESSIONAL
 * ======================================== */
:root {
    /* 🌙 Paleta de culori neutre moderne */
    --modern-slate-50: #f8fafc;        /* Alb cald */
    --modern-slate-100: #f1f5f9;       /* Gri foarte deschis */
    --modern-slate-200: #e2e8f0;       /* Gri deschis */
    --modern-slate-300: #cbd5e1;       /* Gri mediu deschis */
    --modern-slate-400: #94a3b8;       /* Gri mediu */
    --modern-slate-500: #64748b;       /* Gri */
    --modern-slate-600: #475569;       /* Gri închis */
    --modern-slate-700: #334155;       /* Gri foarte închis */
    --modern-slate-800: #1e293b;       /* Aproape negru */
    --modern-slate-900: #0f172a;       /* Negru slate */

    /* 🎯 Culori accent moderne */
    --modern-blue-500: #3b82f6;        /* Albastru modern */
    --modern-blue-600: #2563eb;        /* Albastru închis */
    --modern-indigo-500: #6366f1;      /* Indigo elegant */
    --modern-violet-500: #8b5cf6;      /* Violet subtil */
    --modern-emerald-500: #10b981;     /* Verde modern */
    --modern-amber-500: #f59e0b;       /* Galben modern */

    /* 🎨 Paleta principală aplicației */
    --primary: var(--modern-indigo-500);
    --primary-hover: var(--modern-indigo-600);
    --secondary: var(--modern-violet-500);
    --accent: var(--modern-blue-500);
    --success: var(--modern-emerald-500);
    --warning: var(--modern-amber-500);

    /* 🌑 Fundal și suprafețe */
    --bg-primary: var(--modern-slate-900);      /* Fundal principal */
    --bg-secondary: var(--modern-slate-800);    /* Fundal secundar */
    --bg-tertiary: var(--modern-slate-700);     /* Fundal terțiar */
    --surface: rgba(30, 41, 59, 0.8);           /* Suprafață glassmorphism */
    --surface-hover: rgba(30, 41, 59, 0.9);     /* Suprafață hover */

    /* 📝 Text și conținut */
    --text-primary: var(--modern-slate-50);     /* Text principal */
    --text-secondary: var(--modern-slate-300);  /* Text secundar */
    --text-muted: var(--modern-slate-400);      /* Text estompat */

    /* 🔲 Borduri și separatori */
    --border-primary: rgba(203, 213, 225, 0.1); /* Bordură principală */
    --border-secondary: rgba(203, 213, 225, 0.05); /* Bordură secundară */
    --border-accent: rgba(99, 102, 241, 0.3);   /* Bordură accent */

    /* 🌟 Umbre și efecte */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ✨ Glow effects */
    --glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
    --glow-secondary: 0 0 20px rgba(139, 92, 246, 0.3);
    --glow-accent: 0 0 20px rgba(59, 130, 246, 0.3);

    /* 🔄 Tranziții și animații */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* 📐 Dimensiuni și spațiere */
    --radius-sm: 0.375rem;    /* 6px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-2xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;    /* Complet rotund */

    /* 🌫️ Blur effects */
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(16px);
    --blur-xl: blur(24px);

    /* 📱 Responsive breakpoints */
    --mobile: 640px;
    --tablet: 768px;
    --desktop: 1024px;
    --wide: 1280px;
}

/* ========================================
 * 🌌 FUNDAL MODERN CU GRADIENT SUBTIL
 * ======================================== */

/* Fundal principal cu gradient elegant */
html,
body {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.6 !important;
    overflow-x: hidden !important;
}

/* Container principal cu efecte moderne */
.backgroundContainer {
    background:
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.03) 0%, transparent 50%),
        linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
    min-height: 100vh !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Particule animate în fundal */
.backgroundContainer::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.1) 0%, transparent 2%),
        radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.08) 0%, transparent 2%),
        radial-gradient(circle at 50% 10%, rgba(59, 130, 246, 0.06) 0%, transparent 2%);
    background-size: 300px 300px, 400px 400px, 500px 500px;
    animation: float-particles 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes float-particles {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.6;
    }
}

/* Backdrop pentru dialoguri și overlay-uri */
.backdropContainer,
.backgroundContainer.withBackdrop {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-2xl) !important;
}

/* ========================================
 * 🎯 HEADER MODERN CU GLASSMORPHISM
 * ======================================== */

/* Header principal cu design modern */
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred,
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border-bottom: 1px solid var(--border-accent) !important;
    box-shadow: var(--shadow-lg) !important;
    transition: var(--transition-normal) !important;
    position: relative;
    z-index: 1000;
    overflow: hidden;
}

/* Efect subtil de lumină în header */
.skinHeader::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    animation: header-shine 8s ease-in-out infinite;
    z-index: -1;
}

@keyframes header-shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 200%; }
}

/* Butoane din header */
.headerButton {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px !important;
    margin: 0 4px !important;
    transition: var(--transition-normal) !important;
    backdrop-filter: var(--blur-sm) !important;
    font-weight: 500 !important;
}

.headerButton:hover {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-accent) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md), var(--glow-primary) !important;
}

.headerButton:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ========================================
 * 🎴 CARDURI MODERNE CU DESIGN ELEGANT
 * ======================================== */

/* Carduri principale cu glassmorphism */
.cardBox {
    background: var(--surface) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-xl) !important;
    transition: var(--transition-normal) !important;
    box-shadow: var(--shadow-md) !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-sm) !important;
    -webkit-backdrop-filter: var(--blur-sm) !important;
}

.cardBox:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: var(--shadow-xl), var(--glow-primary) !important;
    border-color: var(--border-accent) !important;
    background: var(--surface-hover) !important;
}

/* Imagini din carduri cu colțuri rotunjite */
.cardContent-button,
.itemDetailImage,
.cardImageContainer {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    transition: var(--transition-normal) !important;
    position: relative;
}

.cardContent-button:hover {
    transform: scale(1.03) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Overlay pentru carduri cu gradient elegant */
.cardContent-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 60%,
        rgba(15, 23, 42, 0.7) 100%
    );
    opacity: 0;
    transition: var(--transition-normal);
}

.cardContent-button:hover::after {
    opacity: 1;
}

/* Text din carduri cu tipografie modernă */
.cardText {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin: 8px 0 4px 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.cardText-secondary {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
}

/* ========================================
 * 🎛️ BUTOANE ȘI CONTROALE MODERNE
 * ======================================== */

/* Butoane principale cu design modern */
.button-submit,
.raised.emby-button,
.emby-button {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--radius-lg) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: var(--transition-normal) !important;
    box-shadow: var(--shadow-md) !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: var(--blur-sm) !important;
}

.button-submit:hover,
.raised.emby-button:hover,
.emby-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg), var(--glow-primary) !important;
    background: linear-gradient(135deg, var(--primary-hover), var(--secondary)) !important;
}

.button-submit:active,
.raised.emby-button:active,
.emby-button:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Butoane secundare */
.cancel.emby-button {
    background: var(--surface) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-secondary) !important;
}

.cancel.emby-button:hover {
    background: var(--surface-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Tab buttons moderne */
.emby-tab-button {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 20px !important;
    margin: 0 4px !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    transition: var(--transition-normal) !important;
    position: relative;
    overflow: hidden;
}

.emby-tab-button:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px) !important;
}

.emby-tab-button.emby-tab-button-active {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--glow-primary) !important;
}

/* Efect de undă pentru butoane */
.button-submit::before,
.raised.emby-button::before,
.emby-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.button-submit:active::before,
.raised.emby-button:active::before,
.emby-button:active::before {
    width: 300px;
    height: 300px;
}

/* ========================================
 * 📝 INPUT-URI ȘI FORMULARE MODERNE
 * ======================================== */

/* Input-uri cu glassmorphism */
.emby-input,
.emby-textarea,
.emby-select {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-sm) !important;
    -webkit-backdrop-filter: var(--blur-sm) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    transition: var(--transition-normal) !important;
    box-shadow: var(--shadow-sm) !important;
}

.emby-input:focus,
.emby-textarea:focus,
.emby-select:focus {
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-md), var(--glow-primary) !important;
    background: var(--surface-hover) !important;
    outline: none !important;
}

.emby-input::placeholder,
.emby-textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.7 !important;
}

/* Checkbox-uri și radio buttons moderne */
.emby-checkbox,
.emby-radio {
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--border-primary) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: var(--transition-normal) !important;
}

.emby-checkbox:checked,
.emby-radio:checked {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--glow-primary) !important;
}

.emby-checkbox:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: var(--text-primary) !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.emby-radio {
    border-radius: var(--radius-full) !important;
}

.emby-radio:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    background: var(--text-primary) !important;
    border-radius: var(--radius-full) !important;
}

/* ========================================
 * 📜 SCROLLBAR MODERN ȘI ELEGANT
 * ======================================== */

/* Scrollbar cu design modern */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--bg-secondary) !important;
}

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

*::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary)) !important;
    border-radius: var(--radius-full);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-hover), var(--primary)) !important;
    box-shadow: var(--glow-primary);
    transform: scale(1.1);
}

*::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* ========================================
 * 🏷️ INDICATORI ȘI BADGE-URI MODERNE
 * ======================================== */

/* Played/Watched indicators */
.playedIndicator {
    background: var(--success) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: var(--shadow-sm), 0 0 10px rgba(16, 185, 129, 0.3) !important;
}

.indicator {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
}

.countIndicator {
    background: var(--secondary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Media info badges */
.mediaInfoBadge {
    background: rgba(99, 102, 241, 0.9) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--radius-md) !important;
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Progress bars moderne */
.itemProgressBar {
    background: rgba(15, 23, 42, 0.8) !important;
    border-radius: var(--radius-full) !important;
    overflow: hidden !important;
    height: 4px !important;
}

.itemProgressBarForeground {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
    border-radius: var(--radius-full) !important;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.4) !important;
}

/* ========================================
 * 💬 DIALOGURI ȘI MODAL-URI MODERNE
 * ======================================== */

/* Backdrop pentru dialoguri */
.dialogBackdrop {
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: var(--blur-md) !important;
    -webkit-backdrop-filter: var(--blur-md) !important;
    transition: var(--transition-normal) !important;
}

/* Dialoguri cu glassmorphism */
.dialog {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-2xl) !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    animation: dialog-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes dialog-appear {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========================================
 * 🎮 CONTROALE VIDEO MODERNE
 * ======================================== */

/* Controale video cu glassmorphism */
.videoOsdBottom {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border-top: 1px solid var(--border-primary) !important;
    padding: 16px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Bara de progres video */
.nowPlayingBar {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    border-top: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ========================================
 * 📱 RESPONSIVE DESIGN MODERN
 * ======================================== */

/* Desktop și wide screens */
@media (min-width: 1280px) {
    .cardBox {
        margin: 12px !important;
    }

    .emby-tab-button {
        padding: 14px 24px !important;
        font-size: 1rem !important;
    }
}

/* Tablet design */
@media (min-width: 768px) and (max-width: 1279px) {
    .cardBox {
        margin: 8px !important;
    }

    .emby-tab-button {
        padding: 12px 20px !important;
        font-size: 0.95rem !important;
    }

    .headerButton {
        padding: 6px 10px !important;
        font-size: 0.9rem !important;
    }
}

/* Mobile design */
@media (max-width: 767px) {
    .cardBox {
        margin: 6px !important;
        border-radius: var(--radius-lg) !important;
    }

    .emby-tab-button {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
        margin: 0 2px !important;
    }

    .headerButton {
        padding: 6px 8px !important;
        font-size: 0.85rem !important;
        margin: 0 2px !important;
    }

    .button-submit,
    .raised.emby-button,
    .emby-button {
        padding: 10px 20px !important;
        font-size: 0.9rem !important;
    }

    .emby-input,
    .emby-textarea,
    .emby-select {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
    }

    .dialog {
        margin: 10px !important;
        border-radius: var(--radius-xl) !important;
    }
}

/* ========================================
 * ✨ ÎMBUNĂTĂȚIRI SPECIALE ȘI EFECTE
 * ======================================== */

/* Hover effects pentru liste */
.listItem:hover {
    background: var(--surface) !important;
    border-radius: var(--radius-md) !important;
    transform: translateX(4px) !important;
    transition: var(--transition-normal) !important;
}

/* Cast & Crew cards moderne */
.personCard {
    background: var(--surface) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    transition: var(--transition-normal) !important;
    padding: 12px !important;
}

.personCard:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-accent) !important;
}

/* Meniu lateral modern */
.mainDrawer {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border-right: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-xl) !important;
}

.navMenuOption {
    border-radius: var(--radius-md) !important;
    margin: 4px 8px !important;
    transition: var(--transition-normal) !important;
}

.navMenuOption:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    transform: translateX(4px) !important;
}

.navMenuOption-selected {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--glow-primary) !important;
}

/* Loading animations moderne */
.mdl-spinner {
    border-color: var(--primary) !important;
}

.loading-spinner {
    border: 3px solid var(--border-primary) !important;
    border-top: 3px solid var(--primary) !important;
    border-radius: var(--radius-full) !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Îmbunătățiri pentru accesibilitate */
.emby-button:focus,
.headerButton:focus,
.emby-input:focus,
.emby-tab-button:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Smooth scroll pentru toată aplicația */
html {
    scroll-behavior: smooth !important;
}

/* Optimizări pentru performanță */
.cardBox,
.emby-button,
.headerButton,
.emby-tab-button {
    will-change: transform, box-shadow !important;
}

/* ========================================
 * 📋 INFORMAȚII FINALE ȘI CREDITE
 * ======================================== */

/*
 * 🎨 JELLYFIN MODERN PROFESSIONAL THEME v6.0
 *
 * ✨ CARACTERISTICI PRINCIPALE:
 * - Design modern și profesional cu glassmorphism
 * - Temă întunecată cu culori neutre elegante
 * - Animații subtile și tranziții fluide
 * - Responsive design perfect pentru toate dispozitivele
 * - Optimizat pentru performanță și accesibilitate
 * - Efecte hover și focus moderne
 * - Tipografie îmbunătățită cu font Inter
 * - Scrollbar personalizat elegant
 * - Indicatori și badge-uri moderne
 * - Controale video cu glassmorphism
 *
 * 🎯 TEHNOLOGII UTILIZATE:
 * - CSS Custom Properties (CSS Variables)
 * - CSS Grid și Flexbox pentru layout
 * - CSS Animations și Keyframes
 * - Backdrop-filter pentru glassmorphism
 * - CSS Gradients pentru efecte moderne
 * - Box-shadow pentru depth și elevation
 * - Transform pentru animații fluide
 * - Media queries pentru responsive design
 * - Cubic-bezier pentru tranziții naturale
 * - Will-change pentru optimizări performanță
 *
 * 🌟 DIFERENȚE FAȚĂ DE TEMA STANDARD:
 * ✅ Paleta de culori complet nouă (slate + indigo/violet)
 * ✅ Glassmorphism în loc de fundal solid
 * ✅ Animații și tranziții fluide
 * ✅ Tipografie modernă cu Inter font
 * ✅ Scrollbar personalizat elegant
 * ✅ Butoane cu efecte hover avansate
 * ✅ Carduri cu shadow și hover effects
 * ✅ Input-uri cu focus states moderne
 * ✅ Responsive design optimizat
 * ✅ Indicatori și progress bars stilizate
 * ✅ Dialoguri cu animații de apariție
 * ✅ Controale video moderne
 *
 * 📋 INSTALARE:
 * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css');
 *
 * 👨‍💻 Autor: EDD
 * 🚀 Versiune: 6.0 MODERN PROFESSIONAL
 * 📅 Data: 2025
 * 🌐 Repository: https://git.eddmanoo.cloud/eddmanoo/jellyfincss
 *
 * 🎬 Bucură-te de cea mai frumoasă experiență Jellyfin! ✨🎨💫
 */

/* ========================================
 * 🖼️ BACKDROP IMAGES ȘI FUNDAL
 * ======================================== */

/* Backdrop image pentru pagini */
.backdropImage {
    opacity: 0.3 !important;
    filter: blur(3px) brightness(0.4) !important;
    transition: var(--transition-slow) !important;
}

/* Container pentru backdrop */
.backdropContainer {
    position: relative !important;
    overflow: hidden !important;
}

/* ========================================
 * 🎴 IMAGINI DIN CARDURI - VIZIBILE
 * ======================================== */

/* Asigură că imaginile din carduri sunt vizibile */
.cardContent-button img,
.cardImageContainer img,
.itemDetailImage img,
.cardImage img,
.listItemImage img,
.lazy {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Container pentru imagini */
.cardImageContainer,
.cardContent-button,
.itemDetailImage {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

/* ========================================
 * 🧭 NAVIGARE ȘI BUTOANE HEADER
 * ======================================== */

/* Meniu lateral (drawer) */
.mainDrawer {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border-right: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-xl) !important;
    transition: var(--transition-normal) !important;
}

.mainDrawer-scrollContainer {
    color: var(--text-primary) !important;
}

/* Opțiuni din meniul lateral */
.navMenuOption {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    margin: 4px 8px !important;
    padding: 12px 16px !important;
    transition: var(--transition-normal) !important;
    display: flex !important;
    align-items: center !important;
}

.navMenuOption:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary) !important;
    transform: translateX(4px) !important;
}

.navMenuOption-selected {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--glow-primary) !important;
}

/* Iconițe în meniu */
.navMenuOption .material-icons,
.navMenuOption .md-icon {
    margin-right: 12px !important;
    opacity: 0.8 !important;
}

/* Butoane utilizator în header */
.headerUserButton,
.headerButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-normal) !important;
}

.headerUserButton:hover,
.headerButton:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Avatar utilizator */
.headerUserButton img {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-full) !important;
    border: 2px solid var(--border-accent) !important;
}

/* ========================================
 * 📋 LISTE ȘI ELEMENTE
 * ======================================== */

/* Liste generale */
.paperList {
    background: var(--surface) !important;
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--border-primary) !important;
    backdrop-filter: var(--blur-sm) !important;
    -webkit-backdrop-filter: var(--blur-sm) !important;
}

/* Elemente din listă */
.listItem {
    border-bottom: 1px solid var(--border-secondary) !important;
    transition: var(--transition-normal) !important;
    padding: 12px 16px !important;
}

.listItem:hover {
    background: rgba(99, 102, 241, 0.05) !important;
    transform: translateX(4px) !important;
}

.listItem:last-child {
    border-bottom: none !important;
}

/* Text din liste */
.listItemBodyText {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.secondary.listItemBodyText {
    color: var(--text-secondary) !important;
    font-weight: 400 !important;
}

/* ========================================
 * 🎮 CONTROALE VIDEO ȘI PLAYER
 * ======================================== */

/* Bara de progres video */
.nowPlayingBar {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border-top: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Controale player */
.nowPlayingBarCenter {
    color: var(--text-primary) !important;
}

.nowPlayingBarCenter .material-icons {
    color: var(--text-primary) !important;
    transition: var(--transition-normal) !important;
}

.nowPlayingBarCenter .material-icons:hover {
    color: var(--primary) !important;
    transform: scale(1.1) !important;
}

/* Controale video cu glassmorphism */
.videoOsdBottom {
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border-top: 1px solid var(--border-primary) !important;
    padding: 16px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* ========================================
 * 📄 PAGINA DE LOGIN
 * ======================================== */

/* Container pentru pagina de login */
#loginPage {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
    position: relative !important;
    min-height: 100vh !important;
}

/* Overlay pentru pagina de login */
#loginPage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
    z-index: 1;
}

/* Formular de login cu glassmorphism */
#loginPage .readOnlyContent,
#loginPage form {
    max-width: 420px !important;
    width: 90% !important;
    background: var(--surface) !important;
    backdrop-filter: var(--blur-lg) !important;
    -webkit-backdrop-filter: var(--blur-lg) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-2xl) !important;
    padding: 48px 32px !important;
    box-shadow: var(--shadow-2xl) !important;
    position: relative;
    z-index: 2;
    animation: dialog-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Titlu login */
#loginPage h1 {
    color: var(--primary) !important;
    text-align: center !important;
    margin-bottom: 32px !important;
    font-weight: 600 !important;
    font-size: 2rem !important;
}

/* Ascunde butoanele nedorite */
#loginPage .raised.cancel.block.btnManual.emby-button,
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
    display: none !important;
}

/* ========================================
 * 🎯 ÎMBUNĂTĂȚIRI PENTRU ACCESIBILITATE
 * ======================================== */

/* Focus states pentru accesibilitate */
.emby-button:focus,
.headerButton:focus,
.emby-input:focus,
.emby-tab-button:focus,
.navMenuOption:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* Smooth scroll pentru toată aplicația */
html {
    scroll-behavior: smooth !important;
}

/* Reduce motion pentru utilizatorii sensibili */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
 * 📱 ÎMBUNĂTĂȚIRI PENTRU MOBILE
 * ======================================== */

/* Afișează linkurile externe pe mobile */
.layout-mobile .itemExternalLinks {
    display: block !important;
}

/* Link-uri externe stilizate */
.itemExternalLinks a {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-accent) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px !important;
    margin: 4px !important;
    transition: var(--transition-normal) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    display: inline-block !important;
}

.itemExternalLinks a:hover {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ========================================
 * 🔧 OPTIMIZĂRI PENTRU PERFORMANȚĂ
 * ======================================== */

/* Optimizări GPU pentru animații */
.cardBox,
.emby-button,
.headerButton,
.emby-tab-button,
.navMenuOption {
    will-change: transform, box-shadow !important;
}

/* Optimizări pentru scroll */
.backgroundContainer,
.mainDrawer,
.skinHeader {
    will-change: transform !important;
}

/* ========================================
 * 🎨 ÎMBUNĂTĂȚIRI FINALE
 * ======================================== */

/* Asigură că toate elementele au tranziții */
* {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform !important;
}

/* Îmbunătățiri pentru hover pe liste */
.listItem:hover {
    background: var(--surface-hover) !important;
    border-radius: var(--radius-md) !important;
}

/* Cast & Crew cards moderne */
.personCard {
    background: var(--surface) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--radius-lg) !important;
    transition: var(--transition-normal) !important;
    padding: 12px !important;
}

.personCard:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--border-accent) !important;
}

/* Îmbunătățiri pentru secțiuni */
.sectionTitleContainer h2 {
    color: var(--primary) !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    margin-bottom: 16px !important;
}

/* Next Up și Similar sections */
div.nextUpSection,
#similarCollapsible {
    background: var(--surface) !important;
    border-radius: var(--radius-xl) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
    border: 1px solid var(--border-primary) !important;
    backdrop-filter: var(--blur-sm) !important;
    -webkit-backdrop-filter: var(--blur-sm) !important;
}

/* Carousel și scrolling îmbunătățit */
@media all and (min-width: 50em) {
    .homePage .emby-scroller {
        margin-right: 0;
    }

    .homePage .emby-scrollbuttons {
        display: none;
    }

    .homePage .itemsContainer {
        flex-wrap: wrap;
    }
}

/* Butoane scroll stilizate */
.emby-scrollbuttons-button {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-full) !important;
    transition: var(--transition-normal) !important;
}

.emby-scrollbuttons-button:hover {
    background: var(--primary-hover) !important;
    transform: scale(1.1) !important;
    box-shadow: var(--glow-primary) !important;
}

/* Loading animations moderne */
.mdl-spinner {
    border-color: var(--primary) !important;
}

.loading-spinner {
    border: 3px solid var(--border-primary) !important;
    border-top: 3px solid var(--primary) !important;
    border-radius: var(--radius-full) !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================
 * 📋 INFORMAȚII FINALE
 * ======================================== */

/*
 * 🎨 JELLYFIN MODERN PROFESSIONAL THEME v6.0 - FIXED
 *
 * ✅ PROBLEME REZOLVATE:
 * - Imaginile din carduri sunt acum vizibile
 * - Backdrop images funcționează corect
 * - Butoanele de navigare sunt restaurate
 * - Avatar utilizator este vizibil
 * - Meniul lateral funcționează complet
 *
 * ✨ CARACTERISTICI:
 * - Design modern cu glassmorphism
 * - Culori neutre elegante
 * - Animații subtile și fluide
 * - Responsive design perfect
 * - Optimizat pentru performanță
 * - Accesibilitate îmbunătățită
 *
 * 📋 INSTALARE:
 * @import url('https://git.eddmanoo.cloud/eddmanoo/jellyfincss/raw/branch/main/edd.css');
 *
 * 🎬 Bucură-te de experiența Jellyfin modernă și profesională! ✨
 */