/* /Admin/AdminUsersPage.razor.rz.scp.css */
.users-page[b-s60vyd62bx] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.users-toolbar[b-s60vyd62bx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.users-count[b-s60vyd62bx] {
    font-size: 0.78125rem;
    color: var(--dim);
}

.btn-primary[b-s60vyd62bx] {
    height: 36px;
    padding: 0 16px;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:disabled[b-s60vyd62bx] {
    opacity: 0.45;
    cursor: default;
}

.btn-ghost[b-s60vyd62bx] {
    height: 36px;
    padding: 0 14px;
    background: none;
    color: var(--dim);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    cursor: pointer;
}

.btn-ghost:hover[b-s60vyd62bx] {
    color: var(--text);
    border-color: var(--text-dim);
}

[b-s60vyd62bx] .user-cell {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

[b-s60vyd62bx] .user-cell-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

[b-s60vyd62bx] .user-cell-email {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}

[b-s60vyd62bx] .provider-cell {
    font-size: 0.75rem;
    color: var(--dim);
}

[b-s60vyd62bx] .mono-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

.create-form[b-s60vyd62bx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.create-field[b-s60vyd62bx] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.create-field input[b-s60vyd62bx] {
    height: 34px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
}

.create-field input:focus-visible[b-s60vyd62bx] {
    outline: none;
    border-color: var(--accent);
}

.create-error[b-s60vyd62bx] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--red);
}

.create-success[b-s60vyd62bx] {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.5;
}

.password-box[b-s60vyd62bx] {
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--accent);
    text-align: center;
    user-select: all;
}

.create-hint[b-s60vyd62bx] {
    margin: 12px 0 0;
    font-size: 0.71875rem;
    color: var(--faint);
    line-height: 1.5;
}

.detail-footer[b-s60vyd62bx] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.detail-spacer[b-s60vyd62bx] {
    flex: 1;
}

/* One visually-joined bar for the three status/destructive actions (reset
   password, deactivate/activate, delete) instead of separate buttons — each
   segment keeps its own color but the group reads as a single control. */
.action-bar[b-s60vyd62bx] {
    display: flex;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-2);
}

.action-bar-btn[b-s60vyd62bx] {
    height: 36px;
    padding: 0 9px;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.action-bar-btn:not(:first-child)[b-s60vyd62bx] {
    border-left: 1px solid oklch(0 0 0 / 0.15);
}

.action-bar-btn:disabled[b-s60vyd62bx] {
    opacity: 0.45;
    cursor: default;
}

.action-info[b-s60vyd62bx] {
    background: var(--blue);
    color: oklch(0.16 0.02 255);
}

.action-warn[b-s60vyd62bx] {
    background: var(--amber);
    color: oklch(0.16 0.02 255);
}

.action-go[b-s60vyd62bx] {
    background: var(--green);
    color: oklch(0.16 0.02 255);
}

.action-danger[b-s60vyd62bx] {
    background: var(--red);
    color: oklch(0.99 0 0);
}

.action-cancel[b-s60vyd62bx] {
    background: var(--surface-3);
    color: var(--dim);
}

.set-password-row[b-s60vyd62bx] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.set-password-row input[b-s60vyd62bx] {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
}

.set-password-row input:focus-visible[b-s60vyd62bx] {
    outline: none;
    border-color: var(--accent);
}

.detail-head[b-s60vyd62bx] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.detail-avatar[b-s60vyd62bx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.detail-avatar-fallback[b-s60vyd62bx] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    color: var(--dim);
    font-family: var(--mono);
    font-size: 0.75rem;
}

.detail-head-text[b-s60vyd62bx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-title[b-s60vyd62bx] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.detail-sub[b-s60vyd62bx] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-section[b-s60vyd62bx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.status-row[b-s60vyd62bx] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.field-hint[b-s60vyd62bx] {
    font-size: 0.71875rem;
    color: var(--faint);
}

.identity-row[b-s60vyd62bx] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78125rem;
    color: var(--dim);
}

.audit-row[b-s60vyd62bx] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.audit-row:last-child[b-s60vyd62bx] {
    border-bottom: none;
}

.audit-action[b-s60vyd62bx] {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--text);
}

.audit-details[b-s60vyd62bx] {
    font-size: 0.75rem;
    color: var(--dim);
}

.audit-meta[b-s60vyd62bx] {
    font-family: var(--mono);
    font-size: 0.65625rem;
    color: var(--faint);
}
/* /Admin/AuditLogPage.razor.rz.scp.css */
.audit-page[b-i95a0xw2pu] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.au-toolbar[b-i95a0xw2pu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.au-search[b-i95a0xw2pu] {
    flex: 1 1 280px;
    min-width: 200px;
    height: 36px;
    padding: 0 12px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
}

.au-select[b-i95a0xw2pu] {
    height: 36px;
    padding: 0 10px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    cursor: pointer;
}

/* ---- cells --------------------------------------------------------------
   The table carries identifiers, addresses and record values. Those are read
   by comparing them character by character, so everything machine-written is
   monospaced, and every cell stays on one line — a wrapping cell would break
   the alignment that makes a column scannable at all. What does not fit is
   cut with an ellipsis and kept in full in the title attribute. */

.au-time[b-i95a0xw2pu],
.au-op[b-i95a0xw2pu],
.au-value[b-i95a0xw2pu],
.au-subject[b-i95a0xw2pu],
.au-actor[b-i95a0xw2pu] {
    font-family: var(--mono);
    font-size: 0.75rem;
}

.au-time[b-i95a0xw2pu] {
    color: var(--dim);
}

.au-op[b-i95a0xw2pu] {
    color: var(--faint);
    letter-spacing: 0.02em;
}

.au-area[b-i95a0xw2pu],
.au-field[b-i95a0xw2pu],
.au-action[b-i95a0xw2pu],
.au-details[b-i95a0xw2pu] {
    font-size: 0.75rem;
}

.au-area[b-i95a0xw2pu],
.au-field[b-i95a0xw2pu],
.au-details[b-i95a0xw2pu],
.au-actor[b-i95a0xw2pu] {
    color: var(--dim);
}

.au-action[b-i95a0xw2pu] {
    font-weight: 600;
    color: var(--text);
}

.au-subject[b-i95a0xw2pu] {
    color: var(--text);
    font-weight: 600;
}

/* Old and new are read as a pair, so they are told apart by colour and not by
   position alone — the eye should not have to count columns to know which is
   which. */
.au-old[b-i95a0xw2pu] {
    color: var(--red);
}

.au-new[b-i95a0xw2pu] {
    color: var(--green);
}

.au-time[b-i95a0xw2pu],
.au-op[b-i95a0xw2pu],
.au-area[b-i95a0xw2pu],
.au-field[b-i95a0xw2pu],
.au-action[b-i95a0xw2pu],
.au-subject[b-i95a0xw2pu],
.au-actor[b-i95a0xw2pu],
.au-value[b-i95a0xw2pu],
.au-details[b-i95a0xw2pu] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- filter toolbar ------------------------------------------------------
   Labelled fields on one wrapping row, the same shape the other filter bars
   in the app use, so the audit page does not invent its own. */

.au-field[b-i95a0xw2pu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.au-field-grow[b-i95a0xw2pu] {
    flex: 1 1 260px;
    min-width: 180px;
}

.au-field input[b-i95a0xw2pu] {
    height: 36px;
    padding: 0 10px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
}

.au-field input[type="datetime-local"][b-i95a0xw2pu] {
    font-family: var(--mono);
    font-size: 0.75rem;
}

.au-presets[b-i95a0xw2pu] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.au-preset[b-i95a0xw2pu] {
    height: 26px;
    padding: 0 10px;
    background: transparent;
    color: var(--dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    cursor: pointer;
}

.au-preset:hover[b-i95a0xw2pu] {
    color: var(--text);
    border-color: var(--border-2);
}

/* Active only while the boxes still hold what the shortcut put there — a
   hand-edited range must not keep claiming to be a preset. */
.au-preset.is-active[b-i95a0xw2pu] {
    color: var(--accent-text);
    background: var(--accent);
    border-color: var(--accent);
}

.au-clear[b-i95a0xw2pu] {
    margin-left: 4px;
}

/* A one-sided range is easy to set by accident, so the toolbar says out loud
   what the two boxes currently mean. */
.au-range-note[b-i95a0xw2pu] {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}
/* /Auth/Login.razor.rz.scp.css */
.login-page[b-cg7r079k2x] {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.login-card[b-cg7r079k2x] {
    width: 340px;
    max-width: 92vw;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 3px);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-brand[b-cg7r079k2x] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-monogram[b-cg7r079k2x] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
}

.login-brand-name[b-cg7r079k2x] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
}

.login-error[b-cg7r079k2x] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--red) 15%, transparent);
    color: var(--red);
    font-size: 0.75rem;
}

form[b-cg7r079k2x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-field[b-cg7r079k2x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.login-field input[b-cg7r079k2x] {
    height: 38px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 12px;
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--text);
}

.login-field input:focus-visible[b-cg7r079k2x] {
    outline: none;
    border-color: var(--accent);
}

.login-submit[b-cg7r079k2x] {
    height: 40px;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.login-divider[b-cg7r079k2x] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--faint);
    font-size: 0.71875rem;
}

.login-divider[b-cg7r079k2x]::before,
.login-divider[b-cg7r079k2x]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Reads as a real button rather than an outline the eye skips: its own solid
   ground, a stronger border than the card, and the provider mark carrying the
   colour. It stays secondary to the accent-filled local login, which is the
   primary action. */
.login-oidc[b-cg7r079k2x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.login-oidc + .login-oidc[b-cg7r079k2x] {
    margin-top: 8px;
}

.login-oidc:hover[b-cg7r079k2x] {
    border-color: var(--accent);
    background: var(--surface-3);
    color: var(--text);
    text-decoration: none;
}

.login-oidc:focus-visible[b-cg7r079k2x] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.login-oidc-icon[b-cg7r079k2x] {
    width: 18px;
    height: 18px;
    flex: none;
}
/* /Auth/Setup.razor.rz.scp.css */
/* Mirrors Login.razor.css — same visual language, one step wider because the
   wizard carries more fields and a lede. Scoped CSS: duplication over a shared
   file is the Blazor-idiomatic trade here. */

.setup-page[b-66povow0dq] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px 0;
}

.setup-card[b-66povow0dq] {
    width: 380px;
    max-width: 92vw;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 3px);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.setup-brand[b-66povow0dq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setup-monogram[b-66povow0dq] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-weight: 700;
}

.setup-brand-name[b-66povow0dq] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
}

.setup-title[b-66povow0dq] {
    margin: 0 0 6px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
}

.setup-lede[b-66povow0dq] {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-dim);
}

.setup-error[b-66povow0dq] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--red) 15%, transparent);
    color: var(--red);
    font-size: 0.75rem;
}

