/* ============================================================
   V2 — Sticky bottom bar (Pattern 02 + Pattern 03)
   ============================================================
   Закріплена внизу панель з глобальним save-state та action-кнопками.
   Використовується в Pattern 02 (Card з підрозділами) і Pattern 03 (Wizard).

   Структура:
     <footer class="v2-stickybar">
       <div class="v2-stickybar-state">
         <span class="v2-stickybar-dot"></span>
         Усі зміни збережено · 12:34
       </div>
       <div class="v2-stickybar-actions">
         <button class="v2-btn v2-btn-secondary">Скасувати</button>
         <button class="v2-btn v2-btn-primary">Зберегти всі зміни</button>
       </div>
     </footer>

   Стани (комбінується з тим же елементом):
     .is-dirty   — теплий warm-yellow фон, warning-border, "є незбережені"
     .is-saving  — пульсуюча крапка, "Збереження..."
     .is-error   — danger-bg, "Помилка"

   ВАЖЛИВО: щоб sticky-поведінка спрацювала, прямий батько має МАТИ overflow:auto/scroll
   або бути головним документом. Якщо батько має overflow:hidden, sticky не працює.
   ============================================================ */

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

/* === Container === */
.v2-stickybar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    padding: var(--s-5) var(--s-7);
    background: var(--bg-card);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -4px 12px rgba(26, 26, 25, 0.04);
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* === Left: state indicator === */
.v2-stickybar-state {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.v2-stickybar-state .v2-stickybar-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    display: inline-block;
}

.v2-stickybar-state .v2-stickybar-meta {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

/* === Right: actions === */
.v2-stickybar-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}

/* === States === */

/* Dirty — є незбережені зміни (warning palette) */
.v2-stickybar.is-dirty {
    background: var(--warning-bg);
    border-top-color: var(--warning);
}
.v2-stickybar.is-dirty .v2-stickybar-state {
    color: var(--warning);
    font-weight: var(--weight-medium);
}
.v2-stickybar.is-dirty .v2-stickybar-dot {
    background: var(--warning);
}

/* Saving — debounce-збереження активне (пульсуюча крапка) */
.v2-stickybar.is-saving .v2-stickybar-dot {
    background: var(--warning);
    animation: v2-stickybar-pulse 1.2s ease-in-out infinite;
}
.v2-stickybar.is-saving .v2-stickybar-state {
    color: var(--text-secondary);
}

/* Error — помилка збереження (danger palette) */
.v2-stickybar.is-error {
    background: var(--danger-bg);
    border-top-color: var(--danger);
}
.v2-stickybar.is-error .v2-stickybar-state {
    color: var(--danger);
    font-weight: var(--weight-medium);
}
.v2-stickybar.is-error .v2-stickybar-dot {
    background: var(--danger);
}

@keyframes v2-stickybar-pulse {
    50% { opacity: 0.35; }
}

/* === Density === */
[data-v2-density="compact"] .v2-stickybar {
    padding: var(--s-4) var(--s-6);
}
[data-v2-density="compact"] .v2-stickybar-state { font-size: var(--text-xs); }

[data-v2-density="spacious"] .v2-stickybar {
    padding: var(--s-6) var(--s-8);
}
[data-v2-density="spacious"] .v2-stickybar-state { font-size: var(--text-md); }

/* === Variant: fixed (приклеєний до низу viewport НАЗАВЖДИ) ===
   На відміну від базового sticky, який "звільняється" в кінці прокрутки і
   піднімається на висоту батькового padding/margin (~20px), fixed-варіант
   ніколи не ворушиться. Використовується в shell-layout (.v2-shell), де
   бар має лишатись завжди внизу екрану як рамка.

   Відступ зліва на ширину sidebar (через CSS-змінну з .v2-shell);
   якщо немає shell — left fallback = 0 (на повний viewport).

   ВАЖЛИВО: при fixed-стані бар перекриває останні рядки контенту. Тому
   `.v2-page` отримує padding-bottom-buffer = висота бара + запас (див. css нижче).
*/
.v2-stickybar-fixed {
    position: fixed;
    left: var(--v2-sidebar-width, 0);
    right: 0;
    bottom: 0;
    /* Скидаємо будь-які margin із inline-style (наприклад "negative-edge" трюк
       з template'а, який у sticky-режимі розпирав до сторін main-колонки). */
    /* stylelint-disable-next-line declaration-no-important -- має перебивати inline-style */
    margin: 0 !important;
    /* z-index — нижче за topbar (10), вище за tabs (4) */
    z-index: 5;
}

/* Якщо в .v2-page вкладено fixed-stickybar, додаємо нижній padding щоб
   останній контент не ховався під баром. Висота бара зазвичай 57-65px. */
.v2-page:has(.v2-stickybar-fixed) {
    padding-bottom: 84px;
}
/* Fallback для браузерів без :has() — встанови вручну на сторінці. */

/* === Variant: full-bleed (без border-radius на батьківському card) === */
.v2-stickybar-flush {
    margin-left: calc(-1 * var(--s-6));
    margin-right: calc(-1 * var(--s-6));
    margin-bottom: calc(-1 * var(--s-7));
    border-radius: 0 0 var(--r-md) var(--r-md);
}

/* === Helper: scroll-container demo (для preview-сторінки) === */
.v2-stickybar-demo-scroll {
    position: relative;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    background: var(--bg-card);
}
.v2-stickybar-demo-scroll .v2-stickybar {
    /* Заокруглення внизу, бо вписаний у радіус контейнера */
    border-radius: 0 0 var(--r-md) var(--r-md);
}