:root {
    --ground: #f6f7fa;
    --surface: #ffffff;
    --surface-2: #eff1f6;
    --ink: #14171d;
    --muted: #5c6577;
    --rule: #d9dee7;
    --accent: #2d53c8;
    --accent-soft: #e6ebfa;
    --danger: #b32d1b;
    --danger-soft: #fbe9e6;
    --ok: #0f7a6b;
    --ok-soft: #e2f2ef;
    --warn: #7a5200;
    --warn-soft: #fdf1d8;
    --sidebar: #fbfbfc;
    --sidebar-hover: #eef0f4;
    --sidebar-active: #e4e7ed;
    --sidebar-w: 16.5rem;
    --sidebar-rail-w: 3.75rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.9em;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

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

.app { display: flex; min-height: 100vh; }

/* The sidebar holds its own scroll: it is pinned to the viewport height, the
   links scroll inside .nav-body, and the account card stays at the bottom no
   matter how long the page beside it is. */
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    background: var(--sidebar);
    border-right: 1px solid var(--rule);
    transition: width 0.15s ease, flex-basis 0.15s ease;
}

.sidebar:has(> .nav--collapsed) { width: var(--sidebar-rail-w); flex-basis: var(--sidebar-rail-w); }

/* Wide enough for tables, charts and calendars to use a large monitor, capped
   so an ultra-wide one does not stretch them into a strip. Running text gets
   its own, narrower measure below. */
.content { flex: 1; min-width: 0; padding: 2rem clamp(1rem, 4vw, 3rem); max-width: 96rem; }
.content p { max-width: 75ch; }

/* ---- nav ---- */

.nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: 0.9rem;
}

/* Every control in the nav is a quiet row, not the app's filled accent
   button — the global `button` rule would otherwise paint each one blue. */
.nav button {
    font: inherit;
    font-weight: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.nav :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.nav-icon { flex: none; color: var(--muted); }

.nav-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem 0.75rem 1rem;
    min-height: 3.75rem;
}

.nav-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; }

.nav-brand-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 7px;
    background: var(--ink);
    color: var(--surface);
    font-weight: 700;
    font-size: 0.85rem;
}

/* The vendor's own sidebar: the Seebia mark, with the wordmark's weight. */
.nav-brand-logo { flex: none; width: 1.9rem; height: 1.9rem; display: block; }
.nav-brand--seebia .nav-brand-name { font-weight: 700; letter-spacing: -0.02em; }

.nav-brand-name {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-icon-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
}
.nav-icon-btn:hover { background: var(--sidebar-hover); }
.nav-icon-btn:hover .nav-icon { color: var(--ink); }

.nav-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.25rem 0.75rem 1rem;
}

.nav-hint { margin: 0; padding: 0 0.6rem; font-size: 0.8rem; color: var(--muted); }

.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-list a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.6rem;
    border-radius: 7px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}
.nav-list a:hover { background: var(--sidebar-hover); }
.nav-list a.active { background: var(--sidebar-active); font-weight: 600; }
.nav-list a.active .nav-icon { color: var(--ink); }
.nav-label { overflow: hidden; text-overflow: ellipsis; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav .nav-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.35rem 0.6rem;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nav .nav-group-title:hover { background: var(--sidebar-hover); color: var(--ink); }
.nav-group-title .nav-icon { width: 14px; height: 14px; transition: transform 0.15s ease; }
.nav-group.is-folded .nav-group-title .nav-icon { transform: rotate(-90deg); }

/* ---- tenant switcher (platform admin) ----
   Looks like the workspace picker it stands in for: a bordered box on top of
   the nav, with the list dropping down under it. */

.tenant-picker {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.6rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.tenant-picker:hover { border-color: #c3c9d4; }
.tenant-picker:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.tenant-picker .nav-icon { width: 16px; height: 16px; }

.tenant-picker-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    font: inherit;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
    cursor: pointer;
    text-overflow: ellipsis;
}
.tenant-picker-input::placeholder { color: var(--muted); font-weight: 400; }
.tenant-picker.is-open .tenant-picker-input { cursor: text; }

.tenant-picker-list {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: min(22rem, 60vh);
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.12);
}

.tenant-picker-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}
.tenant-picker-option.is-active { background: var(--sidebar-hover); }
.tenant-picker-option[aria-selected="true"] { font-weight: 600; }
.tenant-picker-option .nav-icon { margin-left: auto; color: var(--accent); }
.tenant-picker-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-picker-empty { padding: 0.5rem; font-size: 0.82rem; color: var(--muted); }

