@import url('variables.css');

/* ─── Layout ─── */
.relict-page-header {
    margin-bottom: var(--space-6);
}

.relict-page-header h1,
.relict-page-header h2,
.relict-page-header-main h1,
.relict-page-header-main h2 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.relict-page-header p,
.relict-page-header-main p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    max-width: 62ch;
}

.relict-page-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.relict-page-content {
    min-width: 0;
}

/* ─── Vertical settings navigation (account + organization) ─── */
.relict-settings-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
}

.relict-settings-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.relict-settings-nav-item .material-icons {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.relict-settings-nav-item:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
}

.relict-settings-nav-item:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.relict-settings-nav-item.active {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
}

.relict-settings-nav-item.active .material-icons {
    color: var(--color-accent);
}

.relict-settings-nav-item.is-future {
    opacity: 0.55;
}

.relict-settings-nav-label {
    min-width: 0;
}

/* ─── Settings form layout (account + organization) ─── */
.relict-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.relict-settings-form-grid-span-2 {
    grid-column: 1 / -1;
}

.relict-settings-control-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: 0 var(--space-4);
}

.relict-settings-control-list .relict-switch-row {
    padding: var(--space-4) 0;
}

.relict-settings-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.relict-settings-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

.relict-settings-checkbox-row:last-child {
    border-bottom: none;
}

.relict-settings-checkbox-row.is-disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.relict-settings-checkbox-list.is-disabled {
    opacity: 0.72;
}

.relict-settings-checkbox-list.is-disabled .relict-settings-checkbox-row:not(.is-disabled) {
    pointer-events: none;
}

.relict-settings-checkbox-row-input {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--color-accent);
    cursor: inherit;
}

.relict-settings-checkbox-row-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
}

.relict-settings-checkbox-row-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-settings-checkbox-row-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.relict-settings-inline-number {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.relict-settings-inline-number input[type="number"] {
    width: 4.5rem;
}

.relict-settings-subsection + .relict-settings-subsection {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.relict-settings-subsection-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.relict-settings-subsection-header-main {
    flex: 1 1 auto;
    min-width: min(100%, 20rem);
}

.relict-settings-subsection-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.relict-settings-subsection-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-settings-subsection-description {
    margin: 0;
    max-width: 62ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.relict-settings-subsection-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.relict-settings-subsection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.relict-org-settings-unsaved {
    margin: 0;
    align-self: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-status-lockout-text);
}

.relict-org-settings-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}

.relict-org-settings-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    text-align: center;
}

.relict-org-settings-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
}

.relict-org-settings-stat-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.relict-org-settings-stat.is-warning .relict-org-settings-stat-value {
    color: var(--color-status-lockout-text);
}

.relict-org-settings-stat.is-danger .relict-org-settings-stat-value {
    color: var(--color-status-failure-text);
}

.relict-org-settings-preview {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
}

