/* Add here all your css styles (customizations) */



    html, body {
        overflow: hidden; /* Nechávame, je to pre 3D zobrazenie */
        background: transparent;
        margin: 0;
        padding: 0;
        height: 100%;
        border: 0;
        position: relative;
    }

    #menubtn {
        position: absolute;
        width: 300px;
        max-width: 300px;
        border: 0;
        top: 0px;
        right: 0;
        margin: 0;
        background: transparent;
        padding: 5px 5px;
        color: #000;
        font-size: 14px; /* ZMENA: Zväčšené písmo */
        z-index: 1005;
        display: block;
        height: 35px;
    }

    #menusidebar {
        position: absolute;
        border: 0;
        max-width: 370px;
        top: 0; /* ZMENA: Zarovnané na vrch, pre lepšiu kontrolu */
        bottom: 0; /* ZMENA: Roztiahnuté na celú výšku */
        background: #555555;
        padding: 20px; /* ZMENA: Rovnomerný padding pre lepší vzhľad */
        color: #f8f9fa; /* ZMENA: Svetlé písmo pre kontrast na tmavom pozadí */
        font-size: 14px; /* ZMENA: Výrazne zväčšené písmo z 11px */
        z-index: 1000;
        overflow-x: hidden;
        overflow-y: auto; /* Ponechané pre možnosť skrolovania */
    }

    /* ODSTRÁNENÉ - Tieto triedy už nie sú potrebné.
    Ich pevnú šírku (width: 67px) a okraje (margin-left) sme nahradili
    responzívnou mriežkou Bootstrapu (col-*) a triedou .img-fluid priamo v HTML.
    Týmto sa obrázky budú automaticky prispôsobovať a nebudú sa "biť" s novým dizajnom.
    
    .imgpozicia { ... }
    .imgdelenie { ... }
    .imgmodule { ... }
    .imgram { ... }
    */

    /* Všeobecné štýly pre lepšiu čitateľnosť v sidebare */
    #menusidebar .form-check-label,
    #menusidebar .col-form-label,
    #menusidebar .form-label {
        font-size: 0.95rem; /* ~15px */
    }
    
    #menusidebar .desc,
    #menusidebar .user-role {
        font-size: 0.8rem; /* ~13px */
        color: #ced4da; /* Mierne stlmená biela pre popisky */
    }


    @media only screen and (max-width: 750px) {
        #menusidebar {
            max-width: 100%; /* Na mobiloch môže zabrať celú šírku */
        }
    }

    /* Štýl pre celý klikateľný vzorkovník */
.material-swatch {
    display: block;
    color: inherit; /* Zdedí farbu textu */
    text-decoration: none;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 5px;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    height: 100%; /* Zabezpečí rovnakú výšku pre všetky položky v rade */
}

/* Efekt pri prejdení myšou */
.material-swatch:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    border-color: #ccc;
}

/* Štýl pre oblasť s popiskami pod obrázkom */
.material-caption {
    padding-top: 8px; /* Medzera medzi obrázkom a textom */
    min-height: 55px; /* KĽÚČOVÉ: Zaručí minimálnu výšku pre popisky, čím sa zarovnajú */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* UPRAVENÝ KÓD PRE LEPŠIU ČITATEĽNOSŤ */
.material-caption .user-role {
    font-size: 13px;
    line-height: 1.3;
    color: #000 !important; /* ZMENA: Úplne čierna farba + poistka proti prepísaniu */
}

/* Poistka, aby bol kód produktu naozaj tučný */
.material-caption .user-role strong {
    font-weight: 700; /* Alebo 600, ak by to bolo príliš hrubé */
    color: #000;
}


/* Nový štýl pre hviezdičku */
    .required-star {
        color: #e74c3c; /* Červená farba */
        font-size: 1.2rem;  /* Väčšia veľkosť */
        font-weight: 700;   /* Tučné písmo */
        position: relative;
        top: 2px; /* Jemné posunutie pre lepšie zarovnanie */
    }
	
	/* Štýl pre načítavací overlay - garantované centrovanie */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 100% šírky okna prehliadača */
    height: 100vh; /* 100% výšky okna prehliadača */
    background-color: #ffffff; /* Nepriehľadné biele pozadie */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

/* Trieda pre plynulé zmiznutie overlayu */
#loading-overlay.fade-out {
    opacity: 0;
}




/* Ostatné štýly pre spinner a text zostávajú rovnaké */
#loading-overlay .loading-text {
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
}

#loading-overlay .spinner-border {
    width: 4rem;
    height: 4rem;
}
	

/* custom.css */

/* custom.css */

.imgpozicia,
.imgdelenie,
.imgram,
.imgmodule {
    max-width: 100%;
    height: auto;
    
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 5px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

/* Zjednotený a decentný efekt pre všetky klikateľné obrázky a vzorky */
.material-swatch:hover,
.swatch-card:hover,
.imgpozicia:hover,
.imgdelenie:hover,
.imgram:hover,
.imgmodule:hover {
    /* PONECHANÉ: Jemná zmena farby rámika ako spätná väzba */
    border-color: #a0a0a0;

    /* ODSTRÁNENÉ: Pohyb a tieň, ktoré vytvárali "kolotočový" efekt */
    transform: none;
    box-shadow: none;
}

/* Ponecháme zmenu kurzora pre drag-and-drop moduly */
.swatch-card:hover {
    cursor: grab;
}