/* css/components.css */

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 0 var(--spacing-xl);
  min-height: 48px;
  border-radius: var(--radius-full);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-l);
  font-weight: var(--font-weight-500);
  line-height: var(--line-height-body-l);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}
.btn:disabled {
  background-color: var(--button-background-disabled) !important;
  color: var(--button-foreground-disabled) !important;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary {
  background-color: var(--button-background-primary-solid);
  color: var(--button-foreground-primary-on-solid);
}
.btn-primary:hover { opacity: 0.85; }
.btn-destructive {
  background-color: var(--button-background-negative-solid);
  color: #ffffff;
}
.btn-destructive:hover { opacity: 0.9; }
.btn-outline {
  background-color: transparent;
  color: var(--foreground-primary-default);
  border: 1.5px solid var(--stroke-primary-default);
}
.btn-outline:hover { background-color: var(--background-primary-lighter); }
.btn-secondary {
  background-color: var(--button-background-secondary-subtle);
  color: var(--button-foreground-secondary-on-subtle);
}
.btn-secondary:hover { background-color: var(--background-secondary-lighter); }
.btn-tertiary {
  background-color: var(--background-neutral-medium);
  color: var(--foreground-neutral-light);
}
.btn-tertiary:hover { opacity: 0.8; }
.btn-ghost {
  background-color: transparent;
  color: var(--foreground-neutral-default);
}
.btn-ghost:hover { background-color: var(--background-neutral-medium); }
.btn-full { width: 100%; }

/* ─── CARDS ─── */
.card {
  background-color: var(--canvas-white);
  border: 1px solid var(--stroke-neutral-default);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-3xl);
  box-shadow: var(--shadow-custom);
}
.card-sm { padding: var(--spacing-xl); border-radius: var(--radius-xl); }
.card-bordered { border-color: var(--stroke-neutral-default); }
.card-primary {
  background-color: var(--background-primary-lighter);
  border-color: var(--stroke-primary-default);
}
.card-error {
  background-color: var(--background-negative-light);
  border-color: var(--stroke-negative-default);
}
.card-success {
  background-color: var(--background-positive-light);
  border-color: var(--stroke-positive-default);
}
.card-warning {
  background-color: var(--background-warning-light);
  border-color: var(--stroke-warning-default);
}
.card-info {
  background-color: var(--background-info-light);
  border-color: var(--stroke-info-default);
}

/* ─── BADGES ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xxs) 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-label-m);
  font-weight: var(--font-weight-500);
  line-height: var(--line-height-label-m);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-default {
  background-color: var(--background-primary-dark);
  color: var(--primary-100);
}
.badge-secondary {
  background-color: var(--background-secondary-lighter);
  color: var(--foreground-secondary-default);
  border-color: var(--secondary-80);
}
.badge-success {
  background-color: var(--background-positive-medium);
  color: #ffffff;
}
.badge-destructive {
  background-color: var(--danger-40);
  color: #ffffff;
}
.badge-warning {
  background-color: var(--background-warning-light);
  color: var(--foreground-warning-dark);
  border-color: var(--stroke-warning-default);
}
.badge-info {
  background-color: var(--background-info-light);
  color: var(--info-30);
  border-color: var(--stroke-info-default);
}
.badge-outline {
  background-color: transparent;
  color: var(--foreground-neutral-default);
  border-color: var(--stroke-neutral-default);
}

/* ─── FORM CONTROLS ─── */
.form-group { display: flex; flex-direction: column; gap: var(--spacing-md); }
.form-label {
  font-size: var(--font-size-label-l);
  font-weight: var(--font-weight-500);
  color: var(--foreground-neutral-default);
  line-height: var(--line-height-label-l);
}
.form-label .required {
  color: var(--foreground-negative-default);
  margin-left: var(--spacing-xxs);
}
.form-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--spacing-xl);
  border: 1.5px solid var(--stroke-neutral-default);
  border-radius: var(--radius-xl);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-l);
  color: var(--foreground-neutral-default);
  background-color: var(--canvas-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--stroke-primary-default);
  box-shadow: 0 0 0 3px var(--state-primary-light);
}
.form-input.is-error { border-color: var(--stroke-negative-default); }
.form-input.is-error:focus { box-shadow: 0 0 0 3px #f044380d; }
.form-input:disabled {
  background-color: var(--background-neutral-medium);
  color: var(--foreground-neutral-lightest);
  cursor: not-allowed;
}
.form-helper {
  font-size: var(--font-size-body-s);
  color: var(--foreground-neutral-lighter);
  line-height: var(--line-height-body-s);
}
.form-error-msg {
  font-size: var(--font-size-body-s);
  color: var(--foreground-negative-default);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  cursor: pointer;
}
.checkbox {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--stroke-neutral-default);
  border-radius: var(--radius-xs);
  appearance: none; -webkit-appearance: none;
  background-color: var(--canvas-white);
  cursor: pointer; transition: all 0.15s ease;
  position: relative;
}
.checkbox:checked {
  background-color: var(--background-primary-dark);
  border-color: var(--background-primary-dark);
}
.checkbox:checked::after {
  content: '';
  position: absolute; top: 3px; left: 6px;
  width: 5px; height: 9px;
  border: 2px solid #ffffff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}

/* ─── TOAST ─── */
#toast-container {
  position: fixed;
  bottom: var(--spacing-3xl);
  right: var(--spacing-3xl);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 380px;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-custom-lg);
  font-size: var(--font-size-body-l);
  animation: toast-in 0.2s ease forwards;
  min-width: 280px;
  transition: opacity 0.2s ease;
}
.toast-success {
  background-color: var(--background-positive-lighter);
  border: 1px solid var(--stroke-positive-default);
  color: var(--foreground-positive-dark);
}
.toast-error {
  background-color: var(--background-negative-light);
  border: 1px solid var(--stroke-negative-default);
  color: var(--foreground-negative-dark);
}
.toast-warning {
  background-color: var(--background-warning-light);
  border: 1px solid var(--stroke-warning-default);
  color: var(--foreground-warning-dark);
}
.toast-info {
  background-color: var(--background-info-light);
  border: 1px solid var(--stroke-info-default);
  color: var(--info-30);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── PROGRESS STEPPER ─── */
.stepper {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}
.stepper-dot {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid var(--stroke-neutral-default);
  background-color: var(--canvas-white);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-label-m);
  font-weight: var(--font-weight-600);
  color: var(--foreground-neutral-lighter);
  z-index: 1;
  transition: all 0.2s ease;
}
.stepper-step.active .stepper-dot {
  background-color: var(--background-primary-dark);
  border-color: var(--background-primary-dark);
  color: #ffffff;
}
.stepper-step.completed .stepper-dot {
  background-color: var(--background-positive-medium);
  border-color: var(--background-positive-medium);
  color: #ffffff;
}
.stepper-step.error .stepper-dot {
  background-color: var(--background-negative-medium);
  border-color: var(--background-negative-medium);
  color: #ffffff;
}
.stepper-line {
  position: absolute;
  top: 16px; left: 50%; right: -50%;
  height: 2px;
  background-color: var(--stroke-neutral-default);
}
.stepper-step.completed .stepper-line {
  background-color: var(--background-positive-medium);
}
.stepper-label {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-label-m);
  color: var(--foreground-neutral-lighter);
  text-align: center;
  line-height: var(--line-height-label-m);
}
.stepper-step.active .stepper-label {
  color: var(--foreground-primary-default);
  font-weight: var(--font-weight-600);
}

