/*
 * ========================================
 * CSS PERSONALIZAT PENTRU JELLYFIN SERVER
 * ========================================
 *
 * Autor: EDD
 * Versiune: 1.0
 * Compatibilitate: Jellyfin WebUI (toate versiunile moderne)
 *
 * Descriere: Acest fișier CSS oferă o temă personalizată pentru interfața web
 * Jellyfin, cu îmbunătățiri vizuale și funcționale pentru o experiență mai bună.
 *
 * Instrucțiuni de utilizare:
 * 1. Copiază conținutul acestui fișier
 * 2. Mergi în Dashboard > General > Custom CSS
 * 3. Lipește codul în câmpul "Custom CSS"
 * 4. Salvează setările
 *
 * Notă: Modificările se aplică imediat, fără a fi nevoie să restartezi serverul.
 */

/* ========================================
 * VARIABILE CSS GLOBALE
 * ======================================== */
:root {
    /* Paleta de culori modernă și profesională */
    --primary-color: #6366f1;          /* Indigo modern */
    --primary-light: #818cf8;          /* Indigo deschis */
    --primary-dark: #4f46e5;           /* Indigo închis */
    --secondary-color: #1f2937;        /* Gri închis modern */
    --accent-color: #f59e0b;           /* Amber accent */
    --accent-secondary: #10b981;       /* Emerald accent */

    /* Fundaluri cu gradient modern */
    --background-dark: #0f172a;        /* Slate foarte închis */
    --background-medium: #1e293b;      /* Slate mediu */
    --background-light: #334155;       /* Slate deschis */
    --background-card: #1e293b;        /* Fundal carduri */
    --background-overlay: rgba(15, 23, 42, 0.95); /* Overlay cu transparență */

    /* Text cu contrast îmbunătățit */
    --text-primary: #f8fafc;           /* Alb cald */
    --text-secondary: #cbd5e1;         /* Gri deschis */
    --text-muted: #94a3b8;             /* Gri mediu */
    --border-color: #475569;           /* Borduri subtile */

    /* Culori de stare moderne */
    --success-color: #10b981;          /* Emerald */
    --warning-color: #f59e0b;          /* Amber */
    --error-color: #ef4444;            /* Red modern */
    --info-color: #3b82f6;             /* Blue modern */

    /* Dimensiuni și spațiere moderne */
    --border-radius: 12px;
    --border-radius-small: 6px;
    --border-radius-large: 16px;
    --border-radius-xl: 24px;

    /* Umbre moderne cu blur */
    --shadow-light: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-medium: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-heavy: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04);

    /* Efecte de blur moderne */
    --blur-light: blur(8px);
    --blur-medium: blur(12px);
    --blur-heavy: blur(16px);
    --blur-xl: blur(24px);

    /* Tranziții fluide */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Gradienturi moderne */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%);
    --gradient-background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%);
}

/* ========================================
 * STILURI GENERALE - FOLOSEȘTE FUNDALUL NATIV JELLYFIN
 * ======================================== */

/* Elimină fundalurile personalizate - lasă Jellyfin să gestioneze */
.backgroundContainer,
.dialog,
html {
    background: unset !important;
    color: var(--text-primary);
}

/* Elimină overlay-urile personalizate */
.backgroundContainer.withBackdrop,
.backdropContainer,
.backgroundContainer {
    background: unset !important;
    position: relative;
}

/* ELIMINĂ COMPLET BLUR-UL DE PE TOATE IMAGINILE DE CONȚINUT */
.cardImageContainer img,
.itemDetailImage img,
.listItemImage img,
.cardContent-button img,
.cardImage,
.listItemImage,
.itemDetailImage,
.cardContent img,
.listItem img,
.lazy,
img,
.cardScalable img,
.cardOverlayContainer img,
.listItemImageButton img,
.userImage,
.headerUserImage,
.headerUserButton img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    border-radius: var(--border-radius) !important;
    transition: transform var(--transition-medium) !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Îmbunătățiri pentru scrolling */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--background-medium);
}

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

*::-webkit-scrollbar-track {
    background: var(--background-medium);
    border-radius: var(--border-radius-small);
}

