.portal-auth {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--nexeriq-space-3);
    padding: var(--nexeriq-space-8);
    text-align: center;
}

.portal-auth h1 {
    margin: 0;
    font-size: 2rem;
}

.portal-auth p {
    max-width: 36rem;
    margin: 0;
    color: var(--bs-secondary-color);
}

.portal-page {
    padding: var(--nexeriq-space-6);
}

.admin-filter-bar,
.admin-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--nexeriq-space-3);
}

.admin-filter-bar > .btn,
.admin-form-row > .btn {
    margin-top: var(--nexeriq-space-8);
}

.admin-filter-bar .app-field + .app-field,
.admin-form-row .app-field + .app-field {
    margin-top: 0;
}

.admin-filter-bar-narrow {
    max-width: 40rem;
}

.admin-filter-field {
    min-width: 12rem;
}

.admin-form-field {
    flex: 0 1 14rem;
    min-width: 10rem;
}
/* Admin-console page layout. Everything else comes from the shared shell and App* controls. */

/* A filter bar sits in the page header, so its buttons align with the inputs, not their labels. */
.admin-filter-bar,
.admin-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--nexeriq-space-3);
}

/* Buttons line up with the inputs, not with the bottom of the tallest field. A field is
   label + control + optional help text, so aligning the row's end would sink the buttons below
   any help text. The offset is one label's height. */
.admin-filter-bar > .btn,
.admin-form-row > .btn {
    margin-top: var(--nexeriq-space-8);
}


/* The App* editors stack vertically by default; inside a row they sit side by side. */
.admin-filter-bar .app-field + .app-field,
.admin-form-row .app-field + .app-field {
    margin-top: 0;
}

.admin-filter-field {
    min-width: 12rem;
}

.admin-form-field {
    flex: 0 1 14rem;
    min-width: 10rem;
}

.admin-form-field-wide {
    flex: 1 1 22rem;
}

/* ---------------------------------------------------------------- dashboard */

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--nexeriq-space-3);
}

.admin-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- extensions */

/* ---------------------------------------------------------------- settings form (A3) */

/* A settings section (Figma A3, DM-838): a card at a readable 720 px, its title and one-line description
   in the header, Save on the header's trailing side, and the fields stacked one per row, caption above.
   It is an AppCard rather than AppFormSection: App* editors bring their own label, help and error, and
   AppFormSection's DxFormLayout sizes anything that is not a DxFormLayoutItem to its content, so the
   fields would sit side by side, half-aligned. Lists and grids on the same page keep the full width. */
.portal-form-section {
    max-width: 45rem;
}

/* On a phone AppCard stacks its header (title, then actions) and asks for align-items: stretch and leading
   actions, but the row and the actions also carry Bootstrap's align-items-center and justify-content-end
   utilities, which are !important and win: the title ends up centred and Save on the far side. A3 at 390
   keeps both on the leading edge. */
@media (max-width: 575.98px) {
    .portal-form-section .app-card-header-row {
        align-items: stretch !important;
    }

    .portal-form-section .app-card-header-row > div:last-child {
        justify-content: flex-start !important;
    }
}

/* ---------------------------------------------------------------- signatures */

.signature-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
}

.signature-source-editor {
    min-height: 12rem;
    font-family: var(--bs-font-monospace);
    resize: vertical;
}

.signature-preview-frame {
    width: 100%;
    min-height: 12rem;
    margin-top: var(--nexeriq-space-3);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    background: var(--bs-body-bg);
}

/* The first-run card borrows the shared sign-in card's edge; see mail-auth-card. */
.admin-setup-card {
    border: var(--bs-border-width) solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-lg);
}

/* ---------------------------------------------------------------- first-run wizard */

.admin-setup-card {
    width: 100%;
    max-width: 34rem;
}

.admin-setup-summary {
    margin: 0;
    font-size: var(--nexeriq-type-body-size);
}

