html, body {
    font-family: 'Nunito', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
}

/* Design tokens (redesign, #126).
   Every text/background pair reaches WCAG AA (4.5:1) in both modes — five
   values were darkened against the proposal to get there. */
:root, [data-theme="dark"] {
    --accent: #9d6bff;
    --accent-soft: rgba(157, 107, 255, 0.12);
    --accent-ring: rgba(157, 107, 255, 0.55);
    --on-accent: #120e1f; /* text and icons on a filled accent button, 5.3:1 */

    --ok: #2fd08a;
    --warn: #f5b544;
    --danger: #ff7a7a;
    --info: #6aa8ff;
    --neutral: #a39dba; /* Stopped, Queued, Cancelled invoice */
    --ok-soft: rgba(47, 208, 138, 0.14); /* chip and banner fills */
    --warn-soft: rgba(245, 181, 68, 0.14);
    --danger-soft: rgba(255, 122, 122, 0.14);
    --info-soft: rgba(106, 168, 255, 0.14);
    --neutral-soft: rgba(163, 157, 186, 0.14);

    --bg: #0d0b16;                   /* the page; the sidebar sits one step above it */
    --sidebar: #110e1a; /* drawer background, between bg and surface */
    --surface: #161320;
    --surface-2: #1e1a2c;
    --surface-3: #282239; /* "Removed"/"Unknown" chip, skeleton highlight */
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.17);

    --text: #ece9f6;
    --text-2: #b3aecb;
    --text-3: #8f89a8;               /* ≥ 4.5:1 on every dark surface */

    --radius: 12px;
    --radius-sm: 10px; /* buttons, inputs, nav items */
    --font-display: "Quicksand", system-ui, sans-serif;
    --font-body: "Nunito", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="light"] {
    --accent: #7c3aed;
    --accent-soft: rgba(124, 58, 237, 0.10);
    --accent-ring: rgba(124, 58, 237, 0.45);
    --on-accent: #ffffff;            /* 6.4:1 on #7c3aed */

    --ok: #12733a;                   /* own light set — the dark values are ~2:1 on white */
    --warn: #a14a07;
    --danger: #c81d1d;
    --info: #1d4ed8;
    --neutral: #625c7c;
    --ok-soft: rgba(21, 128, 61, 0.11);
    --warn-soft: rgba(180, 83, 9, 0.11);
    --danger-soft: rgba(220, 38, 38, 0.09);
    --info-soft: rgba(29, 78, 216, 0.09);
    --neutral-soft: rgba(98, 92, 124, 0.11);

    --bg: #f3f2f8;
    --sidebar: #faf9fd;
    --surface: #ffffff;
    --surface-2: #efedf6;
    --surface-3: #e5e2ef;
    --border: rgba(36, 24, 70, 0.11);
    --border-strong: rgba(36, 24, 70, 0.20);

    --text: #1b1730;
    --text-2: #524c6b;
    --text-3: #69637f;               /* ≥ 4.5:1 on every light surface */
}

/* Flat background — deliberately no glow gradients here (portal ≠ bot). */
body {
    background: var(--bg) !important;
}

/* A visible focus ring on every control (WCAG 2.2 AA). MudBlazor drops the
   browser's outline on its buttons and links, so it is put back here. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
.mud-nav-link:focus-visible {
    outline: 2px solid var(--accent-ring) !important;
    outline-offset: 2px;
}

/* The heading the focus is moved to after a navigation (Routes.razor) is
   not a control: no ring there. */
h1[tabindex="-1"]:focus { outline: none; }

/* Quiet chrome: hairline borders instead of blur + translucency. */
.mud-appbar {
    border-bottom: 1px solid var(--border) !important;
}
.mud-drawer {
    border-right: 1px solid var(--border) !important;
}

/* ---------- Shell: drawer, app bar, menus (#126) ---------- */

/* Shown only below 1280 px, where the drawer lies over the page: the menu
   button and the brand in the app bar, the close button in the drawer. */
@media (min-width: 1280px) {
    .portal-only-narrow { display: none !important; }
}

