/* Authenticated app design system — the shell (grouped sidebar + topbar + page-header) plus a
   generic restyle of the page vocabulary every role shares (<section> panels, tables, forms,
   buttons, metric tiles). Layered on base.css; harmonizes with dashboard.css (charts, budget
   meters, confidence badges keep their classes).
   Design language referenced from a split-panel / grouped-sidebar admin pattern, re-expressed in
   this system's own blue/gold palette with system fonts and inline SVG only (no CDN, no webfonts).
   Constraints: visible focus, 44px+ targets, prefers-reduced-motion respected everywhere. */

:root {
    --app-brand: #1f6fd4;
    --app-brand-700: #17549f;
    --app-brand-800: #123f78;
    --app-brand-50: #eef4fd;
    --app-navy: #0e2a4d;
    --app-navy-900: #0b2444;
    --app-navy-950: #071a33;
    --app-gold: #f4b942;
    --app-surface: #f1f5fa;      /* page ground behind cards */
    --app-card: #ffffff;
    --app-ink: #16233a;
    --app-ink-soft: #59667e;
    --app-line: #dde4ee;
    --app-line-soft: #eef1f7;
    --app-good: #14803a;
    --app-warn: #9a6200;
    --app-bad: #b32636;
    --sidebar-w: 272px;
    --topbar-h: 64px;
    --app-radius: 12px;
    --app-radius-sm: 8px;
    --app-shadow: 0 1px 2px rgba(14,42,77,.05), 0 8px 24px rgba(14,42,77,.06);
    --app-shadow-hover: 0 6px 14px rgba(14,42,77,.10), 0 18px 40px rgba(14,42,77,.13);
}

/* The [hidden] attribute must always win over author display rules (e.g. a grid/flex/block item
   that is conditionally hidden via JS) — without this, setting display on such an element defeats
   the UA's [hidden]{display:none}. */
[hidden] { display: none !important; }

/* ---------- shell layout ---------- */
body.app {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--app-surface);
    color: var(--app-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--app-navy); color: #fff; padding: .75em 1.25em; z-index: 100; border-radius: 0 0 var(--app-radius-sm) 0; }
.skip-link:focus { left: 0; }