*::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--border-radius-small);
    transition: background var(--transition-fast);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* ========================================
 * HEADER ȘI NAVIGARE
 * ======================================== */

/* Header principal - design modern fără blur de fundal */
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
    background: rgba(30, 41, 59, 0.95) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-heavy);
    transition: all var(--transition-medium);
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
}

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
    background: rgba(30, 41, 59, 0.95) !important;
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
}

/* Butoane din header cu design modern - FĂRĂ BLUR */
.headerButton {
    color: var(--text-primary) !important;
    transition: all var(--transition-fast);
    border-radius: var(--border-radius);
    margin: 0 6px;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.headerButton:hover {
    background: var(--gradient-primary) !important;
    color: white !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-medium);
    border-color: var(--primary-light);
}

/* Meniu lateral (drawer) fără blur */
.mainDrawer {
    background: rgba(30, 41, 59, 0.95) !important;
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
}

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

/* Opțiuni din meniul lateral */
.navMenuOption {
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-small);
    margin: 2px 8px;
}

.navMenuOption:hover {
    background-color: var(--background-light) !important;
    color: var(--text-primary) !important;
    transform: translateX(4px);
}

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

/* ========================================
 * TABURI ȘI BUTOANE
 * ======================================== */

/* Taburi principale - design îmbunătățit */
.headerTabs.sectionTabs {
    text-size-adjust: 110%;
    font-size: 110%;
    border-bottom: 1px solid var(--border-color);
}

.emby-tab-button {
    padding: 1.75em 1.7em;
    color: var(--text-secondary) !important;
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
    margin: 0 2px;
    position: relative;
}

.emby-tab-button:hover {
    color: var(--text-primary) !important;
    background-color: var(--background-light);
    transform: translateY(-2px);
}

.emby-tab-button.emby-tab-button-active {
    color: var(--primary-color) !important;
    background-color: var(--background-medium);
    border-bottom: 3px solid var(--primary-color);
}

/* Butoane generale cu design modern */
.button-submit,
.raised.emby-button {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--border-radius-large) !important;
    padding: 14px 28px !important;
    font-weight: 600 !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-medium) !important;
    text-transform: none;
    letter-spacing: 0.3px;
    font-size: 0.95rem !important;
    position: relative;
    overflow: hidden;
}

.button-submit::before,
.raised.emby-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left var(--transition-medium);
}

.button-submit:hover::before,
.raised.emby-button:hover::before {
    left: 100%;
}

.button-submit:hover,
.raised.emby-button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: var(--shadow-heavy) !important;
    background: var(--gradient-accent) !important;
}

/* ========================================
 * CARDURI ȘI ELEMENTE MEDIA
 * ======================================== */

/* Carduri pentru filme, seriale, etc. cu design modern - FĂRĂ BLUR */
.cardBox {
    background: var(--background-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius-large) !important;
    transition: all var(--transition-medium) !important;
    box-shadow: var(--shadow-medium) !important;
    position: relative;
    overflow: hidden;
}

.cardBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    pointer-events: none;
    z-index: 1;
}

.cardBox:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow: var(--shadow-xl) !important;
    border-color: var(--primary-light) !important;
    background: var(--background-light) !important;
}

/* Imagini din carduri - design îmbunătățit */
.cardContent-button,
.itemDetailImage,
.cardImageContainer {
    border-radius: var(--border-radius-large) !important;
    overflow: hidden !important;
    transition: all var(--transition-medium) !important;
    position: relative;
    z-index: 2;
}

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

/* Asigură vizibilitatea COMPLETĂ a imaginilor - FĂRĂ BLUR */
.cardImageContainer img,
.cardContent-button img,
.itemDetailImage img,
.cardImage,
.listItemImage img,
.lazy img {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
    transition: transform var(--transition-medium) !important;
}

.cardImageContainer:hover img,
.cardContent-button:hover img,
.listItemImage:hover img {
    filter: none !important;
    transform: scale(1.02) !important;
    opacity: 1 !important;
}

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

.cardText-secondary {
    color: var(--text-secondary) !important;
}

/* ========================================
 * INDICATORI ȘI BADGE-URI
 * ======================================== */

