/* ============================================================
   ApplyMate — Mobile Fix Patch
   Appended to app.css — fixes hamburger visibility + sidebar
   ============================================================ */

/* ── Reset the hamburger display logic ───────────────────────
   The previous CSS had !important rules that conflicted.
   We rebuild this cleanly. */

/* Default: hamburger hidden (desktop-first for this element) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--navy);
    flex-shrink: 0;
}
.menu-toggle:hover { background: var(--gray-100); }
.menu-toggle svg   { width: 22px; height: 22px; display: block; }

/* Sidebar default (desktop): fixed, always visible */
.app-sidebar {
    transform: none;
    box-shadow: none;
}

/* Mobile: show hamburger, hide sidebar off-screen */
@media (max-width: 899px) {
    .menu-toggle {
        display: flex !important;
    }

    .app-main {
        margin-left: 0 !important;
    }

    .app-sidebar {
        transform: translateX(-110%) !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease !important;
        z-index: 300 !important;
    }

    .app-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 0 0 40px rgba(0,0,0,0.25) !important;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 250;
    }

    .sidebar-overlay.open {
        display: block !important;
    }

    /* Tables → mobile cards */
    .table-desktop {
        display: none !important;
    }

    .mobile-card-list {
        display: block !important;
    }

    /* Full-width buttons */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header__actions {
        justify-content: flex-start;
    }

    /* Stack grid-2 on mobile */
    .grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Desktop: sidebar always visible, hamburger hidden */
@media (min-width: 900px) {
    .menu-toggle {
        display: none !important;
    }

    .sidebar-overlay {
        display: none !important;
    }

    .app-sidebar {
        transform: none !important;
        box-shadow: none !important;
    }

    .app-main {
        margin-left: var(--sidebar-w) !important;
    }

    .table-desktop {
        display: block !important;
    }

    .mobile-card-list {
        display: none !important;
    }
}