/* Mobile: max-width 768px */
@media (max-width: 768px) {
    #app {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: var(--app-h-inner, 100vh);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* When the on-screen keyboard is open, switch from the innerHeight-based
       sizing (which gives a slightly larger area, including the strip near
       the home indicator) to visualViewport-based, which is the only way to
       know the area above the keyboard on iOS standalone PWA. */
    body.keyboard-open #app {
        top: var(--app-top-vv, 0);
        height: var(--app-h-vv, 100vh);
    }

    pos-header {
        flex-shrink: 0;
        padding: 0.25rem 1rem;
        padding-top: calc(0.25rem + env(safe-area-inset-top));
    }

    pos-header h1 {
        font-size: 1.1rem;
    }

    pos-main {
        flex: 1;
        min-height: 0;
        height: auto;
        padding: 0.25rem;
        /* No safe-area-inset-bottom — that 34px home-indicator zone is too
           much wasted whitespace below the numpad. The numpad-container has
           its own minimal bottom padding for visual separation from the
           screen edge; iOS' translucent home indicator overlays gracefully. */
        padding-bottom: 0;
    }

    pos-main .layout {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    pos-main .layout > * {
        display: none;
    }

    pos-main .layout > pos-order {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    pos-main .layout > .pos-side {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 0;
        overflow: visible;
    }

    pos-main .pos-side > pos-articles {
        display: none;
    }

    pos-login {
        margin: 2rem auto;
    }

    .profile-name {
        display: none;
    }

    .profile-trigger {
        padding: 0.15rem;
    }

    /* Hide total on mobile — waiters don't need it */
    pos-order .order-footer {
        display: none !important;
    }

    /* Compact numpad on mobile */
    pos-order {
        padding: 0.5rem;
        padding-bottom: 0.25rem;
    }

    .numpad-container {
        padding: 0.4rem;
    }

    .numpad-label {
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
    }

    .numpad-display {
        margin-bottom: 0.4rem;
    }

    .numpad-input {
        padding: 0.4rem 0.5rem;
        font-size: 1rem;
    }

    .numpad-grid {
        gap: 0.3rem;
        margin-bottom: 0;
    }

    .numpad-btn {
        padding: 0.5rem;
        font-size: 1.1rem;
    }

    .numpad-grid.hidden {
        display: none;
    }

    /* When the on-screen keyboard is open, the home indicator is hidden,
       so safe-area padding only adds an unnecessary gap above the keyboard.
       Strip the bottom paddings so the input sits flush above the keyboard. */
    body.keyboard-open pos-main {
        padding-bottom: 0;
    }

    body.keyboard-open pos-order {
        padding-bottom: 0;
    }

    body.keyboard-open .numpad-container {
        padding: 0.4rem;
        margin-bottom: 8px;
    }

    body.keyboard-open .numpad-display {
        margin-bottom: 0;
    }

    /* In search mode keep order-items visible but shrunken — #app already
       resizes to visualViewport.height so the order-items flex:1 naturally
       gets a smaller area. Just strip the bottom paddings so the input sits
       flush above the keyboard. */
    pos-order:has(#numpad-input:focus) {
        padding-bottom: 0;
    }

    pos-main:has(#numpad-input:focus) {
        padding-bottom: 0;
    }

    pos-numpad:has(#numpad-input:focus) .numpad-container {
        padding: 0.4rem;
        margin-bottom: 8px;
    }

    pos-numpad:has(#numpad-input:focus) .numpad-display {
        margin-bottom: 0;
    }

}