/* Indicator pentru conținut vizionat */
.playedIndicator {
    background: var(--success-color) !important;
    border-radius: 50% !important;
    box-shadow: var(--shadow-light) !important;
}

/* Indicatori transparenți și eleganți */
.indicator {
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    border-radius: var(--border-radius-small) !important;
    backdrop-filter: blur(5px) !important;
}

/* Indicatori pentru numărul de episoade */
.countIndicator {
    background: var(--primary-color) !important;
    color: white !important;
    border-radius: var(--border-radius-large) !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-light) !important;
}

/* Rating cu stele */
.starRatingContainer {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ========================================
 * FORMULARE ȘI INPUTURI
 * ======================================== */

/* Câmpuri de input */
.emby-input,
.emby-textarea,
.emby-select {
    background-color: var(--background-light) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    transition: all var(--transition-fast) !important;
}

.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.2) !important;
    background-color: var(--background-medium) !important;
}

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

/* ========================================
 * LISTE ȘI TABELE
 * ======================================== */

/* Liste generale */
.paperList {
    background: var(--background-medium) !important;
    border-radius: var(--border-radius) !important;
    border: 1px solid var(--border-color) !important;
}

/* Elemente din listă */
.listItem {
    border-bottom: 1px solid var(--border-color) !important;
    transition: all var(--transition-fast) !important;
}

.listItem:hover {
    background-color: var(--background-light) !important;
    transform: translateX(4px);
}

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

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

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

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

/* Container pentru pagina de login - folosește fundalul nativ */
#loginPage {
    background: unset !important;
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Formular de login - design simplu fără blur */
#loginPage .readOnlyContent,
#loginPage form {
    max-width: 420px !important;
    background: rgba(30, 41, 59, 0.95) !important;
    border-radius: var(--border-radius-xl) !important;
    padding: 48px !important;
    box-shadow: var(--shadow-xl) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative;
    z-index: 1;
    margin: 20px;
}

/* Titlu login */
#loginPage h1 {
    color: var(--primary-color) !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    font-weight: 300 !important;
    font-size: 2.5em !important;
}

/* Spațiere pentru formular */
#loginPage .padded-left.padded-right.padded-bottom-page {
    margin-top: 50px;
}

/* Ascunde butoanele manual și forgot password */
#loginPage .raised.cancel.block.btnManual.emby-button,
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
    display: none;
}

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

/* Bara de progres video fără blur */
.nowPlayingBar {
    background: rgba(30, 41, 59, 0.95) !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-xl) !important;
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

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

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

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

/* Slider pentru volum */
.nowPlayingBarVolumeSliderContainer .mdl-slider {
    background: var(--primary-color) !important;
}

/* ========================================
 * EPISOADE ȘI PREVIEW-URI
 * ======================================== */

/* Preview-uri episoade mai compacte */
.listItemImage.listItemImage-large.itemAction.lazy {
    height: 110px !important;
    border-radius: var(--border-radius) !important;
    transition: all var(--transition-medium) !important;
}

.listItemImage.listItemImage-large.itemAction.lazy:hover {
    transform: scale(1.05) !important;
    box-shadow: var(--shadow-medium) !important;
}

.listItem-content {
    height: 115px !important;
    padding: 12px !important;
}

.secondary.listItem-overview.listItemBodyText {
    height: 61px !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
}

/* ========================================
 * CAST & CREW STILIZAT
 * ======================================== */

/* Carduri pentru cast - design circular */
#castContent .card.overflowPortraitCard.personCard.card-hoverable.card-withuserdata,
#castContent .card.overflowPortraitCard.personCard.card-withuserdata {
    width: 120px !important;
    font-size: 90% !important;
    transition: all var(--transition-medium) !important;
}

#castContent .card.overflowPortraitCard.personCard:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: var(--shadow-heavy) !important;
}

