/* 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; }