.admin-setup-summary dt {
    font-weight: 600;
}

.admin-setup-summary dd {
    margin-bottom: var(--nexeriq-space-2);
}

/* DevOp.Blazor 0.15.1: the grid's cells do not wrap, and its empty / error / loading block inherits that, so
   below 768 px a sentence like DMARC's "No reports have arrived… check that _dmarc… publishes rua=…" ran
   off both edges of the grid. The block is prose; let it wrap (DM-838, beside NEXER-1356 #7). */
.app-grid .dxbl-grid-empty-data-area .app-state {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* --- Mailbox users: app passwords + assisted TOTP enrolment --------------- */

/* The row a link pointed at — Mailbox users, arriving from the Mailboxes grid with ?mailbox= (DM-838). The
   table row and the list row below 768 px both carry the class the page's RowCssClass returns. */
.app-grid tr.mail-row-pointed > td,
.app-grid .app-grid-mobile-row.mail-row-pointed {
    background-color: var(--nexeriq-selected);
}

/* Mailbox users: why an unowned mailbox has no app passwords. The table says it in the Assign button's
   tooltip; a list row below 768 px has neither, so the sentence shows under "No owner yet" there. */
.mail-owner-hint {
    display: none;
}

.app-grid-mobile-rows .mail-owner-hint {
    display: block;
    white-space: normal;
}

.admin-hint {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
}

.admin-qr {
    max-width: 15rem;
    margin: var(--nexeriq-space-2) 0 var(--nexeriq-space-4);
}

.admin-qr svg {
    width: 100%;
    height: auto;

    /* The SVG is drawn in black; on a dark background it needs its own white plate to stay scannable.
       Canvas under a light colour scheme is that plate in both themes, without a colour literal. */
    color-scheme: light;
    background: Canvas;
    padding: var(--nexeriq-space-2);
    border-radius: var(--nexeriq-radius-md);
}

.admin-secret {
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    user-select: all; /* one click selects the whole secret — it is meant to be copied */
}

/* ---------------------------------------------------------------- domain overview (DM-835, Figma P2 / A2)

   The DomainHealthCard in a 360 px column, the next step and the company's other domains beside it; one
   column below 768 px, where the next step's two actions share the width. */

.admin-domain-overview {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--nexeriq-space-4);
    align-items: start;
}

.admin-domain-next,
.admin-domain-next-step,
.admin-domain-others {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-domain-next {
    gap: var(--nexeriq-space-4);
}

.admin-domain-next-step {
    gap: var(--nexeriq-space-4);
}

.admin-domain-next-step > .alert {
    margin-bottom: 0;
}

.admin-domain-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
}

.admin-domain-others {
    gap: var(--nexeriq-space-2);
}

.admin-domain-others > h2 {
    margin: 0;
}

.admin-domain-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--nexeriq-surface);
    border: 1px solid var(--nexeriq-border);
    border-radius: var(--nexeriq-radius-lg);
    overflow: hidden;
}

.admin-domain-list > li + li {
    border-top: 1px solid var(--nexeriq-border);
}

.admin-domain-list-row {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-3);
    min-height: 44px;
    padding: var(--nexeriq-space-3) var(--nexeriq-space-4);
    color: var(--nexeriq-text);
    text-decoration: none;
}

.admin-domain-list-row:hover {
    background: var(--nexeriq-hover);
}

.admin-domain-list-row:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: -2px;
}

.admin-domain-list-row > i {
    flex: 0 0 16px;
    text-align: center;
}

.admin-domain-list-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--nexeriq-type-body-strong-size);
    line-height: var(--nexeriq-type-body-strong-line-height);
    font-weight: var(--nexeriq-type-body-strong-weight);
}

.admin-domain-list-meta {
    white-space: nowrap;
    font-size: var(--nexeriq-type-small-size);
    line-height: var(--nexeriq-type-small-line-height);
    color: var(--nexeriq-muted);
}

