.portal-auth {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.75rem;
    padding: 2rem;
    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: 1.5rem;
}

.admin-filter-bar,
.admin-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

.admin-filter-bar > .btn,
.admin-form-row > .btn {
    margin-top: 2rem;
}

.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-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: 0.75rem;
}

/* 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: 2rem;
}


/* 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: 0.75rem;
}

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

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

.extension-field {
    max-width: 32rem;
}

/* 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: 0.9rem;
}

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

.admin-setup-summary dd {
    margin-bottom: 0.5rem;
}

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

.admin-hint {
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.9rem;
}

.admin-qr {
    max-width: 15rem;
    margin: 0.5rem 0 1rem;
}

.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. */
    background: #fff;
    padding: 0.5rem;
    border-radius: 0.375rem;
}

.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 */
}

/* 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: 0.25rem;
}

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

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

/* 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 0.75rem;
    padding: 0;
    list-style: none;
}

.admin-people > li {
    padding: 0.15rem 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: 0.75rem;
    margin-bottom: 1rem;
}

.hub-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    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: 0.4rem;
}

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

.hub-stat-note {
    font-size: 0.8rem;
    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: 1rem;
    align-items: start;
}

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

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

.setup-checklist-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

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

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

.setup-checklist-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.setup-checklist-steps > li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.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: 0.8rem;
    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);
}