/* ---------- sidebar ---------- */
.sidebar {
    grid-column: 1;
    position: sticky;
    top: 0;
    height: 100vh;
    background: linear-gradient(180deg, var(--app-navy-950), var(--app-navy-900) 55%, #0e2f57);
    color: #c6d4e8;
    display: flex;
    flex-direction: column;
    padding: 1.05rem .8rem 1rem;
    z-index: 60;
    overflow-y: auto;
}
.sidebar-brand {
    display: flex; align-items: center; gap: .7rem;
    padding: .35rem .55rem 1rem;
    margin-bottom: .5rem;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-brand .brand-seal {
    width: 42px; height: 42px; flex: none; border-radius: 11px;
    background: linear-gradient(135deg, #2f83e8, var(--app-brand-800));
    display: grid; place-items: center; color: #fff;
    box-shadow: 0 5px 14px rgba(10,32,66,.5);
}
.sidebar-brand .brand-seal svg { width: 24px; height: 24px; }
.sidebar-brand .brand-name { display: block; font-weight: 800; font-size: 1rem; color: #fff; line-height: 1.1; }
.sidebar-brand .brand-sub { display: block; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #8fa6c6; margin-top: .15rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.nav-section { margin-top: .55rem; }
.nav-section:first-child { margin-top: 0; }
.nav-section-accounts { margin-top: auto; padding-top: .55rem; }
.nav-section-title {
    padding: .2rem .7rem .35rem;
    color: #7f97ba;
    font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.nav-item {
    display: flex; align-items: center; gap: .7rem;
    min-height: 42px;
    padding: .55rem .7rem;
    border-radius: var(--app-radius-sm);
    color: #c2d0e6;
    text-decoration: none;
    font-size: .91rem; font-weight: 600;
}
.nav-item .nav-ico { width: 20px; height: 20px; flex: none; color: #8fb0dc; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item:hover .nav-ico { color: #cfe0f7; }
.nav-item.is-active {
    background: linear-gradient(90deg, rgba(47,131,232,.28), rgba(47,131,232,.14));
    color: #fff;
    box-shadow: inset 3px 0 0 var(--app-gold);
    font-weight: 700;
}
.nav-item.is-active .nav-ico { color: var(--app-gold); }

.sidebar-footer {
    margin-top: .6rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.sidebar-user {
    display: flex; align-items: center; gap: .6rem;
    padding: .35rem .5rem .55rem;
}
.user-avatar {
    width: 38px; height: 38px; flex: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--app-brand), var(--app-brand-800));
    color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .82rem;
}
.user-meta { min-width: 0; }
.user-name { display: block; color: #fff; font-weight: 700; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { display: block; color: #8fa6c6; font-size: .74rem; }
.sidebar-logout {
    display: flex; align-items: center; gap: .55rem; justify-content: center;
    min-height: 42px;
    padding: .55rem;
    border-radius: var(--app-radius-sm);
    color: #ffd5da; text-decoration: none; font-weight: 700; font-size: .88rem;
    border: 1px solid rgba(255,255,255,.14);
}
.sidebar-logout svg { width: 18px; height: 18px; }
.sidebar-logout:hover { background: rgba(244,63,94,.16); border-color: rgba(244,63,94,.4); color: #fff; }

.sidebar-scrim { display: none; }

/* ---------- app shell (topbar + main) ---------- */
.app-shell { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky; top: 0; z-index: 50;
    min-height: var(--topbar-h);
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: saturate(1.3) blur(10px);
    backdrop-filter: saturate(1.3) blur(10px);
    border-bottom: 1px solid var(--app-line);
    display: flex; align-items: center; gap: 1rem;
    padding: .6rem clamp(1rem, 3vw, 1.9rem);
}
.topbar-crumb { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.breadcrumb-line { color: var(--app-ink-soft); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.breadcrumb-line span { color: var(--app-line); margin: 0 .1rem; }
.date-line { color: var(--app-ink); font-size: .92rem; font-weight: 700; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.profile-chip {
    display: inline-flex; align-items: center; gap: .55rem;
    min-height: 42px; padding: .3rem .85rem .3rem .35rem;
    border: 1px solid var(--app-line); border-radius: 999px; background: #fff;
    font-weight: 700; font-size: .88rem; color: var(--app-ink);
}
.avatar-dot {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--app-brand), var(--app-brand-800));
    color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem;
}
.profile-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.burger { display: none; }

.app-main { flex: 1; }
.app-main-inner { max-width: 1200px; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 1.9rem) 3rem; }

/* ---------- page-header card ---------- */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    padding: 1.3rem 1.5rem;
    margin: 0 0 1.5rem;
}
.page-header-text { min-width: 0; }
.eyebrow { color: var(--app-brand); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.page-header h1 { margin: .25rem 0 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--app-ink); line-height: 1.15; }
.page-header p { max-width: 760px; margin: .5rem 0 0; color: var(--app-ink-soft); font-size: .95rem; }
.status-pill {
    display: inline-flex; align-items: center; gap: .4rem; flex: none;
    padding: .4rem .85rem; border-radius: 999px;
    background: var(--app-brand-50); color: var(--app-brand-700);
    font-size: .78rem; font-weight: 800; white-space: nowrap;
}

/* ---------- page intro / notes ---------- */
.page-note {
    background: var(--app-brand-50); border: 1px solid #cfe0f6; color: #24405f;
    border-radius: var(--app-radius-sm); padding: .75rem 1rem; margin: 0 0 1.25rem; font-size: .9rem;
}
.page-note a { color: var(--app-brand-700); font-weight: 700; }

/* ---------- distribution module: tags, notices, beneficiary checklists ---------- */
.muted { color: var(--app-ink-soft); font-size: .88em; }
.tag {
    display: inline-block; padding: .1rem .55rem; border-radius: 999px;
    background: var(--app-brand-50); color: var(--app-brand-700);
    font-size: .72rem; font-weight: 800; white-space: nowrap; vertical-align: middle;
}
.tag-warn { background: #fdf1dc; color: var(--app-warn); }
.tag-ok   { background: #e4f6ea; color: #1b7a43; }

.notice { border-radius: var(--app-radius-sm); padding: .85rem 1.1rem; font-size: .95rem; }
.notice-strong {
    background: #fdf1dc; border: 2px solid var(--app-gold); color: #5a3d00;
    font-size: 1.02rem; line-height: 1.5;
}
.notice-strong strong { display: block; font-size: 1.1rem; margin-bottom: .2rem; }

.check-row {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .35rem 0; font-size: .95rem;
}
.check-row input { margin-top: .15rem; flex: none; }
.check-row.select-all { font-weight: 700; border-bottom: 1px solid var(--app-line-soft); margin-bottom: .3rem; }

.brgy-group, .dist-card { border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); padding: .6rem .9rem; margin: 0 0 .7rem; }
.brgy-group > summary, .dist-card > summary { cursor: pointer; font-size: .98rem; padding: .2rem 0; }
.dist-card > summary strong { font-size: 1.02rem; }

/* ---------- verified beneficiary badge / banner ---------- */
.verified-banner {
    display: flex; align-items: center; gap: .9rem;
    background: linear-gradient(135deg, #e8f8ee, #d6f2e0);
    border: 1px solid #1b7a43; border-left: 5px solid #1b7a43;
    color: #12603a; border-radius: var(--app-radius); padding: 1rem 1.25rem; margin: 0 0 1.4rem;
    line-height: 1.45;
}
.verified-banner strong { font-size: 1.08rem; color: #0f5130; }
.verified-check { flex: none; color: #1b7a43; }
.verified-check svg { width: 40px; height: 40px; display: block; }

.verified-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #1b7a43; color: #fff;
    padding: .28rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 800;
    box-shadow: 0 1px 3px rgba(27,122,67,.35);
}
.verified-badge svg { width: 15px; height: 15px; }

/* ---------- clickable per-request status banners (PWD dashboard) ---------- */
/* Same strong-notice language as .verified-banner, but each is a link to that specific request. */
.status-banner-list { display: grid; gap: .7rem; }
.status-banner {
    display: flex; align-items: center; gap: .9rem;
    background: #fff; border: 1px solid var(--app-line); border-left-width: 5px;
    border-radius: var(--app-radius); padding: .9rem 1.15rem;
    text-decoration: none; color: var(--app-ink); line-height: 1.45;
    box-shadow: var(--app-shadow);
}
.status-banner .sb-ico { flex: none; }
.status-banner .sb-ico svg { width: 30px; height: 30px; display: block; }
.status-banner .sb-body { min-width: 0; }
.status-banner strong { display: block; font-size: 1.04rem; color: var(--app-ink); }
.status-banner .sb-msg { color: var(--app-ink-soft); font-size: .92rem; }
.status-banner .sb-go { margin-left: auto; flex: none; color: var(--app-ink-soft); font-size: 1.5rem; line-height: 1; }
.status-banner:hover { border-color: #cdd7e6; box-shadow: var(--app-shadow-hover); }
.status-banner:hover .sb-go { color: var(--app-ink); }
.status-banner:focus-visible { outline: 2px solid var(--app-brand); outline-offset: 2px; }

/* tone accents: left border + icon colour (background stays white so a long list reads calmly) */
.status-banner.tone-good   { border-left-color: var(--app-good); }
.status-banner.tone-good   .sb-ico { color: var(--app-good); }
.status-banner.tone-warn   { border-left-color: var(--app-gold); }
.status-banner.tone-warn   .sb-ico { color: var(--app-warn); }
.status-banner.tone-danger { border-left-color: var(--app-bad); }
.status-banner.tone-danger .sb-ico { color: var(--app-bad); }
.status-banner.tone-info   { border-left-color: var(--app-brand); }
.status-banner.tone-info   .sb-ico { color: var(--app-brand); }

@media (prefers-reduced-motion: no-preference) {
    .status-banner { transition: box-shadow 150ms ease, border-color 150ms ease; }
}

/* Row landed on from a "Request Updates" banner link: a persistent :target tint plus a one-shot
   flash so the eye catches it immediately. */
.req-row:target > td { background: var(--app-brand-50); }
.req-row.row-flash > td { animation: row-flash 1.8s ease; }
@keyframes row-flash {
    0%, 30% { background: #dcebfc; }
    100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .req-row.row-flash > td { animation: none; }
}

/* ---------- table tools (search / filters / pagination) — js/table-tools.js ---------- */
.tbl-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
    margin: 0 0 .9rem;
}
.tbl-search-wrap { position: relative; flex: 1 1 240px; min-width: 200px; max-width: 360px; }
.tbl-search {
    width: 100%; margin: 0; min-height: 40px;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
    padding: .5em .8em .5em 2.1em; font-size: .9rem; font-family: inherit; background: #fff;
    /* magnifier glyph as an inline SVG background (no external asset) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359667e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: .6em center; background-size: 16px 16px;
}
.tbl-search:focus { outline: none; border-color: var(--app-brand); box-shadow: 0 0 0 3px rgba(31,111,212,.18); }
.tbl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-left: auto; }
.tbl-filter { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: .82rem; font-weight: 700; color: var(--app-ink-soft); }
.tbl-filter select {
    margin: 0; min-height: 40px; width: auto; min-width: 120px; max-width: 220px;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
    padding: .4em .6em; font-size: .86rem; font-family: inherit; background: #fff; color: var(--app-ink); font-weight: 600;
}
.tbl-filter select:focus { outline: none; border-color: var(--app-brand); box-shadow: 0 0 0 3px rgba(31,111,212,.18); }

.tbl-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
    margin: .8rem 0 0; font-size: .85rem; color: var(--app-ink-soft);
}
.tbl-pager { display: flex; align-items: center; gap: .5rem; }
.tbl-pagesize { display: inline-flex; align-items: center; gap: .35rem; margin: 0 .4rem 0 0; font-size: .82rem; font-weight: 700; color: var(--app-ink-soft); }
.tbl-pagesize select {
    margin: 0; min-height: 34px; width: auto; min-width: 64px;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
    padding: .25em .5em; font-size: .82rem; font-family: inherit; background: #fff; color: var(--app-ink); font-weight: 700;
}
.tbl-page-btn {
    min-height: 34px; margin: 0; padding: .3em .8em;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: #fff;
    color: var(--app-brand-700); font-weight: 700; font-size: .84rem; font-family: inherit; cursor: pointer;
}
.tbl-page-btn:hover:not(:disabled) { background: var(--app-brand-50); border-color: var(--app-brand); }
.tbl-page-btn:disabled { color: var(--app-ink-soft); opacity: .5; cursor: default; }
.tbl-page-cur { font-weight: 700; color: var(--app-ink); }
.tbl-norows td { text-align: center; color: var(--app-ink-soft); font-style: italic; padding: 1.1rem .7rem; }

/* Single short page: the pager row collapses to just the count so tiny tables stay uncluttered. */
.tbl-foot.is-minimal .tbl-pager { display: none; }

@media (max-width: 640px) {
    .tbl-filters { margin-left: 0; }
    .tbl-search-wrap { max-width: none; }
}

/* ========================================================================== 
   Icon table actions, portal tooltips, and shared in-app action modal
   ========================================================================== */

body.app td.table-actions {
    min-width: 126px;
}

body.app.page-users td.table-actions {
    min-width: 118px;
}

body.app.page-users .row-actions {
    display: flex;
}

body.app.page-requests td.table-actions,
body.app.page-pwd-registry td.table-actions {
    min-width: 84px;
}

body.app.page-requests .row-actions,
body.app.page-pwd-registry .row-actions {
    display: grid;
    grid-template-columns: repeat(2, 34px);
}

body.app .row-actions .icon-action,
body.app .table-actions .icon-action,
body.app a.icon-action {
    position: relative;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    margin: 0;
    padding: 0;
    border: 1px solid #b9c7d8;
    border-radius: 5px;
    background: #fff;
    color: #315f8e;
    text-decoration: none;
    box-shadow: none;
}

body.app .icon-action .action-icon {
    width: 17px;
    height: 17px;
    display: block;
}

body.app .row-actions .icon-action:hover,
body.app .table-actions .icon-action:hover,
body.app a.icon-action:hover {
    background: #f1f6fb;
    border-color: #7fa8cf;
    color: #205f99;
}

body.app .row-actions .icon-action[data-action="under_review"] {
    flex-basis: 34px;
}

body.app .icon-action[data-action="approve"],
body.app .icon-action[data-action="delivered"],
body.app .icon-action[data-action="completed"],
body.app .icon-action[data-action="first_pass_verify"],
body.app .icon-action[data-action="verify"],
body.app .icon-action[data-action="activate"],
body.app .icon-action.review-btn,
body.app .icon-action.handout-submit {
    background: #edf8f2;
    border-color: #a9d7bc;
    color: #17643a;
}

body.app .icon-action[data-action="waitlist"],
body.app .icon-action[data-action="assign_field"],
body.app .icon-action[data-action="reset_password"] {
    background: #fff8e9;
    border-color: #e7c781;
    color: #80580a;
}

body.app .icon-action[data-action="reject"],
body.app .icon-action[data-action="deactivate"],
body.app .icon-action.report-btn {
    background: #fff3f3;
    border-color: #e8b7ba;
    color: #a23740;
}

.app-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 240px;
    padding: .38rem .55rem;
    border-radius: 5px;
    background: #172337;
    color: #fff;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 5px 16px rgba(16,24,40,.22);
}

body.modal-open {
    overflow: hidden;
}

.app-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9,20,36,.58);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.app-modal {
    position: relative;
    width: min(520px, 100%);
    max-height: min(760px, calc(100vh - 2rem));
    overflow: hidden;
    background: #fff;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    color: #182230;
    box-shadow: 0 24px 70px rgba(8,23,43,.28);
}

.app-modal-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    align-items: center;
    gap: .75rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 0;
    border-bottom: 1px solid #e6eaf0;
}

.app-modal-symbol {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #edf4fb;
    color: #216fbd;
}

.app-modal-symbol svg {
    width: 21px;
    height: 21px;
}

.tone-success .app-modal-symbol { background: #edf8f2; color: #17643a; }
.tone-warning .app-modal-symbol { background: #fff8e9; color: #80580a; }
.tone-danger .app-modal-symbol { background: #fff1f2; color: #a23740; }

.app-modal-heading {
    min-width: 0;
}

.app-modal-kicker {
    display: block;
    margin-bottom: .12rem;
    color: #667085;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.app-modal-heading h2 {
    margin: 0;
    color: #182230;
    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.25;
}

.app-modal-close {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #667085;
}

.app-modal-close:hover {
    background: #f2f4f7;
    border-color: #e1e6ed;
}

.app-modal-close svg {
    width: 18px;
    height: 18px;
}

.app-modal-form {
    margin: 0;
}

.app-modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    padding: 1.1rem;
}

.app-modal-message {
    margin: 0 0 1rem;
    color: #526174;
    font-size: .88rem;
    line-height: 1.55;
    white-space: pre-line;
}

.app-modal-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.app-modal-field {
    grid-column: 1 / -1;
}

.app-modal-field label {
    display: block;
    margin: 0 0 .32rem;
    color: #344054;
    font-size: .78rem;
    font-weight: 700;
}

.app-modal-field input:not([type="checkbox"]),
.app-modal-field textarea,
.app-modal-field select {
    width: 100%;
    max-width: none;
    min-height: 42px;
    margin: 0;
    padding: .58rem .7rem;
    border: 1px solid #cfd6df;
    border-radius: 6px;
    background: #fff;
    color: #182230;
    font: inherit;
    font-size: .88rem;
}

.app-modal-field textarea {
    min-height: 96px;
    resize: vertical;
}

.app-modal-field input:focus,
.app-modal-field textarea:focus,
.app-modal-field select:focus {
    outline: none;
    border-color: #2474c7;
    box-shadow: 0 0 0 3px rgba(36,116,199,.14);
}

.app-modal-field small {
    display: block;
    margin-top: .3rem;
    color: #667085;
    font-size: .72rem;
    line-height: 1.4;
}

.app-modal-field.is-checkbox label {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .55rem .65rem;
    border: 1px solid #dfe4ea;
    border-radius: 6px;
    background: #f8fafc;
}

.app-modal-field.is-checkbox input {
    width: 17px;
    height: 17px;
    min-height: 0;
    margin: 0;
    accent-color: #216fbd;
}

.app-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    margin: 0;
    padding: .85rem 1.1rem;
    border: 0;
    border-top: 1px solid #e6eaf0;
    background: #f8fafc;
}

.app-modal-footer button {
    min-height: 40px;
    margin: 0;
    padding: .5rem .9rem;
    border: 1px solid #bcc7d4;
    border-radius: 6px;
    background: #fff;
    color: #344054;
    font-size: .82rem;
    font-weight: 700;
}

.app-modal-footer .app-modal-confirm {
    background: #216fbd;
    border-color: #216fbd;
    color: #fff;
}

.app-modal-footer .app-modal-confirm.is-success {
    background: #21724a;
    border-color: #21724a;
}

.app-modal-footer .app-modal-confirm.is-danger {
    background: #b33a43;
    border-color: #b33a43;
}

@media (max-width: 560px) {
    .app-modal-layer { padding: .6rem; }
    .app-modal { max-height: calc(100vh - 1.2rem); }
    .app-modal-header { padding: .85rem; }
    .app-modal-body { max-height: calc(100vh - 170px); padding: .9rem; }
    .app-modal-footer { padding: .75rem .9rem; }
    .app-modal-fields { grid-template-columns: 1fr; }
}

/* ---------- PWD request-assistance form ---------- */
/* Two columns: the form on the left, a short "how it works" guidance card on the right so the wide
   panel reads as a designed page instead of a lone narrow column of fields. */
.ra-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }
.ra-intro { margin: 0 0 1.3rem; color: var(--app-ink-soft); font-size: .95rem; max-width: 58ch; }

.request-form { max-width: 620px; }
/* controls fill the form column (override the app-wide 520px cap) and each field is its own row —
   this is what stops the submit button from riding up beside the textarea. */
.request-form .rf-field { display: block; margin: 0 0 1.15rem; }
.request-form label { margin: 0 0 .35rem; }
.request-form select,
.request-form textarea,
.request-form input[type="file"] { width: 100%; max-width: none; display: block; }
.request-form textarea { min-height: 120px; }
.request-form .rf-help { display: block; margin-top: .4rem; font-size: .8rem; color: var(--app-ink-soft); }
.request-form .rf-hint-tag {
    display: inline-block; margin-left: .35rem; vertical-align: middle;
    background: var(--app-brand-50); color: var(--app-brand-700);
    font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    padding: .12rem .5rem; border-radius: 999px;
}
/* file-upload fields and info notes share one tinted "what's required" treatment */
.request-form .upload-field,
.request-form .rf-note {
    background: var(--app-brand-50); border: 1px solid #d7e3f6;
    border-radius: var(--app-radius-sm); padding: .9rem 1rem;
}
.request-form .rf-note { margin: 0 0 1.15rem; color: #24405f; font-size: .92rem; line-height: 1.5; }
.request-form .upload-field label { display: block; }
.request-form .rf-actions { margin-top: 1.4rem; }
.request-form .rf-actions button { min-width: 190px; }

.form-feedback { margin: 0 0 1.1rem; padding: .7rem 1rem; border-radius: var(--app-radius-sm); font-size: .92rem; font-weight: 600; }
.form-feedback.is-ok    { background: #e4f6ea; border: 1px solid #bfe6cd; color: #12603a; }
.form-feedback.is-error { background: #fdecec; border: 1px solid #f4c7c7; color: #9a2020; }

.ra-aside {
    background: #fff; border: 1px solid var(--app-line); border-radius: var(--app-radius);
    padding: 1.15rem 1.3rem; box-shadow: var(--app-shadow);
}
.ra-aside h3 { margin: 0 0 .7rem; font-size: 1rem; font-weight: 800; }
.ra-steps { margin: 0 0 .9rem; padding-left: 1.15rem; display: grid; gap: .5rem; color: var(--app-ink-soft); font-size: .9rem; line-height: 1.45; }
.ra-steps strong { color: var(--app-ink); }
.ra-aside a { color: var(--app-brand-700); font-weight: 700; }
.ra-aside-note { margin: 0; padding-top: .9rem; border-top: 1px solid var(--app-line-soft); color: var(--app-ink-soft); font-size: .86rem; line-height: 1.5; }
.ra-aside-note strong { color: var(--app-warn); }

@media (max-width: 900px) {
    .ra-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .ra-aside { order: -1; }   /* on narrow screens, surface the guidance above the form */
    .request-form { max-width: none; }
}

/* ---------- cards: every top-level <section> becomes a panel ---------- */
.app-main-inner > section {
    background: var(--app-card);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    padding: 1.35rem 1.5rem;
    margin: 0 0 1.4rem;
    overflow-x: auto;   /* wide tables scroll within their own card, no page-level h-scroll */
}
.app-main-inner > section > h2:first-child,
.app-main-inner > section > h2:nth-child(2) {
    margin-top: 0; margin-bottom: 1rem;
    font-size: 1.12rem; font-weight: 800; color: var(--app-ink);
    padding-bottom: .7rem; border-bottom: 1px solid var(--app-line);
}
.app-main-inner > section h3 { font-size: 1rem; font-weight: 700; margin: 1.4rem 0 .6rem; }

/* definition lists (PWD profile) as a clean key/value grid */
.app-main-inner dl { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: .1rem 1rem; margin: 0; }
.app-main-inner dl dt { font-weight: 700; color: var(--app-ink-soft); padding: .55rem 0; border-bottom: 1px solid var(--app-line-soft); }
.app-main-inner dl dd { margin: 0; padding: .55rem 0; border-bottom: 1px solid var(--app-line-soft); }
.app-main-inner dl ul { margin: 0; padding-left: 1.1rem; }
@media (max-width: 560px) { .app-main-inner dl { grid-template-columns: 1fr; } .app-main-inner dl dt { border-bottom: none; padding-bottom: 0; } }

/* ---------- forms ---------- */
.app-main-inner label { display: block; font-weight: 700; font-size: .88rem; margin: 1rem 0 .3rem; color: #2b3648; }
.app-main-inner input[type="text"],
.app-main-inner input[type="password"],
.app-main-inner input[type="number"],
.app-main-inner input[type="date"],
.app-main-inner input[type="datetime-local"],
.app-main-inner input[type="email"],
.app-main-inner input[type="tel"],
.app-main-inner input[type="file"],
.app-main-inner select,
.app-main-inner textarea {
    width: 100%; max-width: 520px;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
    padding: .62em .8em; font-size: 1rem; font-family: inherit; background: #fff; color: var(--app-ink);
}
.app-main-inner textarea { min-height: 92px; resize: vertical; }
.app-main-inner input:focus, .app-main-inner select:focus, .app-main-inner textarea:focus {
    outline: none; border-color: var(--app-brand); box-shadow: 0 0 0 3px rgba(31,111,212,.18);
}
.app-main-inner fieldset { border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); padding: .8rem 1rem; margin: 1rem 0; max-width: 640px; }
.app-main-inner fieldset legend { font-weight: 800; font-size: .9rem; padding: 0 .4rem; }
.app-main-inner fieldset label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; margin: .35rem 1rem .35rem 0; }
.app-main-inner fieldset label input { width: auto; }
.app-main-inner > section > form > label > input[type="checkbox"] { width: auto; margin-right: .5rem; }

/* ---------- buttons ---------- */
.app-main-inner button,
.app-main-inner .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4em;
    min-height: 42px; padding: .5em 1.1em; margin: .2rem .3rem .2rem 0;
    border-radius: var(--app-radius-sm); border: 1px solid var(--app-brand); background: #fff; color: var(--app-brand-700);
    font-weight: 700; font-size: .92rem; font-family: inherit; cursor: pointer;
}
.app-main-inner button:hover, .app-main-inner .btn:hover { background: var(--app-brand-50); }
.app-main-inner form button[type="submit"], .app-main-inner .btn-primary {
    background: var(--app-brand); color: #fff; border-color: var(--app-brand);
}
.app-main-inner form button[type="submit"]:hover, .app-main-inner .btn-primary:hover { background: var(--app-brand-700); border-color: var(--app-brand-700); }

/* ---------- tables ---------- */
.app-main-inner table { width: 100%; border-collapse: collapse; margin: .4rem 0; font-size: .92rem; }
.app-main-inner thead th {
    text-align: left; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--app-ink-soft); font-weight: 800;
    padding: .6rem .7rem; border-bottom: 2px solid var(--app-line); white-space: nowrap;
}
.app-main-inner tbody td { padding: .65rem .7rem; border-bottom: 1px solid var(--app-line-soft); vertical-align: top; }
.app-main-inner tbody tr:last-child td { border-bottom: none; }
.app-main-inner tbody tr { transition: background-color 120ms ease; }
.app-main-inner tbody tr:hover { background: #f6f9fd; }
.app-main-inner td button { min-height: 34px; padding: .3em .7em; font-size: .82rem; margin: .15rem .2rem .15rem 0; }

/* Dense table variant — for long registry lists where vertical space matters. */
.app-main-inner table.dense { font-size: .86rem; margin: .2rem 0; }
.app-main-inner table.dense thead th { padding: .38rem .55rem; }
.app-main-inner table.dense tbody td { padding: .34rem .55rem; vertical-align: middle; }
.app-main-inner table.dense td button { min-height: 28px; padding: .18em .5em; font-size: .76rem; margin: .1rem .15rem .1rem 0; }

/* ---------- compact multi-column form (registry etc.) ---------- */
/* Collapsible register form so the page defaults to just the list; the toggle rides inside the
   section card, so it stays borderless (no double frame). */
.reg-disclosure { margin: 0; }
.reg-disclosure > summary {
    cursor: pointer; font-weight: 800; font-size: 1.05rem; color: var(--app-ink);
    list-style: none; display: flex; align-items: center; gap: .5rem; padding: .1rem 0;
}
.reg-disclosure > summary::-webkit-details-marker { display: none; }
.reg-disclosure > summary::before { content: "＋"; color: var(--app-brand); font-weight: 800; font-size: 1.1rem; }
.reg-disclosure[open] > summary { margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--app-line); }
.reg-disclosure[open] > summary::before { content: "－"; }

.compact-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 .9rem; align-items: start; }
.compact-form .field { display: flex; flex-direction: column; min-width: 0; }
.compact-form .field-wide { grid-column: 1 / -1; }
.compact-form label { margin: .45rem 0 .2rem; font-size: .82rem; }
.compact-form .check-row { margin: 0; }
.compact-form input[type="text"], .compact-form input[type="date"], .compact-form select, .compact-form textarea {
    padding: .42em .65em; font-size: .93rem;
}
.compact-form fieldset { grid-column: 1 / -1; margin: .55rem 0 .3rem; max-width: none; padding: .55rem .85rem; }
.compact-form fieldset legend { font-size: .82rem; }
.compact-form .dt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0 .8rem; }
.compact-form .dt-grid .check-row { padding: .2rem 0; font-size: .9rem; }
.compact-form .consent-row { grid-column: 1 / -1; }
.compact-form .consent-row .check-row { padding: .3rem 0; font-size: .88rem; }
.compact-form button[type="submit"] { grid-column: 1 / -1; justify-self: start; margin-top: .7rem; }

/* Inline filter row (label + control on one line) instead of a stacked block. */
.inline-filter { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .1rem 0 .8rem; }
.inline-filter label { margin: 0; font-size: .82rem; }
.inline-filter select { width: auto; min-width: 150px; padding: .4em .6em; }

/* ---------- messages ---------- */
.form-error { background: #fdeaec; border: 1px solid #f3c2c9; color: var(--app-bad); border-radius: var(--app-radius-sm); padding: .75rem 1rem; font-weight: 600; }
.form-success { background: #e7f6ec; border: 1px solid #bfe4cc; color: var(--app-good); border-radius: var(--app-radius-sm); padding: .75rem 1rem; font-weight: 600; }
[role="alert"], [role="status"] { border-radius: var(--app-radius-sm); }

/* ---------- entrance transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
    html.js .page-header,
    html.js .app-main-inner > section { opacity: 0; transform: translateY(12px); animation: app-rise .5s ease forwards; }
    html.js .page-header { animation-delay: .02s; }
    html.js .app-main-inner > section:nth-of-type(1) { animation-delay: .08s; }
    html.js .app-main-inner > section:nth-of-type(2) { animation-delay: .15s; }
    html.js .app-main-inner > section:nth-of-type(3) { animation-delay: .22s; }
    html.js .app-main-inner > section:nth-of-type(4) { animation-delay: .29s; }
    html.js .app-main-inner > section:nth-of-type(n+5) { animation-delay: .34s; }
    .nav-item, .app-main-inner button, .app-main-inner .btn, .sidebar-logout, .profile-chip,
    figure.chart, .kpi-tile, .app-main-inner > section {
        transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    }
    .sidebar { transition: transform 240ms ease; }
    .app-main-inner > section:hover { box-shadow: var(--app-shadow-hover); }
}
@keyframes app-rise { to { opacity: 1; transform: none; } }

/* ---------- responsive: off-canvas sidebar ---------- */
@media (max-width: 900px) {
    body.app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 0; left: 0; width: min(84vw, var(--sidebar-w)); height: 100vh;
        transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.4);
    }
    body.app.sidebar-open .sidebar { transform: translateX(0); }
    .app-shell { grid-column: 1; }
    .burger { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: #fff; cursor: pointer; color: var(--app-ink); }
    .burger svg { width: 22px; height: 22px; }
    body.app.sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(6,16,34,.5); z-index: 55; }
    .app-main-inner { padding: 1.1rem 1rem 2rem; }
    .profile-name { display: none; }
    .profile-chip { padding: .3rem; }
}
@media (max-width: 640px) {
    .page-header { flex-direction: column; }
    .date-line { font-size: .82rem; }
}

/* ================= login / register / auth (pre-auth, split-panel) ================= */
body.auth {
    max-width: none; margin: 0; padding: 1.25rem;
    min-height: 100vh; display: grid; place-items: center;
    background:
        radial-gradient(820px 400px at 88% -12%, rgba(47,131,232,.35), transparent 60%),
        radial-gradient(620px 360px at -12% 112%, rgba(244,185,66,.16), transparent 55%),
        linear-gradient(150deg, var(--app-navy-950), #123b6d 58%, var(--app-brand-700));
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--app-ink);
}
.auth-card {
    width: min(1040px, 100%);
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 70px rgba(4,16,34,.45);
}
.auth-card.wide { grid-template-columns: 0.82fr 1.18fr; }

/* brand / hero side */
.auth-hero {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
    min-height: 560px;
    padding: 2.3rem 2.1rem;
    color: #fff;
    background:
        radial-gradient(600px 300px at 80% 0%, rgba(47,131,232,.4), transparent 60%),
        linear-gradient(160deg, var(--app-navy-950), var(--app-navy-900) 60%, #123b6d);
    overflow: hidden;
}
.auth-hero::after {
    content: ""; position: absolute; right: -60px; bottom: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(244,185,66,.28), transparent 70%);
    pointer-events: none;
}
.auth-brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: #fff; font-weight: 800; position: relative; z-index: 1; }
.auth-brand .brand-seal {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    background: linear-gradient(135deg, #2f83e8, var(--app-brand-800));
    display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(4,16,34,.4);
}
.auth-brand .brand-seal svg { width: 25px; height: 25px; }
.auth-brand .brand-word { font-size: 1.05rem; line-height: 1.05; }
.auth-brand .brand-word small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: #9fb6d6; text-transform: uppercase; }
.auth-hero-body { position: relative; z-index: 1; }
.auth-hero .section-label { margin: 0 0 .6rem; color: var(--app-gold); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.auth-hero h2 { margin: 0 0 .8rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.08; }
.auth-hero p { margin: 0; color: rgba(227,236,248,.86); font-size: .98rem; line-height: 1.5; max-width: 40ch; }
.auth-points { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .6rem; position: relative; z-index: 1; }
.auth-points li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; line-height: 1.35; color: #dbe7f6; font-weight: 600; }
.auth-points svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--app-gold); }
.auth-footnote { position: relative; z-index: 1; color: rgba(180,199,225,.85); font-size: .82rem; border-top: 1px solid rgba(255,255,255,.16); padding-top: 1rem; }

/* form side */
.auth-form-panel { padding: clamp(1.6rem, 4vw, 2.6rem); display: flex; flex-direction: column; }
.auth-form-panel .section-label { margin: 0; color: var(--app-brand); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.auth-form-panel h1 { margin: .3rem 0 .3rem; font-size: 1.7rem; font-weight: 800; color: var(--app-ink); }
.auth-form-panel .form-copy { margin: 0 0 1.2rem; color: var(--app-ink-soft); font-size: .95rem; }
.auth-form-panel form { display: block; }
.auth-form-panel label { display: block; font-weight: 700; font-size: .86rem; margin: .9rem 0 .3rem; color: #2b3648; }
.auth-form-panel input,
.auth-form-panel select,
.auth-form-panel textarea {
    width: 100%; border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
    padding: .68em .85em; font-size: 1rem; font-family: inherit; background: #fff; color: var(--app-ink);
}
.auth-form-panel textarea { min-height: 72px; resize: vertical; }
.auth-form-panel input:focus, .auth-form-panel select:focus, .auth-form-panel textarea:focus {
    outline: none; border-color: var(--app-brand); box-shadow: 0 0 0 3px rgba(31,111,212,.18);
}
.auth-form-panel fieldset { border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); padding: .7rem .9rem .8rem; margin: .9rem 0 0; }
.auth-form-panel fieldset legend { font-weight: 700; font-size: .82rem; padding: 0 .35rem; color: #2b3648; }
/* checkbox rows: same treatment as the registry's .check-row — fixed 16px box, top-aligned to
   the first text line via a small nudge, so multi-line labels don't float the box mid-block.
   (label.auth-check, not .auth-check: must outrank the .auth-form-panel label block rule) */
label.auth-check { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 0 0; font-weight: 500; font-size: .9rem; line-height: 1.4; color: var(--app-ink); }
/* min-height:0 undoes base.css's 44px control floor — a 16px box inside a 44px-tall element
   paints the glyph well below its own text line */
.auth-check input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: .15rem 0 0; }
.auth-check > span { min-width: 0; }
.auth-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.auth-form-grid .col-full { grid-column: 1 / -1; }
.auth-submit {
    width: 100%; margin-top: 1.4rem; min-height: 50px;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--app-brand); color: #fff; border: none; border-radius: var(--app-radius-sm);
    font-weight: 800; font-size: 1rem; cursor: pointer; font-family: inherit;
}
.auth-submit svg { width: 18px; height: 18px; }
.auth-submit:hover { background: var(--app-brand-700); }
.auth-switch { margin: 1.3rem 0 0; text-align: center; color: var(--app-ink-soft); font-size: .92rem; }
.auth-switch a { color: var(--app-brand-700); font-weight: 800; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-form-panel .form-error, .auth-form-panel .form-success { margin-bottom: 1rem; }
.auth-form-panel .field-hint { display: block; margin-top: .3rem; font-size: .78rem; color: var(--app-ink-soft); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
    .auth-card { animation: app-rise .5s ease; }
    .auth-submit, .auth-form-panel input, .auth-form-panel select, .auth-form-panel textarea {
        transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
    }
}

/* --- register: fits one screen (no page scroll) via three levers ------------------------------
   1. a 3-column field grid (fewer rows than 2 columns for the same number of fields),
   2. a compressed hero + tight form vertical rhythm,
   3. a hard cap on the card's height with internal (not page-level) scroll as a last resort, so
      an unusually short viewport never causes the whole page to scroll — only the form panel
      would, and the brand/hero stay visible throughout. ------------------------------------- */
.register-card {
    /* a definite height (not max-height): the grid row resolves to it via minmax(0,1fr), so the
       panels really are viewport-bounded and can scroll internally instead of being clipped by
       the card's overflow:hidden */
    height: min(calc(100vh - 2.5rem), 700px);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}
.register-card .auth-form-panel { min-height: 0; overflow-y: auto; }
/* hero keeps overflow:hidden (its decorative ::after circle hangs past the edge — auto would
   show a phantom scrollbar); its content is compact enough to always fit */
.register-card .auth-hero { min-height: 0; padding: 1.15rem 1.4rem; gap: 1rem; }
.register-card .auth-hero h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: .45rem; }
.register-card .auth-hero p { font-size: .83rem; line-height: 1.4; }
.register-card .auth-points { margin-top: .65rem; gap: .35rem; }
.register-card .auth-points li { font-size: .8rem; }
.register-card .auth-points svg { width: 16px; height: 16px; }
/* scroll-safe vertical centering: auto-margin pseudo spacers collapse to 0 when the content
   overflows (justify-content:center would make the top of the form unreachable when scrolling) */
.register-card .auth-form-panel { padding: clamp(.85rem, 1.6vh, 1.25rem) clamp(1.1rem, 2.2vw, 1.5rem); justify-content: flex-start; }
.register-card .auth-form-panel::before,
.register-card .auth-form-panel::after { content: ""; flex: 0 0 auto; margin: auto; }
.register-card .auth-form-panel h1 { font-size: 1.25rem; margin: .12rem 0 .05rem; }
.register-card .auth-form-panel .form-copy { margin: 0 0 .35rem; font-size: .82rem; }
.register-card .auth-form-panel label { margin: .32rem 0 .14rem; font-size: .78rem; }
/* dense-form exception to base.css's 44px control floor: 38px here (still comfortably above the
   24px WCAG 2.5.8 AA target minimum) and no stray vertical margins — label rhythm spaces rows */
.register-card .auth-form-panel input,
.register-card .auth-form-panel select { padding: .4em .6em; font-size: .9rem; min-height: 38px; margin: 0; }
.register-card .ms-trigger { padding: .4em .6em; font-size: .9rem; min-height: 38px; }
.register-card .auth-form-grid { gap: 0 .8rem; }
/* 3 columns instead of 2 — the same fields need fewer rows, which is the main height saving */
.register-card .auth-form-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.register-card .field-hint { margin-top: .16rem; font-size: .7rem; }
.register-card .opt { color: var(--app-ink-soft); font-weight: 500; font-size: .76rem; text-transform: none; }
.register-card label.auth-check { margin: .45rem 0 0; font-size: .8rem; }
.register-card .auth-check input[type="checkbox"] { margin-top: .1rem; }
.register-card label.consent-check { margin-top: .55rem; font-size: .78rem; }
.register-card fieldset,
.register-card .ms-select { margin-top: 0; }
.register-card .auth-submit { margin-top: .65rem; min-height: 42px; font-size: .95rem; }
.register-card .auth-switch { margin-top: .45rem; font-size: .82rem; }

/* Short viewports (e.g. 1366×768 laptops with Windows display scaling): trim the hero prose
   progressively so the card still fits without internal scrolling — the form fields are already
   at their minimum rhythm, so height is reclaimed from the descriptive copy first. */
@media (min-width: 861px) and (max-height: 680px) {
    .register-card .auth-hero-body > p:not(.section-label) { display: none; }
    .register-card .auth-form-panel { padding-top: .75rem; padding-bottom: .75rem; }
    .register-card .auth-form-panel .form-copy { display: none; }
    .register-card .auth-form-panel input,
    .register-card .auth-form-panel select,
    .register-card .ms-trigger { padding: .34em .55em; font-size: .88rem; min-height: 34px; }
    .register-card .auth-form-panel label { margin: .26rem 0 .12rem; }
    .register-card .auth-submit { margin-top: .5rem; min-height: 38px; }
    .register-card .auth-switch { margin-top: .35rem; }
}
@media (min-width: 861px) and (max-height: 600px) {
    .register-card .auth-points { display: none; }
    .register-card .auth-hero h2 { margin-bottom: 0; }
}
/* ~1366×768 laptop at 125% OS scaling ends up around 520 CSS px of viewport height — the most
   compressed tier: minimum chrome around the card, smallest field rhythm, no panel headings
   beyond the h1. Field placement (3-column grid) stays untouched. */
@media (min-width: 861px) and (max-height: 580px) {
    body.auth { padding: .5rem; }
    .register-card { height: calc(100vh - 1rem); }
    .register-card .auth-hero { padding: 1rem 1.2rem; }
    .register-card .auth-hero h2 { font-size: 1.05rem; }
    .register-card .auth-form-panel { padding: .6rem 1.2rem; }
    .register-card .auth-form-panel .section-label { display: none; }
    .register-card .auth-form-panel h1 { font-size: 1.05rem; margin: 0 0 .05rem; }
    .register-card .auth-form-panel label { margin: .18rem 0 .06rem; font-size: .75rem; }
    .register-card .auth-form-panel input,
    .register-card .auth-form-panel select,
    .register-card .ms-trigger { padding: .24em .5em; font-size: .85rem; min-height: 30px; }
    .register-card label.auth-check { margin-top: .25rem; font-size: .76rem; }
    .register-card label.consent-check { margin-top: .3rem; font-size: .74rem; }
    .register-card .auth-submit { margin-top: .35rem; min-height: 34px; font-size: .9rem; }
    .register-card .auth-switch { margin-top: .15rem; font-size: .76rem; }
}

/* --- multi-select dropdown (disability picker): progressive enhancement --- */
/* Without JS, .ms-panel is a plain, always-visible checklist and the trigger is hidden. */
.ms-select { position: relative; }
.ms-select:not(.ms-ready) .ms-trigger { display: none; }
.ms-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: #fff;
    padding: .55em .8em; font-size: .93rem; font-family: inherit; color: var(--app-ink); cursor: pointer; text-align: left;
}
.ms-trigger .ms-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-trigger .ms-label.placeholder { color: var(--app-ink-soft); }
.ms-trigger .ms-caret { flex: none; width: 16px; height: 16px; color: var(--app-ink-soft); transition: transform .18s ease; }
.ms-select.open .ms-trigger .ms-caret { transform: rotate(180deg); }
.ms-trigger:focus-visible { outline: none; border-color: var(--app-brand); box-shadow: 0 0 0 3px rgba(31,111,212,.18); }

.ms-panel {
    border: 1px solid var(--app-line); border-radius: var(--app-radius-sm); background: #fff;
    padding: .35rem .45rem .5rem; margin-top: .4rem;
}
.ms-select.ms-ready .ms-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 30; display: none;
    box-shadow: var(--app-shadow); max-height: 260px; overflow-y: auto;
}
.ms-select.ms-ready.open .ms-panel { display: block; }
.ms-option { display: flex; align-items: center; gap: .55rem; padding: .34rem .45rem; border-radius: 6px; font-size: .9rem; line-height: 1.4; font-weight: 500; cursor: pointer; }
.ms-option:hover { background: var(--app-brand-50); }
.ms-option input[type="checkbox"] { flex: none; width: 16px; height: 16px; min-height: 0; margin: 0; }
.ms-option > span { min-width: 0; }
.ms-others { margin: .45rem .1rem .15rem; }

@media (max-width: 860px) {
    .auth-card, .auth-card.wide { grid-template-columns: 1fr; }
    .auth-hero { min-height: auto; padding: 1.8rem 1.6rem; }
    .auth-points { display: none; }
    .auth-form-grid { grid-template-columns: 1fr; }
    /* below the split-panel breakpoint, page-level scrolling is normal/expected on a phone —
       drop the one-screen height cap (and the 3-column grid) rather than forcing an awkward
       scroll-inside-a-box on a small device. */
    .register-card { height: auto; grid-template-rows: none; }
    .register-card .auth-hero, .register-card .auth-form-panel { overflow-y: visible; }
    .register-card .auth-form-grid.grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    body.auth { padding: 0; }
    .auth-card { border-radius: 0; min-height: 100vh; }
}

/* ========================================================================== 
   Production workspace refresh
   Content and page layouts only. Sidebar navigation intentionally remains on
   the established design above.
   ========================================================================== */

body.app {
    background: #f5f7fa;
    color: #182230;
}

body.app .app-shell {
    background:
        linear-gradient(180deg, rgba(255,255,255,.68) 0, rgba(255,255,255,0) 240px),
        #f5f7fa;
}

body.app .topbar {
    min-height: 68px;
    padding: .65rem clamp(1.1rem, 2.8vw, 2.25rem);
    background: rgba(255,255,255,.94);
    border-bottom-color: #e4e8ee;
    box-shadow: 0 1px 0 rgba(16,24,40,.02);
}

body.app .breadcrumb-line {
    color: #667085;
    font-size: .7rem;
    letter-spacing: .08em;
}

body.app .date-line {
    color: #27364a;
    font-size: .9rem;
    font-weight: 650;
}

body.app .profile-chip {
    min-height: 40px;
    padding: .25rem .8rem .25rem .3rem;
    border-color: #e1e6ed;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,.03);
}

body.app .avatar-dot {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

body.app .app-main-inner {
    width: 100%;
    max-width: 1420px;
    padding: clamp(1.4rem, 2.5vw, 2.2rem) clamp(1.1rem, 2.8vw, 2.4rem) 4rem;
}

/* Page identity is an unframed workspace heading, not another card. */
body.app .page-header {
    position: relative;
    align-items: center;
    min-height: 104px;
    margin: 0 0 1.75rem;
    padding: .2rem 0 1.5rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #dde3ea;
    border-radius: 0;
    box-shadow: none;
}

body.app .page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: #2474c7;
}

body.app .page-header .eyebrow {
    color: #2474c7;
    font-size: .7rem;
    letter-spacing: .1em;
}

body.app .page-header h1 {
    margin-top: .35rem;
    color: #142033;
    font-size: clamp(1.65rem, 2.5vw, 2.25rem);
    font-weight: 760;
    letter-spacing: 0;
}

body.app .page-header p {
    max-width: 780px;
    margin-top: .55rem;
    color: #667085;
    font-size: .93rem;
    line-height: 1.55;
}

body.app .status-pill {
    min-height: 32px;
    padding: .35rem .72rem;
    border: 1px solid #d7e5f5;
    border-radius: 6px;
    background: #f2f7fc;
    color: #245f99;
    font-size: .72rem;
    letter-spacing: .02em;
}

/* Primary page sections read as stable work surfaces with restrained chrome. */
body.app .app-main-inner > section {
    margin: 0 0 1.25rem;
    padding: clamp(1.15rem, 2vw, 1.6rem);
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e0e5ec;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,.035);
}

body.app .app-main-inner > section:hover {
    box-shadow: 0 1px 2px rgba(16,24,40,.035);
}

body.app .app-main-inner > section > h2:first-child,
body.app .app-main-inner > section > h2:nth-child(2) {
    margin: 0 0 1.15rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid #e8ecf1;
    color: #1c293b;
    font-size: 1.05rem;
    font-weight: 730;
    letter-spacing: 0;
}

body.app .app-main-inner > section h3 {
    color: #253348;
    font-size: .95rem;
    font-weight: 700;
}

body.app .page-note {
    margin-bottom: 1.25rem;
    padding: .8rem 1rem;
    background: #f4f8fc;
    border: 1px solid #d9e6f3;
    border-left: 3px solid #4386c8;
    border-radius: 6px;
    color: #3d536a;
    line-height: 1.5;
}

/* Forms */
body.app .app-main-inner form {
    max-width: 760px;
}

body.app .app-main-inner label {
    margin-top: 1rem;
    margin-bottom: .38rem;
    color: #344054;
    font-size: .82rem;
    font-weight: 680;
}

body.app .app-main-inner input[type="text"],
body.app .app-main-inner input[type="password"],
body.app .app-main-inner input[type="number"],
body.app .app-main-inner input[type="date"],
body.app .app-main-inner input[type="datetime-local"],
body.app .app-main-inner input[type="email"],
body.app .app-main-inner input[type="tel"],
body.app .app-main-inner input[type="file"],
body.app .app-main-inner select,
body.app .app-main-inner textarea {
    max-width: 620px;
    min-height: 44px;
    margin: 0;
    padding: .62rem .78rem;
    background: #fff;
    border: 1px solid #cfd6df;
    border-radius: 6px;
    color: #182230;
    font-size: .92rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.025);
}

body.app .app-main-inner textarea {
    min-height: 108px;
    line-height: 1.5;
}

body.app .app-main-inner input:hover,
body.app .app-main-inner select:hover,
body.app .app-main-inner textarea:hover {
    border-color: #aeb8c5;
}

body.app .app-main-inner input:focus,
body.app .app-main-inner select:focus,
body.app .app-main-inner textarea:focus {
    border-color: #2474c7;
    box-shadow: 0 0 0 3px rgba(36,116,199,.14);
}

body.app .app-main-inner fieldset {
    max-width: 760px;
    margin: 1.15rem 0;
    padding: 1rem 1.1rem;
    background: #fafbfc;
    border-color: #dce2e9;
    border-radius: 6px;
}

body.app .app-main-inner fieldset legend {
    color: #344054;
    font-size: .82rem;
}

body.app .check-row {
    min-height: 36px;
    padding: .4rem .2rem;
}

body.app .app-main-inner input[type="checkbox"],
body.app .app-main-inner input[type="radio"] {
    accent-color: #2474c7;
}

body.app .app-main-inner button,
body.app .app-main-inner .btn {
    min-height: 40px;
    padding: .52rem .95rem;
    border-color: #b9c7d8;
    border-radius: 6px;
    background: #fff;
    color: #245f99;
    font-size: .84rem;
    font-weight: 680;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

body.app .app-main-inner button:hover,
body.app .app-main-inner .btn:hover {
    background: #f4f8fc;
    border-color: #7fa8cf;
}

body.app .app-main-inner form button[type="submit"],
body.app .app-main-inner .btn-primary {
    background: #216fbd;
    border-color: #216fbd;
    color: #fff;
    box-shadow: 0 1px 2px rgba(17,62,108,.16);
}

body.app .app-main-inner form button[type="submit"]:hover,
body.app .app-main-inner .btn-primary:hover {
    background: #195b9d;
    border-color: #195b9d;
}

/* Tables and their controls */
body.app .app-main-inner table {
    margin: .25rem 0 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #27364a;
    font-size: .86rem;
}

body.app .app-main-inner thead th {
    padding: .72rem .75rem;
    background: #f7f9fb;
    border-top: 1px solid #e2e7ed;
    border-bottom: 1px solid #dce2e9;
    color: #526174;
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .07em;
}

body.app .app-main-inner thead th:first-child {
    border-left: 1px solid #e2e7ed;
    border-top-left-radius: 6px;
}

body.app .app-main-inner thead th:last-child {
    border-right: 1px solid #e2e7ed;
    border-top-right-radius: 6px;
}

body.app .app-main-inner tbody td {
    padding: .75rem;
    border-bottom: 1px solid #e8ecf1;
    background: #fff;
    line-height: 1.45;
}

body.app .app-main-inner tbody tr:nth-child(even) td {
    background: #fcfdfe;
}

body.app .app-main-inner tbody tr:hover td {
    background: #f4f8fc;
}

body.app .app-main-inner table.dense thead th,
body.app .app-main-inner table.dense tbody td {
    padding: .55rem .62rem;
}

body.app .tbl-tools {
    margin-bottom: .85rem;
    padding: .7rem;
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-radius: 6px;
}

body.app .tbl-search,
body.app .tbl-filter select,
body.app .tbl-pagesize select {
    border-radius: 5px;
    box-shadow: none;
}

body.app .tbl-foot {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid #e8ecf1;
}

/* Detail views, notices, and repeated operational records */
body.app .app-main-inner dl {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    gap: 0 1.5rem;
}

body.app .app-main-inner dl dt,
body.app .app-main-inner dl dd {
    padding: .72rem 0;
    border-bottom-color: #e8ecf1;
}

body.app .app-main-inner dl dt {
    color: #667085;
    font-size: .8rem;
    font-weight: 680;
}

body.app .app-main-inner dl dd {
    color: #27364a;
    font-size: .9rem;
}

body.app .tag,
body.app .verified-badge,
body.app .confidence-badge,
body.app .action-badge {
    border-radius: 5px;
    box-shadow: none;
}

body.app .notice,
body.app .form-error,
body.app .form-success,
body.app .form-feedback {
    border-radius: 6px;
}

body.app .form-error,
body.app .form-success {
    margin: 0 0 1.15rem;
    border-left-width: 3px;
    font-size: .88rem;
}

body.app .brgy-group,
body.app .dist-card {
    margin-bottom: .75rem;
    padding: .8rem 1rem;
    background: #fbfcfd;
    border-color: #dfe5ec;
    border-radius: 6px;
}

body.app .dist-card > summary,
body.app .brgy-group > summary {
    min-height: 40px;
    display: flex;
    align-items: center;
}

body.app .verified-banner {
    margin-bottom: 1.35rem;
    padding: .9rem 1.05rem;
    background: #f0faf4;
    border: 1px solid #b9dfc8;
    border-left: 4px solid #278153;
    border-radius: 7px;
}

body.app .verified-check svg {
    width: 34px;
    height: 34px;
}

body.app .ra-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

body.app .request-form {
    max-width: 700px;
}

body.app .ra-aside {
    padding: 1.1rem 1.2rem;
    background: #f8fafc;
    border-color: #dfe5ec;
    border-radius: 7px;
    box-shadow: none;
}

body.app .request-form .upload-field,
body.app .request-form .rf-note {
    background: #f5f8fc;
    border-color: #dae5f1;
    border-radius: 6px;
}

/* Data controls: server-side filters and client-side search share one visual system. */
body.app .app-main-inner form.data-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
    max-width: none;
    margin: 0 0 .75rem;
    padding: .75rem;
    background: #f8fafc;
    border: 1px solid #e1e7ee;
    border-radius: 6px;
}

body.app .filter-field {
    flex: 1 1 190px;
    min-width: 170px;
}

body.app .filter-field label {
    margin: 0 0 .28rem;
    color: #526174;
    font-size: .72rem;
    letter-spacing: .02em;
}

body.app .filter-field select {
    width: 100%;
    max-width: none;
    min-height: 40px;
    padding-block: .48rem;
    background-color: #fff;
}

body.app .data-filter-bar > button,
body.app .data-filter-bar > noscript button {
    min-height: 40px;
    margin: 0;
    padding-inline: 1rem;
    white-space: nowrap;
}

body.app .app-main-inner form.filter-bar-compact {
    width: min(100%, 360px);
    max-width: 360px;
}

body.app .map-filter-bar {
    margin-bottom: 1rem;
}

body.app .data-filter-bar:has(+ .tbl-tools) {
    margin-bottom: 0;
    border-bottom-color: #edf0f4;
    border-radius: 6px 6px 0 0;
}

body.app .data-filter-bar + .tbl-tools {
    margin-top: -1px;
    border-radius: 0 0 6px 6px;
}

body.app .tbl-tools {
    min-height: 58px;
    margin: 0 0 .8rem;
    padding: .6rem .75rem;
    gap: .6rem 1rem;
    background: #f8fafc;
    border: 1px solid #e1e7ee;
    border-radius: 6px;
}

body.app .tbl-search-wrap {
    flex: 1 1 260px;
    max-width: 420px;
}

body.app .tbl-search {
    min-height: 40px;
    padding: .5rem .75rem .5rem 2.2rem;
    border-color: #cfd6df;
    border-radius: 5px;
    background-color: #fff;
    font-size: .84rem;
}

body.app .tbl-filters:empty {
    display: none;
}

body.app .tbl-filters {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: .5rem;
}

body.app .tbl-filter {
    gap: .35rem;
    margin: 0;
    color: #526174;
    font-size: .72rem;
}

body.app .tbl-filter select {
    min-height: 40px;
    min-width: 112px;
    border-color: #cfd6df;
    border-radius: 5px;
    font-size: .8rem;
}

body.app .tbl-foot {
    min-height: 42px;
    margin-top: .75rem;
    padding-top: .75rem;
}

body.app .tbl-pager {
    gap: 0;
}

body.app .tbl-pagesize {
    margin-right: .65rem;
}

body.app .tbl-page-btn {
    min-height: 34px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}

body.app .tbl-page-btn:first-of-type {
    border-radius: 5px 0 0 5px;
}

body.app .tbl-page-btn:last-of-type {
    border-radius: 0 5px 5px 0;
}

body.app .tbl-page-cur {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 .65rem;
    border-top: 1px solid #d8dee7;
    border-bottom: 1px solid #d8dee7;
    background: #f8fafc;
    font-size: .78rem;
}

/* Section-level commands sit on the same baseline as their heading. */
body.app .section-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid #e8ecf1;
}

body.app .section-titlebar h2 {
    margin: 0;
    color: #1c293b;
    font-size: 1.05rem;
    font-weight: 730;
}

body.app .section-titlebar .section-action {
    flex: none;
    min-height: 36px;
    margin: 0;
    padding: .42rem .78rem;
}

body.app .section-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e8ecf1;
}

body.app .section-actions button {
    margin: 0;
}

/* Table actions remain compact, aligned, and semantically distinct. */
body.app td.table-actions {
    width: 1%;
    min-width: 168px;
}

body.app .row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

body.app .row-actions:empty {
    display: none;
}

body.app .row-actions button,
body.app .table-actions button {
    min-height: 34px;
    margin: 0;
    padding: .36rem .64rem;
    border-color: #b9c7d8;
    border-radius: 5px;
    background: #fff;
    color: #315f8e;
    font-size: .76rem;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
}

body.app .row-actions .req-action[data-action="under_review"] {
    flex-basis: 100%;
}

body.app .row-actions button:hover,
body.app .table-actions button:hover {
    background: #f1f6fb;
    border-color: #7fa8cf;
}

body.app .req-action[data-action="approve"],
body.app .req-action[data-action="delivered"],
body.app .req-action[data-action="completed"],
body.app .pwd-action[data-action="first_pass_verify"],
body.app .pwd-action[data-action="verify"],
body.app .user-action[data-action="activate"],
body.app .row-actions .review-btn,
body.app .app-main-inner .dist-complete {
    background: #edf8f2;
    border-color: #a9d7bc;
    color: #17643a;
}

body.app .req-action[data-action="waitlist"],
body.app .pwd-action[data-action="assign_field"],
body.app .user-action[data-action="reset_password"] {
    background: #fff8e9;
    border-color: #e7c781;
    color: #80580a;
}

body.app .req-action[data-action="reject"],
body.app .pwd-action[data-action="reject"],
body.app .user-action[data-action="deactivate"],
body.app .row-actions .report-btn {
    background: #fff3f3;
    border-color: #e8b7ba;
    color: #a23740;
}

body.app .budget-action[data-action="replenish"],
body.app .row-actions .liquidate-btn,
body.app .app-main-inner .pickup-btn {
    background: #eef5fc;
    border-color: #b8d1e9;
    color: #205f99;
}

body.app button:disabled,
body.app .btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* Inline handout workflows use the available action-cell width without collisions. */
body.app .handout-form {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(160px, 1fr) auto;
    align-items: end;
    gap: .45rem;
    max-width: none;
}

body.app .handout-form input[type="file"],
body.app .handout-form input[type="text"] {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 38px;
    font-size: .78rem;
}

body.app .handout-form button {
    min-height: 38px;
    margin: 0;
    white-space: nowrap;
}

body.app .handout-message {
    grid-column: 1 / -1;
}

body.app td.table-actions:has(.handout-form) {
    width: auto;
    min-width: 560px;
}

body.app .fv-form button,
body.app .pickup-btn,
body.app .rsvp-btn {
    margin-top: .65rem;
}

body.app.page-users td.table-actions {
    min-width: 210px;
}

body.app.page-users .row-actions {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: start;
}

/* The two independent account forms make better use of desktop width. */
@media (min-width: 980px) {
    body.app.page-settings .app-main-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-content: start;
    }

    body.app.page-settings .page-header,
    body.app.page-settings .form-success,
    body.app.page-settings .form-error {
        grid-column: 1 / -1;
    }

    body.app.page-settings .app-main-inner > section {
        height: 100%;
        margin: 0;
    }
}