.portal-appbar { gap: 4px; }
.portal-appbar-brand {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

/* Language switch (#125): a two-part pill, DE | EN — full names on the
   security page. The current language is filled, the other one is the button
   you press. */
.portal-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    margin: 0 4px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
}
.portal-lang-option {
    min-width: 36px;
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.portal-lang-option:hover { color: var(--text); background: var(--surface-2); }
.portal-lang-option.is-current { background: var(--accent-soft); color: var(--accent); cursor: default; }
.portal-lang.is-wide { margin: 0; align-self: flex-start; width: fit-content; }
/* A phone's app bar has no room for both: it offers only the other language —
   the page itself says which one is current. */
@media (max-width: 599.98px) {
    .portal-lang:not(.is-wide) { margin: 0 2px; }
    .portal-lang:not(.is-wide) .portal-lang-option.is-current { display: none; }
}
.portal-lang.is-wide .portal-lang-option { min-height: 34px; padding: 0 16px; font-size: 0.9rem; letter-spacing: 0; }

.portal-brandmark { display: inline-flex; align-items: center; gap: 12px; }
.portal-brandmark svg { flex: none; }
.portal-brandmark-text { display: flex; flex-direction: column; line-height: 1.15; }
.portal-brand-name {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.02em;
    color: var(--text);
}
.portal-brand-name span { color: var(--accent); }
.portal-brand-sub {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
}

.mud-drawer { background: var(--sidebar) !important; }

.portal-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.portal-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 8px 10px 20px;
}
.portal-brand-link { color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.portal-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 12px;
}

/* Group labels: "Workspace", and the operators' "Platform" in amber after a
   dashed rule. */
.portal-nav-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 24px 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}
.portal-nav-section.is-platform { color: var(--warn); }
.portal-nav-section .mud-icon-root { font-size: 14px; }
.portal-nav-divider { margin: 14px 12px 10px; border-top: 1px dashed var(--border-strong); }

/* Nav items may wrap to two lines — German labels are a third longer. */
.portal-nav { padding: 0 12px; }
.portal-nav .mud-nav-link {
    min-height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: var(--radius-sm) !important;
    color: var(--text-2);
    font-weight: 700;
    align-items: center;
}
.portal-nav .mud-nav-link-text { white-space: normal; line-height: 1.3; }
.portal-nav .mud-nav-link .mud-nav-link-icon { color: var(--text-3); }

/* The active item: soft accent fill and a bar on the drawer's edge. */
.mud-nav-link.active, .mud-nav-link[aria-current="page"] {
    background: var(--accent-soft) !important;
    position: relative;
    color: var(--accent) !important;
}
.mud-nav-link.active .mud-nav-link-icon { color: var(--accent) !important; }
.mud-nav-link.active::before, .mud-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}

/* A nav label with a badge after it ("1 left", "2", "3 waiting"). */
.portal-nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.portal-nav-label > span:first-child { flex: 1 1 auto; }
.portal-nav-badge {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.portal-nav-badge.is-warn { background: var(--warn-soft); color: var(--warn); }
.portal-nav-badge.is-danger { background: var(--danger-soft); color: var(--danger); }

.portal-sidebar-footer {
    padding: 12px 24px;
    border-top: 1px solid var(--border);
}

/* The page under the app bar: its content, then the legal links at the
   bottom of the window — or after the content, when that is longer. */
.portal-main {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    box-sizing: border-box;
}
.portal-main-content { flex: 1 0 auto; width: 100%; }
.portal-page-footer { padding: 8px 24px 24px; }
.portal-auth-legal { display: flex; justify-content: center; }
.portal-version { color: var(--text-3); }

.portal-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Menus (workspace switcher, account): a card with a hairline. */
.portal-menu-popover {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
/* Inset from the menu's edge; width auto, not MudBlazor's 100 %, or the
   margin makes the list scroll sideways. */
.portal-menu-popover .mud-menu-item { min-height: 40px; border-radius: 8px; margin: 0 6px; width: auto; }
.portal-menu-heading {
    padding: 10px 16px 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}
.portal-menu-current { background: var(--accent-soft); }
.portal-menu-current .portal-workspace-name { color: var(--accent); }

/* ---------- ServerLocation: not placed yet ----------
   A state, not a country — muted and set in italics so it does not read as
   one in a column of country names. */
.server-location-pending {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}


/* ============================================================
   Part 2 — sign-in surfaces. The auth pages use plain HTML inputs
   (a browser form POST is the only way to set the auth cookie), so
   they are styled here to match the MudBlazor fields elsewhere.
   ============================================================ */
.portal-auth-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 32px;
}
.portal-auth-top { display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--text-2); }
.portal-auth-main {
    flex: 1;
    width: 100%;
    max-width: 26.5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding-bottom: 6vh;
}
.portal-auth-brand { display: flex; justify-content: center; }
.portal-auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* A phone: no card — the form sits on the page, the brand starts left. */
@media (max-width: 599.98px) {
    .portal-auth-shell { padding: 8px 20px 24px; }
    .portal-auth-main { justify-content: flex-start; padding-top: 8px; }
    .portal-auth-brand { justify-content: flex-start; }
    .portal-auth-card { background: none; border: none; padding: 0; }
}