.relict-org-settings-preview-header {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.relict-org-settings-preview-body {
    margin: 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.relict-org-settings-logo-placeholder {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-tertiary);
}

.relict-org-settings-logo-placeholder .material-icons {
    font-size: 28px;
}

.relict-portal-url-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.relict-portal-url-field {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    word-break: break-all;
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .relict-org-settings-stats-grid {
        grid-template-columns: 1fr;
    }

    .relict-settings-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Settings page shell (account + organization) ─── */
.relict-settings-page-header {
    margin-bottom: var(--space-5);
    padding: var(--space-5) var(--space-6);
}

.relict-settings-page-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.relict-settings-page-header-main h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.relict-settings-page-header-main p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.relict-settings-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.relict-settings-page-header-divider {
    height: 1px;
    margin: var(--space-4) 0;
    background: var(--color-border);
}

.relict-settings-page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.relict-settings-page-nav-item {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

button.relict-settings-page-nav-item {
    appearance: none;
    margin: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.relict-settings-page-nav-item.is-future {
    opacity: 0.55;
}

.relict-settings-page-nav-item:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    text-decoration: none;
}

.relict-settings-page-nav-item.active {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

.settings-section-host {
    position: relative;
    min-height: 200px;
}

.settings-section-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-10);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.settings-section-loading.hidden {
    display: none;
}

.settings-section-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: relict-spin 0.8s linear infinite;
}

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

/* ─── Account settings profile ─── */
.relict-profile-layout {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.relict-profile-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.relict-profile-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.relict-profile-photo-preview {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
    cursor: pointer;
    background: var(--color-surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
}

.relict-profile-photo-preview .relict-avatar,
.relict-profile-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.relict-profile-photo-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    background: rgba(15, 23, 42, 0.55);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.relict-profile-photo-preview:hover .relict-profile-photo-overlay,
.relict-profile-photo-preview:focus-visible .relict-profile-photo-overlay {
    opacity: 1;
}

.relict-profile-photo-progress {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.relict-profile-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.relict-profile-photo-hint {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.45;
}

.relict-form-note {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.relict-form-note p {
    margin: 0;
}

.relict-form-note .material-icons {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--color-text-muted);
}

.relict-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.relict-action-card h4 {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-action-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
}

.relict-action-card-icon .material-icons {
    font-size: 22px;
}

.relict-action-card-summary {
    margin: 0 0 var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.relict-action-card-detail {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.relict-preference-row {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.relict-preference-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.relict-preference-row > .label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-panel.hidden {
    display: none !important;
}

.relict-content-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ─── Cards ─── */
.relict-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.relict-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.relict-card-icon {
    color: var(--color-accent);
    font-size: 20px;
}

.relict-card-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.relict-card-header--split {
    flex-wrap: wrap;
    align-items: flex-start;
}

.relict-card-header-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 auto;
}

.relict-card-description {
    margin: 0;
    max-width: 62ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.relict-card-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.relict-card-body {
    padding: var(--space-5);
}

.relict-card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.relict-table-card .relict-card-body,
.relict-table-card.relict-groups-members-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--color-surface);
}

.relict-table-card {
    border-radius: var(--radius-table-card);
    overflow: hidden;
}

.relict-table-card .relict-card-header,
.relict-groups-members-card-head {
    padding: var(--table-toolbar-spacing) var(--table-cell-padding-x);
    margin: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.relict-table-card .relict-table-toolbar,
.relict-table-card.relict-groups-members-card > .relict-table-toolbar {
    width: 100%;
    padding: var(--table-toolbar-spacing) var(--table-cell-padding-x);
    margin: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.relict-table-card .relict-advanced-filter-panel {
    padding: var(--table-toolbar-spacing) var(--table-cell-padding-x);
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}

.relict-table-card .relict-table-wrap,
.relict-table-card.relict-groups-members-card > .relict-table-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
}

.relict-table-card .relict-table-footer {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    margin: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.relict-table-card .relict-groups-members-empty,
.relict-table-card .relict-groups-members-status {
    background: var(--color-surface);
}

/* ─── Buttons (extensions) ─── */
.btn-sm {
    height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--font-size-xs);
}

.btn-lg {
    height: 48px;
    padding: 0 var(--space-5);
    font-size: var(--font-size-base);
}

.btn-icon {
    width: var(--control-height);
    padding: 0;
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid transparent;
    box-shadow: none;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

/* ─── Forms ─── */
.relict-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.relict-form-group--full {
    grid-column: 1 / -1;
}

.relict-form-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.relict-form-help {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.45;
}

.relict-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.relict-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.relict-readonly-field {
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    padding: 0 var(--control-padding-x);
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    font-size: var(--control-font-size);
}

.relict-required {
    color: var(--color-accent);
}

.relict-text-error {
    color: var(--color-error);
}

/* ─── Status chips & badges ─── */
.relict-status,
.relict-status-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.relict-status-success,
.relict-status-chip--success {
    background: var(--color-success-bg);
    color: var(--color-status-success-text);
    border: 1px solid var(--color-success-border);
}

.relict-status-failure,
.relict-status-chip--danger {
    background: var(--color-error-bg);
    color: var(--color-status-failure-text);
    border: 1px solid var(--color-error-border);
}

.relict-status-warning,
.relict-status-chip--warning {
    background: #fffbeb;
    color: var(--color-status-lockout-text);
    border: 1px solid rgba(180, 83, 9, 0.2);
}

.relict-status-info,
.relict-status-chip--info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

.relict-status-logout,
.relict-status-chip--neutral {
    background: var(--color-surface-raised);
    color: var(--color-status-logout-text);
    border: 1px solid var(--color-border);
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.relict-badge-superuser {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.relict-badge-superuser .relict-badge-superuser-icon,
.relict-badge-superuser .material-symbols-outlined,
.relict-access-level-badge .relict-access-level-badge-icon,
.relict-access-level-badge .material-icons,
.relict-access-level-badge .material-symbols-outlined {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
    color: inherit;
    flex-shrink: 0;
}

.relict-access-level-badge-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.relict-access-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.relict-access-level-badge--superuser {
    background: #fffbeb;
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.22);
}

.relict-access-level-badge--admin {
    background: var(--color-error-bg);
    color: var(--color-status-failure-text);
    border-color: var(--color-error-border);
}

.relict-access-level-badge--manager {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border-color: var(--color-info-border);
}

.relict-access-level-badge--viewer {
    background: var(--color-success-bg);
    color: var(--color-status-success-text);
    border-color: var(--color-success-border);
}

.relict-access-level-badge--none {
    background: var(--color-surface-raised);
    color: var(--color-status-logout-text);
    border-color: var(--color-border);
}

.relict-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: 700;
}

/* ─── Tables ─── */
.relict-table-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: var(--color-surface);
}

@supports not (overflow: clip) {
    .relict-table-wrap {
        overflow-x: hidden;
    }
}

.relict-card-body > .relict-table-wrap {
    margin-left: calc(-1 * var(--space-5));
    margin-right: calc(-1 * var(--space-5));
    width: calc(100% + (var(--space-5) * 2));
}

.relict-table-card .relict-card-body > .relict-table-wrap {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.relict-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: var(--table-font-size);
}

/* Global table cell baseline — no default ellipsis; truncation is opt-in only */
.relict-table-cell,
.relict-table thead th,
.relict-table tbody td {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.relict-table thead th,
.relict-table tbody td {
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    min-height: var(--table-row-min-height);
    border-bottom: 1px solid var(--color-border);
}

.relict-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    font-size: var(--table-header-font-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
    background: var(--color-surface-raised);
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    min-width: max-content;
    max-width: none;
    width: auto;
}

.relict-table tbody td {
    color: var(--color-text-primary);
}

.relict-table tbody tr:last-child td {
    border-bottom: none;
}

.relict-table tbody tr {
    transition: background-color 120ms ease;
}

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

.relict-table tbody tr.is-selected {
    background: color-mix(in srgb, var(--color-accent-glow) 55%, var(--color-surface));
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.relict-table-select-col,
.relict-table thead th.relict-table-select-col,
.relict-table tbody td.relict-table-select-col {
    width: var(--table-col-checkbox);
    max-width: var(--table-col-checkbox);
    text-align: center;
    overflow: visible;
}

.relict-table-select-col .relict-checkbox {
    display: inline-flex;
    vertical-align: middle;
}

.relict-table tbody td.relict-table-select-col,
.relict-table thead th.relict-table-select-col,
.relict-table tbody td.relict-table-actions-col,
.relict-table thead th.relict-table-actions-col {
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}

.relict-table-cell-primary {
    font-weight: 600;
}

.relict-table-cell-flex,
.relict-table-cell-primary,
.relict-table .relict-col-name-h,
.relict-table .relict-col-email-h,
.relict-table .relict-col-employer-h,
.relict-table .relict-col-address-h {
    min-width: 0;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

.relict-table-cell-flex .relict-table-link-button,
.relict-table-cell-primary .relict-table-link-button {
    display: inline;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    vertical-align: middle;
}

/* Compact columns: counts, status, actions — body cells only; headers size to label */
.relict-table-cell-compact,
.relict-table tbody td.relict-table-select-col,
.relict-table tbody td.relict-table-actions-col,
.relict-table tbody td.relict-table-status-cell,
.relict-table tbody td.relict-table-cell-center,
.relict-table tbody td:has(> .relict-table-count),
.relict-table tbody td:has(> .relict-table-cell-meta),
.relict-table tbody td:has(> .relict-count-pill),
.relict-table tbody td:has(> .relict-relationship-pill),
.relict-table tbody td:has(> .relict-count-chip),
.relict-table tbody td:has(> .relict-metric-chip),
.relict-table tbody td:has(> .relict-status),
.relict-table tbody td[data-label="Account Created"],
.relict-table tbody td[data-label="Last Login"],
.relict-table tbody td[data-label="Last Updated"],
.relict-table tbody td[data-label="Created"],
.relict-table tbody td[data-label="Date/Time"],
.relict-table tbody td[data-label="Type"],
.relict-table tbody td[data-label="Access"],
.relict-table tbody td[data-label="Status"],
.relict-table tbody td[data-label="Result"],
.relict-table tbody td[data-label="Modules"],
.relict-table tbody td[data-label="Users"],
.relict-table tbody td[data-label="Contact Linked"],
.relict-table tbody td[data-label="Linked Users"],
.relict-table tbody td[data-label="Contact Methods"],
.relict-table tbody td[data-label="Groups"],
.relict-table tbody td[data-label="Addresses"],
.relict-table tbody td[data-label="Employers"],
.relict-table tbody td[data-label="Access Profile"],
.relict-table tbody td[data-label="Organization"],
.relict-table tbody td[data-label="IP Address"] {
    overflow: visible;
    text-overflow: clip;
}

.relict-table .relict-col-flex,
.relict-table th.relict-col-flex-h,
.relict-table td.relict-col-flex-h {
    min-width: 0;
    text-align: center;
}

/* Explicit ellipsis for audit logs, long descriptions, generated system text */
.relict-table-cell-truncate {
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relict-table-cell-truncate .relict-table-link-button {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.relict-table-link,
.relict-table-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-accent);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.relict-table-link:hover,
.relict-table-link-button:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.relict-table-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--table-actions-gap);
    white-space: nowrap;
    vertical-align: middle;
}

.relict-table-actions .btn {
    flex-shrink: 0;
}

.relict-table-actions-col,
th.relict-table-actions-col,
td.relict-table-actions-col {
    text-align: center;
    overflow: visible;
}

.relict-table thead th.relict-table-actions-col {
    min-width: max-content;
    max-width: none;
    width: auto;
    padding-left: var(--table-cell-padding-x);
    padding-right: var(--table-cell-padding-x);
}

.relict-table tbody td.relict-table-actions-col {
    width: 1%;
    min-width: var(--table-col-actions-min);
    max-width: var(--table-col-actions-max);
    padding-left: var(--table-cell-padding-x-compact);
    padding-right: var(--table-cell-padding-x-compact);
}

.relict-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    box-sizing: border-box;
}

.relict-table-toolbar-primary,
.relict-table-toolbar-secondary,
.relict-table-toolbar-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.relict-table-toolbar-primary {
    flex: 1 1 280px;
}

.relict-table-toolbar-secondary {
    flex: 0 0 auto;
    margin-left: auto;
}

/* ─── Management toolbar control consistency ─── */
.relict-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    min-height: var(--control-height);
    max-height: var(--control-height);
    padding: 0 var(--space-3);
    font-size: var(--control-font-size);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    white-space: nowrap;
}

.btn.relict-toolbar-button .material-icons {
    font-size: 18px;
    line-height: 1;
}

.relict-management-toolbar .relict-table-toolbar-primary,
.relict-management-toolbar .relict-table-toolbar-secondary {
    align-items: center;
}

.relict-management-toolbar .relict-advanced-filter-toggle {
    height: var(--control-height);
    min-height: var(--control-height);
}

.relict-management-toolbar .relict-advanced-filter-toggle .material-icons {
    font-size: 18px;
    line-height: 1;
}

.relict-management-toolbar .relict-table-rows.relict-select .relict-select-trigger {
    height: var(--control-height);
    min-height: var(--control-height);
}

.relict-management-toolbar .btn.relict-toolbar-button.btn-sm,
.relict-management-toolbar .relict-advanced-filter-toggle.btn-sm {
    height: var(--control-height);
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    font-size: var(--control-font-size);
}

.btn-primary.relict-toolbar-button {
    border: none;
    color: var(--color-text-inverse);
}

.btn-primary.relict-toolbar-button .material-icons {
    color: var(--color-text-inverse);
}

.relict-table-search-wrap,
.relict-table-search {
    position: relative;
    flex: 1 1 220px;
    min-width: 0;
}

.relict-table-search-wrap .form-input,
.relict-table-search .form-input {
    width: 100%;
    height: var(--control-height);
}

.relict-table-search-wrap .material-icons,
.relict-table-search .material-icons {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.relict-table-search-wrap .form-input,
.relict-table-search .form-input {
    padding-left: 40px;
}

.relict-table-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.relict-management-section-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-management-results-scroll {
    overflow-x: clip;
    overflow-y: auto;
    max-height: min(52vh, 420px);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: var(--color-surface);
}

@supports not (overflow: clip) {
    .relict-management-results-scroll {
        overflow-x: hidden;
    }
}

.relict-management-results-scroll .relict-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.relict-table-cell-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    vertical-align: middle;
}

.relict-table-cell-stack-title {
    font-weight: 500;
    color: var(--color-text-primary);
}

.relict-table-cell-stack-meta {
    display: none;
}

.relict-table-status-cell,
.relict-table thead th.relict-table-status-cell {
    text-align: center;
    overflow: visible;
    text-overflow: unset;
    min-width: max-content;
    max-width: none;
    width: auto;
}

.relict-table tbody td.relict-table-status-cell {
    width: 1%;
    min-width: var(--table-col-status-min);
    max-width: var(--table-col-status-max);
    padding-left: var(--table-cell-padding-x-compact);
    padding-right: var(--table-cell-padding-x-compact);
}

.relict-table-status-stack {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    vertical-align: middle;
}

.relict-table-status-stack .relict-status {
    flex-shrink: 0;
}

.relict-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.relict-table-pagination,
.relict-table-footer .relict-table-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.relict-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.relict-pagination-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.relict-pagination-link.is-active,
.relict-table-pagination .active {
    background: var(--color-table-pagination-active-bg);
    border-color: var(--color-table-pagination-active-bg);
    color: var(--color-table-pagination-active-text);
}

/* ─── Bulk selection bar ─── */
.relict-bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
    background: color-mix(in srgb, var(--color-accent-glow) 65%, var(--color-surface));
    border-bottom: 1px solid var(--color-border);
}

.relict-bulk-bar.is-visible {
    display: flex;
}

.relict-bulk-bar-count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-bulk-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ─── Checkbox ─── */
.relict-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.relict-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.relict-checkbox-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.relict-checkbox-icon {
    font-size: 14px !important;
    color: var(--color-text-inverse);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.relict-checkbox-enhanced.is-checked .relict-checkbox-box,
.relict-checkbox-enhanced.is-indeterminate .relict-checkbox-box {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.relict-checkbox-enhanced.is-checked .relict-checkbox-icon,
.relict-checkbox-enhanced.is-indeterminate .relict-checkbox-icon {
    opacity: 1;
    transform: scale(1);
}

.relict-checkbox-box:hover {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.relict-checkbox-box:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.relict-checkbox-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.relict-checkbox:has(.relict-checkbox-input:disabled) {
    cursor: not-allowed;
    opacity: 0.58;
}

.relict-checkbox:has(.relict-checkbox-input:disabled) .relict-checkbox-box:hover {
    border-color: var(--color-border);
}

/* ─── Empty states ─── */
.relict-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-10) var(--table-cell-padding-x);
    text-align: center;
    background: var(--color-surface);
}

.relict-table-wrap > .relict-empty-state,
.relict-table-wrap > .relict-empty-state-actions {
    width: 100%;
    background: var(--color-surface);
}

.relict-table-wrap > .relict-empty-state-actions {
    padding: 0 var(--table-cell-padding-x) var(--space-8);
    margin-top: calc(-1 * var(--space-4));
}

.relict-table-card > .relict-groups-members-empty {
    width: 100%;
    border-top: 1px solid var(--color-border);
}

.relict-empty-state-icon {
    font-size: 40px;
    color: var(--color-text-muted);
}

.relict-empty-state-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.relict-empty-state-description {
    margin: 0;
    max-width: 42ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.relict-empty-state-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* ─── Dialogs / modals ─── */
.relict-dialog,
.relict-org-dialog {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-primary);
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease, overlay 180ms ease allow-discrete;
}

.relict-dialog[open],
.relict-org-dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@starting-style {
    .relict-dialog[open],
    .relict-org-dialog[open] {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}

.relict-org-dialog-wide {
    width: min(var(--modal-shell-width, 1100px), var(--modal-shell-max-width, 95vw));
}

.relict-modal-shell.relict-dialog,
.relict-modal-shell.relict-org-dialog {
    width: min(var(--modal-shell-width), var(--modal-shell-max-width));
    height: min(var(--modal-shell-height), calc(100vh - 48px));
    min-height: min(var(--modal-shell-min-height), calc(100vh - 48px));
    max-height: min(var(--modal-shell-max-height), calc(100vh - 48px));
    border-radius: var(--modal-shell-radius);
    overflow: hidden;
}

.relict-modal-shell .relict-org-dialog-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: inherit;
    min-height: 0;
    overflow: hidden;
}

.relict-modal-shell .relict-org-dialog-hero-header,
.relict-modal-shell > .relict-org-dialog-form > .relict-org-dialog-hero-header {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    height: var(--modal-hero-height);
    min-height: var(--modal-hero-height);
    max-height: var(--modal-hero-height);
    padding: 0 var(--modal-body-padding);
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-accent-glow) 8%, var(--color-surface)) 0%,
        var(--color-surface) 100%
    );
}

.relict-modal-shell .relict-modal-hero,
.relict-modal-shell .relict-org-dialog-hero {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    text-align: left;
}

.relict-modal-shell .relict-modal-hero-content,
.relict-modal-shell .relict-org-dialog-hero-copy {
    flex: 1 1 auto;
    align-items: flex-start;
    text-align: left;
}

.relict-modal-shell .relict-org-dialog-chips {
    justify-content: flex-start;
}

.relict-modal-shell .relict-modal-hero-actions {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: var(--space-3);
}

.relict-modal-shell .relict-org-dialog-hero-header > .relict-org-dialog-close,
.relict-modal-shell .relict-org-dialog-hero-header > .btn-icon {
    position: static;
    flex-shrink: 0;
}

.relict-modal-shell .relict-modal-tabs,
.relict-modal-shell .relict-dialog-tabs {
    flex-shrink: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    height: var(--modal-tabs-height);
    min-height: var(--modal-tabs-height);
    max-height: var(--modal-tabs-height);
    padding: 0 var(--modal-body-padding);
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.relict-modal-shell .relict-modal-tabs--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.relict-modal-shell .relict-modal-tabs--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.relict-modal-shell .relict-modal-tabs--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.relict-modal-shell .relict-dialog-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-bottom: -1px;
    padding: 0 var(--space-2);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.relict-modal-shell .relict-modal-body,
.relict-modal-shell .relict-org-dialog-body.relict-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--modal-body-padding);
    background: color-mix(in srgb, var(--color-surface-raised) 28%, var(--color-surface));
}

.relict-modal-shell .relict-modal-footer,
.relict-modal-shell .relict-org-dialog-actions.relict-modal-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: var(--modal-footer-height);
    min-height: var(--modal-footer-height);
    padding: 0 var(--modal-body-padding);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    position: static;
    margin-top: 0;
}

.relict-modal-footer-start {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.relict-modal-unsaved-indicator {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-status-lockout-text);
}

.relict-modal-footer-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-left: auto;
}

.relict-modal-section-heading {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

.relict-modal-section-heading:not(:first-child) {
    margin-top: var(--space-5);
}

.relict-dialog::backdrop,
.relict-org-dialog::backdrop {
    background: var(--color-modal-backdrop);
}

.relict-org-dialog-form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.relict-org-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.relict-org-dialog-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.relict-org-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

/* ─── Shared modal framework ─── */
.relict-modal-hero,
.relict-org-dialog-hero {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.relict-modal-hero-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.relict-modal-hero-avatar .relict-avatar--lg,
.relict-user-dialog-avatar.relict-avatar--lg,
.relict-contact-dialog-avatar.relict-avatar--lg,
.relict-contact-dialog-vcard-qr.relict-avatar--lg {
    width: 80px;
    height: 80px;
}

.relict-modal-hero-content,
.relict-org-dialog-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.relict-modal-body,
.relict-org-dialog-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-surface-raised) 35%, var(--color-surface));
}

