/* =====================================================================
   GovLink – mobile safety net
   Loaded LAST on every layout and public page. It keeps cards, tiles,
   badges, tables and images inside the screen on any device:
     • long words (emails, references, kina amounts, program names) wrap
       inside their card instead of pushing it past the screen
     • flex / grid children may shrink below their content width
     • images and media never exceed their container
     • tables scroll sideways inside their card (see mobile.js)
   Low-specificity :where() rules so each page's own CSS still wins.
   ===================================================================== */

/* ---------- never scroll the whole page sideways ---------- */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* ---------- text wraps inside its box ---------- */
/* break-word everywhere; on phones/tablets long words (emails, references, kina amounts) may break anywhere,
   which also lets every flex/grid item shrink to the screen while icons, images and buttons keep their size. */
@media (max-width: 991.98px) {
    body, :is(body, .gl-app) :is(.card, .toast-body, .tooltip, .popover) { overflow-wrap: anywhere; }
    /* buttons, nav links and form labels keep whole words (they wrap between words, never inside one) */
    :is(body, .gl-app) :is(.btn, .nav-link, .dropdown-item, .form-check-label, .page-link) { overflow-wrap: break-word; }
    /* table cells keep whole words – the table scrolls inside its card instead of squashing text */
    :where(table) { overflow-wrap: break-word; }
    /* bars, rings and icons keep their own size */
    :where(i[class*="fa-"], .form-check-input, .btn-close, [class*="spinner-"]) { flex-shrink: 0; }
}

/* ---------- flex / grid children can shrink ---------- */
:where(.min-w-0) { min-width: 0 !important; }

/* ---------- media scale with the card ---------- */
:where(img, picture, video, iframe, embed, object, svg) { max-width: 100%; }
:where(img:not([height]), video:not([height])) { height: auto; }
:where(.card-img, .card-img-top, .card-img-bottom) { width: 100%; object-fit: cover; }
:where(iframe) { border: 0; }

/* ---------- badges / pills wrap rather than overflow ---------- */
@media (max-width: 991.98px) {
    :is(body, .gl-app) .badge { white-space: normal; max-width: 100%; text-align: start; line-height: 1.25; }
}

/* ---------- tables ---------- */
:where(.table-responsive, .gl-table-scroll) { -webkit-overflow-scrolling: touch; max-width: 100%; }
.gl-table-scroll { overflow-x: auto; width: 100%; }
.gl-table-scroll > table { margin-bottom: 0; }

