/* FORMA — admin layer
 * tokens.css ja foi carregado via /design-system/tokens.css.
 * Este arquivo adiciona padroes admin (botao, input, pill, card) usando os tokens.
 */

/* Garante que inputs nativos (date/time/datetime-local/select) renderizem
 * no esquema escuro do sistema operacional / browser. Sem isso, o icone do
 * calendar picker e o spinner de hora aparecem em preto sobre fundo escuro. */
:root, html, body {
  color-scheme: dark;
}

/* Recolore o icone do picker (Webkit/Blink) para ficar visivel no dark. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.85) sepia(0) saturate(0) brightness(1.2);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-std);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="week"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

[x-cloak] { display: none !important; }

::selection {
  background: rgba(229, 255, 57, 0.28);
  color: var(--ink-primary-dark);
}

/* Scrollbar discreto sobre fundo escuro */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--stroke-strong); }

/* ------------------------------------------------------------------ */
/* Botoes — espelham .btn do DS (REFERENCE.md secao 2)                 */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn svg { width: 14px; height: 14px; }

.btn-primary    { background: var(--forma-safety);  color: var(--forma-grafite); }
.btn-primary:hover { box-shadow: var(--shadow-cta); }
.btn-secondary  { background: transparent; color: var(--ink-primary-dark); border-color: var(--stroke-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost      { background: transparent; color: var(--ink-primary-dark); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-dark       { background: var(--forma-grafite); color: var(--ink-primary-dark); border-color: var(--stroke-strong); }

.btn-sm { padding: 8px 14px; font-size: 12px; }
.btn-lg { padding: 18px 28px; font-size: 16px; }

/* ------------------------------------------------------------------ */
/* Form fields                                                         */
/* ------------------------------------------------------------------ */
.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-secondary-dark);
  margin-bottom: 8px;
}
.field-required { color: var(--forma-safety); }

.field {
  width: 100%;
  background: var(--surface-0);
  color: var(--ink-primary-dark);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.field::placeholder { color: var(--ink-tertiary-dark); }
.field:focus {
  outline: none;
  border-color: var(--forma-safety);
  box-shadow: 0 0 0 4px rgba(229, 255, 57, 0.18);
}
.field:disabled { opacity: 0.5; cursor: not-allowed; }

textarea.field { min-height: 96px; resize: vertical; }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23BFC8CA' stroke-width='1.5'><path d='M3 4.5l3 3 3-3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field-error .field {
  border-color: var(--signal-alert);
}
.field-error .field:focus {
  box-shadow: 0 0 0 4px rgba(229, 96, 60, 0.18);
}
.field-help {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-tertiary-dark);
}
.field-error .field-help { color: var(--signal-alert); }

/* ------------------------------------------------------------------ */
/* Pills                                                               */
/* ------------------------------------------------------------------ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: rgba(255,255,255,0.04);
}
.pill-success { color: var(--signal-success); background: rgba(123,211,137,0.10); }
.pill-warn    { color: var(--signal-warn);    background: rgba(240,181,66,0.10); }
.pill-alert   { color: var(--signal-alert);   background: rgba(229,96,60,0.10); }
.pill-cta     { color: var(--forma-safety);   background: rgba(229,255,57,0.08); }
.pill-muted   { color: var(--ink-secondary-dark); background: rgba(243,243,243,0.04); }
.pill-ghost   { color: var(--ink-tertiary-dark); border-color: var(--stroke); background: transparent; }

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */
.card {
  background: var(--surface-1);
  border: 1px solid var(--stroke-subtle);
  border-radius: 16px;
  padding: 24px;
}
.card-soft {
  background: var(--surface-2);
  border: 1px solid var(--stroke-subtle);
  border-radius: 16px;
  padding: 24px;
}

/* ------------------------------------------------------------------ */
/* Eyebrow (kicker)                                                    */
/* ------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-tertiary-dark);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* ------------------------------------------------------------------ */
/* Em accent (DS convention)                                           */
/* ------------------------------------------------------------------ */
em {
  color: var(--forma-safety);
  font-style: normal;
}