.relict-modal-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.relict-dialog-tab-panel + .relict-dialog-tab-panel {
    margin-top: 0;
}

.relict-modal-footer,
.relict-org-dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
}

.relict-modal-tabs,
.relict-dialog-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    min-height: 0;
    overflow-x: auto;
}

.relict-access-profile-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
}

.relict-access-profile-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.relict-access-profile-card-name {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text-primary);
}

.relict-access-profile-card-description {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.relict-access-profile-card-meta {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.relict-dialog-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.relict-dialog-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-dialog-body {
    padding: var(--space-5);
}

.relict-dialog-footer {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-raised);
}

.relict-confirm-dialog {
    width: min(440px, calc(100vw - 32px));
}

.relict-confirm-message {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.relict-confirm-detail {
    margin: var(--space-3) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

.relict-password-confirm-dialog .relict-password-field {
    margin: var(--space-4) 0 0;
}

.relict-dialog footer .btn:focus-visible,
.relict-confirm-dialog .btn:focus-visible,
.relict-org-dialog footer .btn:focus-visible,
.relict-modal-footer .btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-glow) 65%, transparent);
}

.relict-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface-raised);
    flex-shrink: 0;
}

.relict-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.relict-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-muted);
}

.relict-avatar--header {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
}

.relict-avatar--dropdown {
    width: 40px;
    height: 40px;
}