@media (max-width: 767.98px) {
    .admin-domain-overview {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-domain-next-actions > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

.admin-bimi-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--nexeriq-space-4);
    align-items: start;
}

.admin-bimi-picker {
    display: grid;
    gap: var(--nexeriq-space-3);
    width: min(18rem, 100%);
}

.admin-bimi-preview {
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    overflow: hidden;
}

.admin-bimi-preview > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.admin-bimi-preview > i {
    font-size: 1.4rem;
}

.admin-bimi-file-input {
    max-width: 100%;
}

.admin-bimi-body {
    display: grid;
    gap: var(--nexeriq-space-3);
    min-width: 0;
}

.admin-bimi-heading {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    flex-wrap: wrap;
}

.admin-bimi-controls {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr);
    gap: var(--nexeriq-space-3);
}

.admin-bimi-controls > * {
    min-width: 0;
}

.admin-bimi-certificate-note {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
    line-height: 1.4;
}

.admin-bimi-dns {
    display: grid;
    gap: var(--nexeriq-space-2);
}

@media (max-width: 640px) {
    .admin-bimi-layout {
        grid-template-columns: 1fr;
    }

    .admin-bimi-controls {
        grid-template-columns: 1fr;
    }
}

/* A DNS value and its copy button share a grid cell. The value wraps; the button never shrinks and never
   gets pushed out of the column — which is what happened when the two simply sat side by side and the
   value was a full DMARC or SPF record. */
.admin-dns-cell {
    display: flex;
    align-items: flex-start;
    gap: var(--nexeriq-space-1);
}

.admin-dns-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-dns-cell > :not(.admin-dns-value) {
    flex: 0 0 auto;
}

.admin-dns-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nexeriq-space-2);
    margin-bottom: var(--nexeriq-space-3);
}

.admin-dns-summary-item {
    display: inline-flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    min-height: 2rem;
    padding: var(--nexeriq-space-1) var(--nexeriq-space-2);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    background: var(--bs-tertiary-bg);
    font-size: var(--nexeriq-type-body-size);
    color: var(--bs-secondary-color);
}

.admin-dns-summary-item > span:last-child {
    white-space: nowrap;
}

.admin-dns-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: var(--nexeriq-space-1) var(--nexeriq-space-2);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace);
    font-size: var(--nexeriq-type-small-size);
    font-weight: 700;
}

.admin-dns-record-cell {
    display: grid;
    gap: var(--nexeriq-space-2);
    min-width: 0;
}

.admin-dns-record-heading {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-2);
    flex-wrap: wrap;
}

.admin-dns-record-purpose {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-dns-name-cell,
.admin-dns-value-header,
.admin-dns-field-value {
    display: flex;
    align-items: flex-start;
    gap: var(--nexeriq-space-1);
}

.admin-dns-name-cell {
    max-width: 100%;
}

.admin-dns-name-cell > code,
.admin-dns-field-value > code {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-dns-name-cell > :not(code),
.admin-dns-value-header > :not(span),
.admin-dns-field-value > :not(code) {
    flex: 0 0 auto;
}

.admin-dns-value-panel {
    display: grid;
    gap: var(--nexeriq-space-2);
    min-width: 0;
    padding: var(--nexeriq-space-3);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--nexeriq-radius-md);
    background: var(--bs-tertiary-bg);
}

.admin-dns-value-panel-current {
    background: var(--bs-body-bg);
}

.admin-dns-value-header {
    justify-content: space-between;
    gap: var(--nexeriq-space-2);
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-caption-size);
    font-weight: 700;
    text-transform: uppercase;
}

.admin-dns-value-header > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-dns-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: var(--nexeriq-space-2) var(--nexeriq-space-3);
    margin: 0;
}

.admin-dns-field {
    display: grid;
    gap: var(--nexeriq-space-half);
    min-width: 0;
}

.admin-dns-field-label {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-caption-size);
    line-height: 1.2;
}

