/* ============================================================
   V2 — Bulk action bar (Pattern 01)
   ============================================================
   Зʼявляється коли вибрано ≥1 рядок у таблиці. Показує лічильник
   вибраного і набір bulk-дій (експорт, статус, видалення).

   Структура:
     <div class="v2-bulkbar">
       <span class="v2-bulkbar-count">Вибрано: 12</span>
       <button class="v2-btn v2-btn-secondary v2-btn-sm">Експорт обраних</button>
       <button class="v2-btn v2-btn-secondary v2-btn-sm">Змінити статус</button>
       <div class="v2-bulkbar-grow"></div>
       <button class="v2-btn v2-btn-danger v2-btn-sm">Видалити</button>
       <button class="v2-bulkbar-close" aria-label="Скасувати вибір">×</button>
     </div>

   Зазвичай розміщується між toolbar і таблицею. Має accent-фон щоб
   привертати увагу. Якщо приклеюється до таблиці — додай -attached.
   ============================================================ */

/* box-sizing reset */
.v2-bulkbar,
.v2-bulkbar *,
.v2-bulkbar *::before,
.v2-bulkbar *::after {
    box-sizing: border-box;
}

/* === Container === */
.v2-bulkbar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: var(--r-md);
    color: var(--accent-text);
    font-size: var(--text-md);
    flex-wrap: wrap;
    /* Плавна поява на selection — рекомендується анімувати opacity/transform у JS */
    transition: opacity 0.18s ease;
}

/* Variant: -attached — приклеюється до toolbar/table зверху або знизу */
.v2-bulkbar-attached-top {
    border-top-left-radius: var(--r-md);
    border-top-right-radius: var(--r-md);
}
.v2-bulkbar-attached-bottom {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* === Count label — "Вибрано: N" === */
.v2-bulkbar-count {
    font-weight: var(--weight-semibold);
    color: var(--accent-text);
    white-space: nowrap;
}
.v2-bulkbar-count .num {
    }

/* Розділювач після count */
.v2-bulkbar-divider {
    width: 1px;
    align-self: stretch;
    background: var(--accent-bg-strong);
    margin: 2px var(--s-2);
}

/* === Grow spacer (відштовхує danger-зону вправо) === */
.v2-bulkbar-grow {
    flex: 1;
    min-width: 0;
}

/* === Close × button (праворуч від danger, скасовує вибір) === */
.v2-bulkbar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--accent-text);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.12s, background 0.12s;
}
.v2-bulkbar-close:hover {
    opacity: 1;
    background: var(--accent-bg-strong);
}
.v2-bulkbar-close:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.v2-bulkbar-close svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* === Variant: warning (для небезпечних bulk-дій типу "архівувати X записів") === */
.v2-bulkbar-warning {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
}
.v2-bulkbar-warning .v2-bulkbar-count { color: var(--warning); }
.v2-bulkbar-warning .v2-bulkbar-close { color: var(--warning); }

/* === Density === */
[data-v2-density="compact"] .v2-bulkbar {
    padding: var(--s-2) var(--s-4);
    font-size: var(--text-sm);
    gap: var(--s-3);
}
[data-v2-density="compact"] .v2-bulkbar-close {
    width: 22px;
    height: 22px;
}

[data-v2-density="spacious"] .v2-bulkbar {
    padding: var(--s-4) var(--s-6);
}