.relict-avatar--lg {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
}

.relict-avatar--xl {
    width: 112px;
    height: 112px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.relict-avatar--empty .relict-avatar-fallback.material-icons {
    font-size: 42px;
}

.relict-avatar--xl.relict-avatar--empty .relict-avatar-fallback.material-icons {
    font-size: 56px;
}

.relict-dialog-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 7px 10px;
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: 0;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.relict-dialog-tab:hover {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-accent-glow) 8%, transparent);
}

.relict-dialog-tab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.relict-dialog-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: transparent;
}

.relict-modal-shell .relict-dialog-tab:hover {
    color: var(--color-text-primary);
    background: transparent;
}

.relict-modal-shell .relict-dialog-tab.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    background: transparent;
}

.relict-dialog-tab-panel {
    display: none;
}

.relict-dialog-tab-panel.active {
    display: block;
}

.relict-advanced-filter-dialog {
    width: min(720px, calc(100vw - 32px));
}

/* ─── Advanced filter (shared filter chip bar) ─── */
.relict-advanced-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.relict-advanced-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 10px;
    font-weight: 700;
}

.relict-advanced-filter-badge.hidden {
    display: none;
}

.relict-advanced-filter-panel,
.relict-assignment-list-filters {
    display: none;
    margin-top: var(--space-3);
}