.portal-auth-head { display: flex; flex-direction: column; gap: 4px; }
.portal-auth-title {
    margin: 0;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.portal-auth-lead { margin: 0; font-size: 14.5px; color: var(--text-2); }
.portal-auth-head.is-centred { align-items: center; text-align: center; }
.portal-auth-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.portal-auth-icon.is-muted { background: var(--surface-3); color: var(--text-2); }
.portal-auth-foot { margin: 0; text-align: center; font-size: 14px; color: var(--text-2); }
.portal-auth-foot a { font-weight: 800; color: var(--accent); text-decoration: none; }
.portal-auth-foot a:hover { text-decoration: underline; }
.portal-auth-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.portal-auth-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-auth-actions > .mud-button-root { flex: 1 1 auto; min-height: 44px; }
.portal-auth-meta { margin: 0; font-size: 13px; color: var(--text-3); }
/* A quiet link that belongs to the field above it ("Forgot your password?"). */
.portal-auth-aside { align-self: flex-end; margin-top: -6px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.portal-auth-aside:hover { text-decoration: underline; }

.portal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.portal-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.portal-field > span {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
}
.portal-field > span em {
    font-style: normal;
    font-weight: 600;
    color: var(--text-3);
    margin-left: 4px;
}
.portal-field input {
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 11px 13px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.portal-field input::placeholder { color: var(--text-3); opacity: 1; }
.portal-field input.is-code { font-family: var(--font-mono), monospace; letter-spacing: 0.14em; }
.portal-field input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.portal-field small {
    font-size: 12px;
    color: var(--text-3);
}

.portal-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--text-2);
    cursor: pointer;
}
.portal-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.portal-submit {
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    color: var(--on-accent);
    background: var(--accent);
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 4px;
    cursor: pointer;
    transition: filter 120ms ease;
}
.portal-submit:hover { filter: brightness(1.08); }
.portal-submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.portal-submit-quiet {
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border-strong);
}

/* ---------- Workspace switcher and account menu ---------- */
.portal-workspace { padding: 4px 12px 14px; }
.portal-workspace .mud-menu { width: 100%; }
.portal-workspace-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 52px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.portal-workspace-button:hover { border-color: var(--border-strong); }
.portal-workspace-initials {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.portal-workspace-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.portal-workspace-name { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.portal-workspace-role { font-size: 12.5px; color: var(--text-3); }
.portal-workspace-chevron { margin-left: auto; color: var(--text-3); flex: none; }
.portal-workspace-option { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.portal-workspace-check { color: var(--accent); margin-left: auto; flex: none; }
.portal-workspace-menu { min-width: 248px; }

.portal-account-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 8px 0 4px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 0;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.portal-account-button:hover { background: var(--accent-soft); }
.portal-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.portal-account-name { font-weight: 800; font-size: 14px; }
.portal-account-chevron { color: var(--text-3); }
@media (max-width: 599.98px) {
    /* A phone shows the avatar only; the name is in the menu. */
    .portal-account-name, .portal-account-chevron { display: none !important; }
}
.portal-account-menu { min-width: 240px; }
.portal-account-head { display: flex; flex-direction: column; padding: 10px 16px 8px; line-height: 1.25; }
.portal-account-head-name { font-weight: 800; }
.portal-account-head-email { font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }

/* ---------- Audit trail ---------- */
.portal-audit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portal-audit li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.portal-audit-dot {
    flex: none;
    margin-top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.portal-audit-dot.is-warn   { background: var(--warn); }
.portal-audit-dot.is-danger { background: var(--danger); }
.portal-audit-dot.is-ok     { background: var(--ok); }

.portal-audit-text {
    font-size: 14px;
    color: var(--text);
}

.portal-audit-time {
    font-size: 12px;
    color: var(--text-3);
}

/* ---------- Server page: the QR code of the SRTLA address ----------
   Global, because the SVG comes in as markup the page's scoped styles do not
   reach. A white plate, so phones scan it in dark mode too. */

.ingest-qr svg {
    width: 220px;
    height: 220px;
    background: #fff;
    padding: 8px;
    border-radius: 8px;
}

/* ======================================================================
   Shared building blocks (#126) — every page is made of these.
   ====================================================================== */

/* ---------- Page header ---------- */
.portal-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 20px;
}
.portal-page-heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.portal-page-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 6px;
}
.portal-page-back:hover { color: var(--text-2); }
.portal-page-eyebrow {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.portal-page-titleline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.portal-page-title {
    margin: 0;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
    overflow-wrap: anywhere;
}
.portal-page-subtitle { font-size: 14px; color: var(--text-2); }
.portal-page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 599.98px) {
    .portal-page-title { font-size: 24px; }
    /* On a phone the actions sit under the title, full width; the primary one is last. */
    .portal-page-actions { width: 100%; flex-direction: column; align-items: stretch; }
    .portal-page-actions > * { width: 100%; }
}

/* ---------- Status chip and tag ---------- */
.portal-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.portal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}
.portal-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.portal-chip-dot.is-pulsing { animation: portal-pulse 1.4s ease-in-out infinite; }
@keyframes portal-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .portal-chip-dot.is-pulsing { animation: none; } }
.portal-chip.is-ok      { background: var(--ok-soft);      color: var(--ok); }
.portal-chip.is-warn    { background: var(--warn-soft);    color: var(--warn); }
.portal-chip.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.portal-chip.is-info    { background: var(--info-soft);    color: var(--info); }
.portal-chip.is-neutral { background: var(--neutral-soft); color: var(--neutral); }
.portal-chip.is-muted   { background: var(--surface-3);    color: var(--text-2); }
.portal-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.portal-tag.is-ok { color: var(--ok); }
.portal-tag.is-warn { color: var(--warn); }
.portal-tag.is-danger { color: var(--danger); }
.portal-tag.is-info { color: var(--info); }
.portal-tag.is-neutral, .portal-tag.is-muted { color: var(--text-2); }
.portal-status-reason-icon { color: var(--danger); }
.portal-status-reason { font-size: 12.5px; color: var(--danger); }

