/**
 * Mobile safety net: applied on top of the existing app.css.
 * Only active at <= 768px so desktop styling is never affected.
 *
 * Purpose: prevent common layout catastrophes on small screens without
 * touching the 70+ individual Blade views. Any per-page responsive work
 * goes into the view's own Tailwind classes, not here.
 */

/* Global: no horizontal overflow anywhere. */
html, body { overflow-x: hidden; }

/* Mobile-only rules. */
@media (max-width: 768px) {

    /* Ensure touch targets are at least 44x44 (Apple HIG) for obvious interactives. */
    button, a.btn, input[type="submit"], input[type="button"] {
        min-height: 40px;
    }

    /* Tables overflow as horizontal scroll instead of pushing layout wider.
       Any <table> inside a .table-responsive (or plain) gets this treatment. */
    .table-responsive,
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Rendering hint: prevent the browser from fattening text on touch devices. */
    body { -webkit-text-size-adjust: 100%; }

    /* Any element that accidentally went wider than the viewport gets clipped to it. */
    img, video, iframe { max-width: 100%; height: auto; }

    /* Preserve vertical spacing when the PWA install banner is visible. */
    body.ec-install-prompt-visible { padding-bottom: 92px; }
}

/* When running as installed PWA, extend background to the status bar area. */
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top, 0); }
    .sticky.top-0 { top: env(safe-area-inset-top, 0); }
}