/* Responsive safety net. JJE/Claude 08/23/2026.

   Loaded LAST in every layout, after coop-theme-content.css, so it outranks both
   Bootstraps and the dashboard template. It is a floor, not a design: it stops the
   generic ways a legacy page scrolls sideways on a phone, so that the per-view work
   can be about layout rather than about firefighting.

   BYTE-IDENTICAL TWIN: the other portal tree carries the same file at the same
   path, Css/responsive-safety.css. Change both together.

   NOT LINKED FROM _ReportLayout.cshtml. That file carries its own thirty lines of CSS
   and links no stylesheet at all, deliberately (see the note in it). The report pages
   get the same protection written into that block instead.

   WHAT IS DELIBERATELY ABSENT: body { overflow-x: hidden }. It would make every
   remaining defect invisible instead of fixed, and the whole point of the phases after
   this one is that a page which still scrolls sideways is telling you something. If
   you are tempted to add it, fix the page instead.

   Breakpoints are Bootstrap 4's, which is what the dashboard template already uses:
   575.98 / 767.98 / 991.98 / 1199.98. Do not introduce a sixth number.
   See docs/responsive-inventory.md. */


/* ---------------------------------------------------------------------------
   1. Replaced elements never exceed their column.

   An unconstrained <img> is the single most common cause of a page that scrolls
   sideways, because the width comes from the file rather than from the layout.
   height:auto keeps the aspect ratio once max-width starts constraining it.
   --------------------------------------------------------------------------- */
img,
video,
canvas,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* An iframe has no intrinsic aspect ratio to preserve, so height is left alone --
   forcing height:auto on one collapses it to nothing. */
iframe {
    max-width: 100%;
}


/* ---------------------------------------------------------------------------
   2. Form controls stay inside their column.

   Covers the LoanApplications/Edit.cshtml style="width:350px" class of defect
   generically. Phase 2 still removes those inline widths -- this only means a
   missed one cannot break the page.

   width:auto is NOT set here: Bootstrap's .form-control is width:100% by design and
   overriding it would collapse every field in both portals.
   --------------------------------------------------------------------------- */
input,
select,
textarea,
.form-control {
    max-width: 100%;
}


/* ---------------------------------------------------------------------------
   3. Unbreakable strings wrap rather than push.

   This codebase displays CIF keys, reference numbers, account numbers and email
   addresses -- none of which contain a space, so a narrow column cannot break them
   and the cell widens until the table overflows the page.

   overflow-wrap only acts when the word would otherwise overflow, so ordinary prose
   is unaffected. It is scoped to table cells and definition lists: applying it to
   every element interferes with the dashboard template's own truncation.
   --------------------------------------------------------------------------- */
td,
dd {
    overflow-wrap: anywhere;
    word-break: break-word; /* Older WebKit, which does not know overflow-wrap:anywhere. */
}

/* Preformatted blocks (error detail, API payloads in the log views) scroll inside
   themselves rather than widening the page. */
pre {
    overflow-x: auto;
    max-width: 100%;
}


/* ---------------------------------------------------------------------------
   4. .table-responsive actually scrolls on touch.

   Bootstrap 4 sets overflow-x:auto but nothing else; momentum scrolling on older
   iOS needs the second line or the wrapper feels stuck.
   --------------------------------------------------------------------------- */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}


/* ===========================================================================
   PHONE AND LARGE PHONE -- up to 767.98px
   =========================================================================== */
@media (max-width: 767.98px) {

    /* -----------------------------------------------------------------------
       5. Legacy width="NNN" attributes stop applying.

       55 of these are in the tree, 43 of them in the five History ledger pages
       where they sum to about 950px on a table that has no .table-responsive
       around it. An HTML width attribute is a presentational hint with very low
       precedence, but nothing in the cascade currently overrides it, so it wins.

       !important because the attribute maps to a presentational hint that
       ordinary selectors do not reliably outrank across browsers.

       Scoped to cells inside a table so it cannot reach anything else that
       happens to carry a width attribute (the login logo, for one).
       ----------------------------------------------------------------------- */
    table th[width],
    table td[width],
    table[width] {
        width: auto !important;
    }

    /* -----------------------------------------------------------------------
       6. No form control forces the page wider than the phone.

       Belt and braces over rule 2: a control inside a fixed-width ancestor can
       still be pushed past the viewport, and this catches it at the width where
       it matters.
       ----------------------------------------------------------------------- */
    input,
    select,
    textarea {
        max-width: 100%;
    }

    /* -----------------------------------------------------------------------
       7b. OPT-IN: .table-stack turns a grid into one card per row.

       A .table-responsive wrapper stops a wide table breaking the page, but it
       still leaves the member dragging a six-column ledger sideways to read one
       transaction. Inside this band -- everything up to 767.98px, so phones and
       portrait tablets alike -- a row reads far better as a stacked list of
       label/value pairs. A six-column ledger is still cramped at 700px, which is
       why this is not held back to the 575.98px phone band.

       OPT-IN, not automatic, and deliberately so:

         - it needs data-label on every cell, which only the view can supply;
         - it is wrong for a layout table (the two-column label/value blocks on
           the membership status pages are already stacked by nature); and
         - it is wrong above about thirteen columns, where the card becomes a
           longer scroll than the table it replaced. The three large back-office
           grids (131, 45 and 21 columns) keep horizontal scrolling on purpose.

       A cell whose data-label is absent or empty falls back to no label rather
       than printing "undefined" -- ::before with attr() on a missing attribute
       yields an empty string, so the row still reads.
       ----------------------------------------------------------------------- */
    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }

    /* The headings are not lost, only unpositioned: a screen reader still reads
       them, and sighted users get them back through ::before on each cell.
       display:none would take them from both. */
    .table-stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-stack tr {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 6px 10px;
    }

    .table-stack td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        padding: 5px 0;
        /* These grids carry style="text-align:center" on almost every cell, which
           centres a value that is now sitting beside its own label. !important is
           what outranks an inline style. */
        text-align: right !important;
    }

    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        flex: 0 0 45%;
        /* A long heading ("Withdrawals/Debit Memo") must wrap inside its own
           column rather than push the value off the card. */
        overflow-wrap: anywhere;
    }

    /* -----------------------------------------------------------------------
       7. iOS does not zoom the page when a field takes focus.

       Mobile Safari zooms in on any input whose font-size is below 16px, and then
       does not zoom back out -- the member is left on a page they have to pinch to
       escape. The template's fields are 14px, so this raises them at phone width
       only. Desktop typography is untouched.

       type="checkbox" and type="radio" are excluded: font-size does not affect how
       they draw, but it does affect the line box around them, which shifts the
       custom checkbox art in CustomCheckboxRadio.css.
       ----------------------------------------------------------------------- */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }
}