/* Tema visual aprovado pelo usuário em cima do rascunho "Painel
   Odontospecial" (2026-09-24) -- só CSS, nenhuma mudança de
   comportamento, campo ou dado. Carregado DEPOIS do CSS padrão do
   Filament (registrado via FilamentAsset em AppServiceProvider), então
   só precisa sobrescrever o que muda -- o resto (cor primária, grupos
   de navegação, filtros, ordenação de coluna) já é nativo do Filament
   e não precisou de CSS nenhum. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Tokens do mockup aprovado (13/10/2026). */
  --teal-600: #386B67;
  --bg-app: #f4f1e9;
  --bg-sidebar: #faf7f1;

  /* Bege próprio pra sidebar/zebra -- NÃO reaproveita --gray-50 do
     Filament (achado testando com navegador de verdade, 2026-09-24):
     --gray-50 sai 249,248,247, perto demais do branco puro pra dar
     alguma diferença visível -- e não dá pra simplesmente "escurecer"
     esse token, porque --gray-50 também é usado pra fundo de campo
     desabilitado/outros estados em todo o Filament, então precisa
     ficar quase-branco por outros motivos. Tom próprio, só pros
     elementos que o mockup realmente pedia mais contraste.
     --realce-primary-100 idem: --primary-50 (245,248,247) também era
     sutil demais pro hover de linha -- usa o degrau 100 do teal em
     vez do 50. */
  --bege-mais-claro: #f8f4ea;
}
.dark {
  --bege-mais-claro: #23200f;
}

body {
  font-family: var(--font-ui) !important;
}

/* Fundo do app e sidebar nos tons do mockup (só no tema claro). */
html:not(.dark) body.fi-body {
  background-color: var(--bg-app);
}
html:not(.dark) .fi-sidebar,
html:not(.dark) .fi-sidebar-header {
  background-color: var(--bg-sidebar) !important;
}

/* Header teal cheio (mockup aprovado em 13/10/2026). O logo fica na
   faixa clara do topo da sidebar, fora do header -- por isso o fundo
   teal não apaga o texto escuro da logo (motivo da antiga tarja de 4px).
   Ícones e avatar do header em branco. */
.fi-topbar > nav {
  background-color: var(--teal-600) !important;
  --tw-ring-color: transparent !important;
}
.fi-topbar > nav .fi-icon-btn {
  color: #fff !important;
}
.fi-topbar > nav .fi-icon-btn:hover,
.fi-topbar > nav .fi-icon-btn:focus-visible {
  background-color: rgb(255 255 255 / 14%) !important;
}
.fi-topbar > nav .fi-user-avatar {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 85%);
}

/* Cards/sections -- cantos mais arredondados, sombra mais suave (a
   mesma proporção do rascunho aprovado). */
.fi-section,
.fi-wi-stats-overview-stat {
  border-radius: 1rem !important;
  box-shadow:
    0 1px 2px rgb(30 27 18 / 4%),
    0 6px 18px -10px rgb(30 27 18 / 14%) !important;
}
.dark .fi-section,
.dark .fi-wi-stats-overview-stat {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 30%),
    0 10px 24px -12px rgb(0 0 0 / 55%) !important;
}

/* Ícone dos cards de estatística -- vira um "chip" colorido (fundo +
   cantos arredondados) em vez de um ícone solto cinza. */
.fi-wi-stats-overview-stat-icon {
  background-color: rgb(var(--primary-50));
  color: rgb(var(--primary-600)) !important;
  padding: 0.5rem;
  border-radius: 0.625rem;
  box-sizing: content-box;
}
.dark .fi-wi-stats-overview-stat-icon {
  background-color: rgb(var(--primary-600) / 18%);
  color: rgb(var(--primary-400)) !important;
}

/* Badges totalmente arredondados (pill) -- Fixa/Variável e qualquer
   outro ->badge() do painel, sem precisar tocar em cada Resource. */
.fi-badge {
  border-radius: 9999px !important;
}

/* Tabela: zebra (tom bege próprio, ver :root) + hover com a cor
   primária (degrau 100, não 50 -- 50 era sutil demais pra perceber). */
.fi-ta-row:nth-child(even) {
  background-color: var(--bege-mais-claro);
}
.fi-ta-row:hover {
  background-color: rgb(var(--primary-100)) !important;
}
.dark .fi-ta-row:hover {
  background-color: rgb(var(--primary-600) / 22%) !important;
}

/* Botões -- levemente mais arredondados, acompanhando os cards. */
.fi-btn {
  border-radius: 0.625rem;
}

/* Cards de estatística no celular: 2 por linha e valor menor, para os
   4 cards do topo das telas não empurrarem a tabela 4 telas abaixo. */
@media (max-width: 767px) {
  .fi-wi-stats-overview-stats-ctn {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  .fi-wi-stats-overview-stat {
    padding: 0.875rem !important;
  }
  .fi-wi-stats-overview-stat-value {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
    overflow-wrap: anywhere;
  }
}