/* ==========================================================================
   Endpoint Registration — application stylesheet
   Follows the Inexchange design manual (inexchange.com/designmanual):
     - Typography: Fraunces 400 for headlines, Inter 400/600 for body, actions and small headlines.
     - Text: soft black (#2B2E34, "Screen Text") on white; 100 % black on coloured backgrounds; white on dark.
     - Links: underlined, bold, in the text colour (black on light, white on dark).
     - Palette: Lavender, Full Pink, Watermelon, Flamingo, Lilac, Soft Pink + Silver Grey, Soft Grey, White, Black.
   Light and dark themes: the light tokens live on :root; the dark tokens on :root[data-theme="dark"] and — when no
   theme was chosen — under prefers-color-scheme: dark. Components only ever reference the semantic tokens, so the two
   dark blocks must stay identical. The only colour outside the manual is the functional green for "succeeded"
   states, which the brand palette does not provide.
   No framework, no JavaScript: design tokens, an app shell (sidebar + content), and the handful of components the
   management pages are built from.
   ========================================================================== */

/* ---------- Design tokens: light (default) ---------- */

:root {
    color-scheme: light;

    --font-headline: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;

    /* Inexchange palette */
    --ix-black: #000000;
    --ix-screen-text: #2b2e34;
    --ix-silver-grey: #d3cdd4;
    --ix-soft-grey: #f0eef0;
    --ix-white: #ffffff;
    --ix-lavender: #c187f5;
    --ix-full-pink: #ff8cec;
    --ix-watermelon: #f5627a;
    --ix-flamingo: #ffb3d6;
    --ix-lilac: #efd0eb;
    --ix-soft-pink: #f5e4f3;

    /* Semantic roles */
    --color-ink: var(--ix-screen-text);
    --color-ink-on-colour: var(--ix-black);
    --color-ink-muted: #5c6068;
    --color-ink-subtle: #7a7e86;
    --color-canvas: var(--ix-soft-grey);
    --color-surface: var(--ix-white);
    --color-surface-alt: #f8f6f8;
    --color-border: #e4e0e4;
    --color-border-strong: var(--ix-silver-grey);

    --color-accent: var(--ix-full-pink);
    --color-accent-soft: var(--ix-soft-pink);
    --color-accent-ring: rgba(255, 140, 236, 0.45);

    --color-action: var(--ix-black);
    --color-action-hover: var(--ix-screen-text);
    --color-on-action: var(--ix-white);
    --color-link: var(--ix-black);
    --color-on-tint: var(--ix-black);
    --color-input-focus-border: var(--ix-black);
    --color-control-accent: var(--ix-black);

    --color-danger: var(--ix-watermelon);
    --color-danger-hover: #e04a64;
    --color-danger-soft: #fde8ec;
    --color-danger-border: #f9b9c5;

    --color-success: #2e7d4f;
    --color-on-success: var(--ix-white);
    --color-success-soft: #e9f5ee;
    --color-success-border: #bfe3cd;

    --color-pending: var(--ix-lavender);
    --color-pending-soft: #f3e8fd;
    --color-pending-border: #e0c7fa;

    --color-sidebar: var(--ix-soft-pink);
    --color-sidebar-ink: var(--ix-black);
    --color-sidebar-hover: var(--ix-lilac);
    --color-sidebar-active: var(--ix-flamingo);
    --color-sidebar-active-ink: var(--ix-black);
    --color-sidebar-border: var(--ix-lilac);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(43, 46, 52, 0.05), 0 1px 3px rgba(43, 46, 52, 0.07);
    --shadow-md: 0 8px 20px rgba(43, 46, 52, 0.1);
    --color-backdrop: rgba(43, 46, 52, 0.5);

    --sidebar-width: 16.5rem;
    /* The content column is fluid: wide screens get wide tables, small windows still fit (tables scroll inside
       their card). Forms keep their own, narrower maximum for readability. */
    --content-max-width: none;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
}

