/* ============================================================
   V2 — Buttons
   ============================================================
   Базовий .v2-btn + варіанти (primary/secondary/ghost/danger/icon)
   + розміри (-sm / -lg).

   Структура HTML:
     <button class="v2-btn v2-btn-primary" type="button">Зберегти</button>
     <button class="v2-btn v2-btn-secondary" type="button">
       <svg class="v2-btn-icon" ...></svg> Експорт
     </button>
     <button class="v2-btn v2-btn-icon" type="button" aria-label="Видалити">
       <svg ...></svg>
     </button>
   ============================================================ */

/* box-sizing reset для безпеки (платформенний tokens.css не має глобального) */
.v2-btn,
.v2-btn::before,
.v2-btn::after {
    box-sizing: border-box;
}

/* === Base === */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: 6px 12px;
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}

.v2-btn:focus { outline: none; }
.v2-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.v2-btn:disabled,
.v2-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.v2-btn:active:not(:disabled):not(.is-disabled) {
    transform: translateY(1px);
}

/* Іконка всередині кнопки */
.v2-btn .v2-btn-icon,
.v2-btn > svg,
.v2-btn .v2-i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
}

/* Standalone .v2-i розміри (поза кнопкою) */
.v2-i { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; vertical-align: -0.15em; }
.v2-i-sm { width: 12px; height: 12px; }
.v2-i-lg { width: 16px; height: 16px; }
.v2-i-xl { width: 20px; height: 20px; }

/* === Variants === */