.tenant-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 5px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
}

/* ---- account card ---- */

.nav-foot { padding: 0.6rem 0.75rem 0.75rem; border-top: 1px solid var(--rule); }

.nav-user { position: relative; }

.nav-user-toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    text-align: left;
}
.nav-user-toggle:hover,
.nav-user-toggle[aria-expanded="true"] { background: var(--sidebar-hover); }

.nav-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--rule);
    font-weight: 600;
    font-size: 0.85rem;
}

.nav-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.nav-user-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-sub { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-caret { margin-left: auto; display: flex; }
.nav-user-caret .nav-icon { width: 16px; height: 16px; }

/* Opens upward — see the markup. */
.nav-user-menu {
    position: absolute;
    bottom: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.12);
    z-index: 30;
}
.nav-user-menu li { margin: 0; }

.nav-user-menu a,
.nav-user-menu .nav-user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    text-align: left;
    text-decoration: none;
    color: var(--ink);
    border-radius: 6px;
}
.nav-user-menu a:hover,
.nav-user-menu .nav-user-menu-item:hover { background: var(--sidebar-hover); }

/* Sign out is a form POST, not a link, so its <form> wrapper must not become
   a box of its own. */
.nav-user form { display: contents; }

.nav-signin {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.6rem;
    border-radius: 7px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.nav-signin:hover { background: var(--sidebar-hover); }

/* ---- collapsed rail ----
   Icons only. Every link carries a title, which is its tooltip here. */

.nav--collapsed .nav-head { flex-direction: column; padding: 0.85rem 0.5rem 0.5rem; }
.nav--collapsed .nav-brand { flex: none; justify-content: center; }
.nav--collapsed .nav-brand:empty { display: none; }
.nav--collapsed :is(.nav-brand-name, .nav-label, .nav-hint, .nav-group-title, .nav-user-text, .nav-user-caret) { display: none; }
.nav--collapsed .nav-body { padding-inline: 0.5rem; align-items: center; }
.nav--collapsed .nav-list a,
.nav--collapsed .nav-signin { justify-content: center; padding: 0.55rem; }
.nav--collapsed .nav-group { padding-top: 0.5rem; border-top: 1px solid var(--rule); }
.nav--collapsed .nav-foot { padding-inline: 0.5rem; }
.nav--collapsed .nav-user-toggle { justify-content: center; padding: 0.35rem; }
.nav--collapsed .nav-user-menu { right: auto; min-width: 11rem; }

/* ---- content ---- */

/* An area's tabs (Website, Notifications, Settings …): above the page's title, a rule
   under the row and the open tab underlined on it. NavLink marks the open one "active";
   pages that mark it themselves use "current". --inner is a row of tabs within a page. */
.area-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--rule); }
.area-tabs a,
.area-tabs button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
.area-tabs a.active, .area-tabs a.current,
.area-tabs button.active, .area-tabs button.current { border-bottom-color: currentColor; font-weight: 600; }
.area-tabs--inner { margin-top: -.25rem; }

.page-head { margin-bottom: 1.5rem; }
.page-head h1 { margin: 0 0 0.25rem; font-size: 1.75rem; letter-spacing: -0.02em; }
/* The router focuses a page's h1 after navigation (FocusOnNavigate), for screen readers;
   that is no reason to draw a box around the title. */
h1:focus { outline: none; }

.panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.panel h2 { margin: 0 0 1rem; font-size: 1.05rem; }

