/* ============================================================
   FériasOS — camada de tema
   ------------------------------------------------------------
   Carregada DEPOIS do tailwind.css (que é mantido à mão, sem
   build). É puramente aditiva: refina profundidade, tipografia e
   movimento do que já existe, sem redefinir estrutura ou layout.
   Por isso um arquivo separado — não corre risco de conflitar com
   o CSS compilado nem exige recompilá-lo.
   ============================================================ */

/* ---------- 1. Transições entre páginas ----------
   View Transitions API: a navegação deixa de "piscar" e passa a
   transicionar como app nativo. Progressive enhancement — em
   navegadores sem suporte a regra é simplesmente ignorada. */
@view-transition { navigation: auto; }

/* A sidebar é capturada como elemento próprio: fica cravada no
   lugar enquanto só o conteúdo transiciona. */
.app-sidebar { view-transition-name: app-sidebar; }

/* O indicador da página ativa existe uma vez só por página, então
   ganha nome próprio e DESLIZA entre os itens do menu na navegação. */
.nav-pill { view-transition-name: nav-pill; }

main.app-main { view-transition-name: app-main; }

::view-transition-old(app-main) {
  animation: vtContentOut .16s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(app-main) {
  animation: vtContentIn .28s cubic-bezier(.2, .8, .2, 1) both;
}
::view-transition-group(nav-pill) {
  animation-duration: .3s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
@keyframes vtContentOut {
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes vtContentIn {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- 2. Profundidade ----------
   Sombras em três camadas (contato + difusa + ambiente) no lugar
   das chapadas: é o que dá sensação de peso real. */
.shadow-soft {
  box-shadow:
    0 1px 1px rgba(23, 50, 92, .04),
    0 2px 6px -2px rgba(23, 50, 92, .06),
    0 12px 24px -12px rgba(23, 50, 92, .10);
}
.shadow-card {
  box-shadow:
    0 1px 1px rgba(23, 50, 92, .04),
    0 8px 20px -8px rgba(23, 50, 92, .12),
    0 28px 56px -24px rgba(23, 50, 92, .16);
}

/* ---------- 3. Tipografia ----------
   Títulos maiores pedem tracking negativo: quanto maior o corpo,
   mais folgado o espaçamento parece. */
h1 { letter-spacing: -.022em; }
h2 { letter-spacing: -.012em; }

/* ---------- 4. Navegação lateral ---------- */
.app-sidebar nav a {
  transition: background-color .15s ease, color .15s ease, transform .15s cubic-bezier(.2, .8, .2, 1);
}
.app-sidebar nav a:hover { transform: translateX(2px); }
.nav-pill { box-shadow: 0 0 8px rgba(29, 78, 216, .5); }

/* ---------- 5. Controles ----------
   Foco visível e consistente em tudo que é interativo — requisito
   de acessibilidade e, de quebra, acabamento. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #3B82F6;
  outline-offset: 2px;
  border-radius: 8px;
}
button { transition: transform .12s cubic-bezier(.2, .8, .2, 1), filter .15s ease, background-color .15s ease; }
button:active:not(:disabled) { transform: scale(.97); }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], select, textarea {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}

/* ---------- 6. Números ----------
   Fontes proporcionais dão larguras diferentes a cada dígito ("1" é mais
   estreito que "8"), então números empilhados desalinham na vertical.
   tabular-nums força largura fixa — datas e contadores param de "dançar". */
.kpi-value,
table td, table th,
.nums { font-variant-numeric: tabular-nums; }

/* ---------- 7. KPIs que comunicam gravidade ----------
   Um painel deve ficar visualmente quieto quando está tudo bem e mudar de
   tom quando não está: dá pra saber se há problema OLHANDO, sem ler. */
.kpi-value { transition: color .2s ease; }
.kpi-value.is-alert { color: #A32D2D; }   /* exige ação agora */
.kpi-value.is-warn  { color: #B85812; }   /* pede atenção */
.kpi-value.is-zero  { color: #9AA6B8; }   /* nada aqui: recua */

.kpi-card { transition: border-color .2s ease, background-color .2s ease, transform .15s cubic-bezier(.2,.8,.2,1); }
.kpi-card.is-alert { border-color: #FECACA; background: #FFFBFB; }
.kpi-card.is-warn  { border-color: #FFE2C2; background: #FFFCF8; }

/* ---------- 8. Estados vazios ----------
   Itálico cinza informa e para aí. Um estado vazio deve dizer o que
   aconteceria ali e, quando fizer sentido, oferecer o próximo passo. */
.empty-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #7B879B;
}
.empty-state svg { flex-shrink: 0; opacity: .55; }
.empty-state a {
  color: #2563EB;
  font-weight: 600;
  text-decoration: none;
}
.empty-state a:hover { text-decoration: underline; }

/* ---------- 9. Sino de avisos ----------
   Estado ligado precisa ser óbvio à distância: quem depende do aviso para
   não perder pedido de férias tem de conseguir conferir de relance se ele
   está valendo. Cinza = desligado, azul com ponto = ligado. */
.sino-avisos {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(93, 107, 128, .7);
  background: transparent;
  transition: color .15s, background-color .15s;
}
.sino-avisos:hover { color: #1F2937; background: #F4F6F9; }
.sino-avisos.is-on {
  color: #2563EB;
  background: #EFF6FF;
}
.sino-avisos.is-on::after {
  content: "";
  position: absolute;
  margin: -12px 0 0 12px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #22C55E;
  box-shadow: 0 0 0 2px #FFFFFF;
}
/* Ligado, mas com a notificação bloqueada no navegador: só o som funciona.
   Âmbar em vez de verde para não prometer o que não vai acontecer — o
   title do botão explica e diz como liberar. */
.sino-avisos.is-mudo::after { background: #F59E0B; }

/* ---------- 10. Ajuda da tela (interrogação flutuante) ----------
   Vem do base.html, logo aparece em cima de qualquer tela. Fica no canto
   inferior direito porque é o único canto que nenhuma tela do sistema usa: o
   topo tem cabeçalho e filtros, a esquerda tem a barra lateral, e o Gantt em
   tela cheia ocupa o resto. */
.ajuda-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.ajuda-fab-botao {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #1D4ED8;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(23, 50, 92, .28);
  transition: background-color .15s, transform .15s cubic-bezier(.2,.8,.2,1);
}
.ajuda-fab-botao:hover { background: #1E40AF; transform: scale(1.06); }
.ajuda-fab-botao.is-aberto { background: #17325C; }
.ajuda-fab-botao:focus-visible { outline: 2px solid #17325C; outline-offset: 2px; }

/* Largura fixa e altura limitada: a seção mais longa (as perguntas
   frequentes) passa de uma tela, e o painel precisa rolar sozinho em vez de
   empurrar o botão para fora da janela. */
.ajuda-fab-painel {
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E8EDF5;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(23, 50, 92, .18);
  overflow: hidden;
}
.ajuda-fab-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #EFF2F7;
}
.ajuda-fab-chapeu {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(93, 107, 128, .75);
}
.ajuda-fab-titulo { font-size: 15px; font-weight: 700; color: #17325C; margin-top: 2px; }
.ajuda-fab-fechar { font-size: 18px; line-height: 1; color: #5D6B80; flex-shrink: 0; }
.ajuda-fab-corpo { padding: 14px 16px 16px; overflow-y: auto; }
.ajuda-fab-resumo { font-size: 12.5px; line-height: 1.6; color: #5D6B80; }

/* Passos numerados à mão: o contador do CSS deixa o número em negrito azul
   sem depender de utilitária que o tailwind.css compilado não tem. */
.ajuda-passos { counter-reset: ajuda-passo; margin-top: 14px; display: grid; gap: 9px; }
.ajuda-passos li {
  counter-increment: ajuda-passo;
  position: relative;
  padding-left: 26px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #2F3E54;
}
.ajuda-passos li::before {
  content: counter(ajuda-passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #EFF4FE;
  color: #1D4ED8;
  font-size: 10.5px;
  font-weight: 700;
}
.ajuda-regras-rotulo {
  margin-top: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(93, 107, 128, .75);
}
.ajuda-regras { margin-top: 8px; display: grid; gap: 8px; }
.ajuda-regras li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #5D6B80;
}
.ajuda-regras li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: #C3CDDC;
}
.ajuda-fab-link {
  display: block;
  padding: 11px 16px;
  border-top: 1px solid #EFF2F7;
  background: #F6F8FB;
  font-size: 12px;
  font-weight: 600;
  color: #1D4ED8;
}
.ajuda-fab-link:hover { background: #EFF4FE; }

/* No celular o botão sobe: embaixo à direita é onde o polegar segura o
   aparelho, e ali ele cobriria a última linha das tabelas. */
@media (max-width: 1023px) {
  .ajuda-fab { right: 14px; bottom: 14px; }
  .ajuda-fab-botao { width: 40px; height: 40px; font-size: 18px; }
}

/* ---------- 11. Tutorial (/tutorial/) ---------- */
.tut-indice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.tut-indice a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid #E8EDF5;
  border-radius: 12px;
  background: #FFFFFF;
  font-size: 12.5px;
  font-weight: 600;
  color: #2F3E54;
  transition: border-color .15s, background-color .15s;
}
.tut-indice a:hover { border-color: #C7D7FB; background: #F8FAFF; }
.tut-indice span {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #EFF4FE;
  color: #1D4ED8;
  font-size: 10.5px;
  font-weight: 700;
}

/* scroll-margin-top para a âncora não grudar no topo da janela ao pular
   pelo índice. */
.tut-secao { scroll-margin-top: 18px; }
/* Destaque de quem chegou pela interrogação de uma tela: o anel diz "é esta
   aqui" sem precisar de animação que distraia na leitura. */
.tut-secao.is-destaque {
  border-color: #C7D7FB;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

/* ---------- 12. Movimento reduzido ----------
   Respeita quem configurou o sistema para menos animação. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .app-sidebar nav a:hover { transform: none; }
  button:active:not(:disabled) { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}