.admin-dns-field-value {
    margin: 0;
    min-width: 0;
}

.admin-dns-field-value > code {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.admin-dns-full-record {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--nexeriq-space-1);
    padding-top: var(--nexeriq-space-2);
    border-top: var(--bs-border-width) solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-caption-size);
}

.admin-dns-full-record > code {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--bs-body-color);
}

.admin-dns-empty {
    color: var(--bs-secondary-color);
    font-style: italic;
}

.admin-dns-purpose {
    display: grid;
    gap: var(--nexeriq-space-1);
    min-width: 0;
}

.admin-dns-purpose > span {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
    overflow-wrap: anywhere;
}

.admin-dns-status-cell {
    display: grid;
    gap: var(--nexeriq-space-2);
    align-content: start;
    min-width: 0;
}

.admin-dns-next-step {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* People inside a card — administrators, owners, open invitations. A plain list, unindented, because a
   bullet list's default indent inside a card reads as a nested outline of nothing. */
.admin-people {
    margin: 0 0 var(--nexeriq-space-3);
    padding: 0;
    list-style: none;
}

.admin-people > li {
    padding: var(--nexeriq-space-half) 0;
}

/* ---------------------------------------------------------------- context hub */

/* A row of at-a-glance stats at the top of a context's overview. Reflows to fewer columns as it narrows. */
.hub-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--nexeriq-space-3);
    margin-bottom: var(--nexeriq-space-4);
}

.hub-stat {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-1);
    padding: var(--nexeriq-space-4) var(--nexeriq-space-4);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

.hub-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: var(--nexeriq-space-2);
}

.hub-stat-label {
    color: var(--bs-secondary-color);
    font-size: var(--nexeriq-type-body-size);
}

.hub-stat-note {
    font-size: var(--nexeriq-type-small-size);
    color: var(--bs-secondary-color);
}

.hub-stat-icon {
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

/* Two-column overview: the checklist beside a quick-actions/next-steps column, stacking when narrow. */
.hub-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--nexeriq-space-4);
    align-items: start;
}

@media (max-width: 62rem) {
    .hub-columns { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- setup checklist */

.setup-checklist-progress {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-3);
    margin-bottom: var(--nexeriq-space-3);
}

.setup-checklist-progress > :first-child {
    flex: 1 1 auto;
}

.setup-checklist-count {
    flex: 0 0 auto;
    font-size: var(--nexeriq-type-body-size);
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.setup-checklist-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-2);
}

.setup-checklist-steps > li {
    display: flex;
    align-items: center;
    gap: var(--nexeriq-space-3);
}

.setup-checklist-mark {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
}

.setup-checklist-steps > li.is-done .setup-checklist-mark {
    color: var(--bs-success);
}

.setup-checklist-steps > li.is-todo .setup-checklist-mark {
    color: var(--bs-secondary-color);
}

.setup-checklist-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.setup-checklist-steps > li.is-done .setup-checklist-label {
    color: var(--bs-secondary-color);
}

.setup-checklist-hint {
    font-size: var(--nexeriq-type-small-size);
    color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------- scope trail */

.scope-trail {
    gap: 0.15rem;
    font-size: 0.9rem;
    max-width: 40vw;
}

.scope-trail-icon {
    color: var(--bs-secondary-color);
    margin-right: 0.35rem;
}

.scope-sep {
    color: var(--bs-secondary-color);
    padding: 0 0.1rem;
}

/* A segment that is just a link (no siblings to switch to). */
.scope-seg-link {
    color: var(--bs-body-color);
    text-decoration: none;
    padding: 0.15rem 0.4rem;
    border-radius: var(--bs-border-radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16ch;
}

.scope-seg-link:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* A segment that is a switcher: <details> + <summary> as the toggle, .scope-menu as the drop-down. */
.scope-seg {
    position: relative;
}

.scope-seg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    list-style: none;
    padding: 0.15rem 0.4rem;
    border-radius: var(--bs-border-radius-sm);
    white-space: nowrap;
}

.scope-seg-toggle::-webkit-details-marker { display: none; }

.scope-seg-toggle:hover,
.scope-seg[open] > .scope-seg-toggle {
    background: var(--bs-secondary-bg);
}

.scope-seg-toggle > span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16ch;
}