/* A panel's title with a control beside it (a filter): one row, the control on the
   right, wrapping under the title on a narrow screen. */
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.panel-head h2 { margin: 0; }

/* Members: the Group filter. Here, not in Members.razor.css - the host loads no
   scoped-CSS bundle, so that file never applied. */
.member-group-filter { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.member-group-filter select { min-width: 12rem; }
/* Every cell on one line; the scroll-box around it scrolls sideways when that is too wide. */
.members-grid :is(th, td) { white-space: nowrap; }
/* Members: the First/Last Name filters under their headers. */
.members-grid .column-filters th { padding-top: 0; font-weight: normal; }
.members-grid .column-filters input { width: 100%; min-width: 7rem; box-sizing: border-box; font-size: 0.82rem; padding: 0.2rem 0.4rem; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

.field-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.9rem; }
.field-row label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); flex: 1 1 12rem; }
.field-row label.wide { flex: 1 1 100%; }

/* ---- form fields ----
   Every text box, dropdown and text area in the portal looks the same, wherever it
   sits: a .field-row, a settings list, a menu row or a form drawn from a schema.
   :where() keeps this at zero specificity, so any class that needs a field to look
   different (the tenant picker's borderless box, a monospace code area) wins
   without !important. Ticks, radios, colours, files and sliders keep their own look. */
:where(input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=range],
                 [type=hidden], [type=button], [type=submit], [type=reset], [type=image]),
       select, textarea) {
    font: inherit;
    color: var(--ink);
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--surface);
    min-width: 0;
    max-width: 100%;
}

:where(input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=range]), select, textarea):where(:focus-visible) {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
:where(input, textarea)::placeholder { color: var(--muted); opacity: 0.75; }
:where(input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=range]), select, textarea):where(:disabled, [readonly]) { background: var(--ground); }
:where(input:not([type=checkbox], [type=radio], [type=color], [type=file], [type=range]), select, textarea):where(:disabled) { color: var(--muted); cursor: not-allowed; }
:where(textarea) { resize: vertical; }

/* Blazor's own classes, from EditContext.FieldCssClass — added to InputText/etc.
   once a field has been touched, and to ValidationMessage's own element. */
:where(input, select, textarea):where(.invalid) {
    border-color: var(--danger);
}
.validation-message {
    color: var(--danger);
    font-size: 0.78rem;
    margin-top: -0.5rem;
}

/* A required field's star, beside its label. */
.required { color: var(--danger); }

/* The address form (Seebia.Ui's AddressFields): the street box and the
   suggestions that open under it, and a ZIP box sized for a ZIP. */
.address-search { position: relative; display: flex; flex-direction: column; }
.address-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 20;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgb(20 23 29 / 0.12);
    font-size: 0.9rem;
    color: var(--ink);
}
.address-suggestions li { display: flex; flex-wrap: wrap; gap: 0 0.5rem; padding: 0.45rem 0.6rem; cursor: pointer; }
.address-suggestions li:hover, .address-suggestions li.active { background: var(--accent-soft); }
.address-suggestions .muted { font-size: 0.82rem; }
.field-row label.zip { flex: 0 1 9rem; }

/* Where a tenant is reached: its slug, its own domains, its retired slugs. */
.addresses { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0.6rem 0; }
.addresses dt { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.addresses dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }

button {
    font: inherit;
    font-weight: 500;
    padding: 0.45rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
/* Links in the accent colour, the same once visited (no browser purple). :where()
   keeps it at zero specificity, so every link with a class of its own (the sidebar,
   tabs, tiles, menus) keeps its own colour. */
:where(a) { color: var(--accent); }

button.link { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
thead th {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--rule);
}
tbody td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--rule); }
tbody tr:last-child td { border-bottom: 0; }

