/*
 * app-components.css — наши собственные UI-компоненты, независимые от Bootstrap.
 *
 * Используется там, где:
 *   - bootstrap-палитры недостаточно (свои цвета — `violet`, `teal`);
 *   - нужен единый семантический слой (`app-badge-success` вместо
 *     `bg-success-subtle text-success` — 2 класса → 1);
 *   - bootstrap-класс не существует (`muted` → `bg-muted-subtle` нет в 5.3).
 *
 * Источник данных (для счётчиков/статусов) — `ParticipantStatus::counterColor()`
 * и т.п., возвращают **семантический** код (`success`, `muted`, `violet`),
 * не bootstrap-класс.
 */

/* ── Палитра (единая точка, работает в light + dark) ─────────── */
:root {
    /* Bootstrap-совместимые коды (0.18 — как badge-soft в Venix) */
    --app-color-primary-bg: rgba(var(--bs-primary-rgb), 0.18);
    --app-color-primary-fg: var(--bs-primary);
    --app-color-success-bg: rgba(var(--bs-success-rgb), 0.18);
    --app-color-success-fg: var(--bs-success);
    --app-color-warning-bg: rgba(var(--bs-warning-rgb), 0.18);
    --app-color-warning-fg: var(--bs-warning);
    --app-color-danger-bg:  rgba(var(--bs-danger-rgb), 0.18);
    --app-color-danger-fg:  var(--bs-danger);
    --app-color-info-bg:    rgba(var(--bs-info-rgb), 0.18);
    --app-color-info-fg:    var(--bs-info);
    --app-color-secondary-bg: rgba(var(--bs-secondary-rgb), 0.18);
    --app-color-secondary-fg: var(--bs-secondary);

    /* «muted» — bootstrap bg-muted-subtle нет, единый семантический код */
    --app-color-muted-bg: rgba(var(--bs-body-color-rgb), 0.12);
    --app-color-muted-fg: var(--bs-secondary-color);

    /* Свои — расширяются по мере появления кейсов */
    --app-color-violet-bg: rgba(173, 70, 255, 0.18);
    --app-color-violet-fg: #AD46FF;
    --app-color-teal-bg: rgba(0, 187, 167, 0.18);
    --app-color-teal-fg: #00bba7;
}

/* ── Badge ──────────────────────────────────────────────────── */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

/* Иконка в бейдже — строго по размеру текста, чтобы не раздувать высоту */
.app-badge iconify-icon {
    font-size: 1em;
    line-height: 1;
    height: 1em;
    width: 1em;
}

.app-badge-primary   { background: var(--app-color-primary-bg);   color: var(--app-color-primary-fg); }
.app-badge-success   { background: var(--app-color-success-bg);   color: var(--app-color-success-fg); }
.app-badge-warning   { background: var(--app-color-warning-bg);   color: var(--app-color-warning-fg); }
.app-badge-danger    { background: var(--app-color-danger-bg);    color: var(--app-color-danger-fg); }
.app-badge-info      { background: var(--app-color-info-bg);      color: var(--app-color-info-fg); }
.app-badge-secondary { background: var(--app-color-secondary-bg); color: var(--app-color-secondary-fg); }
.app-badge-muted     { background: var(--app-color-muted-bg);     color: var(--app-color-muted-fg); }
.app-badge-violet    { background: var(--app-color-violet-bg);    color: var(--app-color-violet-fg); }
.app-badge-teal      { background: var(--app-color-teal-bg);      color: var(--app-color-teal-fg); }
.app-badge-neutral   { background: var(--app-color-muted-bg);     color: var(--bs-body-color); }

/* ── Только текст ──────────────────────────────────────────── */
.app-text-primary   { color: var(--app-color-primary-fg); }
.app-text-success   { color: var(--app-color-success-fg); }
.app-text-warning   { color: var(--app-color-warning-fg); }
.app-text-danger    { color: var(--app-color-danger-fg); }
.app-text-info      { color: var(--app-color-info-fg); }
.app-text-secondary { color: var(--app-color-secondary-fg); }
.app-text-muted     { color: var(--app-color-muted-fg); }
.app-text-violet    { color: var(--app-color-violet-fg); }
.app-text-teal      { color: var(--app-color-teal-fg); }

/* ── Только фон (редко, но нужно) ──────────────────────────── */
.app-bg-primary   { background: var(--app-color-primary-bg); }
.app-bg-success   { background: var(--app-color-success-bg); }
.app-bg-warning   { background: var(--app-color-warning-bg); }
.app-bg-danger    { background: var(--app-color-danger-bg); }
.app-bg-info      { background: var(--app-color-info-bg); }
.app-bg-muted     { background: var(--app-color-muted-bg); }
.app-bg-violet    { background: var(--app-color-violet-bg); }
.app-bg-teal      { background: var(--app-color-teal-bg); }