/*
 * Fence Watch — regras globais da aplicacao.
 *
 * Os tokens (cores, fontes, espaco, raio, sombra) e os componentes `fw-*` vem do design system
 * (repo design-system-fence-watch), copiados para public/stylesheets/fence-watch/ por
 * scripts/sync-design-system.py. Este arquivo so complementa o Tailwind e neutraliza as classes
 * do tema antigo ("Sentinel Core") que as views ainda usam, para que sigam o design system:
 *   - sem glow, sem gradiente, sem vidro (backdrop blur);
 *   - estrutura por borda `hairline`, nao por sombra; sombra so no que flutua.
 */

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background-color: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-sans);
}
code, kbd, samp, pre { font-family: var(--font-mono); }
::selection { background: rgb(var(--watch-rgb) / .28); color: var(--ink); }

/* Foco: anel de 2px em brand, deslocado 2px. Sem glow. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ============================================================
   CLASSES DO TEMA ANTIGO, NEUTRALIZADAS
   ============================================================ */
/* Glow de severidade: o design system nao usa brilho. Severidade = cor + palavra + barras. */
.glow-critical, .glow-high, .glow-medium { box-shadow: none; }

/* "Glass": vira painel flutuante (menu, popover) — surface-1, hairline e shadow-sm. */
.glass-panel, .glass-heavy {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
}

/* Divisorias: hairline solida de 1px. */
.tonal-divider { background: var(--hairline); height: 1px; }
.ghost-border { border: 1px solid var(--hairline); }

/* Botao primario: preenchimento solido em brand, texto on-brand. Sem gradiente. */
.gradient-primary { background: rgb(var(--primary-rgb, var(--brand-rgb))); color: var(--on-brand); }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }

/* ============================================================
   ICONES
   Todos vêm do sprite da distribuição do design system (Lucide): `ds/icon` no servidor e
   fwIcons.js no navegador. Material Symbols saiu da aplicação.
   ============================================================ */
.fw-icon use { pointer-events: none; }

/* ============================================================
   MOVIMENTO
   Paineis entram em 160ms; nada pisca nem pulsa (sem alarme). Com prefers-reduced-motion,
   sem animacao.
   ============================================================ */
.fade-in { animation: fadeIn .16s ease-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pulse-glow { animation: none; }

/* ============================================================
   TABELAS
   ============================================================ */
.data-row { transition: background-color .12s ease; }
.data-row:hover { background-color: var(--surface-2); }

/* ============================================================
   TOAST
   ============================================================ */
.toast { animation: slideInRight .16s ease-out; }
.toast-exit { animation: slideOutRight .16s ease-in forwards; }
@keyframes slideInRight {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(16px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   MOLDURA DA APLICACAO (AppShell do design system 2.1 em Twirl)
   O bundle.css traz .fw-shell/.fw-header/.fw-sidebar, os grupos recolhíveis, os itens
   bloqueados, o contexto do header e a conta. Aqui ficam só os ajustes da versão server-side:
   o menu lateral do celular (abre por cima do conteúdo, sem React), o contexto dentro dele, o
   uso do plano no rodapé e o selo de notificações.
   ============================================================ */
.fw-shell-side { width: 240px; }
.fw-side-item { text-decoration: none; }
.fw-plan-usage-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.fw-plan-usage-note { margin: 0; }
.fw-sidebar-foot { display: flex; flex-direction: column; gap: var(--space-1); }
.fw-sidebar-foot .fw-field { margin-bottom: var(--space-2); }
.fw-header-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: var(--on-danger); font-size: 10px; line-height: 16px; font-weight: 600; text-align: center; }
.fw-header-home img:not(.hidden) + .fw-logo .fw-logo-mark { display: none; }
/* Contexto do contrato no menu lateral: só quando o header o esconde (abaixo de 960px). */
.fw-shell-side > .fw-drawer-context { display: none; margin: calc(var(--space-3) * -1) calc(var(--space-2) * -1) var(--space-2); }
.fw-nav-backdrop { display: none; }
@media (max-width: 959px) {
  .fw-shell-side > .fw-drawer-context { display: block; }
  /* Menu lateral abre por cima do conteudo (Drawer à esquerda do design system). */
  .fw-shell[data-nav-open="true"] .fw-shell-side {
    display: flex; position: fixed; top: 0; left: 0; z-index: 71; height: 100vh; height: 100dvh;
    width: min(300px, 88vw); overflow-y: auto; box-shadow: var(--shadow-lg); animation: fw-nav-in .16s ease-out;
  }
  .fw-shell[data-nav-open="true"] .fw-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(11,18,32,.6); }
}
@keyframes fw-nav-in { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* EmptyState: o icone em ink-muted. */
.fw-empty-icon { color: var(--ink-muted); }

/* Modal (componente Twirl): o painel ocupa a largura até o máximo do tamanho (fw-modal--sm…xl). */
.fw-modal { width: 100%; }