/*
 * Shared responsive primitives for the hand-styled sections (Care, the public
 * pages and the Family Register). Loaded from templates/base.html.twig, which
 * Sonata does NOT extend — the admin keeps its own AdminLTE theme untouched, and
 * this file must never be pulled into assets/styles/app.css for that reason.
 *
 * The /app Individual section is not affected either: it extends
 * templates/frontend/base.html.twig and is built with Tailwind.
 *
 * Deliberately layout-only (widths, wrapping, overflow, touch targets). Colour
 * and component styling stay where they are today, in each section's own <style>
 * block, so nothing is restyled by surprise.
 */

:root {
    /* The usable page column. Sections override --page-max for their own content:
       data-dense screens go wide, reading screens stay narrow on purpose. */
    --page-max: 1600px;
    --page-gutter: 1rem;
    --page-width: min(100% - (var(--page-gutter) * 2), var(--page-max));
}

/* NOTE: deliberately NO `overflow-x: hidden` on html/body. It looks like a cheap
   fix for sideways scrolling, but it turns the viewport into the scrollport for
   `position: sticky` descendants and silently stops them sticking — which would
   break the Care client sidebar and the form-builder preview pane. Wide content
   is made to scroll inside its own box instead (see below). */
html { -webkit-text-size-adjust: 100%; }

/* Media should shrink rather than force the page wide. */
img, svg, video, canvas, iframe, table { max-width: 100%; }

/* ---------------------------------------------------------------------------
 * Intrinsic layouts — these reflow by themselves, so they need no breakpoints.
 * ------------------------------------------------------------------------- */

/* Dashboard/report tiles: as many columns as fit, never narrower than ~13rem. */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Key/value description lists collapse to one column when there is no room for
   the label gutter. */
@media (max-width: 640px) {
    dl.kv { grid-template-columns: 1fr; }
    dl.kv dt { margin-top: 8px; font-weight: 600; }
}

/* Filter bars and button rows wrap instead of overflowing. */
.filterbar, .filterbar .actions { flex-wrap: wrap; }
.filterbar .actions { margin-left: auto; }

/* Any control given a min-width for the desktop layout must still fit a phone. */
.filterbar input, .filterbar select, .filterbar .f { max-width: 100%; }
@media (max-width: 640px) {
    .filterbar .f { flex: 1 1 100%; }
    .filterbar .actions { margin-left: 0; width: 100%; }
    .filterbar .actions .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
 * Wide content scrolls inside its own container, not the page.
 * ------------------------------------------------------------------------- */

/* Data tables are the main offender. Scope the scroll to cards that actually
   contain one: setting overflow-x also computes overflow-y to auto, which would
   clip decorative elements that intentionally sit outside their box (the Family
   timeline dots at left:-5px, for example). */
.card:has(table.t) { overflow-x: auto; }

/* Give those tables a sane floor so columns do not crush into unreadable slivers
   before the scroll kicks in. Scoped the same way, so a table in a card without
   the scroll container can never force the page wide. */
.card:has(table.t) table.t { min-width: 32rem; }

/* ---------------------------------------------------------------------------
 * Touch targets — these pages are used on mid-range Android handsets.
 * ------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .btn, button, input[type=submit], select { min-height: 40px; }
    table.t td a { display: inline-block; padding-block: 4px; }
}

/* Respect a reduced-motion preference for the smooth in-page scrolling that the
   client profile turns on. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
}