/**
 * Tenant Management Styles
 *
 * Styles for the tenant admin section (ported from tenant-admin/styles.css).
 * Uses Nodey OKO Design System tokens.
 */

/* ===== Admin Banner (top of tenant detail) ===== */

.admin-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-lg);
}

.admin-banner__avatar {
    flex-shrink: 0;
    color: var(--text-muted);
}

.admin-banner__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-banner__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
}

.admin-banner__name {
    font-size: var(--font-size-body-lg, 16px);
    font-weight: 600;
    color: var(--text-primary);
}

.admin-banner__id {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-body-xs);
    color: var(--text-muted);
}

.admin-banner__id code {
    font-size: 11px;
    background: var(--bg-secondary);
    padding: 1px 5px;
    border-radius: var(--border-radius-sm);
}

.admin-banner__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.admin-banner__copy:hover {
    opacity: 1;
    color: var(--accent-main);
}

/* ===== Badges (tenant-specific statuses) ===== */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--font-size-ui-sm);
    font-weight: 600;
}

.badge-active { background: rgba(34, 197, 94, 0.15); color: var(--accent-confirm); }
.badge-confirmed { background: rgba(34, 197, 94, 0.15); color: var(--accent-confirm); }
.badge-pending { background: rgba(245, 158, 11, 0.15); color: var(--accent-caution); }
.badge-locked { background: rgba(239, 68, 68, 0.15); color: var(--accent-danger); }
.badge-deleted { background: rgba(115, 115, 115, 0.15); color: var(--text-muted); text-decoration: line-through; }
.badge-guest { background: rgba(115, 115, 115, 0.15); color: var(--color-queued); }
.badge-insync { background: rgba(34, 197, 94, 0.15); color: var(--accent-confirm); }
.badge-verified { background: rgba(34, 197, 94, 0.15); color: var(--accent-confirm); }
.badge-error { background: rgba(239, 68, 68, 0.15); color: var(--accent-danger); }

/* ===== Detail Tabs ===== */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--spacing-lg);
}

.tab {
    padding: var(--spacing-sm) var(--spacing-lg);
    cursor: pointer;
    font-size: var(--font-size-body-xs);
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all var(--transition-fast);
}

.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent-main); border-bottom-color: var(--accent-main); }

/* ===== Toolbar (search + actions) ===== */
.toolbar {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    align-items: center;
}

.toolbar input[type="text"],
.toolbar input[type="search"] {
    max-width: 300px;
}

.toolbar .spacer { flex: 1; }

/* ===== Pagination ===== */
.pagination {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: center;
    margin-top: var(--spacing-md);
}

.pagination span {
    font-size: var(--font-size-body-xs);
    color: var(--text-secondary);
}

/* ===== Clickable Rows ===== */
.clickable-row {
    cursor: pointer;
}

/* ===== Back Link ===== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--font-size-body-xs);
    margin-bottom: var(--spacing-md);
    cursor: pointer;
}

.back-link:hover { color: var(--text-primary); }

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.modal {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: var(--font-size-body-sm);
    font-weight: 600;
}

.modal-body { padding: var(--spacing-lg); }

.modal-footer {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-top: 1px solid var(--border-default);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.modal--wide {
    width: 640px;
}

/* ===== Confirm Dialog ===== */
.confirm-message {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-body-sm);
}

/* ===== Loading State ===== */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

/* ===== Checkbox ===== */
input[type="checkbox"] {
    width: auto;
    accent-color: var(--accent-main);
}

/* ===== Code / Monospace ===== */
code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    background-color: var(--bg-muted);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
}

/* ===== Allow-List Tags ===== */
.al-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
}

.al-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-body-xs);
    font-family: var(--font-family-mono);
    color: var(--text-primary);
}

.al-tag .remove-tag {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-body-sm);
    padding: 0;
    line-height: 1;
}

.al-tag .remove-tag:hover { color: var(--accent-danger); }

/* Allowlist user status indicators */
.al-tag__status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    cursor: default;
}

