/* smit-role-badges — ряд ролей-переключателей (см. smit-role-badges.js).
   Подпись показываем только у назначенных ролей: в длинном списке важно
   видеть, что включено, а не перечень возможных ролей. */

.smit-role-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
}

.smit-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .2em .55em;
    border: 1px solid var(--sc-border, #cbd5e1);
    border-radius: 7px;
    background: var(--sc-surface-2, #f8fafc);
    color: var(--sc-text-muted, #64748b);
    font-size: var(--sc-fz-xs, .75rem);
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    /* нажимаемая цель — не меньше 24×24 (WCAG 2.2, «Target Size»):
       иконка роли занимала 20 px и на телефоне мазалась мимо */
    min-height: 24px; min-width: 24px;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.smit-role-badge:hover:not(:disabled) {
    border-color: var(--sc-text-muted, #94a3b8);
    background: var(--sc-surface-3, #f1f5f9);
}

.smit-role-badge:focus-visible {
    outline: 2px solid var(--sc-brand, #43b77a);
    outline-offset: 1px;
}

/* назначенная роль — фирменный цвет и видимая подпись */
.smit-role-badge.is-on {
    border-color: var(--sc-brand, #43b77a);
    background: rgba(67, 183, 122, .12);
    /* подпись назначенной роли на светлом тинте: #2f8f5d давал 3.6:1 —
     ниже AA для мелкого текста; #226b45 даёт 5.3:1 */
  color: #226b45;
}

/* у неназначенных подпись скрыта — остаётся значок и подсказка */
.smit-role-badge:not(.is-on) .smit-role-badge__label { display: none; }
.smit-role-badge:not(.is-on) { cursor: help; }

.smit-role-badge:disabled,
.smit-role-badge.is-disabled { opacity: .55; cursor: default; }

/* — тёмная тема — */
[data-bs-theme="dark"] .smit-role-badge,
body.dark-theme .smit-role-badge {
    border-color: #39414d;
    background: #262b31;
    color: #97a3b4;
}
[data-bs-theme="dark"] .smit-role-badge:hover:not(:disabled),
body.dark-theme .smit-role-badge:hover:not(:disabled) { background: #2f353d; }
[data-bs-theme="dark"] .smit-role-badge.is-on,
body.dark-theme .smit-role-badge.is-on {
    border-color: #43b77a;
    background: rgba(67, 183, 122, .18);
    /* в тёмной теме наоборот светлее фона: #7fd6a8 на #26332e — 6.1:1 */
  color: #8ee0b4;
}

/* на телефоне подписи не помещаются даже у назначенных — оставляем значки,
   а что назначено, читается цветом и подсказкой по нажатию */
@media (max-width: 575.98px) {
    .smit-role-badge__label { display: none; }
}