/* =============================================================================
   components.css — Componentes reutilizáveis do Admin SPA
   card, fields, buttons, toast, spinner, toggle, table, modal
   ============================================================================= */

/* --- Card --- */
.card {
  background: rgb(var(--slate-2, var(--lv-slate-2)));
  border: 1px solid rgb(var(--slate-6, var(--lv-slate-6)));
  border-radius: 0.75rem;
  padding: 1.25rem;
}

/* --- Campos de formulário --- */
.field-group { display: flex; flex-direction: column; gap: 0.375rem; }

.field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(var(--slate-11, var(--lv-slate-11)));
}

.field-base {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.75rem;
  background: rgb(var(--slate-3, var(--lv-slate-3)));
  border: 1px solid rgb(var(--slate-6, var(--lv-slate-6)));
  border-radius: 0.5rem;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 100ms ease-out, box-shadow 100ms ease-out;
}

.field-base:focus {
  border-color: rgb(var(--blue-9, var(--lv-blue-9)));
  box-shadow: 0 0 0 2px rgb(var(--blue-9, var(--lv-blue-9)) / 0.2);
}

.field-base::placeholder { color: rgb(var(--slate-9, var(--lv-slate-9))); }

.field-error {
  color: rgb(var(--ruby-9, var(--lv-ruby-9)));
  font-size: 0.8rem;
  margin-top: 0.125rem;
}

.field-hint {
  color: rgb(var(--slate-11, var(--lv-slate-11)));
  font-size: 0.8rem;
  margin-top: 0.125rem;
}

.setup-description {
  color: rgb(var(--slate-11, var(--lv-slate-11)));
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.field-base--compact {
  width: auto;
  height: 1.75rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
}

.field-base--compact-wide {
  width: 9rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
}

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 460;
  text-decoration: none;
  transition: all 100ms ease-out;
  outline: 1px solid transparent;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active:enabled { transform: scale(0.98); }

.btn--xs  { height: 1.5rem; padding: 0 0.5rem;  font-size: 0.75rem; }
.btn--sm  { height: 2rem;   padding: 0 0.75rem; }
.btn--md  { height: 2.5rem; padding: 0 1rem; }
.btn--icon-sm { height: 2rem;   width: 2rem;   padding: 0; }
.btn--icon-md { height: 2.5rem; width: 2.5rem; padding: 0; }

.btn--solid-blue  { background: rgb(var(--blue-9,  var(--lv-blue-9)));  color: #fff; }
.btn--solid-ruby  { background: rgb(var(--ruby-9,  var(--lv-ruby-9)));  color: #fff; }
.btn--solid-teal  { background: rgb(var(--teal-9,  var(--lv-teal-9)));  color: #fff; }
.btn--solid-blue:hover:enabled,
.btn--solid-ruby:hover:enabled,
.btn--solid-teal:hover:enabled { filter: brightness(1.1); }

.btn--faded-slate {
  background: rgb(var(--slate-9, var(--lv-slate-9)) / 0.1);
  color: rgb(var(--slate-12, var(--lv-slate-12)));
}
.btn--faded-slate:hover:enabled { background: rgb(var(--slate-9, var(--lv-slate-9)) / 0.2); }

.btn--ghost-slate { background: transparent; color: rgb(var(--slate-11, var(--lv-slate-11))); }
.btn--ghost-slate:hover:enabled {
  background: rgb(var(--slate-4, var(--lv-slate-4)));
  color: rgb(var(--slate-12, var(--lv-slate-12)));
}

/* --- Toast --- */
#toast-container {
  position: fixed;
  bottom: 1.25rem; right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  min-width: 220px; max-width: 360px;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: rgb(var(--slate-3, var(--lv-slate-3)));
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  border: 1px solid rgb(var(--slate-6, var(--lv-slate-6)));
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
  pointer-events: auto;
}

.toast--success { background: rgb(var(--teal-9,  var(--lv-teal-9))  / 0.15); border-color: rgb(var(--teal-9,  var(--lv-teal-9))  / 0.4); }
.toast--error   { background: rgb(var(--ruby-9,  var(--lv-ruby-9))  / 0.15); border-color: rgb(var(--ruby-9,  var(--lv-ruby-9))  / 0.4); }
.toast--warning { background: rgb(var(--amber-9, var(--lv-amber-9)) / 0.15); border-color: rgb(var(--amber-9, var(--lv-amber-9)) / 0.4); }

/* --- Spinner --- */
.spinner-wrap { display: flex; justify-content: center; padding: 2rem; }

.spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid rgb(var(--slate-6, var(--lv-slate-6)));
  border-top-color: rgb(var(--blue-9, var(--lv-blue-9)));
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Empty state --- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 1rem; text-align: center; }
.empty-state__icon { font-size: 2rem; }
.empty-state__msg  { color: rgb(var(--slate-10, var(--lv-slate-10))); font-size: 0.875rem; }

/* --- Toggle switch --- */
.toggle-label { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; font-size: 0.875rem; color: rgb(var(--slate-12, var(--lv-slate-12))); user-select: none; }
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle-track {
  position: relative;
  width: 2.25rem; height: 1.25rem;
  background: rgb(var(--slate-6, var(--lv-slate-6)));
  border-radius: 9999px;
  transition: background 150ms ease-out;
  flex-shrink: 0;
}

.toggle-input:checked + .toggle-track { background: rgb(var(--blue-9, var(--lv-blue-9))); }
.toggle-input:checked + .toggle-track .toggle-thumb { transform: translateX(1rem); }

.toggle-thumb {
  position: absolute;
  top: 0.125rem; left: 0.125rem;
  width: 1rem; height: 1rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 150ms ease-out;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

/* --- Data table --- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.data-table th {
  padding: 0.5rem 0.75rem;
  text-align: left; font-weight: 500;
  color: rgb(var(--slate-10, var(--lv-slate-10)));
  border-bottom: 1px solid rgb(var(--slate-6, var(--lv-slate-6)));
  white-space: nowrap;
}

.data-table td {
  padding: 0.625rem 0.75rem;
  color: rgb(var(--slate-11, var(--lv-slate-11)));
  border-bottom: 1px solid rgb(var(--slate-5, var(--lv-slate-5)));
}

.data-table tbody tr:hover { background: rgb(var(--slate-3, var(--lv-slate-3))); }
.crm-empty-msg { text-align: center; padding: 2rem; color: rgb(var(--slate-9, var(--lv-slate-9))); }

/* --- Modal --- */
dialog.modal {
  background: rgb(var(--slate-2, var(--lv-slate-2)));
  border: 1px solid rgb(var(--slate-6, var(--lv-slate-6)));
  border-radius: 0.75rem;
  padding: 0;
  color: rgb(var(--slate-12, var(--lv-slate-12)));
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
}

dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); }
dialog.modal--md { width: min(480px, 90vw); }
dialog.modal--lg { width: min(640px, 90vw); }

.modal__content { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; }
.modal__title   { font-size: 1rem; font-weight: 600; }
.modal__description { font-size: 0.875rem; color: rgb(var(--slate-10, var(--lv-slate-10))); }
.modal__footer  { display: flex; justify-content: space-between; gap: 0.75rem; }
.modal__footer--center { justify-content: center; }
.modal__header { display: flex; flex-direction: column; gap: 0.5rem; }