/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--control-h); padding:0 var(--space-3);
  border-radius:var(--radius-md);
  font-size:var(--text-base); font-weight:var(--fw-medium); white-space:nowrap;
  border:1px solid transparent; cursor:pointer; user-select:none;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast),
             color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn .icon{ width:var(--icon-sm); height:var(--icon-sm); }
.btn:active{ transform:translateY(.5px); }
.btn:disabled{ opacity:.5; pointer-events:none; }

/* Варіанти */
.btn--primary{ background:var(--bg-inverse); color:var(--text-on-inverse); box-shadow:var(--shadow-xs); }
.btn--primary:hover{ background:var(--neutral-700); }

.btn--darkgray{ background:var(--neutral-600); color:#fff; box-shadow:var(--shadow-xs); }
.btn--darkgray:hover{ background:var(--neutral-700); }

.btn--accent{ background:var(--primary); color:var(--primary-contrast); box-shadow:var(--shadow-xs); }
.btn--accent:hover{ background:var(--primary-hover); }

.btn--secondary{ background:var(--bg-surface); color:var(--text-main); font-weight:var(--fw-regular); border-color:var(--stroke); box-shadow:var(--shadow-xs); }
.btn--secondary:hover{ background:var(--bg-subtle); border-color:var(--stroke-strong); }

.btn--ghost{ background:transparent; color:var(--text-sub); }
.btn--ghost:hover{ background:var(--bg-hover); color:var(--text-main); }

/* нейтральна «м'яка» кнопка — сірий фон без бордера (дії в заголовках секцій картки) */
.btn--soft{ background:var(--bg-subtle); color:var(--text-main); font-weight:var(--fw-regular); }
.btn--soft:hover{ background:var(--bg-hover); }

.btn--danger{ background:var(--error-base); color:#fff; }
.btn--danger:hover{ filter:brightness(.95); }

.btn--success{ background:var(--success-base); color:#fff; box-shadow:var(--shadow-xs); }
.btn--success:hover{ filter:brightness(.96); }
.btn--success .icon{ color:#fff; }
/* контурна danger-кнопка: бордер + текст + іконка МАЛИНОВІ (--error-base, НЕ бордовий --error-text), без тіні */
.btn--danger-soft{ background:var(--bg-surface); color:var(--error-base); border-color:var(--error-base); box-shadow:none; }
.btn--danger-soft .icon{ color:var(--error-base); }
.btn--danger-soft:hover{ background:var(--error-tint); border-color:var(--error-base); }

/* Розміри */
.btn--sm{ height:var(--control-h-sm); padding:0 var(--space-3); font-size:var(--text-sm); }
.btn--lg{ height:var(--control-h-lg); padding:0 var(--space-4); }
.btn--block{ width:100%; }

/* Іконкова кнопка (квадрат) */
.icon-btn{
  position:relative;            /* для лічильника-бейджа */
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--control-h); height:var(--control-h); flex:0 0 auto;
  border-radius:var(--radius-md);
  color:var(--text-sub); border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn .icon{ width:var(--icon-lg); height:var(--icon-lg); }
.icon-btn:hover{ background:var(--bg-hover); color:var(--text-main); }
.icon-btn--bordered{ border-color:var(--stroke); background:var(--bg-surface); box-shadow:var(--shadow-xs); }
.icon-btn--bordered:hover{ background:var(--bg-subtle); }
.icon-btn--sm{ width:var(--control-h-sm); height:var(--control-h-sm); }
.icon-btn--sm .icon{ width:var(--icon-md); height:var(--icon-md); }

/* Кнопка-дроп (з шевроном) */
.btn .chev{ width:var(--icon-sm); height:var(--icon-sm); color:var(--text-soft); margin-left:auto; }
/* стрілка «вбік» (напр. Експорт — відкриває модалку, а не список; не обертається) */
.btn .chev-side{ width:var(--icon-sm); height:var(--icon-sm); color:var(--text-soft); margin-left:auto; }

/* Кнопка-перемикач: вимкнена — нейтральна, увімкнена — акцент */
.toggle-btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  height:var(--control-h); padding:0 var(--space-3);
  border-radius:var(--radius-md); border:1px solid var(--stroke);
  background:var(--bg-surface); color:var(--text-sub);
  font-size:var(--text-base); font-weight:var(--fw-regular); white-space:nowrap;
  box-shadow:var(--shadow-xs);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast), color var(--dur-fast);
}
.toggle-btn .icon{ width:var(--icon-sm); height:var(--icon-sm); color:var(--text-soft); transition:color var(--dur-fast); }
.toggle-btn:hover{ background:var(--bg-subtle); }
.toggle-btn:active{ transform:translateY(.5px); }
.toggle-btn.is-active{
  background:var(--primary-tint); border-color:var(--primary-200);
  color:var(--primary-700); font-weight:var(--fw-medium);
}
.toggle-btn.is-active .icon{ color:var(--primary); }

/* Згортувана кнопка: на телефоні — лише іконка (текст ховаємо, кнопка квадратна) */
@media (max-width:640px){
  .btn--collapse{ width:var(--control-h); padding-inline:0; justify-content:center; }
  .btn--collapse .btn__label{ display:none; }
}

/* Кнопка-перемикач правої панелі: підсвічена, поки панель відкрита (як toggle-btn) */
.btn--secondary.is-active{
  background:var(--primary-tint); border-color:var(--primary-200); color:var(--primary-700);
}
.btn--secondary.is-active .icon{ color:var(--primary); }