form[b-66povow0dq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setup-field[b-66povow0dq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setup-field input[b-66povow0dq] {
    height: 38px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 12px;
    font-family: var(--font);
    font-size: 0.8125rem;
    color: var(--text);
}

.setup-field input:focus-visible[b-66povow0dq] {
    outline: none;
    border-color: var(--accent);
}

.setup-hint[b-66povow0dq] {
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.setup-submit[b-66povow0dq] {
    height: 40px;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}
/* /AutoDns/DnsZonesPage.razor.rz.scp.css */
.dns-zones-page[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.dns-filters[b-xxcmf0xpu5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.dns-field[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 18rem;
    flex: 1 1 18rem;
}

.dns-toolbar[b-xxcmf0xpu5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.dns-count[b-xxcmf0xpu5] {
    font-size: var(--fs-micro);
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dns-zone-origin[b-xxcmf0xpu5] {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    color: var(--text);
}

.dns-error[b-xxcmf0xpu5] {
    color: var(--red);
    font-size: var(--fs-small);
}

.dns-banner[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dns-banner-title[b-xxcmf0xpu5] {
    color: var(--amber);
    font-weight: 600;
}

.dns-banner-text[b-xxcmf0xpu5] {
    color: var(--dim);
    font-size: var(--fs-small);
}

.btn-ghost[b-xxcmf0xpu5] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: var(--fs-small);
    cursor: pointer;
}

.btn-ghost:hover[b-xxcmf0xpu5] {
    border-color: var(--border-2);
    background: var(--surface-2);
}

/* Cells rendered into DataTable need ::deep — CSS isolation does not reach
   markup a child component owns. */
[b-xxcmf0xpu5] .mono-cell {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}

[b-xxcmf0xpu5] .dns-origin {
    color: var(--text);
}

[b-xxcmf0xpu5] .dns-record-name,
[b-xxcmf0xpu5] .dns-record-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

[b-xxcmf0xpu5] .dns-ttl-default {
    color: var(--dim);
}

/* ----- record detail + change preview ----- */

.detail-grid[b-xxcmf0xpu5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.field-value.wrap[b-xxcmf0xpu5] {
    overflow-wrap: anywhere;
}

.field-value.mono[b-xxcmf0xpu5] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
}

.create-form[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.create-field[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.create-error[b-xxcmf0xpu5] {
    color: var(--red);
    font-size: var(--fs-small);
    margin: 0;
}

.confirm-intro[b-xxcmf0xpu5] {
    color: var(--dim);
    font-size: var(--fs-small);
    margin: 0 0 0.8rem;
}

.confirm-intro .mono[b-xxcmf0xpu5] {
    font-family: var(--font-mono);
    color: var(--text);
}

.patch-preview[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    overflow-x: auto;
}

.patch-line[b-xxcmf0xpu5] {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    white-space: pre;
    color: var(--dim);
}

.patch-line.add[b-xxcmf0xpu5] {
    color: var(--green);
}

.patch-line.remove[b-xxcmf0xpu5] {
    color: var(--red);
}

.ttl-notes[b-xxcmf0xpu5] {
    margin-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.btn-primary[b-xxcmf0xpu5] {
    background: var(--accent, var(--blue));
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--bg);
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:disabled[b-xxcmf0xpu5],
.btn-danger:disabled[b-xxcmf0xpu5],
.btn-ghost:disabled[b-xxcmf0xpu5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger[b-xxcmf0xpu5] {
    background: transparent;
    border: 1px solid var(--red);
    border-radius: var(--radius);
    color: var(--red);
    padding: 0.35rem 0.9rem;
    font: inherit;
    font-size: var(--fs-small);
    cursor: pointer;
}

.btn-danger:hover:not(:disabled)[b-xxcmf0xpu5] {
    background: color-mix(in oklch, var(--red) 12%, transparent);
}

/* ----- create grid: one row per record, tab flows into the next ----- */

.record-grid[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.record-grid-head[b-xxcmf0xpu5],
.record-grid-row[b-xxcmf0xpu5] {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 2.4fr 0.6fr 0.7fr 2rem;
    gap: 0.4rem;
    align-items: center;
}

.record-grid-row .setting-input[b-xxcmf0xpu5] {
    min-width: 0;
}

.record-grid-row.has-error .setting-input[b-xxcmf0xpu5] {
    border-color: var(--red);
}

.row-error[b-xxcmf0xpu5] {
    grid-column: 1 / -1;
    color: var(--red);
    font-size: var(--fs-micro);
}

.row-remove[b-xxcmf0xpu5] {
    padding: 0.2rem 0.4rem;
    line-height: 1;
}

.add-row[b-xxcmf0xpu5] {
    margin-top: 0.8rem;
}

/* ----- staged changes ----- */

.staged-list[b-xxcmf0xpu5] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.staged-row[b-xxcmf0xpu5] {
    display: grid;
    grid-template-columns: 5.5rem 1fr auto;
    gap: 0.6rem;
    align-items: center;
}

.staged-text[b-xxcmf0xpu5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-small);
}

.staged-actions[b-xxcmf0xpu5] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.dns-field.grow[b-xxcmf0xpu5] {
    flex: 1 1 20rem;
}

/* ----- blocking problems in the confirmation ----- */

.problem-box[b-xxcmf0xpu5] {
    border: 1px solid var(--red);
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.problem-line[b-xxcmf0xpu5] {
    color: var(--red);
    font-size: var(--fs-small);
}
/* /Autotask/TicketSearch/TicketDetailDrawer.razor.rz.scp.css */
.drawer-title-row[b-jbiczwy3cj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.mono-id[b-jbiczwy3cj] {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--dim);
}

.drawer-title[b-jbiczwy3cj] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
}

.meta-grid[b-jbiczwy3cj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.timeline-heading[b-jbiczwy3cj] {
    margin: 0 0 10px;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--text);
}

.timeline[b-jbiczwy3cj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline-item[b-jbiczwy3cj] {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

/* A ruled header, not a run of words: the metadata sits on its own line above
   a divider, so the eye separates "who and when" from what they wrote. */
.timeline-item-head[b-jbiczwy3cj] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.timeline-date[b-jbiczwy3cj],
.timeline-hours[b-jbiczwy3cj] {
    font-size: 0.6875rem;
    color: var(--faint);
    font-family: var(--mono);
}

/* The person who wrote the entry is the thing readers scan for, so it carries
   weight, full-strength text colour and a quiet chip — all at the same size as
   the rest of the metadata row. A name is not data, so it drops the mono face
   the timestamps use and reads in the body font. */
.timeline-resource[b-jbiczwy3cj] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
    background: var(--surface-3);
    border: 1px solid var(--border-2);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

/* Anchored right, so every entry's hours line up into a column instead of
   trailing whatever the name happens to be. */
.timeline-hours[b-jbiczwy3cj] {
    margin-left: auto;
}

.timeline-title[b-jbiczwy3cj] {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.timeline-text[b-jbiczwy3cj] {
    font-size: 0.75rem;
    color: var(--dim);
    white-space: pre-wrap;
}

.open-in-autotask[b-jbiczwy3cj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    background: var(--accent);
    color: var(--accent-text);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.open-in-autotask svg[b-jbiczwy3cj] {
    width: 15px;
    height: 15px;
}

.open-in-autotask:hover[b-jbiczwy3cj] {
    text-decoration: none;
    opacity: 0.92;
}

/* The heading and its filter share a row, so the search field sits with the
   thing it searches rather than floating above the drawer. */
.timeline-head[b-jbiczwy3cj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 1.25rem;
}

.timeline-head .timeline-heading[b-jbiczwy3cj] {
    margin: 0;
}

.timeline-filter[b-jbiczwy3cj] {
    margin-left: auto;
    flex: 0 1 220px;
}

.timeline-filter input[b-jbiczwy3cj] {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.78125rem;
}
/* /Autotask/TicketSearch/TicketSearchPage.razor.rz.scp.css */
.ticket-search[b-opvn7babbe] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.search-row[b-opvn7babbe] {
    margin-bottom: var(--card-gap);
}

.search-input[b-opvn7babbe] {
    width: 100%;
    height: 38px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 14px;
    font-size: 0.8125rem;
    font-family: var(--font);
    color: var(--text);
}

.search-input:focus-visible[b-opvn7babbe] {
    outline: none;
    border-color: var(--accent);
}

.search-hint[b-opvn7babbe] {
    margin: 6px 0 0;
    font-size: 0.71875rem;
    color: var(--faint);
}

.filters-row[b-opvn7babbe] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--card-gap);
}

.results-area[b-opvn7babbe] {
    min-height: 200px;
}

[b-opvn7babbe] .mono-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

[b-opvn7babbe] .title-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

[b-opvn7babbe] .title-text {
    font-size: 0.78125rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-opvn7babbe] .snippet {
    font-size: 0.71875rem;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-opvn7babbe] .snippet mark {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 2px;
    padding: 0 1px;
}
/* /Components/Pages/Appearance.razor.rz.scp.css */
.appearance-page[b-33ipdziyi2] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    max-width: 640px;
}

.setting-row[b-33ipdziyi2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
}

.setting-row + .setting-row[b-33ipdziyi2] {
    border-top: 1px solid var(--border);
}

.accent-grid[b-33ipdziyi2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.font-grid[b-33ipdziyi2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.accent-swatch[b-33ipdziyi2],
.font-pill[b-33ipdziyi2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--dim);
    font-size: var(--fs-caption);
    cursor: pointer;
    text-align: left;
}

.accent-swatch:hover[b-33ipdziyi2],
.font-pill:hover[b-33ipdziyi2] {
    border-color: var(--border-2);
    color: var(--text);
}

.accent-swatch.active[b-33ipdziyi2],
.font-pill.active[b-33ipdziyi2] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 600;
}

.swatch-dot[b-33ipdziyi2] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.swatch-label[b-33ipdziyi2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-pill-label[b-33ipdziyi2] {
    white-space: normal;
    line-height: 1.25;
}

.font-preview[b-33ipdziyi2] {
    font-size: var(--fs-body-lg);
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
    width: 1.4em;
}

.custom-accent-row[b-33ipdziyi2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.accent-color-input[b-33ipdziyi2] {
    width: 34px;
    height: 34px;
    padding: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.custom-font-row[b-33ipdziyi2] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.custom-font-row input[type="file"][b-33ipdziyi2] {
    font-size: var(--fs-caption);
    color: var(--dim);
    max-width: 100%;
}

.remove-font-button[b-33ipdziyi2] {
    background: none;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--dim);
    font-size: var(--fs-caption);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.remove-font-button:hover[b-33ipdziyi2] {
    border-color: var(--red);
    color: var(--red);
}

.avatar-row[b-33ipdziyi2] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.avatar-preview[b-33ipdziyi2] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.avatar-fallback[b-33ipdziyi2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    color: var(--dim);
    font-family: var(--mono);
    font-size: var(--fs-caption);
}

.avatar-controls[b-33ipdziyi2] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.avatar-controls input[type="file"][b-33ipdziyi2] {
    font-size: var(--fs-caption);
    color: var(--dim);
    max-width: 100%;
}

.font-upload-error[b-33ipdziyi2] {
    margin: 6px 0 0;
    font-size: var(--fs-caption);
    color: var(--red);
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-subnav[b-235131njnd] {
    margin-bottom: 14px;
}

.save-bar[b-235131njnd] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border: 1px solid var(--accent);
    border-radius: var(--radius);
}

.save-bar-count[b-235131njnd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.save-bar-actions[b-235131njnd] {
    display: flex;
    gap: 8px;
}

.settings-list[b-235131njnd] {
    display: flex;
    flex-direction: column;
}

.setting-row[b-235131njnd] {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(240px, 1.6fr) minmax(130px, 0.7fr) auto;
    gap: 16px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.setting-row:last-child[b-235131njnd] {
    border-bottom: none;
}

.setting-info[b-235131njnd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.setting-label[b-235131njnd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

.setting-key[b-235131njnd] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.setting-help[b-235131njnd] {
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--text-dim);
    margin-top: 2px;
}

.setting-editor[b-235131njnd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.setting-error[b-235131njnd] {
    font-size: 0.6875rem;
    color: var(--red);
}

.setting-default[b-235131njnd] {
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.setting-default code[b-235131njnd] {
    font-family: var(--mono);
}

.setting-state[b-235131njnd] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 6px;
}

.setting-updated[b-235131njnd] {
    font-size: 0.6875rem;
    color: var(--text-dim);
}

.setting-actions[b-235131njnd] {
    display: flex;
    gap: 8px;
    padding-top: 4px;
    white-space: nowrap;
}

.btn-primary[b-235131njnd] {
    height: 32px;
    padding: 0 14px;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:disabled[b-235131njnd] {
    opacity: 0.45;
    cursor: default;
}

.btn-ghost[b-235131njnd] {
    height: 32px;
    padding: 0 12px;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.75rem;
    cursor: pointer;
}

.btn-ghost:hover:not(:disabled)[b-235131njnd] {
    color: var(--text);
    border-color: var(--text-dim);
}

.vault-warning[b-235131njnd] {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--red) 12%, transparent);
    color: var(--red);
    font-size: 0.75rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .setting-row[b-235131njnd] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}
/* /Components/Shared/Badge.razor.rz.scp.css */
.badge[b-z4z2aa8gts] {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.65625rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-color) 15%, transparent);
}
/* /Components/Shared/Card.razor.rz.scp.css */
.card[b-l3koejae0g] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.card-header[b-l3koejae0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sec-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.card-header h2[b-l3koejae0g] {
    margin: 0;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--text);
}

.card-header-action[b-l3koejae0g] {
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--accent);
}

.card-body[b-l3koejae0g] {
    padding: var(--pad-card);
}
/* /Components/Shared/Checkbox.razor.rz.scp.css */
.checkbox[b-mzs3ud4r73] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox input[b-mzs3ud4r73] {
    position: absolute;
    opacity: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.checkbox-box[b-mzs3ud4r73] {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-text);
    flex-shrink: 0;
}

.checkbox-box.checked[b-mzs3ud4r73] {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-box svg[b-mzs3ud4r73] {
    width: 10px;
    height: 10px;
}

.checkbox input:focus-visible + .checkbox-box[b-mzs3ud4r73] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.checkbox-label[b-mzs3ud4r73] {
    font-size: 0.78125rem;
    color: var(--text);
}
/* /Components/Shared/CommandPalette.razor.rz.scp.css */
/* The panel slides up, so the backdrop cannot snap in — half an animation
   reads as a flash. Same duration and curve as the panel, because the two are
   one movement. */
.cmdk-scrim[b-w38ywp1ein] {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    z-index: 250;
    animation: scrim-fade var(--dur-panel) var(--ease);
}

.cmdk-panel[b-w38ywp1ein] {
    position: fixed;
    top: 14vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(560px, 92vw);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: calc(var(--radius) + 3px);
    box-shadow: 0 20px 60px oklch(0.1 0.01 255 / 0.3);
    z-index: 251;
    overflow: hidden;
    animation: slideup var(--dur-panel) var(--ease);
}

.cmdk-input-row[b-w38ywp1ein] {
    border-bottom: 1px solid var(--border);
}

.cmdk-input[b-w38ywp1ein] {
    width: 100%;
    height: 46px;
    background: none;
    border: none;
    padding: 0 16px;
    font-size: 0.84375rem;
    font-family: var(--font);
    color: var(--text);
}

.cmdk-input:focus[b-w38ywp1ein] {
    outline: none;
}

.cmdk-results[b-w38ywp1ein] {
    max-height: 50vh;
    overflow-y: auto;
    padding: 6px;
}

.cmdk-result[b-w38ywp1ein] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.cmdk-result.highlighted[b-w38ywp1ein],
.cmdk-result:hover[b-w38ywp1ein] {
    background: var(--accent-soft);
}

.cmdk-tag[b-w38ywp1ein] {
    flex-shrink: 0;
    min-width: 52px;
}

.cmdk-label[b-w38ywp1ein] {
    flex: 1;
    font-size: 0.78125rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-sub[b-w38ywp1ein] {
    font-size: 0.6875rem;
    color: var(--faint);
    flex-shrink: 0;
}

.cmdk-empty[b-w38ywp1ein] {
    padding: 20px;
    text-align: center;
    color: var(--faint);
    font-size: 0.78125rem;
}
/* /Components/Shared/DataTable.razor.rz.scp.css */
.data-table-wrap[b-4rm8g2d2yi] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.data-table-wrap.resizing[b-4rm8g2d2yi] {
    user-select: none;
}

.data-table-scroll[b-4rm8g2d2yi] {
    overflow-x: auto;
}

.data-table-filter[b-4rm8g2d2yi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--row-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.data-table-filter-input[b-4rm8g2d2yi] {
    flex: 1;
    min-width: 0;
    height: 30px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    font-size: var(--fs-caption);
    font-family: var(--font);
    color: var(--text);
}

.data-table-filter-input:focus-visible[b-4rm8g2d2yi] {
    outline: none;
    border-color: var(--accent);
}

.data-table-filter-clear[b-4rm8g2d2yi] {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--dim);
    font-size: var(--fs-caption);
    padding: 4px 9px;
    cursor: pointer;
}

.data-table-filter-clear:hover[b-4rm8g2d2yi] {
    border-color: var(--border-2);
    color: var(--text);
}

.data-table[b-4rm8g2d2yi] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.data-table thead[b-4rm8g2d2yi] {
    background: var(--table-head-bg);
}

.data-table thead th[b-4rm8g2d2yi] {
    border-bottom: 1px solid var(--border-2);
}

.data-table thead .micro-label[b-4rm8g2d2yi] {
    color: var(--dim);
    font-weight: 600;
}

.data-table th[b-4rm8g2d2yi],
.data-table td[b-4rm8g2d2yi] {
    padding: var(--row-pad) var(--pad-card);
    border-right: 1px solid var(--col-divider);
    vertical-align: middle;
    text-align: left;
}

.data-table th:last-child[b-4rm8g2d2yi],
.data-table td:last-child[b-4rm8g2d2yi] {
    border-right: none;
}

.data-table th[b-4rm8g2d2yi] {
    position: relative;
}

.data-table tbody td[b-4rm8g2d2yi] {
    border-bottom: 1px solid var(--border);
}

.data-table tbody tr:last-child td[b-4rm8g2d2yi] {
    border-bottom: none;
}

.data-table tbody tr:nth-child(even)[b-4rm8g2d2yi] {
    background: var(--row-alt);
}

.data-table tbody tr:hover[b-4rm8g2d2yi] {
    background: var(--surface-2);
}

.data-table tbody tr.clickable[b-4rm8g2d2yi] {
    cursor: pointer;
}

/* Inset outline: a row outline would otherwise be clipped by the scroll box. */
.data-table tbody tr.clickable:focus-visible[b-4rm8g2d2yi] {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.data-table tbody tr.empty-row:hover[b-4rm8g2d2yi] {
    background: none;
}

.data-table tbody tr.selected[b-4rm8g2d2yi] {
    background: var(--accent-soft);
}

.select-col[b-4rm8g2d2yi] {
    width: 36px;
}

.select-col input[type="checkbox"][b-4rm8g2d2yi] {
    cursor: pointer;
}

.th-inner[b-4rm8g2d2yi] {
    display: flex;
    align-items: center;
}

.align-right[b-4rm8g2d2yi] { text-align: right; }
.align-center[b-4rm8g2d2yi] { text-align: center; }

th.align-right .th-inner[b-4rm8g2d2yi] { justify-content: flex-end; }
th.align-center .th-inner[b-4rm8g2d2yi] { justify-content: center; }

.col-resize-handle[b-4rm8g2d2yi] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    width: 12px;
    cursor: col-resize;
    z-index: 2;
}

/* The last column's handle would hang 6px past the table and give every table
   in the app a permanent horizontal scrollbar with nothing to scroll to. Anchor
   that one inside the edge; it stays grabbable, the phantom overflow goes. */
.data-table th:last-child .col-resize-handle[b-4rm8g2d2yi] {
    right: 0;
    width: 6px;
}

.col-resize-handle[b-4rm8g2d2yi]::after {
    content: "";
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: transparent;
}

.col-resize-handle:hover[b-4rm8g2d2yi]::after,
.col-resize-handle.active[b-4rm8g2d2yi]::after {
    background: var(--accent);
}

.col-resize-overlay[b-4rm8g2d2yi] {
    position: fixed;
    inset: 0;
    z-index: 300;
    cursor: col-resize;
}

.cell-ellipsis[b-4rm8g2d2yi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-full[b-4rm8g2d2yi] {
    white-space: nowrap;
}

.sort-button[b-4rm8g2d2yi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.sort-arrow[b-4rm8g2d2yi] {
    font-size: var(--fs-micro);
    color: var(--accent);
}

.data-table-footer[b-4rm8g2d2yi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--row-pad) var(--pad-card);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.data-table-count[b-4rm8g2d2yi] {
    font-size: var(--fs-caption);
    color: var(--dim);
}

.data-table-footer-left[b-4rm8g2d2yi] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.page-size-picker[b-4rm8g2d2yi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-picker select[b-4rm8g2d2yi] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-caption);
    font-family: var(--font);
    padding: 3px 6px;
    cursor: pointer;
}

.page-size-picker select:focus-visible[b-4rm8g2d2yi] {
    outline: none;
    border-color: var(--accent);
}

.pagination[b-4rm8g2d2yi] {
    display: flex;
    gap: 4px;
}

.pagination button[b-4rm8g2d2yi] {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--dim);
    font-size: var(--fs-caption);
    padding: 4px 9px;
    cursor: pointer;
}

.pagination button:hover:not(:disabled)[b-4rm8g2d2yi] {
    border-color: var(--border-2);
    color: var(--text);
}

.pagination button:disabled[b-4rm8g2d2yi] {
    opacity: 0.4;
    cursor: default;
}

.pagination button.current[b-4rm8g2d2yi] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: transparent;
    font-weight: 600;
}

/* Sits between the filter box and the table, where the selection it talks
   about is. Quiet until the page is fully selected. */
.data-table-selectall[b-4rm8g2d2yi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.4rem;
    border-radius: 6px;
    background: var(--surface-2, rgba(0, 0, 0, 0.04));
    font-size: 0.78125rem;
    color: var(--text);
}

.data-table-selectall .link-button[b-4rm8g2d2yi] {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.data-table-selectall .link-button:hover[b-4rm8g2d2yi] {
    text-decoration: none;
}
/* /Components/Shared/DateRangeField.razor.rz.scp.css */
.date-range[b-1x471je00s] {
    display: flex;
    gap: var(--card-gap);
}

.date-field[b-1x471je00s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-field input[b-1x471je00s] {
    height: 34px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 10px;
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--text);
}

.date-field input:focus-visible[b-1x471je00s] {
    border-color: var(--accent);
}
/* /Components/Shared/Drawer.razor.rz.scp.css */
.drawer-scrim[b-q62hav0vmw] {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    z-index: 150;
}

.drawer-panel[b-q62hav0vmw] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 470px;
    max-width: 100vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 50px oklch(0.1 0.01 255 / 0.25);
    z-index: 151;
    display: flex;
    flex-direction: column;
    animation: slideright var(--dur-panel) var(--ease);
}

.drawer-header[b-q62hav0vmw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.drawer-header-text[b-q62hav0vmw] {
    flex: 1;
    min-width: 0;
}

.drawer-close[b-q62hav0vmw] {
    background: none;
    border: none;
    color: var(--faint);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 4px;
    flex-shrink: 0;
}

.drawer-close:hover[b-q62hav0vmw] {
    color: var(--text);
}

.drawer-body[b-q62hav0vmw] {
    flex: 1;
    overflow-y: auto;
    padding: var(--pad-card);
}

.drawer-footer[b-q62hav0vmw] {
    padding: var(--pad-card);
    border-top: 1px solid var(--border);
}

/* ----- drag to resize ----- */

.drawer-resize-handle[b-q62hav0vmw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    /* Sits above the body so the grab area is never covered by content. */
    z-index: 2;
    background: transparent;
    transition: background var(--dur-fast) var(--ease);
}

.drawer-resize-handle:hover[b-q62hav0vmw],
.drawer-resize-handle.active[b-q62hav0vmw] {
    background: var(--accent, var(--blue));
}

/* Full-screen catcher, so a fast drag does not lose the pointer. */
.drawer-resize-overlay[b-q62hav0vmw] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    cursor: col-resize;
}

/* ----- focus, dirty-close prompt ----- */

/* The panel takes focus on open, so it must not draw a focus ring of its own —
   the ring belongs on the control inside it. */
.drawer-panel:focus[b-q62hav0vmw] {
    outline: none;
}

/* One ring pulse: the answer to a scrim click that was ignored because the
   form is dirty. */
.drawer-panel.emphasis[b-q62hav0vmw] {
    animation: drawer-emphasis-b-q62hav0vmw var(--dur-panel) var(--ease) 2;
}

@keyframes drawer-emphasis-b-q62hav0vmw {
    0%, 100% { box-shadow: -12px 0 50px oklch(0.1 0.01 255 / 0.25); }
    50% { box-shadow: -12px 0 50px oklch(0.1 0.01 255 / 0.25), inset 2px 0 0 var(--accent, var(--blue)); }
}

/* Reduced motion kills the pulse globally, so the same signal is a static edge
   for as long as the class is set. */
@media (prefers-reduced-motion: reduce) {
    .drawer-panel.emphasis[b-q62hav0vmw] {
        box-shadow: -12px 0 50px oklch(0.1 0.01 255 / 0.25), inset 2px 0 0 var(--accent, var(--blue));
    }
}

/* Inline discard prompt, in the panel — never a browser confirm(). */
.drawer-discard[b-q62hav0vmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: var(--pad-card);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.drawer-discard-text[b-q62hav0vmw] {
    font-weight: 600;
}

.drawer-discard-actions[b-q62hav0vmw] {
    display: flex;
    gap: 8px;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-8l1y5ixii7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--faint);
    font-size: 0.78125rem;
    text-align: center;
}
/* /Components/Shared/FontScaleControl.razor.rz.scp.css */
.font-scale[b-j0nckx3yfa] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 2px;
}

.font-scale-btn[b-j0nckx3yfa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    color: var(--dim);
    cursor: pointer;
}

.font-scale-btn:hover:not(:disabled)[b-j0nckx3yfa] {
    background: var(--surface-2);
    color: var(--text);
}

.font-scale-btn:disabled[b-j0nckx3yfa] {
    opacity: 0.4;
    cursor: default;
}

.font-scale-a[b-j0nckx3yfa] {
    font-weight: 700;
    line-height: 1;
}

.font-scale-a.small[b-j0nckx3yfa] {
    font-size: 0.625rem;
}

.font-scale-a.large[b-j0nckx3yfa] {
    font-size: 0.875rem;
}

.font-scale-value[b-j0nckx3yfa] {
    min-width: 34px;
    text-align: center;
    font-family: var(--mono);
    font-size: var(--fs-caption);
    color: var(--faint);
}
/* /Components/Shared/KpiStat.razor.rz.scp.css */
.kpi[b-tvrxgnu9pv] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.kpi-top[b-tvrxgnu9pv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kpi-value[b-tvrxgnu9pv] {
    font-size: var(--kpi-size);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}

.kpi-note[b-tvrxgnu9pv] {
    font-size: 0.71875rem;
    color: var(--dim);
}
/* /Components/Shared/MetaField.razor.rz.scp.css */
.meta-field[b-ztik3kxa0n] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.meta-value[b-ztik3kxa0n] {
    font-size: 0.78125rem;
    color: var(--text);
}

.meta-value.mono[b-ztik3kxa0n] {
    font-family: var(--mono);
}
/* /Components/Shared/Modal.razor.rz.scp.css */
.modal-scrim[b-i1hwo1lpuh] {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    backdrop-filter: blur(3px);
    z-index: 200;
}

.modal-panel[b-i1hwo1lpuh] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-height: 82vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 3px);
    box-shadow: 0 20px 60px oklch(0.1 0.01 255 / 0.3);
    z-index: 201;
    display: flex;
    flex-direction: column;
    animation: slideup var(--dur-panel) var(--ease);
}

.modal-header[b-i1hwo1lpuh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.modal-header-text[b-i1hwo1lpuh] {
    flex: 1;
    min-width: 0;
}

.modal-close[b-i1hwo1lpuh] {
    background: none;
    border: none;
    color: var(--faint);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 4px;
    flex-shrink: 0;
}

.modal-close:hover[b-i1hwo1lpuh] {
    color: var(--text);
}

.modal-body[b-i1hwo1lpuh] {
    flex: 1;
    overflow-y: auto;
    padding: var(--pad-card);
}

.modal-footer[b-i1hwo1lpuh] {
    padding: var(--pad-card);
    border-top: 1px solid var(--border);
}

/* The panel takes focus on open, so it must not draw a focus ring of its own —
   the ring belongs on the control inside it. */
.modal-panel:focus[b-i1hwo1lpuh] {
    outline: none;
}

/* One ring pulse: the answer to a scrim click that was ignored because the
   form is dirty. */
.modal-panel.emphasis[b-i1hwo1lpuh] {
    animation: modal-emphasis-b-i1hwo1lpuh var(--dur-panel) var(--ease) 2;
}

@keyframes modal-emphasis-b-i1hwo1lpuh {
    0%, 100% { box-shadow: 0 20px 60px oklch(0.1 0.01 255 / 0.3); }
    50% { box-shadow: 0 0 0 2px var(--accent, var(--blue)), 0 20px 60px oklch(0.1 0.01 255 / 0.3); }
}

/* Reduced motion kills the pulse globally, so the same signal is a static ring
   for as long as the class is set. */
@media (prefers-reduced-motion: reduce) {
    .modal-panel.emphasis[b-i1hwo1lpuh] {
        outline: 2px solid var(--accent, var(--blue));
        outline-offset: 2px;
    }
}

/* Inline discard prompt, in the panel — never a browser confirm(). */
.modal-discard[b-i1hwo1lpuh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: var(--pad-card);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.modal-discard-text[b-i1hwo1lpuh] {
    font-weight: 600;
}

.modal-discard-actions[b-i1hwo1lpuh] {
    display: flex;
    gap: 8px;
}
/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
.ss[b-socqdokcmu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.ss-control[b-socqdokcmu] {
    position: relative;
}

.ss-input[b-socqdokcmu] {
    width: 100%;
    height: 34px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 46px 0 10px;
    font-size: 0.78125rem;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
}

.ss-input:focus-visible[b-socqdokcmu] {
    outline: none;
    border-color: var(--accent);
}

.ss-icons[b-socqdokcmu] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ss-clear[b-socqdokcmu] {
    background: none;
    border: none;
    color: var(--faint);
    font-size: 0.625rem;
    cursor: pointer;
    padding: 4px;
}

.ss-clear:hover[b-socqdokcmu] {
    color: var(--text);
}

.ss-chevron[b-socqdokcmu] {
    display: flex;
    color: var(--faint);
    pointer-events: none;
    transition: transform var(--dur-fast);
}

.ss-chevron svg[b-socqdokcmu] {
    width: 13px;
    height: 13px;
}

.ss-chevron.open[b-socqdokcmu] {
    transform: rotate(180deg);
}

.ss-dropdown[b-socqdokcmu] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px oklch(0.1 0.01 255 / 0.2);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}

.ss-option[b-socqdokcmu] {
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78125rem;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-option.highlighted[b-socqdokcmu],
.ss-option:hover[b-socqdokcmu] {
    background: var(--accent-soft);
}

.ss-empty[b-socqdokcmu] {
    padding: 10px;
    text-align: center;
    color: var(--faint);
    font-size: 0.75rem;
}

/* Matches the disabled look of SelectField, so a field that cannot be used yet
   reads the same wherever it appears. */
.ss-disabled .ss-input[b-socqdokcmu] {
    opacity: 0.55;
    cursor: not-allowed;
}

.ss-disabled .ss-chevron[b-socqdokcmu] {
    opacity: 0.35;
}
/* /Components/Shared/SegmentedControl.razor.rz.scp.css */
.segmented[b-itnubcae1o] {
    display: inline-flex;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 2px;
    gap: 2px;
}

.segment[b-itnubcae1o] {
    background: none;
    border: none;
    padding: var(--nav-pad);
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--dim);
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

.segment:hover[b-itnubcae1o] {
    color: var(--text);
}

.segment.active[b-itnubcae1o] {
    background: var(--accent);
    color: var(--accent-text);
}
/* /Components/Shared/SelectField.razor.rz.scp.css */
.select-field[b-out22wh27a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.select-field select[b-out22wh27a] {
    height: 34px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 10px;
    font-size: 0.78125rem;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
}

.select-field select:focus-visible[b-out22wh27a] {
    border-color: var(--accent);
}
/* /Components/Shared/Spinner.razor.rz.scp.css */
/* Both layers are the same PNG, masked to opposite halves of the mark.
   Measured from the file: the mark fills the middle 49% of its 1024-px canvas,
   its core disc reaches 50% of the mark's radius, then there is empty space
   from 52% to 72%, then the orbit ring from 75% out. So a cut at 62% of the
   radius lands in that gap and separates the two cleanly.

   `closest-side` matters: it makes the gradient's 100% equal half the box
   width, so the percentages below are the same numbers as the measurements
   above. With the default `farthest-corner` they would be off by a factor of
   1.41 and the cut would land on the ring. */

.spinner[b-51htqx2gyr] {
    position: relative;
    display: inline-block;
    width: var(--spinner-size, 2rem);
    height: var(--spinner-size, 2rem);
    flex-shrink: 0;
    color: inherit;
}

.spinner-ring[b-51htqx2gyr],
.spinner-core[b-51htqx2gyr] {
    position: absolute;
    inset: 0;
    background: currentColor;

    -webkit-mask-image: url('/img/iteashub-logo.png'), var(--spinner-cut);
    -webkit-mask-size: 205%, 100%;
    -webkit-mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: source-in;

    mask-image: url('/img/iteashub-logo.png'), var(--spinner-cut);
    mask-size: 205%, 100%;
    mask-position: center, center;
    mask-repeat: no-repeat, no-repeat;
    mask-composite: intersect;
}

/* Everything outside the gap: the eight dots and the arcs between them. */
.spinner-ring[b-51htqx2gyr] {
    --spinner-cut: radial-gradient(circle closest-side at center,
        transparent 0 62%, #000 63%);
    animation: spin 1.15s linear infinite;
}

/* Everything inside it: the disc and the letter cut out of it. Never moves. */
.spinner-core[b-51htqx2gyr] {
    --spinner-cut: radial-gradient(circle closest-side at center,
        #000 0 62%, transparent 63%);
}
/* /Components/Shared/StatusDot.razor.rz.scp.css */
.status-dot[b-mfynmbnb5c] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.pulse[b-mfynmbnb5c] {
    animation: pulse 1.35s infinite;
}
/* /Components/Shared/ToastHost.razor.rz.scp.css */
/* Above the Modal scrim/panel (200/201) and the Drawer (150/151) — an error
   toast raised by a dialog must stay readable while that dialog is open. */
.toast-stack[b-5ssnqponnl] {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 400;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: 340px;
}

/* Only appears past two open toasts, so it needs its own opaque ground. */
.toast-clear-all[b-5ssnqponnl] {
    background: var(--surface);
    box-shadow: 0 8px 24px oklch(0.1 0.01 255 / 0.18);
    padding: 0.25rem 0.7rem;
    font-size: 0.71875rem;
    animation: slideup var(--dur-panel) var(--ease);
}

.toast[b-5ssnqponnl] {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--toast-color);
    border-radius: var(--radius);
    padding: 10px 12px;
    box-shadow: 0 8px 24px oklch(0.1 0.01 255 / 0.18);
    animation: slideup var(--dur-panel) var(--ease);
}

.toast-success[b-5ssnqponnl] { --toast-color: var(--green); }
.toast-error[b-5ssnqponnl] { --toast-color: var(--red); }
.toast-info[b-5ssnqponnl] { --toast-color: var(--blue); }

.toast-dot[b-5ssnqponnl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--toast-color);
    flex-shrink: 0;
}

.toast-message[b-5ssnqponnl] {
    font-size: 0.78125rem;
    color: var(--text);
    flex: 1;
}

/* Sits inside the message so it wraps with the sentence it belongs to. */
.toast-link[b-5ssnqponnl] {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 0.25rem;
}

.toast-link:hover[b-5ssnqponnl] {
    text-decoration: none;
}

.toast-dismiss[b-5ssnqponnl] {
    background: none;
    border: none;
    color: var(--faint);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 2px;
}

.toast-dismiss:hover[b-5ssnqponnl] {
    color: var(--text);
}

/* A sticky toast goes away only by click, so its ✕ is a real button. */
.toast-sticky .toast-dismiss[b-5ssnqponnl] {
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    color: var(--text);
    padding: 3px 6px;
    align-self: flex-start;
}

.toast-sticky .toast-dismiss:hover[b-5ssnqponnl] {
    border-color: var(--toast-color);
    color: var(--toast-color);
}

/* Multi-line validation text reads better with the marks at the top. */
.toast-sticky[b-5ssnqponnl] {
    align-items: flex-start;
}

.toast-sticky .toast-dot[b-5ssnqponnl] {
    margin-top: 5px;
}
/* /Infra/AppViewPage.razor.rz.scp.css */
.app-view-page[b-9jl30hmype] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.av-toolbar[b-9jl30hmype] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.av-toolbar-actions[b-9jl30hmype] {
    display: flex;
    gap: 8px;
}

.av-count[b-9jl30hmype] {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.av-name[b-9jl30hmype] {
    font-weight: 600;
}

.av-mono[b-9jl30hmype] {
    font-family: var(--mono);
    font-size: 0.8125rem;
}

.av-muted[b-9jl30hmype] {
    color: var(--text-muted);
    font-size: 0.78125rem;
}

.av-status[b-9jl30hmype] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.av-warn[b-9jl30hmype] {
    font-size: 0.78125rem;
    color: var(--amber);
}

.av-list[b-9jl30hmype] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-list-row[b-9jl30hmype] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.2fr;
    gap: 8px;
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
}

.av-actions[b-9jl30hmype] {
    display: flex;
    gap: 8px;
}

[b-9jl30hmype] .av-rollout {
    display: inline-flex;
    align-items: center;
}

/* The drawer footer: the way to the editor, and to applying on every host. */
.av-drawer-actions[b-9jl30hmype] {
    display: flex;
    gap: 8px;
}
/* /Infra/CloudInitPage.razor.rz.scp.css */
.ci-page[b-1hggiu8fel] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.ci-intro[b-1hggiu8fel],
.ci-editor[b-1hggiu8fel] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-hint[b-1hggiu8fel] {
    font-size: 0.78125rem;
    color: var(--dim);
    line-height: 1.55;
}

.ci-placeholders[b-1hggiu8fel] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    align-items: baseline;
}

.ci-placeholder[b-1hggiu8fel] {
    display: contents;
}

.ci-placeholder code[b-1hggiu8fel] {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--accent);
    white-space: nowrap;
}

/* The overlay only lines up if both layers agree on every metric that affects
   where a glyph lands. Changing one of these means changing both. */
.ci-editor-wrap[b-1hggiu8fel] {
    position: relative;
}

.ci-editor-wrap > .ci-highlight[b-1hggiu8fel],
.ci-editor-wrap > .ci-textarea[b-1hggiu8fel] {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: normal;
    tab-size: 2;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    /* The textarea's scrollbar eats content width; the pre has no scrollbar and
       would otherwise be that much wider. Reserving the gutter on both keeps
       their content boxes identical, which is what horizontal alignment rests
       on once a line is long enough to scroll. */
    scrollbar-gutter: stable;
}

/* Draws only. pointer-events:none keeps every click on the textarea, and the
   scroll position is pushed here by JS rather than scrolled directly. */
.ci-highlight[b-1hggiu8fel] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--surface-2);
    color: var(--dim);
    pointer-events: none;
}

/* Sits on top, invisible except for the caret and the selection. In normal
   flow, so it is what gives the wrapper its height - including after a drag
   on the resize handle. */
.ci-textarea[b-1hggiu8fel] {
    position: relative;
    display: block;
    width: 100%;
    background: transparent;
    color: transparent;
    caret-color: var(--text);
    overflow: auto;
    resize: vertical;
}

.ci-textarea:focus[b-1hggiu8fel] {
    outline: none;
    border-color: var(--accent);
}

.ci-actions[b-1hggiu8fel] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Pushed to the far end of the action row, so it reads as the state of the
   editor rather than as another button. */
.ci-dirty[b-1hggiu8fel] {
    margin-left: auto;
    font-size: 0.78125rem;
    color: var(--amber);
}

.ci-error[b-1hggiu8fel] {
    font-size: 0.78125rem;
    color: var(--red);
    line-height: 1.5;
}

.ci-ok[b-1hggiu8fel] {
    font-size: 0.78125rem;
    color: var(--green);
}

/* Not an error: nothing has gone wrong yet, the operator is about to discard
   something. */
.ci-warn[b-1hggiu8fel] {
    font-size: 0.78125rem;
    color: var(--amber);
    line-height: 1.5;
}
/* /Infra/CostPage.razor.rz.scp.css */
.cost-page[b-7gkzcd2qby] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The caveat leads the page, so it is styled to be read once rather than to
   be dismissed as a warning. */
.cp-intro[b-7gkzcd2qby] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-intro-title[b-7gkzcd2qby] {
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--text);
}

.cp-intro-text[b-7gkzcd2qby] {
    font-size: 0.78125rem;
    color: var(--dim);
    line-height: 1.5;
}

/* Three figures across, stacking to one column on a narrow screen. */
.cp-summary[b-7gkzcd2qby] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.cp-figure[b-7gkzcd2qby] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-figure-value[b-7gkzcd2qby] {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 650;
    color: var(--text);
    line-height: 1.1;
}

.cp-figure-note[b-7gkzcd2qby] {
    font-size: 0.71875rem;
    color: var(--faint);
}

.cp-mono[b-7gkzcd2qby] {
    font-family: var(--mono);
}

.cp-strong[b-7gkzcd2qby] {
    font-weight: 650;
    color: var(--text);
}

.cp-traffic[b-7gkzcd2qby] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    justify-content: flex-end;
}

.cp-share[b-7gkzcd2qby] {
    font-size: 0.71875rem;
    color: var(--faint);
}

/* A server past its included traffic is the one thing on this page worth
   catching the eye — it is the cost that arrives without anyone deciding. */
.cp-over[b-7gkzcd2qby] {
    color: var(--amber);
    font-weight: 650;
}

.cp-muted[b-7gkzcd2qby] {
    color: var(--faint);
}

.cp-trend[b-7gkzcd2qby] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-trend-row[b-7gkzcd2qby] {
    display: grid;
    grid-template-columns: 70px 1fr 110px auto;
    align-items: center;
    gap: 12px;
    font-size: 0.78125rem;
}

.cp-trend-month[b-7gkzcd2qby] {
    font-family: var(--mono);
    color: var(--dim);
}

.cp-trend-bar-track[b-7gkzcd2qby] {
    height: 8px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}

.cp-trend-bar[b-7gkzcd2qby] {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}

.cp-detail-head[b-7gkzcd2qby] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cp-detail-title[b-7gkzcd2qby] {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text);
}

.cp-detail-heading[b-7gkzcd2qby] {
    margin: 18px 0 8px;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--text);
}

.cp-lines[b-7gkzcd2qby] {
    display: flex;
    flex-direction: column;
}

.cp-line[b-7gkzcd2qby] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
}

/* The sum carries the weight; the parts above it stay quiet. */
.cp-line-total[b-7gkzcd2qby] {
    border-bottom: none;
    border-top: 2px solid var(--border-2);
    margin-top: 2px;
    padding-top: 9px;
}

.cp-gauge[b-7gkzcd2qby] {
    height: 10px;
    margin: 10px 0 8px;
    background: var(--surface-3);
    border-radius: 999px;
    overflow: hidden;
}

.cp-gauge-fill[b-7gkzcd2qby] {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}

.cp-gauge-over[b-7gkzcd2qby] {
    background: var(--amber);
}

/* The explanation of what a project total holds beyond its server rows. */
.cp-loose[b-7gkzcd2qby] {
    display: block;
    margin-top: 0.5rem;
}
/* /Infra/CreateHostDialog.razor.rz.scp.css */
.ch-form[b-9294ywa2wt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ch-field[b-9294ywa2wt] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field-hint[b-9294ywa2wt] {
    font-size: 0.71875rem;
    color: var(--faint);
}

.detail-title[b-9294ywa2wt] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.ch-error[b-9294ywa2wt] {
    font-size: 0.78125rem;
    color: var(--red);
    line-height: 1.5;
}

.ch-warn[b-9294ywa2wt] {
    color: var(--amber);
}

.ch-price[b-9294ywa2wt] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.ch-price-value[b-9294ywa2wt] {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.ch-price-label[b-9294ywa2wt] {
    font-size: 0.71875rem;
    color: var(--faint);
}

.ch-textarea[b-9294ywa2wt] {
    font-family: var(--mono);
    font-size: 0.75rem;
    line-height: 1.5;
    resize: vertical;
}

/* The document that will actually be sent, shown verbatim. */
.ch-preview[b-9294ywa2wt] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    line-height: 1.45;
    color: var(--dim);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0;
    max-height: 320px;
    overflow: auto;
    white-space: pre;
}

.ch-label-row[b-9294ywa2wt] {
    display: grid;
    grid-template-columns: 1fr 1fr max-content;
    gap: 6px;
    align-items: center;
}

.ch-ok[b-9294ywa2wt] {
    font-size: 0.78125rem;
    color: var(--green);
}

.hv-actions[b-9294ywa2wt] {
    display: flex;
    gap: 8px;
}

/* Validation next to the field it belongs to, not in a toast. */
.ch-field-error[b-9294ywa2wt] {
    font-size: 0.71875rem;
    color: var(--red);
    line-height: 1.45;
}

/* The Puppet identity the create would use, spelled out before the write. */
.ch-certname[b-9294ywa2wt] {
    font-size: 0.71875rem;
    color: var(--dim);
}

.ch-certname strong[b-9294ywa2wt] {
    font-family: var(--mono);
    color: var(--text);
    font-weight: 600;
}
/* /Infra/CreateProfileDialog.razor.rz.scp.css */
.cp-form[b-h3wshtiidf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cp-field[b-h3wshtiidf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-check[b-h3wshtiidf] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
}

/* ----- rejections --------------------------------------------------------- */

.cp-error[b-h3wshtiidf] {
    font-size: 0.78125rem;
    color: var(--red);
}

.cp-note[b-h3wshtiidf] {
    font-size: 0.78125rem;
    color: var(--dim);
}

/* The field itself is marked, so a footer line has somewhere to point. */
.cp-invalid[b-h3wshtiidf] {
    border-color: var(--red);
}

/* Above the buttons, in the one place a reader looks after pressing them. */
.cp-footer-error[b-h3wshtiidf] {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--red);
}
/* /Infra/HostAppsTab.razor.rz.scp.css */
.ha-grid[b-fuhgw3ms6c] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--card-gap);
    align-items: start;
}

@media (max-width: 1100px) {
    .ha-grid[b-fuhgw3ms6c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A wide matrix takes the whole row and the rail sits above it, as three cards
   in a line. Beside the rail the same table had 93 px for twelve columns. */
.ha-grid-stacked[b-fuhgw3ms6c] {
    grid-template-columns: minmax(0, 1fr);
}

/* Grid tracks, not flex children: the rail holds Card components, and a
   scoped `> *` rule cannot reach another component's root element. */
.ha-grid-stacked .ha-rail[b-fuhgw3ms6c] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.ha-rail[b-fuhgw3ms6c],
.ha-main[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    min-width: 0;
}

/* ----- rail --------------------------------------------------------------- */

.ha-assign-list[b-fuhgw3ms6c],
.ha-checks[b-fuhgw3ms6c],
.ha-delivery[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.ha-assign-row[b-fuhgw3ms6c],
.ha-delivery-row[b-fuhgw3ms6c] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ha-assign-text[b-fuhgw3ms6c],
.ha-check-text[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.ha-assign-name[b-fuhgw3ms6c] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.ha-grow[b-fuhgw3ms6c] {
    flex: 1;
    min-width: 0;
}

.ha-assign-add[b-fuhgw3ms6c] {
    display: flex;
    gap: 7px;
    padding-top: 3px;
}

.ha-check[b-fuhgw3ms6c] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.ha-check-value[b-fuhgw3ms6c] {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
    flex-shrink: 0;
}

/* ----- assignment cards --------------------------------------------------- */

/* Same anatomy as the shared Card, without body padding: these hold a
   full-bleed matrix, and a padded body would inset every column. */
.ha-card[b-fuhgw3ms6c] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ha-card-h[b-fuhgw3ms6c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--sec-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.ha-card-b[b-fuhgw3ms6c] {
    padding: var(--pad-card);
}

.ha-card-head[b-fuhgw3ms6c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
}

.ha-card-head h2[b-fuhgw3ms6c] {
    margin: 0;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--text);
}

.ha-link[b-fuhgw3ms6c] {
    font-size: 0.78125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ----- single-instance values --------------------------------------------- */

/* Two columns of pairs, so seven parameters are four rows rather than seven
   stacked fields down a narrow panel. */
.ha-values[b-fuhgw3ms6c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 14px;
}

@media (max-width: 820px) {
    .ha-values[b-fuhgw3ms6c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ha-value[b-fuhgw3ms6c] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.ha-value-name[b-fuhgw3ms6c] {
    font-size: 0.8125rem;
    color: var(--dim);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- the instance matrix ------------------------------------------------ */

.ha-table-wrap[b-fuhgw3ms6c] {
    overflow-x: auto;
}

.ha-matrix[b-fuhgw3ms6c] {
    width: 100%;
    border-collapse: collapse;
}

.ha-matrix th[b-fuhgw3ms6c],
.ha-matrix td[b-fuhgw3ms6c] {
    padding: var(--row-pad) var(--pad-card);
    border-right: 1px solid var(--col-divider);
    text-align: left;
    vertical-align: middle;
    font-size: 0.8125rem;
}

.ha-matrix th:last-child[b-fuhgw3ms6c],
.ha-matrix td:last-child[b-fuhgw3ms6c] {
    border-right: none;
}

.ha-matrix thead th[b-fuhgw3ms6c] {
    background: var(--table-head-bg);
    border-bottom: 1px solid var(--border-2);
    white-space: nowrap;
}

.ha-matrix thead .micro-label[b-fuhgw3ms6c] {
    color: var(--dim);
    font-weight: 600;
}

.ha-matrix tbody td[b-fuhgw3ms6c] {
    border-bottom: 1px solid var(--border);
}

/* ----- surviving thirteen columns ---------------------------------------- */

/* With iScan's parameter set the instance key scrolled out of sight while the
   right-hand cells were being edited, and the action column with it. Both ends
   stay put instead, so the row being edited stays identifiable.

   Sticky cells need an opaque fill of their own: the scrolling cells pass
   underneath them, not behind the row. */
.ha-matrix th.ha-instance-col[b-fuhgw3ms6c],
.ha-matrix td.ha-instance-col[b-fuhgw3ms6c] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border-2);
}

.ha-matrix .ha-state-col[b-fuhgw3ms6c],
.ha-matrix .ha-action-col[b-fuhgw3ms6c] {
    position: sticky;
    z-index: 2;
    background: var(--surface);
}

.ha-matrix .ha-state-col[b-fuhgw3ms6c] {
    right: 110px;
    box-shadow: -1px 0 0 var(--border-2);
}

.ha-matrix .ha-action-col[b-fuhgw3ms6c] {
    right: 0;
}

.ha-matrix thead th.ha-instance-col[b-fuhgw3ms6c],
.ha-matrix thead th.ha-state-col[b-fuhgw3ms6c],
.ha-matrix thead th.ha-action-col[b-fuhgw3ms6c] {
    background: var(--table-head-bg);
    z-index: 3;
}

/* --accent-soft is translucent, so the tint is layered over an opaque fill
   rather than replacing it. */
.ha-matrix td.ha-add-key[b-fuhgw3ms6c],
.ha-matrix td.ha-add-tail[b-fuhgw3ms6c] {
    background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
}

.ha-matrix td.ha-add-tail[b-fuhgw3ms6c] {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 250px;
}

/* The floor. Three pinned columns cost about 400 px, so below this the window
   left for a parameter cell is a sliver — worse than the truncation the
   stickiness was added to fix. The table then scrolls as a whole. */
@media (max-width: 1100px) {
    .ha-matrix th.ha-instance-col[b-fuhgw3ms6c],
    .ha-matrix td.ha-instance-col[b-fuhgw3ms6c],
    .ha-matrix .ha-state-col[b-fuhgw3ms6c],
    .ha-matrix .ha-action-col[b-fuhgw3ms6c],
    .ha-matrix td.ha-add-tail[b-fuhgw3ms6c] {
        position: static;
        box-shadow: none;
    }
}

/* Enough for a certname-length key, which is what the audit asked for, and no
   more: the three sticky columns are subtracted from the parameter cells. */
.ha-instance-col[b-fuhgw3ms6c] {
    min-width: 168px;
    max-width: 200px;
}

.ha-state-col[b-fuhgw3ms6c] {
    min-width: 124px;
}

.ha-action-col[b-fuhgw3ms6c] {
    width: 110px;
    min-width: 110px;
    text-align: right;
}

/* Wide enough to type a hostname into, narrow enough that three of them plus
   the three sticky columns fit a 1280-px window. */
.ha-matrix td .setting-input[b-fuhgw3ms6c],
.ha-matrix td select.setting-input[b-fuhgw3ms6c] {
    min-width: 124px;
}

.ha-instance-cell[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.ha-instance-key[b-fuhgw3ms6c] {
    font-weight: 600;
    white-space: nowrap;
}

.ha-active-state[b-fuhgw3ms6c],
.ha-withheld-state[b-fuhgw3ms6c],
.ha-removing-state[b-fuhgw3ms6c] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78125rem;
    white-space: nowrap;
}

.ha-removing-state[b-fuhgw3ms6c] {
    color: var(--amber);
    font-weight: 600;
}

/* Red rather than amber: the instance is not being served at all, and nothing
   on the host will change until it is complete. */
.ha-withheld-state[b-fuhgw3ms6c] {
    color: var(--red);
    font-weight: 600;
}

/* An instance on its way out keeps its row, because it is still being served
   with ensure: absent. The stripe says it is not an ordinary row. */
.ha-removing td[b-fuhgw3ms6c] {
    border-left-color: var(--amber);
}

.ha-removing td:first-child[b-fuhgw3ms6c] {
    border-left: 2px solid var(--amber);
}

/* Pressing Entfernen inserts this row between two existing ones. It enters so
   the reader sees where it came from instead of finding the table one row
   taller. */
.ha-removal-row[b-fuhgw3ms6c] {
    background: color-mix(in srgb, var(--amber) 7%, transparent);
    border-left: 2px solid var(--amber);
    animation: slideup var(--dur-panel) var(--ease);
}

.ha-removal[b-fuhgw3ms6c] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ha-removal-step[b-fuhgw3ms6c] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 240px;
    flex: 1;
}

.ha-removal-actions[b-fuhgw3ms6c] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.ha-add-row td[b-fuhgw3ms6c] {
    background: var(--accent-soft);
    border-bottom: none;
}

/* Stacked, not side by side: two inputs in a row set the width of the sticky
   instance column for the whole table. */
.ha-new-instance[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ha-new-instance .setting-input[b-fuhgw3ms6c] {
    width: 100%;
    min-width: 0;
}

.ha-add-actions[b-fuhgw3ms6c] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ha-add-btn[b-fuhgw3ms6c] {
    margin-top: 5px;
    width: 100%;
}

.ha-empty[b-fuhgw3ms6c] {
    color: var(--faint);
    font-size: 0.78125rem;
}

/* ----- draft state -------------------------------------------------------- */

/* An edited field is marked, because nothing is written until the save bar is
   used. Unmarked means stored.

   The transition belongs on the input, not on .ha-dirty: a transition declared
   by the same class that changes the colour arrives in the same style
   recalculation as the change, and nothing animates. On the base element it
   covers the mark appearing and disappearing again on save. */
.ha-values .setting-input[b-fuhgw3ms6c],
.ha-matrix .setting-input[b-fuhgw3ms6c] {
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.ha-dirty[b-fuhgw3ms6c] {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.ha-bad[b-fuhgw3ms6c] {
    border-color: var(--red);
}

/* The bar has nothing above it until the first edit, so it enters rather than
   appears — the same 160 ms slideup the toasts and the palette use.

   Sticky to the bottom of the scrolling pane: with iScan's parameter set the
   matrix is taller than the window, and the save button sat below everything
   an operator was editing. It is the last child of .ha-main, so it rides the
   viewport edge until the column's own end scrolls into view and then settles
   back into place. The shadow separates it from the cells passing underneath.

   The pane's bottom padding is subtracted because sticky offsets measure from
   the scroll container's content edge; without it the bar hovers 50px above
   the pane's bottom with rows showing beneath. */
.ha-savebar[b-fuhgw3ms6c] {
    position: sticky;
    bottom: calc(12px - var(--main-pad-bottom, 0px));
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--sec-pad) var(--pad-card);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px oklch(0.1 0.01 255 / 0.18);
    animation: slideup var(--dur-panel) var(--ease);
}

.ha-savebar-text[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ha-savebar-count[b-fuhgw3ms6c] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ha-savebar-actions[b-fuhgw3ms6c] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ----- shared ------------------------------------------------------------- */

.ha-mono[b-fuhgw3ms6c] {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

.ha-error[b-fuhgw3ms6c] {
    font-size: 0.78125rem;
    color: var(--red);
}

.ha-warn[b-fuhgw3ms6c] {
    font-size: 0.78125rem;
    color: var(--amber);
}

.ha-x[b-fuhgw3ms6c] {
    padding: 2px 8px;
    font-size: 0.71875rem;
    line-height: 1.4;
}

/* Two ✕ buttons on this screen mean two different deletions. The one that
   deletes an instance is marked; the one that unassigns is not. */
.ha-x-danger[b-fuhgw3ms6c] {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 45%, transparent);
}

/* ----- per-field messages ------------------------------------------------- */

/* The reason stands at the cell it belongs to. A toast said it once, three
   seconds after the value was gone from view. */
.ha-cell-error[b-fuhgw3ms6c] {
    display: block;
    margin-top: 3px;
    max-width: 220px;
    font-size: 0.71875rem;
    color: var(--red);
}

/* ----- system-managed parameter ------------------------------------------ */

/* ensure keeps its column so the reader sees the application has the key, but
   it is never an input: the value belongs to the two-stage removal. */
.ha-system-cell[b-fuhgw3ms6c] {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--faint);
    white-space: nowrap;
}

.ha-system-tag[b-fuhgw3ms6c] {
    display: block;
    font-size: 0.65625rem;
    color: var(--faint);
}

/* ----- destructive confirmations ----------------------------------------- */

.ha-confirm[b-fuhgw3ms6c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.ha-confirm-actions[b-fuhgw3ms6c] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Same entrance as the removal row, so the second step is seen to belong to
   the click that asked for it. */
.ha-confirm-row[b-fuhgw3ms6c] {
    background: color-mix(in srgb, var(--red) 7%, transparent);
    border-left: 2px solid var(--red);
    animation: slideup var(--dur-panel) var(--ease);
}

.ha-rail .ha-confirm[b-fuhgw3ms6c] {
    padding: 7px 9px;
    border: 1px solid var(--red);
    border-radius: var(--radius);
    animation: slideup var(--dur-panel) var(--ease);
}

/* ----- prerequisites ----------------------------------------------------- */

.ha-prereq[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid var(--border);
}

.ha-prereq-path[b-fuhgw3ms6c] {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
    overflow-wrap: anywhere;
}

.ha-retry[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.ha-value-input[b-fuhgw3ms6c] {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}
/* /Infra/HostDetailPage.razor.rz.scp.css */
.hd-page[b-zr0ys5y6iw] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.hd-head[b-zr0ys5y6iw] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.hd-title-block[b-zr0ys5y6iw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.hd-title[b-zr0ys5y6iw] {
    font-family: var(--mono);
    font-size: 1.125rem;
    font-weight: 600;
}

.hd-badges[b-zr0ys5y6iw] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ----- tabs --------------------------------------------------------------- */

.hd-tabs[b-zr0ys5y6iw] {
    display: flex;
    gap: 2px;
    padding: 0 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom-color: var(--border);
}

.hd-tab[b-zr0ys5y6iw] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dim);
    cursor: pointer;
}

.hd-tab:hover[b-zr0ys5y6iw] {
    color: var(--text);
}

.hd-tab.on[b-zr0ys5y6iw] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
/* /Infra/HostFirewallTab.razor.rz.scp.css */
.fw-grid[b-a1y52l3np7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px;
    gap: var(--card-gap);
    align-items: start;
}

@media (max-width: 1300px) {
    .fw-grid[b-a1y52l3np7] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .fw-grid[b-a1y52l3np7] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.fw-side[b-a1y52l3np7] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    min-width: 0;
}

/* Same anatomy as the shared Card, without body padding: these are lists of
   rules, and each row draws its own separator. */
.fw-card[b-a1y52l3np7] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 0;
}

.fw-card-h[b-a1y52l3np7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--sec-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.fw-card-h h2[b-a1y52l3np7] {
    margin: 0;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--text);
}

/* A band names which firewall the rows under it belong to. Without it the
   base tier and the host's own set read as one list. */
.fw-band[b-a1y52l3np7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px var(--pad-card);
    background: var(--surface-3);
    border-bottom: 1px solid var(--border);
}

.fw-band-own[b-a1y52l3np7] {
    background: var(--accent-soft);
}

.fw-band-own .micro-label[b-a1y52l3np7] {
    color: var(--accent);
}

.fw-band-warn[b-a1y52l3np7] {
    background: color-mix(in srgb, var(--amber) 12%, transparent);
}

.fw-band-warn .micro-label[b-a1y52l3np7] {
    color: var(--amber);
}

.fw-row[b-a1y52l3np7] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--row-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.fw-row-note[b-a1y52l3np7] {
    padding: var(--row-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.fw-note-band[b-a1y52l3np7] {
    background: var(--surface-2);
}

/* The base tier is read, never written, so it is set back from the rules
   IteasHub owns. */
.fw-row-base[b-a1y52l3np7] {
    color: var(--dim);
}

/* In Hetzner, in no profile: the row an apply would delete. */
.fw-row-drift[b-a1y52l3np7] {
    border-left: 2px solid var(--red);
}

.fw-sign[b-a1y52l3np7] {
    width: 14px;
    flex-shrink: 0;
    font-family: var(--mono);
    font-weight: 600;
}

.fw-port[b-a1y52l3np7] {
    width: 88px;
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.75rem;
}

.fw-cidr[b-a1y52l3np7] {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fw-diff-note[b-a1y52l3np7] {
    font-size: 0.71875rem;
    color: var(--dim);
    flex-shrink: 0;
}

.fw-diff-add[b-a1y52l3np7] {
    background: color-mix(in srgb, var(--green) 8%, transparent);
}

.fw-diff-add .fw-sign[b-a1y52l3np7] {
    color: var(--green);
}

.fw-diff-remove[b-a1y52l3np7] {
    background: color-mix(in srgb, var(--red) 8%, transparent);
}

.fw-diff-remove .fw-sign[b-a1y52l3np7] {
    color: var(--red);
}

.fw-diff-same[b-a1y52l3np7] {
    color: var(--faint);
}

.fw-foot[b-a1y52l3np7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--sec-pad) var(--pad-card);
    background: var(--surface-2);
}

/* A rule nobody modelled is a decision, not a warning to scroll past. */
.fw-resolve[b-a1y52l3np7] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: var(--pad-card);
    border-bottom: 1px solid var(--border);
    border-left: 2px solid var(--red);
    background: color-mix(in srgb, var(--red) 7%, transparent);
}

.fw-resolve-title[b-a1y52l3np7] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.fw-resolve-actions[b-a1y52l3np7] {
    display: flex;
    gap: 8px;
}

/* ----- the guard list ----------------------------------------------------- */

.fw-checks[b-a1y52l3np7],
.fw-apply[b-a1y52l3np7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fw-check[b-a1y52l3np7] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.fw-check-text[b-a1y52l3np7] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.fw-check-value[b-a1y52l3np7] {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
    flex-shrink: 0;
}

.fw-apply-head[b-a1y52l3np7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fw-wide[b-a1y52l3np7] {
    width: 100%;
}

.fw-divider[b-a1y52l3np7] {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
}

.fw-mono[b-a1y52l3np7] {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

.fw-error[b-a1y52l3np7] {
    font-size: 0.78125rem;
    color: var(--red);
}
/* /Infra/HostSummarySection.razor.rz.scp.css */
/* The read-only host summary in the drawer. Lines of facts, no inputs. */

.hs-head[b-nsxr50thl9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.hs-row[b-nsxr50thl9] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
}

.hs-row:last-child[b-nsxr50thl9] {
    border-bottom: none;
}

.hs-stack[b-nsxr50thl9] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}

.hs-name[b-nsxr50thl9] {
    font-weight: 600;
}

.hs-mono[b-nsxr50thl9] {
    font-family: var(--mono);
    font-size: var(--fs-caption);
}

.hs-error[b-nsxr50thl9] {
    font-size: var(--fs-caption);
    color: var(--red);
}
/* /Infra/HostViewPage.razor.rz.scp.css */
.host-view-page[b-0z81mwncyd] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.hv-toolbar[b-0z81mwncyd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hv-count[b-0z81mwncyd] {
    font-size: 0.78125rem;
    color: var(--dim);
}

.hv-banner[b-0z81mwncyd] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.hv-banner-title[b-0z81mwncyd] {
    color: var(--amber);
    font-weight: 600;
}

.hv-banner-error[b-0z81mwncyd] {
    color: var(--red);
    font-weight: 600;
}

.hv-banner-text[b-0z81mwncyd] {
    color: var(--dim);
    font-size: 0.78125rem;
}

[b-0z81mwncyd] .hv-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

[b-0z81mwncyd] .hv-mono {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

[b-0z81mwncyd] .hv-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The drawer renders outside this component's scope, so its copies of the
   shared detail classes are unscoped. */
.hv-mono[b-0z81mwncyd] {
    font-family: var(--mono);
    color: var(--dim);
}

.field-hint[b-0z81mwncyd] {
    font-size: 0.71875rem;
    color: var(--faint);
}

.detail-head-text[b-0z81mwncyd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-title[b-0z81mwncyd] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.detail-sub[b-0z81mwncyd] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}

.detail-section[b-0z81mwncyd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.field-value[b-0z81mwncyd] {
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.5;
}

.hv-labels[b-0z81mwncyd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hv-label[b-0z81mwncyd] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--dim);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
}

.hv-actions[b-0z81mwncyd] {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.hv-toolbar-actions[b-0z81mwncyd] {
    display: flex;
    gap: 8px;
}

[b-0z81mwncyd] .hv-orphan-badge {
    font-size: 0.71875rem;
    font-weight: 600;
    color: var(--amber);
}

.hv-orphan[b-0z81mwncyd] {
    font-size: 0.78125rem;
    color: var(--amber);
    line-height: 1.5;
}

/* The delete block is the only place in the app that destroys a machine.
   It is marked so it does not read as one more field. */
.hv-danger[b-0z81mwncyd] {
    border-top-color: var(--red);
}

.hv-danger .micro-label[b-0z81mwncyd] {
    color: var(--red);
}

/* The drawer footer: the way to the host's own page. */
.hv-drawer-actions[b-0z81mwncyd] {
    display: flex;
    gap: 8px;
}




/* /Infra/ProfileDetailPanel.razor.rz.scp.css */
/* The read-only profile panel. The editors live on ProfileEditPage, so nothing
   here styles an input — these are lines of facts. */

.pd-section-head[b-tg2dv47xke] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

/* One fact per line: a name that may be long, then the short qualifiers. At
   459 px this is what a five-column table cannot be. */
.pd-read-row[b-tg2dv47xke] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
}

.pd-read-row:last-child[b-tg2dv47xke] {
    border-bottom: none;
}

.pd-grow[b-tg2dv47xke] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pd-stack[b-tg2dv47xke] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Protocol and port read as one token, so they get a fixed column and the
   source ranges below each other line up. */
.pd-port[b-tg2dv47xke] {
    width: 84px;
    flex-shrink: 0;
}

.pd-mono[b-tg2dv47xke] {
    font-family: var(--mono);
    font-size: var(--fs-caption);
}

.pd-muted[b-tg2dv47xke] {
    color: var(--dim);
    font-size: var(--fs-caption);
}

.pd-chip[b-tg2dv47xke] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: var(--fs-micro);
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--dim);
}

.pd-flag[b-tg2dv47xke] {
    flex-shrink: 0;
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--amber);
}

.pd-note[b-tg2dv47xke] {
    font-size: var(--fs-caption);
    color: var(--amber);
}

/* A consequence, not a hint: the profile saves fine and delivers nothing. */
.pd-note-warn[b-tg2dv47xke] {
    display: block;
    padding: 6px 8px;
    border: 1px solid var(--amber);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--amber) 10%, transparent);
}
/* /Infra/ProfileEditPage.razor.rz.scp.css */
.pe-page[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

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

.pe-head[b-t76pe0z2q5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.pe-head-left[b-t76pe0z2q5] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.pe-back[b-t76pe0z2q5] {
    flex-shrink: 0;
}

.pe-title-block[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pe-title-row[b-t76pe0z2q5] {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.pe-title[b-t76pe0z2q5] {
    font-size: 1.25rem;
    font-weight: 700;
}

.pe-key[b-t76pe0z2q5] {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--dim);
}

.pe-badges[b-t76pe0z2q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pe-head-right[b-t76pe0z2q5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Unsaved work is stated, not implied by an enabled button. */
.pe-dirty[b-t76pe0z2q5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--amber);
}

/* ----- layout ------------------------------------------------------------- */

.pe-grid[b-t76pe0z2q5] {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--card-gap);
    align-items: start;
}

/* The rail is the only column that survives a narrow window, so it stacks
   rather than shrinking the tables into a scroll. */
@media (max-width: 1100px) {
    .pe-grid[b-t76pe0z2q5] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pe-main[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    min-width: 0;
}

/* ----- rail --------------------------------------------------------------- */

.pe-rail[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pe-group[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pe-field[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pe-two[b-t76pe0z2q5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

/* A child component's root is never stamped with this page's scope, so an
   inline control is wrapped rather than styled through. */
.pe-inline[b-t76pe0z2q5] {
    display: flex;
    align-self: flex-start;
}

.pe-divider[b-t76pe0z2q5] {
    height: 1px;
    background: var(--border);
}

.pe-actions[b-t76pe0z2q5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 2px;
}

.pe-check[b-t76pe0z2q5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    cursor: pointer;
}

.pe-check input[b-t76pe0z2q5] {
    cursor: pointer;
}

.pe-warn[b-t76pe0z2q5] {
    font-size: 0.78125rem;
    color: var(--amber);
}

.pe-note[b-t76pe0z2q5] {
    font-size: 0.78125rem;
    color: var(--dim);
}

/* ----- table cards -------------------------------------------------------- */

/* Same anatomy as the shared Card, with no body padding: these hold
   full-bleed tables, and a padded body would inset every column. */
.pe-card[b-t76pe0z2q5] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.pe-card-h[b-t76pe0z2q5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--sec-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.pe-card-b[b-t76pe0z2q5] {
    padding: var(--pad-card);
}

.pe-card-head[b-t76pe0z2q5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-width: 0;
}

.pe-card-head h2[b-t76pe0z2q5] {
    margin: 0;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--text);
}

/* ----- tables ------------------------------------------------------------- */

.pe-table-wrap[b-t76pe0z2q5] {
    overflow-x: auto;
}

.pe-table[b-t76pe0z2q5] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.pe-table th[b-t76pe0z2q5],
.pe-table td[b-t76pe0z2q5] {
    padding: var(--row-pad) var(--pad-card);
    border-right: 1px solid var(--col-divider);
    text-align: left;
    vertical-align: middle;
    font-size: 0.8125rem;
}

.pe-table th:last-child[b-t76pe0z2q5],
.pe-table td:last-child[b-t76pe0z2q5] {
    border-right: none;
}

.pe-table thead th[b-t76pe0z2q5] {
    background: var(--table-head-bg);
    border-bottom: 1px solid var(--border-2);
}

.pe-table thead .micro-label[b-t76pe0z2q5] {
    color: var(--dim);
    font-weight: 600;
}

.pe-table tbody td[b-t76pe0z2q5] {
    border-bottom: 1px solid var(--border);
}

.pe-table tbody tr:nth-child(even)[b-t76pe0z2q5] {
    background: var(--row-alt);
}

/* Column widths per table. Every editor gets the room its widest value needs,
   which is the whole reason this is a page and not the drawer. */
.pe-params th:nth-child(1)[b-t76pe0z2q5], .pe-params td:nth-child(1)[b-t76pe0z2q5] { width: 22%; }
.pe-params th:nth-child(2)[b-t76pe0z2q5], .pe-params td:nth-child(2)[b-t76pe0z2q5] { width: 24%; }
.pe-params th:nth-child(3)[b-t76pe0z2q5], .pe-params td:nth-child(3)[b-t76pe0z2q5] { width: 13%; }
.pe-params th:nth-child(4)[b-t76pe0z2q5], .pe-params td:nth-child(4)[b-t76pe0z2q5] { width: 16%; }
.pe-params th:nth-child(5)[b-t76pe0z2q5], .pe-params td:nth-child(5)[b-t76pe0z2q5] { width: 13%; }
.pe-params th:nth-child(6)[b-t76pe0z2q5], .pe-params td:nth-child(6)[b-t76pe0z2q5] { width: 12%; }

.pe-rules th:nth-child(1)[b-t76pe0z2q5], .pe-rules td:nth-child(1)[b-t76pe0z2q5] { width: 13%; }
.pe-rules th:nth-child(2)[b-t76pe0z2q5], .pe-rules td:nth-child(2)[b-t76pe0z2q5] { width: 20%; }
.pe-rules th:nth-child(3)[b-t76pe0z2q5], .pe-rules td:nth-child(3)[b-t76pe0z2q5] { width: 27%; }
.pe-rules th:nth-child(4)[b-t76pe0z2q5], .pe-rules td:nth-child(4)[b-t76pe0z2q5] { width: 28%; }
.pe-rules th:nth-child(5)[b-t76pe0z2q5], .pe-rules td:nth-child(5)[b-t76pe0z2q5] { width: 12%; }

.pe-usage th:nth-child(1)[b-t76pe0z2q5], .pe-usage td:nth-child(1)[b-t76pe0z2q5] { width: 40%; }
.pe-usage th:nth-child(2)[b-t76pe0z2q5], .pe-usage td:nth-child(2)[b-t76pe0z2q5] { width: 20%; }
.pe-usage th:nth-child(3)[b-t76pe0z2q5], .pe-usage td:nth-child(3)[b-t76pe0z2q5] { width: 15%; }
.pe-usage th:nth-child(4)[b-t76pe0z2q5], .pe-usage td:nth-child(4)[b-t76pe0z2q5] { width: 25%; }

/* The add row sits on the table's own columns, so each field is under the
   heading it answers. */
.pe-add-row td[b-t76pe0z2q5] {
    background: var(--accent-soft);
    border-bottom: none;
}

.pe-table tbody tr.pe-add-row:nth-child(even)[b-t76pe0z2q5] {
    background: var(--accent-soft);
}

.pe-name-cell[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pe-mono[b-t76pe0z2q5] {
    font-family: var(--mono);
    font-size: 0.75rem;
}

.pe-muted[b-t76pe0z2q5] {
    color: var(--dim);
}

.pe-flag[b-t76pe0z2q5] {
    color: var(--amber);
    font-weight: 600;
}

.pe-chip[b-t76pe0z2q5] {
    display: inline-flex;
    align-items: center;
    font-family: var(--mono);
    font-size: 0.6875rem;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--dim);
}

.pe-empty[b-t76pe0z2q5] {
    color: var(--faint);
    font-size: 0.78125rem;
}

.pe-row-action[b-t76pe0z2q5] {
    text-align: right;
}

.pe-x[b-t76pe0z2q5] {
    padding: 2px 8px;
    line-height: 1;
}

/* A rule change reaches every host in the list, but only when each firewall is
   written. The footer is where that is said. */
.pe-usage-foot[b-t76pe0z2q5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--sec-pad) var(--pad-card);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* ----- rejections next to the row ----------------------------------------- */

/* An imported description can be a paragraph. Two lines here, the rest in the
   title attribute. */
.pe-desc[b-t76pe0z2q5] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pe-invalid[b-t76pe0z2q5] {
    border-color: var(--red);
}

.pe-error[b-t76pe0z2q5] {
    font-size: 0.78125rem;
    color: var(--red);
}

.pe-error-row td[b-t76pe0z2q5] {
    background: var(--surface-2);
    border-bottom: none;
}

.pe-error-box[b-t76pe0z2q5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.pe-error-texts[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Several blocks fit, so the field is not one line tall. */
.pe-cidr[b-t76pe0z2q5] {
    min-height: 52px;
}

/* ----- delete confirmation ------------------------------------------------ */

.pe-confirm-row td[b-t76pe0z2q5] {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.pe-confirm[b-t76pe0z2q5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.pe-confirm-text[b-t76pe0z2q5] {
    font-size: 0.8125rem;
    color: var(--text);
}

.pe-confirm-input[b-t76pe0z2q5] {
    max-width: 260px;
}
/* /Infra/PuppetClassSelect.razor.rz.scp.css */
.pcs-plain[b-alljh1vtbq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pcs-note[b-alljh1vtbq] {
    font-size: 0.78125rem;
    color: var(--text-muted);
}
/* /Infra/RolloutPage.razor.rz.scp.css */
.ro-page[b-si36a8htqr] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.ro-head[b-si36a8htqr] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ro-title-block[b-si36a8htqr] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ro-title[b-si36a8htqr] {
    font-size: 1.25rem;
    font-weight: 700;
}

.ro-banner[b-si36a8htqr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ro-banner-title[b-si36a8htqr] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--amber);
}

/* "Nothing to apply" is a verdict, not a warning: same banner, no alarm. */
.ro-banner-title.ro-banner-quiet[b-si36a8htqr] {
    color: var(--dim);
}

/* ----- the host table ----------------------------------------------------- */

/* Same anatomy as the shared Card, without body padding: the table is
   full-bleed and the footer carries its own. */
.ro-card[b-si36a8htqr] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.ro-card-h[b-si36a8htqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--sec-pad) var(--pad-card);
    border-bottom: 1px solid var(--border);
}

.ro-card-head[b-si36a8htqr] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ro-card-head h2[b-si36a8htqr] {
    margin: 0;
    font-size: 0.84375rem;
    font-weight: 700;
    color: var(--text);
}

.ro-table-wrap[b-si36a8htqr] {
    overflow-x: auto;
}

.ro-table[b-si36a8htqr] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 1040px;
}

.ro-table th[b-si36a8htqr],
.ro-table td[b-si36a8htqr] {
    padding: var(--row-pad) var(--pad-card);
    border-right: 1px solid var(--col-divider);
    text-align: left;
    vertical-align: middle;
    font-size: 0.8125rem;
}

.ro-table th:last-child[b-si36a8htqr],
.ro-table td:last-child[b-si36a8htqr] {
    border-right: none;
}

.ro-table thead th[b-si36a8htqr] {
    background: var(--table-head-bg);
    border-bottom: 1px solid var(--border-2);
}

.ro-table thead .micro-label[b-si36a8htqr] {
    color: var(--dim);
    font-weight: 600;
}

.ro-table tbody td[b-si36a8htqr] {
    border-bottom: 1px solid var(--border);
}

.ro-table tbody tr:last-child td[b-si36a8htqr] {
    border-bottom: none;
}

.ro-table tbody tr:nth-child(even)[b-si36a8htqr] {
    background: var(--row-alt);
}

.ro-check-col[b-si36a8htqr] {
    width: 40px;
    text-align: center;
}

.ro-check-col input[b-si36a8htqr] {
    cursor: pointer;
}

.ro-table th:nth-child(2)[b-si36a8htqr], .ro-table td:nth-child(2)[b-si36a8htqr] { width: 26%; }
.ro-table th:nth-child(3)[b-si36a8htqr], .ro-table td:nth-child(3)[b-si36a8htqr] { width: 12%; }
.ro-table th:nth-child(4)[b-si36a8htqr], .ro-table td:nth-child(4)[b-si36a8htqr] { width: 9%; }
.ro-table th:nth-child(5)[b-si36a8htqr], .ro-table td:nth-child(5)[b-si36a8htqr] { width: 8%; }
.ro-table th:nth-child(6)[b-si36a8htqr], .ro-table td:nth-child(6)[b-si36a8htqr] { width: 15%; }
.ro-table th:nth-child(7)[b-si36a8htqr], .ro-table td:nth-child(7)[b-si36a8htqr] { width: 12%; }
.ro-table th:nth-child(8)[b-si36a8htqr], .ro-table td:nth-child(8)[b-si36a8htqr] { width: 18%; }

.ro-mono[b-si36a8htqr] {
    font-family: var(--mono);
    font-size: 0.75rem;
}

.ro-muted[b-si36a8htqr] {
    color: var(--dim);
}

.ro-ok[b-si36a8htqr] {
    font-size: 0.78125rem;
    color: var(--green);
}

.ro-warn[b-si36a8htqr] {
    font-size: 0.78125rem;
    color: var(--amber);
}

.ro-error[b-si36a8htqr] {
    font-size: 0.78125rem;
    color: var(--red);
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* ----- footer ------------------------------------------------------------- */

.ro-foot[b-si36a8htqr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--pad-card);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

.ro-foot-actions[b-si36a8htqr] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ro-foot-summary[b-si36a8htqr] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.ro-selected[b-si36a8htqr] {
    font-size: 0.8125rem;
    font-weight: 600;
}

.ro-confirm[b-si36a8htqr] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78125rem;
    cursor: pointer;
}

.ro-confirm input[b-si36a8htqr] {
    cursor: pointer;
}

/* What happened, per host, in the order it happened. A run that stopped
   halfway has to be legible afterwards. */
.ro-log[b-si36a8htqr] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* ----- the order ---------------------------------------------------------- */

.ro-order[b-si36a8htqr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .ro-order[b-si36a8htqr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ro-step[b-si36a8htqr] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* /Jamf/JamfDevicesPage.razor.rz.scp.css */
.jamf-devices-page[b-opcbr1jxwe] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.filters-row[b-opcbr1jxwe] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--card-gap);
}

.search-field[b-opcbr1jxwe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}

.search-field input[b-opcbr1jxwe] {
    height: 34px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
}

.search-field input:focus-visible[b-opcbr1jxwe] {
    outline: none;
    border-color: var(--accent);
}

.jamf-toolbar[b-opcbr1jxwe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pinned to the right edge whether or not the stale-devices block is there.
   space-between put it in the middle as soon as a third child appeared. */
.jamf-export[b-opcbr1jxwe] {
    margin-left: auto;
}

/* The stale block and the export button form one group on the right, so only
   the first of them takes the auto margin. */
.stale-actions + .jamf-export[b-opcbr1jxwe] {
    margin-left: 0;
}

.jamf-count[b-opcbr1jxwe] {
    font-size: 0.78125rem;
    color: var(--dim);
}

.stale-actions[b-opcbr1jxwe] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.stale-note[b-opcbr1jxwe] {
    font-size: 0.78125rem;
    color: var(--red);
}

.stale-hint[b-opcbr1jxwe] {
    font-size: 0.71875rem;
    color: var(--red);
}

.bulk-toolbar[b-opcbr1jxwe] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bulk-actions[b-opcbr1jxwe] {
    display: flex;
    gap: 8px;
}

.btn-ghost[b-opcbr1jxwe] {
    height: 34px;
    padding: 0 12px;
    background: none;
    color: var(--dim);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-size: 0.78125rem;
    cursor: pointer;
}

.btn-ghost:hover[b-opcbr1jxwe] {
    color: var(--text);
    border-color: var(--text-dim);
}

.btn-danger[b-opcbr1jxwe] {
    height: 34px;
    padding: 0 12px;
    background: var(--red);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.78125rem;
    font-weight: 600;
    cursor: pointer;
}

[b-opcbr1jxwe] .name-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

[b-opcbr1jxwe] .location-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-opcbr1jxwe] .mono-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

[b-opcbr1jxwe] .quick-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-opcbr1jxwe] .quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: none;
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    color: var(--dim);
    cursor: pointer;
}

[b-opcbr1jxwe] .quick-action svg {
    width: 14px;
    height: 14px;
}

[b-opcbr1jxwe] .quick-action:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.detail-head-text[b-opcbr1jxwe] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-title[b-opcbr1jxwe] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.detail-sub[b-opcbr1jxwe] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}

.detail-section[b-opcbr1jxwe] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.field-value[b-opcbr1jxwe] {
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.5;
}

.field-hint[b-opcbr1jxwe] {
    font-size: 0.71875rem;
    color: var(--faint);
}
/* /Jamf/JamfLocationsPage.razor.rz.scp.css */
.jamf-locations-page[b-loiku199ab] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.jamf-toolbar[b-loiku199ab] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.jamf-count[b-loiku199ab] {
    font-size: 0.78125rem;
    color: var(--dim);
}

[b-loiku199ab] .location-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

[b-loiku199ab] .mono-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

[b-loiku199ab] .license-count-link {
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 600;
    text-decoration: none;
}

[b-loiku199ab] .license-count-link:hover {
    text-decoration: underline;
}

.field-hint[b-loiku199ab] {
    font-size: 0.71875rem;
    color: var(--faint);
}

.detail-head-text[b-loiku199ab] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-title[b-loiku199ab] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.detail-sub[b-loiku199ab] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}

.detail-section[b-loiku199ab] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.field-value[b-loiku199ab] {
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.5;
}

.license-summary .license-counts[b-loiku199ab] {
    display: flex;
    gap: 20px;
}

.license-count-link[b-loiku199ab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: inherit;
}

.license-count-value[b-loiku199ab] {
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
}

.license-count-label[b-loiku199ab] {
    font-size: 0.65625rem;
    color: var(--faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* /Jobs/BackgroundJobsPage.razor.rz.scp.css */
.jobs-page[b-1jkl6dra5k] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.kpi-grid[b-1jkl6dra5k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--card-gap);
}

[b-1jkl6dra5k] .mono-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

[b-1jkl6dra5k] .status-cell {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78125rem;
    color: var(--text);
}

[b-1jkl6dra5k] .run-chip,
[b-1jkl6dra5k] .history-chip {
    font-family: var(--mono);
    font-size: 0.65625rem;
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-2);
    background: none;
    color: var(--dim);
    cursor: pointer;
    white-space: nowrap;
}

[b-1jkl6dra5k] .run-chip:hover,
[b-1jkl6dra5k] .history-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

[b-1jkl6dra5k] .run-log-cell {
    font-family: var(--mono);
    font-size: 0.671875rem;
    color: var(--dim);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 6.5em;
    overflow-y: auto;
}

.drawer-title-row[b-1jkl6dra5k] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mono-id[b-1jkl6dra5k] {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--text);
}

.meta-grid[b-1jkl6dra5k] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.schedule-editor[b-1jkl6dra5k] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.schedule-editor .setting-input[b-1jkl6dra5k] {
    flex: 1;
}

.schedule-actions[b-1jkl6dra5k] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.error-heading[b-1jkl6dra5k],
.log-heading[b-1jkl6dra5k] {
    margin: 0 0 8px;
    font-size: 0.78125rem;
    font-weight: 700;
    color: var(--red);
}

.log-heading[b-1jkl6dra5k] {
    color: var(--text);
    margin-top: 18px;
}

.log-search[b-1jkl6dra5k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.log-search-input[b-1jkl6dra5k] {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 9px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.71875rem;
    font-family: var(--mono);
}

.log-search-input:focus-visible[b-1jkl6dra5k] {
    outline: none;
    border-color: var(--accent);
}

.log-search-count[b-1jkl6dra5k] {
    font-size: 0.6875rem;
    color: var(--faint);
    white-space: nowrap;
}

.log-search-clear[b-1jkl6dra5k] {
    flex: none;
    width: 24px;
    height: 24px;
    background: none;
    color: var(--faint);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    line-height: 1;
}

.log-search-clear:hover[b-1jkl6dra5k] {
    background: var(--surface-3);
    color: var(--text);
}

.error-text[b-1jkl6dra5k],
.log-text[b-1jkl6dra5k] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
}

.history-window-note[b-1jkl6dra5k] {
    margin: 0 0 12px;
    font-size: 0.71875rem;
    color: var(--faint);
}

.drawer-actions[b-1jkl6dra5k] {
    display: flex;
    gap: 10px;
}

.history-button[b-1jkl6dra5k] {
    height: 38px;
    padding: 0 16px;
    background: none;
    color: var(--dim);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.history-button:hover[b-1jkl6dra5k] {
    border-color: var(--accent);
    color: var(--accent);
}

.run-now-button[b-1jkl6dra5k] {
    height: 38px;
    padding: 0 16px;
    background: var(--accent);
    color: var(--accent-text);
    border: none;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-ic1lmbt5s6] {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}

.app-main-col[b-ic1lmbt5s6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-main[b-ic1lmbt5s6] {
    /* A variable, because position: sticky measures from the pane's content
       edge, not its border: an element that should sit at the pane's bottom
       has to subtract this padding (see .ha-savebar). */
    --main-pad-bottom: 50px;
    flex: 1;
    overflow-y: auto;
    padding: var(--content-pad) var(--content-padx) var(--main-pad-bottom);
}

/* Always visible, because it is a sibling of the scrolling element rather than
   inside it — no position: sticky needed, and none of its side effects. */
.app-footer[b-ic1lmbt5s6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px var(--content-padx);
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.6875rem;
    color: var(--dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-footer-sep[b-ic1lmbt5s6] {
    opacity: 0.6;
}

/* Page-transition fade (task: quick fade between pages). @key="NavManager.Uri"
   on this wrapper (see MainLayout.razor) makes every navigation a fresh
   element as far as Blazor's diffing is concerned, so this mount-animation
   replays on every page change without any extra script. The fade-OUT half
   can't work the same way — there's no "unmount" animation hook — so
   Routes.razor's Router.OnNavigateAsync toggles .page-fade-out via JS just
   before the swap; the element is then thrown away anyway (a new one takes
   its place), so there's nothing to reset afterwards. */
/* The incoming page moves as well as fades. Opacity alone was not visible:
   the sidebar and the topbar hold still, so a cross-fade of the content gives
   the eye nothing to follow. 12 px of travel is what makes it legible — a page
   is a bigger object than a toast, and the 8 px that reads on a toast does not
   read across a whole column.

   The animation sits on a class rather than on .page-fade itself because
   nothing here is ever mounted twice: enhanced navigation patches this element
   in place, so js/page-transition.js removes and re-adds the class per
   navigation. That is also why there is no exit half — enhanced navigation
   raises no event before the swap, and dimming on link click would dim for
   clicks that never navigate. */
.page-fade.page-enter[b-ic1lmbt5s6] {
    animation: page-enter 200ms var(--ease);
}
/* /Layout/NavMenu.razor.rz.scp.css */
.sidebar[b-i3kbtqzx5m] {
    width: 260px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: width var(--dur-panel) var(--ease);
}

.sidebar.collapsed[b-i3kbtqzx5m] {
    width: 60px;
}

/* Extends the topbar's own color band into this corner — same --accent
   background, same --topbar-widget-bg/-fg chip for the logo mark, same
   --topbar-title ink for the text sitting directly on the accent.
   --topbar-h is rem-based (see tokens.css), so it grows in lockstep with
   this strip's own rem-sized content (the badge, the brand name) exactly
   as it does for .topbar — both stay at that same min-height rather than
   one overflowing past the other at larger font scales. */
.sidebar-brand[b-i3kbtqzx5m] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--topbar-h);
    padding: 0 var(--content-padx);
    background: var(--accent);
    flex-shrink: 0;
}

.sidebar.collapsed .sidebar-brand[b-i3kbtqzx5m] {
    padding: 0;
    justify-content: center;
}

/* The logo, drawn as a mask over a solid colour rather than as an <img>.
   The file is a single-colour mark on transparency, so masking lets it take
   --topbar-title — the token for content sitting on the accent bar — and stay
   legible in both themes and under a custom accent. An <img> would keep its
   own navy and disappear on the dark theme's tile.

   The mark occupies the middle 49% of its 1024-px canvas (measured), so the
   mask is scaled to 205% to fill the box instead of sitting in a third of it.
   The letter is a hole in the disc, so the bar shows through it. */
.brand-mark[b-i3kbtqzx5m] {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    background: var(--topbar-title);
    -webkit-mask: url('/img/iteashub-logo.png') center / 205% no-repeat;
    mask: url('/img/iteashub-logo.png') center / 205% no-repeat;
}

.brand-name[b-i3kbtqzx5m] {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--topbar-title);
    white-space: nowrap;
}

.sidebar-nav[b-i3kbtqzx5m] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar.collapsed .sidebar-nav[b-i3kbtqzx5m] {
    align-items: center;
}

.nav-section-label[b-i3kbtqzx5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    margin: 12px 0 4px;
    padding: 4px 10px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    cursor: pointer;
}

.nav-section-label:hover[b-i3kbtqzx5m] {
    color: var(--dim);
    background: var(--surface-2);
}

.nav-section-chevron[b-i3kbtqzx5m] {
    display: flex;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    transition: transform var(--dur-panel) var(--ease);
}

.nav-section-chevron.expanded[b-i3kbtqzx5m] {
    transform: rotate(90deg);
}

.nav-section-chevron svg[b-i3kbtqzx5m] {
    width: 100%;
    height: 100%;
}

/* .nav-item itself lives in wwwroot/css/app.css (global, unscoped) — it's
   the root <a> that NavLink (a built-in framework component) renders
   internally. Blazor's CSS isolation only stamps the scope attribute onto
   elements literally authored in this file; a child component's own root
   element never receives it, so a scoped `.nav-item[b-xxx]` rule here would
   silently never match and the link would fall through to tokens.css's
   global `a { color: var(--accent) }`. */

.nav-icon[b-i3kbtqzx5m] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
}

.nav-icon svg[b-i3kbtqzx5m] {
    width: 100%;
    height: 100%;
}

.nav-label[b-i3kbtqzx5m] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user[b-i3kbtqzx5m] {
    position: relative;
    padding: 10px var(--content-padx);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.user-badge-button[b-i3kbtqzx5m] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.user-avatar[b-i3kbtqzx5m] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--dim);
    font-family: var(--mono);
    font-size: 0.6875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar-img[b-i3kbtqzx5m] {
    object-fit: cover;
}

.user-info[b-i3kbtqzx5m] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.user-name[b-i3kbtqzx5m] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role[b-i3kbtqzx5m] {
    font-size: 0.65625rem;
    color: var(--faint);
    text-transform: uppercase;
    font-family: var(--mono);
}

.user-popover-backdrop[b-i3kbtqzx5m] {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.user-popover[b-i3kbtqzx5m] {
    position: absolute;
    left: var(--content-padx);
    bottom: calc(100% + 8px);
    width: 220px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px oklch(0.1 0.01 255 / 0.28);
    padding: 4px;
    z-index: 91;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-popover-header[b-i3kbtqzx5m] {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.popover-name[b-i3kbtqzx5m] {
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popover-email[b-i3kbtqzx5m] {
    font-family: var(--mono);
    font-size: var(--fs-micro);
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popover-logout-form[b-i3kbtqzx5m] {
    display: contents;
}

.popover-link[b-i3kbtqzx5m] {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--dim);
    font-size: var(--fs-caption);
    font-family: var(--font);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.popover-link:hover[b-i3kbtqzx5m] {
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
}

.popover-link.logout[b-i3kbtqzx5m] {
    color: var(--red);
}
/* /Layout/Topbar.razor.rz.scp.css */
/* The bar itself is a solid block of --accent. The title/subtitle and the
   plain icon buttons (sidebar toggle, theme toggle) sit directly on it in
   --topbar-title. The search box, font-scale and density controls are their
   own light/dark chips regardless of theme — --topbar-widget-bg/-fg give
   dark mode a dark chip with light content and light mode a light chip with
   dark content, the same pairing those controls would have anywhere else in
   the app; see tokens.css for the values. */
.topbar[b-zyrc00v6oq] {
    min-height: var(--topbar-h);
    flex-shrink: 0;
    background: var(--accent);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px var(--content-padx);
}

.icon-button[b-zyrc00v6oq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--topbar-title);
    cursor: pointer;
    flex-shrink: 0;
}

.icon-button svg[b-zyrc00v6oq] {
    width: 17px;
    height: 17px;
}

.icon-button:hover[b-zyrc00v6oq] {
    background: color-mix(in oklch, var(--topbar-title) 15%, transparent);
}

.topbar-title[b-zyrc00v6oq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar-title h1[b-zyrc00v6oq] {
    margin: 0;
    /* Topbar text is pinned to 1.2x its plain size regardless of density —
       see .nav-item in app.css for the sidebar's own fixed multiplier. */
    font-size: calc(1rem * 1.2);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--topbar-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-subtitle[b-zyrc00v6oq] {
    font-size: calc(0.71875rem * 1.2);
    color: var(--topbar-title);
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions[b-zyrc00v6oq] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.palette-trigger[b-zyrc00v6oq] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    background: var(--topbar-widget-bg);
    border: none;
    border-radius: var(--radius);
    color: var(--topbar-widget-fg);
    font-size: calc(0.75rem * 1.2);
    cursor: pointer;
}

.palette-trigger svg[b-zyrc00v6oq] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.palette-trigger:hover[b-zyrc00v6oq] {
    opacity: 0.85;
}

.kbd-chip[b-zyrc00v6oq] {
    font-family: var(--mono);
    font-size: calc(0.625rem * 1.2);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--topbar-widget-fg) 15%, transparent);
    color: var(--topbar-widget-fg);
}

/* FontScaleControl and SegmentedControl are shared components (also used
   outside the topbar, e.g. the Settings sub-nav) — their own CSS targets the
   normal --bg/--text ramp, so override them here, scoped to this instance,
   via ::deep rather than changing their shared styles. */
[b-zyrc00v6oq] .font-scale,
[b-zyrc00v6oq] .segmented {
    background: var(--topbar-widget-bg);
}

[b-zyrc00v6oq] .font-scale-btn,
[b-zyrc00v6oq] .font-scale-value,
[b-zyrc00v6oq] .segment {
    color: var(--topbar-widget-fg);
}

/* Same fixed 1.2x multiplier as the rest of the topbar's own text, applied
   on top of these shared components' own (smaller, unscoped) sizes. */
[b-zyrc00v6oq] .font-scale-a.small {
    font-size: calc(0.625rem * 1.2);
}

[b-zyrc00v6oq] .font-scale-a.large {
    font-size: calc(0.875rem * 1.2);
}

[b-zyrc00v6oq] .font-scale-value {
    font-size: calc(var(--fs-caption) * 1.2);
}

[b-zyrc00v6oq] .segment {
    font-size: calc(0.71875rem * 1.2);
}

[b-zyrc00v6oq] .font-scale-btn:hover:not(:disabled) {
    background: color-mix(in oklch, var(--topbar-widget-fg) 15%, transparent);
}

[b-zyrc00v6oq] .segment:hover {
    color: var(--topbar-widget-fg);
}

/* The selected layout uses the app's own configured accent (same convention
   as SegmentedControl's default .segment.active elsewhere) — everything
   else in this file stays the fixed light/dark widget pairing. */
[b-zyrc00v6oq] .segment.active {
    background: var(--accent);
    color: var(--accent-text);
}
/* /Mailgun/MailgunDomainsPage.razor.rz.scp.css */
.mailgun-domains-page[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.mg-filters[b-7q92c1gttt] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.mg-field[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 320px;
    min-width: 0;
}

.mg-toolbar[b-7q92c1gttt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mg-count[b-7q92c1gttt] {
    font-size: 0.78125rem;
    color: var(--dim);
}

.mg-banner[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mg-banner-title[b-7q92c1gttt] {
    color: var(--amber);
    font-weight: 600;
}

.mg-banner-error[b-7q92c1gttt] {
    color: var(--red);
    font-weight: 600;
}

.mg-banner-text[b-7q92c1gttt] {
    color: var(--dim);
    font-size: var(--fs-small);
}

.btn-ghost[b-7q92c1gttt] {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: var(--fs-small);
    cursor: pointer;
}

.btn-ghost:hover:not(:disabled)[b-7q92c1gttt] {
    border-color: var(--border-2);
}

.btn-ghost:disabled[b-7q92c1gttt] {
    color: var(--faint);
    cursor: default;
}

/* ::deep — DataTable renders the cells, so a plain rule would never reach them. */
[b-7q92c1gttt] .mg-domain-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

[b-7q92c1gttt] .mono-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

.detail-head-text[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-title[b-7q92c1gttt] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.detail-sub[b-7q92c1gttt] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}

.detail-section[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.field-value[b-7q92c1gttt] {
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.5;
}

.field-hint[b-7q92c1gttt] {
    font-size: 0.71875rem;
    color: var(--faint);
}

.mono[b-7q92c1gttt] {
    font-family: var(--mono);
}

.mg-meta[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mg-console-link[b-7q92c1gttt] {
    align-self: flex-start;
    margin-top: 6px;
    color: var(--accent);
    font-size: var(--fs-small);
    text-decoration: none;
}

.mg-console-link:hover[b-7q92c1gttt] {
    text-decoration: underline;
}

.mg-records[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mg-record[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.mg-record-head[b-7q92c1gttt] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.mg-record-name[b-7q92c1gttt] {
    font-size: 0.75rem;
    color: var(--text);
    word-break: break-all;
}

.mg-record-value[b-7q92c1gttt] {
    font-size: 0.71875rem;
    color: var(--dim);
    word-break: break-all;
}

/* ----- verification findings (stage 2) ----- */

.mg-health-banner[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mg-health-list[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mg-health-item[b-7q92c1gttt] {
    font-size: var(--fs-small);
    color: var(--dim);
}

.mg-health-item .mono[b-7q92c1gttt] {
    font-family: var(--font-mono);
    color: var(--text);
}

/* ----- create (stage 3) ----- */

.mg-actions[b-7q92c1gttt] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.create-form[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.create-field[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.create-error[b-7q92c1gttt] {
    color: var(--red);
    font-size: var(--fs-small);
    margin: 0;
}

.plan-box[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.plan-line[b-7q92c1gttt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--fs-small);
}

.plan-line .mono[b-7q92c1gttt] {
    font-family: var(--font-mono);
    color: var(--text);
}
/* /Schools/SchoolsPage.razor.rz.scp.css */
.schools-page[b-rdhbump9ly] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.filters-row[b-rdhbump9ly] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--card-gap);
}

.search-field[b-rdhbump9ly] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 220px;
}

.search-field input[b-rdhbump9ly] {
    height: 34px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
}

.search-field input:focus-visible[b-rdhbump9ly] {
    outline: none;
    border-color: var(--accent);
}

.sc-toolbar[b-rdhbump9ly] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
}

.sc-count[b-rdhbump9ly] {
    font-size: 0.78125rem;
    color: var(--dim);
}

.sc-health[b-rdhbump9ly] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sc-released[b-rdhbump9ly] {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--amber);
}

.sc-banner[b-rdhbump9ly] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sc-banner-title[b-rdhbump9ly] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--red);
}

/* A missing connector is a warning, not a failure: most of the page still
   works, so it must not read like an error. */
.sc-banner-warn .sc-banner-title[b-rdhbump9ly] {
    color: var(--amber);
}

.sc-banner-text[b-rdhbump9ly] {
    font-size: 0.78125rem;
    color: var(--dim);
    line-height: 1.5;
}

.sc-badges[b-rdhbump9ly] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sc-sub[b-rdhbump9ly] {
    margin-top: 10px;
}

/* One record per line, monospaced so names and types line up down the column
   — a drift list is read by scanning, not by reading sentences. */
.sc-record[b-rdhbump9ly] {
    display: block;
    font-family: var(--mono);
    font-size: 0.71875rem;
    line-height: 1.7;
    color: var(--dim);
    white-space: pre-wrap;
    word-break: break-all;
}

.sc-record-missing[b-rdhbump9ly] {
    color: var(--amber);
}

.sc-record-extra[b-rdhbump9ly] {
    color: var(--red);
}

.sc-extra-row[b-rdhbump9ly] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
}

.sc-extra-row .sc-record[b-rdhbump9ly] {
    flex: 1;
    min-width: 0;
}

.sc-extra-row .btn-ghost[b-rdhbump9ly] {
    flex: none;
    height: 26px;
    padding: 0 8px;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.sc-supersedes[b-rdhbump9ly] {
    display: block;
    font-family: var(--font);
    font-size: 0.6875rem;
    color: var(--faint);
}

.sc-record-allowed[b-rdhbump9ly] {
    color: var(--dim);
}

.sc-problem[b-rdhbump9ly] {
    display: block;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--red);
    margin-top: 6px;
}

[b-rdhbump9ly] .school-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

[b-rdhbump9ly] .mono-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

[b-rdhbump9ly] .sc-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-head-text[b-rdhbump9ly] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-title[b-rdhbump9ly] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.detail-sub[b-rdhbump9ly] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}

.detail-section[b-rdhbump9ly] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.field-value[b-rdhbump9ly] {
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.5;
}

.mono[b-rdhbump9ly] {
    font-family: var(--mono);
}

/* ----- form drawer ----------------------------------------------------- */

.sc-field[b-rdhbump9ly] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.setting-input[b-rdhbump9ly] {
    height: 34px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
    width: 100%;
}

.setting-input:focus-visible[b-rdhbump9ly] {
    outline: none;
    border-color: var(--accent);
}

.setting-input:disabled[b-rdhbump9ly] {
    color: var(--dim);
    background: var(--bg-2, var(--bg));
    cursor: not-allowed;
}
/* /Schools/SchoolTypesPage.razor.rz.scp.css */
.school-types-page[b-8fhkod9mxi] {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.st-toolbar[b-8fhkod9mxi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.st-count[b-8fhkod9mxi] {
    font-size: 0.78125rem;
    color: var(--dim);
}

.st-field[b-8fhkod9mxi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.st-input[b-8fhkod9mxi] {
    height: 34px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.8125rem;
    width: 100%;
}

.st-input:focus-visible[b-8fhkod9mxi] {
    outline: none;
    border-color: var(--accent);
}

.st-problem[b-8fhkod9mxi] {
    font-size: 0.78125rem;
    line-height: 1.5;
    color: var(--red);
}

[b-8fhkod9mxi] .st-code {
    font-family: var(--mono);
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--text);
}

[b-8fhkod9mxi] .st-name {
    font-size: 0.8125rem;
    color: var(--text);
}

[b-8fhkod9mxi] .st-count-cell {
    font-family: var(--mono);
    font-size: 0.71875rem;
    color: var(--dim);
}

.detail-head-text[b-8fhkod9mxi] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.detail-title[b-8fhkod9mxi] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.detail-sub[b-8fhkod9mxi] {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--faint);
}

.detail-section[b-8fhkod9mxi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.field-value[b-8fhkod9mxi] {
    font-size: 0.8125rem;
    color: var(--text);
    line-height: 1.5;
}

.field-hint[b-8fhkod9mxi] {
    font-size: 0.71875rem;
    color: var(--faint);
}