/* Status dots */
.status-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.status-dot-pending  { background-color: var(--foreground-neutral-lightest); }
.status-dot-active   { background-color: var(--background-primary-dark); }
.status-dot-done     { background-color: var(--background-positive-medium); }
.status-dot-error    { background-color: var(--danger-40); }
.status-dot-warning  { background-color: var(--warning-60); }

/* ─── MODAL ─── */
.modal-backdrop {
  position: fixed; inset: 0;
  background-color: #1516186e;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-xl);
}
.modal {
  background-color: var(--canvas-white);
  border-radius: var(--radius-3xl);
  width: 100%; max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-custom-xl);
  animation: modal-in 0.2s ease;
}
.modal-header {
  padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-xl);
  border-bottom: 1px solid var(--stroke-neutral-default);
}
.modal-body { padding: var(--spacing-3xl); }
.modal-footer {
  padding: var(--spacing-xl) var(--spacing-3xl) var(--spacing-3xl);
  border-top: 1px solid var(--stroke-neutral-default);
  display: flex; gap: var(--spacing-lg); justify-content: flex-end;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── PROGRESS BAR ─── */
.progress-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--background-neutral-dark);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--background-primary-dark);
  transition: width 0.5s ease;
}

/* ─── UTILITY ─── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--spacing-xs); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }
.w-full { width: 100%; }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }
.mt-4xl { margin-top: var(--spacing-4xl); }

/* Loading spinner */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--background-primary-light);
  border-top-color: var(--background-primary-dark);
  border-radius: var(--radius-full);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pulse dot animation */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
.pulse { animation: pulse-dot 1.5s ease-in-out infinite; }
.pulse-delay-1 { animation-delay: 0.3s; }
.pulse-delay-2 { animation-delay: 0.6s; }

/* Radio card (option tiles) */
.option-tile {
  cursor: pointer;
  border: 2px solid var(--stroke-neutral-default);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  transition: border-color 0.15s ease, background-color 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
}
.option-tile:hover {
  border-color: var(--stroke-primary-default);
  background-color: var(--background-primary-lighter);
}
.option-tile.selected {
  border-color: var(--stroke-primary-default);
  background-color: var(--background-primary-lighter);
}

/* Divider */
.divider {
  height: 1px;
  background-color: var(--stroke-neutral-default);
}

/* Section title */
.section-title {
  font-size: var(--font-size-title-s);
  font-weight: var(--font-weight-600);
  color: var(--foreground-neutral-lighter);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--stroke-neutral-default);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-5xl) var(--spacing-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  text-align: center;
}
.upload-zone:hover {
  border-color: var(--stroke-primary-default);
  background-color: var(--background-primary-lighter);
}
.upload-zone.has-file {
  border-color: var(--stroke-positive-default);
  background-color: var(--background-positive-light);
}