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