/* ============================================================================
 * app-compat.css — mygereja's HAND-WRITTEN additions to the ui_upmedik CSS.
 * Loads LAST (after style.css, radius.css, components.css, erp-compat.css,
 * app-responsive.css, upk.css and the generated app-utilities.css), so a rule here wins a tie.
 *
 * Rules for this file (APP_GEREJA_CMS_MIGRATION.md D9 / §3a):
 *   - plain CSS on the theme tokens (var(--primary), var(--border), …);
 *   - NO Tailwind utilities — a missing utility comes from app-utilities.css
 *     (regenerate: sh assets/ui_upmedik/css/build/build.sh — the lead, once
 *     per wave);
 *   - the frozen files (style / radius / components / erp-compat / source) are
 *     never edited; fix or extend them here;
 *   - NO component rules (buttons, badges, chips, cards, alerts, inputs,
 *     tables, tabs): those live ONLY in upk.css (@layer components,
 *     _md/_docs/UI_KIT.md). The export-green button, the _form_choice chip
 *     radios and the upk-table / upk-input "lead fixes" moved there 2026-09-25
 *     (the layer makes the alignment / invalid-border fixes unnecessary).
 * ==========================================================================*/

/* A modal is open (up_modal.js sets the attribute): the page behind must not
   scroll on touch devices either. */
html[data-up-modal-lock] body { overscroll-behavior: contain; }

/* Buttons disabled by upFetch({ button }) while their request runs. */
[data-up-busy="1"] { cursor: progress !important; opacity: .6; }

/* Page header row: title left, actions (Tambah / PDF / Excel / CSV) right —
   wraps under the title on a phone instead of pushing the page sideways. */
.up-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.up-page-head h1 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 0; }
.up-page-head .up-page-sub { font-size: .75rem; color: var(--muted-foreground); margin-top: .125rem; }
.up-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }


/* Dark mode: the breadcrumb bar and the table header band follow the theme. */
html.dark #app-breadcrumb-bar { background: var(--background); }

/* Visually hidden but readable by screen readers. */
.up-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }