/* =====================================================================
   Components — buttons, cards, inputs, tables, badges, modals, tabs, toasts
   ===================================================================== */

/* ============================== BUTTONS ============================== */

.vai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--vai-font);
  font-weight: 600;
  font-size: var(--vai-fs-13);
  padding: 9px 16px;
  border-radius: var(--vai-r-10);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--vai-dur-fast) var(--vai-ease);
  white-space: nowrap;
  user-select: none;
  position: relative;
}

.vai-btn:disabled,
.vai-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.vai-btn--primary {
  background: var(--vai-orange);
  color: #fff;
  box-shadow: var(--vai-shadow-1);
}
.vai-btn--primary:hover { background: var(--vai-orange-hover); box-shadow: var(--vai-shadow-2); }
.vai-btn--primary:active { transform: translateY(1px); }

.vai-btn--secondary {
  background: var(--vai-surface);
  color: var(--vai-ink);
  border-color: var(--vai-border);
}
.vai-btn--secondary:hover { background: var(--vai-surface-hover); border-color: #C8CACE; }

.vai-btn--ghost { background: transparent; color: var(--vai-ink-soft); }
.vai-btn--ghost:hover { background: var(--vai-surface-hover); color: var(--vai-ink); }

.vai-btn--danger { background: var(--vai-danger); color: #fff; }
.vai-btn--danger:hover { background: #B91C1C; }

.vai-btn--sm { padding: 6px 11px; font-size: var(--vai-fs-12); border-radius: var(--vai-r-8); }
.vai-btn--lg { padding: 11px 22px; font-size: var(--vai-fs-14); }

.vai-btn--block { width: 100%; }

.vai-btn .vai-icon { width: 14px; height: 14px; }

/* ============================== INPUTS ============================== */

.vai-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.vai-label {
  font-size: var(--vai-fs-11);
  font-weight: 600;
  color: var(--vai-ink-soft);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.vai-label .req { color: var(--vai-orange); margin-left: 2px; }

.vai-help {
  font-size: var(--vai-fs-11);
  color: var(--vai-ink-muted);
  line-height: 1.5;
}

.vai-input,
.vai-select,
.vai-textarea {
  width: 100%;
  background: var(--vai-surface);
  border: 1px solid var(--vai-border);
  border-radius: var(--vai-r-8);
  padding: 9px 12px;
  font-size: var(--vai-fs-13);
  color: var(--vai-ink);
  transition: all var(--vai-dur-fast);
  outline: none;
  font-family: inherit;
}

.vai-input:hover,
.vai-select:hover,
.vai-textarea:hover { border-color: #C8CACE; }

.vai-input:focus,
.vai-select:focus,
.vai-textarea:focus {
  border-color: var(--vai-orange);
  box-shadow: var(--vai-shadow-glow);
}

.vai-input::placeholder,
.vai-textarea::placeholder { color: var(--vai-ink-faint); }

.vai-textarea { resize: vertical; min-height: 90px; }

.vai-input--sm, .vai-select--sm { padding: 6px 10px; font-size: var(--vai-fs-12); }

.vai-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--vai-border);
  border-radius: var(--vai-r-8);
  background: var(--vai-surface);
  transition: all var(--vai-dur-fast);
}
.vai-input-group:focus-within { border-color: var(--vai-orange); box-shadow: var(--vai-shadow-glow); }
.vai-input-group .vai-input,
.vai-input-group .vai-select { border: none; background: transparent; }
.vai-input-group .vai-input:focus,
.vai-input-group .vai-select:focus { box-shadow: none; }
.vai-input-group__icon {
  display: flex; align-items: center; padding: 0 12px;
  color: var(--vai-ink-muted);
}
.vai-input-group__suffix {
  display: flex; align-items: center;
  padding: 0 12px;
  color: var(--vai-ink-muted);
  font-size: var(--vai-fs-12);
  border-left: 1px solid var(--vai-border-soft);
  background: var(--vai-surface-muted);
  border-radius: 0 var(--vai-r-8) var(--vai-r-8) 0;
}

/* Switch */
.vai-switch {
  position: relative;
  display: inline-flex;
  width: 36px; height: 20px;
  cursor: pointer;
}
.vai-switch input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 1;
}
.vai-switch__track {
  width: 100%; height: 100%;
  background: #D6D8DD;
  border-radius: var(--vai-r-pill);
  transition: background var(--vai-dur-fast);
  position: relative;
}
.vai-switch__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: var(--vai-r-pill);
  transition: transform var(--vai-dur-fast) var(--vai-ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.vai-switch input:checked + .vai-switch__track { background: var(--vai-orange); }
.vai-switch input:checked + .vai-switch__track::after { transform: translateX(16px); }

/* Checkbox + Radio */
.vai-check, .vai-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--vai-fs-13);
  color: var(--vai-ink);
  user-select: none;
}
.vai-check input, .vai-radio input { position: absolute; opacity: 0; pointer-events: none; }
.vai-check__box, .vai-radio__box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--vai-border);
  border-radius: var(--vai-r-4);
  background: var(--vai-surface);
  position: relative;
  flex-shrink: 0;
  transition: all var(--vai-dur-fast);
}
.vai-radio__box { border-radius: var(--vai-r-pill); }

