/* ============================================================
   MOBILE FIXES — global responsive corrections
   Loaded after style.css in every layout.
   Scope: fixes iOS auto-zoom, horizontal overflow, dashboard
   tools grid, and data tables on small screens.
   ============================================================ */

/* ------------------------------------------------------------
   1. STOP iOS AUTO-ZOOM ON INPUT FOCUS
   iOS Safari zooms in (and won't zoom back out) whenever a
   focused input/select/textarea has font-size < 16px.
   Forcing 16px on small screens removes the zoom without
   changing the visual design noticeably.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------------------
   2. PREVENT HORIZONTAL OVERFLOW (header / decor going off-screen)
   Stray absolutely-positioned decorations and wide elements can
   push the page wider than the viewport, causing the sideways
   scroll / "header goes off screen" effect.
   ------------------------------------------------------------ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* ------------------------------------------------------------
   3. LOGIN / SIGNUP — tame decorative floating elements on mobile
   The aurora blobs and floating tool "pills" are positioned
   absolutely for large screens; on phones they spill out and
   overlap the form / logo. Hide the purely-decorative ones.
   These selectors are scoped to the auth pages via body class
   if present, else fall back to hiding large blurred blobs.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    /* floating tool badges + aurora blobs (decorative only) */
    .usg-chip,
    .ulg-chip,
    [style*="ulg-floaty"],
    [style*="ulg-aurora"],
    [style*="usgFloaty"],
    [style*="usgAurora"] {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   4. DASHBOARD TOOLS GRID — make grid-cols-4 responsive
   tools.view.php uses a fixed 4-column grid; collapse it down
   on smaller screens so cards are not crushed.
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
    .grid.grid-cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 860px) {
    .grid.grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .grid.grid-cols-4 { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   5. DATA TABLES — allow horizontal scroll instead of clipping
   payment.view.php / account tables have overflow:hidden on the
   card, which clips wide tables on mobile. Let the table area
   scroll sideways so all columns stay reachable.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .ph-card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .ph-table {
        min-width: 640px; /* keep columns readable; card scrolls */
    }
}

/* ------------------------------------------------------------
   6. GENERIC SAFETY — media/images never exceed their container
   ------------------------------------------------------------ */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}