/* ---------- Banner ---------- */
.portal-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
    background: var(--tone-soft);
    --tone: var(--warn);
    --tone-soft: var(--warn-soft);
}
.portal-banner.is-danger { --tone: var(--danger); --tone-soft: var(--danger-soft); }
.portal-banner.is-info { --tone: var(--info); --tone-soft: var(--info-soft); }
.portal-banner.is-ok { --tone: var(--ok); --tone-soft: var(--ok-soft); }
.portal-banner-icon { color: var(--tone); flex: none; margin-top: 2px; }
.portal-banner-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.portal-banner-title { font-weight: 800; color: var(--tone); }
.portal-banner-text { font-size: 14px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.portal-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.portal-banner-link { font-weight: 800; }
@media (max-width: 599.98px) {
    .portal-banner-actions > .mud-button-root { flex: 1 1 auto; min-height: 44px; }
}

/* ---------- Card: a titled section of a page ---------- */
.portal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.portal-card.is-padded { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.portal-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 20px;
}
.portal-card.is-padded > .portal-card-head { padding: 0; }
.portal-card-title {
    margin: 0;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.portal-card-aside { font-size: 13px; color: var(--text-3); }
.portal-card-head > .portal-card-end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.portal-card-foot { margin: 0; padding: 12px 20px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-3); }
.portal-card-empty { margin: 0; padding: 14px 20px 18px; font-size: 14px; color: var(--text-2); }
.portal-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.portal-sub { display: block; font-size: 12.5px; color: var(--text-3); overflow-wrap: anywhere; }
.portal-strong { font-weight: 800; overflow-wrap: anywhere; }
.portal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.portal-link { color: var(--accent); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.portal-link:hover { text-decoration: underline; }

/* ---------- Expanded detail under a table row ----------
   Instances under a host, a job's log, an invoice's details: a quieter,
   indented table set off from the rows above and below. */
.portal-subtable-cell { padding: 0 !important; background: var(--surface-2); }
.portal-subtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.portal-subtable th {
    text-align: left;
    padding: 8px 16px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid var(--border);
}
.portal-subtable td { padding: 9px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.portal-subtable th:first-child, .portal-subtable td:first-child { padding-left: 36px; }
.portal-subtable .is-nowrap { white-space: nowrap; width: 1%; }

/* The same detail in a phone card: a list of small boxes. */
.portal-sublist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.portal-sublist > li {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

/* ---------- Result of a step (the return pages after paying) ---------- */
.portal-result {
    max-width: 560px;
    margin: 24px auto 0;
    padding: 32px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.portal-result-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--info-soft);
    color: var(--info);
}
.portal-result-icon .mud-icon-root { font-size: 30px; }
.portal-result-icon.is-ok      { background: var(--ok-soft);      color: var(--ok); }
.portal-result-icon.is-warn    { background: var(--warn-soft);    color: var(--warn); }
.portal-result-icon.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.portal-result-icon.is-neutral { background: var(--neutral-soft); color: var(--neutral); }
.portal-result-icon.is-muted   { background: var(--surface-3);    color: var(--text-2); }
.portal-result-title {
    margin: 4px 0 0;
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.02em;
}
.portal-result-text { margin: 0; font-size: 15px; color: var(--text-2); max-width: 44ch; }
.portal-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
@media (max-width: 599.98px) {
    .portal-result { margin-top: 8px; padding: 24px 20px; }
    .portal-result-actions { width: 100%; }
    .portal-result-actions > .mud-button-root { flex: 1 1 auto; min-height: 44px; }
}

/* ---------- Empty, loading, error ---------- */
.portal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 32px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}
.portal-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.portal-empty-title { font-weight: 800; font-size: 16px; color: var(--text); }
.portal-empty-body { font-size: 14px; color: var(--text-2); max-width: 420px; }
.portal-empty-action { margin-top: 8px; }
.portal-empty.is-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.portal-empty.is-error .portal-empty-icon { background: var(--danger-soft); color: var(--danger); }
.portal-empty.is-loading { align-items: stretch; gap: 14px; padding: 20px; }
.portal-skeleton-row { display: flex; justify-content: space-between; gap: 16px; }

/* ---------- Dialog: full screen on a phone ---------- */
.portal-dialog-title {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.portal-dialog-body { font-size: 14.5px; color: var(--text-2); }
.portal-dialog-fields { display: flex; flex-direction: column; gap: 16px; }
/* Two fields in a row — a wide one and a short one, or two equal ones; one
   per row on a phone. */
.portal-dialog-pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px 12px; align-items: start; }
.portal-dialog-pair.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 599.98px) {
    .portal-dialog-pair, .portal-dialog-pair.is-even { grid-template-columns: minmax(0, 1fr); }
}
.portal-dialog .mud-dialog-actions { gap: 8px; flex-wrap: wrap; padding: 12px 24px 20px; }
@media (max-width: 599.98px) {
    .mud-dialog.portal-dialog {
        margin: 0;
        width: 100%;
        max-width: 100% !important;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .portal-dialog .mud-dialog-content { flex: 1 1 auto; }
    .portal-dialog .mud-dialog-actions .mud-button-root { flex: 1 1 auto; min-height: 44px; }
}

/* ---------- Forms: the label above the field ---------- */
.portal-formfield { display: flex; flex-direction: column; gap: 6px; }
.portal-formfield-label { font-size: 13px; font-weight: 800; color: var(--text-2); }
.portal-formfield-optional { font-weight: 600; color: var(--text-3); margin-left: 4px; }
.portal-formfield .mud-input-outlined-border { border-radius: var(--radius-sm); }

/* Focus on an outlined field: the accent frame plus the same ring as every
   other control, not only MudBlazor's colour change. */
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--accent) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px var(--accent-ring);
}
.portal-formfield .mud-input-control { margin-top: 0; }

