/* ═══════════════════════════════════════════════════════════════════
   Cumbuca DS — Forms (par do forms.tsx; importar UMA vez no app)

   Specs do Figma (Brand Library › Forms): controles de 48px, radius 8,
   pad 12×16, Regular 16/135%; label Bold 14 (fonte de UI do contexto:
   Inter em ferramentas, Fustat no website); Field =
   label + controle com gap 8. Extensões de ferramenta: Textarea, Toggle,
   hint/error do Field, estado inválido. Tema dark vem só dos tokens
   --input-* / --label-text — nenhum seletor por tema aqui.
   ═══════════════════════════════════════════════════════════════════ */

.ds-input,
.ds-select__control {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  color: var(--text-body);
  font-family: var(--font-body);
  /* por contexto: Body Base 14 em ferramentas, Body MD 16 no website (Figma) */
  font-size: var(--control-font-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0; /* componente segue o Figma */
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.ds-input:hover:not(:disabled),
.ds-select__control:hover:not(:disabled) {
  border-color: var(--input-border-hover);
}

/* Foco: o Figma pede borda de 2px — borda 1px + inset shadow de 1px lê
   igual, sem layout shift */
.ds-input:focus-visible,
.ds-select__control:focus-visible {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: inset 0 0 0 1px var(--input-border-focus);
}

/* Inválido (erro de validação): --color-danger, também no foco */
.ds-input[aria-invalid='true'],
.ds-select__control[aria-invalid='true'] {
  border-color: var(--color-danger);
}

.ds-input[aria-invalid='true']:focus-visible,
.ds-select__control[aria-invalid='true']:focus-visible {
  border-color: var(--color-danger);
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

/* disabled é o ÚNICO estado com fundo cinza (inputs normais são brancos) */
.ds-input:disabled,
.ds-select__control:disabled {
  background: var(--input-bg-disabled);
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Input com prefixo — o grupo é a caixa, o input só o texto ────── */

.ds-input-group {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--control-font-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
  cursor: text;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.ds-input-group:hover:not([data-disabled]) {
  border-color: var(--input-border-hover);
}

.ds-input-group:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: inset 0 0 0 1px var(--input-border-focus);
}

.ds-input-group[data-invalid] {
  border-color: var(--color-danger);
}

.ds-input-group[data-invalid]:focus-within {
  box-shadow: inset 0 0 0 1px var(--color-danger);
}

.ds-input-group[data-disabled] {
  background: var(--input-bg-disabled);
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-input-group__prefix {
  flex: none;
  color: var(--text-muted);
  white-space: nowrap;
  user-select: none;
}

.ds-input-group__control {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text-body);
  font: inherit;
  letter-spacing: inherit;
}

.ds-input-group__control:disabled {
  cursor: not-allowed;
}

/* ── Textarea — pele do input, altura livre ────────────────────────── */

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

/* ── Select ────────────────────────────────────────────────────────── */

.ds-select {
  position: relative;
  display: block;
}

.ds-select__control {
  appearance: none;
  /* 12px de pad + 20px de chevron + 8px de gap */
  padding-right: 40px;
}

/* Placeholder: com a opção vazia escolhida (o "Selecione" disabled/hidden),
   o texto sai na cor de placeholder, como no input e no MultiSelect. As
   opções da lista voltam à cor do texto. */
.ds-select__control:has(option[value='']:checked) {
  color: var(--input-placeholder);
}

.ds-select__control option {
  color: var(--text-body);
}

.ds-select__chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  /* herda currentColor do contexto — funciona nos dois temas */
  pointer-events: none;
}

/* ── MultiSelect — a caixa do Select + menu de Checkbox ────────────── */

.ds-multiselect__trigger {
  display: block;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ds-multiselect__trigger:disabled {
  cursor: not-allowed;
}

.ds-multiselect__placeholder {
  color: var(--input-placeholder);
}

.ds-multiselect__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  padding: 8px;
  overflow-y: auto;
  background: var(--bg-popover);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

.ds-multiselect__options,
.ds-multiselect__group {
  display: flex;
  flex-direction: column;
}

.ds-multiselect__group + .ds-multiselect__group {
  margin-top: 8px;
}

.ds-multiselect__group-label {
  padding: 4px 12px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* a linha inteira é clicável, com hover (classe dobrada: vence o
   width: fit-content do .ds-checkbox, que vem depois no arquivo) */
.ds-multiselect__option.ds-checkbox {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.ds-multiselect__option:hover {
  background: var(--bg-hover);
}

.ds-multiselect__empty {
  padding: 8px 12px;
  color: var(--text-muted);
}

/* ── Label / Field ─────────────────────────────────────────────────── */

.ds-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--label-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* 700 nos dois contextos (apps carregam Inter 700 desde a v4.0) */
  font-weight: var(--weight-bold);
  /* Figma: line-height auto → 20px em 14 (Field = 20 + 8 + 48 = 76) */
  line-height: 1.43;
  /* componente segue o Figma (0) — não herda o --tracking-body do texto corrente */
  letter-spacing: 0;
}

.ds-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ds-field__hint,
.ds-field__error {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-sm);
  line-height: var(--leading-body);
}

.ds-field__hint {
  color: var(--text-muted);
}

.ds-field__error {
  color: var(--color-danger);
}

/* ── Toggle (switch) ───────────────────────────────────────────────── */

.ds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* área clicável restrita ao switch + texto — não à largura da row */
  width: fit-content;
  max-width: 100%;
  color: var(--text-body);
  cursor: pointer;
}

.ds-toggle:has(.ds-toggle__input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* input real invisível — acessível por teclado/leitores */
.ds-toggle__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.ds-toggle__track {
  position: relative;
  flex: none;
  width: 32px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--input-border);
  transition: background var(--duration-fast) var(--ease-out);
}

.ds-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--neutral-white);
  box-shadow: 0 1px 2px rgba(5, 16, 21, 0.25);
  transition: transform var(--duration-fast) var(--ease-out);
}

/* ligado = acento (navy no claro, branco no escuro); o knob ligado usa
   --accent-text para não sumir sobre a trilha branca no escuro */
.ds-toggle__input:checked + .ds-toggle__track {
  background: var(--accent);
}

.ds-toggle__input:checked + .ds-toggle__track .ds-toggle__knob {
  transform: translateX(12px);
  background: var(--accent-text);
}

.ds-toggle__input:focus-visible + .ds-toggle__track {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Checkbox ──────────────────────────────────────────────────────── */

.ds-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  color: var(--text-body);
  font-size: var(--control-font-size);
  line-height: var(--leading-body);
  cursor: pointer;
}

.ds-checkbox:has(.ds-checkbox__input:disabled) {
  cursor: not-allowed;
  opacity: 0.5;
}

/* input real invisível — acessível por teclado/leitores */
.ds-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* caixa 20px alinhada à primeira linha do texto */
.ds-checkbox__box {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: calc((var(--leading-body) * 1em - 20px) / 2);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: transparent;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.ds-checkbox:hover .ds-checkbox__input:not(:disabled) + .ds-checkbox__box {
  border-color: var(--input-border-hover);
}

/* marcada = acento (navy no claro, branco no escuro), check em --accent-text */
.ds-checkbox__input:checked + .ds-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.ds-checkbox__input:focus-visible + .ds-checkbox__box {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ds-checkbox__input[aria-invalid='true']:not(:checked) + .ds-checkbox__box {
  border-color: var(--color-danger);
}

/* ── CheckboxGroup — fieldset com a pele do Field ──────────────────── */

.ds-checkgroup {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* a legend não é item do flex do fieldset: o respiro vem da margem */
.ds-checkgroup > legend {
  padding: 0;
  margin-bottom: 8px;
}

.ds-checkgroup__options {
  display: grid;
  grid-template-columns: repeat(var(--ds-checkgroup-columns, 1), minmax(0, 1fr));
  gap: 12px 24px;
}

@media (max-width: 767px) {
  .ds-checkgroup__options {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-toggle__track,
  .ds-toggle__knob,
  .ds-checkbox__box {
    transition: none;
  }
}