/* Confirm Dialog Component — UI Comprehensive Refactor
 * Requires: tokens.css, spacing.css, typography.css
 * z-index: 10000 (above toast at 9999).
 * JS counterpart: js/utils/confirm-dialog.js
 *
 * Usage:
 *   <div class="confirm-dialog-overlay confirm-dialog-overlay--warning">
 *     <div class="confirm-dialog">
 *       <div class="confirm-dialog__icon">...</div>
 *       <h2 class="confirm-dialog__title">Удалить хантера?</h2>
 *       <p class="confirm-dialog__body">Это действие нельзя отменить.</p>
 *       <div class="confirm-dialog__actions">
 *         <button class="btn btn-ghost">Отмена</button>
 *         <button class="btn btn-danger">Удалить</button>
 *       </div>
 *     </div>
 *   </div>
 */

/* ── Overlay ───────────────────────────────────────────────────────────── */
.confirm-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--space-4);
}

/* ── Dialog box ────────────────────────────────────────────────────────── */
.confirm-dialog {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  max-width: 440px;
  width: 100%;
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  animation: confirm-dialog-in 0.18s ease-out forwards;
}

/* ── Icon circle ───────────────────────────────────────────────────────── */
.confirm-dialog__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.15);   /* warning tint default */
  color: var(--color-warning-500);
  align-self: center;
  flex-shrink: 0;
}

.confirm-dialog__icon svg {
  width: 24px;
  height: 24px;
}

/* ── Text ──────────────────────────────────────────────────────────────── */
.confirm-dialog__title {
  font-size: var(--font-md);      /* .card-title */
  font-weight: var(--weight-semi, 600);
  color: var(--text-primary);
  margin: 0;
  text-align: center;
  line-height: var(--line-snug);
}

.confirm-dialog__body {
  font-size: var(--font-sm);      /* .body-sm */
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
  line-height: var(--line-relaxed);
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

/* ── Semantic variants (icon tint) ─────────────────────────────────────── */
.confirm-dialog--warning .confirm-dialog__icon {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning-500);
}

.confirm-dialog--error .confirm-dialog__icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error-500);
}

.confirm-dialog--info .confirm-dialog__icon {
  background: rgba(6, 182, 212, 0.15);
  color: var(--color-info-500);
}

/* ── Animation ─────────────────────────────────────────────────────────── */
@keyframes confirm-dialog-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-dialog { animation: none; }
}