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

#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: rotate(180deg); }
    body.sidebar-expanded #sidebar { transform: translateX(0); }
    body.sidebar-expanded #sidebarToggle .nav-toggle-icon { transform: rotate(0deg); }
}

/* 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: rotate(180deg); }
    #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: rotate(0deg); }
}

/* 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: rotate(180deg); }
}

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

/* Stil general link-uri (inactive) */
#sidebar .nav-pills .nav-link {
    border-radius: 0.5rem;
    margin: 0.2rem 0.5rem;
    color: #495057; /* Gri închis text */
    transition: all 0.2s ease;
}

/* HOVER pe link-uri INACTIVE */
#sidebar .nav-link:not(.active):hover {
    background-color: rgba(13, 110, 253, 0.1); 
    color: #0d6efd; /* Textul devine albastru la hover */
}

/* Stil pentru link-ul ACTIV (cel selectat) */
#sidebar .nav-pills .nav-link.active {
    background-color: #0d6efd !important;
    color: #fff !important; /* Text alb */
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.2);
}

/* Forțăm elementele din interiorul link-ului ACTIV să fie albe */
#sidebar .nav-pills .nav-link.active i,
#sidebar .nav-pills .nav-link.active svg,
#sidebar .nav-pills .nav-link.active span {
    color: #fff !important;
}

/* Hover pe link-ul care este DEJA activ */
#sidebar .nav-pills .nav-link.active:hover {
    background-color: #0b5ed7 !important;
    color: #fff !important;
}

/* Uniformizarea butoanelor de paginație */
.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Asigură că butoanele sunt pătrate, nu rectangulare */
    height: 40px;    /* Forțează înălțime egală peste tot */
    padding: 0;      /* Resetăm padding-ul pentru a lăsa Flexbox-ul să centreze */
}

/* Ajustare specifică pentru iconițele din paginator */
.pagination .page-link svg {
    width: 1.2rem;
    height: 1.2rem;
    display: block; /* Elimină spațiul de sub elementele inline */
}