/* ---------- Tables: normal and dense; cards below 600 px ---------- */
.portal-table.mud-table { background: transparent; }
/* One class more than MudBlazor's own rules, which load after this file. */
.portal-rtable .portal-table .mud-table-head .mud-table-cell {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
}
.portal-rtable .portal-table .mud-table-body .mud-table-cell { font-size: 14.5px; padding-top: 12px; padding-bottom: 12px; }
.portal-rtable.is-dense .portal-table .mud-table-body .mud-table-cell { font-size: 13.5px; padding-top: 8px; padding-bottom: 8px; }
.portal-rtable-cards { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 10px; }
.portal-rowcard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* A chip or tag keeps its own width instead of stretching across the card. */
.portal-rowcard > .portal-chip, .portal-rowcard > .portal-tag { align-self: flex-start; }
.portal-rowcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.portal-rowcard-title { font-weight: 800; font-size: 15.5px; overflow-wrap: anywhere; }
.portal-rowcard-date { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.portal-rowcard-meta { font-size: 14px; color: var(--text-2); }
.portal-rowcard-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.portal-rowcard-actions > .mud-button-root { flex: 1 1 auto; min-height: 44px; }
@media (max-width: 599.98px) {
    .portal-rtable-wide { display: none !important; }
    .portal-rtable-cards { display: flex; }
}