.relict-advanced-filter-panel.is-open,
.relict-assignment-list-filters.is-open,
.relict-assignment-list-filters.is-expanded {
    display: block;
}

.relict-advanced-filter-panel-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.relict-filter-bar,
.relict-advanced-filter-rules {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    min-width: 0;
}

.relict-filter-bar-empty,
.relict-filter-grid-empty,
.relict-advanced-filter-rules > .relict-form-help {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.relict-filter-row,
.relict-filter-grid-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
}

.relict-filter-row-control {
    min-width: 0;
}

.relict-filter-row-field {
    flex: 0 1 11rem;
    min-width: 8rem;
}

.relict-filter-row-operator {
    flex: 0 1 10rem;
    min-width: 7.5rem;
}

.relict-filter-row-value {
    flex: 1 1 auto;
    min-width: 0;
}

.relict-filter-row-control .relict-select,
.relict-filter-row-control .form-input {
    width: 100%;
    min-width: 0;
}

.relict-filter-row-remove {
    flex-shrink: 0;
}

.relict-advanced-filter-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.relict-advanced-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-left: auto;
}

.relict-advanced-filter-toggle.is-active {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.relict-table-card.has-advanced-filter-open .relict-advanced-filter-panel,
[data-af-container].has-advanced-filter-open .relict-advanced-filter-panel {
    display: block;
}

@media (max-width: 640px) {
    .relict-advanced-filter-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .relict-advanced-filter-actions {
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }

    .relict-advanced-filter-actions .btn {
        flex: 1 1 auto;
    }

    .relict-filter-row,
    .relict-filter-grid-item {
        flex-wrap: wrap;
    }

    .relict-filter-row-field,
    .relict-filter-row-operator {
        flex: 1 1 calc(50% - var(--space-2));
        min-width: 0;
    }

    .relict-filter-row-value {
        flex: 1 1 100%;
    }
}

/* ─── Info rows ─── */
.relict-info-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.relict-info-label {
    color: var(--color-text-secondary);
}

.relict-info-value {
    font-weight: 600;
    text-align: right;
}

.hidden {
    display: none !important;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.92em;
}

/* ─── Settings card alias ─── */
.relict-settings-card {
    display: flex;
    flex-direction: column;
}

.relict-org-settings-card-description {
    margin: var(--space-1) 0 0;
}

/* ─── Segmented control (shared tab-style toggles) ─── */
.relict-segmented-control--buttons {
    display: flex;
    width: 100%;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    gap: 4px;
}

.relict-segmented-control--buttons .relict-segmented-button {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.relict-segmented-control--buttons .relict-segmented-button:hover {
    color: var(--color-text-primary);
}

.relict-segmented-control--buttons .relict-segmented-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.relict-segmented-control--buttons .relict-segmented-button.active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-sm);
}

.relict-segmented-control--accent.relict-segmented-control--buttons .relict-segmented-button.active {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    box-shadow: none;
}

/* ─── Branding settings (organization settings) ─── */
.relict-brand-asset-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.relict-brand-asset-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 8rem;
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    text-align: center;
}

.relict-brand-asset-preview img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.relict-brand-asset-preview .material-icons {
    font-size: 32px;
}

.relict-brand-asset-mode {
    margin-top: 0;
}

.relict-brand-asset-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: 0;
}

.relict-brand-logo-launcher-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
}

.relict-brand-logo-launcher-preview,
.login-brand-settings-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 16rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-sizing: border-box;
}

.relict-brand-logo-launcher-preview {
    flex: 0 0 auto;
    width: min(100%, 16rem);
}