/* ---------- Design tokens: dark — chosen explicitly ---------- */

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-ink: #f1eef1;
    --color-ink-on-colour: var(--ix-black);
    --color-ink-muted: #b9b5bb;
    --color-ink-subtle: #8f8b92;
    --color-canvas: #121114;
    --color-surface: #1c1b1f;
    --color-surface-alt: #242227;
    --color-border: #302e33;
    --color-border-strong: #4a474d;

    --color-accent-soft: rgba(255, 140, 236, 0.12);
    --color-accent-ring: rgba(255, 140, 236, 0.5);

    --color-action: var(--ix-white);
    --color-action-hover: #e6e1e6;
    --color-on-action: var(--ix-black);
    --color-link: var(--ix-white);
    --color-on-tint: #f1eef1;
    --color-input-focus-border: var(--ix-full-pink);
    --color-control-accent: var(--ix-full-pink);

    --color-danger-soft: rgba(245, 98, 122, 0.16);
    --color-danger-border: rgba(245, 98, 122, 0.5);

    --color-success: #6fcf97;
    --color-on-success: var(--ix-black);
    --color-success-soft: rgba(111, 207, 151, 0.14);
    --color-success-border: rgba(111, 207, 151, 0.45);

    --color-pending-soft: rgba(193, 135, 245, 0.16);
    --color-pending-border: rgba(193, 135, 245, 0.5);

    --color-sidebar: #17161a;
    --color-sidebar-ink: var(--ix-white);
    --color-sidebar-hover: rgba(255, 140, 236, 0.12);
    --color-sidebar-active: var(--ix-full-pink);
    --color-sidebar-active-ink: var(--ix-black);
    --color-sidebar-border: #302e33;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55);
    --color-backdrop: rgba(0, 0, 0, 0.7);
}

/* ---------- Design tokens: dark — following the operating system (no explicit choice) ---------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-ink: #f1eef1;
        --color-ink-on-colour: var(--ix-black);
        --color-ink-muted: #b9b5bb;
        --color-ink-subtle: #8f8b92;
        --color-canvas: #121114;
        --color-surface: #1c1b1f;
        --color-surface-alt: #242227;
        --color-border: #302e33;
        --color-border-strong: #4a474d;

        --color-accent-soft: rgba(255, 140, 236, 0.12);
        --color-accent-ring: rgba(255, 140, 236, 0.5);

        --color-action: var(--ix-white);
        --color-action-hover: #e6e1e6;
        --color-on-action: var(--ix-black);
        --color-link: var(--ix-white);
        --color-on-tint: #f1eef1;
        --color-input-focus-border: var(--ix-full-pink);
        --color-control-accent: var(--ix-full-pink);

        --color-danger-soft: rgba(245, 98, 122, 0.16);
        --color-danger-border: rgba(245, 98, 122, 0.5);

        --color-success: #6fcf97;
        --color-on-success: var(--ix-black);
        --color-success-soft: rgba(111, 207, 151, 0.14);
        --color-success-border: rgba(111, 207, 151, 0.45);

        --color-pending-soft: rgba(193, 135, 245, 0.16);
        --color-pending-border: rgba(193, 135, 245, 0.5);

        --color-sidebar: #17161a;
        --color-sidebar-ink: var(--ix-white);
        --color-sidebar-hover: rgba(255, 140, 236, 0.12);
        --color-sidebar-active: var(--ix-full-pink);
        --color-sidebar-active-ink: var(--ix-black);
        --color-sidebar-border: #302e33;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55);
    --color-backdrop: rgba(0, 0, 0, 0.7);
    }
}

/* ---------- Base ---------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--color-ink);
    background: var(--color-canvas);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-headline);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--color-ink);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.3rem;
}

p {
    margin: 0 0 0.75rem;
}

/* The manual: links are underlined and bold, in the text colour. */
a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-color: var(--color-accent);
}

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface-alt);
    color: var(--color-ink);
    word-break: break-all;
}

:focus-visible {
    outline: 3px solid var(--color-accent-ring);
    outline-offset: 2px;
}

/* ---------- App shell ---------- */

.appShell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1rem;
    background: var(--color-sidebar);
    color: var(--color-sidebar-ink);
    border-right: 1px solid var(--color-sidebar-border);
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0.75rem 1.5rem;
    color: var(--color-sidebar-ink);
    text-decoration: none;
}

.brand:hover {
    text-decoration: none;
}

/* The company name set as type — the official Inexchange wordmark (black on light, white on dark) lives in the
   Stockpress asset library and can replace this span as an SVG; keep the "H"-width clear space around it. */
.brandWordmark {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-sidebar-ink);
}

.brandProduct {
    font-family: var(--font-headline);
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--color-sidebar-ink);
}

.navSection {
    margin-top: 0.75rem;
}