.vai-check input:checked + .vai-check__box,
.vai-radio input:checked + .vai-radio__box {
  background: var(--vai-orange);
  border-color: var(--vai-orange);
}
.vai-check input:checked + .vai-check__box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.vai-radio input:checked + .vai-radio__box::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: var(--vai-r-pill);
}

/* Range */
.vai-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--vai-r-pill);
  background: var(--vai-border);
  outline: none;
}
.vai-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--vai-orange);
  border-radius: var(--vai-r-pill);
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(248,113,49,0.45);
}

/* ============================== CARDS ============================== */

.vai-card {
  background: var(--vai-surface);
  border: 1px solid var(--vai-border-soft);
  border-radius: var(--vai-r-12);
  box-shadow: var(--vai-shadow-1);
}

.vai-card--hoverable { transition: all var(--vai-dur-base); }
.vai-card--hoverable:hover {
  box-shadow: var(--vai-shadow-3);
  border-color: var(--vai-border);
  transform: translateY(-1px);
}

.vai-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--vai-border-soft);
  gap: 12px;
}
.vai-card__title {
  font-size: var(--vai-fs-14);
  font-weight: 700;
  color: var(--vai-ink);
  letter-spacing: -0.01em;
}
.vai-card__sub {
  font-size: var(--vai-fs-11);
  color: var(--vai-ink-muted);
  margin-top: 2px;
}
.vai-card__body { padding: 18px; }
.vai-card__foot {
  padding: 14px 18px;
  border-top: 1px solid var(--vai-border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--vai-surface-soft);
  border-radius: 0 0 var(--vai-r-12) var(--vai-r-12);
}

/* ============================== BADGES ============================== */

.vai-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--vai-fs-11);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--vai-r-pill);
  background: var(--vai-neutral-soft);
  color: var(--vai-neutral);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.vai-badge .dot {
  width: 6px; height: 6px; border-radius: var(--vai-r-pill);
  background: currentColor;
  flex-shrink: 0;
}

.vai-badge--success { background: var(--vai-success-soft); color: var(--vai-success); }
.vai-badge--warning { background: var(--vai-warning-soft); color: var(--vai-warning); }
.vai-badge--danger  { background: var(--vai-danger-soft);  color: var(--vai-danger);  }
.vai-badge--info    { background: var(--vai-info-soft);    color: var(--vai-info);    }
.vai-badge--orange  { background: var(--vai-orange-tint);  color: var(--vai-orange);  }
.vai-badge--pulsing .dot { animation: vai-pulse 1.4s ease-in-out infinite; }

/* Channel badges */
.vai-channel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--vai-fs-11);
  font-weight: 600;
  color: var(--vai-ink);
  padding: 4px 9px;
  border-radius: var(--vai-r-pill);
  background: var(--vai-surface-muted);
  border: 1px solid var(--vai-border-soft);
}
.vai-channel .vai-icon { width: 12px; height: 12px; }
.vai-channel--call    { background: rgba(248,113,49,0.10); color: var(--vai-ch-call); border-color: rgba(248,113,49,0.20); }
.vai-channel--call-ai { background: rgba(139,92,246,0.10); color: var(--vai-ch-call-ai); border-color: rgba(139,92,246,0.20); }
.vai-channel--wa-call { background: rgba(16,185,129,0.10); color: var(--vai-ch-wa-call); border-color: rgba(16,185,129,0.20); }
.vai-channel--wa      { background: rgba(37,211,102,0.10); color: #1AAD51; border-color: rgba(37,211,102,0.22); }
.vai-channel--wa-api  { background: rgba(18,140,126,0.10); color: var(--vai-ch-wa-api); border-color: rgba(18,140,126,0.22); }
.vai-channel--email   { background: rgba(37,99,235,0.10);  color: var(--vai-ch-email); border-color: rgba(37,99,235,0.20); }
.vai-channel--sms     { background: rgba(245,158,11,0.10); color: var(--vai-ch-sms); border-color: rgba(245,158,11,0.20); }

/* ============================== TABLES ============================== */

.vai-table-wrap {
  border: 1px solid var(--vai-border-soft);
  border-radius: var(--vai-r-12);
  background: var(--vai-surface);
  overflow: hidden;
}

.vai-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vai-fs-13);
}