/* ---------- forms ---------- */
:where(input, select, textarea, .form-control, .form-select) { max-width: 100%; }
:where(pre, code, kbd) { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- small screens ---------- */
@media (max-width: 767.98px) {
    /* comfortable side gutters and no edge-to-edge overflow */
    :where(.container, .container-fluid, .gl-container) { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }

    /* headings scale with the screen */
    :where(h1, .h1) { font-size: clamp(1.35rem, 5.6vw, 2rem); }
    :where(h2, .h2) { font-size: clamp(1.2rem, 4.8vw, 1.6rem); }
    :where(h3, .h3) { font-size: clamp(1.08rem, 4.2vw, 1.35rem); }
    :where(.display-1, .display-2, .display-3, .display-4, .display-5, .display-6) { font-size: clamp(1.6rem, 8vw, 2.6rem); }
    :where(.fs-1) { font-size: clamp(1.5rem, 7vw, 2.4rem) !important; }
    :where(.fs-2) { font-size: clamp(1.3rem, 6vw, 2rem) !important; }
    :where(.fs-3) { font-size: clamp(1.15rem, 5vw, 1.6rem) !important; }

    /* card padding a little tighter */
    :where(.card-body) { padding: .9rem; }
    :where(.card-header, .card-footer) { padding: .65rem .9rem; }

    /* rows of buttons wrap onto the next line */
    :where(.btn-toolbar, .card-header.d-flex, .card-footer.d-flex, .modal-footer) { flex-wrap: wrap; gap: .4rem; }
    :where(.btn-group:not(.btn-group-vertical)) { flex-wrap: wrap; }

    /* definition lists stack */
    :where(dl.row) > :where(dt, dd) { width: 100%; }

    /* nav tabs / pills scroll sideways instead of overflowing */
    :where(.nav-tabs, .nav-pills):not(.flex-column) { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    :where(.nav-tabs, .nav-pills):not(.flex-column)::-webkit-scrollbar { display: none; }
    :where(.nav-tabs, .nav-pills):not(.flex-column) > :where(.nav-item, .nav-link) { flex-shrink: 0; white-space: nowrap; }

    /* modals use the full width */
    :where(.modal-dialog) { margin: .5rem; }

    /* charts never wider than the card */
    :where(canvas) { max-width: 100% !important; }

    /* DataTables controls */
    :where(.dataTable-top, .dataTable-bottom, .dataTables_wrapper .row) { display: flex; flex-wrap: wrap; gap: .5rem; }
    :where(.dataTable-input, .dataTables_filter input) { max-width: 100%; }
}

@media (max-width: 400px) {
    :where(.card-body) { padding: .75rem; }
    :where(.btn) { --bs-btn-padding-x: .7rem; }
}

/* =====================================================================
   Area fixes – stat tiles, chips, lists and detail grids
   ===================================================================== */
@media (max-width: 767.98px) {
    /* stat / KPI tiles: values wrap and scale instead of being cut off with "…" */
    .ap .ap-kpi b, .ap .ap-kpi span,
    .sme .sme-kpi b, .sme .sme-hero-stats b,
    .ld .ld-mini b, .pp .pp-hero .pp-hero-stat .v {
        white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15;
    }
    .ap .ap-kpi b, .sme .sme-kpi b, .sme .sme-hero-stats b { font-size: clamp(1rem, 4.6vw, 1.35rem); }
    .pp .pp-hero .pp-hero-stat .v { font-size: clamp(1.3rem, 6vw, 2rem); }
    .ld .ld-dash-main .big { font-size: clamp(1.7rem, 8vw, 2.6rem); overflow-wrap: anywhere; }
    .ld .ld-facts b { font-size: clamp(1.2rem, 6vw, 1.7rem); overflow-wrap: anywhere; }

    /* list titles: show the whole name on phones (two lines are better than "…") */
    .ap .ap-list-main b, .sme .sme-list-main a, .sme .sme-list-main b, .pa .pa-doc-name,
    .gl-app .text-truncate:not(.gl-keep-truncate) {
        white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    }
    .ap .ap-clamp, .ap .ap-feed-body p, .do .do-feed-text { -webkit-line-clamp: 4; }

    /* chips / pills / small labels may wrap */
    :is(body, .gl-app) :is(.wp-chip, .cm-pill, .lo-pill, .pp-pill, .bd-pill, .inf-pill, .pa-chip, .ap-type, .ap-due, .ap-link, .sme-btn-soft, .ap-chip, .sme-chip),
    .sme .sme-reminders a {
        white-space: normal;
    }
    .ap .ap-due { margin-left: 0; }

    /* label / value detail lists stack */
    .pp dl.pp-dl, .wp dl.wp-dl, .bd dl.bd-dl, .inf dl.inf-dl, .cm dl.cm-dl, .lo dl.lo-dl { grid-template-columns: 1fr; gap: .1rem; }
    .pp dl.pp-dl dt, .wp dl.wp-dl dt, .bd dl.bd-dl dt, .inf dl.inf-dl dt, .cm dl.cm-dl dt, .lo dl.lo-dl dt { margin-top: .45rem; font-size: .78rem; }
    .sme .sme-facts div { flex-wrap: wrap; gap: .1rem 1rem; }
    .sme .sme-facts dd { text-align: left; }

    /* fixed-width grid columns get narrower */
    .pa .pa-funnel { grid-template-columns: minmax(0, 7.5rem) 1fr 2.2rem; }
    .wp .wp-age { grid-template-columns: 3.4rem 1fr 2.8rem; }
    .pj .pj-gantt-months, .pj .pj-gantt-row { grid-template-columns: minmax(90px, 30%) 1fr; }

    /* gantt chart scrolls sideways inside its card */
    .pj .pj-gantt { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pj .pj-gantt > * { min-width: 560px; }

    /* invoices / quotes on screen */
    .sme .sme-totals, .sme-totals { min-width: 0; width: 100%; }
    .sme-paper-head { flex-wrap: wrap; gap: .8rem; }
    .sme-paper { padding: 1rem !important; }

    /* heroes: tighter padding, titles scale */
    .do .do-hero, .ad .ad-hero, .ap .ap-hero, .sme .sme-hero, .wp .wp-hero, .pa .pa-hero, .bd .bd-hero { padding: 1.1rem 1rem; }
    .ad .ad-ring { width: 96px; height: 96px; }
    .do .do-filters .form-select, .do .do-filters .form-control, .bd .bd-hero .form-select { max-width: 100%; }

    /* public site cards */
    body.pl .glass-card.confirm-card, body.pl .glass-card.form-card { padding: 1.8rem 1.1rem 1.4rem; }
    .pl-auth-side { padding: 28px 22px; }
    body.pl .section-image-col { min-height: 180px; }

    /* footers */
    .gl-footer { margin: 0 12px 12px; padding: 12px 14px; }
    .gl-footer > *, .pl-footer-bottom > * { min-width: 0; }
}

@media (max-width: 400px) {
    .sme-paper-meta { grid-template-columns: 1fr !important; }
    .ap .ap-kpis, .sme .sme-kpis { grid-template-columns: 1fr 1fr; }
    .ld .ld-facts { grid-template-columns: 1fr 1fr; }
}

/* single-column grids: the column may not grow wider than the card (a long dropdown option or name used to stretch it) */
@media (max-width: 767.98px) {
    .do, .ad, .do .do-feed, .do .do-steps, .ad .ad-grid, .ad .ad-flags, .ad .ad-passed, .ad .ad-health ul,
    .pa .pa-certs, .pa .pa-checks, .pa .pa-pick-list { grid-template-columns: minmax(0, 1fr); }
    :is(body, .gl-app) .form-select, :is(body, .gl-app) select.form-control { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
    :is(body, .gl-app) .d-flex > .form-select, :is(body, .gl-app) .d-flex > select { flex: 1 1 8rem; width: auto; }
}

/* Bootstrap's .text-nowrap is !important; on phones it may wrap outside tables (kina amounts, dates, names) */
@media (max-width: 575.98px) {
    .text-nowrap:not(td, th, td *, th *, .gl-keep-nowrap) { white-space: normal !important; }
}

/* a dropdown reports its longest option as its minimum width – let it and everything around it shrink */
@media (max-width: 991.98px) {
    :where(*:has(> select), *:has(> .form-select), *:has(select)) { min-width: 0; }
}

/* rows of buttons aligned right must wrap – otherwise they overflow off the LEFT edge where they can't be reached */
@media (max-width: 575.98px) {
    .d-flex.justify-content-end:not(.flex-nowrap), .profile-footer, .modal-footer, .form-actions { flex-wrap: wrap; gap: .5rem; }
    .d-flex.justify-content-end:not(.flex-nowrap) > .me-2 { margin-right: 0 !important; }
}

/* stat tiles with an icon on the left: on phones the icon sits above the text, so labels and values get the full tile width */
@media (max-width: 575.98px) {
    .wp .wp-kpi, .pp .pp-kpi, .bd .bd-kpi, .cm .cm-kpi, .inf .inf-kpi, .lo .lo-kpi { flex-direction: column; gap: .45rem; }
    .wp .wp-kpi-icon, .pp .pp-kpi-icon, .bd .bd-kpi-icon, .cm .cm-kpi-icon, .inf .inf-kpi-icon, .lo .lo-kpi-icon { width: 34px; height: 34px; border-radius: .65rem; }
    .wp .wp-kpi-value, .pp .pp-kpi-value, .bd .bd-kpi-value, .cm .cm-kpi-value, .inf .inf-kpi-value, .lo .lo-kpi-value { font-size: clamp(1.15rem, 5.4vw, 1.55rem); }
    .wp .wp-label, .pp .pp-label, .bd .bd-label, .cm .cm-label, .inf .inf-label, .lo .lo-label { letter-spacing: .03em; }
    .ap .ap-kpi { grid-template-columns: 1fr; }
    .ap .ap-kpi i { grid-row: auto; width: 30px; height: 30px; }
}

/* grids whose column count is set inline on the page (steps, factor tiles, hero stats) get fewer columns on phones */
@media (max-width: 767.98px) {
    .bd .bd-steps[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .wp .wp-factors[style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
    .wp .wp-factors[style*="repeat(3"], .bd .bd-hero-stats[style*="repeat(3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* rows of buttons wrap onto the next line on phones instead of running past the edge */
@media (max-width: 575.98px) {
    .d-flex:has(> .btn, > form > .btn, > a.btn):not(.flex-nowrap, .input-group, .btn-group) { flex-wrap: wrap; }
    .ld .ld-btn, body.ld .ld-btn { white-space: normal; text-align: center; }
}
@media (max-width: 991.98px) {
    .pl-mobile .pl-mobile-inner { grid-template-columns: minmax(0, 1fr); }
    .pl-mobile .pl-mobile-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
    body.pl .pl-btn { white-space: normal; text-align: center; padding-left: .8rem; padding-right: .8rem; }
    .ld .ld-wrap, body.ld .ld-wrap { width: min(1220px, 100% - 28px); }
}

/* public order form: on small phones the quantity buttons move under the item details */
@media (max-width: 575.98px) {
    .sme-shop-item { flex-wrap: wrap; gap: .6rem .8rem; }
    .sme-shop-item > .min-w-0 { flex: 1 1 9.5rem; }
    .sme-shop-item > .sme-qty { margin-left: auto; }
    /* card header rows made of badges (type / due date / status) wrap */
    .d-flex.justify-content-between:has(> .badge) { flex-wrap: wrap; gap: .35rem; }
}
/* the profile form footer may wrap at any width (it is right-aligned, so overflow would go off the left edge) */
.profile-footer { flex-wrap: wrap; gap: .5rem; }