.error { color: var(--danger); background: var(--danger-soft); padding: 0.6rem 0.8rem; border-radius: 4px; }
.ok { color: var(--ok); background: var(--ok-soft); padding: 0.6rem 0.8rem; border-radius: 4px; }
.warn { display: block; color: var(--warn); background: var(--warn-soft); padding: 0.4rem 0.6rem; border-radius: 4px; font-size: 0.82rem; }
.ai-allowance-banner { display: block; margin-bottom: 1rem; padding: 0.6rem 0.8rem; font-size: 0.9rem; }

.facts { display: grid; grid-template-columns: 6rem 1fr; gap: 0.4rem 1rem; margin: 0; }
.facts dt { color: var(--muted); font-size: 0.85rem; }
.facts dd { margin: 0; }

.chip {
    display: inline-block;
    font-size: 0.78rem;
    padding: 0.12em 0.55em;
    border-radius: 3px;
    border: 1px solid;
    margin: 0 0.3rem 0.3rem 0;
}
.chip.on { color: var(--ok); background: var(--ok-soft); border-color: var(--ok); }
.chip.off { color: var(--muted); background: var(--surface-2); border-color: var(--rule); }

.address-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
.address-list li { display: flex; align-items: center; gap: 0.6rem; }
.address-list button.link { margin-left: auto; }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.feed li { border: 1px solid var(--rule); border-radius: 4px; padding: 0.75rem 0.9rem; }
.feed li.unread { border-left: 3px solid var(--accent); }
.feed li p { margin: 0.3rem 0 0; }
.feed-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.feed-head time { font-size: 0.8rem; color: var(--muted); }

/* Only for guard notices rendered outside a host layout; inside one the
   layout already supplies the padding. */
.guard { padding: 2rem clamp(1rem, 4vw, 3rem); max-width: 96rem; }

/* The drawer's controls exist only on a narrow screen. */
.nav-menu-toggle,
.nav-backdrop { display: none; }

/* Phones and tablets in portrait (iPad up to the 13" Pro's 1024px): the
   sidebar would leave the page too little room, so it becomes a top bar with
   the brand and a menu button, and the links open as a drawer over the page. */
