/* ==========================================================================
   MOBILE.CSS - Mobile Only Styles (< 768px)
   ========================================================================== */

@media (max-width: 767.98px) {

    /* Sidebar - Hidden by default, slides in from left */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        background: #ffffff !important;
        transform: translateX(-100%);
        /* Hidden to the left */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 1050;
        /* Above everything */
    }

    /* Show sidebar when active */
    .sidebar.show,
    .sidebar.active {
        transform: translateX(0);
        /* Slide in */
    }

    /* Main content - Full width on mobile */
    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* Navbar - Compact */
    .navbar {
        padding: 0 1rem;
        height: 56px;
    }

    /* Content wrapper - Less padding */
    .content-wrapper {
        padding: 0.75rem;
    }

    /* Typography - Smaller */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    /* Cards - Less padding */
    .card-header {
        padding: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Tables - Horizontal scroll */
    .table th,
    .table td {
        padding: 0.75rem;
        white-space: nowrap;
    }

    /* Grid - Single column */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* Buttons - Full width option */
    .btn-block {
        width: 100%;
        display: flex;
    }

    /* Show hamburger menu */
    .menu-toggle {
        display: block;
    }

    /* Modal - Full screen */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 12px;
    }

    /* Overlay for sidebar */
    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .sidebar-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }
}