.vai-table thead th {
  background: var(--vai-surface-muted);
  text-align: left;
  font-size: var(--vai-fs-11);
  font-weight: 600;
  color: var(--vai-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--vai-border-soft);
  position: sticky; top: 0; z-index: 1;
}

.vai-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--vai-border-faint);
  color: var(--vai-ink);
  vertical-align: middle;
}

.vai-table tbody tr:last-child td { border-bottom: none; }
.vai-table tbody tr:hover td { background: var(--vai-surface-soft); }

.vai-table--striped tbody tr:nth-child(even) td { background: var(--vai-surface-soft); }
.vai-table--striped tbody tr:nth-child(even):hover td { background: var(--vai-surface-hover); }

.vai-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.vai-table .actions { text-align: right; white-space: nowrap; }

/* Empty state in tables */
.vai-empty {
  padding: 56px 20px;
  text-align: center;
  color: var(--vai-ink-muted);
}
.vai-empty .vai-icon {
  width: 40px; height: 40px;
  color: var(--vai-ink-faint);
  margin: 0 auto 12px;
}
.vai-empty h4 { font-size: var(--vai-fs-15); color: var(--vai-ink); margin-bottom: 4px; }
.vai-empty p { font-size: var(--vai-fs-12); }

/* ============================== TABS ============================== */

.vai-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--vai-border-soft);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vai-tabs::-webkit-scrollbar { display: none; }

.vai-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: var(--vai-fs-13);
  font-weight: 500;
  color: var(--vai-ink-soft);
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--vai-dur-fast);
  white-space: nowrap;
  margin-bottom: -1px;
}
.vai-tab:hover { color: var(--vai-ink); }
.vai-tab.is-active {
  color: var(--vai-orange);
  border-bottom-color: var(--vai-orange);
  font-weight: 600;
}
.vai-tab .vai-icon { width: 14px; height: 14px; }

/* Filter chips */
.vai-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  font-size: var(--vai-fs-12);
  color: var(--vai-ink-soft);
  background: var(--vai-surface-muted);
  border: 1px solid var(--vai-border-soft);
  border-radius: var(--vai-r-pill);
  cursor: pointer;
  transition: all var(--vai-dur-fast);
}
.vai-chip:hover { background: var(--vai-surface-hover); color: var(--vai-ink); }
.vai-chip.is-active {
  background: var(--vai-orange-tint);
  color: var(--vai-orange);
  border-color: var(--vai-orange-line);
  font-weight: 600;
}

/* ============================== KPI CARDS ============================== */

.vai-kpi {
  background: var(--vai-surface);
  border: 1px solid var(--vai-border-soft);
  border-radius: var(--vai-r-12);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: all var(--vai-dur-base);
}
.vai-kpi:hover {
  border-color: var(--vai-border);
  box-shadow: var(--vai-shadow-2);
}

.vai-kpi__head {
  display: flex; align-items: center; justify-content: space-between;
}
.vai-kpi__label {
  font-size: var(--vai-fs-11);
  font-weight: 600;
  color: var(--vai-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vai-kpi__icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--vai-r-8);
  background: var(--vai-orange-tint);
  color: var(--vai-orange);
}
.vai-kpi__value {
  font-size: var(--vai-fs-24);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--vai-ink);
  font-variant-numeric: tabular-nums;
}
.vai-kpi__delta {
  font-size: var(--vai-fs-11);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vai-kpi__delta--up   { color: var(--vai-success); }
.vai-kpi__delta--down { color: var(--vai-danger); }
.vai-kpi__delta--flat { color: var(--vai-ink-muted); }

.vai-kpi__spark {
  height: 32px;
  margin: 4px -2px -2px;
}

/* ============================== PROGRESS ============================== */

.vai-progress {
  width: 100%;
  height: 6px;
  background: var(--vai-border-soft);
  border-radius: var(--vai-r-pill);
  overflow: hidden;
}
.vai-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--vai-orange), #FF9A5C);
  border-radius: var(--vai-r-pill);
  transition: width 0.5s var(--vai-ease);
}

/* ============================== MODAL ============================== */

.vai-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 19, 38, 0.55);
  backdrop-filter: blur(6px);
  z-index: var(--vai-z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vai-dur-base);
}
.vai-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.vai-modal {
  background: var(--vai-surface);
  border-radius: var(--vai-r-16);
  box-shadow: var(--vai-shadow-4);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(8px);
  transition: transform var(--vai-dur-base);
}
.vai-modal-backdrop.is-open .vai-modal { transform: translateY(0); }

.vai-modal--lg { max-width: 800px; }
.vai-modal--xl { max-width: 1100px; }