.navSectionTitle {
    margin: 0 0 0.3rem;
    padding: 0 0.75rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-pill);
    color: var(--color-sidebar-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar nav a:hover {
    background: var(--color-sidebar-hover);
    text-decoration: none;
}

.sidebar nav a.active {
    background: var(--color-sidebar-active);
    color: var(--color-sidebar-active-ink);
}

.sidebarFooter {
    display: grid;
    gap: 0.6rem;
    margin-top: auto;
    padding: 1rem 0.75rem 0;
    border-top: 1px solid var(--color-sidebar-border);
    font-size: 0.9rem;
}

.sidebarFooter .userName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* ---------- Theme switch (System / Light / Dark) ---------- */

.themeSwitch {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.2rem;
    border: 1px solid var(--color-sidebar-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.themeSwitch a {
    flex: 1;
    padding: 0.28rem 0.7rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink);
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.themeSwitch a:hover {
    background: var(--color-accent-soft);
    text-decoration: none;
}

.themeSwitch a.active {
    background: var(--color-action);
    color: var(--color-on-action);
}

.content {
    width: 100%;
    max-width: var(--content-max-width);
    padding: 2.25rem 2.5rem 3rem;
}

/* ---------- Page header ---------- */

.pageHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pageHeader h1 {
    margin: 0;
}

.pageLead {
    margin: 0.4rem 0 0;
    max-width: 60rem;
    color: var(--color-ink-muted);
}

.pageActions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- Cards & surfaces ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card.tableWrapper {
    overflow-x: auto;
}

.form.card {
    padding: 1.75rem 2rem;
}

.emptyState {
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink-muted);
    text-align: center;
}

.loading {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-ink-muted);
}

.loading::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.hint {
    color: var(--color-ink-subtle);
    font-weight: 400;
    font-size: 0.9em;
}

/* ---------- Alerts ---------- */

.error,
.success {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid;
    border-radius: var(--radius-md);
    color: var(--color-on-tint);
    line-height: 1.45;
}

.error::before,
.success::before {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.error {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-border);
}

.error::before {
    content: "!";
    background: var(--color-danger);
    color: var(--ix-black);
}

.success {
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
}

.success::before {
    content: "\2713";
    background: var(--color-success);
    color: var(--color-on-success);
}

.success code {
    background: var(--color-surface);
    border-color: var(--color-success-border);
}

/* ---------- Buttons & button-styled links ---------- */

button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--color-action);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button:hover,
a.button:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    text-decoration: none;
}

button:disabled {
    cursor: wait;
    opacity: 0.5;
}

button.secondary,
a.button.secondary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-ink);
}

button.secondary:hover,
a.button.secondary:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-link);
}

/* The destructive confirmation: filled Watermelon so it is unmistakably the dangerous choice, with 100 % black type as
   the manual prescribes on a colour background. Same in both themes — the colour is the brand's, not the surface's. */
button.danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--ix-black);
}

button.danger:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    color: var(--ix-black);
}

button.danger:focus-visible {
    outline-color: rgba(245, 98, 122, 0.45);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
}

.rowActions {
    white-space: nowrap;
}

.rowActions > * + * {
    margin-left: 0.4rem;
}