/* Primary — основний accent CTA */
.v2-btn-primary {
    background: var(--accent);
    color: var(--text-inverse);
    border-color: var(--accent);
}
.v2-btn-primary:hover:not(:disabled):not(.is-disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Secondary — біле тло, рамка */
.v2-btn-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.v2-btn-secondary:hover:not(:disabled):not(.is-disabled) {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* Ghost — без рамки, тільки текст */
.v2-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}
.v2-btn-ghost:hover:not(:disabled):not(.is-disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Danger — деструктивна дія */
.v2-btn-danger {
    background: var(--bg-card);
    color: var(--danger);
    border-color: var(--border-default);
}
.v2-btn-danger:hover:not(:disabled):not(.is-disabled) {
    background: var(--danger-bg);
    border-color: var(--danger);
}
.v2-btn-danger:focus-visible {
    box-shadow: 0 0 0 3px rgba(164, 50, 50, 0.18);
}

.v2-btn.is-confirming,
.button.is-confirming {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
    box-shadow: inset 0 0 0 1px var(--warning);
}
.v2-btn.is-confirming[data-confirm-tone="accent"],
.button.is-confirming[data-confirm-tone="accent"] {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent-text);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.v2-btn.is-confirming[data-confirm-tone="danger"],
.button.is-confirming[data-confirm-tone="danger"] {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger);
}

/* Link — без рамки і фону, зеленим текстом, для inline посилань-дій
   (forgot password, "детальніше", тощо). На відміну від ghost — accent-кольоровий. */
.v2-btn-link {
    background: transparent;
    color: var(--accent);
    border-color: transparent;
    padding-left: 4px;
    padding-right: 4px;
    text-decoration: none;
}
.v2-btn-link:hover:not(:disabled):not(.is-disabled) {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Danger solid — заповнений варіант для крайніх випадків */
.v2-btn-danger-solid {
    background: var(--danger);
    color: var(--text-inverse);
    border-color: var(--danger);
}
.v2-btn-danger-solid:hover:not(:disabled):not(.is-disabled) {
    background: #8a2727;
    border-color: #8a2727;
}

/* Icon-only — квадратна, для toolbar дій */
.v2-btn-icon {
    padding: 0;
    width: 30px;
    height: 30px;
    min-height: 30px;
    color: var(--text-secondary);
    border-color: transparent;
}
.v2-btn-icon:hover:not(:disabled):not(.is-disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.v2-btn-icon.v2-btn-icon-bordered {
    border-color: var(--border-default);
    background: var(--bg-card);
}
.v2-btn-icon.v2-btn-icon-bordered:hover:not(:disabled):not(.is-disabled) {
    border-color: var(--border-strong);
}

/* === States === */

/* Active — для toolbar-кнопок у групі (поточний фільтр/таб) */
.v2-btn.is-active,
.v2-btn-secondary.is-active {
    background: var(--accent-bg);
    color: var(--accent-text);
    border-color: var(--accent);
}
.v2-btn-secondary.is-active:hover:not(:disabled):not(.is-disabled) {
    background: var(--accent-bg-strong);
    border-color: var(--accent);
}
.v2-btn-ghost.is-active {
    background: var(--accent-bg);
    color: var(--accent-text);
}
.v2-btn-icon.is-active {
    background: var(--accent-bg);
    color: var(--accent-text);
}

/* Loading — спінер замість іконки/тексту, без disabled-cursor (бо процес активний) */
.v2-btn.is-loading {
    cursor: progress;
    pointer-events: none;
    position: relative;
    /* stylelint-disable-next-line declaration-no-important -- hide inherited label color under the loading spinner */
    color: transparent !important;
    /* виняток із "no !important" правила — text-color treba прибрати поверх
       спадкоємного, інакше "Зберегти" видніється під спінером */
}
.v2-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: var(--text-inverse);
    animation: v2-btn-spin 0.7s linear infinite;
    /* колір спінера переозначаємо в варіантах нижче */
}
.v2-btn-secondary.is-loading::after,
.v2-btn-ghost.is-loading::after,
.v2-btn-danger.is-loading::after,
.v2-btn-icon.is-loading::after {
    color: var(--accent);
}

@keyframes v2-btn-spin {
    to { transform: rotate(360deg); }
}

/* === Sizes === */
.v2-btn-sm {
    padding: 4px 10px;
    min-height: 26px;
    font-size: var(--text-sm);
    gap: 5px;
}
.v2-btn-sm .v2-btn-icon,
.v2-btn-sm > svg { width: 12px; height: 12px; }

.v2-btn-lg {
    padding: 9px 16px;
    min-height: 38px;
    font-size: var(--text-base);
}
.v2-btn-lg .v2-btn-icon,
.v2-btn-lg > svg { width: 16px; height: 16px; }

/* Icon-only при різних розмірах */
.v2-btn-sm.v2-btn-icon { width: 26px; height: 26px; min-height: 26px; }
.v2-btn-lg.v2-btn-icon { width: 38px; height: 38px; min-height: 38px; }

/* === Group (кнопки впритул) === */
.v2-btn-group {
    display: inline-flex;
    align-items: center;
}
.v2-btn-group .v2-btn {
    border-radius: 0;
}
.v2-btn-group .v2-btn:first-child {
    border-top-left-radius: var(--r-sm);
    border-bottom-left-radius: var(--r-sm);
}
.v2-btn-group .v2-btn:last-child {
    border-top-right-radius: var(--r-sm);
    border-bottom-right-radius: var(--r-sm);
}
.v2-btn-group .v2-btn + .v2-btn {
    margin-left: -1px;
}
.v2-btn-group .v2-btn:hover,
.v2-btn-group .v2-btn:focus-visible {
    z-index: 1;
}

/* === Density === */
[data-v2-density="compact"] .v2-btn {
    padding: 4px 10px;
    min-height: 28px;
    font-size: var(--text-sm);
}
[data-v2-density="compact"] .v2-btn-icon {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
}
[data-v2-density="compact"] .v2-btn-sm {
    padding: 3px 8px;
    min-height: 24px;
}
[data-v2-density="compact"] .v2-btn-lg {
    padding: 7px 14px;
    min-height: 34px;
}

[data-v2-density="spacious"] .v2-btn {
    padding: 8px 14px;
    min-height: 36px;
}