.scope-seg-toggle > i {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.scope-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 1050;
    min-width: 13rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.3rem;
    background: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.scope-menu-open,
.scope-menu-item {
    display: block;
    padding: 0.35rem 0.55rem;
    border-radius: var(--bs-border-radius-sm);
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
}

.scope-menu-open {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

.scope-menu-open:hover,
.scope-menu-item:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.scope-menu-item.is-active {
    font-weight: 600;
    background: var(--bs-primary-bg-subtle);
}

.scope-menu-sep {
    height: var(--bs-border-width);
    background: var(--bs-border-color);
    margin: 0.3rem 0;
}

/* ---------------------------------------------------------------- command palette */

.cmdk-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
}

.cmdk-panel {
    width: min(40rem, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.cmdk-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.cmdk-search > i {
    color: var(--bs-secondary-color);
}

.cmdk-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 1.05rem;
}

.cmdk-kbd {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    padding: 0.05rem 0.35rem;
}

.cmdk-results {
    overflow-y: auto;
    padding: 0.4rem;
}

.cmdk-group {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    padding: 0.5rem 0.6rem 0.2rem;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: start;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    padding: 0.5rem 0.6rem;
    border-radius: var(--bs-border-radius);
}

.cmdk-item.is-selected {
    background: var(--bs-primary-bg-subtle);
}

.cmdk-item-icon {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

.cmdk-item-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-item-hint {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.cmdk-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* Quarantine preview (DM-733): held mail is shown read-only, in a fixed-height sandboxed frame or as escaped text. */
.quarantine-preview-facts dt {
    font-weight: 500;
}

.quarantine-preview-facts dd {
    overflow-wrap: anywhere;
}

.quarantine-preview-pre {
    max-height: 18rem;
    overflow: auto;
    padding: var(--nexeriq-space-2) var(--nexeriq-space-3);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.quarantine-preview-body {
    max-height: 60vh;
}

.quarantine-preview-frame {
    display: block;
    width: 100%;
    height: 60vh;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color-scheme: light;
    background: Canvas;
}

/* DevOp.Blazor 0.15.1: below 768 px a grid that switched to list rows keeps its table for the empty,
   loading and error states, at the full width of its columns, so the state block is centred off screen
   behind a sideways scroll. Fit that table to the grid until the package does (DM-838). Only the AppGrid's
   own table, by the path DxGrid renders it (held by AppGridEmptyTableCouplingTests); a grid nested inside
   one keeps its own layout. */
@media (max-width: 767.98px) {
    .app-grid.app-grid-compact-rows > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table:has(> tbody > tr > .dxbl-grid-empty-data-area) {
        width: 100%;
    }

    .app-grid.app-grid-compact-rows > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table:has(> tbody > tr > .dxbl-grid-empty-data-area) > colgroup > col {
        width: auto !important;
    }
}

/* Administrators below 768 px: a row opens its actions in the right bar (DM-838, frame A1). The company and
   organization lists use the same panel through PortalRowPanel (DM-838 batch 1). */
.admin-row-actions,
.portal-row-actions {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-4);
    padding: var(--nexeriq-space-4);
}

.admin-row-actions:focus-visible,
.portal-row-actions:focus-visible {
    outline: 2px solid var(--nexeriq-focus);
    outline-offset: -2px;
}

.admin-row-actions-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--nexeriq-space-2) var(--nexeriq-space-4);
    margin: 0;
}

.admin-row-actions-facts dt {
    font-weight: 600;
}

.admin-row-actions-facts dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-row-actions-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--nexeriq-space-2);
}