@media (max-width: 900px) {
    body.app .app-main-inner {
        padding: 1.25rem 1rem 2.5rem;
    }

    body.app .page-header {
        min-height: 92px;
        margin-bottom: 1.25rem;
        padding-bottom: 1.15rem;
    }
}

@media (max-width: 640px) {
    body.app .topbar {
        min-height: 62px;
        padding-inline: .8rem;
    }

    body.app .page-header {
        align-items: flex-start;
        gap: .8rem;
    }

    body.app .status-pill {
        align-self: flex-start;
    }

    body.app .app-main-inner > section {
        padding: 1rem;
    }

    body.app .app-main-inner dl {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.app .app-main-inner dl dt {
        padding-bottom: .15rem;
        border-bottom: 0;
    }

    body.app .app-main-inner dl dd {
        padding-top: 0;
    }

    body.app .tbl-tools {
        padding: .6rem;
    }

    body.app .data-filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
        padding: .65rem;
    }

    body.app .filter-bar-compact {
        width: 100%;
    }

    body.app .filter-field {
        width: 100%;
        min-width: 0;
    }

    body.app .data-filter-bar > button,
    body.app .data-filter-bar > noscript button {
        width: 100%;
    }

    body.app .tbl-tools {
        align-items: stretch;
    }

    body.app .tbl-search-wrap {
        flex-basis: 100%;
        width: 100%;
        max-width: none;
    }

    body.app .tbl-filters {
        justify-content: flex-start;
        width: 100%;
    }

    body.app .tbl-filter {
        flex: 1 1 140px;
        display: grid;
        gap: .25rem;
    }

    body.app .tbl-filter select {
        width: 100%;
        max-width: none;
    }

    body.app .tbl-foot {
        align-items: flex-start;
    }

    body.app .section-titlebar {
        align-items: flex-start;
    }

    body.app .section-titlebar h2 {
        padding-top: .35rem;
    }

    body.app td.table-actions {
        min-width: 160px;
    }
}