.al-status--confirmed { background: var(--color-success-500, #22c55e); }
.al-status--pending   { background: var(--color-warning-500, #f59e0b); }
.al-status--locked    { background: var(--color-destructive-500, #ef4444); }
.al-status--na        { background: var(--text-muted); opacity: 0.4; }

/* ===== Secret Rows ===== */
.secret-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-fast);
}

.secret-row:last-child { border-bottom: none; }
.secret-row:hover { background-color: var(--bg-muted); }

/* Set vs unset visual distinction */
.secret-row--unset {
    opacity: 0.7;
}

.secret-row--unset:hover {
    opacity: 1;
}

/* Left side: status icon + label text */
.secret-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 240px;
    flex-shrink: 0;
}

.secret-label-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Right side: value + actions */
.secret-controls {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    min-width: 0;
}

.secret-value-group {
    flex: 1;
    min-width: 0;
}

.secret-value-group input {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    background-color: var(--bg-muted);
    width: 100%;
}

.secret-placeholder {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    color: var(--text-muted);
    letter-spacing: 2px;
}

.secret-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

/* JSON mode: stack vertically */
.secret-row.json-mode {
    flex-direction: column;
    align-items: stretch;
}

.secret-row.json-mode .secret-controls {
    flex-direction: column;
    align-items: stretch;
}

.secret-row.json-mode .secret-actions {
    justify-content: flex-end;
}

/* Legacy secret-key / secret-value for freeform tab */
.secret-key {
    min-width: 180px;
    flex-shrink: 0;
}

.secret-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.secret-value input {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    background-color: var(--bg-muted);
    flex: 1;
}

/* JSON view / edit */
.json-view, .json-edit {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    line-height: 1.5;
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-muted);
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 1000px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.json-view {
    border: 1px solid var(--border-default);
}

.json-edit {
    border: 1px solid var(--accent-main);
    resize: vertical;
}

.json-edit.hidden, .json-view.hidden { display: none; }

/* JSON syntax highlighting (VSCode-style) */
.json-key    { color: #9CDCFE; }
.json-string { color: #CE9178; }
.json-number { color: #B5CEA8; }
.json-bool   { color: #569CD6; }

/* ===== Profile Page ===== */
.profile-page {
    max-width: 720px;
}

.profile-layout {
    display: flex;
    gap: var(--spacing-xl);
}

.profile-thumbnail-section {
    flex-shrink: 0;
}

.profile-info-section {
    flex: 1;
    min-width: 0;
}

.profile-thumbnail-wrapper {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 2px solid var(--border-default);
    background: var(--bg-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-thumbnail-wrapper.drag-over {
    border-color: var(--accent-main);
    box-shadow: 0 0 0 3px rgba(71, 144, 255, 0.25);
}

.profile-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-thumbnail-placeholder {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-fast);
    color: #fff;
    font-size: var(--font-size-body-xs);
    font-weight: 600;
}

.profile-thumbnail-wrapper:hover .profile-thumbnail-overlay {
    opacity: 1;
}

.profile-readonly {
    padding: var(--spacing-xs) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-body-xs);
}

.profile-edit-row {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.profile-edit-row input {
    flex: 1;
}

.badge-role {
    background: rgba(71, 144, 255, 0.15);
    color: var(--accent-main);
}

/* ===== Table Scroll Container ===== */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== User Actions Column ===== */
.user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

/* ===== Email Column (smart truncation: local part truncates, domain always visible) ===== */
td.col-email {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    max-width: 240px;
}

.email-local {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 140px;
    vertical-align: bottom;
}

.email-domain {
    white-space: nowrap;
    color: var(--text-muted);
}

/* ===== Responsive: 900px — shed low-priority columns ===== */
@media (max-width: 900px) {
    .col-sparkline {
        display: none;
    }
    /* App Secrets: hide Description, Sort */
    .col-desc,
    .col-sort {
        display: none;
    }
}

/* ===== Responsive: 768px — primary breakpoint ===== */
@media (max-width: 768px) {
    /* Users: hide last login, roles */
    .col-last-login,
    .col-roles {
        display: none;
    }

    /* App Secrets: hide Category, Type, Quota Feature */
    .col-category,
    .col-type,
    .col-quota-feature {
        display: none;
    }

    /* Toolbar: search goes full-width */
    .toolbar {
        flex-wrap: wrap;
    }

    .toolbar input[type="search"] {
        max-width: none;
        width: 100%;
        order: -1;
    }

    /* Tabs: horizontal scroll with hidden scrollbar + fade masks */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 16px,
            black calc(100% - 16px),
            transparent
        );
        mask-image: linear-gradient(
            to right,
            transparent,
            black 16px,
            black calc(100% - 16px),
            transparent
        );
    }
    .tabs::-webkit-scrollbar { display: none; }

    .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Tighten email local-part truncation */
    .email-local {
        max-width: 100px;
    }

    /* Profile layout: stack vertically */
    .profile-layout {
        flex-direction: column;
    }
}

/* ===== Responsive: 600px — compact mode ===== */
@media (max-width: 600px) {
    /* Hide admin and created columns on tenant list */
    .col-admin,
    .col-created {
        display: none;
    }

    /* Users: shed down to Name + Actions */
    .col-email,
    .col-status {
        display: none;
    }

    /* App Secrets: shed down to Display Name + Actions */
    .col-envvar {
        display: none;
    }

    /* Tenant detail tabs: tighter padding */
    .tab {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-ui-sm);
    }
}

/* ===== Definition-Driven Secrets ===== */

.secrets-category {
    margin-bottom: var(--spacing-lg);
}

.secrets-category-title {
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-default);
}

.secret-status-icon {
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.secret-status-set {
    color: var(--accent-confirm);
}

.secret-status-unset {
    color: var(--text-muted);
    opacity: 0.4;
    font-size: 10px;
}

.secret-display-name {
    font-size: var(--font-size-body-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.secret-row--unset .secret-display-name {
    color: var(--text-secondary);
}

.secret-description {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

.secret-set-form {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.secret-set-form input {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-body-xs);
    max-width: 240px;
}

/* ===== App Secrets Management ===== */

.app-secrets-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-muted);
    border-radius: var(--border-radius-md);
}

.app-secrets-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-secrets-form .form-group.full-width {
    grid-column: 1 / -1;
}

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

.app-secrets-form input,
.app-secrets-form textarea {
    font-size: var(--font-size-body-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.app-secrets-form select {
    font-size: var(--font-size-body-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ── API Key Management ── */

.api-keys-page {
    padding: var(--spacing-md) 0;
}

.api-keys-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

.api-keys-header h3 {
    margin: 0;
    font-size: var(--font-size-body-lg);
    font-weight: 600;
}

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

.api-key-table th,
.api-key-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-default);
    font-size: var(--font-size-body-xs);
}

.api-key-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.api-key-table tbody tr:hover {
    background-color: var(--bg-muted);
}

.api-key-name {
    font-weight: 500;
    color: var(--text-primary);
}

.api-key-jti {
    font-family: monospace;
    font-size: 10px;
}

.api-key-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.api-key-status--active {
    background-color: rgba(76, 175, 80, 0.15);
    color: var(--color-completed, #4CAF50);
}

.api-key-status--revoked {
    background-color: rgba(244, 67, 54, 0.15);
    color: var(--destructive-600, #F44336);
}

.api-key-status--expired {
    background-color: rgba(158, 158, 158, 0.15);
    color: var(--text-secondary);
}

.api-key-role-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    margin-right: 4px;
}

.api-key-ip-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    margin-right: 4px;
    margin-bottom: 2px;
}

.api-key-revoked-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    background-color: rgba(244, 67, 54, 0.15);
    color: var(--destructive-600, #F44336);
    margin-left: 4px;
}

.api-key-usage-bar {
    position: relative;
    width: 80px;
    height: 16px;
    background-color: var(--bg-muted);
    border-radius: 8px;
    overflow: hidden;
}

.api-key-usage-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--accent-main);
    opacity: 0.4;
    border-radius: 8px;
}

.api-key-usage-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Create Form */
.api-key-create-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-muted);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-lg);
}

.api-key-create-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.api-key-create-form .form-group.full-width {
    grid-column: 1 / -1;
}

.api-key-create-form .form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.api-key-expiry-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.api-key-expiry-option,
.api-key-role-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-body-xs);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.api-key-expiry-option:hover,
.api-key-role-option:hover {
    border-color: var(--accent-main);
}

.api-key-role-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Token Display Modal */
.api-key-token-warning {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-weight: 500;
    text-align: center;
}

.api-key-token-display textarea {
    width: 100%;
    font-family: monospace;
    font-size: var(--font-size-body-xs);
    padding: var(--spacing-md);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    word-break: break-all;
    resize: none;
}

.api-key-token-meta {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-body-xs);
    color: var(--text-secondary);
}

.api-key-token-meta p {
    margin: 4px 0;
}

.api-key-row--revoked {
    opacity: 0.6;
}

.api-key-row--expired {
    opacity: 0.5;
}

/* ===== Create User Form ===== */

.create-user-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.create-user-form .form-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--font-size-body-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

.create-user-form .required {
    color: var(--accent-danger);
}

.create-user-form input {
    font-size: var(--font-size-body-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.create-user-form input:focus {
    border-color: var(--accent-main);
    outline: none;
}

.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrap input {
    flex: 1;
    padding-right: 36px;
}

.password-toggle {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
}

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

/* ===== Settings Tab (Edit Mode) ===== */

.st-group {
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.st-group legend {
    font-size: var(--font-size-body-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 var(--spacing-sm);
}

.st-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.st-template-card {
    background: var(--bg-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.st-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}

.st-dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-body-xs);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.st-dropdown-item:hover {
    background-color: var(--bg-muted);
}

.st-dropdown-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.st-dropdown-item--disabled:hover {
    background-color: transparent;
}

/* ── Dirty-field purple glow ── */

.st-changed {
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.45), 0 0 8px rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.6) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Checkbox variant: glow the label wrapper */
label.st-changed-label {
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.35), 0 0 6px rgba(168, 85, 247, 0.15);
    border-radius: var(--border-radius-sm);
    padding: 2px 6px;
    margin: -2px -6px;
}

/* Tag variant */
.al-tag.st-changed {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.5);
}

/* ── Regex Syntax Highlighter ── */

.regex-editor {
    position: relative;
    font-family: var(--font-family-mono);
    font-size: 12px;
    line-height: 1.5;
}

.regex-editor textarea {
    position: absolute;
    inset: 0;
    color: transparent;
    caret-color: var(--text-primary);
    background: transparent;
    resize: none;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    font: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
}

.regex-editor textarea:focus {
    border-color: var(--accent-main);
    outline: none;
}

.regex-editor pre {
    margin: 0;
    padding: var(--spacing-md);
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    background: var(--bg-primary);
    font: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    pointer-events: none;
    min-height: 100px;
}

/* Regex token colors */
.rx-escape  { color: #c084fc; }      /* purple-400: \d \w \. etc */
.rx-anchor  { color: #f472b6; }      /* pink-400: ^ $ */
.rx-group   { color: #60a5fa; }      /* blue-400: ( ) */
.rx-class   { color: #34d399; }      /* emerald-400: [ ] */
.rx-quant   { color: #fbbf24; }      /* amber-400: * + ? {n,m} */
.rx-alter   { color: #fb923c; }      /* orange-400: | */
.rx-text    { color: var(--text-primary); }

/* ── Email Template Selector ── */

.st-tpl-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--spacing-md);
}

.st-tpl-tab {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-body-xs);
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.st-tpl-tab:hover { border-color: var(--text-muted); color: var(--text-primary); }
.st-tpl-tab.active { border-color: var(--accent-main); color: var(--accent-main); background: rgba(71, 144, 255, 0.08); }

/* ── Boolean status badges (read-only view) ── */

.st-bool-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: var(--font-size-body-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.st-bool-badge--yes {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-confirm);
}

.st-bool-badge--no {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.st-bool-badge--default {
    background: rgba(140, 140, 140, 0.15);
    color: var(--text-muted);
}

/* ── Toggle switches (edit mode) ── */

.st-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-body-sm);
}

.st-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.st-toggle__track {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
    position: relative;
}

.st-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.2s, background 0.2s;
}

.st-toggle input:checked + .st-toggle__track {
    background: rgba(34, 197, 94, 0.2);
    border-color: var(--accent-confirm);
}

.st-toggle input:checked + .st-toggle__track::after {
    transform: translateX(16px);
    background: var(--accent-confirm);
}

@media (max-width: 600px) {
    .st-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Login-to-Tenant Button (All Tenants list) ── */

.col-actions {
    text-align: center;
    padding: 0 var(--spacing-xs) !important;
}

.login-to-tenant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.tenant-row:hover .login-to-tenant-btn,
.clickable-row:hover .login-to-tenant-btn {
    opacity: 1;
    color: var(--text-primary);
}

.login-to-tenant-btn:hover {
    opacity: 1;
    color: var(--accent-main);
    background: rgba(71, 144, 255, 0.1);
}

.login-to-tenant-btn:disabled,
.login-to-tenant-btn--loading {
    opacity: 0.5;
    cursor: wait;
}

.activate-tenant-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--border-radius-sm);
    background: transparent;
    color: var(--color-success-500, #22c55e);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.tenant-row:hover .activate-tenant-btn {
    opacity: 1;
}

.activate-tenant-btn:hover {
    opacity: 1;
    background: rgba(34, 197, 94, 0.1);
}

.activate-tenant-btn:disabled {
    opacity: 0.4;
    cursor: wait;
}

/* ── Tenant Summary Modal ── */

.tenant-summary__dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-body-xs);
    margin: 0;
}

.tenant-summary__dl dt {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding-top: 2px;
}

.tenant-summary__dl dd {
    margin: 0;
    color: var(--text-primary);
}

.tenant-summary__dl dd code {
    font-size: var(--font-size-body-xs);
    background: var(--bg-secondary);
    padding: 1px 5px;
    border-radius: var(--border-radius-sm);
}

.tenant-summary__actions {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* ═══════════════════════════════════════════════════════════
   Pricing Tier Badge + Quota Progress
   ═══════════════════════════════════════════════════════════ */

.tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--border-radius-sm);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818cf8;
    white-space: nowrap;
}

.tier-badge--default {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(107, 114, 128, 0.3);
    color: var(--text-muted);
    font-weight: 500;
}

.tier-badge--clickable {
    cursor: pointer;
    transition: background 0.15s;
}

.tier-badge--clickable:hover {
    background: rgba(99, 102, 241, 0.25);
}

.tier-badge--default.tier-badge--clickable:hover {
    background: rgba(107, 114, 128, 0.25);
}

/* Tier section in profile */
.tier-section {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-default);
}

.tier-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--spacing-md);
}

.tier-display__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tier-edit__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.tier-select {
    font-size: var(--font-size-body-xs);
    padding: 4px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 120px;
}

/* Quota progress bars */
.quota-progress {
    margin-top: var(--spacing-md);
}

.quota-progress__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 var(--spacing-sm);
}

.quota-progress-item {
    margin-bottom: 8px;
}

.quota-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 3px;
    color: var(--text-primary);
}

.quota-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    overflow: hidden;
}

.quota-bar__fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-success-500, #22c55e);
    transition: width 0.3s ease;
}

.quota-bar--warn .quota-bar__fill {
    background: var(--color-warning-500, #eab308);
}

.quota-bar--danger .quota-bar__fill {
    background: var(--color-danger, #ef4444);
}

/* Tier column in users table */
.col-tier {
    width: 80px;
    text-align: center;
}

@media (max-width: 768px) {
    .col-tier { display: none; }
}