.rowActions button,
.rowActions a.button {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

/* ---------- Tables ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

th,
td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--color-surface-alt);
    color: var(--color-ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

thead th:first-child {
    border-top-left-radius: var(--radius-lg);
}

thead th:last-child {
    border-top-right-radius: var(--radius-lg);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover td {
    background: var(--color-accent-soft);
}

td.nowrap {
    white-space: nowrap;
}

/* ---------- Status badges ---------- */

.badge {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--color-on-tint);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.badge.succeeded {
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.badge.failed {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.badge.pending {
    background: var(--color-pending-soft);
    border-color: var(--color-pending);
}

.badge.muted {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-ink-subtle);
}

/* A document type reads as its name, not as its identifier: the badge keeps the name legible at a glance in a table
   otherwise full of URNs, and the identifier stays one hover (or one panel) away. */
.badge.documentType {
    background: var(--color-success-soft);
    border-color: var(--color-success-border);
    color: var(--color-success);
    white-space: normal;
}

a:has(> .badge.documentType) {
    text-decoration: none;
}

a:hover > .badge.documentType,
a:focus-visible > .badge.documentType {
    border-color: var(--color-success);
}

/* ---------- Annuaire progression ---------- */

.progression {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.progression li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

/* A stage that can no longer arrive recedes, so the eye lands on where the registration actually stands. */
.progression li.notReported {
    opacity: 0.6;
}

.progressionMarker {
    flex: 0 0 1.25rem;
    text-align: center;
    font-weight: 700;
    line-height: 1.5;
}

.progressionMain {
    display: grid;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.progressionTitle {
    font-weight: 600;
}

.progressionMeta {
    color: var(--color-ink-subtle);
    font-size: 0.85em;
}

/* ---------- List querying: filter bar and sortable headers ---------- */

.filterBar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
}

.filterBar label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--color-ink-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.filterBar input,
.filterBar select {
    min-width: 14rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-weight: 400;
}

/* A page size holds at most three digits, so its picker need not span the width of a search field. */
.filterBar select.pageSizeSelect {
    min-width: 6rem;
}

.filterBar input:focus,
.filterBar select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

th.sortable {
    padding: 0;
}

/* The heading text is the control: a reset button that takes the cell padding and inherits the header typography. */
.sortButton {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem 1rem;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.sortButton:hover {
    color: var(--color-ink);
    background: var(--color-accent-soft);
}

.sortButton:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.sortIndicator {
    opacity: 0.5;
    font-size: 0.7rem;
}

th[aria-sort="ascending"] .sortIndicator,
th[aria-sort="descending"] .sortIndicator {
    opacity: 1;
    color: var(--color-accent);
}

/* ---------- Pagination ---------- */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}

.paginationStatus {
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* ---------- Disclosure (details/summary) ---------- */

details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.15em;
    cursor: pointer;
    user-select: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: "\25B8";
    display: inline-block;
    transition: transform 0.15s ease;
}

details[open] summary::before {
    transform: rotate(90deg);
}

details ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.3rem;
}

details dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0.5rem 0 0;
}

details dl dt {
    margin: 0;
    color: var(--color-ink-subtle);
    font-size: 0.85rem;
    font-weight: 600;
}

details dl dd {
    margin: 0;
}

dl dt {
    font-weight: 600;
}

dl dd {
    margin-left: 0;
}

/* ---------- Forms ---------- */

.form {
    display: grid;
    gap: 1.1rem;
    max-width: 52rem;
}

.formRow {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.formRow label {
    font-weight: 600;
    color: var(--color-ink);
}

.formRow input,
.formRow select,
.formRow textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formRow input:focus,
.formRow select:focus,
.formRow textarea:focus {
    outline: none;
    border-color: var(--color-input-focus-border);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.formRow input::placeholder {
    color: var(--color-ink-subtle);
}

/* A value made of several entries (the callback scopes): one field per entry, stacked, each removable on its own,
   with the button that appends another below them. */
.fieldList {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.inputWithAction {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.inputWithAction input {
    flex: 1 1 auto;
    min-width: 0;
}

.inputWithAction button {
    flex: 0 0 auto;
}

.fieldRemove {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink-subtle);
    font-size: 1.15rem;
    line-height: 1;
}

.fieldRemove:hover,
.fieldRemove:focus-visible {
    color: var(--color-danger);
}

.fieldRemove:focus-visible {
    outline: 2px solid var(--color-accent-ring);
}

/* The search picker (SearchPicker.razor): a combobox whose matches drop down under the text box. */
.searchPicker {
    position: relative;
}

.searchPickerField {
    position: relative;
}

.searchPickerField .searchPickerInput {
    padding-right: 2.5rem;
}

.searchPickerClear {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-subtle);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.searchPickerClear:hover,
.searchPickerClear:focus-visible {
    color: var(--color-ink);
    background: var(--color-accent-soft);
}

.searchPickerList {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.searchPickerOption {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
}

.searchPickerOption[aria-selected="true"] {
    background: var(--color-accent-soft);
    color: var(--color-on-tint);
}

.searchPickerOptionMeta {
    color: var(--color-ink-subtle);
    font-size: 0.85em;
}

.searchPickerOption[aria-selected="true"] .searchPickerOptionMeta {
    color: inherit;
}

.searchPickerMessage {
    padding: 0.5rem 0.85rem;
    color: var(--color-ink-subtle);
    font-size: 0.9em;
}

.searchPickerError {
    color: var(--color-danger);
}

fieldset {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

legend {
    padding: 0 0.4rem;
    font-family: var(--font-headline);
    font-size: 1.1rem;
}

/* Read-only label/value pairs on a detail page. */
.detailList {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1.5rem;
    margin: 0;
}

.detailList dt {
    color: var(--color-ink-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    align-self: baseline;
}

.detailList dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Compact rows of items with an action at the end — the documents in a package, the search results to add from. */
.itemList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.itemList li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.itemList li:hover {
    border-color: var(--color-border-strong);
    background: var(--color-accent-soft);
}

.itemMain {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}

.itemTitle {
    font-weight: 600;
}

.itemMeta {
    font-size: 0.85rem;
    color: var(--color-ink-muted);
    overflow-wrap: anywhere;
}

.itemActions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.itemActions button {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

input[type="search"] {
    appearance: none;
}

input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--color-control-accent);
    cursor: pointer;
}

/* A link that leaves this application (opens in a new tab), marked with an arrow so the jump is expected. */
.externalLink::after {
    content: " \2197";
    font-size: 0.85em;
}

/* A small link placed beside another control, e.g. the "Open" link next to a document checkbox. */
.inlineLink {
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ---------- Landing page ---------- */

/* Brand-coloured surface in both themes, so its text is 100 % black as the manual prescribes for colour backgrounds. */
.hero {
    padding: 2.75rem 2.5rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--ix-soft-pink) 0%, var(--ix-lilac) 55%, var(--ix-flamingo) 100%);
    color: var(--ix-black);
    box-shadow: var(--shadow-md);
}

.hero h1 {
    margin-bottom: 0.75rem;
    font-size: 2.4rem;
    color: var(--ix-black);
}

.hero p {
    max-width: 40rem;
    color: var(--ix-black);
}

.hero a.button {
    margin-top: 0.5rem;
    background: var(--ix-black);
    border-color: var(--ix-black);
    color: var(--ix-white);
}

.hero a.button:hover {
    background: var(--ix-screen-text);
    border-color: var(--ix-screen-text);
}

.tileGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tile {
    display: block;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
    font-weight: 400;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.tile:hover {
    border-color: var(--color-link);
    background: var(--color-accent-soft);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}

.tile h2 {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    color: var(--color-link);
}

.tile p {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: 0.9rem;
}

/* ---------- Modal dialog ---------- */

.modalBackdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--color-backdrop);
}

.modal {
    width: min(32rem, 100%);
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
}

.modal h2 {
    margin-bottom: 0.6rem;
}

.modal p {
    margin-bottom: 0.5rem;
}

.modal .error {
    margin-top: 0.75rem;
}

.modalActions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ---------- Participant rows ---------- */

/* A network whose participants are entered as rows widens the registration form to fit the grid; the form's own
   label/field rows keep their usual width. */
.form.bulkForm {
    max-width: none;
}

.bulkForm .formRow {
    max-width: 52rem;
}

.bulkForm .tableWrapper {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.bulkTable th,
.bulkTable td {
    padding: 0.5rem 0.6rem;
    vertical-align: middle;
}

.bulkTable input,
.bulkTable select {
    width: 100%;
    min-width: 9rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* A participant row's search picker lists its matches in the cell's flow rather than floating over the rows: the
   table wrapper scrolls horizontally, so a floating list would be clipped inside it. */
.bulkTable .searchPicker {
    min-width: 12rem;
}

.bulkTable .searchPickerList {
    position: static;
    margin-top: 0.25rem;
}

.bulkTable input.countryCode {
    min-width: 4.5rem;
    text-transform: uppercase;
}

.bulkTable input:focus,
.bulkTable select:focus {
    outline: none;
    border-color: var(--color-input-focus-border);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.bulkTable input:disabled,
.bulkTable select:disabled {
    background: var(--color-surface-alt);
    color: var(--color-ink-muted);
}

/* The status cell stacks the badge over the registration it created, or over why it failed. */
.bulkRowStatus {
    min-width: 14rem;
}

.bulkRowStatusContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* The "+" under the rows that appends another participant. */
.bulkTable tfoot td {
    border-bottom: none;
}

button.addParticipant {
    min-width: 2.25rem;
    padding: 0.2rem 0.65rem;
    font-size: 1.15rem;
    line-height: 1.4;
}

.bulkRowError {
    color: var(--color-danger);
    font-size: 0.85rem;
}

/* ---------- NemHandel access point links ---------- */

/* Each VAX instance's row carries the picker its link is changed with, styled like the participant rows' pickers. */
.accessPointLinks td {
    vertical-align: middle;
}

.accessPointLinks select {
    width: 100%;
    min-width: 12rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.accessPointLinks select:focus {
    outline: none;
    border-color: var(--color-input-focus-border);
    box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.accessPointLinks select:disabled {
    background: var(--color-surface-alt);
    color: var(--color-ink-muted);
}

.accessPointLinks td .error {
    margin: 0.5rem 0 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .appShell {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1rem;
        padding: 0.75rem 1rem;
        border-right: none;
        border-bottom: 1px solid var(--color-sidebar-border);
    }

    .brand {
        padding: 0;
    }

    .brandProduct {
        font-size: 1.1rem;
    }

    .sidebar nav {
        display: contents;
    }

    .navSection {
        display: flex;
        gap: 0.25rem;
        margin: 0;
    }

    .navSectionTitle {
        display: none;
    }

    .sidebarFooter {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-left: auto;
        padding: 0;
        border: none;
    }

    .content {
        padding: 1.25rem 1rem 2rem;
    }

    h1 {
        font-size: 1.6rem;
    }

    .formRow {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .form.card {
        padding: 1.25rem;
    }
}