.login-brand-settings-preview .login-logo-frame {
    margin-bottom: 0;
}

.relict-brand-logo-launcher-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: min(28rem, 100%);
    flex: 1 1 auto;
}

.relict-brand-accessibility-panel {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
}

.relict-brand-accessibility-header {
    margin-bottom: var(--space-3);
}

.relict-brand-accessibility-list {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.relict-brand-accessibility-item + .relict-brand-accessibility-item {
    margin-top: var(--space-2);
}

.relict-color-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.relict-color-picker-swatch-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.relict-color-picker-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.relict-color-picker-swatch {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--swatch-color, var(--color-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.relict-color-picker-hex {
    min-width: 8rem;
    flex: 1 1 8rem;
}

.relict-color-picker-rgb {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.relict-brand-logo-presets {
    display: none;
}

.relict-brand-logo-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.relict-brand-logo-compare-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.relict-brand-logo-context-previews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.relict-brand-logo-context-preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.relict-brand-logo-context-preview .header-brand--workspace {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
}

.relict-brand-logo-editor-footer.relict-dialog-footer {
    justify-content: space-between;
}

.relict-dialog-footer-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.relict-brand-logo-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.relict-brand-logo-range {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.relict-brand-logo-range output {
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    font-weight: 600;
}

.relict-brand-logo-control-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.relict-brand-logo-live-card {
    display: none;
}

.relict-brand-logo-live-preview {
    display: none;
}

.relict-brand-logo-editor-main {
    display: block;
}

.relict-brand-logo-controls {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
    .relict-card-header--split {
        flex-direction: column;
        align-items: stretch;
    }

    .relict-card-header-actions {
        width: 100%;
    }

    .relict-card-header-actions .btn {
        flex: 1 1 auto;
    }

    .relict-brand-logo-compare,
    .relict-brand-logo-context-previews,
    .relict-brand-logo-control-grid {
        grid-template-columns: 1fr;
    }

    .relict-brand-logo-editor-footer.relict-dialog-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .relict-brand-logo-editor-footer .relict-dialog-footer-group {
        justify-content: stretch;
    }

    .relict-brand-logo-editor-footer .relict-dialog-footer-group .btn {
        flex: 1 1 auto;
    }
}

/* ─── Table column width utilities (priority-driven auto layout) ─── */

/* Low priority — shrink first */
.relict-table col.relict-col-checkbox,
.relict-table col.relict-col-select {
    width: var(--table-col-checkbox);
}

.relict-table col.relict-col-status {
    width: 1%;
}

.relict-table col.relict-col-count,
.relict-table col.relict-col-compact {
    width: 1%;
}

.relict-table col.relict-col-actions {
    width: 1%;
}

/* Medium priority */
.relict-table col.relict-col-date,
.relict-table col.relict-col-datetime,
.relict-table col.relict-col-medium {
    width: 1%;
}

/* High priority — absorb remaining width */
.relict-table col.relict-col-name,
.relict-table col.relict-col-email,
.relict-table col.relict-col-flex,
.relict-table col.relict-col-employer,
.relict-table col.relict-col-address {
    width: auto;
}

.relict-table .relict-col-name,
.relict-table th.relict-col-name-h,
.relict-table td.relict-col-name-h {
    min-width: var(--table-col-name-min);
    text-align: center;
}

.relict-table .relict-col-email,
.relict-table th.relict-col-email-h,
.relict-table td.relict-col-email-h {
    min-width: var(--table-col-email-min);
    text-align: center;
}

.relict-table .relict-col-medium,
.relict-table th.relict-col-medium-h,
.relict-table td.relict-col-medium-h,
.relict-table tbody td[data-label="Username"] {
    width: 1%;
    min-width: var(--table-col-medium-min);
    max-width: none;
    text-align: center;
}

.relict-table thead th[data-label="Username"] {
    min-width: max-content;
    width: auto;
}

.relict-table .relict-col-employer,
.relict-table th.relict-col-employer-h,
.relict-table td.relict-col-employer-h {
    min-width: var(--table-col-employer-min);
    text-align: center;
}

.relict-table .relict-col-address,
.relict-table th.relict-col-address-h,
.relict-table td.relict-col-address-h {
    min-width: var(--table-col-address-min);
    text-align: center;
}

.relict-table .relict-col-status,
.relict-table th.relict-col-status-h,
.relict-table td.relict-col-status-h,
.relict-table tbody td.relict-table-status-cell {
    width: 1%;
    min-width: var(--table-col-status-min);
    max-width: var(--table-col-status-max);
    padding-left: var(--table-cell-padding-x-compact);
    padding-right: var(--table-cell-padding-x-compact);
    text-align: center;
    overflow: visible;
}

.relict-table thead th.relict-table-status-cell,
.relict-table thead th.relict-col-status-h {
    min-width: max-content;
    max-width: none;
    width: auto;
    padding-left: var(--table-cell-padding-x);
    padding-right: var(--table-cell-padding-x);
}

.relict-table .relict-col-count,
.relict-table th.relict-col-count-h,
.relict-table td.relict-col-count-h,
.relict-table tbody td.relict-table-cell-center:not(.relict-table-actions-col):not(.relict-table-select-col),
.relict-table tbody td.relict-table-cell-compact {
    width: 1%;
    min-width: var(--table-col-count-min);
    max-width: var(--table-col-count-max);
    padding-left: var(--table-cell-padding-x-compact);
    padding-right: var(--table-cell-padding-x-compact);
    text-align: center;
    overflow: visible;
}

.relict-table thead th.relict-table-cell-center:not(.relict-table-actions-col):not(.relict-table-select-col),
.relict-table thead th.relict-col-count-h,
.relict-table thead th.relict-table-cell-compact {
    min-width: max-content;
    max-width: none;
    width: auto;
    padding-left: var(--table-cell-padding-x);
    padding-right: var(--table-cell-padding-x);
}

.relict-table .relict-col-date,
.relict-table th.relict-col-date-h,
.relict-table td.relict-col-date-h,
.relict-table tbody td[data-label="Account Created"],
.relict-table tbody td[data-label="Last Login"],
.relict-table tbody td[data-label="Last Updated"],
.relict-table tbody td[data-label="Created"],
.relict-table tbody td[data-label="Date/Time"] {
    width: 1%;
    min-width: var(--table-col-date-min);
    max-width: var(--table-col-date-max);
    text-align: center;
}

.relict-table thead th.relict-col-date-h,
.relict-table thead th.relict-col-datetime-h {
    min-width: max-content;
    max-width: none;
    width: auto;
}

.relict-table .relict-col-actions,
.relict-table th.relict-col-actions-h,
.relict-table td.relict-col-actions-h {
    text-align: center;
    overflow: visible;
}

.relict-table tbody td.relict-col-actions-h,
.relict-table tbody td.relict-table-actions-col {
    width: 1%;
    min-width: var(--table-col-actions-min);
    max-width: var(--table-col-actions-max);
    padding-left: var(--table-cell-padding-x-compact);
    padding-right: var(--table-cell-padding-x-compact);
}

.relict-table thead th.relict-col-actions-h,
.relict-table thead th.relict-table-actions-col {
    min-width: max-content;
    max-width: none;
    width: auto;
    padding-left: var(--table-cell-padding-x);
    padding-right: var(--table-cell-padding-x);
}

.relict-table .relict-col-checkbox,
.relict-table th.relict-col-checkbox-h,
.relict-table td.relict-col-checkbox-h,
.relict-table tbody td.relict-table-select-col {
    width: var(--table-col-checkbox);
    max-width: var(--table-col-checkbox);
    padding-left: var(--table-cell-padding-x-compact);
    padding-right: var(--table-cell-padding-x-compact);
    text-align: center;
    overflow: visible;
}

.relict-table thead th.relict-table-select-col,
.relict-table thead th.relict-col-checkbox-h {
    width: var(--table-col-checkbox);
    min-width: var(--table-col-checkbox);
    max-width: var(--table-col-checkbox);
    padding-left: var(--table-cell-padding-x-compact);
    padding-right: var(--table-cell-padding-x-compact);
}

.relict-table .relict-status,
.relict-table .relict-status-chip {
    padding: 3px 8px;
    gap: 4px;
}

.relict-table .relict-status {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.relict-table .relict-count-pill,
.relict-table .relict-relationship-pill,
.relict-table .relict-count-chip,
.relict-table .relict-metric-chip {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
}

/* ─── Table cell utilities ─── */
.relict-table-cell-center {
    text-align: center;
}

.relict-table thead th.relict-table-cell-center {
    text-align: center;
    min-width: max-content;
    max-width: none;
    width: auto;
}

/* Optional mobile header abbreviations — opt-in via markup */
.relict-table-header-label--short {
    display: none;
}

@media (max-width: 768px) {
    .relict-table thead th:has(.relict-table-header-label--short) .relict-table-header-label--full {
        display: none;
    }

    .relict-table thead th:has(.relict-table-header-label--short) .relict-table-header-label--short {
        display: inline;
    }
}

.relict-table-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
}

.relict-table-sort-link:hover {
    color: var(--color-accent);
}

.relict-table-sort-icon {
    font-size: 14px;
    line-height: 1;
}

.relict-table-cell-meta {
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.relict-count-pill,
.relict-relationship-pill,
.relict-count-chip,
.relict-metric-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--relationship-pill-min-width);
    height: var(--relationship-pill-height);
    padding: 0 var(--relationship-pill-padding-x);
    border-radius: var(--radius-pill);
    background: var(--relationship-pill-bg);
    border: 1px solid var(--relationship-pill-border);
    color: var(--relationship-pill-text);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    transition:
        background var(--relationship-pill-transition),
        border-color var(--relationship-pill-transition),
        box-shadow var(--relationship-pill-transition),
        color var(--relationship-pill-transition);
}

.relict-count-pill:hover,
.relict-relationship-pill:hover,
button.relict-count-pill:hover,
button.relict-relationship-pill:hover {
    background: var(--relationship-pill-hover-bg);
    border-color: var(--relationship-pill-hover-border);
    box-shadow: var(--relationship-pill-hover-shadow);
}

.relict-table-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--relationship-pill-min-width);
    height: var(--relationship-pill-height);
    padding: 0 var(--relationship-pill-padding-x);
    border-radius: var(--radius-pill);
    background: var(--relationship-pill-bg);
    border: 1px solid var(--relationship-pill-border);
    color: var(--relationship-pill-text);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    overflow: visible;
    transition:
        background var(--relationship-pill-transition),
        border-color var(--relationship-pill-transition),
        box-shadow var(--relationship-pill-transition),
        color var(--relationship-pill-transition);
}

.relict-table-count:hover {
    background: var(--relationship-pill-hover-bg);
    border-color: var(--relationship-pill-hover-border);
    box-shadow: var(--relationship-pill-hover-shadow);
}

button.relict-table-count-chip,
button.relict-count-pill,
button.relict-relationship-pill {
    cursor: pointer;
    font: inherit;
}

button.relict-table-count-chip:hover,
button.relict-count-pill:hover,
button.relict-relationship-pill:hover {
    background: var(--relationship-pill-hover-bg);
    border-color: var(--relationship-pill-hover-border);
    box-shadow: var(--relationship-pill-hover-shadow);
}

.relict-table-footer-summary {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}


/* ─── Switch rows ─── */
.relict-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

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

.relict-switch-row.is-disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.relict-switch-row-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.relict-switch-row-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.relict-switch-row-description {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.relict-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
}

.relict-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.relict-switch-slider,
.relict-switch-track {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--toggle-track-off);
    transition: background var(--transition-fast);
}

.relict-switch-slider::before,
.relict-switch-track::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--toggle-thumb);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
}

