/* ============================================================
   CreDrive — componentes base (spec 02 -> design/components.md)
   Botão, input, card, badge, toast, modal, empty state.

   O chrome da interface é preto/branco com índigo como acento (--cd-ink /
   --cd-accent). O Verde Neon saiu de botões, seleção e hover por fadiga visual;
   permanece na marca (logo) e nos temas do site.
   REGRA WCAG que segue valendo onde o verde aparecer: texto sobre verde neon é
   SEMPRE preto (#000000), e o neon NUNCA é cor de texto sobre fundo claro.
   ============================================================ */

/* ---------------------------------------------------------------- botões */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cd-space-2);
  border-radius: var(--cd-radius-button);
  padding: var(--cd-space-3) var(--cd-space-6);
  cursor: pointer;
  font-weight: var(--cd-font-weight-medium);
  transition: box-shadow .18s ease, filter .18s ease, background .18s ease;
  border: 1px solid transparent;
}

.cd-btn-primary {
  /* Ação principal: quase-preto com texto branco (17.82:1). O botão verde neon
     foi retirado por fadiga visual em uso prolongado. */
  background: var(--cd-ink);
  color: var(--cd-text-on-ink);
  font-weight: var(--cd-font-weight-bold);   /* 700 */
  border: 0;
  box-shadow: var(--cd-shadow-sm);
}
.cd-btn-primary:hover { background: var(--cd-ink-hover); box-shadow: var(--cd-shadow-md); }
.cd-btn-primary:active { background: #000000; }

/* Ação secundária de ênfase (índigo), quando duas ações competem na mesma barra. */
.cd-btn-accent {
  background: var(--cd-accent);
  color: var(--cd-text-on-ink);
  font-weight: var(--cd-font-weight-bold);
  border: 0;
  box-shadow: var(--cd-shadow-sm);
}
.cd-btn-accent:hover { background: var(--cd-accent-hover); box-shadow: var(--cd-shadow-md); }

.cd-btn-secondary {
  background: var(--cd-bg-surface);
  color: var(--cd-text-primary);
  border: 1px solid var(--cd-border-muted);
}
.cd-btn-secondary:hover { background: var(--cd-bg-subtle); }

.cd-btn-danger {
  background: var(--cd-bg-surface);
  color: var(--cd-status-rejected);
  border: 1px solid var(--cd-status-rejected);
}
.cd-btn-danger:hover { background: var(--cd-status-rejected-bg); }

.cd-btn:disabled,
.cd-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.cd-btn-icon {
  padding: var(--cd-space-2);
  border-radius: var(--cd-radius-button);
  background: transparent;
  border: 0;
  color: var(--cd-text-secondary);
  cursor: pointer;
}
.cd-btn-icon:hover { background: var(--cd-bg-subtle); color: var(--cd-text-primary); }

/* Link: índigo (4.59:1 sobre branco). */
.cd-link-accent {
  color: var(--cd-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- input */
/* O atributo [hidden] precisa vencer os `display` dos componentes.
   `[hidden]` vale `display: none` só pela folha do navegador, que perde para
   qualquer regra de classe — então `.cd-field[hidden]` continuava ocupando
   espaço na grade, com o campo invisível mas empurrando o resto. Já mordeu na
   jornada do site e voltou a morder nos filtros do CRM; por isso a regra vive
   aqui, valendo para os dois hosts. */
[hidden] { display: none !important; }

.cd-field { display: flex; flex-direction: column; gap: var(--cd-space-2); }
.cd-label { font-size: 14px; font-weight: var(--cd-font-weight-medium); }

.cd-input {
  width: 100%;
  background: var(--cd-bg-surface);
  border: 1px solid var(--cd-border-muted);
  border-radius: var(--cd-radius-input);     /* 4px */
  color: var(--cd-text-primary);
  padding: var(--cd-space-3);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cd-input::placeholder { color: var(--cd-text-secondary); }
.cd-input:focus {
  outline: none;
  border-color: var(--cd-accent);            /* borda vira índigo */
  box-shadow: var(--cd-focus-ring);          /* + anel suave */
}
.cd-input:disabled { background: var(--cd-bg-subtle); color: var(--cd-text-secondary); }
.cd-input.has-error { border-color: var(--cd-status-rejected); }

.cd-field__error {
  display: none;
  align-items: center;
  gap: var(--cd-space-1);
  color: var(--cd-status-rejected);
  font-size: 13px;
}
.cd-field__error.is-visible { display: flex; }
.cd-field__hint { color: var(--cd-text-secondary); font-size: 13px; }

/* ---------------------------------------------------------------- card */
.cd-card {
  background: var(--cd-bg-surface);
  border: 1px solid var(--cd-border-muted);
  border-radius: var(--cd-radius-card);
  box-shadow: var(--cd-shadow-sm);
  padding: var(--cd-space-6);
}
.cd-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cd-space-4);
  margin-bottom: var(--cd-space-4);
}

/* ---------------------------------------------------------------- badge */
.cd-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-1);
  padding: 4px var(--cd-space-3);
  border-radius: var(--cd-radius-pill);
  font-size: 13px;
  font-weight: 600;
}
.cd-badge .material-symbols-outlined { font-size: 16px; }
.cd-badge-approved { background: var(--cd-status-approved-bg); color: var(--cd-status-approved); }
.cd-badge-pending  { background: var(--cd-status-pending-bg);  color: var(--cd-status-pending); }
.cd-badge-rejected { background: var(--cd-status-rejected-bg); color: var(--cd-status-rejected); }

