/* components.css — componentes compartilhados entre web e mobile (carregado
   nos dois). Primeiro componente: o toggle liga/desliga que substitui
   checkbox nativa em preferências booleanas (ver ESTADO-ATUAL.md item 39).

   Escopo deliberadamente restrito a 3 containers — .toggle-field,
   .settings-toggle, .mode-notification — que são exatamente os que hoje
   envolvem uma checkbox booleana de verdade (ligar/desligar uma
   permissão/config). Não usa uma classe genérica tipo `input[type=checkbox]`
   pra não converter sem querer as checkboxes de seleção múltipla (dias da
   semana, funcionários vinculados), que continuam nativas de propósito. */

.toggle-field,
.settings-toggle,
.mode-notification {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* área de toque mínima */
  cursor: pointer;
}

/* O texto descritivo fica à esquerda, o toggle à direita — mesma leitura da
   referência (Telegram/Android). row-reverse inverte só a ordem VISUAL, sem
   mudar a ordem no DOM (input continua vindo antes do texto no HTML, pros
   handlers/labels existentes não precisarem mudar).
   space-between (não flex-end): com row-reverse o eixo principal roda, então
   "flex-end" empacota o grupo contra a ESQUERDA, não a direita — testado e
   confirmado o oposto do esperado. space-between espalha texto (esquerda) e
   toggle (direita) nas duas pontas da linha inteira. */
.toggle-field,
.settings-toggle {
  flex-direction: row-reverse;
  justify-content: space-between;
}
/* .mode-notification já tem seu próprio layout (ícone/label específicos do
   diálogo de dispositivo) — só o input muda de aparência, mantém a ordem. */

.toggle-field input[type="checkbox"],
.settings-toggle input[type="checkbox"],
.mode-notification input[type="checkbox"],
#companyDialog .mode-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 12px !important;
  margin: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--color-disabled) !important;
  box-shadow: inset 0 0 0 1px rgba(70, 84, 103, .12);
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.toggle-field input[type="checkbox"]::before,
.settings-toggle input[type="checkbox"]::before,
.mode-notification input[type="checkbox"]::before,
#companyDialog .mode-option input[type="radio"]::before {
  content: "";
  position: absolute;
  top: -3px !important;
  left: -2px !important;
  width: 18px !important;
  height: 18px !important;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #99a4b2;
  box-shadow: 0 1px 3px rgba(16, 35, 61, .22);
  transition: transform .18s ease, border-color .18s ease;
}
.toggle-field input[type="checkbox"]:checked,
.settings-toggle input[type="checkbox"]:checked,
.mode-notification input[type="checkbox"]:checked,
#companyDialog .mode-option input[type="radio"]:checked {
  /* --color-primary (não --color-accent): direção de design do usuário
     (2026-07-28) — o mesmo azul #416eec usado nos botões, não mais o azul
     puro de referência. */
  background: var(--color-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(20, 69, 204, .12);
}
.toggle-field input[type="checkbox"]:checked::before,
.settings-toggle input[type="checkbox"]:checked::before,
.mode-notification input[type="checkbox"]:checked::before,
#companyDialog .mode-option input[type="radio"]:checked::before {
  border-color: var(--color-primary);
  transform: translateX(14px);
}
.toggle-field input[type="checkbox"]:focus-visible,
.settings-toggle input[type="checkbox"]:focus-visible,
.mode-notification input[type="checkbox"]:focus-visible,
#companyDialog .mode-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}
.toggle-field input[type="checkbox"]:disabled,
.settings-toggle input[type="checkbox"]:disabled,
.mode-notification input[type="checkbox"]:disabled,
#companyDialog .mode-option input[type="radio"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* O ajuste de aprovação usa markup próprio (track + i), mas recebe exatamente
   a mesma geometria e cores do componente acima. */
.point-status-track {
  width: 28px !important;
  height: 12px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: var(--color-disabled) !important;
  box-shadow: inset 0 0 0 1px rgba(70, 84, 103, .12) !important;
}
.point-status-track i {
  top: -3px !important;
  left: -2px !important;
  width: 18px !important;
  height: 18px !important;
  box-sizing: border-box;
  border: 2px solid #99a4b2;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(16, 35, 61, .22) !important;
}
.point-status-toggle input:checked + .point-status-track {
  background: var(--color-primary) !important;
  box-shadow: inset 0 0 0 1px rgba(20, 69, 204, .12) !important;
}
.point-status-toggle input:checked + .point-status-track i {
  border-color: var(--color-primary);
  transform: translateX(14px) !important;
}

