/* ---------- Always-on width containment (all devices) ---------- */

.charting-responsive {
    -webkit-text-size-adjust: 100%;
}

/* No charting table may be wider than its column. Genuinely wide clinical
   matrices can opt into their own horizontal scroll via .cr-scroll (below)
   instead of forcing the whole page wide. */
.charting-responsive table {
    max-width: 100%;
}

/* Long labels/tokens wrap rather than forcing width. break-word (NOT "anywhere"):
   per spec, "anywhere" also collapses a table column's min-content width to a
   single glyph, which let 100%-width neighbors squeeze plain label cells into
   one-character-per-line vertical text (the POC editor bug). break-word wraps
   overflowing tokens without shrinking min-content. */
.charting-responsive td,
.charting-responsive th {
    overflow-wrap: break-word;
}

/* Per-grid escape hatch: wrap a genuinely wide data grid in
   <div class="cr-scroll">...</div> so only that grid scrolls horizontally. */
.charting-responsive .cr-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The wrapper alone is not enough: a table still obeys `.charting-responsive table
   { max-width:100% }` and `table.myTable { width:100% }`, so it just shrinks to the panel and
   nothing ever scrolls.  Release it here and give it a readable floor.  A wide clinical matrix
   (e.g. the 6-column BRADEN SCALE, whose description cells hold 200-240 characters each) is
   unreadable when squeezed into the ~587px charting column on an iPad: columns collapse to
   ~115px and the table renders ~1765px tall with long tokens broken by the
   overflow-wrap rule above.  At 900px those columns are ~200px and the table is
   ~1122px tall, so only this table scrolls sideways instead of the whole page.  Tune min-width
   per grid with an inline style if a particular matrix wants more or less. */
.charting-responsive .cr-scroll > table {
    max-width: none;
    width: auto;
    min-width: 900px;
}

/* Inside a horizontally scrolling matrix, normal word breaking reads best (the always-on
   wrap rule exists to stop narrow columns forcing the page wide - not a concern once the
   grid has its own scrollbar). */
.charting-responsive .cr-scroll td,
.charting-responsive .cr-scroll th {
    overflow-wrap: break-word;
    word-break: normal;
}

/* Harmony data grids (class .hGrid - the error list, the eForm list, etc.): keep normal
   word breaking so a narrow column never shrinks below its own heading or breaks short
   words like "Chart"/"Edit"/"Order" mid-word; long Error/Description text still wraps and
   the table stays capped at max-width:100% from the rule above. (The tap-target cell
   padding that briefly lived here was pulled with the touch layer - it inflated the 22+
   legacy grids hosted in the mini-form area.) */
.charting-responsive .hGrid td,
.charting-responsive .hGrid th {
    overflow-wrap: break-word;  /* break only genuinely long tokens, not "Chart"/"Warning" */
    word-break: normal;
}

/* The jump-to-error "Chart" column is specific to the error grid
   (Forms/Specialty/MiniFormError.ascx), which opts in with .cr-error-grid. Keep it scoped:
   .hGrid is shared with ordinary grids like eFormList, where a bold, padded, centered first
   column just makes the Edit link look like a stray button and inflates the row height. */
.charting-responsive .cr-error-grid td:first-child,
.charting-responsive .cr-error-grid th:first-child {
    white-space: nowrap;        /* the Chart column header + link stay on one line */
    text-align: center;
}
.charting-responsive .cr-error-grid td:first-child a {
    display: inline-block;
    padding: 6px 12px;          /* finger-friendly jump-to-error tap target */
    font-weight: bold;
    white-space: nowrap;
}

/* ASP.NET AJAX CalendarExtender popup (cc:DateTextBox): its day grid is a <table> that
   renders inside a .myTable cell, so the form's ".myTable td" padding/border/line-height
   bloated the day cells and overflowed the fixed-width popup.  Restore the toolkit's own
   compact cell metrics.  ".myTable td" would win on source order (it lives in the form's
   in-body <style>), so !important is required to keep the third-party widget's own layout.
   Fenced under .charting-responsive: the popup renders next to its date field, inside the
   fence when the field is in a mini-form - calendars elsewhere keep the legacy look. */
.charting-responsive .ajax__calendar_container td,
.charting-responsive .ajax__calendar_container th {
    padding: 0 !important;
    border: 0 !important;
    line-height: normal !important;
    vertical-align: middle !important;
    min-height: 0 !important;
    overflow-wrap: normal !important;
}

/* ---------- Required-documentation highlight ----------
   The note validators (e.g. SNNoteDiabetic.isNoteValid) mark incomplete required charting with
   the LEGACY HTML bgcolor attribute, in two ways:
     1. `((HtmlTable)ctrl).BgColor = "Pink"`            -> the offending <table>
     2. `divc.Attributes.Add("bgcolor", "pink")`        -> the collapsible section's content <div>
   Neither shows up on its own any more:
     - On a table, bgcolor is a presentational attribute and loses to ANY CSS background, so once
       the forms started setting `table.myTable { background-color:#fff }` the highlight was
       painted over - the note still refused to sign, but nothing said why.
     - On a div, bgcolor is not valid HTML at all, so that flag has never rendered.
   Restore both (!important: the form's own rule would otherwise win on source order). The `i`
   flag covers the validators' mixed "Pink"/"pink" casing. */
.charting-responsive table[bgcolor="pink" i],
.charting-responsive div[bgcolor="pink" i] {
    background-color: #ffc0cb !important;
}

/* Collapsible sections start CLOSED (the form clicks every .collapse-header-closed on load and
   only re-opens sections that already contain data), so a flagged content div is display:none
   exactly when the section was never charted. Tint the always-visible header too, so a closed
   incomplete section still announces itself instead of silently blocking the signature.
   Browsers without :has() simply ignore this and keep the plain div highlight above. */
.charting-responsive .collapsible:has(> div[bgcolor="pink" i]) > .collapse-header-closed,
.charting-responsive .collapsible:has(> div[bgcolor="pink" i]) > .collapse-header-open {
    background-color: #ffc0cb !important;
    color: #8b0000 !important;
}