/* ============================================================================
   Global responsive guardrails — applied app-wide (public site + admin panel).

   Bootstrap 5 already provides the responsive grid (col-*, row g-*, table-responsive,
   offcanvas, container). These rules add the safety net the spec requires WITHOUT
   rewriting every page: no horizontal scroll, fluid media, touch-friendly controls,
   and mobile-friendly tables / modals / filters / sidebar. Selectors are deliberately
   low-specificity (elements + Bootstrap utility classes) so component layouts still win.
   Prefers flexbox/grid + max-width/min()/clamp(); avoids fixed pixel widths.
   ============================================================================ */

/* ── No horizontal scrolling anywhere ──────────────────────────────────────────
   `overflow-x: clip` prevents sideways scroll WITHOUT creating a scroll container,
   so position:sticky headers keep working (unlike overflow-x:hidden). */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* ── Fluid media — images/video/svg/iframe never overflow their container ─────── */
img, svg, video, canvas, iframe, embed, object, picture {
    max-width: 100%;
}
img:not([width]):not([height]) { height: auto; }

/* ── Long words / URLs must not blow out the layout ───────────────────────────── */
p, li, dd, dt, td, th, .badge, .breadcrumb-item, .alert, figcaption { overflow-wrap: anywhere; }
pre, code, kbd, samp { white-space: pre-wrap; overflow-wrap: anywhere; }

/* (Note: Bootstrap's .container already caps at the viewport via its responsive max-widths
   and is centred with auto margins — do NOT override its max-width, or the side gutters
   collapse and content sticks to the screen edges.) */

/* ── Tables: keep columns intact and scroll horizontally inside the wrapper ────── */
.table-responsive { -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
    .table { font-size: 0.86rem; }
    .table th, .table td { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ── Touch-friendly controls (≥44px targets) on phones/tablets ────────────────── */
@media (max-width: 991.98px) {
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
    .btn-sm { min-height: 38px; }
    .form-control, .form-select { min-height: 44px; }
    .form-control-sm, .form-select-sm { min-height: 38px; }
    .form-check-input { width: 1.15em; height: 1.15em; }
}

/* ── Forms: stack to a single column on phones even if a row used non-responsive cols ── */
@media (max-width: 575.98px) {
    .row > .col, .row > [class*="col-"]:not([class*="col-12"]) { /* Bootstrap's col-* already collapse; no-op safeguard */ }
    .input-group { flex-wrap: nowrap; }
    .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; }
}

/* ── Modals: nearly full-screen + scrollable on phones (centered on desktop) ───── */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-content { max-height: calc(100dvh - 1rem); overflow: auto; }
    /* Project custom modal cards (e.g. SMS Logs / registration popups) */
    .modal-card-mts { max-width: calc(100vw - 1rem) !important; max-height: calc(100dvh - 1rem); }
}

/* ── Offcanvas (mobile sidebar / filter panels) never wider than the screen ────── */
.offcanvas-start, .offcanvas-end { max-width: 92vw; }

/* ── Charts / canvases fill their column and never clip ───────────────────────── */
canvas { max-width: 100%; }

/* ── Responsive heading scale (gentle clamp where a component hasn't set its own) ── */
.admin-panel-title { font-size: clamp(1rem, 2.4vw, 1.2rem); }
@media (max-width: 575.98px) {
    h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
    h2 { font-size: clamp(1.3rem, 6vw, 1.7rem); }
    h3 { font-size: clamp(1.1rem, 5vw, 1.4rem); }
}

/* ── Reduced motion: respect the user's preference globally ───────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}