/* prefers-reduced-motion: troca de estado é instantânea, sem deslizar. */
@media (prefers-reduced-motion: reduce) {
  .toggle-field input[type="checkbox"],
  .settings-toggle input[type="checkbox"],
  .mode-notification input[type="checkbox"],
  #companyDialog .mode-option input[type="radio"],
  .toggle-field input[type="checkbox"]::before,
  .settings-toggle input[type="checkbox"]::before,
  .mode-notification input[type="checkbox"]::before,
  #companyDialog .mode-option input[type="radio"]::before,
  .point-status-track,
  .point-status-track i {
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Shimmer / skeleton — placeholder animado para o intervalo em que um
   dado assíncrono (Supabase) ainda não chegou. Substitui telas em branco
   ou texto estático "Carregando..." nesse intervalo. Cor sempre neutra
   (cinza/prata) — nunca usa --color-warning/âmbar, que fica reservado só
   para uma advertência real (ex.: .doc-badge.pending, documento aguardando
   assinatura de verdade), não para "ainda carregando".
   --------------------------------------------------------------------- */
.skeleton {
  --skeleton-base: var(--color-border);
  --skeleton-shine: rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: var(--radius-control);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  transform: translateX(-100%);
  animation: skeletonSweep 1.4s ease-in-out infinite;
}
@keyframes skeletonSweep {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; display: none; }
}
/* Fundo "liquid glass" do mobile é escuro — inverte base/brilho, senão o
   cinza claro do skeleton some contra o azul-marinho do tema. */
.mobile-shell .skeleton,
.app-screen .skeleton,
.login-screen .skeleton {
  --skeleton-base: rgba(255, 255, 255, 0.08);
  --skeleton-shine: rgba(255, 255, 255, 0.22);
}
/* .doc-viewer-body força fundo branco mesmo dentro do tema escuro (documento
   precisa continuar legível como papel) — o skeleton ali também volta pra
   variante clara. */
.doc-viewer-body .skeleton {
  --skeleton-base: var(--color-border);
  --skeleton-shine: rgba(255, 255, 255, 0.7);
}

.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-card { height: 74px; border-radius: var(--radius-card); margin-bottom: 12px; }
.skeleton-card:last-child { margin-bottom: 0; }

/* Erro de campo: a cor era definida so dentro de .form-grid (people.css), e a
   mesma classe usada fora dele saia com a cor herdada — sem vermelho nenhum.
   A validacao de contato (contato-validacao.js) usa `field-error` em quatro
   telas com estruturas diferentes, entao a regra sobe para o compartilhado.
   `is-invalid` marca o proprio campo. */
.field-help.field-error { color: var(--color-danger-text, #c0392b); }
input.is-invalid,
select.is-invalid,
textarea.is-invalid { border-color: var(--color-danger, #c0392b) !important; }

/* ====================================================================
   BOTÃO DE ÍCONE REDONDO — padrão do sistema
   ====================================================================
   O desenho de referência é o "Fixar menu" da barra lateral: círculo,
   borda de 1px discreta, fundo quase transparente, e o ícone como traço
   (stroke) de 1,65 em currentColor. Ele já era o botão de ícone mais
   acabado do produto; virar padrão foi reconhecer isso em vez de
   inventar um sexto estilo.

   USO: `class="j-icon-button"` em qualquer <button> ou <a> cujo conteúdo
   seja só um ícone. O tamanho vem de --j-icon-size (padrão 34px), então
   uma variante menor é uma linha de CSS e não uma classe nova:
       .minha-area .j-icon-button { --j-icon-size: 26px; }

   Toda ação de ícone criada daqui para a frente deve usar esta classe.
   As já existentes migram quando a área for mexida — trocar todas de uma
   vez mudaria a altura de listas que ninguém pediu para mexer.

   A classe aparece dobrada (0,2,0) de propósito. Este arquivo carrega
   cedo (2º de 44), e `.row-button`/`.outline-button` de ui-refinement.css
   (35º) venceriam por ordem, devolvendo a pílula. Dobrar a classe põe o
   padrão acima delas sem depender de onde a folha está na lista, e sem
   espalhar !important. */
.j-icon-button.j-icon-button {
  --j-icon-size: 34px;
  --j-icon-glyph: 16px;
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--j-icon-size);
  min-width: var(--j-icon-size);
  height: var(--j-icon-size);
  min-height: var(--j-icon-size);
  padding: 0;
  gap: 0;
  border: 1px solid var(--ui-control-border, #cbd7e6);
  border-radius: 50%;
  background: #fff;
  color: #5d6b80;
  box-shadow: none;
  line-height: 0;
  cursor: pointer;
  user-select: none;
  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.j-icon-button.j-icon-button > svg {
  display: block;
  width: var(--j-icon-glyph);
  height: var(--j-icon-glyph);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.j-icon-button.j-icon-button:not(:disabled):hover {
  border-color: #b7c8dc;
  background: #f2f6fc;
  color: var(--color-primary-hover, #1445cc);
}

.j-icon-button.j-icon-button:focus-visible {
  outline: 2px solid var(--color-primary, #416eec);
  outline-offset: 2px;
}

/* Mesmo recuo do pin ao ser pressionado: confirma o toque sem mover a linha. */
.j-icon-button.j-icon-button:not(:disabled):active { transform: scale(.94); }

.j-icon-button.j-icon-button:disabled { opacity: .45; cursor: default; }

/* Ação destrutiva se anuncia pela cor SÓ no hover. Em repouso, uma coluna de
   ícones vermelhos puxa a atenção justamente para o que não se deve clicar
   sem querer. */
.j-icon-button.j-icon-button.is-danger:not(:disabled):hover {
  border-color: #f3c9ce;
  background: #fdeff1;
  color: #b42335;
}

/* Estado ligado, como o pin fixado. */
.j-icon-button.j-icon-button.is-active {
  border-color: #b9cdfa;
  background: var(--color-primary-soft, #e9eefb);
  color: var(--color-primary-hover, #1445cc);
}