/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-5p2koggc1e] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 220px 1fr;
    background: var(--brand-page-bg, #f3f4f6);
}

aside[b-5p2koggc1e] {
    background: var(--brand-sidebar-bg, #111827);
    color: var(--brand-sidebar-text, #fff);
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* Stays on screen while the page scrolls; scrolls itself only if the menu is taller than the screen. */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
}

aside a[b-5p2koggc1e] {
    color: var(--brand-sidebar-text, #e5e7eb);
    text-decoration: none;
}

aside a.active[b-5p2koggc1e] {
    color: var(--brand-sidebar-text, #fff);
    font-weight: 700;
}

aside select[b-5p2koggc1e],
aside button[b-5p2koggc1e] {
    width: 100%;
    box-sizing: border-box;
}

aside button[b-5p2koggc1e] {
    margin-top: auto;
    background: transparent;
    color: var(--brand-sidebar-text, #fff);
    border: 1px solid #4b5563;
    border-radius: 6px;
    padding: 0.5rem;
}

.admin-body[b-5p2koggc1e] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

main[b-5p2koggc1e] {
    padding: 1.5rem;
}

.topbar[b-5p2koggc1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    /* Stays at the top while the content scrolls; under modals (40+) and toasts. */
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar-company[b-5p2koggc1e] {
    font-weight: 600;
    color: #374151;
}

.profile-menu[b-5p2koggc1e] {
    position: relative;
}

.profile-trigger[b-5p2koggc1e] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    color: #111827;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    cursor: pointer;
}

.profile-trigger:hover[b-5p2koggc1e],
.profile-trigger.active[b-5p2koggc1e] {
    background: #f3f4f6;
    border-color: #e5e7eb;
}

.avatar[b-5p2koggc1e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.avatar.large[b-5p2koggc1e] {
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    font-size: 1rem;
}

.profile-name[b-5p2koggc1e] {
    font-weight: 600;
    font-size: 0.9rem;
}

.profile-backdrop[b-5p2koggc1e] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.profile-panel[b-5p2koggc1e] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgb(0 0 0 / 0.18);
    overflow: hidden;
    z-index: 50;
}

.profile-panel-header[b-5p2koggc1e] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem;
    border-bottom: 1px solid #e5e7eb;
}

.profile-panel-who[b-5p2koggc1e] {
    flex: 1;
    min-width: 0;
}

.profile-panel-name[b-5p2koggc1e] {
    font-weight: 700;
}

.profile-panel-email[b-5p2koggc1e] {
    font-size: 0.82rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-logout[b-5p2koggc1e] {
    background: #f3f4f6;
    color: #111827;
    border: 0;
    border-radius: 10px;
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
}

.profile-item[b-5p2koggc1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.8rem 1.1rem;
    background: #fff;
    color: #111827;
    border: 0;
    border-radius: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.profile-item:hover[b-5p2koggc1e] {
    background: #f9fafb;
}

.profile-item-text[b-5p2koggc1e] {
    display: flex;
    flex-direction: column;
}

.profile-item-text small[b-5p2koggc1e] {
    color: #6b7280;
}

.chevron[b-5p2koggc1e] {
    color: #9ca3af;
    font-size: 1.2rem;
}

.admin-error[b-5p2koggc1e] {
    color: #b91c1c;
}

.admin-message[b-5p2koggc1e] {
    color: #166534;
}

[b-5p2koggc1e] .panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

[b-5p2koggc1e] .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

[b-5p2koggc1e] .page-header h1 {
    margin: 0;
}

[b-5p2koggc1e] .page-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-5p2koggc1e] label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Text-like fields only: checkboxes and radios keep their own size (see .form-check below). :where() keeps the
   specificity of a plain "input" so the more specific overrides further down (.toolbar input, …) still win. */
[b-5p2koggc1e] input:where(:not([type="checkbox"]):not([type="radio"])),
[b-5p2koggc1e] select,
[b-5p2koggc1e] textarea {
    width: 100%;
    max-width: 28rem;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-sizing: border-box;
}

[b-5p2koggc1e] .toolbar {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

[b-5p2koggc1e] .toolbar .field {
    flex: 1;
    min-width: 12rem;
}

[b-5p2koggc1e] .toolbar label {
    margin-top: 0;
}

[b-5p2koggc1e] .toolbar select,
[b-5p2koggc1e] .toolbar input,
[b-5p2koggc1e] .search {
    max-width: none;
    margin-bottom: 0;
}

[b-5p2koggc1e] .modal-card {
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem;
    width: min(36rem, 100%);
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
}

[b-5p2koggc1e] .secret-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0.75rem;
}

[b-5p2koggc1e] .secret-box p,
[b-5p2koggc1e] .token-text {
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

[b-5p2koggc1e] .copy {
    flex: 0 0 auto;
    background: #e5e7eb;
    color: #111827;
    padding: 0.35rem 0.55rem;
    font-size: 0.8rem;
}

[b-5p2koggc1e] .usage-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.6rem 0;
}

[b-5p2koggc1e] pre.usage {
    flex: 1;
    min-width: 0;
    margin: 0;
    background: #111827;
    color: #e5e7eb;
    padding: 0.75rem;
    border-radius: 6px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: hidden;
}

[b-5p2koggc1e] button {
    background: var(--brand-primary, #111827);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 0.5rem 0.8rem;
}

[b-5p2koggc1e] .page-actions button,
[b-5p2koggc1e] .row-actions button,
[b-5p2koggc1e] .modal-actions button,
[b-5p2koggc1e] .copy {
    width: auto;
    margin-top: 0;
}

[b-5p2koggc1e] table.data {
    width: 100%;
    border-collapse: collapse;
}

[b-5p2koggc1e] table.data th,
[b-5p2koggc1e] table.data td {
    text-align: left;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

[b-5p2koggc1e] .row-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

[b-5p2koggc1e] .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(8rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

[b-5p2koggc1e] .stat {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.85rem;
}

[b-5p2koggc1e] .stat strong {
    display: block;
    font-size: 1.4rem;
}

/* A stat that opens its tab (Overview: Mailboxes, Aliases, Devices). */
[b-5p2koggc1e] a.stat {
    color: inherit;
    text-decoration: none;
}

[b-5p2koggc1e] a.stat:hover,
[b-5p2koggc1e] a.stat:focus-visible {
    border-color: var(--brand-primary, #111827);
    background: #fff;
}

[b-5p2koggc1e] a.stat .stat-hint {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

/* Mailbox sub-tabs (Settings, Rules, Auto reply, Client setup, Fetch, Migrate) under the domain tab bar. */
[b-5p2koggc1e] .mailbox-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

[b-5p2koggc1e] .mailbox-tabs .mailbox-tabs-label {
    align-self: center;
    font-weight: 600;
    color: #111827;
    margin-right: 6px;
}

[b-5p2koggc1e] .mailbox-tabs a {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    text-decoration: none;
}

[b-5p2koggc1e] .mailbox-tabs a.active {
    background: var(--brand-primary, #111827);
    border-color: var(--brand-primary, #111827);
    color: #fff;
}

[b-5p2koggc1e] .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(17 24 39 / 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    padding: 1rem;
}

[b-5p2koggc1e] .modal-card h2 {
    margin: 0 0 0.75rem;
}

[b-5p2koggc1e] .modal-card input,
[b-5p2koggc1e] .modal-card select,
[b-5p2koggc1e] .modal-card textarea {
    max-width: none;
}

[b-5p2koggc1e] .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

[b-5p2koggc1e] .modal-actions .secondary {
    background: #e5e7eb;
    color: #111827;
}

[b-5p2koggc1e] .qr {
    width: 180px;
    height: 180px;
}

[b-5p2koggc1e] .role-select {
    max-width: 12rem;
    padding: 0.35rem 0.5rem;
}

[b-5p2koggc1e] .panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}

[b-5p2koggc1e] .modal-card.modal-wide {
    width: min(64rem, 100%);
    max-height: calc(100vh - 40px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-5p2koggc1e] .modal-wide > .profile-tab-body,
[b-5p2koggc1e] .modal-wide .profile-tab-body {
    overflow-y: auto;
}

[b-5p2koggc1e] .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

[b-5p2koggc1e] .modal-header h2 {
    margin: 0;
}

[b-5p2koggc1e] .modal-subtitle {
    margin: 0.2rem 0 0;
    color: #6b7280;
    font-size: 0.85rem;
}

[b-5p2koggc1e] .modal-close {
    width: auto;
    background: #f3f4f6;
    color: #111827;
    border-radius: 10px;
    padding: 0.4rem 0.65rem;
}

[b-5p2koggc1e] .perm-heading {
    margin: 14px 0 6px;
    font-weight: 600;
}

[b-5p2koggc1e] .perm-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 55vh;
    overflow: auto;
}

[b-5p2koggc1e] .perm-group {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px 10px;
    margin: 0;
}

[b-5p2koggc1e] .perm-group legend {
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
}

[b-5p2koggc1e] .perm-check {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    margin: 4px 0;
    font-weight: 400;
}

[b-5p2koggc1e] .perm-check input {
    width: auto;
}

[b-5p2koggc1e] .perm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

[b-5p2koggc1e] .perm-chip {
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    white-space: nowrap;
}

[b-5p2koggc1e] .perm-chip.all {
    background: #111827;
    color: #fff;
}

[b-5p2koggc1e] .perm-count {
    font-size: 12px;
    color: #4b5563;
}

[b-5p2koggc1e] .perm-none {
    font-size: 12px;
    color: #9ca3af;
}

[b-5p2koggc1e] .import-body {
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
}

[b-5p2koggc1e] .import-paste,
[b-5p2koggc1e] .import-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

[b-5p2koggc1e] .import-target {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-5p2koggc1e] .import-target .field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-5p2koggc1e] .import-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.6rem 0;
}

[b-5p2koggc1e] .import-actions button {
    width: auto;
    margin-top: 0;
}

[b-5p2koggc1e] .import-actions .secondary,
[b-5p2koggc1e] .import-remove {
    background: #e5e7eb;
    color: #111827;
}

[b-5p2koggc1e] .import-summary {
    color: #6b7280;
    font-size: 0.85rem;
}

[b-5p2koggc1e] .import-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.6rem;
    background: #f9fafb;
}

[b-5p2koggc1e] .import-row {
    display: grid;
    grid-template-columns: auto minmax(10rem, 2fr) minmax(10rem, 3fr) 6.5rem auto;
    gap: 0.5rem;
    align-items: start;
}

[b-5p2koggc1e] .import-row.with-names {
    grid-template-columns: auto minmax(8rem, 1.5fr) minmax(9rem, 2fr) minmax(9rem, 3fr) 6.5rem auto;
}

[b-5p2koggc1e] .import-names-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

[b-5p2koggc1e] .import-names-toggle input {
    width: auto;
    margin: 0;
}

[b-5p2koggc1e] .import-row.skipped {
    opacity: 0.5;
}

[b-5p2koggc1e] .import-row input,
[b-5p2koggc1e] .import-row textarea {
    margin: 0;
}

[b-5p2koggc1e] .import-row .import-check {
    width: auto;
    margin-top: 0.6rem;
}

[b-5p2koggc1e] .import-value {
    resize: vertical;
}

[b-5p2koggc1e] .import-flag {
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.25rem 0.5rem;
    margin-top: 0.35rem;
    text-align: center;
}

[b-5p2koggc1e] .import-flag.new { background: #dcfce7; color: #166534; }
[b-5p2koggc1e] .import-flag.update { background: #fef3c7; color: #92400e; }
[b-5p2koggc1e] .import-flag.bad { background: #fee2e2; color: #991b1b; }

[b-5p2koggc1e] .import-remove {
    width: auto;
    margin-top: 0;
    padding: 0.45rem 0.6rem;
}

[b-5p2koggc1e] button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    [b-5p2koggc1e] .import-row,
    [b-5p2koggc1e] .import-row.with-names {
        grid-template-columns: auto 1fr auto;
    }

    [b-5p2koggc1e] .import-row .import-value,
    [b-5p2koggc1e] .import-row .import-flag {
        grid-column: 2 / 3;
    }
}

.aside-section[b-5p2koggc1e] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    margin-top: 0.25rem;
}

aside a.aside-back[b-5p2koggc1e] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #374151;
    color: #fbbf24;
}

.impersonation-banner[b-5p2koggc1e],
.verify-banner[b-5p2koggc1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
}

.impersonation-banner[b-5p2koggc1e] {
    background: #7c2d12;
    color: #fff;
}

.verify-banner[b-5p2koggc1e] {
    background: #fef3c7;
    color: #78350f;
    border-bottom: 1px solid #fde68a;
}

.impersonation-banner button[b-5p2koggc1e],
.verify-banner button[b-5p2koggc1e] {
    flex-shrink: 0;
    border: 0;
    border-radius: 6px;
    padding: 0.45rem 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.impersonation-banner button[b-5p2koggc1e] {
    background: #fff;
    color: #7c2d12;
}

.verify-banner button[b-5p2koggc1e] {
    background: #92400e;
    color: #fff;
}

/* Shared card + grid design (same as the profile popup), for pages and wide popups. */
[b-5p2koggc1e] .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: #f3f4f6;
    padding: 1.25rem;
}

/* One shared popup footer: right-aligned buttons with a gap, border-top, same padding everywhere. */
[b-5p2koggc1e] .modal-footer,
[b-5p2koggc1e] .modal-wide > .modal-actions {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

[b-5p2koggc1e] .modal-footer button {
    width: auto;
    margin-top: 0;
}

[b-5p2koggc1e] .modal-footer .secondary {
    background: #e5e7eb;
    color: #111827;
}

[b-5p2koggc1e] .detail-card {
    background: var(--brand-card-bg, #fff);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

[b-5p2koggc1e] .detail-card:last-child {
    margin-bottom: 0;
}

[b-5p2koggc1e] .detail-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

[b-5p2koggc1e] .detail-card-header h2 {
    margin: 0;
    font-size: 1.05rem;
}

[b-5p2koggc1e] .detail-card-header p {
    margin: 0.2rem 0 0;
    color: #6b7280;
    font-size: 0.85rem;
}

[b-5p2koggc1e] .detail-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-5p2koggc1e] .detail-card-actions button,
[b-5p2koggc1e] .detail-card-actions .button-link {
    width: auto;
    margin-top: 0;
}

[b-5p2koggc1e] .detail-card-actions .secondary {
    background: #e5e7eb;
    color: #111827;
}

[b-5p2koggc1e] .detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 1.25rem;
    padding: 0.75rem 1.25rem 1.25rem;
}

[b-5p2koggc1e] .detail-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[b-5p2koggc1e] .detail-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

[b-5p2koggc1e] .detail-field input,
[b-5p2koggc1e] .detail-field select,
[b-5p2koggc1e] .detail-field textarea {
    max-width: none;
}

[b-5p2koggc1e] .detail-field.span-2 {
    grid-column: span 2;
}

[b-5p2koggc1e] .detail-field.span-all {
    grid-column: 1 / -1;
}

/* Auto-empty picker (RetentionDaysField): mode select + days box + unit on one line. */
[b-5p2koggc1e] .detail-field .inline-pair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-5p2koggc1e] .detail-field .inline-pair select {
    flex: 1 1 auto;
    min-width: 0;
}

[b-5p2koggc1e] .detail-field .inline-pair input[type=number] {
    flex: 0 0 5.5rem;
    width: 5.5rem;
}

[b-5p2koggc1e] .detail-field .inline-pair .unit {
    white-space: nowrap;
    color: #6b7280;
    font-size: 0.85rem;
}

[b-5p2koggc1e] .detail-field .hint {
    margin: 0.25rem 0 0;
    color: #6b7280;
    font-size: 0.8rem;
}

[b-5p2koggc1e] .detail-body {
    padding: 1rem 1.25rem 1.25rem;
}

[b-5p2koggc1e] .detail-body p:first-child {
    margin-top: 0;
}

[b-5p2koggc1e] .detail-body table.data {
    margin: 0;
}

[b-5p2koggc1e] .detail-body.flush {
    padding: 0 0.75rem 0.5rem;
}

[b-5p2koggc1e] .page-stack .detail-card {
    margin-bottom: 1rem;
}

/* Checkboxes and radios everywhere: native size, label beside them (never stacked under). */
[b-5p2koggc1e] input:where([type="checkbox"], [type="radio"]) {
    width: auto;
    max-width: none;
    margin: 0;
    accent-color: #111827;
    vertical-align: middle;
}

[b-5p2koggc1e] label:where(:has(> input[type="checkbox"]), :has(> input[type="radio"])) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

/* Bootstrap .form-check / .form-switch rows: one line, control first, label beside it. Every checkbox in a
   .form-check is drawn as the small Vault switch (same look as .toggle); radios stay radios. */
[b-5p2koggc1e] .form-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 1.35rem;
    padding-left: 0;
    margin: 0.55rem 0 0;
}

[b-5p2koggc1e] .form-check .form-check-input {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

[b-5p2koggc1e] .form-check .form-check-label {
    display: inline;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

[b-5p2koggc1e] .form-check input[type="checkbox"].form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 2.4rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d1d5db none;
    position: relative;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s;
}

[b-5p2koggc1e] .form-check input[type="checkbox"].form-check-input::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}

[b-5p2koggc1e] .form-check input[type="checkbox"].form-check-input:checked {
    background: #111827 none;
}

[b-5p2koggc1e] .form-check input[type="checkbox"].form-check-input:checked::after {
    transform: translateX(1.05rem);
}

[b-5p2koggc1e] .form-check input[type="checkbox"].form-check-input:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

[b-5p2koggc1e] .form-check input[type="checkbox"].form-check-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Row of switches under a detail grid (Vault forms). */
[b-5p2koggc1e] .detail-grid.switch-grid {
    gap: 0.35rem 1.25rem;
    padding-top: 0;
}

[b-5p2koggc1e] .detail-grid.switch-grid .form-check {
    margin-top: 0.35rem;
}

[b-5p2koggc1e] .detail-grid + .detail-grid.switch-grid {
    padding-top: 0.25rem;
}

/* Select + small number input on one line (auto-empty after N days). */
[b-5p2koggc1e] .inline-pair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-5p2koggc1e] .inline-pair select {
    flex: 1 1 auto;
    min-width: 0;
}

[b-5p2koggc1e] .inline-pair input {
    flex: 0 0 5.5rem;
    width: 5.5rem;
}

[b-5p2koggc1e] .inline-pair .unit {
    color: #6b7280;
    font-size: 0.85rem;
}

[b-5p2koggc1e] .card-note.card-pad {
    padding: 0 1.25rem 1rem;
    margin: 0;
}

[b-5p2koggc1e] .form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

[b-5p2koggc1e] .form-footer button {
    width: auto;
    margin-top: 0;
}

[b-5p2koggc1e] .form-footer .secondary {
    background: #e5e7eb;
    color: #111827;
}

/* Labelled on/off switch. */
[b-5p2koggc1e] .toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.9rem;
    font-weight: 600;
    cursor: pointer;
}

[b-5p2koggc1e] .toggle input {
    appearance: none;
    width: 2.4rem;
    height: 1.35rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #d1d5db;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

[b-5p2koggc1e] .toggle input::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}

[b-5p2koggc1e] .toggle input:checked {
    background: #111827;
}

[b-5p2koggc1e] .toggle input:checked::after {
    transform: translateX(1.05rem);
}

[b-5p2koggc1e] .key-status.set {
    color: #047857;
    font-weight: 600;
}

[b-5p2koggc1e] .key-status.missing {
    color: #b91c1c;
    font-weight: 600;
}

@media (max-width: 900px) {
    [b-5p2koggc1e] .detail-grid,
    [b-5p2koggc1e] .detail-grid.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    [b-5p2koggc1e] .detail-grid,
    [b-5p2koggc1e] .detail-grid.cols-2,
    [b-5p2koggc1e] .detail-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    [b-5p2koggc1e] .detail-field.span-2 {
        grid-column: auto;
    }
}

/* Change history cards (History popup and Audit). */
[b-5p2koggc1e] .change-card .detail-field label {
    color: #6b7280;
}

[b-5p2koggc1e] .change-values {
    overflow-wrap: anywhere;
    font-size: 0.9rem;
}

[b-5p2koggc1e] button.danger {
    background: var(--brand-danger, #b42318);
    border-color: var(--brand-danger, #b42318);
    color: #fff;
}

[b-5p2koggc1e] button.danger:disabled {
    opacity: 0.5;
}

[b-5p2koggc1e] .danger-zone {
    border-color: #f1b5ae;
}

[b-5p2koggc1e] .danger-zone h2 {
    color: #b42318;
}

/* Shared note / empty-state / loading text inside a card, aligned with the card's content padding. */
[b-5p2koggc1e] .card-note {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
    padding: 0.75rem 1.25rem 1.25rem;
}

[b-5p2koggc1e] .detail-body .card-note,
[b-5p2koggc1e] .panel .card-note {
    padding: 0;
}

/* History popup: padded body like the Add App popup, spaced change cards. */
[b-5p2koggc1e] .history-body {
    background: #f3f4f6;
    padding: 1.25rem;
}

[b-5p2koggc1e] .change-card + .change-card {
    margin-top: 1rem;
}

/* Secret packs: one row per colon-path parent; Show lists its keys. */
[b-5p2koggc1e] .value-badge {
    background: #eef2ff;
    border-radius: 999px;
    color: #4338ca;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    white-space: nowrap;
}

[b-5p2koggc1e] .secret-group-row td {
    font-weight: 600;
}

[b-5p2koggc1e] .pack-rows {
    padding: 0.5rem 1.25rem 1rem;
}

[b-5p2koggc1e] .pack-row {
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) auto auto;
    padding: 0.6rem 0;
}

[b-5p2koggc1e] .pack-row:last-child {
    border-bottom: 0;
}

[b-5p2koggc1e] .pack-key {
    color: #374151;
    font-weight: 600;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .pack-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* Restore one account: clickable search results. */
[b-5p2koggc1e] .account-results {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 1.25rem 1.25rem;
}

[b-5p2koggc1e] .account-results .card-note {
    padding: 0.25rem 0 0;
}

[b-5p2koggc1e] button.account-result {
    align-items: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #111827;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
    width: 100%;
}

[b-5p2koggc1e] button.account-result:hover {
    border-color: #c7d2fe;
    background: #f8faff;
}

[b-5p2koggc1e] button.account-result.selected {
    background: #eef2ff;
    border-color: #6366f1;
    box-shadow: 0 0 0 1px #6366f1;
}

[b-5p2koggc1e] .account-result-name {
    font-weight: 600;
}

[b-5p2koggc1e] .account-result-email {
    color: #6b7280;
    font-size: 0.85rem;
    margin-left: auto;
}

[b-5p2koggc1e] .value-badge.deleted {
    background: #fef2f2;
    color: #b91c1c;
}

[b-5p2koggc1e] .import-body > .detail-card + .detail-card {
    margin-top: 1rem;
}

/* Server-side paged lists (platform Companies and Users). */
[b-5p2koggc1e] .pager {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.75rem 0.5rem 0.25rem;
}

[b-5p2koggc1e] .pager .muted {
    font-size: 0.875rem;
    margin-right: auto;
}


/* Footers of padded popups (non-wide card, or inside a padded body) use the same look. */
[b-5p2koggc1e] .modal-card:not(.modal-wide) > .modal-actions,
[b-5p2koggc1e] .import-body > .modal-actions,
[b-5p2koggc1e] .modal-body > .modal-actions {
    border-top: 1px solid #e5e7eb;
    margin-top: 1.25rem;
    padding-top: 0.85rem;
}

[b-5p2koggc1e] .modal-wide > .profile-tab-body,
[b-5p2koggc1e] .modal-wide > .import-body {
    flex: 1;
    min-height: 0;
}

[b-5p2koggc1e] .copy.copied {
    background: #dcfce7;
    color: #166534;
}

[b-5p2koggc1e] .modal-actions .pack-format {
    color: #6b7280;
    font-size: 0.85rem;
    margin: 0 0 0 0;
    align-self: center;
}

[b-5p2koggc1e] .modal-actions .pack-format-select {
    width: auto;
    margin: 0 auto 0 0;
}

[b-5p2koggc1e] .modal-header-actions {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

[b-5p2koggc1e] .modal-header-actions .header-action {
    background: #e5e7eb;
    color: #111827;
    margin: 0;
    width: auto;
}

[b-5p2koggc1e] .detail-card-header .header-action {
    margin: 0;
    width: auto;
}

[b-5p2koggc1e] .card-actions-body {
    padding: 0 1.25rem 1.25rem;
}

[b-5p2koggc1e] .card-actions-body .header-action {
    margin: 0;
    width: auto;
}

/* Tokens popup: scope checkboxes and inline check lines. */
[b-5p2koggc1e] .check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: normal;
}

[b-5p2koggc1e] .check-line input[type="checkbox"] {
    width: auto;
}

[b-5p2koggc1e] .token-scope-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px 16px;
    max-height: 260px;
    overflow: auto;
    padding: 8px 0;
}

/* Tokens: list + New token popup. Card content that is not header/grid gets the card's side padding. */
[b-5p2koggc1e] .token-created > :not(.detail-card-header),
[b-5p2koggc1e] .new-token .detail-card > :not(.detail-card-header):not(.detail-grid):not(.card-note) {
    margin: 0 1.25rem 1rem;
    max-width: calc(100% - 2.5rem);
    box-sizing: border-box;
}

[b-5p2koggc1e] .new-token .detail-card > .detail-grid:first-child {
    padding-top: 1.25rem;
}

[b-5p2koggc1e] .new-token input[type="search"],
[b-5p2koggc1e] .new-token .expiry-date {
    display: block;
    width: calc(100% - 2.5rem);
}

[b-5p2koggc1e] .choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

[b-5p2koggc1e] button.choice {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

[b-5p2koggc1e] button.choice.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

[b-5p2koggc1e] h3.modal-section {
    margin: 18px 0 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

[b-5p2koggc1e] .radio-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

[b-5p2koggc1e] .radio-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    font-weight: normal;
    min-width: 0;
}

[b-5p2koggc1e] .radio-card.active {
    border-color: #111827;
    box-shadow: 0 0 0 1px #111827;
}

[b-5p2koggc1e] .radio-card input {
    width: auto;
    margin-top: 3px;
}

[b-5p2koggc1e] .radio-card span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

[b-5p2koggc1e] .radio-card small {
    color: #6b7280;
}

[b-5p2koggc1e] .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-5p2koggc1e] .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 4px 2px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .tag button {
    background: none;
    color: #6b7280;
    border: none;
    padding: 0 6px;
    font-size: 1rem;
    line-height: 1;
}

[b-5p2koggc1e] .scope-list {
    max-height: 320px;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 6px 8px;
}

[b-5p2koggc1e] .scope-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-weight: normal;
    min-width: 0;
}

[b-5p2koggc1e] .scope-line input[type="checkbox"] {
    width: auto;
    flex: none;
}

[b-5p2koggc1e] .scope-single {
    padding-left: 30px;
}

[b-5p2koggc1e] .scope-child {
    padding-left: 56px;
}

[b-5p2koggc1e] .scope-name {
    overflow-wrap: anywhere;
    min-width: 0;
}

[b-5p2koggc1e] button.scope-toggle {
    flex: none;
    width: 22px;
    padding: 0;
    background: none;
    border: none;
    color: #374151;
}

[b-5p2koggc1e] .token-summary {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .readonly-value {
    padding: 8px 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .warning-card {
    background: #fffbeb;
    border-color: #f59e0b;
}

[b-5p2koggc1e] .warning-card .detail-card-header p {
    color: #92400e;
}

[b-5p2koggc1e] .warning-card > .check-line {
    margin: 0 1.25rem 1rem;
}

[b-5p2koggc1e] .badge-amber {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

[b-5p2koggc1e] .token-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    margin-bottom: 1rem;
}

[b-5p2koggc1e] .token-toolbar select,
[b-5p2koggc1e] .token-toolbar input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    [b-5p2koggc1e] .token-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Audit log: compact filter row, padded results, badges. */
[b-5p2koggc1e] .audit-filters {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0.75rem 1.25rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

[b-5p2koggc1e] .audit-filters.with-scope {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
}

[b-5p2koggc1e] .audit-go button {
    width: auto;
    margin-top: 0;
    white-space: nowrap;
}

[b-5p2koggc1e] .audit-filters input,
[b-5p2koggc1e] .audit-filters select {
    max-width: none;
    width: 100%;
}

[b-5p2koggc1e] .audit-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 2.5rem 1.25rem;
    color: #6b7280;
    text-align: center;
}

[b-5p2koggc1e] .audit-empty strong {
    color: #111827;
    font-size: 0.95rem;
}

[b-5p2koggc1e] .audit-table-wrap {
    padding: 0 1.25rem;
    overflow-x: auto;
}

[b-5p2koggc1e] .audit-table {
    width: 100%;
    table-layout: fixed;
    margin: 0;
}

[b-5p2koggc1e] .audit-table th,
[b-5p2koggc1e] .audit-table td {
    padding: 0.6rem 0.5rem;
    vertical-align: top;
    text-align: left;
}

[b-5p2koggc1e] .audit-table .col-time { width: 7.5rem; }
[b-5p2koggc1e] .audit-table .col-user { width: 15%; }
[b-5p2koggc1e] .audit-table .col-event { width: 11rem; }
[b-5p2koggc1e] .audit-table .col-ip { width: 9rem; }
[b-5p2koggc1e] .audit-table .col-device { width: 9.5rem; }

[b-5p2koggc1e] .audit-cell {
    overflow: hidden;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .audit-time,
[b-5p2koggc1e] .audit-date,
[b-5p2koggc1e] .audit-name {
    display: block;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-5p2koggc1e] .audit-sub {
    display: block;
    color: #6b7280;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5p2koggc1e] .audit-detail {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

[b-5p2koggc1e] .audit-detail.open {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

[b-5p2koggc1e] .audit-table code {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .audit-badge {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #f3f4f6;
    color: #374151;
}

[b-5p2koggc1e] .audit-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

[b-5p2koggc1e] .audit-badge.success {
    background: #dcfce7;
    color: #166534;
}

[b-5p2koggc1e] .ai-table .ai-name {
    white-space: normal;
    word-break: break-word;
    font-weight: 600;
}

[b-5p2koggc1e] .ai-table .ai-toggle-col {
    width: 36px;
}

[b-5p2koggc1e] .ai-table .ai-toggle {
    font-size: 0.9rem;
    line-height: 1;
}

[b-5p2koggc1e] .ai-table tr.ai-details td {
    background: #f9fafb;
}

[b-5p2koggc1e] .ai-active {
    margin-left: 6px;
    vertical-align: middle;
}

[b-5p2koggc1e] .audit-badge.danger {
    background: #fee2e2;
    color: #b91c1c;
}

[b-5p2koggc1e] .audit-pager {
    padding: 0.75rem 1.25rem 1rem;
}

@media (max-width: 1100px) {
    [b-5p2koggc1e] .audit-filters,
    [b-5p2koggc1e] .audit-filters.with-scope {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [b-5p2koggc1e] .audit-table .col-device { display: none; }
}

@media (max-width: 700px) {
    [b-5p2koggc1e] .audit-filters,
    [b-5p2koggc1e] .audit-filters.with-scope {
        grid-template-columns: 1fr;
    }

    [b-5p2koggc1e] .audit-table .col-ip { display: none; }
}

/* Audit: account picker (super admin view) and download presets. */
[b-5p2koggc1e] .audit-account {
    position: relative;
}

[b-5p2koggc1e] .audit-picked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.4rem;
    padding: 0 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    overflow: hidden;
}

[b-5p2koggc1e] .audit-picked span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5p2koggc1e] .audit-picked button {
    width: auto;
    margin: 0;
    padding: 0 0.25rem;
    background: none;
    color: #6b7280;
    font-size: 1.1rem;
    line-height: 1;
}

[b-5p2koggc1e] .audit-suggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    margin: 2px 0 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12);
    max-height: 18rem;
    overflow-y: auto;
}

[b-5p2koggc1e] .audit-suggest li {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-5p2koggc1e] .audit-suggest li:hover {
    background: #f3f4f6;
}

/* Download popup: everything inside the padded card body. */
[b-5p2koggc1e] .audit-download .dl-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem 1.25rem;
}

[b-5p2koggc1e] .audit-download .dl-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
}

[b-5p2koggc1e] .audit-download .dl-dates input {
    max-width: none;
    width: 100%;
}

[b-5p2koggc1e] .audit-download .dl-range {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
}

[b-5p2koggc1e] .audit-download .dl-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

[b-5p2koggc1e] .audit-download .dl-check input {
    width: auto;
    margin: 0;
}

[b-5p2koggc1e] .audit-download .dl-check small {
    color: #6b7280;
    font-weight: 400;
}

[b-5p2koggc1e] .audit-download .dl-formats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

[b-5p2koggc1e] .audit-download .dl-format {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

[b-5p2koggc1e] .audit-download .dl-format:hover {
    border-color: #cbd5e1;
}

[b-5p2koggc1e] .audit-download .dl-format.active {
    border-color: #6366f1;
    background: #f5f7ff;
    box-shadow: 0 0 0 1px #6366f1 inset;
}

[b-5p2koggc1e] .audit-download .dl-format input {
    width: auto;
    margin: 0.2rem 0 0;
    accent-color: #6366f1;
}

[b-5p2koggc1e] .audit-download .dl-format span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

[b-5p2koggc1e] .audit-download .dl-format small {
    color: #6b7280;
}

@media (max-width: 600px) {
    [b-5p2koggc1e] .audit-download .dl-dates,
    [b-5p2koggc1e] .audit-download .dl-formats {
        grid-template-columns: 1fr;
    }
}


/* Tabs attached to a card (Apps and secrets, Audit). */
[b-5p2koggc1e] .vault-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: -1px;
}

[b-5p2koggc1e] .vault-tab {
    border: 1px solid transparent;
    border-bottom: 0;
    background: transparent;
    padding: 10px 20px;
    border-radius: 12px 12px 0 0;
    color: #475569;
    font-weight: 600;
    cursor: pointer;
}

[b-5p2koggc1e] .vault-tab.active {
    background: var(--brand-card-bg, #fff);
    border-color: #e2e8f0;
    color: var(--brand-primary, #111827);
    position: relative;
    z-index: 1;
}

[b-5p2koggc1e] .vault-tab-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0 16px 16px 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

[b-5p2koggc1e] .idle-meter {
    height: 6px;
    border-radius: 999px;
    background: var(--border, #e5e7eb);
    overflow: hidden;
    margin: 0.75rem 0 0.25rem;
}

[b-5p2koggc1e] .idle-meter span {
    display: block;
    height: 100%;
    background: var(--accent, #2563eb);
    transition: width 1s linear;
}

/* Environment selector on Apps and secrets: small tabs in the same style, plus actions. */
[b-5p2koggc1e] .env-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
}

[b-5p2koggc1e] .env-bar .env-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
}

[b-5p2koggc1e] .env-bar .env-tabs {
    margin: 0;
    border-bottom: none;
}

[b-5p2koggc1e] .env-missing {
    margin: -4px 0 12px;
    font-size: 0.85rem;
}

/* Compact icon buttons (IconButton). Tooltips come from data-tip via wwwroot/js/tooltip.js (floating, never clipped). */
[b-5p2koggc1e] .icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin-top: 0;
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    flex: none;
}

[b-5p2koggc1e] .icon-btn:hover:not(:disabled),
[b-5p2koggc1e] .icon-btn:focus-visible {
    background: #f3f4f6;
    color: #111827;
    border-color: #9ca3af;
}

[b-5p2koggc1e] .icon-btn.danger:hover:not(:disabled) {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fca5a5;
}

[b-5p2koggc1e] .icon-btn.active {
    background: var(--brand-primary, #111827);
    color: #fff;
    border-color: var(--brand-primary, #111827);
}

[b-5p2koggc1e] .icon-actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    flex-wrap: nowrap;
}

[b-5p2koggc1e] td .icon-actions {
    justify-content: flex-end;
}

/* Card grid with padded cards (Connected AI, Share links). */
[b-5p2koggc1e] .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

[b-5p2koggc1e] .card-grid > .detail-card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

[b-5p2koggc1e] .card-grid .detail-card-header {
    flex-wrap: nowrap;
    align-items: flex-start;
}

[b-5p2koggc1e] .card-grid .detail-card-header > div:first-child {
    min-width: 0;
}

[b-5p2koggc1e] .card-grid .detail-card-header h2 {
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .card-body {
    padding: 0.9rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

[b-5p2koggc1e] .fact-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.9rem;
}

[b-5p2koggc1e] .fact-grid dt {
    color: #6b7280;
}

[b-5p2koggc1e] .fact-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

[b-5p2koggc1e] .chip-row .perm-chip {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
}

[b-5p2koggc1e] .perm-chip.warn {
    background: #fffbeb;
    color: #92400e;
}

[b-5p2koggc1e] .perm-chip.ok {
    background: #ecfdf5;
    color: #065f46;
}

[b-5p2koggc1e] .detail-card.clickable {
    cursor: pointer;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

[b-5p2koggc1e] .detail-card.clickable:hover,
[b-5p2koggc1e] .detail-card.clickable:focus-visible {
    border-color: #9ca3af;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
}

[b-5p2koggc1e] tr.clickable {
    cursor: pointer;
}

[b-5p2koggc1e] tr.clickable:hover td {
    background: #f9fafb;
}

/* Inline SVG icons inside buttons and badges. */
[b-5p2koggc1e] .modal-close,
[b-5p2koggc1e] .import-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-5p2koggc1e] .icon-btn.copied {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

[b-5p2koggc1e] .icon-btn svg,
[b-5p2koggc1e] .modal-close svg,
[b-5p2koggc1e] .import-remove svg,
[b-5p2koggc1e] .star-button svg {
    display: block;
    flex: none;
}

[b-5p2koggc1e] .key-status svg {
    display: inline-block;
    vertical-align: -1px;
}

[b-5p2koggc1e] .tab-lock {
    display: inline-flex;
    margin-left: 0.3rem;
    vertical-align: -1px;
}

/* Every table's action column: icons at the far right. */
[b-5p2koggc1e] table.data td:last-child:has(.icon-actions),
[b-5p2koggc1e] table.data td:last-child:has(.row-actions) {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

[b-5p2koggc1e] table.data td:last-child .row-actions {
    justify-content: flex-end;
}

[b-5p2koggc1e] table.data td.row-actions {
    text-align: right;
    justify-content: flex-end;
}

[b-5p2koggc1e] button.icon-btn.danger {
    background: #fff;
    color: var(--brand-danger, #b91c1c);
    border: 1px solid #fecaca;
}

[b-5p2koggc1e] button.icon-btn.danger:hover:not(:disabled) {
    background: #fef2f2;
    border-color: #fca5a5;
}


/* Icon buttons inside footers keep their square size (".modal-actions button { width: auto }" would squash them). */
[b-5p2koggc1e] .modal-actions button.icon-btn,
[b-5p2koggc1e] .row-actions button.icon-btn {
    width: 2rem;
    min-width: 2rem;
    flex-shrink: 0;
}

/* Popups never scroll sideways; long values wrap. */
[b-5p2koggc1e] .modal-card,
[b-5p2koggc1e] .modal-card .import-body {
    overflow-x: hidden;
}

[b-5p2koggc1e] .modal-actions select {
    min-width: 0;
    flex: 0 1 auto;
}

[b-5p2koggc1e] .pack-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

[b-5p2koggc1e] .modal-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

[b-5p2koggc1e] .modal-title-row h2 {
    margin-top: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Group Show popup footer: the format list shrinks and wraps on narrow screens instead of pushing the popup sideways. */
[b-5p2koggc1e] .modal-actions .pack-format-select {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    text-overflow: ellipsis;
}

[b-5p2koggc1e] .modal-actions:has(.pack-format-select) {
    flex-wrap: wrap;
    align-items: center;
}

[b-5p2koggc1e] .modal-wide,
[b-5p2koggc1e] .modal-body,
[b-5p2koggc1e] .pack-rows {
    overflow-x: hidden;
}

/* Format list + "Copy all" sit together on the left of the group Show footer. */
[b-5p2koggc1e] .modal-actions .pack-format-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    margin-right: auto;
}

[b-5p2koggc1e] .modal-actions .pack-format-group .pack-format-select {
    margin: 0;
}

/* Share popup: step 2 (send link and passphrase). */
[b-5p2koggc1e] .share-pass-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

[b-5p2koggc1e] .share-pass-row input {
    flex: 1;
    min-width: 0;
    margin: 0;
}

[b-5p2koggc1e] .share-summary {
    color: #4b5563;
    margin: 0 0 0.75rem;
}

[b-5p2koggc1e] .share-send-grid {
    display: grid;
    gap: 0.75rem;
}

[b-5p2koggc1e] .share-send-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: #fff;
    min-width: 0;
}

[b-5p2koggc1e] .share-send-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

[b-5p2koggc1e] .share-send-value {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem 0.6rem;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    word-break: break-all;
}

[b-5p2koggc1e] .share-send-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}


/* Long text in cards never overflows: header title/subtitle truncate (full text in title), facts wrap. */
[b-5p2koggc1e] .card-grid > .detail-card,
[b-5p2koggc1e] .card-grid .card-body,
[b-5p2koggc1e] .card-grid .detail-card-header > div:first-child {
    min-width: 0;
}

[b-5p2koggc1e] .card-grid .detail-card-header > div:first-child {
    flex: 1;
    overflow: hidden;
}

[b-5p2koggc1e] .card-grid .detail-card-header h2,
[b-5p2koggc1e] .card-grid .detail-card-header p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[b-5p2koggc1e] .card-grid .detail-card-header .icon-actions {
    flex: none;
}

[b-5p2koggc1e] .fact-grid dd,
[b-5p2koggc1e] .detail-field,
[b-5p2koggc1e] td.email,
[b-5p2koggc1e] .member-email {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Credit at the bottom of the side menu. */
aside .powered-by[b-5p2koggc1e],
[b-5p2koggc1e] aside .powered-by {
    margin-top: auto;
    padding: 0.75rem 0 0;
    text-align: left;
    color: #6b7280;
}

aside .powered-by a[b-5p2koggc1e],
[b-5p2koggc1e] aside .powered-by a {
    color: #9ca3af;
}

aside .powered-by a:hover[b-5p2koggc1e],
[b-5p2koggc1e] aside .powered-by a:hover {
    color: #e5e7eb;
}

/* Action cells stay real table cells (display:flex on a <td> pulls it out of the table grid). */
[b-5p2koggc1e] table.data td.row-actions {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

[b-5p2koggc1e] table.data td.row-actions > * {
    display: inline-flex;
    vertical-align: middle;
}

[b-5p2koggc1e] table.data td.row-actions > * + * {
    margin-left: 0.35rem;
}

[b-5p2koggc1e] table.data th.actions-col {
    width: 1%;
}

[b-5p2koggc1e] table.data th.center,
[b-5p2koggc1e] table.data td.center {
    text-align: center;
}

/* A switch inside a table cell sits on the row's centre line. */
[b-5p2koggc1e] table.data td .toggle {
    margin-top: 0;
    vertical-align: middle;
}

[b-5p2koggc1e] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Link-styled icon buttons (e.g. downloads) match .icon-btn buttons. */
[b-5p2koggc1e] a.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    text-decoration: none;
}

/* Usage guide popup: tab bar stays visible while the popup body scrolls (body has 1rem top padding). */
[b-5p2koggc1e] .usage-guide > .usage-tabs {
    position: sticky;
    top: -1rem;
    z-index: 2;
    background: #fff;
    margin-top: -1rem;
    padding-top: 1rem;
}

[b-5p2koggc1e] .pack-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

[b-5p2koggc1e] .pack-show-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Plan feature switched off: small lock link to Billing (PlanUpgrade.razor) */
[b-5p2koggc1e] .plan-upgrade.compact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.8rem;
    text-decoration: none;
    white-space: nowrap;
}

[b-5p2koggc1e] .plan-upgrade.compact:hover {
    border-color: #9ca3af;
    color: #111827;
}

[b-5p2koggc1e] .plan-upgrade-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0.5rem 0;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 0.9rem;
}

[b-5p2koggc1e] .plan-upgrade-note a {
    font-weight: 600;
}


/* Email admin: page subtitle under h1 (Vault Members/Settings pattern). */
[b-5p2koggc1e] .page-header .subtitle {
    color: #6b7280;
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
}

[b-5p2koggc1e] a.button-link {
    text-decoration: none;
    display: inline-flex;
}

[b-5p2koggc1e] a.button-link button {
    margin: 0;
}

/* Side menu brand mark spacing. */
aside .aside-brand[b-5p2koggc1e] {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

aside .aside-brand .brand-mark-name[b-5p2koggc1e] {
    color: #fff;
}

/* Fetch email accounts: status chips, mailbox picker, error text. */
[b-5p2koggc1e] .perm-chip.ok { background: #ecfdf5; color: #065f46; }
[b-5p2koggc1e] .perm-chip.warn { background: #fffbeb; color: #92400e; }
[b-5p2koggc1e] .perm-chip.off { background: #f3f4f6; color: #6b7280; }
[b-5p2koggc1e] .perm-chip.err { background: #fef2f2; color: #b91c1c; }
[b-5p2koggc1e] .pick-list { max-height: 16rem; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; margin-top: 0.5rem; }
[b-5p2koggc1e] .pick-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; margin: 0; border-bottom: 1px solid #f3f4f6; font-weight: normal; cursor: pointer; }
[b-5p2koggc1e] .pick-row:last-child { border-bottom: 0; }
[b-5p2koggc1e] .pick-row.selected { background: #eef2ff; }
[b-5p2koggc1e] .pick-row input { width: auto; }
[b-5p2koggc1e] .pick-row small { color: #6b7280; }
[b-5p2koggc1e] .fetch-error { color: #b91c1c; font-size: 0.8rem; margin-top: 0.2rem; max-width: 30rem; overflow-wrap: anywhere; }
[b-5p2koggc1e] .server-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.5rem; }

/* ErrorLogs details drawer (plan X35) */
[b-5p2koggc1e] .drawer-backdrop { position: fixed; inset: 0; background: rgb(17 24 39 / 0.45); z-index: 1050; display: flex; justify-content: flex-end; }
[b-5p2koggc1e] .drawer { background: #fff; width: min(36rem, 100%); height: 100%; overflow-y: auto; padding: 1.25rem; box-shadow: -8px 0 24px rgb(17 24 39 / 0.2); }
[b-5p2koggc1e] .drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
[b-5p2koggc1e] .drawer-header h2 { margin: 0; font-size: 1.15rem; }
[b-5p2koggc1e] .drawer dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.875rem; }
[b-5p2koggc1e] .drawer dt { color: #6b7280; font-weight: 500; }
[b-5p2koggc1e] .drawer dd { margin: 0; overflow-wrap: anywhere; }
[b-5p2koggc1e] .drawer pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f3f4f6; border-radius: 8px; padding: 0.75rem; font-size: 0.8rem; margin: 0; }
[b-5p2koggc1e] table.data tr.clickable { cursor: pointer; }
[b-5p2koggc1e] table.data tr.clickable:hover td { background: #f9fafb; }
[b-5p2koggc1e] .log-message { max-width: 32rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[b-5p2koggc1e] .pager { display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end; margin-top: 0.75rem; }

/* ── Modal redesign (Vault form pattern): one column, full-width fields, one-line hints, inline errors ── */
[b-5p2koggc1e] .muted { color: #6b7280; }
[b-5p2koggc1e] .form-stack { display: flex; flex-direction: column; gap: 0.9rem; }
[b-5p2koggc1e] .form-stack.padded { padding: 1rem 1.25rem 1.25rem; }
[b-5p2koggc1e] .form-stack .form-field > label:first-child,
[b-5p2koggc1e] .form-stack .form-field > label { margin-top: 0; margin-bottom: 0.3rem; }
[b-5p2koggc1e] .form-stack input:where(:not([type="checkbox"]):not([type="radio"])),
[b-5p2koggc1e] .form-stack select { max-width: none; width: 100%; }
[b-5p2koggc1e] .field-hint { color: #6b7280; font-size: 0.8rem; margin: 0.3rem 0 0; line-height: 1.35; }
[b-5p2koggc1e] .field-error { color: #b42318; font-size: 0.8rem; margin: 0.3rem 0 0; }
[b-5p2koggc1e] .field-warning { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; font-size: 0.8rem; margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; }
[b-5p2koggc1e] .follow-up { margin-top: 0.5rem; }
[b-5p2koggc1e] .form-stack .choice-row { margin: 0; }

/* Input with an attached suffix, e.g. [ sales ][ @domain ] */
[b-5p2koggc1e] .input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
[b-5p2koggc1e] .form-stack .input-group input,
[b-5p2koggc1e] .input-group input { flex: 1 1 auto; width: auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
[b-5p2koggc1e] .input-group .input-suffix {
    display: inline-flex; align-items: center; padding: 0 0.75rem; background: #f3f4f6; color: #374151;
    border: 1px solid #d1d5db; border-left: 0; border-radius: 0 6px 6px 0; font-size: 0.9rem; white-space: nowrap;
}

/* Sentence-style row: [field] [operator] [value] */
[b-5p2koggc1e] .sentence-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
[b-5p2koggc1e] .sentence-row > select,
[b-5p2koggc1e] .sentence-row > input { width: auto; flex: 0 0 auto; max-width: none; }
[b-5p2koggc1e] .sentence-row > .narrow { flex: 0 0 8.5rem; }
[b-5p2koggc1e] .sentence-row > .grow { flex: 1 1 12rem; min-width: 10rem; }
[b-5p2koggc1e] .sentence-row > button { margin-top: 0; }

/* Compact switches: one-line label, short muted hint on the same line block */
[b-5p2koggc1e] .switch-stack { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid #f3f4f6; padding-top: 0.75rem; }
[b-5p2koggc1e] .switch-stack .form-check { display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; align-items: center; margin: 0; }
[b-5p2koggc1e] .switch-stack .form-check-label { margin: 0; font-weight: 600; font-size: 0.875rem; }
[b-5p2koggc1e] .switch-stack .switch-hint { grid-column: 2; color: #6b7280; font-size: 0.8rem; }

/* Chips (alias destinations) */
[b-5p2koggc1e] .chip-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
[b-5p2koggc1e] .chip {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px;
    background: #eef2ff; color: #3730a3; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
[b-5p2koggc1e] a.chip:hover { background: #e0e7ff; }
[b-5p2koggc1e] .chip.locked { background: #f3f4f6; color: #111827; }
[b-5p2koggc1e] .chip.outside { background: #fef3c7; color: #92400e; }

/* Vault list pages: compact search with icon, toolbar, empty state, status badges */
[b-5p2koggc1e] .search-box { position: relative; width: 16rem; max-width: 100%; }
[b-5p2koggc1e] .search-box svg { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
[b-5p2koggc1e] .search-box input.search { width: 100%; padding: 0.4rem 0.6rem 0.4rem 2rem; font-size: 0.875rem; margin: 0; }
[b-5p2koggc1e] .list-toolbar { display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; padding: 0.75rem 1.25rem; }
[b-5p2koggc1e] .empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.25rem 1rem; text-align: center; color: #6b7280; }
[b-5p2koggc1e] .empty-state p { margin: 0; font-size: 0.9rem; }
[b-5p2koggc1e] .empty-state-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: #f3f4f6; color: #374151; }
[b-5p2koggc1e] .empty-state button { margin-top: 0.25rem; }
[b-5p2koggc1e] .badge-row { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
[b-5p2koggc1e] .status-badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; background: #f3f4f6; color: #374151; }
[b-5p2koggc1e] .status-badge.ok { background: #dcfce7; color: #166534; }
[b-5p2koggc1e] .status-badge.off { background: #f3f4f6; color: #6b7280; }
[b-5p2koggc1e] .status-badge.warn { background: #fef3c7; color: #92400e; }
[b-5p2koggc1e] table.data tr.clickable-row { cursor: pointer; }
[b-5p2koggc1e] table.data tr.clickable-row:hover td { background: #f9fafb; }
[b-5p2koggc1e] .row-title { font-weight: 600; color: #111827; text-decoration: none; }
[b-5p2koggc1e] a.row-title:hover { text-decoration: underline; }
[b-5p2koggc1e] .muted.small { font-size: 0.8rem; }
[b-5p2koggc1e] table.data th.actions-col { text-align: right; }
[b-5p2koggc1e] table.data td.row-actions { display: table-cell; text-align: right; white-space: nowrap; }
[b-5p2koggc1e] table.data td.row-actions > * + * { margin-left: 0.35rem; }

/* Mailbox View (Vault detail page): header with avatar, stat cards, quota bar, details list */
[b-5p2koggc1e] .mailbox-hero { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
[b-5p2koggc1e] .mailbox-hero .avatar.large {
    display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 14px;
    background: #111827; color: #fff; font-size: 1rem; font-weight: 700; flex: none;
}
[b-5p2koggc1e] .mailbox-hero-text { flex: 1 1 auto; min-width: 0; }
[b-5p2koggc1e] .mailbox-hero-text h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
[b-5p2koggc1e] .mailbox-hero-text p { margin: 0.1rem 0 0.35rem; }
[b-5p2koggc1e] .mailbox-hero-actions { display: flex; gap: 0.5rem; }
[b-5p2koggc1e] .mailbox-view-tabs { margin-top: 0; }
[b-5p2koggc1e] .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
[b-5p2koggc1e] .stat-card {
    display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 10px; color: inherit; text-decoration: none;
}
[b-5p2koggc1e] a.stat-card:hover { border-color: #9ca3af; }
[b-5p2koggc1e] .stat-card.wide { grid-column: span 2; }
[b-5p2koggc1e] .stat-label { font-size: 0.8rem; color: #6b7280; font-weight: 600; }
[b-5p2koggc1e] .stat-value { font-size: 1.35rem; font-weight: 700; color: #111827; }
[b-5p2koggc1e] .stat-card.wide .stat-value { font-size: 1rem; }
[b-5p2koggc1e] .stat-sub { font-size: 0.8rem; color: #6b7280; }
[b-5p2koggc1e] .quota-bar { height: 0.5rem; background: #f3f4f6; border-radius: 999px; overflow: hidden; margin-top: 0.35rem; }
[b-5p2koggc1e] .quota-bar span { display: block; height: 100%; background: #111827; border-radius: 999px; }
[b-5p2koggc1e] .quota-bar span.high { background: #b42318; }
[b-5p2koggc1e] .detail-list { display: grid; grid-template-columns: 11rem 1fr; gap: 0.6rem 1rem; margin: 0; padding: 1rem 1.25rem 1.25rem; font-size: 0.9rem; }
[b-5p2koggc1e] .detail-list dt { color: #6b7280; font-weight: 600; }
[b-5p2koggc1e] .detail-list dd { margin: 0; }
@media (max-width: 640px) {
    [b-5p2koggc1e] .stat-card.wide { grid-column: span 1; }
    [b-5p2koggc1e] .detail-list { grid-template-columns: 1fr; }
    [b-5p2koggc1e] .search-box { width: 100%; }
}

/* Mailbox sub-tabs in the shared shell (Client setup preview, radio rows, convert / hold notices). */
[b-5p2koggc1e] .code-preview { margin: 0 1.25rem 1.25rem; padding: 0.9rem 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.82rem; white-space: pre-wrap; max-height: 22rem; overflow: auto; }
[b-5p2koggc1e] .choice-row label { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.25rem; font-weight: 500; }
[b-5p2koggc1e] .hold-banner { margin: 0; padding: 0.85rem 1.1rem; border-radius: 8px; background: #fef3c7; color: #92400e; border: 1px solid #fde68a; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
[b-5p2koggc1e] .hold-banner p { margin: 0; }
[b-5p2koggc1e] .convert-steps { margin: 0.25rem 0 0.75rem 1.1rem; padding: 0; font-size: 0.88rem; color: #374151; }
[b-5p2koggc1e] .convert-steps li { margin: 0.2rem 0; }
[b-5p2koggc1e] .convert-block { padding: 0.75rem 0.9rem; border-radius: 8px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; margin: 0 0 0.75rem; }
/* /Components/Layout/AdminShell.razor.rz.scp.css */
/* Hidden until Blazor adds the .show class on an unhandled circuit error. */
#blazor-error-ui[b-1dvlfmh8dw] {
    background: #b32121;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #fff;
}

#blazor-error-ui .dismiss[b-1dvlfmh8dw] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Also keep MainLayout's copy working if anything still uses MainLayout */
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-az6jqlfyby] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-az6jqlfyby] {
    flex: 1;
}

.sidebar[b-az6jqlfyby] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-az6jqlfyby] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-az6jqlfyby]  a, .top-row[b-az6jqlfyby]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-az6jqlfyby]  a:hover, .top-row[b-az6jqlfyby]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-az6jqlfyby]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-az6jqlfyby] {
        justify-content: space-between;
    }

    .top-row[b-az6jqlfyby]  a, .top-row[b-az6jqlfyby]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-az6jqlfyby] {
        flex-direction: row;
    }

    .sidebar[b-az6jqlfyby] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-az6jqlfyby] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-az6jqlfyby]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-az6jqlfyby], article[b-az6jqlfyby] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-az6jqlfyby] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-az6jqlfyby] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-vx9x06cmzy] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-vx9x06cmzy] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-vx9x06cmzy] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-vx9x06cmzy] {
    font-size: 1.1rem;
}

.bi[b-vx9x06cmzy] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-vx9x06cmzy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-vx9x06cmzy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-vx9x06cmzy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-vx9x06cmzy] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-vx9x06cmzy] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-vx9x06cmzy] {
        padding-bottom: 1rem;
    }

    .nav-item[b-vx9x06cmzy]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-vx9x06cmzy]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-vx9x06cmzy]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-vx9x06cmzy] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-vx9x06cmzy] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-vx9x06cmzy] {
        display: none;
    }

    .nav-scrollable[b-vx9x06cmzy] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/ProfileModal.razor.rz.scp.css */

.detail-note[b-v0jbbg6tly] {
    color: #6b7280;
    margin: 0 0 1rem;
}

.detail-card[b-v0jbbg6tly] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.detail-card-header[b-v0jbbg6tly] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.detail-card-header h2[b-v0jbbg6tly] {
    margin: 0;
    font-size: 1.05rem;
}

.detail-card-header p[b-v0jbbg6tly] {
    margin: 0.2rem 0 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.detail-card-actions[b-v0jbbg6tly] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.detail-card-actions button[b-v0jbbg6tly] {
    width: auto;
    margin-top: 0;
}

.detail-card-actions .secondary[b-v0jbbg6tly] {
    background: #e5e7eb;
    color: #111827;
}

.detail-grid[b-v0jbbg6tly] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 1.25rem;
    padding: 0.75rem 1.25rem 1.25rem;
}

.detail-field input[b-v0jbbg6tly] {
    max-width: none;
}

.detail-field.span-2[b-v0jbbg6tly] {
    grid-column: span 2;
}

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

@media (max-width: 600px) {
    .detail-grid[b-v0jbbg6tly] {
        grid-template-columns: 1fr;
    }

    .detail-field.span-2[b-v0jbbg6tly] {
        grid-column: auto;
    }
}

.detail-banner[b-v0jbbg6tly] {
    margin: 0 0 1rem;
}

.detail-body[b-v0jbbg6tly] {
    padding: 1rem 1.25rem 1.25rem;
}

.detail-body p[b-v0jbbg6tly] {
    margin-top: 0;
}

.detail-grid.flush[b-v0jbbg6tly] {
    padding: 0;
}

.detail-field.align-end[b-v0jbbg6tly] {
    display: flex;
    align-items: flex-end;
}

.detail-field select[b-v0jbbg6tly] {
    max-width: none;
}

.totp-setup[b-v0jbbg6tly] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.totp-setup form[b-v0jbbg6tly] {
    flex: 1;
    min-width: 16rem;
}

.inline-actions[b-v0jbbg6tly] {
    margin-top: 0.75rem;
}

.detail-body > button[b-v0jbbg6tly],
.detail-field.align-end button[b-v0jbbg6tly] {
    width: auto;
}

.detail-field.align-end button.secondary[b-v0jbbg6tly] {
    background: #e5e7eb;
    color: #111827;
}

.profile-tabs[b-v0jbbg6tly] {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem 0;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    flex-wrap: wrap;
}

.profile-tab[b-v0jbbg6tly] {
    background: transparent;
    color: #6b7280;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    padding: 0.5rem 0.95rem;
    margin-bottom: -1px;
    font-weight: 600;
    cursor: pointer;
}

.profile-tab:hover:not(:disabled)[b-v0jbbg6tly] {
    color: #111827;
}

.profile-tab.active[b-v0jbbg6tly] {
    background: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
}

.profile-tab:disabled[b-v0jbbg6tly] {
    opacity: 0.45;
    cursor: not-allowed;
}

.profile-tab-body[b-v0jbbg6tly] {
    background: #f3f4f6;
    padding: 1.25rem;
}

.profile-tab-body .detail-card:last-child[b-v0jbbg6tly] {
    margin-bottom: 0;
}

.profile-notice[b-v0jbbg6tly] {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.profile-notice.ok[b-v0jbbg6tly] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.profile-notice.error[b-v0jbbg6tly] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

/* Backup recovery: confirm step and the one-time codes/phrase. */
.recovery-step[b-v0jbbg6tly] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
}

.recovery-step h3[b-v0jbbg6tly] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.recovery-codes[b-v0jbbg6tly] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.recovery-phrase[b-v0jbbg6tly] {
    font-size: 1.05rem;
    word-spacing: 0.3rem;
}

.recovery-step .button-link[b-v0jbbg6tly] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.card-note[b-v0jbbg6tly] {
    color: #6b7280;
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
    padding: 0.75rem 1.25rem 1.25rem;
}

/* Connected apps: filter chips (same look as the import page), per-kind help, and the browser extension settings. */
.ca-filters[b-v0jbbg6tly] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.ca-chip[b-v0jbbg6tly] {
    width: auto;
    margin: 0;
    padding: 0.3rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ca-chip:hover[b-v0jbbg6tly] {
    background: #f3f4f6;
}

.ca-chip.active[b-v0jbbg6tly] {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.ca-count[b-v0jbbg6tly] {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
    font-size: 0.75rem;
    text-align: center;
}

.ca-chip.active .ca-count[b-v0jbbg6tly] {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ca-help[b-v0jbbg6tly] {
    margin: 0 0 0.4rem;
    color: #6b7280;
    font-size: 0.85rem;
}

.ca-detail[b-v0jbbg6tly] {
    color: #6b7280;
    font-size: 0.8rem;
}

.ca-settings[b-v0jbbg6tly] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}

.ca-settings h3[b-v0jbbg6tly],
.ca-settings summary[b-v0jbbg6tly] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.ca-settings summary[b-v0jbbg6tly] {
    cursor: pointer;
}

.ca-settings[open] summary[b-v0jbbg6tly] {
    margin-bottom: 0.6rem;
}

.ca-settings h3[b-v0jbbg6tly] {
    margin-bottom: 0.6rem;
}

.ca-setting[b-v0jbbg6tly] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ca-setting label[b-v0jbbg6tly] {
    margin: 0;
    font-weight: 500;
}

.ca-setting select[b-v0jbbg6tly] {
    width: auto;
    min-width: 13rem;
    margin: 0;
}

.ca-name[b-v0jbbg6tly] {
    white-space: nowrap;
}

.ca-setting-note[b-v0jbbg6tly] {
    margin: 0.5rem 0 0;
    color: #6b7280;
    font-size: 0.85rem;
}

.link-button[b-v0jbbg6tly] {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #2563eb;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2ce035co3g],
.components-reconnect-repeated-attempt-visible[b-2ce035co3g],
.components-reconnect-failed-visible[b-2ce035co3g],
.components-pause-visible[b-2ce035co3g],
.components-resume-failed-visible[b-2ce035co3g],
.components-rejoining-animation[b-2ce035co3g] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-retrying[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-failed[b-2ce035co3g],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2ce035co3g] {
    display: block;
}


#components-reconnect-modal[b-2ce035co3g] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2ce035co3g 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-2ce035co3g 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2ce035co3g 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-2ce035co3g]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-2ce035co3g 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-2ce035co3g {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2ce035co3g {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2ce035co3g {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2ce035co3g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-2ce035co3g] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2ce035co3g] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-2ce035co3g] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-2ce035co3g] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-2ce035co3g] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-2ce035co3g] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-2ce035co3g 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-2ce035co3g] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-2ce035co3g {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}