/* #region main */

:root {
    --sidebar-collapsed: 72px;
    --tblr-border-radius: 0.25rem !important;
    --tblr-border-radius-sm: 0.25rem !important;
    --tblr-border-radius-lg: 0.25rem !important;
}

.dropdown-item .icon {
    margin-right: .5rem;
}

.navbar-vertical {
    transition: width .2s ease;
    scrollbar-width: none;
}

.page.sidebar-collapsed .navbar-vertical {
    width: var(--sidebar-collapsed) !important;
    min-width: var(--sidebar-collapsed) !important;
}

    .page.sidebar-collapsed .navbar-vertical .container-fluid {
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .page.sidebar-collapsed .navbar-vertical .nav-item {
        text-align: center;
    }

    .page.sidebar-collapsed .navbar-vertical .nav-link {
        justify-content: center !important;
    }

.page.sidebar-collapsed .navbar-brand-text {
    display: none;
}

.page.sidebar-collapsed .navbar-brand {
    justify-content: center !important;
    margin: 0;
}

.navbar-brand {
    justify-content: left !important;
    margin-left: 1rem;
}

.page.sidebar-collapsed .navbar-vertical .nav-link-title,
.page.sidebar-collapsed .collapse-btn-text {
    display: none !important;
}

.navbar-vertical .nav-link-title {
    padding-left: .5rem;
}

#sidebar-menu .navbar-nav .nav-item .nav-link {
    border-radius: 0 !important;
    border-bottom: .75px solid #aaaaaa2b;
}

#sidebar-menu .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    border-radius: 0 !important;
    border-bottom: .75px solid #aaaaaa2b;
}

.nav-link.show > .nav-link-title {
    font-weight: 600 !important;
}

.nav-link > svg {
    margin-right: .5rem;
}

.page.sidebar-collapsed .page-wrapper {
    margin-left: var(--sidebar-collapsed);
}

@media (max-width:991.98px) {
    .page.sidebar-collapsed .page-wrapper {
        margin-left: 0;
    }
}

/* Desktop behavior */
@media (min-width: 992px) {

    /* Collapsed: sakrij default dropdown unutar sidebara (flyout ćemo mi prikazati) */
    .page.sidebar-collapsed .navbar-vertical .dropdown-menu {
        display: none;
    }



    /* Flyout (izvan sidebara) */
    .sidebar-flyout {
        display: block !important;
        position: fixed !important;
        z-index: 1050;
        background: var(--tblr-bg-surface, #fff) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .1) !important;
        border-radius: .5rem;
        overflow: hidden;
        padding: .75rem 0;
        margin-left: .5rem !important;
        min-width: 240px;
    }

        .sidebar-flyout .dropdown-item {
            padding: 0.5rem 1rem !important;
        }

    #sidebar-menu .dropdown-toggle::after {
        display: none;
    }

    .sidebar-flyout .dropdown-menu {
        position: static;
        display: block;
        box-shadow: none;
    }
}

/* #endregion */

/* #region fade-in */

/* Utility class to fade in any element */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.2s ease-in forwards;
}

/* You can adjust the timing (0.6s) and easing */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* #endregion */

/* #region ========== Loading overlay ========== */
 
.is-loading {
    filter: blur(2px) brightness(0.95);
    pointer-events: none;
    transition: filter 0.3s ease;
    animation: pulse-loading 1.2s ease-in-out infinite;
}

@keyframes pulse-loading {
    0% {
        filter: blur(2px) brightness(0.95);
    }

    50% {
        filter: blur(3px) brightness(0.85);
    }

    100% {
        filter: blur(2px) brightness(0.95);
    }
}

 

/* #endregion */


/* keep the menu above anything inside cards/tables */
.table .dropdown-menu {
    z-index: 2000; /* keep above striped row backgrounds */
}

/* #region loading */

.loading-container {
    position: relative; /* ensure overlay is positioned correctly */
}

    .loading-container.loading .loading-overlay {
        display: flex;
    }

.loading-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    align-items: center;
    justify-content: center;
    
}

/* endregion */

.page-wrapper {
    margin-bottom: 70px !important;
}