/* Campos — preenchidos: o vazio a preencher é uma mancha --surface-2 e o
   foco a "acende" (fundo branco + borda azul) — mesma regra dos botões,
   todo campo tem fundo. Rótulo em mono minúsculo. O markup vem do
   LaudoFormBuilder (app/form_builders/laudo_form_builder.rb). */

.field {
  /* Filho direto: controles compostos (cartões de escolha, caixa de remarcar)
     têm label próprio e não podem herdar tipografia de rótulo de campo.

     O rótulo que tem chip ao lado é NETO — mora dentro do .field-head —, e por
     isso entra aqui pela segunda alternativa. Sem ela, todo rótulo com acesso
     ao catálogo (Paciente e Clínica no pedido, a senha na porta) perdia o mono
     caps e voltava a ser sans, que é a tipografia de leitura e não de campo. */
  & > label, & > .field-head > label {
    display: block;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-faint);

    & .req { color: var(--urgent); }
  }

  /* A folga até o controle é só do rótulo solto: quem está no .field-head já
     tem a folga da linha inteira, e repeti-la aqui desalinharia o chip. */
  & > label { margin-bottom: 6px; }

  /* rádio e caixa de seleção mantêm o desenho nativo — quem os veste é o
     componente que os usa (.cards, .choicebox, .sibling-row) */
  & input:not([type="checkbox"]):not([type="radio"]), & select, & textarea {
    width: 100%;
    font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    background: var(--surface-2);
    /* A régua do campo é token e não valor cravado: é assim que a variante de
       erro entra (ver .field.is-error, no fim deste bloco) sem disputar
       especificidade com este seletor, que é alto por causa dos dois :not(). */
    border: 1px solid var(--field-line, transparent); border-radius: var(--r);
    padding: 9px 12px; line-height: normal;

    &::placeholder { color: var(--ink-faint); }

    &:focus { outline: none; background: var(--surface); border-color: var(--accent); }
  }

  /* Altura única em todo controle de uma linha. Sem isto cada um fecha numa
     altura diferente: o select herda a entrelinha do corpo (o input não, o
     navegador força normal) e o campo de data ainda soma o ícone nativo.
     1lh é a entrelinha do próprio campo, então a conta acompanha a fonte. */
  & input:not([type="checkbox"]):not([type="radio"]), & select {
    block-size: calc(1lh + 2 * 9px + 2 * 1px);
  }

  & textarea { resize: vertical; min-height: 64px; }

  & input:is([type="date"], [type="time"]) { cursor: pointer; }

  & .error-msg { font-size: 12.5px; color: var(--urgent); margin: 5px 0 0; }

  & .help { font-size: 12.5px; color: var(--ink-faint); margin: 5px 0 0; }
}

/* dia e hora: dois widgets nativos dividindo um campo só, com os dois turnos
   de sempre ao lado — o chip escreve no campo de hora, não o substitui. */
.whenrow {
  display: flex; align-items: center; gap: 8px;

  & input[type="date"] { flex: 1.4; }
  & input[type="time"] { flex: 1; }
  & :where(.chip) { flex: none; }
}

/* Rótulo com acesso ao cadastro da entidade — uma linha, chips de altura
   única, sem quebra. "novo" abre o formulário; "editar" abre a lista. */
.field-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;

  & > label { margin-bottom: 0; white-space: nowrap; }
}

.head-actions { display: inline-flex; gap: 6px; flex: none; }

.edit-link {
  border: 0; cursor: pointer; border-radius: var(--r); white-space: nowrap;
  font-family: var(--mono); font-size: 10px; line-height: 1.5; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-2); padding: 3px 10px;

  &:hover { color: var(--accent); background: var(--accent-soft); }
}

.edit-link--new {
  color: var(--accent); background: var(--accent-soft);

  &:hover { color: var(--accent-ink); background: var(--accent); }
}

/* Campo com erro — acende a régua pelo token do componente. Como declaração
   direta (`border-color`) esta regra perdia: `.field.is-error` soma duas
   classes, e o seletor do controle lá em cima soma uma classe, um elemento e
   dois `:not([type=…])`, que contam como atributo cada. O erro ficava escrito
   no HTML e invisível na tela, em todo formulário do app. */
.field.is-error { --field-line: var(--urgent); }

/* ── dropdown ─────────────────────────────────────────────
   Select customizável (appearance: base-select) onde houver suporte;
   fallback: picker nativo + chevron próprio no controle fechado. */

.selectwrap {
  position: relative;

  &::after {
    content: ""; position: absolute; right: 12px; top: 50%;
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--ink-faint); border-bottom: 1.5px solid var(--ink-faint);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
  }
}

.field select { appearance: none; cursor: pointer; }

@supports (appearance: base-select) {
  .field select,
  .field select::picker(select) { appearance: base-select; }

  .selectwrap::after { display: none; }

  .field select::picker-icon { color: var(--ink-faint); transition: rotate .15s ease; }
  .field select:open::picker-icon { rotate: 180deg; }

  .field select::picker(select) {
    background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r);
    padding: 4px; margin-top: 4px;
    box-shadow: 0 8px 24px rgb(22 35 46 / .14);
    opacity: 0;
    transition: opacity .12s ease, overlay .12s ease allow-discrete, display .12s ease allow-discrete;
  }

  .field select:open::picker(select) { opacity: 1; }

  @starting-style {
    .field select:open::picker(select) { opacity: 0; }
  }

  .field select option {
    font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    padding: 8px 12px; border-radius: var(--r);
    background: var(--surface); cursor: pointer;

    &:hover, &:focus { background: var(--accent-soft); }

    &:checked { font-weight: 600; color: var(--accent); }

    &::checkmark { order: 1; margin-left: auto; content: "▪"; color: var(--accent); }
  }
}