.relict-switch input:checked + .relict-switch-slider,
.relict-switch input:checked + .relict-switch-track {
    background: var(--toggle-track-on);
}

.relict-switch input:checked + .relict-switch-slider::before,
.relict-switch input:checked + .relict-switch-track::before {
    transform: translateX(20px);
}

.relict-switch input:disabled + .relict-switch-slider,
.relict-switch input:disabled + .relict-switch-track {
    opacity: 0.55;
}

.relict-switch-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height);
}

.relict-switch-state {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    min-width: 2.5rem;
}

/* ─── Custom select ─── */
.relict-select {
    position: relative;
    min-width: 140px;
}

.relict-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-height);
    padding: 0 var(--control-padding-x);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--control-font-size);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.relict-select-trigger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.relict-select.is-open .relict-select-trigger,
.relict-select-trigger:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
    outline: none;
}

.relict-select-trigger:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.relict-select-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relict-select-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.relict-select-trigger .material-icons:last-child {
    font-size: 20px;
    color: var(--color-text-muted);
}

.relict-select-menu {
    position: absolute;
    z-index: var(--z-dropdown);
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.relict-select-menu--portaled {
    top: auto;
    left: auto;
    right: auto;
    z-index: var(--z-dropdown);
}

#relict-overlay-root {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay-root);
    pointer-events: none;
}

