/* Sidebar Base Styles - Core layout and structure */

/* Bootstrap Modal z-index fixes - Ensure modals appear above sidebar */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

/* Prevent page scroll */
html, body {
    height: 100%;
    /* overflow-x: hidden; */
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

/* Layout Container */
.layout-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    /* overflow: hidden; */
    position: relative;
    top: 0;
    left: 0;
}

/* Sidebar Container */
.sidebar-left {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1030 !important;
    transition: width 0.3s ease-in-out;
}

.sidebar-left.sidebar-collapsed {
    width: 60px;
}

/* Hide text when collapsed */
.sidebar-left.sidebar-collapsed .sidebar-menu-link span,
.sidebar-left.sidebar-collapsed .sidebar-submenu-link span,
.sidebar-left.sidebar-collapsed .sidebar-menu-group-header span,
.sidebar-left.sidebar-collapsed .sidebar-brand img,
.sidebar-left.sidebar-collapsed .sidebar-user-details,
.sidebar-left.sidebar-collapsed .sidebar-logout-btn span,
.sidebar-left.sidebar-collapsed .sidebar-auth-links span {
    display: none;
}

.sidebar-left.sidebar-collapsed .sidebar-menu-group-icon,
.sidebar-left.sidebar-collapsed .sidebar-submenu-icon {
    display: none;
}

/* Center icons when collapsed */
.sidebar-left.sidebar-collapsed .sidebar-menu-link,
.sidebar-left.sidebar-collapsed .sidebar-menu-group-header {
    justify-content: center;
    padding: 1rem 0;
}

.sidebar-left.sidebar-collapsed .sidebar-menu-link i,
.sidebar-left.sidebar-collapsed .sidebar-menu-group-header i:first-child {
    margin: 0;
    font-size: 1.25rem;
}

/* Center user profile icons when collapsed */
.sidebar-left.sidebar-collapsed .sidebar-user-info {
    justify-content: center;
}

.sidebar-left.sidebar-collapsed .sidebar-user-info i {
    margin: 0;
}

.sidebar-left.sidebar-collapsed .sidebar-user-actions {
    display: none;
}

.sidebar-left.sidebar-collapsed .sidebar-user-actions-collapsed {
    display: block;
}

.sidebar-left:not(.sidebar-collapsed) .sidebar-user-actions-collapsed {
    display: none;
}

