/* App state boxes — empty / loading / error / success / no-access.
 *
 * This file was in neither head.php's versioned list nor any page's $pageCss, so all
 * ~764 `.app-state` usages across 58 pages and 78 scripts rendered with no state
 * styling whatsoever. Seven module stylesheets (collections x6, the portal module) had since
 * re-implemented `.app-state` locally to compensate — the exact drift this file was
 * meant to prevent. It is now loaded.
 *
 * Deliberately LIGHT, and that is a decision rather than an oversight
 * -------------------------------------------------------------------
 * The original rules centred the content in a flex column with `min-height: 120px`
 * and 22px of padding — a large dashed placeholder box. Only 36 of the 382 markup
 * usages are `hidden`; the other ~346 are visible loading placeholders and, more
 * importantly, inline `<p>` messages sitting inside modals and forms. Switching
 * those to a 120px centred box would have been a layout change on 58 pages, not a
 * styling fix.
 *
 * So the box is gone. What is left is a compact tinted strip that reads as a status
 * message wherever it appears:
 *   - `display: block`, so children lay out exactly as they did before this file
 *     loaded — a flex column would have re-stacked and centred existing content.
 *   - no `min-height`, so a one-line error stays one line.
 *   - `text-align` untouched, so it follows the document's direction. This app is
 *     bilingual and centring would have fought RTL as well as looked wrong on a
 *     form-field error.
 *
 * A page that genuinely wants the big empty-state placeholder should reach for the
 * list component's own empty state, which is designed for it.
 *
 * Two spellings, on purpose
 * -------------------------
 * app_state() emits the BEM `app-state--error`, while every page and script writes
 * the single-dash `app-state-error` — 764 times. Only the BEM half was ever defined,
 * so even once loaded, the spelling the codebase actually uses would have matched
 * nothing. Both are defined below.
 *
 * Narrower rules elsewhere still win and are left alone: `.collections-report-grid
 * .app-state-*` in reports-ui-stabilization.css, one form in pages/clients-portal/
 * receipts.css, and the seven module stylesheets — all load after this one.
 */

.app-state {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--tbl-border, #bcc3cd);
    border-radius: var(--tbl-radius, 4px);
    background: var(--tbl-muted-bg, #eef1f4);
    color: var(--tbl-text-secondary, #3d4a5a);
    font-size: var(--ui-small-font-size, 12.5px);
}

.app-state strong { color: var(--tbl-text, #1a2026); }
.app-state p { margin: 0; }
.app-state p + p { margin-top: 4px; }

/* --- the spelling the codebase actually writes --------------------------- */
.app-state-error   { background: var(--tbl-danger-bg,  #f7e8e7); border-color: var(--tbl-danger,  #b1302a); color: var(--tbl-danger, #b1302a); }
.app-state-loading { background: var(--tbl-info-bg,    #e3edf5); border-color: var(--tbl-info,    #1a5c8a); color: var(--tbl-info,   #1a5c8a); }
.app-state-success { background: var(--tbl-success-bg, #e6f2ea); border-color: var(--tbl-success, #107c41); color: var(--tbl-success,#107c41); }
.app-state-warning { background: var(--tbl-warning-bg, #fcf0e0); border-color: var(--tbl-warning, #b25900); color: var(--tbl-warning, #b25900); }
.app-state-empty   { background: var(--tbl-muted-bg,   #eef1f4); }

/* --- the spelling app_state() emits ------------------------------------- */
.app-state--error     { background: var(--tbl-danger-bg,  #f7e8e7); border-color: var(--tbl-danger,  #b1302a); color: var(--tbl-danger, #b1302a); }
.app-state--loading   { background: var(--tbl-info-bg,    #e3edf5); border-color: var(--tbl-info,    #1a5c8a); color: var(--tbl-info,   #1a5c8a); }
.app-state--success   { background: var(--tbl-success-bg, #e6f2ea); border-color: var(--tbl-success, #107c41); color: var(--tbl-success,#107c41); }
.app-state--warning   { background: var(--tbl-warning-bg, #fcf0e0); border-color: var(--tbl-warning, #b25900); color: var(--tbl-warning, #b25900); }
.app-state--empty     { background: var(--tbl-muted-bg,   #eef1f4); }
.app-state--no-access { background: var(--tbl-warning-bg, #fcf0e0); border-color: var(--tbl-warning, #b25900); color: var(--tbl-warning, #b25900); }