/* ===== MOBILE LAYOUT - Full responsive for phones ===== */

@media (max-width: 768px) {
    /* Sidebar: hidden, slides from left */
    #sidebar {
        position: fixed !important;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px !important;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: none;
    }
    #sidebar.mobile-open {
        left: 0;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    }
    #sidebar .sidebar-header h2,
    #sidebar .nav-links li a span,
    #sidebar .sidebar-footer .user-info,
    #sidebar .sidebar-footer .btn span {
        display: inline !important;
    }

    /* Content: full width */
    #content {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 56px !important;
    }

    /* Mobile header bar */
    #mobileHeader {
        display: flex !important;
    }

    /* Overlay */
    .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 999; }
    .mobile-overlay.show { display: block; }

    /* Page headers */
    .page-header {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    .page-header h1 { font-size: 1.2em !important; }
    .page-header > div { flex-wrap: wrap; gap: 6px !important; }

    /* Grids */
    .grid-2 { grid-template-columns: 1fr !important; }
    .grid-4, .stat-grid { grid-template-columns: 1fr 1fr !important; }
    .menu-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

    /* Tables */
    .data-table { font-size: 0.75em; display: block; overflow-x: auto; }
    .data-table th, .data-table td { padding: 8px 6px; white-space: nowrap; }

    /* Modals */
    .modal-content { width: 95% !important; max-height: 85vh; margin: 8vh auto !important; overflow-y: auto; }
    .modal-content .grid-2 { grid-template-columns: 1fr !important; }

    /* Buttons */
    .btn { font-size: 0.8em; padding: 10px 14px; }
    .btn-sm { font-size: 0.7em; padding: 6px 10px; }

    /* Filters row */
    .filters { flex-wrap: wrap !important; gap: 6px !important; }
    .filter-btn { font-size: 0.75em !important; padding: 6px 12px !important; }

    /* Menu cards */
    .menu-card { padding: 12px !important; }
    .menu-card .item-name { font-size: 0.9em; }

    /* Staff list */
    [style*="display:flex;flex-direction:column;gap:10px"] > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }

    /* KPI Cards in reports */
    [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    [style*="grid-template-columns:repeat(5"] { grid-template-columns: 1fr 1fr !important; }

    /* Billing panel: stack vertically */
    [style*="grid-template-columns:380px 1fr"] {
        grid-template-columns: 1fr !important;
        height: auto !important;
        position: static !important;
        inset: auto !important;
        left: auto !important;
    }

    /* Orders panel: stack vertically */
    [style*="grid-template-columns:320px 1fr"] {
        grid-template-columns: 1fr !important;
        position: static !important;
        height: auto !important;
        padding: 8px !important;
        inset: auto !important;
        left: auto !important;
    }

    /* Kitchen panel */
    [style*="position:fixed"][style*="left:260px"] {
        left: 0 !important;
    }

    /* Cards padding */
    [style*="padding:24px"] { padding: 12px !important; }
    [style*="padding:20px"] { padding: 12px !important; }

    /* Tabs - scroll horizontal */
    [style*="display:flex;gap:8px;margin-bottom:20px"] {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 8px;
    }

    /* Table status grid */
    [style*="grid-template-columns:repeat(auto-fill"] {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    /* Input fields */
    input, select, textarea { font-size: 16px !important; } /* Prevents zoom on iOS */

    /* Scrollable tables */
    table { display: block; overflow-x: auto; white-space: nowrap; }
    thead, tbody, tr { display: table; width: 100%; table-layout: fixed; }
}

@media (max-width: 480px) {
    .grid-4, .stat-grid { grid-template-columns: 1fr !important; }
    .menu-grid { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns:repeat(auto-fill"] {
        grid-template-columns: 1fr 1fr !important;
    }
    .page-header h1 { font-size: 1.1em !important; }
}