/* ============================================================================
   MOBILE ONLY — stacked "card" tables (≤640px).
   Wide data tables scroll awkwardly on a phone. Here each row becomes a labelled
   card (column header : value), so everything is readable and tappable without a
   horizontal scroll. These rules live ONLY inside this max-width query, so the
   desktop / web view is never affected. Labels come from the data-label attributes
   that js/table-tools.js stamps onto every enhanced/card table's cells.
   ============================================================================ */
@media (max-width: 640px) {
    /* NB: the section keeps its default overflow-x:auto — that scroll container is what stops any
       stray wide content from forcing a full-page horizontal scroll. Card rows wrap to fit, so in
       practice nothing scrolls; we just don't remove the safety net. */

    body.app table.tbl-cards { display: block; width: 100%; margin: 0; font-size: .92rem; }

    /* Hide the header row: absolute-positioning a table-header-group is unreliable (it stays in
       flow and forces the table's min-content width), so on cards we drop it outright. Each cell
       already shows its column name via the data-label ::before, so no context is lost. */
    body.app table.tbl-cards > thead { display: none; }
    body.app table.tbl-cards > tbody { display: block; }

    body.app table.tbl-cards > tbody > tr {
        display: block; margin: 0 0 .7rem; padding: .3rem .9rem;
        border: 1px solid var(--app-line); border-radius: var(--app-radius-sm);
        background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.05);
    }
    body.app table.tbl-cards > tbody > tr:last-child { margin-bottom: 0; }
    body.app table.tbl-cards > tbody > tr:hover { background: #fff; }   /* no hover tint on cards */

    /* A floated label + normal text flow (NOT flexbox): flex turns each inline child of a cell
       into its own flex item, which squeezes mixed content like "<strong>Proxy</strong> — …" and
       breaks words mid-letter. With a float, the value stays one continuous, naturally-wrapping run. */
    body.app table.tbl-cards > tbody > tr > td {
        display: block; padding: .55rem 0; border-bottom: 1px solid var(--app-line-soft);
        text-align: right; overflow-wrap: break-word; white-space: normal; min-height: 0;
    }
    body.app table.tbl-cards > tbody > tr > td::before {
        content: attr(data-label); float: left; width: 38%; padding-right: .75rem;
        text-align: left; line-height: 1.55;
        font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
        color: var(--app-ink-soft);
    }
    body.app table.tbl-cards > tbody > tr > td::after { content: ""; display: block; clear: both; }
    body.app table.tbl-cards > tbody > tr > td:last-child { border-bottom: 0; }

    /* empty cells contribute nothing to a card — hide them */
    body.app table.tbl-cards > tbody > tr > td.tbl-empty { display: none; }

    /* cells that hold controls (actions, links, uploads) sit full-width below their label */
    body.app table.tbl-cards > tbody > tr > td.tbl-has-ctrl { text-align: left; padding-top: .6rem; }
    body.app table.tbl-cards > tbody > tr > td.tbl-has-ctrl::before {
        float: none; display: block; width: auto; margin-bottom: .45rem;
    }

    /* placeholder ("Loading…") and no-match rows have no per-column label — centre them */
    body.app table.tbl-cards > tbody > tr > td:not([data-label]) { text-align: center; }
    body.app table.tbl-cards > tbody > tr > td:not([data-label])::before { content: none; }

    /* let action buttons breathe inside a card instead of being pinned to a fixed min-width */
    body.app table.tbl-cards td.table-actions { min-width: 0; width: auto; }
    body.app table.tbl-cards .row-actions { width: 100%; }
    body.app.page-users table.tbl-cards .row-actions { grid-template-columns: 1fr 1fr; }
    body.app table.tbl-cards td.table-actions:has(.handout-form) { min-width: 0; }

    /* the "Rows per page / Prev / Next" footer wraps and centres comfortably */
    body.app .tbl-foot { flex-direction: column; align-items: stretch; gap: .7rem; }
    body.app .tbl-pager { justify-content: center; }
}