/* Global mobile safeguards.
   Loaded after component CSS in _base_dashboard.html so these rules
   act as last-resort caps without rewriting every dashboard. */

/* iOS dynamic viewport: prevent 100vh content from being clipped
   by the address bar. Only applied where the dashboard already sets
   100vh — this extends it with the dvh fallback. */
@supports (height: 100dvh) {
    .dashboard-container,
    .dashboard-layout,
    .pulse-shell,
    .map-fullscreen {
        min-height: 100dvh;
    }
}

/* ---- Modals: never wider/taller than the viewport ---- */
.modal,
.modal-dialog,
.modal-content,
[class*="modal-dialog"] {
    max-width: min(95vw, var(--modal-max-width, 1200px));
}

@media (max-width: 640px) {
    .modal,
    .modal-dialog,
    .modal-content,
    [class*="modal-dialog"] {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh;
        max-height: 90dvh;
        margin: 16px auto;
    }
    .modal-body {
        overflow-y: auto;
    }
}

/* ---- Touch targets: buttons and links should be at least 44×44 ---- */
@media (max-width: 768px) and (pointer: coarse) {
    button:not(.nav-sidebar-toggle):not(.close-btn):not(.icon-btn-sm):not(.panel-hide-btn),
    .btn,
    a.btn,
    input[type="button"],
    input[type="submit"],
    .footer-dashboard-link {
        min-height: 44px;
    }
}

/* ---- Tables: force horizontal scroll if author forgot a wrapper ---- */
@media (max-width: 768px) {
    .content-area table,
    .dashboard-main table:not(.no-mobile-scroll),
    .widget-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ---- Prevent horizontal page scroll from rogue wide children ---- */
@media (max-width: 640px) {
    body {
        overflow-x: hidden;
    }
    img, video, canvas, iframe {
        max-width: 100%;
        height: auto;
    }
}

/* ---- Leaflet/MapLibre popups: cap width on narrow screens ---- */
@media (max-width: 640px) {
    .leaflet-popup-content-wrapper,
    .leaflet-popup-content,
    .maplibregl-popup-content {
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
    }
}

/* ---- Nav sidebar: never take more than 85vw when opened on mobile ---- */
@media (max-width: 640px) {
    .nav-sidebar.mobile-open,
    .dashboard-sidebar-left.mobile-open,
    .dashboard-sidebar-right.mobile-open {
        max-width: 85vw;
    }
}

/* ---- Widget grid: fall back to one column on very narrow devices.
   Only affects grids that use the `widget-grid` contract; other
   layouts keep their explicit columns. */
@media (max-width: 480px) {
    .widget-grid,
    .widgets-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Minimum readable font size for body copy on mobile ---- */
@media (max-width: 480px) {
    .widget-content,
    .card-body,
    .dashboard-main p,
    .dashboard-main li {
        font-size: max(13px, 0.85rem);
    }
}