/* Imagini circulare pentru cast */
#castContent .cardContent-button.cardImageContainer.coveredImage.cardContent.cardContent-shadow.itemAction.lazy,
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground1.cardContent.cardContent-shadow.itemAction,
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground2.cardContent.cardContent-shadow.itemAction,
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground3.cardContent.cardContent-shadow.itemAction,
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground4.cardContent.cardContent-shadow.itemAction,
#castContent .cardContent-button.cardImageContainer.coveredImage.defaultCardBackground.defaultCardBackground5.cardContent.cardContent-shadow.itemAction {
    background-size: cover !important;
    border-radius: 50% !important;
    border: 3px solid var(--border-color) !important;
    transition: all var(--transition-medium) !important;
}

#castContent .cardContent-button:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 164, 220, 0.3) !important;
}

#castContent .cardScalable {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
}

#castContent .cardOverlayContainer.itemAction {
    border-radius: 50% !important;
}

/* Butoane overlay pentru cast */
#castContent .cardOverlayButton-br {
    bottom: 4% !important;
    right: 15% !important;
    width: 70% !important;
}

#castContent .cardOverlayButton.cardOverlayButton-hover.itemAction.paper-icon-button-light {
    margin: auto !important;
    background: var(--primary-color) !important;
    color: white !important;
}

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

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

/* Taburi mai mari pentru mobile */
@media (max-width: 768px) {
    .emby-tab-button {
        padding: 2em 1.5em !important;
        font-size: 1.1em !important;
    }

    .headerTabs.sectionTabs {
        font-size: 120% !important;
    }

    /* Carduri mai mari pe mobile */
    .cardBox {
        margin: 8px !important;
    }

    /* Formular login responsive */
    #loginPage .readOnlyContent,
    #loginPage form {
        max-width: 90% !important;
        margin: 20px auto !important;
        padding: 30px 20px !important;
    }
}

/* ========================================
 * CAROUSEL ȘI SCROLLING
 * ======================================== */

/* Dezactivează carousel pentru biblioteci - layout fix */
@media all and (min-width: 50em) {
    .homePage .emby-scroller {
        margin-right: 0 !important;
    }

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

    .homePage .itemsContainer {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }
}

/* Butoane scroll îmbunătățite */
.emby-scrollbuttons {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    justify-content: space-between !important;
    pointer-events: none !important;
}

.emby-scrollbuttons-button {
    pointer-events: initial !important;
    background: var(--primary-color) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    box-shadow: var(--shadow-medium) !important;
    transition: all var(--transition-fast) !important;
}

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

/* ========================================
 * PERSONALIZĂRI PENTRU SECȚIUNI SPECIFICE
 * ======================================== */

/* Ascunde elemente nedorite */
.headerHomeButton {
    display: none !important;
}

.headerCastButton {
    display: none !important;
}

.headerSyncButton {
    display: none !important;
}

/* Personalizează titlurile secțiunilor */
.sectionTitleContainer h2 {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 1.8em !important;
    margin-bottom: 16px !important;
}

/* Next Up section */
div.nextUpSection {
    background: var(--background-medium) !important;
    border-radius: var(--border-radius-large) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
    border: 1px solid var(--border-color) !important;
}

/* Similar items section */
#similarCollapsible {
    background: var(--background-medium) !important;
    border-radius: var(--border-radius-large) !important;
    padding: 20px !important;
    margin: 16px 0 !important;
    border: 1px solid var(--border-color) !important;
}

/* ========================================
 * ANIMAȚII ȘI EFECTE SPECIALE
 * ======================================== */

/* Animație fade-in pentru carduri */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cardBox {
    animation: fadeInUp 0.5s ease-out !important;
}

/* Animație pentru butoane */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 164, 220, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 164, 220, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 164, 220, 0);
    }
}

.button-submit:focus,
.raised.emby-button:focus {
    animation: pulse 1.5s infinite !important;
}

/* ========================================
 * TEMA ÎNTUNECATĂ ÎMBUNĂTĂȚITĂ
 * ======================================== */

/* Overlay pentru dialoguri fără blur */
.dialogBackdrop {
    background: rgba(15, 23, 42, 0.9) !important;
}

/* Dialoguri fără blur */
.dialog {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
    position: relative;
    overflow: hidden;
}

/* Titluri în dialoguri */
.dialog h2,
.dialog h3 {
    color: var(--primary-color) !important;
}

/* ========================================
 * FINALIZARE ȘI OPTIMIZĂRI
 * ======================================== */

