/*
 * imAIready admin — custom overrides
 *
 * Show the submit-button loading spinner BESIDE the button label instead of
 * centered on top of it. Orchid's form_controller.js appends:
 *   <span class="spinner-loading position-absolute top-50 start-50 translate-middle">…</span>
 * which overlaps the text (e.g. the "Sign out" button looked like "Si⟳n out").
 * Here we drop the absolute centering and let the spinner render inline after
 * the label, with a small gap.
 */
.btn.btn-loading .spinner-loading {
    position: static !important;   /* was position-absolute */
    inset: auto !important;        /* clears top-50 / start-50 */
    transform: none !important;    /* clears translate-middle */
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    margin-inline-start: 0.4rem !important;
    vertical-align: middle;
}

/*
 * Modal / popup polish — applies to every modal (custom Bootstrap modals in our
 * Blade partials AND Orchid-native Layout::modal). Comfortable, consistent
 * padding with a tighter top so the first field sits nicely under the title.
 *
 * IMPORTANT: Orchid's core CSS forces `.modal .modal-body { padding: 0 }`
 * (specificity 0,2,0), which zeroes the padding and beats a plain `.modal-body`
 * override. So we must match that selector depth (.modal .modal-*) AND use
 * !important to reliably win.
 */
.modal .modal-header { padding: 1.25rem 1.5rem 0.75rem !important; }
.modal .modal-body   { padding: 0.5rem 1.5rem 1.5rem !important; }
.modal .modal-footer { padding: 1rem 1.5rem !important; }

/*
 * Orchid applies `label { white-space: nowrap }` globally. Fine for short field
 * labels, but long radio/checkbox descriptions (the import "Upsert — update
 * matching rows…" line) then refuse to wrap and overflow the modal edge. Let
 * those wrap.
 */
.modal .form-check-label { white-space: normal !important; }

/*
 * Wide Matrix tables scroll instead of crushing their own columns.
 *
 * Orchid renders a Matrix as a bare <table> with no scroll container, so a list
 * with many columns is squeezed into the page width instead of overflowing it.
 * The content section editor generates one column per translated field, so this
 * is not an edge case: Passes reaches 15 columns, at which point every header
 * stacks one word per line ("Button / (Clear / The / Label / For / None) / Text
 * / (EN)") and every cell truncates mid-word — "Registe", "#registe". The values
 * are still there and still save correctly; they simply cannot be read or
 * edited, which is worse than an error because nothing looks broken.
 *
 * `display: block` turns the table itself into the scroll container: its
 * table-internal children are then wrapped in an anonymous table box that sizes
 * to its content, so it can exceed the block and the block scrolls. That keeps
 * every column in ONE table — a wrapper around thead/tbody, or setting them to
 * `display: table` individually, would split the header from the body and let
 * the two fall out of alignment.
 *
 * A minimum column width is what actually forces the overflow; without it the
 * table would still shrink to fit and nothing would scroll.
 */
table.matrix {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Leave the scrollbar visible rather than overlay-on-hover: a table that
       scrolls with no affordance reads as a table with truncated data. */
    scrollbar-width: thin;
}

/*
 * 12rem is measured, not chosen by eye. Across the 15-column Passes list, the
 * share of values that fit their input entirely runs 54% at 10rem, 63% at 11,
 * 74% at 12, 78% at 13, 87% at 16 — while the table grows from 2.0 to 3.3
 * screen-widths of scrolling. 12rem is the knee: the 11->12 step buys eleven
 * points, everything past 13 buys three or four for another half-screen of
 * travel.
 */
table.matrix th,
table.matrix td {
    min-width: 12rem;
}

/* Headers wrap as sentences again once the column has room for them. Orchid's
   global `label { white-space: nowrap }` does not reach these, but Bootstrap's
   table cells inherit oddly in places, so state it. */
table.matrix > thead > tr > th {
    white-space: normal;
    vertical-align: bottom;
}

/* The trailing delete cell holds one icon and has no header, so it must not
   claim a data column's worth of width. */
