/*
 * 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%;
}