/* Shared styles for the throwaway CTN onboarding demo. */
:root { --gap: 0.75rem; --accent: #1f6feb; --error: #cf222e; --ok: #1a7f37; }
* { box-sizing: border-box; }
/* The `hidden` attribute must beat element display rules (fieldset/.eh use
   display:grid, which would otherwise override [hidden]'s display:none). */
[hidden] { display: none !important; }
body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; color: #1c2128; }
h1 { font-size: 1.4rem; }
p.lead { color: #57606a; }

/* Rudimentary CTN header, shared by all pages. */
header.ctn { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 2px solid #d0d7de; margin-bottom: 1.5rem; }
header.ctn a { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
header.ctn .wordmark { font-weight: 700; font-size: 1.1rem; }
header.ctn .wordmark small { display: block; font-weight: 400; color: #57606a; }

form { display: grid; gap: var(--gap); }
label { display: grid; gap: 0.25rem; font-size: 0.9rem; font-weight: 600; }
input, select { padding: 0.5rem; font-size: 1rem; border: 1px solid #d0d7de; border-radius: 6px; }
fieldset { border: 1px solid #d0d7de; border-radius: 6px; display: grid; gap: var(--gap); }
legend { padding: 0 0.4rem; font-weight: 600; }
.field-error { color: var(--error); font-size: 0.8rem; font-weight: 400; min-height: 1rem; }
button, a.button { padding: 0.6rem 1rem; font-size: 1rem; background: var(--accent); color: #fff; border: 0; border-radius: 6px; cursor: pointer; text-decoration: none; text-align: center; display: inline-block; }
button:disabled { opacity: 0.6; cursor: default; }
a.button.secondary, button.secondary { background: #57606a; }
.config { font-size: 0.8rem; color: #57606a; }
.config input { font-size: 0.85rem; }

/* Landing page actions. */
.actions { display: grid; gap: var(--gap); max-width: 20rem; margin-top: 2rem; }

/* Admin page controls (API base + refresh). */
.controls { display: flex; align-items: flex-end; gap: var(--gap); margin-bottom: 1rem; flex-wrap: wrap; }
.controls .config { flex: 1; min-width: 14rem; }
.controls button { font-size: 0.85rem; padding: 0.4rem 0.8rem; }

/* Separator + title between the bulk-import panel and the queue. */
.requests-title { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid #d0d7de; font-size: 1.2rem; }

/* Onboarding queue table (master view). */
table.applications { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 0.5rem; }
table.applications th, table.applications td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid #d0d7de; }
table.applications th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #57606a; }
table.applications th.sortable { cursor: pointer; user-select: none; }
table.applications th.sortable:after { content: ' \2195'; opacity: 0.3; }
table.applications th.sortable.asc:after { content: ' \2191'; opacity: 1; }
table.applications th.sortable.desc:after { content: ' \2193'; opacity: 1; }
table.applications tbody tr { cursor: pointer; }
table.applications tbody tr:hover, table.applications tbody tr:focus { background: #ddf4ff; outline: none; }

/* Sortable column headers (audit page). The active sort direction is carried
   by aria-sort, so the indicator and the accessible state cannot drift. */
table.applications th[data-sort-key] { cursor: pointer; user-select: none; }
table.applications th[data-sort-key]:hover { color: #1c2128; }
table.applications th[aria-sort="ascending"]::after { content: " \25B4"; }
table.applications th[aria-sort="descending"]::after { content: " \25BE"; }

/* Application detail (detail view), rendered inside #result. */
dl.detail { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0; }
dl.detail dt { font-weight: 600; color: #57606a; }
dl.detail dd { margin: 0; overflow-wrap: anywhere; }

/* Applicant edit page: the latest decision note (the current ask). */
.note { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 6px; background: #fff8c5; border: 1px solid #d4a72c; }
.note h2 { margin-top: 0; font-size: 1rem; }
.note p { margin-bottom: 0; overflow-wrap: anywhere; }

/* Admin page identity bar. */
.identity { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: #57606a; margin-bottom: 1rem; flex-wrap: wrap; }
.badge { font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid; }
.badge.admin { color: var(--ok); border-color: var(--ok); background: #dafbe1; }
.badge.no-admin { color: var(--error); border-color: var(--error); background: #ffebe9; }
.badge.pending { color: #57606a; border-color: #57606a; background: #f6f8fa; }
.identity button { margin-left: auto; font-size: 0.8rem; padding: 0.3rem 0.7rem; }

.eh { margin: 1.5rem 0; display: grid; gap: var(--gap); }
.eh h3 { margin: 0; font-size: 1.1rem; }
.eh .lead { margin: 0; font-size: 0.9rem; }

.evidence-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 600px) { .evidence-options { grid-template-columns: 1fr; } }

#result { margin-top: 1.5rem; padding: 1rem; border-radius: 6px; display: none; }
#result.show { display: block; }
#result.ok { background: #dafbe1; border: 1px solid var(--ok); }
#result.warn { background: #fff8c5; border: 1px solid #d4a72c; }
#result.err { background: #ffebe9; border: 1px solid var(--error); }
#result h2 { margin-top: 0; font-size: 1.1rem; }
#result pre { overflow-x: auto; background: #eff1f3; padding: 0.75rem; border-radius: 6px; }
.warning-box { margin: 1rem 0; padding: 0.75rem 1rem; border-radius: 6px; background: #fff8c5; border: 1px solid #d4a72c; color: #1c2128; }
.warning-box p { margin: 0; font-size: 0.95rem; }
code { background: #eff1f3; padding: 0.1rem 0.3rem; border-radius: 4px; }