table.matrix th.no-border {
    min-width: 0;
    width: 1%;
}

/*
 * List tables: give every Orchid cell a floor so columns stop shredding words.
 *
 * MEASURED BEFORE THE FIX, at a 1440px viewport with twelve rows on each
 * screen: the Enquiries Email column rendered 61px wide and its worst cell ran
 * to THIRTEEN lines; Nominations gave Nominee and Category 84px each and its
 * worst cell seven. That is where "PEOPLEl / ogy / Berhad" and "hafiz / ulhafi
 * / im@ / gmai / l.co / m" come from.
 *
 * The cause is not the column count on its own. Orchid emits TD::width() as an
 * inline min-width on the td (vendor .../partials/layouts/td.blade.php:3-6) and
 * nothing at all on a column that does not call it. Its own stylesheet then sets
 * `.table tbody tr td { word-break: break-word }`, which is the legacy alias for
 * `word-break: normal` + `overflow-wrap: anywhere` — and `anywhere`, unlike
 * `break-word`, participates in intrinsic sizing. So an unwidthed cell's
 * min-content width is ONE CHARACTER, an auto-layout table will shrink the
 * column below its longest word without limit, and `.table-responsive`'s
 * overflow-x never has anything to scroll because the table always "fits".
 *
 * This is the same bug brand/header.blade.php already fixes below 768px, with a
 * comment describing these exact symptoms. It was only ever fixed for mobile.
 *
 * Three choices here that will look like oversights later:
 *
 *  - `td` only, never `th`. th.blade.php emits a bare HTML `width="90px"`
 *    attribute, which is a presentational hint with specificity 0 — a `th` rule
 *    would beat it and blow the narrow tick columns open. Auto layout takes the
 *    column's maximum, so the td floor pulls its own header along.
 *
 *  - No exemption list. An inline min-width from width() beats an author
 *    stylesheet, so Notified (90px), Emailed (90px) and Order (120px) keep their
 *    sizes untouched — and a width() SMALLER than 12rem also wins, which is what
 *    makes width() a per-column dial in both directions rather than a floor
 *    override.
 *
 *  - [data-column] is Orchid's own attribute and nothing else in this repo emits
 *    it, so the hand-written Blade tables keep their existing sizing.
 */
.table-responsive td[data-column] { min-width: 12rem; }

/* Paged media has no scrollbar, so a floor would clip the right-hand columns off
   a printout. This stylesheet is registered with no media attribute, so say it. */
@media print {
    .table-responsive td[data-column] { min-width: 0; }
}

/*
 * Reclaim cell padding for text.
 *
 * Orchid sets `.table tbody tr td { padding: .8rem 1rem }` — 32px of chrome per
 * column — and adds 1.5rem !important at each end of the row. Because
 * box-sizing is border-box, this does not widen the table: the padding already
 * sits inside the min-width above. It buys roughly four more characters per line
 * in every column, which is what shortens the tall wrapped rows.
 *
 * !important only where Orchid used it first.
 */
.table-responsive th[data-column],
.table-responsive td[data-column] { padding: .5rem .625rem; }

.table-responsive thead tr th[data-column]:first-child,
.table-responsive tbody tr td[data-column]:first-child { padding-left: .875rem !important; }

.table-responsive thead tr th[data-column]:last-child,
.table-responsive tbody tr td[data-column]:last-child { padding-right: .875rem !important; }

/*
 * Make the scroll visible.
 *
 * Same reasoning as the matrix block above, and precisely the reported symptom
 * that "Came from" was cut off at the page edge: the data was reachable and
 * nothing said so. overscroll-behavior-x stops a trackpad swipe past the end of
 * the table from triggering browser back-navigation, which on a wide table is
 * easy to do by accident and loses the filters.
 */
.table-responsive { overscroll-behavior-x: contain; scrollbar-width: thin; }

