/* =====================================================================
   OnlineTyari Pro — Shared UI Components
   Buttons, cards, badges, forms, toasts, skeletons, empty states.
   Consumes tokens from base.css only.
   ===================================================================== */

/* ---- Buttons ---- */
.ot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ot-space-2);
  font-family: var(--ot-font-base);
  font-weight: var(--ot-fw-semibold);
  font-size: var(--ot-fs-sm);
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border-radius: var(--ot-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--ot-transition-fast), box-shadow var(--ot-transition-fast), background var(--ot-transition-fast);
  white-space: nowrap;
}
.ot-btn:active { transform: translateY(1px); }

.ot-btn-primary {
  background: var(--ot-gradient);
  color: var(--ot-white);
  box-shadow: var(--ot-shadow-sm);
}
.ot-btn-primary:hover {
  box-shadow: var(--ot-shadow-md);
  color: var(--ot-white);
}

.ot-btn-secondary {
  background: var(--ot-white);
  color: var(--ot-primary);
  border-color: var(--ot-border);
}
.ot-btn-secondary:hover {
  border-color: var(--ot-primary);
  background: rgba(var(--ot-primary-rgb), 0.05);
}

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

.ot-btn-danger {
  background: var(--ot-danger-bg);
  color: var(--ot-danger);
}

.ot-btn-sm { padding: 0.5rem 1rem; font-size: var(--ot-fs-xs); }
.ot-btn-lg { padding: 1rem 2rem; font-size: var(--ot-fs-base); }
.ot-btn-block { width: 100%; }
.ot-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Cards ---- */
.ot-card {
  background: var(--ot-white);
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-radius-lg);
  box-shadow: var(--ot-shadow-xs);
  transition: box-shadow var(--ot-transition-base), transform var(--ot-transition-base);
  overflow: hidden;
}
.ot-card-hover:hover {
  box-shadow: var(--ot-shadow-md);
  transform: translateY(-3px);
}
.ot-card-body { padding: var(--ot-space-6); }

/* ---- Badges ---- */
.ot-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ot-space-1);
  font-size: var(--ot-fs-xs);
  font-weight: var(--ot-fw-semibold);
  padding: 0.3rem 0.75rem;
  border-radius: var(--ot-radius-full);
  background: rgba(var(--ot-primary-rgb), 0.1);
  color: var(--ot-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ot-badge-success { background: var(--ot-success-bg); color: var(--ot-success); }
.ot-badge-warning { background: var(--ot-warning-bg); color: var(--ot-warning); }
.ot-badge-danger { background: var(--ot-danger-bg); color: var(--ot-danger); }

/* ---- Forms ---- */
.ot-field { margin-bottom: var(--ot-space-5); }
.ot-label {
  display: block;
  font-size: var(--ot-fs-sm);
  font-weight: var(--ot-fw-medium);
  color: var(--ot-text);
  margin-bottom: var(--ot-space-2);
}
.ot-input,
.ot-select,
.ot-textarea {
  width: 100%;
  font-family: var(--ot-font-base);
  font-size: var(--ot-fs-base);
  padding: 0.75rem 1rem;
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-radius-md);
  background: var(--ot-white);
  color: var(--ot-text);
  transition: border-color var(--ot-transition-fast);
}
.ot-input:focus,
.ot-select:focus,
.ot-textarea:focus {
  border-color: var(--ot-primary);
  box-shadow: var(--ot-shadow-focus);
  outline: none;
}
.ot-field-error .ot-input { border-color: var(--ot-danger); }
.ot-error-text { color: var(--ot-danger); font-size: var(--ot-fs-xs); margin-top: var(--ot-space-1); }

/* ---- Toast notifications ---- */
.ot-toast-region {
  position: fixed;
  bottom: var(--ot-space-6);
  right: var(--ot-space-6);
  z-index: var(--ot-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ot-space-3);
  max-width: 360px;
}
.ot-toast {
  background: var(--ot-dark);
  color: var(--ot-white);
  padding: var(--ot-space-4) var(--ot-space-5);
  border-radius: var(--ot-radius-md);
  box-shadow: var(--ot-shadow-lg);
  font-size: var(--ot-fs-sm);
  display: flex;
  align-items: center;
  gap: var(--ot-space-3);
  animation: ot-toast-in var(--ot-transition-base);
}
.ot-toast-success { background: var(--ot-success); }
.ot-toast-error { background: var(--ot-danger); }
@keyframes ot-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Skeleton loading ---- */
.ot-skeleton {
  background: linear-gradient(90deg, var(--ot-border) 25%, #f0f1f6 37%, var(--ot-border) 63%);
  background-size: 400% 100%;
  animation: ot-skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--ot-radius-sm);
}
@keyframes ot-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Empty / error states ---- */
.ot-empty-state {
  text-align: center;
  padding: var(--ot-space-16) var(--ot-space-4);
  color: var(--ot-muted);
}
.ot-empty-state svg { margin-bottom: var(--ot-space-4); opacity: 0.6; }
.ot-empty-state h3 { color: var(--ot-text); margin-bottom: var(--ot-space-2); }
.ot-empty-state p { color: var(--ot-muted); max-width: 420px; margin-inline: auto; }

/* ---- Progress bar ---- */
.ot-progress {
  width: 100%;
  height: 8px;
  background: var(--ot-border);
  border-radius: var(--ot-radius-full);
  overflow: hidden;
}
.ot-progress-bar {
  height: 100%;
  background: var(--ot-gradient);
  border-radius: var(--ot-radius-full);
  transition: width var(--ot-transition-slow);
}

/* ---- Modal ---- */
.ot-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(16, 21, 43, 0.5);
  z-index: var(--ot-z-modal-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ot-transition-base);
}
.ot-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.ot-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  background: var(--ot-white);
  border-radius: var(--ot-radius-lg);
  box-shadow: var(--ot-shadow-lg);
  z-index: var(--ot-z-modal);
  width: min(480px, 92vw);
  padding: var(--ot-space-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ot-transition-base), transform var(--ot-transition-base);
}
.ot-modal.is-open { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }