/* Peppol gateway operator dashboard. One quiet system; the customer lifecycle rail is the only
   loud element. Codes (org numbers, participant ids, key ids) are set in mono because they are
   read character by character. */
:root {
    --ink: #17232f;
    --ink-soft: #4a5866;
    --paper: #eef1f4;
    --surface: #ffffff;
    --rule: #d3dae1;
    --route: #1d5c8c;
    --route-soft: #e1ecf5;
    --pending: #8a5a00;
    --pending-bg: #fff2d6;
    --active: #1e6b3a;
    --active-bg: #e0f1e6;
    --suspended: #a1261c;
    --suspended-bg: #fbe3e0;
    --offboarded: #4a5560;
    --offboarded-bg: #e6eaee;
    --route-deep: #154769;
    --dev: #7a4b00;
    --dev-bg: #fff8e8;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); }
body { margin: 0; }

a { color: var(--route); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--route); outline-offset: 2px; }

.bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem;
    padding: .75rem max(1rem, calc((100vw - 72rem) / 2));
    background: var(--ink); color: #fff;
}
.bar a { color: #fff; text-decoration: none; }
.brand { font-weight: 650; letter-spacing: -.01em; }
.brand-env { margin-left: .5rem; padding: .05rem .4rem; border: 1px solid #ffffff55; border-radius: 3px; font-size: .75rem; font-weight: 500; }
.bar nav { display: flex; gap: 1.25rem; }
.bar nav a { padding: .25rem 0; border-bottom: 2px solid transparent; }
.bar nav a[aria-current="page"] { border-bottom-color: #fff; }
.who { margin-left: auto; display: flex; gap: .75rem; align-items: center; font-size: .9rem; color: #c9d3dc; }
.who .link, .who .link:hover { color: #fff; }

main { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 4rem; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .25rem; letter-spacing: -.015em; }
h2 { font-size: 1.05rem; margin: 2.25rem 0 .75rem; }
.lede { margin: 0 0 1.5rem; color: var(--ink-soft); max-width: 60ch; }

.code { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }

.notice { padding: .6rem .9rem; background: var(--route-soft); border-left: 4px solid var(--route); margin: 0 0 1.5rem; }
.alert { padding: .6rem .9rem; color: var(--suspended); background: var(--suspended-bg); border-left: 4px solid var(--suspended); font-weight: 600; margin: 0 0 1.5rem; }
.error { padding: .6rem .9rem; background: var(--suspended-bg); border-left: 4px solid var(--suspended); color: var(--suspended); margin: 0 0 1rem; }
.warning { padding: .9rem 1rem; background: var(--pending-bg); border-left: 4px solid var(--pending); margin: 0 0 1rem; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: .8rem; font-weight: 600; color: var(--ink-soft); background: #f7f9fa; white-space: nowrap; }
tbody tr:hover td { background: #f6f9fb; }
tr:last-child td { border-bottom: 0; }
/* Empty tables say what fills them; not a table row that looks like data. */
td.empty { padding: 1.5rem .8rem; color: var(--ink-soft); text-align: center; background: repeating-linear-gradient(135deg, transparent 0 8px, #f4f6f8 8px 9px); }
tbody tr:hover td.empty { background: repeating-linear-gradient(135deg, transparent 0 8px, #f4f6f8 8px 9px); }
td.when, .nowrap { white-space: nowrap; }
td.details { font-size: .82rem; color: var(--ink-soft); word-break: break-word; }
.table-wrap { overflow-x: auto; }

/* A dot as well as a colour, so the status reads without colour vision. */
.status { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .5rem; border-radius: 3px; font-size: .78rem; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.status-suspended::before { border-radius: 1px; }
.status-offboarded::before { background: transparent; border: 1.5px solid currentColor; }
.status-pending { color: var(--pending); background: var(--pending-bg); }
.status-active { color: var(--active); background: var(--active-bg); }
.status-suspended { color: var(--suspended); background: var(--suspended-bg); }
.status-offboarded { color: var(--offboarded); background: var(--offboarded-bg); }

/* The lifecycle rail: where this customer is on PENDING → ACTIVE ⇄ SUSPENDED → OFFBOARDED. */
.rail { display: flex; flex-wrap: wrap; margin: 1.5rem 0 1rem; padding: 0; list-style: none; counter-reset: none; }
.rail li {
    flex: 1 1 8rem; padding: .7rem .9rem; border: 1px solid var(--rule); border-right-width: 0;
    background: var(--surface); color: var(--ink-soft); font-size: .85rem;
}
.rail li:last-child { border-right-width: 1px; }
.rail li strong { display: block; color: var(--ink); font-size: .95rem; }
.rail li[aria-current="step"] { border-top: 4px solid currentColor; padding-top: calc(.7rem - 3px); }
.rail li.status-pending[aria-current="step"] { background: var(--pending-bg); color: var(--pending); }
.rail li.status-active[aria-current="step"] { background: var(--active-bg); color: var(--active); }
.rail li.status-suspended[aria-current="step"] { background: var(--suspended-bg); color: var(--suspended); }
.rail li.status-offboarded[aria-current="step"] { background: var(--offboarded-bg); color: var(--offboarded); }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0 0 .5rem; }
.actions p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; }
.head:has(> h2) { align-items: baseline; margin: 2.25rem 0 .75rem; }
.head > h2 { margin: 0; }
.head dl { display: flex; gap: 2rem; margin: 0; }
.head dt { font-size: .8rem; color: var(--ink-soft); }
.head dd { margin: 0; }
dl.facts { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 .75rem; }
dl.facts dt { font-size: .8rem; color: var(--ink-soft); }
dl.facts dd { margin: 0; }

form.stack { display: grid; gap: 1rem; max-width: 32rem; background: var(--surface); border: 1px solid var(--rule); padding: 1.25rem; }
label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; }
label .hint { font-weight: 400; color: var(--ink-soft); }
input[type=text], input[type=date], select { font: inherit; padding: .5rem .6rem; border: 1px solid #aab5c0; border-radius: 3px; background: #fff; color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .4rem; }
legend { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
fieldset label { display: flex; gap: .5rem; font-weight: 400; }

button, .button {
    font: inherit; font-weight: 600; padding: .5rem 1rem; border-radius: 3px; cursor: pointer;
    border: 1px solid var(--route); background: var(--route); color: #fff; text-decoration: none; display: inline-block;
}
button:hover:not(:disabled), .button:hover { background: var(--route-deep); border-color: var(--route-deep); }
button.secondary { background: var(--surface); color: var(--route); }
button.secondary:hover:not(:disabled) { background: var(--route-soft); color: var(--route-deep); }
button.danger:hover:not(:disabled), .button.danger:hover { background: var(--suspended-bg); border-color: var(--suspended); }
button.danger, .button.danger { background: var(--surface); color: var(--suspended); border-color: var(--suspended); }
button.link, button.link:hover { border: 0; background: none; padding: 0; font-weight: 400; text-decoration: underline; color: var(--route); }
button:disabled { opacity: .5; cursor: not-allowed; }

.split { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }
.roles { background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.25rem; }
.roles h2 { margin-top: 0; }
.roles ul { margin: .25rem 0 1rem; padding-left: 1.1rem; }
ul.evidence { margin: 0; padding-left: 1rem; }
.muted { color: var(--ink-soft); }

.secret { display: block; padding: .9rem 1rem; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .95rem; word-break: break-all; user-select: all; }

.login { max-width: 28rem; margin: 3rem auto 0; background: var(--surface); border: 1px solid var(--rule); padding: 2rem; }
.login h1 { margin-bottom: .5rem; }
.login > .muted { margin: 0 0 1.25rem; }
.login form { display: grid; gap: .75rem; margin-top: 1.5rem; }

/* Development login: visibly not the real door. Amber, dashed, sits under the provider card. */
.login.devlogin { margin-top: 1.25rem; border: 2px dashed #d9a441; background: var(--dev-bg); padding: 1.5rem 2rem; }
.devlogin h2 { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--dev); }
.devlogin-tag { display: inline-block; margin: 0 0 .6rem; padding: .05rem .5rem; border-radius: 3px; background: var(--dev); color: #fff; font-size: .75rem; font-weight: 650; }
.devlogin-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.devlogin-list form { margin: 0; }
.devlogin-list button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; text-align: left; border-color: #d9a441; color: var(--ink); }
.devlogin-list button:hover:not(:disabled) { background: #fff; border-color: var(--dev); color: var(--ink); }
.devlogin-id { font-weight: 400; font-size: .8rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.empty-note { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--rule); font-size: .9rem; }
.filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: 0 0 1rem; }
.quick-views { display: flex; gap: .25rem; margin: 0 0 .75rem; }
.quick-views a { padding: .3rem .7rem; border: 1px solid var(--border, #d5dae1); border-radius: 999px; text-decoration: none; font-size: .875rem; }
.quick-views a.current { background: var(--ink, #1c2430); color: #fff; border-color: transparent; }
select { font: inherit; padding: .45rem .5rem; border: 1px solid #aab5c0; border-radius: 3px; background: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Documents: the pager, key/value metadata and the payload, which is shown only on request. */
.pager { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 0; font-size: .9rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0 0 1rem; background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.25rem; }
.facts dt { font-size: .85rem; color: var(--ink-soft); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.payload { max-height: 70vh; overflow: auto; margin: 0; padding: 1rem; background: var(--surface); border: 1px solid var(--rule); font-family: var(--mono); font-size: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.num { text-align: right; font-variant-numeric: tabular-nums; }