/* Layout Core */
body {
    display: flex;
    min-height: 100vh;
    background-color: #f8f9fa;
    margin: 0;
    overflow-x: hidden;
}

/* Sidebar behavior on Desktop (Large screens and up) */
@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        min-width: 280px;
        max-width: 280px;
        z-index: 1000;
    }
}

/* Sidebar behavior on Mobile/Tablet */
@media (max-width: 991.98px) {
    body {
        flex-direction: column;
    }
    .sidebar {
        width: 280px; /* Width of the drawer when it slides out */
    }
}

/* Main Content Wrapper */
.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Fixes potential flexbox overflow issues */
}

/* Dashboard Component Styling */
.card {
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
}

.list-group-item {
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.list-group-item:hover {
    background-color: #f1f3f5;
    border-left-color: #0d6efd;
    padding-left: 1.25rem;
}

/* Custom Scrollbar for Sidebar */
.offcanvas-body::-webkit-scrollbar {
    width: 5px;
}
.offcanvas-body::-webkit-scrollbar-thumb {
    background: #495057;
    border-radius: 10px;
}
/* Prevent mobile browsers from auto-zooming on form inputs */
@media (max-width: 768px) {
    .no-zoom {
        font-size: 16px !important; /* Minimum size to stay zoomed out */
    }
}

/* Optional: If you want the input to look smaller but still act like 16px */
.form-control-sm.no-zoom {
    padding: 0.25rem 0.5rem;
}

/* Ensure the index header stays above the calendar and doesn't get pushed by the sidebar */
.main-content-wrapper main {
    width: 100%;
    max-width: 1200px; /* Optional: keeps the calendar from getting TOO wide on ultrawide monitors */
    margin: 0 auto;
}

@media (max-width: 767px) {
    /* Stack the sync buttons on mobile */
    .btn-group {
        display: flex;
        width: 100%;
    }
    .btn-group .btn {
        flex: 1;
    }
}