/* ==========================================================================
   mobile.css — Cross-cutting touch & responsive overrides
   Component-level breakpoints live in hud.css, toolbar.css, panels.css,
   modals.css, etc.  This file handles:
     • Canvas touch-action to suppress browser pan/zoom interference
     • Global tap-highlight suppression
     • Touch-friendly minimum tap targets for any element not covered elsewhere
     • Pointer-coarse (touch device) refinements
     • Landscape-phone viewport height adjustments
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Canvas — let our JS handle all touch gestures; suppress browser defaults
   --------------------------------------------------------------------------- */
#game-container canvas {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   Suppress webkit tap highlight on all interactive elements
   --------------------------------------------------------------------------- */
button,
[role="button"],
.toolbar-card,
.toolbar-tab,
.hud-btn,
.hud-action-btn,
.hud-end-shift,
.hud-speed-btn,
.hud-compass,
.panel-action-btn,
.modal-close,
.side-panel-close,
.pause-menu-btn,
.pause-slot,
.mobile-placement-btn {
    -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   Pointer: coarse (touch screen) — ensure 44 × 44 px minimum tap targets
   for any interactive element that doesn't already enforce them
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    /* Toolbar category tabs */
    .toolbar-tab {
        min-height: 44px;
    }

    /* HUD icon buttons */
    .hud-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Pause / save slot rows */
    .pause-slot {
        min-height: 48px;
    }

    /* Modal choice buttons */
    .modal-choice {
        min-height: 52px;
    }

    /* Confirm dialog buttons */
    .confirm-dialog-buttons button {
        min-height: 44px;
        padding: 10px 24px;
    }

    /* Range sliders — bigger thumb hit area on touch */
    input[type="range"] {
        height: 24px;
    }

    input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }
}

/* ---------------------------------------------------------------------------
   Tablet (≤ 1024px, coarse pointer) — side panels narrower, modals contained
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) and (pointer: coarse) {
    .side-panel {
        width: min(420px, 92vw);
    }

    .modal {
        max-width: 92vw;
    }

    /* Prevent hover transforms that feel wrong on touch */
    .toolbar-card:hover {
        transform: none;
    }

    .hud-btn:hover {
        background: var(--surface);
        color: var(--text-secondary);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .hud-action-btn:hover {
        background: transparent;
        color: var(--text-secondary);
        border-color: transparent;
    }

    .pause-menu-btn:hover {
        border-color: var(--dark-light, rgba(255,255,255,0.1));
        background: var(--dark, #111);
        padding-left: 16px;
    }
}

/* ---------------------------------------------------------------------------
   Tablet breakpoint (≤ 768px) — compact modals, panels full-width fallback
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Full-screen screens (customer, orders, staff, etc.) */
    .fullscreen-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
    }

    /* ERP overlay on tablet */
    #erp-overlay {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0;
    }
}

/* ---------------------------------------------------------------------------
   Phone breakpoint (≤ 767px)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Prevent body scroll bounce on iOS when panels/modals are open */
    body.panel-open,
    body.modal-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* ERP overlay — full screen */
    #erp-overlay {
        position: fixed;
        inset: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0;
        z-index: var(--z-overlay, 400);
    }

    /* Toast notifications — avoid HUD overlap */
    #toast-container {
        top: calc(var(--hud-height, 84px) + 8px + var(--safe-top, 0px));
        bottom: auto;
    }

    /* Help modal keyboard shortcut section — hide on mobile (touch controls differ) */
    .help-section.keyboard-shortcuts {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Landscape phone (short viewport, ≤ 500px tall)
   --------------------------------------------------------------------------- */
@media (max-height: 500px) and (max-width: 1024px) {
    /* Modals in landscape phone — scrollable, not full-screen */
    .modal-overlay {
        align-items: flex-start;
        padding-top: 8px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal {
        max-height: calc(100vh - 16px);
    }

    /* Pause menu — compact vertical padding */
    .pause-menu {
        padding: 14px 18px;
    }

    .pause-title {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .pause-menu-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    .pause-slot-list {
        max-height: 200px;
    }
}