/* ======================================
   RESPONSIVE LAYOUT - SIDEBAR & MAIN CONTENT
   ====================================== */

:root {
    --sidebar-width: 260px;
    --navbar-height: 70px;
}

/* Ensure no horizontal scroll */
body {
    overflow-x: hidden;
    background-color: #f8f9fa;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Desktop layout: Fixed sidebar + main content (≥992px) */
@media (min-width: 992px) {
    .d-flex {
        display: flex;
    }

    .sidebar-wrapper {
        width: var(--sidebar-width);
        flex-shrink: 0;
        height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
        position: sticky;
        top: 70px;
    }

    .main-content {
        flex: 1;
        min-width: 0;
        width: calc(100vw - var(--sidebar-width));
        max-width: calc(100vw - var(--sidebar-width));
        box-sizing: border-box;
    }
    
    /* Hide hamburger button on desktop */
    .navbar-sidebar-toggle {
        display: none !important;
    }
}

/* Mobile layout: Hide sidebar wrapper, show offcanvas (≤991.98px) */
@media (max-width: 991.98px) {
    .sidebar-wrapper {
        display: none !important;
    }

    .main-content {
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
}

/* Hamburger button styling */
.navbar-sidebar-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0.5rem 0.75rem !important;
    color: white !important;
    font-size: 1.25rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* Offcanvas sidebar styling */
.offcanvas {
    width: 280px !important;
}

.offcanvas-body {
    padding: 0 !important;
}

/* Sidebar styling in offcanvas */
.offcanvas .sidebar-enhanced {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    top: auto !important;
    box-shadow: none !important;
    border-right: none !important;
    overflow-y: visible !important;
}

/* ======================================
   BASE STYLES
   ====================================== */

.form-control,
.form-select {
    border-color: #dee2e6;
    transition: border-color 0.2s;
}

.form-control:focus,
.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.card {
    border: none;
    border-radius: 0.5rem;
}

.btn {
    border-radius: 0.375rem;
    font-weight: 500;
}

.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
}

.badge {
    padding: 0.35rem 0.65rem;
    font-weight: 500;
}

.alert {
    border: none;
    border-radius: 0.5rem;
}

.nav-link {
    color: #495057 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.nav-link:hover {
    background-color: #e9ecef;
    color: #0d6efd !important;
}

.text-uppercase {
    letter-spacing: 0.5px;
}

/* Utility classes */
.flex-grow-1 {
    flex: 1;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}