/* ==========================================================================
   1. STRUCTURA ȘI MAIN
   ========================================================================== */
.admin-layout {
    display: flex;
    min-height: calc(100vh - 56px);
}

#main {
    flex-grow: 1;
    overflow-x: hidden;
    padding-left: 15px;
    padding-right: 15px;
}

#sidebar {
    background: #f8f9fa;
    border-right: 1px solid rgba(0,0,0,.1);
    transition: width .25s ease, transform .25s ease;
    z-index: 1010;
    overflow: hidden;
}

#sidebarToggle .nav-toggle-icon {
    display: inline-block;
    transition: transform .25s ease;
}

/* ==========================================================================
   2. RESPONSIVE (MOBILE, TABLET, DESKTOP)
   ========================================================================== */

/* MOBILE (<768px) */
@media (max-width: 767.98px) {
    #sidebar {
        position: fixed;
        left: 0;
        top: 72px;
        height: calc(100vh - 72px);
        width: 240px;
        z-index: 1050;
        transform: translateX(-100%);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    #sidebarToggle .nav-toggle-icon { transform: scaleX(-1); }

    body.sidebar-expanded #sidebar { transform: translateX(0); }
    body.sidebar-expanded #sidebarToggle .nav-toggle-icon { transform: scaleX(1); }
}

/* TABLET (768px - 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #sidebar { width: 72px; min-width: 72px; }

    #sidebar .nav-link {
        text-align: center;
        padding: 10px 0;
    }

    #sidebar .nav-link i,
    #sidebar .nav-link svg {
        margin: 0 auto;
        display: block;
        font-size: 1.25rem;
    }

    #sidebarToggle .nav-toggle-icon { transform: scaleX(-1); }

    #sidebar .nav-link span,
    #sidebar .sidebar-heading {
        display: none;
    }

    body.sidebar-expanded #sidebar { width: 240px; min-width: 240px; }

    body.sidebar-expanded #sidebar .nav-link {
        text-align: left;
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
    }

    body.sidebar-expanded #sidebar .nav-link i,
    body.sidebar-expanded #sidebar .nav-link svg {
        margin: 0 10px 0 0;
        display: inline-block;
    }

    body.sidebar-expanded #sidebar .nav-link span,
    body.sidebar-expanded #sidebar .sidebar-heading {
        display: block;
    }

    body.sidebar-expanded #sidebarToggle .nav-toggle-icon { transform: scaleX(1); }
}

/* DESKTOP (≥992px) */
@media (min-width: 992px) {
    #sidebar { width: 240px; min-width: 240px; }

    body.sidebar-collapsed #sidebar { width: 72px; min-width: 72px; }

    body.sidebar-collapsed #sidebar .nav-link span,
    body.sidebar-collapsed #sidebar .sidebar-heading {
        display: none;
    }

    body.sidebar-collapsed #sidebarToggle .nav-toggle-icon {
        transform: scaleX(-1);
    }

    /* FIX: center icons when collapsed */
    body.sidebar-collapsed #sidebar .nav-link {
        display: flex;
        justify-content: center;
        align-items: center;

        width: 40px;
        height: 40px;

        margin: 0.25rem auto; /* centrează pe orizontală */
        padding: 0;

        border-radius: 0.5rem;
    }

    body.sidebar-collapsed #sidebar .nav-link i,
    body.sidebar-collapsed #sidebar .nav-link svg {
        margin: 0;
    }

    body.sidebar-collapsed #sidebar .nav-pills {
        padding: 0.25rem 0;
    }
}

/* ==========================================================================
   3. MENIU (NAV-PILLS) & CULORI
   ========================================================================== */

/* Container spacing */
#sidebar .nav-pills {
    padding: 0.25rem;
}

/* Link general */
#sidebar .nav-pills .nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: #495057;
    transition: all 0.2s ease;
    display: block;
}

/* Hover (inactive) */
#sidebar .nav-link:not(.active):hover {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

/* Active */
#sidebar .nav-pills .nav-link.active {
    background-color: #0d6efd !important;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
}

/* Active inner elements */
#sidebar .nav-pills .nav-link.active i,
#sidebar .nav-pills .nav-link.active svg,
#sidebar .nav-pills .nav-link.active span {
    color: #fff !important;
}

/* Active hover */
#sidebar .nav-pills .nav-link.active:hover {
    background-color: #0b5ed7 !important;
    color: #fff !important;
}

/* ==========================================================================
   4. PAGINATION
   ========================================================================== */

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0;
}

.pagination .page-link svg {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
}