/* Super Admin role preview dropdown + banner */

.luma-role-preview {
    display: flex;
    align-items: center;
    gap: var(--luma-space-2);
    flex-shrink: 0;
    max-width: 100%;
}

.luma-role-preview-label {
    font-size: var(--luma-font-xs);
    font-weight: var(--luma-weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--luma-text-muted, #8b9bb4);
    white-space: nowrap;
}

.luma-role-preview-select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 148px;
    max-width: 200px;
    min-height: 34px;
    padding: 6px 28px 6px 10px; /* token-oneoff: off-scale spacing */
    border: 1px solid var(--border-color, #2e3d52);
    border-radius: var(--luma-radius-xs);
    background-color: rgba(0, 0, 0, 0.28); /* token-oneoff: glass */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b9bb4' d='M1.2 1.1L6 5.9l4.8-4.8 1.1 1.1L6 8.1.1 2.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    color: var(--luma-text-main, #e0e0e0);
    font: inherit;
    font-size: var(--luma-font-md);
    font-weight: var(--luma-weight-semibold);
    line-height: 1.2; /* token-oneoff: leading */
    cursor: pointer;
}

.luma-role-preview-select:hover,
.luma-role-preview-select:focus {
    border-color: rgba(0, 163, 224, 0.55); /* token-oneoff: glass */
    outline: none;
}

.luma-role-preview-select:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 163, 224, 0.35); /* token-oneoff: shadow */
}

.luma-role-preview-select option {
    background: var(--luma-surface-card, #151d28);
    color: var(--luma-text-main, #e0e0e0);
}

.luma-role-preview--compact .luma-role-preview-select {
    min-width: 132px;
    max-width: 170px;
    min-height: 30px;
    padding: 5px 26px 5px 8px; /* token-oneoff: off-scale spacing */
    font-size: var(--luma-font-sm);
}

.luma-role-preview-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--luma-space-3);
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 8px 20px; /* token-oneoff: off-scale spacing */
    background: rgba(245, 158, 11, 0.12); /* token-oneoff: glass */
    border-bottom: 1px solid rgba(245, 158, 11, 0.45); /* token-oneoff: residual */
    color: #fde68a; /* token-oneoff: glass */
    font-size: var(--luma-font-md);
    font-weight: var(--luma-weight-semibold);
}

.luma-role-preview-banner strong {
    color: var(--luma-text-heading, #ffffff);
    font-weight: var(--luma-weight-bold);
}

.luma-role-preview-exit {
    appearance: none;
    border: 1px solid rgba(245, 158, 11, 0.55); /* token-oneoff: glass */
    background: rgba(0, 0, 0, 0.25); /* token-oneoff: glass */
    color: var(--luma-text-heading, #ffffff);
    border-radius: var(--luma-radius-xs);
    font: inherit;
    font-size: var(--luma-font-sm);
    font-weight: var(--luma-weight-bold);
    padding: var(--luma-space-1) var(--luma-space-3);
    cursor: pointer;
}

.luma-role-preview-exit:hover {
    background: rgba(245, 158, 11, 0.2); /* token-oneoff: glass */
}

.luma-role-preview-soft-deny {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px; /* token-oneoff: off-scale spacing */
    min-height: 50vh;
}

.luma-role-preview-soft-deny-card {
    max-width: 520px;
    width: 100%;
    background: var(--luma-surface-card, #151d28);
    border: 1px solid var(--luma-border, #2e3d52);
    border-radius: 10px; /* token-oneoff: off-scale radius */
    padding: 28px 26px; /* token-oneoff: off-scale spacing */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); /* token-oneoff: shadow */
}

.luma-role-preview-soft-deny-card h2 {
    margin: 0 0 var(--luma-space-2);
    font-size: 20px; /* token-oneoff: off-scale type */
    color: var(--luma-text-heading, #ffffff);
}

.luma-role-preview-soft-deny-card p {
    margin: 0 0 20px; /* token-oneoff: off-scale spacing */
    font-size: 14px; /* token-oneoff: off-scale type */
    line-height: 1.55; /* token-oneoff: leading */
    color: var(--luma-text-muted, #8b9bb4);
}

.luma-role-preview-soft-deny-card strong {
    color: var(--luma-text-main, #e0e0e0);
}

.luma-role-preview-soft-deny-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--luma-space-2);
}

.luma-role-preview-soft-deny-actions .btn {
    text-decoration: none;
}

@media (max-width: 900px) {
    .luma-role-preview {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
    .luma-role-preview-select {
        flex: 1;
        max-width: none;
    }
}