/*
 * Copyright © 2026 Spinium Property Management OÜ - All rights reserved.
 * Author: Timo J. Rinne <tri@iki.fi>
 *
 * Unreleased and unlicensed. Any use is explicitly prohibited without a prior
 * written license from Spinium Property Management OÜ (https://spinium.com).
 * See COPYING.
 */

/* The identity simulator's own pages.
 *
 * The SHELL — the palette, the rail, the cards, the tables, the forms and the
 * footer mark — is `bsim-utils/console.css`, linked before this one and shared
 * with the bank simulator's console (ROADMAP-VSIM.md §22). What is here is what
 * only this product has: the verification webview's outcome picker, the session
 * statuses, and the button that sends an end user back where they came from.
 *
 * Two audiences, one stylesheet, on purpose. The console and the webview are
 * different jobs — an operator administering the simulator, and somebody
 * pretending to be an end user filling a verification in — but the webview is a
 * page OF this product and looking like it is the honest thing. It gets no
 * rail: the layout only reserves the left edge for pages that ask for it.
 */

/* -- the webview's outcome picker --------------------------------------- *
 *
 * The list a tester chooses the verification's ending from. Radio buttons and
 * not a select, because the whole point of the page is that every ending is
 * visible at once — a dropdown hides the failure modes behind the happy one. */
.outcomes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.outcomes .outcome { display: flex; align-items: center; gap: 8px; font-size: 15px; }
/* The shell stretches every input to the width of its form; a radio is a
   symbol, not a field. */
.outcomes .outcome input { width: auto; margin: 0; }
.reason { margin: 8px 0; }

/* -- session status ------------------------------------------------------ *
 *
 * Colour alone never carries the meaning — the word is the message, and the
 * colour only makes it findable in a table of them.
 *
 * TWO vocabularies share these rules, because two vendors do (ROADMAP-VSIM.md
 * §27). They are kept as separate selectors rather than mapped onto each other:
 * SUCCESS is not `approved` and never becomes it, since one is an eID saying
 * who somebody is and the other is a decision about a document. */
.status-approved, .status-success { color: #1e7d43; font-weight: 600; }
.status-declined, .status-expired, .status-abandoned,
.status-abort, .status-error, .status-cancelled, .status-invalid {
	color: var(--danger); font-weight: 600;
}
.status-review, .status-submitted, .status-waiting_for_user {
	color: #8a6d1a; font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	.status-approved, .status-success { color: #5bbd84; }
	.status-review, .status-submitted, .status-waiting_for_user { color: #d3b45c; }
}

/* -- the way out of the webview ------------------------------------------ *
 *
 * An anchor that has to look like the primary button beside it: the end user's
 * next step is leaving, and leaving is a navigation rather than a submission. */
a.continue {
	display: inline-block; margin-top: 8px; padding: 10px 18px;
	background: var(--accent); color: #fff;
	border-radius: 6px; text-decoration: none; font-weight: 500;
}
a.continue:hover { background: var(--accent-dark); }

/* -- the integrations table ---------------------------------------------- *
 *
 * An edit form that opens under the row it belongs to rather than on a page of
 * its own: an integration is edited while its neighbours are being compared. */
.editrow > td { background: rgba(127, 127, 127, .06); }

/* -- the end-user site (ROADMAP-VSIM.md §29, §30) ------------------------- *
 *
 * The pages a NORMAL user sees: their sign-in, their templates, and the form
 * for one. They wear the same shell as the console — one stylesheet pair for
 * this product, and a tester and an operator recognise the same furniture — but
 * they have no rail, so what they need is a handful of rules the console never
 * did.
 *
 * A link that acts as a button, because "Cancel" goes somewhere and "Save"
 * happens: an <a> that submitted nothing while looking exactly like a submit
 * button would be a control that lies about what it does. */
a.button {
	display: inline-block; padding: 10px 14px; border-radius: 6px;
	background: var(--accent); color: #fff; font-size: 15px; font-weight: 500;
	text-decoration: none;
}
a.button:hover { background: var(--accent-dark); }
a.button.secondary {
	background: transparent; color: var(--accent); border: 1px solid var(--accent);
}
.buttonrow a.button { margin: 0; }

/* A sentence above a form, and a note under a field. Both are the page
 * explaining itself, and both are quieter than what they explain. */
.lede { color: var(--muted); font-size: 14px; margin: 4px 0 14px 0; }
.fieldhint { color: var(--muted); font-size: 12px; margin: -6px 0 12px 0; }

/* One template in the list. A card of its own rather than a table row: what a
 * person picks between here is people, and a person is more than a line. */
.tpl-list { list-style: none; margin: 0; padding: 0; }
.tpl {
	border: 1px solid var(--line); border-radius: 8px;
	padding: 12px 14px; margin-bottom: 10px;
}
.tpl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tpl-head code { font-size: 15px; font-weight: 600; }
.tpl-meta { font-size: 13px; margin-top: 4px; }
.tpl .buttonrow { margin: 10px 0 0 0; }

/* -- "Fill from a template" on a webview (ROADMAP-VSIM.md §31) ------------ *
 *
 * The panel the script builds. It sits above the form it fills, and it is a
 * step in front of that form rather than a part of it — hence the rule, which
 * is what says the form starts below. */
/* The control itself, and the room it needs: it sits between the page's own
 * heading and the first label of the form, and without this it reads as though
 * it belonged to that label. */
.fillregion { margin: 12px 0 16px 0; }
.fillregion button { margin-bottom: 0; }

.fillpanel {
	border: 1px solid var(--line); border-radius: 8px;
	padding: 12px 14px; margin: 10px 0 14px 0;
}
.fillpanel label { margin-top: 0; }
.fillpanel .error { margin-top: 0; }

/* What it did, said where the panel was: a person who pressed a button that
 * fills nine fields at once needs to be told it filled nine fields. */
.fillnote { color: var(--muted); font-size: 13px; margin: 8px 0 14px 0; }
.fillnote.error { color: var(--danger); }