/*
 * Let the wide list screens use the monitor.
 *
 * MEASURED at 1920px: the workspace is capped twice on the way down — a
 * .container-xl at 1320px and .workspace-limit at 1135.2px — while the grid
 * column it sits in is already 1640px wide. Releasing both on these screens
 * alone turns Award nominations (1518px of table) and Enquiries (1404px) from
 * "scrolls" into "fits", with no scrollbar at all.
 *
 * HONEST SCOPE: this is a >=1600px improvement and a no-op on a laptop. At
 * 1440px the binding constraint is the grid, not these caps — the aside takes
 * min(20em, 25%) and the column is left with about 1135px, i.e. exactly the cap
 * being released. Nothing here helps a 1366 or 1440 screen; the floor and the
 * merged columns are what help there.
 *
 * Scoped by Orchid's own body class (Names::getPageNameClass()). Class selectors
 * match whole tokens, so page-platform-nominations-detail is NOT matched and no
 * form screen widens — which matters, because the form styles in
 * brand/header.blade.php stretch fieldsets to 100% and cap inputs at 36rem, so a
 * very wide form screen renders as a thin ribbon of inputs beside a huge legend.
 */
body.page-platform-nominations .container-xl,
body.page-platform-enquiries .container-xl,
body.page-platform-orders .container-xl,
body.page-platform-assessments .container-xl,
body.page-platform-nominations .workspace-limit,
body.page-platform-enquiries .workspace-limit,
body.page-platform-orders .workspace-limit,
body.page-platform-assessments .workspace-limit { max-width: none; }

/*
 * Keep the row's identity in view while the rest of it scrolls.
 *
 * Award nominations still wants ~380px more than a 1440px laptop can give it,
 * and scrolling right to read "Came from" otherwise leaves you looking at eight
 * anonymous columns. Both th.blade.php and td.blade.php emit data-column, so the
 * hook is stable across header and body.
 *
 * Safe on these screens specifically because they use the inline Layout::table()
 * factory, where striped() and hoverable() are false — so there is no row
 * background for an opaque sticky cell to cover. If anyone promotes one of these
 * to a Layout subclass and turns striping on, this cell will stop matching its
 * row and will need the same background rule as the stripe.
 *
 * A box-shadow rather than a border-right: `border-collapse: collapse` means a
 * collapsed border belongs to the table rather than the cell, and does not
 * travel with a sticky cell.
 */
body.page-platform-nominations .table-responsive th[data-column="reference"],
body.page-platform-nominations .table-responsive td[data-column="reference"],
body.page-platform-orders .table-responsive th[data-column="reference"],
body.page-platform-orders .table-responsive td[data-column="reference"] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bs-body-bg, #fff);
    box-shadow: 1px 0 0 var(--bs-border-color, rgba(0, 0, 0, .125));
}

/*
 * Hand-written tables: let a word, not a character, be the narrowest a column
 * can get.
 *
 * The Orchid floor above deliberately does not reach these — they set their own
 * widths and most of them are fine. MEASURED across every admin screen with data
 * at 1440px, exactly two shred words: the audit log (52 of them —
 * "admin@peoplelogy.com.my", "coalition_tiers", "question-bank-versions.view")
 * and the question bank (50 — "business_owner_sme_q01" and its siblings). Both
 * are the same shape: an identifier with no space in it, in a column narrower
 * than the identifier.
 *
 * The cause is the same `word-break: break-word` as above, which is
 * `overflow-wrap: anywhere` and participates in intrinsic sizing. Asking for
 * `break-word` instead keeps the last-resort break — a token wider than its
 * column still breaks rather than overflowing — while taking it back OUT of
 * sizing, so min-content becomes the longest word and the column can no longer
 * collapse below it.
 *
 * One rule rather than per-column widths on the two offenders, because the next
 * hand-written table to hold an email address should not have to rediscover
 * this. It cannot make a table narrower, only wider, and .table-responsive
 * already scrolls.
 *
 * Orchid's own cells are excluded: they have the 12rem floor, and `anywhere` is
 * correct there — it is what keeps a 60-character address inside the floor
 * instead of forcing a 30rem column.
 */
.table-responsive td:not([data-column]),
.table-responsive th:not([data-column]) {
    word-break: normal;
    overflow-wrap: break-word;
}