#relict-overlay-root > .relict-select-menu--portaled {
    pointer-events: auto;
}

.relict-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.relict-select-search .relict-select-search-field {
    flex: none;
    width: 100%;
    min-width: 0;
}

.relict-select-search-input {
    width: 100%;
}

.relict-select-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
}

.relict-select-option[hidden],
.relict-select-option.is-filtered-out {
    display: none !important;
}

.relict-select-option:hover,
.relict-select-option:focus-visible {
    background: var(--color-surface-raised);
    outline: none;
}

.relict-select-option.is-selected {
    background: color-mix(in srgb, var(--color-accent-glow) 65%, var(--color-surface));
    color: var(--color-accent);
    font-weight: 600;
}

.relict-select-option-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.relict-select-option-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.3;
}

.relict-table-filter .relict-select {
    min-width: 160px;
}

.relict-table-rows.relict-select {
    min-width: 120px;
}

@media (max-width: 1200px) {
    :root {
        --table-font-size: 13px;
        --table-cell-padding-x: 14px;
        --table-cell-padding-x-compact: 8px;
        --table-cell-padding-y: 10px;
        --table-row-min-height: 44px;
        --table-col-date-min: 108px;
        --table-col-medium-min: 88px;
        --table-col-count-min: 40px;
        --table-col-count-max: 52px;
        --table-col-checkbox: 40px;
    }
}

@media (max-width: 992px) {
    :root {
        --table-font-size: 12.5px;
        --table-cell-padding-x: 12px;
        --table-cell-padding-x-compact: 6px;
        --table-col-date-min: 96px;
        --table-col-medium-min: 80px;
        --table-col-count-min: 36px;
        --table-col-count-max: 48px;
        --table-col-checkbox: 36px;
    }

    /* Last resort: email may ellipsize before names or counts */
    .relict-table td.relict-col-email-h:not(.relict-table-cell-truncate),
    .relict-table tbody td[data-label="Email"]:not(.relict-table-cell-truncate) {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 768px) {
    :root {
        --table-font-size: 12px;
        --table-row-min-height: 42px;
        --table-col-date-min: 88px;
        --table-col-medium-min: 72px;
        --table-col-count-min: 32px;
        --table-col-count-max: 44px;
    }

    .relict-table-wrap {
        overflow-x: auto;
    }
}

@media (max-width: 900px) {
    .relict-page-layout {
        grid-template-columns: 1fr;
    }

    .relict-form-grid {
        grid-template-columns: 1fr;
    }

    .relict-profile-layout {
        grid-template-columns: 1fr;
    }

    .relict-action-grid {
        grid-template-columns: 1fr;
    }

    .relict-preference-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .relict-table-toolbar {
        align-items: stretch;
    }

    .relict-table-toolbar-primary {
        flex: 1 1 100%;
    }

    .relict-table-toolbar-secondary {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* ─── Global toast notifications ─── */
.relict-toast-stack {
    position: fixed;
    inset: auto 20px auto auto;
    top: 20px;
    right: 20px;
    left: auto;
    bottom: auto;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(420px, calc(100vw - 40px));
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
    pointer-events: none;
}

.relict-toast-stack:popover-open {
    position: fixed;
    inset: auto 20px auto auto;
    top: 20px;
    right: 20px;
    left: auto;
    bottom: auto;
}

.relict-toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow:
        0 10px 24px color-mix(in srgb, var(--color-text-primary) 12%, transparent),
        0 2px 6px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
    color: var(--color-text-primary);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: auto;
}

.relict-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.relict-toast-icon {
    flex-shrink: 0;
    align-self: center;
    font-size: 20px;
    line-height: 1;
}

.relict-toast-content {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.relict-toast-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.35;
}

.relict-toast-message {
    margin-top: 2px;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.relict-toast-title:only-child {
    margin: 0;
}

.relict-toast-dismiss,
.relict-toast-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.relict-toast-dismiss:hover,
.relict-toast-close:hover {
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}

.relict-toast-dismiss .material-icons,
.relict-toast-close .material-icons {
    font-size: 18px;
}

.relict-toast--success {
    border-color: color-mix(in srgb, var(--color-success, #16a34a) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-success, #16a34a) 6%, var(--color-surface));
}

.relict-toast--success .relict-toast-icon {
    color: var(--color-success, #16a34a);
}

.relict-toast--error {
    border-color: color-mix(in srgb, var(--color-danger, #dc2626) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger, #dc2626) 6%, var(--color-surface));
}

.relict-toast--error .relict-toast-icon {
    color: var(--color-danger, #dc2626);
}

.relict-toast--warning {
    border-color: color-mix(in srgb, var(--color-warning, #d97706) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-warning, #d97706) 6%, var(--color-surface));
}

.relict-toast--warning .relict-toast-icon {
    color: var(--color-warning, #d97706);
}

.relict-toast--info {
    border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-accent-glow) 35%, var(--color-surface));
}

.relict-toast--info .relict-toast-icon {
    color: var(--color-accent);
}

@media (max-width: 640px) {
    .relict-toast-stack {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }

    .relict-org-dialog,
    .relict-org-dialog-wide {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }

    .relict-table thead {
        display: none;
    }

    .relict-table tbody tr {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-4);
        border-bottom: 1px solid var(--color-border);
    }

    .relict-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 0;
        border: none;
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .relict-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
    }

    .relict-table tbody td.relict-table-actions-col {
        align-items: center;
    }

    .relict-table tbody td.relict-table-actions-col::before {
        flex-shrink: 0;
    }

    .relict-table tbody td.relict-table-actions-col .relict-table-actions {
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
}