/*
 * ========================================
 * 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 principală */
    --primary-color: #00a4dc;          /* Albastru Jellyfin */
    --secondary-color: #1e1e1e;        /* Gri închis */
    --accent-color: #ff6b35;           /* Portocaliu accent */
    --background-dark: #0f0f0f;        /* Fundal foarte închis */
    --background-medium: #1a1a1a;      /* Fundal mediu */
    --background-light: #2a2a2a;       /* Fundal deschis */
    --text-primary: #ffffff;           /* Text principal */
    --text-secondary: #b3b3b3;         /* Text secundar */
    --border-color: #333333;           /* Culoare borduri */
    --success-color: #28a745;          /* Verde pentru succes */
    --warning-color: #ffc107;          /* Galben pentru avertismente */
    --error-color: #dc3545;            /* Roșu pentru erori */

    /* Dimensiuni și spațiere */
    --border-radius: 8px;
    --border-radius-small: 4px;
    --border-radius-large: 12px;
    --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.2);
    --shadow-heavy: 0 8px 16px rgba(0,0,0,0.3);

    /* Tranziții */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ========================================
 * STILURI GENERALE PENTRU FUNDAL ȘI LAYOUT
 * ======================================== */

/* Fundal principal al aplicației */
.backgroundContainer,
.dialog,
html {
    background-color: var(--background-dark) !important;
    color: var(--text-primary);
}

/* Container principal pentru conținut */
.backgroundContainer.withBackdrop,
.backdropContainer,
.backgroundContainer {
    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%) !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 transparent modern */
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
    background: rgba(15, 15, 15, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-medium);
    transition: all var(--transition-medium);
}

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
    background: rgba(15, 15, 15, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* Butoane din header */
.headerButton {
    color: var(--text-primary) !important;
    transition: all var(--transition-fast);
    border-radius: var(--border-radius-small);
    margin: 0 4px;
}

.headerButton:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-light);
}

/* Meniu lateral (drawer) */
.mainDrawer {
    background: var(--background-medium) !important;
    border-right: 1px solid var(--border-color);
    box-shadow: var(--shadow-heavy);
}

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

/* 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 */
.button-submit,
.raised.emby-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    transition: all var(--transition-fast) !important;
    box-shadow: var(--shadow-light) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.button-submit:hover,
.raised.emby-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%) !important;
}

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

/* Carduri pentru filme, seriale, etc. */
.cardBox {
    background: var(--background-medium) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    transition: all var(--transition-medium) !important;
    box-shadow: var(--shadow-light) !important;
}

.cardBox:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: var(--shadow-heavy) !important;
    border-color: var(--primary-color) !important;
}

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

.cardContent-button:hover {
    transform: scale(1.05) !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 */
#loginPage {
    background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-medium) 100%);
    background-size: cover;
    position: relative;
}

/* Overlay pentru pagina de login */
#loginPage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(5px);
}

/* Formular de login - design minimalist */
#loginPage .readOnlyContent,
#loginPage form {
    max-width: 400px !important;
    background: rgba(26, 26, 26, 0.95) !important;
    border-radius: var(--border-radius-large) !important;
    padding: 40px !important;
    box-shadow: var(--shadow-heavy) !important;
    border: 1px solid var(--border-color) !important;
    position: relative;
    z-index: 1;
}

/* 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 */
.nowPlayingBar {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid var(--border-color) !important;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.3) !important;
}

/* 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 */
.dialogBackdrop {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(5px) !important;
}

/* Dialoguri */
.dialog {
    background: var(--background-medium) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius-large) !important;
    box-shadow: var(--shadow-heavy) !important;
}

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

/* Mesaj final în CSS */
/*
 * ========================================
 * SFÂRȘITUL TEMEI PERSONALIZATE JELLYFIN
 * ========================================
 *
 * Această temă oferă:
 * ✓ Design modern și elegant
 * ✓ Animații fluide și responsive
 * ✓ Compatibilitate cu toate dispozitivele
 * ✓ Îmbunătățiri pentru accesibilitate
 * ✓ Optimizări pentru performanță
 *
 * Pentru suport sau personalizări suplimentare,
 * modifică variabilele CSS din secțiunea :root
 *
 * Bucură-te de experiența îmbunătățită Jellyfin!
 */