/* ============================================================
   Business PC V2 — BADGES (PHASE 3)
   Единый источник стилей бейджей и статусов:
   .badge (база), варианты состояний, статусы заказа.

   Правило подключения: ПОСЛЕ ui/buttons.css, но ДО site.css
   и страничных стилей — страница может переопределить детали.

   Компоненты ТЗ: Badge, Loader (индикаторы прогресса).
   Цвета статусов — токены --status-* в ui/tokens.css.
   ============================================================ */

/* ---------- Базовый бейдж ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    background: var(--color-surface-soft);
    white-space: nowrap;
}

/* Активный/выбранный */
.badge.is-on {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-surface);
}

/* Интерактивный (переключатель статуса) */
.badge.is-action {
    cursor: pointer;
    font-family: inherit;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        opacity 0.2s ease;
}
.badge.is-action:hover {
    opacity: 0.82;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* ---------- Статусы ---------- */
/* Заказ в обработке */
.badge.is-new    { border-color: var(--color-text); color: var(--color-text); background: var(--color-surface); }
/* Заказ завершён */
.badge.is-done   { background: var(--neutral-100); color: var(--neutral-700); }
/* Заказ отменён */
.badge.is-cancel { background: var(--color-surface-hover); color: var(--neutral-400); text-decoration: line-through; }

/* ---------- Статусы заказа (цветные, сайт/клиент) ----------
   Значения совпадают с бывшими hardcoded парами
   (#eef3ff/#3a5ccc и т.д.), теперь через токены. */
.orders-st-new    { background: var(--status-new-bg);    color: var(--status-new); }
.orders-st-proc   { background: var(--status-proc-bg);   color: var(--status-proc); }
.orders-st-done   { background: var(--status-done-bg);   color: var(--status-done); }
.orders-st-cancel { background: var(--status-cancel-bg); color: var(--status-cancel); }

/* ---------- Чипы тегов ---------- */
.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    color: var(--color-text);
    background: var(--neutral-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    user-select: none;
}

.tag-chip-check {
    color: var(--ok-chip);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
}

.tag-chip-x {
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.tag-chip-x:hover { color: var(--color-text); }

/* ---------- Счётчик на кнопке сравнения (КАНОН) ----------
   Один вид везде. Алиасы показа: .show (канон) и .has-items
   (карточки каталога) — оба включают. */
.btn-compare-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    color: var(--nv-on-ink, var(--color-bg));
    background: var(--nv-ink, var(--color-primary));
    border: 2px solid var(--nv-panel, var(--color-surface));
    border-radius: var(--radius-pill, var(--radius-btn));
    pointer-events: none;
}
  .btn-compare-count.show { display: inline-flex; }