/* ---------------------------------------------------------------- toast */
.cd-toast-container {
  position: fixed;
  right: var(--cd-space-6);
  bottom: var(--cd-space-6);
  z-index: 1000;
  display: flex;
  flex-direction: column-reverse;   /* empilha de baixo para cima */
  gap: var(--cd-space-3);
  max-width: min(400px, calc(100vw - var(--cd-space-8)));
}

.cd-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--cd-space-3);
  padding: var(--cd-space-3) var(--cd-space-4);
  border-radius: var(--cd-radius-button);
  box-shadow: var(--cd-shadow-md);
  animation: cd-toast-in .22s ease-out;
}
.cd-toast.is-leaving { animation: cd-toast-out .18s ease-in forwards; }
.cd-toast__message { flex: 1; font-size: 14px; }

.cd-toast__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  opacity: .7;
  padding: 0;
  line-height: 1;
}
.cd-toast__close:hover { opacity: 1; }

/* Sucesso: fundo tênue com texto verde escuro legível — mesma linguagem dos
   demais toasts, sem o neon aceso. */
.cd-toast-success {
  background: var(--cd-status-approved-bg);
  color: var(--cd-status-approved);
  font-weight: var(--cd-font-weight-medium);
}
.cd-toast-error {
  background: var(--cd-status-rejected-bg);
  color: var(--cd-status-rejected);
  border: 1px solid var(--cd-status-rejected);
}
.cd-toast-info {
  background: var(--cd-bg-surface);
  color: var(--cd-text-primary);
  border: 1px solid var(--cd-border-muted);
}

@keyframes cd-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cd-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .cd-toast, .cd-toast.is-leaving { animation: none; }
}

/* ---------------------------------------------------------------- modal */
.cd-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cd-space-4);
  background: rgba(16, 20, 24, .45);
  animation: cd-fade-in .15s ease-out;
}

.cd-modal {
  background: var(--cd-bg-surface);
  border-radius: var(--cd-radius-card);
  box-shadow: var(--cd-shadow-md);
  width: 100%;
  max-width: 440px;
  padding: var(--cd-space-6);
  animation: cd-modal-in .18s ease-out;
}
.cd-modal__title {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  font-size: 18px;
  font-weight: var(--cd-font-weight-bold);
  margin-bottom: var(--cd-space-3);
}
.cd-modal__message { color: var(--cd-text-secondary); margin-bottom: var(--cd-space-6); }
.cd-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--cd-space-3);
  /* Respiro acima dos botões. Sem isto eles encostam no último campo — no modal
     de confirmação passava despercebido porque a mensagem tem margem própria,
     mas num modal com formulário o botão fica colado no textarea. */
  margin-top: var(--cd-space-5, 20px);
}
.cd-modal--danger .cd-modal__title .material-symbols-outlined { color: var(--cd-status-rejected); }

@keyframes cd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-modal-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cd-modal-backdrop, .cd-modal { animation: none; }
}

/* ---------------------------------------------------------------- empty state */
.cd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cd-space-3);
  padding: var(--cd-space-12) var(--cd-space-6);
}
.cd-empty .material-symbols-outlined {
  font-size: 48px;
  color: var(--cd-text-secondary);
}
.cd-empty__title { font-weight: var(--cd-font-weight-bold); }
.cd-empty__text { color: var(--cd-text-secondary); font-size: 14px; max-width: 44ch; }

/* Cabeçalho do modal: título, subtítulo e o X de fechar. */
.cd-modal__head {
  display: flex;
  align-items: flex-start;
  gap: var(--cd-space-3);
  margin-bottom: var(--cd-space-4);
}
.cd-modal__titles { flex: 1 1 auto; min-width: 0; }
.cd-modal__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--cd-text-secondary);
}
.cd-modal__close {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cd-text-secondary);
  cursor: pointer;
}
.cd-modal__close:hover { background: var(--cd-bg-subtle); color: var(--cd-text-primary); }
.cd-modal__close:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 2px; }