/*
 * Formulários e botões do Ponto — limpos e densos (estilo Linear).
 * Bordas sutis, fundo surface, foco com acento. Sem sombras chamativas.
 */

label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-subtle);
  opacity: 0.7;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-border-strong);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

/* Seta do select desenhada inline (sem asset), tingida pelo texto secundário.
   Cores: Catppuccin Latte Subtext 0 (#5c5f77) claro / Mocha Subtext 1 (#a6adc8) escuro. */
select {
  padding-right: var(--space-6);
  background-image:
    linear-gradient(45deg, transparent 50%, light-dark(#5c5f77, #a6adc8) 50%),
    linear-gradient(135deg, light-dark(#5c5f77, #a6adc8) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    5px 5px,
    5px 5px;
}

/*
 * Botões. .btn = acento sólido; .btn--quiet = neutro.
 * input[type=submit] e button[type=submit] herdam o visual de .btn por padrão,
 * pra que os forms existentes (auth) fiquem certos sem classe extra.
 * Só submits ganham o acento implicitamente: <button> de toggle/ícone (Stimulus)
 * fica neutro de propósito. Links (<a>/link_to) só viram botão com class="btn".
 */
.btn,
input[type="submit"],
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--color-on-accent);
  background-color: var(--color-accent);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.btn:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  color: var(--color-on-accent);
  background-color: var(--color-accent-hover);
}

.btn:disabled,
input[type="submit"]:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/*
 * Modificadores com a classe DOBRADA (.btn.btn--quiet) de propósito: um button_to
 * gera <button type="submit">, e o seletor base `button[type="submit"]` (0,1,1)
 * venceria um modificador de classe única (0,1,0) na cor de fundo — o Arquivar/
 * Deletar/Sair sairiam com o acento sólido. Dobrar a classe (0,2,0) faz o
 * modificador ganhar sem tocar no visual do .btn base. Vale p/ os menus <details>
 * do admin e dos clientes.
 */
.btn.btn--quiet {
  color: var(--color-text);
  background-color: transparent;
  border-color: var(--color-border);
}

.btn.btn--quiet:hover {
  color: var(--color-text);
  background-color: var(--color-surface-sunken);
  border-color: var(--color-border-strong);
}

.btn.btn--danger {
  color: var(--color-on-danger);
  background-color: var(--color-danger);
  border-color: transparent;
}

.btn.btn--danger:hover {
  color: var(--color-on-danger);
  background-color: color-mix(in srgb, var(--color-danger) 88%, black);
}

/* Botão pequeno (ações inline densas, ex.: linha de task). Classe dobrada pela mesma
 * razão dos demais modificadores (vencer o seletor base button[type="submit"]). */
.btn.btn--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

/*
 * Alvo de toque no mobile (Q69 é PWA). No desktop a densidade manda e os botões
 * ficam compactos; abaixo de 48rem todo botão vira alvo de toque de 36px (2.25rem —
 * o dono achou 44px e 40px grandes demais, 07/07; 36 ainda cobre o AA de 24px).
 * Vale pro .btn base (Iniciar/Parar), pro .btn--sm (o ⋮ da linha,
 * "Adicionar manualmente", "Tags", Salvar/Cancelar inline) e pro summary que vira
 * botão. Só min-height — a tipografia densa e o layout não mudam.
 */
@media (max-width: 48rem) {
  .btn,
  input[type="submit"],
  button[type="submit"] {
    min-height: 2.25rem;
  }

  /* Inputs acompanham a altura dos botões (mesmo alvo de toque) — senão o
     Iniciar sai mais alto que o campo de descrição na barra do timer. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  select {
    min-height: 2.25rem;
  }

  .btn.btn--sm {
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
  }
}


/* Header suave de acento no TOPO dos panels de form (pedido do dono: a mesma
   linha-assinatura do topo do app, versão 2px, só no topo — não nas laterais).
   Classe dobrada (0,2,0) pra vencer o `border:` shorthand dos arquivos de tela
   que carregam depois — mesmo truque dos .btn.btn--* (sem !important). */
.manual-entry__form.manual-entry__form,
.tracker-entry--editing.tracker-entry--editing,
.report-filters__body.report-filters__body,
.card.card {
  border-top: 2px solid var(--color-accent);
}