*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'Inter', 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Utility Classes (Bootstrap-compatible) */
.d-flex { display: flex !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.p-0 { padding: 0 !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.fw-bold { font-weight: 700 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--accent-purple) !important; }
.text-danger { color: var(--color-error) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-cyan { color: var(--accent-cyan) !important; }
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: 0 !important; }
.rounded { border-radius: 0.375rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

/* List resets */
ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Link reset */
a {
    text-decoration: none;
    color: var(--accent-purple);
}

a:hover {
    color: var(--accent-cyan);
}

/* Button reset */
button {
    cursor: pointer;
    border: none;
    background: transparent;
}

/* Input styling */
input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

#app {
    height: 100%;
}

h1:focus {
    outline: none;
}

.btn-link {
    color: var(--accent-purple);
}

.btn-primary {
    color: var(--text-on-accent);
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--accent-purple-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent-glow);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--bg-card), 0 0 0 0.25rem var(--accent-purple);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
}

/* Blazor's generic unhandled-error bar is suppressed. Offline / server-unreachable
   is handled gracefully elsewhere: the top "Site is currently unavailable" banner
   (!ClientCache.Loaded) and the inline login retry (MainLayout _connectionError).
   !important overrides the inline display:block Blazor sets when an error occurs. */
#blazor-error-ui {
    display: none !important;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: var(--border-color);
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--accent-purple);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--text-primary);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: var(--accent-purple);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* MudBlazor Theme Overrides */
.mud-theme-primary {
    background-color: var(--accent-purple) !important;
}

.mud-primary-text {
    color: var(--accent-purple) !important;
}

.mud-paper {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.mud-table {
    background-color: var(--bg-card) !important;
}

.mud-table-head {
    background-color: var(--bg-hover) !important;
}

.mud-table-row:hover {
    background-color: var(--bg-hover) !important;
}

.mud-input {
    color: var(--text-primary) !important;
    background-color: var(--bg-input) !important;
}

.mud-input-label {
    color: var(--text-secondary) !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-purple) !important;
}

.mud-input.mud-input-underline:before {
    border-bottom-color: var(--border-color) !important;
}

.mud-input.mud-input-underline:after {
    border-bottom-color: var(--accent-purple) !important;
}

/* Input control backgrounds */
.mud-input-control {
    background-color: var(--bg-input) !important;
}

.mud-input-control .mud-input-slot {
    background-color: var(--bg-input) !important;
}

.mud-input-outlined .mud-input-slot {
    background-color: var(--bg-input) !important;
}

.mud-input-filled .mud-input-slot {
    background-color: var(--bg-input) !important;
}

/* Standard HTML inputs */
input, select, textarea {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

input:focus, select:focus, textarea:focus {
    background-color: var(--bg-input-focus);
    border-color: var(--accent-purple);
    outline: none;
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

.mud-select-input {
    color: var(--text-primary) !important;
}

.mud-dialog {
    background-color: var(--bg-card) !important;
}

.mud-dialog-title {
    color: var(--text-primary) !important;
}

.mud-button-filled.mud-button-primary {
    background-color: var(--accent-purple) !important;
}

.mud-button-filled.mud-button-primary:hover {
    background-color: var(--accent-purple-dark) !important;
}

.mud-chip.mud-chip-filled.mud-chip-color-primary {
    background-color: var(--accent-purple) !important;
}

.mud-snackbar.mud-alert-filled-success {
    background-color: var(--color-success) !important;
}

.mud-snackbar.mud-alert-filled-error {
    background-color: var(--color-error) !important;
}

.mud-snackbar.mud-alert-filled-warning {
    background-color: var(--color-warning) !important;
}

.mud-snackbar.mud-alert-filled-info {
    background-color: var(--accent-cyan) !important;
}

/* ========================================
   SHARED COMPONENT STYLES
   Standardized patterns for all BackOffice pages
   ======================================== */

/* ---- Page Header ---- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}


.page-header h1 {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.page-header .page-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.page-header .header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    line-height: 1.4;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary {
    color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--btn-primary-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent-glow);
}

.btn-secondary {
    color: var(--btn-secondary-text);
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--btn-secondary-bg-hover);
    color: var(--text-primary);
}

.btn-success {
    color: var(--btn-success-text);
    background-color: var(--btn-success-bg);
}

.btn-success:hover:not(:disabled) {
    background-color: var(--btn-success-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-success-glow);
}

.btn-purple {
    color: var(--btn-primary-text);
    background-color: var(--accent-primary);
    padding: 10px 20px;
}

.btn-purple:hover:not(:disabled) {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent-glow);
}

.btn-danger {
    color: var(--btn-danger-text);
    background-color: var(--btn-danger-bg);
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--btn-danger-bg-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-error-glow);
}

/* ===========================================================================
   MyTeam column-config dialogs (shared by MyTeamColumnConfigDialogs.razor).
   Class names retain the historical "gen-list-" prefix because they were
   originally scoped to MyTeamGenealogyList; lifted to global once the
   dialogs were extracted into a shared component used by both the Genealogy
   List View and the My Organization Table View.
   =========================================================================== */

.gen-list-col-dialog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 32px;
}

.gen-list-col-dialog-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gen-list-col-dialog-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 0;
}