.vai-modal__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--vai-border-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.vai-modal__title { font-size: var(--vai-fs-16); font-weight: 700; color: var(--vai-ink); }
.vai-modal__body { padding: 22px; overflow-y: auto; }
.vai-modal__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--vai-border-soft);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--vai-surface-soft);
}

/* ============================== TOAST ============================== */

.vai-toast-stack {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: var(--vai-z-toast);
  pointer-events: none;
}
.vai-toast {
  background: var(--vai-navy);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--vai-r-10);
  box-shadow: var(--vai-shadow-3);
  display: flex; align-items: center; gap: 10px;
  font-size: var(--vai-fs-13);
  min-width: 260px;
  pointer-events: auto;
  border-left: 3px solid var(--vai-orange);
  animation: vai-rise-in var(--vai-dur-base) var(--vai-ease);
}
.vai-toast--success { border-left-color: var(--vai-success); }
.vai-toast--error   { border-left-color: var(--vai-danger); }
.vai-toast .vai-icon { color: var(--vai-orange); }
.vai-toast--success .vai-icon { color: var(--vai-success); }
.vai-toast--error   .vai-icon { color: var(--vai-danger); }

/* ============================== DROPDOWN ============================== */

.vai-dropdown {
  position: absolute;
  background: var(--vai-surface);
  border: 1px solid var(--vai-border-soft);
  border-radius: var(--vai-r-10);
  box-shadow: var(--vai-shadow-3);
  min-width: 180px;
  padding: 6px;
  z-index: var(--vai-z-overlay);
  animation: vai-rise-in var(--vai-dur-fast) var(--vai-ease);
}
.vai-dropdown__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--vai-r-6);
  font-size: var(--vai-fs-13);
  color: var(--vai-ink);
  cursor: pointer;
  transition: background var(--vai-dur-fast);
}
.vai-dropdown__item:hover { background: var(--vai-surface-hover); }
.vai-dropdown__item--danger { color: var(--vai-danger); }
.vai-dropdown__sep { height: 1px; background: var(--vai-border-soft); margin: 4px 0; }

/* ============================== STEPPER ============================== */

.vai-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--vai-surface);
  border: 1px solid var(--vai-border-soft);
  border-radius: var(--vai-r-12);
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vai-stepper::-webkit-scrollbar { display: none; }

.vai-step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border-radius: var(--vai-r-8);
  font-size: var(--vai-fs-12);
  color: var(--vai-ink-muted);
  cursor: pointer;
  transition: all var(--vai-dur-fast);
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}
.vai-step:hover { background: var(--vai-surface-hover); color: var(--vai-ink); }
.vai-step__num {
  width: 22px; height: 22px;
  border-radius: var(--vai-r-pill);
  background: var(--vai-border-soft);
  color: var(--vai-ink-muted);
  font-weight: 700;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vai-step__label { font-weight: 600; }

.vai-step.is-active {
  background: var(--vai-orange-tint);
  color: var(--vai-orange);
}
.vai-step.is-active .vai-step__num { background: var(--vai-orange); color: #fff; }

.vai-step.is-done { color: var(--vai-success); }
.vai-step.is-done .vai-step__num { background: var(--vai-success); color: #fff; }

@media (max-width: 720px) {
  .vai-step__label { display: none; }
  .vai-step { flex: 0 0 auto; padding: 8px 10px; }
}

/* ============================== STATUS PILLS ============================== */

.vai-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--vai-fs-11);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--vai-r-pill);
  letter-spacing: 0.2px;
}
.vai-status .dot { width: 6px; height: 6px; border-radius: var(--vai-r-pill); }

.vai-status--draft     { background: #F1F5F9; color: #64748B; }
.vai-status--scheduled { background: #DBEAFE; color: #1D4ED8; }
.vai-status--running   { background: #DCFCE7; color: #15803D; }
.vai-status--running .dot { background: #15803D; animation: vai-pulse 1.4s ease-in-out infinite; }
.vai-status--paused    { background: #FEF3C7; color: #B45309; }
.vai-status--done      { background: #E2E8F0; color: #475569; }
.vai-status--error     { background: #FEE2E2; color: #B91C1C; }
.vai-status--api-wait  { background: #EDE9FE; color: #6D28D9; }
.vai-status--processing{ background: #FFEDD5; color: #C2410C; }
.vai-status--limit     { background: #FEF3C7; color: #92400E; }

/* ============================== AVATAR ============================== */

.vai-avatar {
  width: 32px; height: 32px;
  border-radius: var(--vai-r-pill);
  background: linear-gradient(135deg, var(--vai-orange), #FF9A5C);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.vai-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.vai-avatar--lg { width: 44px; height: 44px; font-size: 16px; }