/* Mobile-First Responsive Styles for SnapOrderPOS */
/* These styles optimize the UI for phones (< 640px), tablets (640px-1024px), and desktops (> 1024px) */

/* =====================================================
   PHONE BREAKPOINT (max-width: 640px)
   Focus: Stacked layouts, large touch targets, single-column
   ===================================================== */

@media (max-width: 640px) {
    /* Global */
    html, body {
        font-size: 14px;
    }

    .container, .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Portal (Role Selection) */
    .portal-container {
        padding: 20px 12px;
    }

    .portal-header h1 {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .portal-header .tagline {
        font-size: 1rem;
    }

    .roles-container {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .role-card {
        padding: 16px;
        border-radius: 8px;
    }

    .role-icon {
        font-size: 2.5rem;
        margin-bottom: 8px;
    }

    .role-title {
        font-size: 1.1rem;
        font-weight: 600;
    }

    /* Login & PIN */
    .login-container {
        padding: 20px;
        max-width: 100%;
    }

    .login-card {
        border-radius: 12px;
        padding: 24px 16px;
    }

    .login-card h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    #pinInput {
        font-size: 1.25rem;
        letter-spacing: 0.5em;
        height: 48px;
    }

    .pin-pad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-top: 20px;
    }

    .pin-button {
        min-height: 56px;
        font-size: 1.25rem;
        font-weight: bold;
        border-radius: 8px;
        touch-action: manipulation;
    }

    .pin-button:active {
        transform: scale(0.95);
    }

    .login-button {
        width: 100%;
        height: 56px;
        font-size: 1rem;
        margin-top: 16px;
    }

    /* Dashboard Navigation */
    .top-nav {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nav-item {
        font-size: 12px;
        padding: 6px 0;
        min-width: 60px;
    }

    /* Main Container - Convert to Single Column */
    .main-container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .left-panel {
        min-height: 60vh;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .right-panel {
        flex: 1;
        min-height: 40vh;
    }

    /* Menu/Item Grid */
    .item-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .item-card {
        padding: 8px;
        min-height: 140px;
    }

    .item-card img {
        height: 70px;
    }

    .item-card .item-name {
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .item-card .item-price {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    /* Table Grid */
    .table-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .table-card {
        padding: 12px;
        font-size: 0.9rem;
        min-height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Cart/Order Summary - Full Width Overlay */
    .cart-sidebar {
        position: fixed;
        width: 100%;
        max-height: 50vh;
        bottom: 0;
        right: auto;
        top: auto;
        border-left: none;
        border-top: 1px solid #ddd;
        z-index: 1100;
        transform: translateY(100%);
    }

    .cart-sidebar.active {
        transform: translateY(0);
    }

    .cart-header {
        padding: 12px;
        position: sticky;
        top: 0;
        background: white;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart-items {
        max-height: 30vh;
        overflow-y: auto;
    }

    .cart-footer {
        padding: 12px;
        background: white;
        border-top: 1px solid #ddd;
    }

    /* KOT Cards */
    .kot-card {
        padding: 12px;
        margin-bottom: 8px;
        border-left-width: 3px;
    }

    .kot-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 8px;
        font-size: 0.95rem;
    }

    .kot-items {
        margin-bottom: 8px;
    }

    .kot-item {
        font-size: 0.85rem;
        padding: 4px 0;
    }

    .kot-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .kot-button {
        padding: 8px 12px;
        font-size: 0.85rem;
        min-height: 44px;
    }

    /* Buttons - Minimum Touch Target */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.95rem;
        border-radius: 6px;
    }

    .btn-sm {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .btn-lg {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 1rem;
    }

    /* Forms - Full Width */
    .form-group,
    .form-control-wrapper {
        margin-bottom: 12px;
    }

    .form-control,
    .form-select {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 1rem;
    }

    label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    /* Modals - Full Screen on Mobile */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
    }

    .modal-content {
        border-radius: 12px 12px 0 0;
        max-height: 90vh;
    }

    .modal-header {
        padding: 12px 16px;
    }

    .modal-body {
        padding: 12px 16px;
        overflow-y: auto;
    }

    .modal-footer {
        padding: 12px 16px;
        gap: 8px;
    }

    /* Tables - Responsive Collapse */
    table {
        font-size: 0.85rem;
    }

    th, td {
        padding: 8px 6px;
    }

    /* Cards */
    .card {
        margin-bottom: 12px;
        border-radius: 8px;
    }

    .card-body {
        padding: 12px;
    }

    .card-header {
        padding: 12px;
    }

    /* Dropdowns & Toggles */
    .dropdown-menu {
        font-size: 0.95rem;
        min-width: 150px;
    }

    .dropdown-item {
        padding: 10px 16px;
    }

    /* Action Tiles */
    .action-tile .display-4 {
        font-size: 1.75rem;
    }

    .action-tile .card-body {
        padding: 12px 8px;
    }

    /* Spacers */
    .p-3 { padding: 12px !important; }
    .p-4 { padding: 16px !important; }
    .mt-4 { margin-top: 12px !important; }
    .mb-4 { margin-bottom: 12px !important; }
    .gap-3 { gap: 12px !important; }

    /* Hide desktop-specific elements */
    .desktop-only {
        display: none;
    }

    /* Show mobile-specific elements */
    .mobile-only {
        display: block !important;
    }

    /* Mobile Navigation Toggle */
    .mobile-nav-toggle {
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 8px 12px;
    }

    /* Navbar adjustment for mobile */
    .navbar-collapse {
        background: white;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        border-bottom: 1px solid #ddd;
        padding: 12px;
    }

    /* Text sizes */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }
    h6 { font-size: 0.9rem; }
}

/* =====================================================
   TABLET BREAKPOINT (641px - 1024px)
   Focus: Two-column layouts, balanced spacing
   ===================================================== */

@media (min-width: 641px) and (max-width: 1024px) {
    .item-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .table-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .main-container {
        flex-direction: row;
    }

    .left-panel {
        flex: 1;
        min-height: auto;
        border-right: 1px solid #e5e7eb;
        border-bottom: none;
    }

    .right-panel {
        width: 320px;
        border-left: 1px solid #e5e7eb;
    }

    .cart-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        transform: none;
        border-left: none;
        border-top: none;
        z-index: auto;
    }

    .roles-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pin pad remains 3x4 */
    .pin-pad {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================
   DESKTOP BREAKPOINT (> 1024px)
   Focus: Multi-column layouts, optimized for larger screens
   ===================================================== */

@media (min-width: 1025px) {
    .item-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .table-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }

    .main-container {
        flex-direction: row;
    }

    .left-panel {
        flex: 1;
        border-right: 1px solid #e5e7eb;
    }

    .right-panel {
        width: 350px;
        min-height: 100vh;
        border-left: 1px solid #e5e7eb;
    }

    .cart-sidebar {
        position: relative;
        width: 100%;
        height: 100vh;
        transform: none;
        border-left: 1px solid #ddd;
        border-top: none;
        z-index: auto;
    }

    .roles-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    /* Desktop buttons larger */
    .btn {
        min-height: auto;
        padding: 0.5rem 1rem;
    }

    .mobile-only {
        display: none !important;
    }

    .desktop-only {
        display: block;
    }
}

/* =====================================================
   ORIENTATION FIXES
   ===================================================== */

@media (orientation: landscape) and (max-height: 500px) {
    /* Reduce padding/margins on small landscape screens */
    html, body {
        font-size: 12px;
    }

    .portal-header {
        margin-bottom: 20px;
    }

    .portal-header h1 {
        font-size: 1.5rem;
    }

    .roles-container {
        gap: 8px;
    }

    .role-card {
        padding: 8px;
    }

    .btn {
        min-height: 40px;
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

/* =====================================================
   ACCESSIBILITY & TOUCH OPTIMIZATION
   ===================================================== */

/* Ensure minimum touch target sizes (44x44 pixels) */
button, a.btn, .btn, input[type="button"], input[type="submit"] {
    min-width: 44px;
    min-height: 44px;
    line-height: 1.5;
}

/* Better focus states for keyboard navigation */
button:focus-visible,
a:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}

/* Reduce motion for animations */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================
   LANDSCAPE MODE FIXES
   ===================================================== */

@media (max-width: 640px) and (orientation: landscape) {
    .cart-sidebar {
        max-height: 80vh;
    }

    .portal-header {
        margin-bottom: 20px;
    }

    .portal-header h1 {
        font-size: 1.5rem;
    }
}

/* =====================================================
   SAFE AREA SUPPORT (Notch & Rounded Corners)
   ===================================================== */

@supports (padding: max(0px)) {
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .top-nav {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    .cart-sidebar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
}