/**
 * PropertyZ — global responsive safety net.
 *
 * Loaded LAST on every dashboard page (via dashboardCss()) and on every public
 * page (via pmsw/header/header.php). It does not restyle anything on desktop; it
 * only fixes the two cross-cutting things that break on small screens:
 *
 *   1. Wide data tables — made horizontally scrollable INSIDE the page so they
 *      never stretch the whole layout wider than the phone screen.
 *   2. Fixed-count CSS grids (repeat(2/3/4,1fr), "1fr 1fr", …) — reflowed to fit.
 *      grid-template-columns is a no-op on any element that is not display:grid,
 *      so the broad class-pattern selectors below cannot affect non-grid boxes.
 *
 * Media elements are capped to their container width at every size (safe global).
 */

/* Media never forces horizontal overflow, on any screen. */
img, video, iframe, canvas, svg { max-width: 100%; }
img, video, iframe { height: auto; }
table { max-width: 100%; }

/* Form controls never exceed their container. In a flex row a button/input keeps
   its intrinsic width by default (min-width:auto) and pushes past the viewport —
   min-width:0 + wrapping labels prevent that on narrow screens. Applies to both
   the desktop shell (.main-content) and the mobile shell (.dashboard-content). */
.main-content input, .main-content select, .main-content textarea, .main-content button,
.dashboard-content input, .dashboard-content select, .dashboard-content textarea, .dashboard-content button {
    max-width: 100%;
    box-sizing: border-box;
}
.main-content button, .dashboard-content button { min-width: 0; white-space: normal; }
.dashboard-content { overflow-wrap: break-word; word-break: break-word; }

/* ── Tablets and phones ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Never let a page scroll sideways as a whole. */
    html, body { overflow-x: hidden; }

    /* Wide tables scroll within their own box instead of stretching the page. */
    .main-content table,
    .main-content-home table,
    .pm-main table,
    main table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-wrapper, .table-container, .table-responsive, .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Fixed multi-column grids reflow to as many columns as fit (min 150px).
       No effect on flex/block elements — grid-template-columns is ignored there. */
    .main-content   [class*="grid"],
    .main-content   [class*="stats"],
    .main-content   [class*="summary"],
    .main-content   [class*="kpi"],
    .main-content   [class*="cards"],
    .main-content-home [class*="grid"],
    .pm-main [class*="grid"],
    .dashboard-content [class*="grid"],
    .dashboard-content [class*="stats"],
    main [class*="grid"] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 10px;
    }

    /* Long unbreakable strings (emails, IDs, URLs) wrap instead of overflowing. */
    .main-content { overflow-wrap: break-word; word-break: break-word; }
}

/* Mobile sidebar. At ≤768px the horizontal-nav repositions to left:0 and becomes
   the mobile navigation (see *_horizontal_nav.css), so the fixed sidebar must get
   out of the way — otherwise it overlaps both that nav and the page content. Five
   role sidebars (superadmin/admin/ict/accountant/supervisor) never shipped a mobile
   rule; !important makes this win the cascade for every role, uniformly. */
@media (max-width: 768px) { .sidenav { display: none !important; } }

/* ── Phones ─────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Tightest widths: collapse every reflowed grid to a single column. */
    .main-content   [class*="grid"],
    .main-content   [class*="stats"],
    .main-content   [class*="summary"],
    .main-content   [class*="kpi"],
    .main-content   [class*="cards"],
    .main-content-home [class*="grid"],
    .pm-main [class*="grid"],
    main [class*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Trim heavy fixed paddings so content keeps usable width on small phones. */
    .main-content .card,
    .main-content .panel,
    .main-content .box { padding-left: 12px; padding-right: 12px; }
}