@media (max-width: 64rem) {
    .app { flex-direction: column; }

    .sidebar,
    .sidebar:has(> .nav--collapsed) {
        position: sticky;
        top: 0;
        z-index: 40;
        width: 100%;
        height: auto;
        min-height: 3.75rem;
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .nav-collapse-toggle { display: none; }
    .nav-menu-toggle { display: grid; }
    .nav-head { padding: 0.75rem 0.75rem 0.75rem 1rem; }

    .nav:not(.nav--open) :is(.nav-body, .nav-foot) { display: none; }

    .nav--open {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        width: min(18rem, 85vw);
        background: var(--sidebar);
        border-right: 1px solid var(--rule);
        box-shadow: 0 0 40px rgb(0 0 0 / 0.18);
    }
    .nav--open .nav-body { flex: 1; min-height: 0; overflow-y: auto; }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgb(0 0 0 / 0.35);
        border: 0;
        padding: 0;
        cursor: default;
    }

    /* The page behind an open drawer stays put. */
    body:has(.nav--open) { overflow: hidden; }

    /* A table wider than the screen scrolls inside itself rather than
       dragging the whole page sideways. */
    .content table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (max-width: 40rem) {
    .content { padding: 1.25rem 1rem; }
}

/* ---- authentication -------------------------------------------------------
   The login, sign-out and forbidden pages render OUTSIDE the Blazor Router as
   standalone documents, so they get no .app / .content shell and have to supply
   their own centring. */

.auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 1.75rem;
    width: 100%;
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.auth-card h1 { margin: 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.auth-card p { margin: 0; font-size: 0.9rem; }

.auth-card label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.auth-error {
    color: var(--danger);
    background: var(--danger-soft);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.auth-notice {
    color: var(--ok);
    background: var(--ok-soft);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* The two-factor code page: a card holding several small forms rather than
   being one, so each form spaces itself as the card would. */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.auth-inline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.auth-more {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
}

/* Buttons that read as links take the text size around them, like an <a> would. */
.login-card button.link { font: inherit; cursor: pointer; text-align: left; }

.auth-more-title { font-size: 0.82rem; font-weight: 600; color: var(--ink); }

.auth-options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.88rem;
}

/* The tenant sign-in page: a roomier card than the other auth pages, fields
   with an icon inside, a dark primary button, and the sign-up link in a band
   along the bottom. */
.login-card {
    width: 100%;
    max-width: 30rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgb(20 23 29 / 0.06);
}

.login-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 2.5rem 2.5rem 2rem;
}

/* The vendor door, visibly distinct from a tenant's — a platform sign-in page
   that looks identical to a customer's is one an operator can mistake for it. */
.login-card--platform { border-top: 3px solid var(--accent); }
.login-logo { display: block; width: 140px; height: auto; margin-bottom: 0.75rem; }

.login-head { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.4rem; }
.login-head h1 { margin: 0; font-size: 1.85rem; line-height: 1.2; letter-spacing: -0.03em; }
.login-head p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.login-head strong { color: var(--ink); font-weight: 600; }

.login-hint { margin: 0; font-size: 0.82rem; color: var(--muted); }

.login-field { display: flex; flex-direction: column; gap: 0.45rem; }
.login-body > p { margin: 0; }

.login-field > label,
.login-label-row > label { font-size: 0.9rem; font-weight: 600; color: var(--ink); }

/* A label with a link on its right: "Password" and "Forgot password?". */
.login-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.login-label-row a { font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.login-label-row a:hover { text-decoration: underline; }

.login-input { position: relative; display: flex; align-items: center; }

.login-input > svg {
    position: absolute;
    left: 1rem;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: var(--muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.login-input input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem 0 2.75rem;
    border-radius: 10px;
}

/* Room for the show / hide button. */
.login-input--reveal input { padding-right: 3rem; }

.login-reveal {
    position: absolute;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--muted);
}
.login-reveal[hidden] { display: none; }
.login-reveal:hover,
.login-reveal[aria-pressed=true] { color: var(--ink); }
.login-reveal:hover { background: var(--surface-2); }

.login-reveal svg,
.login-submit svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 3.1rem;
    margin-top: 0.3rem;
    border: none;
    border-radius: 10px;
    background: var(--ink);
    font-weight: 600;
}
.login-submit:hover { background: #2a2f39; }

/* Six digits, big and spaced, the way they read off a phone. */
.login-code {
    height: 3.5rem;
    border-radius: 10px;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.login-code::placeholder { color: var(--rule); }

/* A checkbox beside its words: the box centres on the caption line, and the
   hint sits under the caption. */
.login-check {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.15rem 0.6rem;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
}
.login-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); }
.login-check .login-hint { grid-column: 2; }

/* "or" between two rules. */
.login-or {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.login-or::before,
.login-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.login-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    height: 3rem;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
}
.login-social:hover { background: var(--ground); }
.login-social svg { width: 1.15rem; height: 1.15rem; }

.login-foot {
    margin: 0 0.5rem 0.5rem;
    padding: 1.1rem 1rem;
    border-radius: 10px;
    background: var(--ground);
    color: var(--muted);
    font-size: 0.92rem;
    text-align: center;
}
.login-foot a { font-weight: 600; text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

@media (max-width: 30rem) {
    .login-body { padding: 2rem 1.5rem 1.5rem; }
}

.badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: var(--accent);
    background: var(--accent-soft);
}

/* A link that should read as the primary action of a panel. */
.primary-link {
    display: inline-block;
    font-weight: 500;
    padding: 0.45rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}

/* ---- role editor ----------------------------------------------------------
   Rendered from the server's permission catalogue, so the grouping is by
   whatever modules the host composes rather than anything hard-coded here. */

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; }

.perm-group {
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 0.6rem 0.9rem 0.9rem;
    margin: 0.75rem 0;
}

.perm-group legend {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: 0 0.35rem;
}

.perm {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: 0.9rem;
}

.perm code { font-size: 0.78rem; margin-left: 0.4rem; }

/* ---- settings editor ------------------------------------------------------
   Rendered from the server's descriptor catalogue, so the grouping and the
   control types come from whatever modules the host composes. */

.setting {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.setting:last-child { border-bottom: 0; }

.setting label { display: flex; flex-direction: column; gap: 0.3rem; }

.setting-name { font-weight: 500; color: var(--ink); font-size: 0.92rem; }

/* The fieldset is there only so a setting the tenant may not change can be disabled
   in one go - it is not a visual group, so none of the browser's box around it. */
.setting-input { border: 0; margin: 0.15rem 0 0; padding: 0; min-width: 0; }

/* The portal's form fields (see "form fields"), one width for every kind of control. */
.setting :is(input, select):not([type=checkbox], [type=radio]) { width: 100%; max-width: 28rem; }
/* Several lines (a greeting, a signature): wider, and its default shown line by line. */
.setting textarea { width: 100%; max-width: 40rem; line-height: 1.5; }
.setting-default-lines { display: block; margin-top: 0.2rem; white-space: pre-line; }

.setting-input:disabled :is(input, select, textarea) { background: var(--ground); color: var(--muted); cursor: not-allowed; }

/* ---- shared pieces ----
   Used by pages of more than one module, so they live here and not in a page's own
   <style> (which only that page has) or a module's stylesheet (which only its own
   pages load). */

/* A long list - rows of a table, a feed - scrolls inside its own box rather than
   lengthening the page. The header row stays in view. */
.scroll-box { max-height: 28rem; overflow: auto; border: 1px solid var(--rule); border-radius: 4px; }
.scroll-box thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
ul.scroll-box, ol.scroll-box { padding: 0.6rem; }

table.top-aligned td { vertical-align: top; }
table :is(th, td).num { text-align: right; white-space: nowrap; }
/* Stays a table cell: .row-actions (below) is inline-flex for a group of icons, which on a
   <td> would take it out of the row - its height and border no longer matching the row's. */
table td.row-actions { display: table-cell; white-space: nowrap; }
table tr.editing td { background: var(--surface-2); }

/* A button's smaller and its destructive forms. */
button.small { font-size: 0.8rem; padding: 0.25rem 0.65rem; }
button.small + button.small, .chip + button.small { margin-left: 0.4rem; }
button.danger { color: var(--danger); }
button.danger:not(.link) { background: var(--danger); border-color: var(--danger); color: #fff; }

/* A row action drawn as an icon (ActionIcon.razor): the words are its title. */
.row-actions { display: inline-flex; gap: 0.25rem; white-space: nowrap; }
button.icon-action, a.icon-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0;
    background: none; border: 1px solid transparent; border-radius: 6px;
    color: var(--accent); cursor: pointer;
}
button.icon-action:hover:not(:disabled), a.icon-action:hover { border-color: currentColor; }
button.icon-action:disabled { opacity: 0.4; cursor: default; }
button.icon-action.danger, button.icon-action.danger:not(.link) { background: none; border-color: transparent; color: var(--danger); }
button.icon-action.danger:hover:not(:disabled) { border-color: currentColor; }
button.icon-action svg, a.icon-action svg {
    width: 1.15rem; height: 1.15rem;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* FilePicker: a button and the file picked, instead of the browser's own control. The
   real input stays in the label, invisible but focusable, so a click or Enter opens it. */
label.file-picker { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 0.6rem; max-width: 100%; cursor: pointer; font-size: inherit; color: inherit; }
.file-picker input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-picker__button {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
    font-size: 0.8rem; font-weight: 500; padding: 0.25rem 0.65rem;
    border: 1px solid var(--accent); border-radius: 4px;
    background: var(--surface); color: var(--accent);
    transition: background 0.12s;
}
.file-picker:hover .file-picker__button { background: var(--accent-soft); }
.file-picker:focus-within .file-picker__button { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-picker__name { font-size: 0.85rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-picker.is-disabled { cursor: not-allowed; opacity: 0.55; }
.file-picker.is-disabled .file-picker__button { background: var(--surface); }
/* A caption above a FilePicker, laid out like a .field-row label (the picker is a label itself). */
.upload-field { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); flex: 1 1 12rem; }
.upload-field.wide { flex: 1 1 100%; }

/* Buttons side by side, with a note after them. */
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }

/* A tick and its words on one line. A .field-row's own label rule stacks a label's
   children and gives it a 12rem box, so a tick label in a row opts out of it. */
.check, .cms-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.75rem 0; font-size: 0.9rem; color: var(--ink); }
.field-row label.check, .field-row label.perm { flex: 0 1 auto; flex-direction: row; align-items: center; margin: 0; font-size: 0.9rem; color: var(--ink); }

/* Charts (ChartHtml's markup, Seebia.Abstractions.Charts): cards in a grid, the SVG scaling
   to the card. Here rather than in reports.css because the home page's dashboard draws
   them too, for tenants without Reports. The rp- prefix stays: published websites'
   site.css styles the same classes. */
.rp-charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.rp-chart-card {
    margin: 0;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 0.8rem 1rem 0.6rem;
    background: var(--surface);
    min-width: 0;
}

.rp-chart-card figcaption {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.rp-chart-title { font-weight: 600; }
.rp-chart-title a { color: inherit; }
.rp-chart-actions { margin-left: auto; display: flex; gap: 0.6rem; font-size: 0.85rem; white-space: nowrap; }

.rp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-chart-empty { color: var(--muted); margin: 1.5rem 0; text-align: center; }
.rp-chart-note { color: var(--muted); font-size: 0.8rem; margin: 0.4rem 0 0; }

.rp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    list-style: none;
    margin: 0 0 0.4rem;
    padding: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.rp-legend li { display: flex; align-items: center; gap: 0.35rem; }
.rp-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; flex: none; }
.rp-swatch-total { height: 0.2rem; border-radius: 0; }

.rp-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.rp-svg-pie { width: min(100%, 13rem); }
.rp-legend-pie { flex-direction: column; font-size: 0.9rem; color: var(--ink); }
.rp-share { color: var(--muted); }

.rp-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.rp-tile {
    display: flex;
    flex-direction: column;
    flex: 1 1 9rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    background: var(--surface-2);
}

.rp-tile-label { font-size: 0.82rem; color: var(--muted); }
.rp-tile-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.rp-tile-when { font-size: 0.78rem; color: var(--muted); }
.rp-tile-change { font-size: 0.8rem; }
.rp-tile-change.rp-up { color: var(--ok); }
.rp-tile-change.rp-down { color: var(--danger); }
.rp-tile-change.rp-same { color: var(--muted); }

.rp-chart-table { width: 100%; }

/* The staff home page (Home.razor): a range switch, a row of number tiles, then charts. */
.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.dash-head p { margin: 0; }

.dash-range {
    display: inline-flex;
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
}

.dash-range button {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    padding: 0.4rem 0.85rem;
}

.dash-range button + button { border-left: 1px solid var(--rule); }
.dash-range button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
    min-width: 0;
}

.dash-tile-title { font-size: 0.85rem; color: var(--muted); }
.dash-tile-title a { color: inherit; }
.dash-tile-value { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.dash-tile-change { font-size: 0.8rem; }
.dash-tile-change.better { color: var(--ok); }
.dash-tile-change.worse { color: var(--danger); }
.dash-tile-change.same { color: var(--muted); }
.dash-tile-detail { font-size: 0.8rem; color: var(--muted); }

.dash-plan { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
.dash-plan .chip { text-decoration: none; }
.dash-body { transition: opacity 0.15s; }
.dash-loading { opacity: 0.55; }

/* Phones: two tiles a row rather than one long column. */
@media (max-width: 40rem) {
    .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .dash-tile { padding: 0.65rem 0.75rem; }
    .dash-tile-value { font-size: 1.45rem; }
}