/* ring2order dashboard: phone / tablet / touch layer (v3.37). Loaded after app.css.
   Three sizes everywhere: phone <= 600px, tablet 601-1024px (iPad), desktop above.
   Touch rules use (pointer: coarse), so a desktop with a mouse looks the same as before. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }              /* never a sideways page scroll; wide tables scroll inside their own box */
img, video, canvas { max-width: 100%; } /* Leaflet keeps its own (max-width: none !important) */

/* Wide tables scroll inside their box instead of pushing the page wider */
#recentOrdersTable, #ordersTable, #menuTable, #addressesTable, #ticketsTable, .tc-table {
    overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Long pop-ups scroll (before, a tall pop-up ran off the bottom with no way to reach it) */
.modal { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- Notch, rounded corners, home bar (viewport-fit=cover) ---------- */
.topbar { padding-left: max(1.25rem, env(safe-area-inset-left)); padding-right: max(1.25rem, env(safe-area-inset-right)); }
.main-content { padding-left: max(2rem, env(safe-area-inset-left)); padding-right: max(2rem, env(safe-area-inset-right)); padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.site-header-inner { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.auth-container { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.site-footer { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
.fl-sheet { bottom: calc(0.5rem + env(safe-area-inset-bottom)); }
.mi-save { padding-bottom: calc(0.9rem + env(safe-area-inset-bottom)); }

/* ---------- Tablet and phone (<= 1024px): top tabs + side menu as a swipe row ---------- */
@media (max-width: 1024px) {
    .topbar { padding-top: max(0.5rem, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .subnav-group { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .tb-tabs, .subnav { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .as-list { max-height: 45vh; max-height: 45dvh; }   /* support inbox: list above the open ticket */
}

/* ---------- Tablet only (601-1024px, iPad portrait + landscape) ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
    .main-content { padding: 1.25rem max(20px, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
    .content-section { padding: 1.5rem; }
}

/* ---------- Phone (<= 600px) ---------- */
@media (max-width: 600px) {
    .main-content { padding: 0.75rem max(12px, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .site-header-inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .content-section { padding: 1rem; border-radius: 8px; }
    .settings-section { padding: 1rem; }
    .header { padding: 0.75rem 1rem; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
    .header h1 { font-size: 1.35rem; }
    .hdr-right { width: 100%; justify-content: flex-start; }
    .av-picker, .av-picker select { max-width: 100%; }
    .auth-form { padding: 1.25rem; }
    .svc-box { padding: 1rem; }
    .stat-card { padding: 1rem; }
    .processing-content { padding: 1.5rem 1.25rem; }
    .sl-gate { padding: 1.5rem 1rem; margin: 1rem auto; }

    .table { font-size: 0.9rem; }
    .table th, .table td { padding: 0.55rem 0.5rem; }
    .table th { white-space: nowrap; }

    /* fixed widths that ran off small phones */
    .low-balance-actions select, .low-balance-actions .btn { min-width: 0; width: 100%; }
    .ob-tools { width: 100%; }
    .ob-tools input, .ob-tools select { min-width: 0; flex: 1 1 100%; }
    .rs-inline label { min-width: 0; }
    .rs-inline .rs-wide { min-width: 0; flex-basis: 100%; }
    .rs-unlock, .rs-unlock label, .rs-unlock input { width: 100%; }
    .sl-form input { max-width: none; }
    .wl-who { flex-basis: 100%; }
    .st-msg { max-width: 92%; }
    .on-fields .form-group { flex-basis: 100%; }
    #deliveryMapContainer > div { flex-direction: column; }
    #mapLegend { min-width: 0 !important; }
    #orderTypeBreakdown { min-width: 0 !important; }

    /* pop-ups become full-screen sheets */
    .modal-content, .modal-content.og-modal {
        width: 100% !important; max-width: none !important; margin: 0 !important;
        min-height: 100vh; min-height: 100dvh; max-height: none; border-radius: 0;
        padding: max(1rem, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }
    .og-footer-right { margin-left: 0; }
}

/* 16px text in fields: stops iPhone/iPad Safari from zooming in when a field is tapped */
@media (pointer: coarse), (max-width: 1024px) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea { font-size: 16px !important; }
}

/* ---------- Touch screens (phones, iPads, touch laptops) ---------- */
@media (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select { min-height: 44px; }
    :where(input[type=checkbox], input[type=radio]) { width: 1.25rem; height: 1.25rem; }

    /* finger-sized buttons and links (44px, Apple/Google guideline) */
    button:not(.tc-col, .pl-t, .mi-x, .mi-chip button, .rs-chip button), .btn, .tb-tab, .subnav a, .site-btn, .tb-logout { min-height: 44px; }
    .tb-logout, .site-btn { display: inline-flex; align-items: center; }
    .pl-switch button { display: inline-flex; align-items: center; }
    .voice-play { width: 44px; height: 44px; }
    .og-icon-btn { min-width: 44px; }
    .fl-close { min-width: 44px; }
    .close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    /* small "x" buttons keep their look but get a bigger invisible tap area */
    .mi-x, .mi-chip button, .rs-chip button { position: relative; }
    .mi-x::after, .mi-chip button::after, .rs-chip button::after { content: ''; position: absolute; inset: -12px -8px; }

    a, button, .btn, label, select, summary { touch-action: manipulation; }   /* no double-tap zoom delay */
    a, button, .btn, summary { -webkit-tap-highlight-color: rgba(18, 53, 107, 0.15); }
}

/* ---------- No hover on touch: hover lifts would stick after a tap ---------- */
@media (hover: none) {
    .ra-tile:hover, .fl-tile:hover { transform: none; box-shadow: none; }
    .stat-card.stat-go:hover { transform: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
    button.pl-t:hover:not(.pl-drag) { transform: translate(-50%, -50%); }
}