.gen-list-col-dialog-item input[type="checkbox"] {
    cursor: pointer;
    flex-shrink: 0;
}

.gen-list-col-dialog-reset-row {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-primary);
}

.gen-list-col-dialog-reset-row a {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 0.875rem;
    cursor: pointer;
}

.gen-list-col-dialog-reset-row a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .gen-list-col-dialog-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Configurations dialog (Save / Load / Delete presets) ---- */

.gen-list-config-section {
    margin-bottom: 14px;
}

.gen-list-config-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.gen-list-config-save-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.gen-list-config-name-input {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--border-input);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
}

.gen-list-config-name-input:focus {
    border-color: var(--border-input-focus);
}

.gen-list-config-default-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.gen-list-config-default-label input[type="checkbox"] {
    cursor: pointer;
}

.gen-list-config-save-btn {
    white-space: nowrap;
}

.gen-list-config-error {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--color-error);
}

.gen-list-config-divider {
    border: none;
    border-top: 1px solid var(--border-primary);
    margin: 16px 0;
}

.gen-list-config-empty {
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 12px 0;
    text-align: center;
}

.gen-list-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-secondary);
    gap: 10px;
}

.gen-list-config-row:last-child {
    border-bottom: none;
}

.gen-list-config-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    flex: 1;
    font-weight: 500;
}

.gen-list-config-default-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--btn-primary-text);
    background: var(--accent-primary);
    padding: 2px 8px;
    border-radius: 10px;
}

.gen-list-config-row-actions {
    display: flex;
    gap: 6px;
}

.gen-list-config-load-btn,
.gen-list-config-delete-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.btn-outline {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-color);
}

.btn-icon-only:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* ---- Tabs ---- */
.page-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.page-tabs::-webkit-scrollbar {
    display: none;
}

.page-tabs::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid var(--border-color);
}

.page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.page-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.page-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 600;
}

.page-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---- Pagination ---- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled):not(.active) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.page-btn.active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border-color: var(--accent-primary);
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-btn.nav-btn {
    padding: 0;
}

.page-btn.nav-btn svg {
    width: 18px;
    height: 18px;
}

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: var(--text-muted);
    font-size: 14px;
}

.pagination-info {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ---- Table Controls (search, entries, filters) ---- */
.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-primary);
}

.entries-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.entries-control select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-primary);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.entries-control select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.entries-control select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.search-control {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.search-control input {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    min-width: 200px;
    transition: border-color 0.2s ease;
}

.search-control input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

/* ---- Status Badges ---- */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: capitalize;
}

.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-danger {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.badge-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.badge-ui-complete {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
}

.badge-neutral {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* ---- Role pills (shared by My Organization + Promotional Users) ---- */
.simplified-role-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.simplified-role-badge.role-customer {
    background-color: var(--accent-primary-light);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .simplified-role-badge.role-customer {
    background-color: var(--accent-primary-bg-strong);
    color: var(--accent-primary-tint);
    border-color: var(--accent-primary-tint);
}

.simplified-role-badge.role-ibo {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success);
}

[data-theme="dark"] .simplified-role-badge.role-ibo {
    background-color: var(--color-success-bg-strong);
    color: var(--accent-mint);
    border-color: var(--accent-mint);
}

.simplified-role-badge.role-nonp {
    background-color: var(--text-muted-bg);
    color: var(--text-muted);
    border-color: var(--border-primary);
}

[data-theme="dark"] .simplified-role-badge.role-nonp {
    background-color: var(--text-muted-bg);
    color: var(--text-muted);
    border-color: var(--border-primary);
}

/* ---- Next Billing coverage pill (ZN-1306; shared by My Organization Table + Genealogy List) ----
   .next-billing-green / .next-billing-red are produced by
   ClientLibrary.Library.NextBillingDisplay.CoverageBadgeClass and are therefore global by
   construction — one server-driven decision, one CSS home, instead of a byte-identical copy
   per scoped component. */
.next-billing-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.next-billing-green {
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

[data-theme="dark"] .next-billing-green {
    border-color: var(--color-success-bright);
    color: var(--color-success-bright);
}

.next-billing-red {
    border: 1px solid var(--color-error);
    color: var(--color-error);
}

[data-theme="dark"] .next-billing-red {
    border-color: var(--color-error);
    color: var(--color-error-bright);
}

/* Secondary line under the Subscription cell; pairs with the row's PaymentType field (ZN-476). */
.simplified-payment-type {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary);
}

/* ---- Empty States ---- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.empty-state svg,
.empty-state .empty-icon {
    width: 64px;
    height: 64px;
    color: var(--text-muted);
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
}

/* ---- Dialogs / Modals ---- */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.dialog-box {
    background: var(--bg-modal);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.dialog-box.dialog-sm {
    max-width: 400px;
}

.dialog-box.dialog-lg {
    max-width: 720px;
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.dialog-header h2,
.dialog-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dialog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    font-size: 20px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dialog-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dialog-body {
    padding: 24px;
    color: var(--text-primary);
}

.dialog-body p {
    color: var(--text-secondary);
    margin: 0;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

/* ---- Maintenance Mode (ZN-1156) ---- */
.maintenance-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-body);
    z-index: 99999;
    padding: 2rem;
}

.maintenance-card {
    max-width: 480px;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    text-align: center;
    color: var(--text-primary);
}

.maintenance-card svg {
    color: var(--accent-purple);
    margin-bottom: 1rem;
}

.maintenance-card h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.maintenance-card p {
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
}

.maintenance-card .maintenance-sub {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 1rem;
}

/* ---- Alerts ---- */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.alert p {
    margin: 0 0 4px 0;
}

.alert p:last-child {
    margin-bottom: 0;
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-bg-strong);
}

.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error-bg-strong);
}