/* Optimizări pentru performanță */
* {
    will-change: auto !important;
}

.cardBox,
.emby-tab-button,
.headerButton,
.navMenuOption {
    will-change: transform, box-shadow !important;
}

/* Asigură compatibilitatea cu toate temele */
.skinHeader,
.mainDrawer,
.emby-input,
.emby-textarea,
.emby-select,
.navMenuOption-selected,
.cardBox,
.paperList {
    transition: all var(--transition-medium) !important;
}

/* ========================================
 * ÎMBUNĂTĂȚIRI FINALE PENTRU IMAGINI
 * ======================================== */

/* ELIMINĂ COMPLET BLUR-UL - Asigură vizibilitatea maximă pentru toate imaginile */
.cardImage,
.cardImageContainer .cardImage,
.listItemImage,
.itemDetailImage,
.cardContent img,
.listItem img,
.cardImageContainer img,
.cardContent-button img,
.listItemImage img,
.itemDetailImage img,
.lazy,
img:not(.backdropImage):not(.backdrop):not(.itemBackdrop) {
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
}

/* Hover effects pentru imagini - FĂRĂ FILTRE */
.cardImageContainer:hover .cardImage,
.listItemImage:hover,
.itemDetailImage:hover,
.cardImageContainer:hover img,
.cardContent-button:hover img {
    filter: none !important;
    transform: scale(1.02) !important;
    opacity: 1 !important;
}

/* Îmbunătățiri pentru thumbnail-uri */
.listItemImageButton,
.cardContent-button {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-large) !important;
}

.listItemImageButton::after,
.cardContent-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

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

/* ========================================
 * EFECTE SPECIALE PENTRU PROFESIONALISM
 * ======================================== */

/* Animație subtilă pentru loading */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.lazy:not([src]) {
    background: linear-gradient(90deg, var(--background-light) 0%, var(--background-medium) 50%, var(--background-light) 100%);
    background-size: 200px 100%;
    animation: shimmer 1.5s infinite;
}

/* REGULĂ FINALĂ - ELIMINĂ COMPLET BLUR-UL DE PE TOATE IMAGINILE */
img,
.cardImage,
.cardImageContainer *,
.cardContent-button *,
.listItemImage *,
.itemDetailImage *,
.lazy,
.userImage,
.headerUserImage,
.headerUserButton img,
.cardScalable *,
.cardOverlayContainer *,
.listItemImageButton *,
.cardContent img,
.listItem img,
.itemAction img,
.coveredImage,
.defaultCardBackground {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Elimină blur-ul și de pe fundaluri - lasă Jellyfin să gestioneze */
.backdropImage,
.backdrop,
.itemBackdrop,
.backgroundContainer .backdropImage {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
}

/* CORECȚII SPECIFICE PENTRU IMAGINI DE PROFIL ȘI CARDURI */
.headerUserButton,
.headerUserButton img,
.userImage,
.headerUserImage,
.userImageContainer,
.userImageContainer img {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Corecții pentru carduri - elimină orice blur */
.card,
.cardBox,
.cardContent,
.cardContent-button,
.cardImageContainer,
.cardScalable,
.cardOverlayContainer {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Elimină blur-ul de pe toate elementele cu clasa lazy */
.lazy {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

/* Îmbunătățiri pentru focus și accesibilitate */
*:focus-visible {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--border-radius-small) !important;
}

/* Mesaj final în CSS */
/*
 * ========================================
 * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN
 * ========================================
 *
 * Această temă modernă oferă:
 * ✓ Design glassmorphism profesional
 * ✓ Imagini complet vizibile și optimizate
 * ✓ Fundaluri cu blur elegant
 * ✓ Animații fluide și moderne
 * ✓ Compatibilitate cu toate dispozitivele
 * ✓ Îmbunătățiri pentru accesibilitate
 * ✓ Optimizări pentru performanță
 * ✓ Paletă de culori contemporană
 *
 * Pentru personalizări suplimentare,
 * modifică variabilele CSS din secțiunea :root
 *
 * Bucură-te de experiența îmbunătățită Jellyfin!
 * Versiune: 2.0 - Modern & Professional
 */