.sidebar-logout-btn-collapsed {
    border: none;
    background: none;
    padding: 0.5rem 0 !important;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sidebar-logout-btn-collapsed i {
    margin: 0;
    font-size: 1.5rem;
}

.sidebar-logout-btn-collapsed:hover {
    opacity: 0.8;
}

/* .sidebar-logout-btn-collapsed:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
} */

.sidebar-left.sidebar-collapsed .sidebar-auth-links a {
    text-align: center;
    justify-content: center;
}

.sidebar-left.sidebar-collapsed .sidebar-auth-links a i {
    margin: 0;
    font-size: 1.25rem;
}

/* Sidebar Sections */
.sidebar-brand {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    flex-shrink: 0;
}

.sidebar-brand img {
    max-width: 100%;
    height: auto;
}

.sidebar-menu {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-user {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.sidebar-user-actions-collapsed {
    display: none;
}

/* Toggle Button */
.sidebar-toggle {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 249px; /* Expanded state - overlap 1px */
    width: 30px;
    height: 60px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 6px 6px 0;
    transition: left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    z-index: 1035 !important;
    border-left: none !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2), 0 -2px 5px rgba(0, 0, 0, 0.2); /* Shadow right, bottom, top only */
}

.sidebar-left.sidebar-collapsed ~ .sidebar-toggle {
    left: 59px; /* Collapsed state - overlap 1px */
    box-shadow: none; /* No shadow when collapsed */
}

.sidebar-toggle:hover {
    opacity: 0.8;
}

/* Menu Navigation */
.sidebar-menu-nav {
    width: 100%;
}

.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-item {
    margin: 0.25rem 0;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 0 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    position: relative;
    box-shadow: inset 4px 0 transparent; /* espacio reservado para el acento activo */
}

.sidebar-menu-link i {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.sidebar-menu-link span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu Groups */
.sidebar-menu-group {
    margin: 0.5rem 0;
}

.sidebar-menu-group-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 0 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    position: relative;
    box-shadow: inset 4px 0 transparent;
}

.sidebar-menu-group-header i:first-child {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.sidebar-menu-group-header span {
    flex: 1;
    font-weight: 600;
}

.sidebar-submenu-icon {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
    margin-left: auto;
}

/* Submenu */
.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.sidebar-menu-group.expanded .sidebar-submenu {
    max-height: 1000px;
}

.sidebar-submenu-item {
    margin: 0;
}

.sidebar-submenu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem 0.625rem 3rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin: 0 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    position: relative;
}

.sidebar-submenu-link i {
    font-size: 1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.sidebar-submenu-link span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estado activo común: resalta con acento a la izquierda */
.sidebar-menu-link.active,
.sidebar-menu-link:active,
.sidebar-menu-group-header.active {
    font-weight: 600;
    box-shadow: inset 4px 0 currentColor;
}

.sidebar-submenu-link.active,
.sidebar-submenu-link:active {
    font-weight: 600;
    box-shadow: none;
}

/* Scrollbar Styling */
.sidebar-left::-webkit-scrollbar {
    width: 6px;
}

.sidebar-left::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-left::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.sidebar-left::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Main Content Adjustment */
.layout-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

/* Backdrop hidden by default (desktop/tablet) */
.sidebar-backdrop {
    display: none !important;
}

.main-content {
    margin-left: 250px;
    width: calc(100vw - 250px);
    height: 100vh;
    overflow-y: auto;
    /* overflow-x: hidden; */
    display: flex;
    flex-direction: column;
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
}

.sidebar-left.sidebar-collapsed ~ .main-content {
    margin-left: 60px;
    width: calc(100vw - 60px);
}

.main-content .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2rem;
    /* overflow-y: hidden; */
    height: 100%;
}

.main-content main {
    width: 100%;
/*  max-width: 1400px;*/
    max-width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* overflow: hidden; */
    gap: 1rem;
}

/* Table container layout */
.main-content main > *:not(.table-responsive):not(table) {
    flex-shrink: 0;
}

.main-content main .table-responsive,
.main-content main table {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
    max-height: calc(100vh - 300px);
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    /* Sidebar starts collapsed on tablets */
    .sidebar-left {
        width: 60px;
    }
    
    .sidebar-left .sidebar-menu-link span,
    .sidebar-left .sidebar-submenu-link span,
    .sidebar-left .sidebar-menu-group-header span,
    .sidebar-left .sidebar-brand img {
        display: none;
    }
    
    .sidebar-left .sidebar-submenu-icon {
        display: none;
    }
    
    .main-content {
        margin-left: 60px;
    }
    
    /* Toggle button position for tablet collapsed (60px sidebar) */
    .sidebar-toggle {
        left: 59px !important; /* Overlap 1px */
        box-shadow: none; /* No shadow when collapsed */
    }
    
    .sidebar-left:not(.sidebar-collapsed) ~ .sidebar-toggle {
        left: 249px !important; /* Expanded state - overlap 1px */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.2), 0 -2px 5px rgba(0, 0, 0, 0.2); /* Shadow right, bottom, top only */
    }
    
    /* When expanded on tablet, show as overlay */
    .sidebar-left:not(.sidebar-collapsed) {
        width: 250px;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    }
    
    .sidebar-left:not(.sidebar-collapsed) .sidebar-menu-link span,
    .sidebar-left:not(.sidebar-collapsed) .sidebar-submenu-link span,
    .sidebar-left:not(.sidebar-collapsed) .sidebar-menu-group-header span,
    .sidebar-left:not(.sidebar-collapsed) .sidebar-brand img {
        display: block;
    }
    
    .sidebar-left:not(.sidebar-collapsed) .sidebar-submenu-icon {
        display: inline;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .layout-container {
        grid-template-columns: 1fr;
    }
    
    /* Sidebar is hidden by default on mobile */
    .sidebar-left {
        transform: translateX(-100%);
        width: 250px;
        box-shadow: none;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    
    /* When expanded, slide in from left */
    .sidebar-left:not(.sidebar-collapsed) {
        transform: translateX(0);
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.4);
        z-index: 1030;
    }
    
    .sidebar-left:not(.sidebar-collapsed) .sidebar-menu-link span,
    .sidebar-left:not(.sidebar-collapsed) .sidebar-submenu-link span,
    .sidebar-left:not(.sidebar-collapsed) .sidebar-menu-group-header span,
    .sidebar-left:not(.sidebar-collapsed) .sidebar-brand img {
        display: block;
    }
    
    .sidebar-left:not(.sidebar-collapsed) .sidebar-submenu-icon {
        display: inline;
    }
    
    /* Main content takes full width */
    .main-content {
        margin-left: 0;
    }
    
    .sidebar-left.sidebar-collapsed ~ .main-content {
        margin-left: 0;
    }
    
    /* Toggle button - FIXED position on mobile, always visible */
    .sidebar-toggle {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        left: 0 !important; /* Hidden state - force override */
        right: auto;
        width: 30px !important;
        height: 60px !important;
        border-radius: 0 8px 8px 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        z-index: 1035;
    }
    
    /* When sidebar is open, move toggle button to the right */
    .sidebar-left:not(.sidebar-collapsed) ~ .sidebar-toggle {
        left: 249px !important; /* Expanded state - overlap 1px */
        box-shadow: 2px 0 7px rgba(0, 0, 0, 0.4), 0 2px 7px rgba(0, 0, 0, 0.3), 0 -2px 7px rgba(0, 0, 0, 0.3); /* Shadow right, bottom, top only */
    }
    
    /* Mobile overlay backdrop */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 800 !important;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    
    .sidebar-backdrop.show {
        display: block !important;
        opacity: 1;
    }
    
    /* Hide sidebar backdrop when Bootstrap modal is open */
    body.modal-open .sidebar-backdrop {
        display: none !important;
    }
    
    /* Additional safeguard: hide when modal-active class is present */
    .sidebar-backdrop.modal-active {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Adjust brand section for mobile */
    .sidebar-brand {
        padding: 1rem 0.75rem;
    }
    
    /* Adjust menu padding for mobile */
    .sidebar-menu-link,
    .sidebar-menu-group-header {
        padding: 0.875rem 0.75rem;
        margin: 0 0.25rem;
    }
    
    .sidebar-submenu-link {
        padding: 0.75rem 0.75rem 0.75rem 2.5rem;
        margin: 0 0.25rem;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .sidebar-left {
        width: 250px;
    }
    
    /* Adjust toggle button for small mobile sidebar width */
    .sidebar-left:not(.sidebar-collapsed) ~ .sidebar-toggle {
        left: 249px !important; /* Expanded state - overlap 1px */
    }
    
    .sidebar-menu-link,
    .sidebar-menu-group-header {
        font-size: 0.85rem;
        padding: 0.75rem 0.5rem;
    }
    
    .sidebar-submenu-link {
        font-size: 0.8rem;
        padding: 0.625rem 0.5rem 0.625rem 2.25rem;
    }
    
    .sidebar-toggle {
        width: 45px;
        height: 45px;
    }
}

/* Landscape mode on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar-brand {
        padding: 0.75rem 0.5rem;
    }
    
    .sidebar-brand img {
        max-height: 40px;
    }
    
    .sidebar-menu-link,
    .sidebar-menu-group-header {
        padding: 0.5rem 0.75rem;
    }
    
    .sidebar-submenu-link {
        padding: 0.4rem 0.75rem 0.4rem 2.5rem;
    }
}

/* Prevent body scroll when mobile sidebar is open */
body.sidebar-open {
    overflow: hidden;
}

/* Print styles */
@media print {
    .sidebar-left,
    .sidebar-toggle {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
    }
}