/* ZN-946: --color-error text on --color-error-bg measures ~4.06:1 on the dark
   theme's card surface (fails WCAG AA 4.5:1). --color-error-bright is the same
   hex in both themes, so swapping the base rule would regress light theme
   (~3.3:1 -> ~2.4:1) -- scope the brighter red to dark theme only. */
[data-theme="dark"] .alert-error {
    color: var(--color-error-bright);
}

.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-bg-strong);
}

/* ---- Form Groups ---- */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-input,
.form-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
    outline: none;
}

/* ---- Password Toggle ---- */
.password-wrapper {
    position: relative;
}

.password-wrapper .password-input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s;
}

.password-toggle:hover {
    color: var(--text-primary);
}

/* ---- Loading ---- */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    color: var(--text-secondary);
    font-size: 14px;
    gap: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Data Tables ---- */
.table-container {
    overflow-x: auto;
    margin-bottom: 8px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: var(--bg-table-header);
}

.data-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-color);
}

.data-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: var(--bg-table-row-hover);
}

.data-table .cell-id {
    font-weight: 600;
    color: var(--text-info);
}

.data-table .cell-date {
    color: var(--text-secondary);
    white-space: nowrap;
}

.data-table .cell-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---- Cards ---- */
.section-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow-card);
}

/* Shared "card with top accent stripe" used by Billing, Two-and-Free, etc.
   Pages add layout (flex direction, gap, text-align) and per-card stripe
   colors via background-image overrides. Set --card-hover-border on a card
   to make the hover border match its stripe identity. */
.card-accent {
    position: relative;
    background:
        radial-gradient(120% 120% at 0% 0%, var(--accent-primary-glow) 0%, transparent 60%),
        var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-accent::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), transparent 70%) top / 100% 3px no-repeat;
    opacity: 0.55;
    pointer-events: none;
}

.card-accent:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--card-hover-border, var(--accent-primary-hover-border));
}

.section-card .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.section-card .section-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
}

/* ---- Detail Rows (used in dialogs & profile) ---- */
.detail-row {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 140px;
    flex-shrink: 0;
}

.detail-value {
    font-size: 14px;
    color: var(--text-primary);
}

/* ---- Filter Chips ---- */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.chip:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.chip.active {
    background: var(--accent-primary-light);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.chip-remove {
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
}

/* ---- Export Button ---- */
.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-export:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 12px;
    }

    .page-header .header-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .table-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .search-control input {
        min-width: unset;
        width: 100%;
    }

    .page-tabs {
        gap: 0;
    }

    .page-tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .pagination {
        flex-wrap: wrap;
    }
}

/* ========================================
   Global Checkbox
   Replaces UA near-white fill on dark theme.
   Applies app-wide to all raw <input type="checkbox"> elements.
   MudBlazor checkboxes (.mud-checkbox) are unaffected — they render
   via a <div> overlay, not this input element.
   ======================================== */

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--border-input);
    background-color: var(--bg-input);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="checkbox"]:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

input[type="checkbox"]:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
    outline: none;
}

input[type="checkbox"]:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    background-image: var(--checkbox-check-glyph);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

input[type="checkbox"]:checked:hover {
    background-color: var(--accent-primary-hover);
}

input[type="checkbox"]:indeterminate {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    background-image: var(--checkbox-indeterminate-glyph);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type="checkbox"]:disabled:hover {
    border-color: var(--border-input);
    box-shadow: none;
}

input[type="checkbox"]:disabled:checked:hover {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Windows High Contrast / forced-colors: UA suppresses background-image
   and box-shadow, which would hide both our checkmark and our focus ring.
   Revert to native UA rendering so system colors paint the control. */
@media (forced-colors: active) {
    input[type="checkbox"] {
        -webkit-appearance: auto;
        appearance: auto;
    }

    input[type="checkbox"]:focus-visible {
        outline: 2px solid CanvasText;
        outline-offset: 2px;
    }
}