/*
 * NetScreen AI — tokens e base
 *
 * Os valores vêm de docs/plano-desenvolvimento.md (FASE 0).
 * Só dark mode: a plataforma gere painéis LED e vive em salas escuras.
 *
 * Desde 23 Set, a versão C do sistema visual (Efferd + NetScreen, aprovada pelo
 * Ricardo): cartões com superfície e cantos de 8–14px, Geist na interface, o
 * Bebas só no logótipo e nos números grandes, o laranja só no que é accionável
 * ou está em uso. A regra antiga "raio 0 em todo o lado" caiu com ela. Ver
 * docs/efferd/sistema-visual.md.
 */

/*
 * Os HSL abaixo foram calculados para dar exactamente os hex da marca.
 * Os valores arredondados do plano (ex.: `16 90% 48%`) davam #e9470c em vez
 * de #e8400c, e o accent saía visivelmente mais claro. O hex é a marca —
 * é ele que manda.
 */
:root {
  --background: 0 0% 3.9%;             /* #0a0a0a */
  --foreground: 37.5 28.6% 94.5%;      /* #f5f2ed */
  --primary: 14.2 90.2% 47.8%;         /* #e8400c */
  --primary-foreground: 37.5 28.6% 94.5%;
  --secondary: 24 7% 12.5%;            /* #221f1d */
  --secondary-foreground: 37.5 28.6% 94.5%;
  --muted: 24 7% 12.5%;                /* #221f1d — neutro com um toque quente */
  /* Era #5a5a5a, o valor do plano: 2,8:1 sobre o fundo, abaixo do mínimo de
     4,5:1 para texto, e o texto pequeno não se lia. #9e9e9e dá 7,4:1 e fica
     perto do muted-foreground do shadcn/Efferd em dark (#a3a3a3). */
  --muted-foreground: 24 5% 64%;       /* #a8a29e — 7,6:1 sobre o fundo */
  --accent: 37.4 91.3% 54.9%;          /* #f5a623 */
  --accent-foreground: 0 0% 3.9%;
  --card: 30 5% 7.5%;                  /* #141312 */
  --card-foreground: 37.5 28.6% 94.5%;
  --border: rgba(245, 242, 237, 0.09);
  --raio: 12px;      /* cartões */
  --raio-sm: 8px;    /* botões, campos, menu */

  /* Estados do hardware — usados em painéis e no mapa da rede */
  --online: 142 60% 45%;
  --offline: 0 72% 51%;
  --unknown: 0 0% 35%;

  color-scheme: dark;
}

* {
  border-color: var(--border);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Geist', 'DM Sans', system-ui, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}

/* Bebas Neue só tem um peso e é toda em caixa alta por desenho.
   Tracking ligeiro para não colar as letras em corpos grandes. */
.font-display {
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* Etiquetas de secção e eyebrows */
.label-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* Foco visível — obrigatório em toda a navegação por teclado */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Barra de navegação activa: filete laranja à esquerda, sem pill arredondado */
.nav-item {
  position: relative;
  border-left: 2px solid transparent;
}
.nav-item[aria-current='page'] {
  border-left-color: hsl(var(--primary));
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}

/*
 * Skeleton com varrimento horizontal em vez do pulse habitual —
 * é o gesto de um painel LED a refrescar, que é o que a plataforma gere.
 */
.loading-skeleton {
  position: relative;
  overflow: hidden;
  background: hsl(var(--muted));
}
.loading-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(245, 242, 237, 0.06) 50%,
    transparent 100%
  );
  animation: scan 1.4s ease-in-out infinite;
}

@keyframes scan {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-skeleton::after {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbar discreta na sidebar e nas tabelas */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: hsl(var(--background));
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--secondary));
  border: 3px solid hsl(var(--background));
}
::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/*
 * Drawer — painel lateral que entra pela direita.
 * O prefers-reduced-motion acima anula a animação.
 */
.drawer-overlay {
  animation: fade-in 160ms ease-out;
}
.drawer-panel {
  animation: drawer-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

/* Modal e toast — entradas curtas, anuladas pelo prefers-reduced-motion */
.modal-panel {
  animation: modal-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast {
  animation: toast-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ═══ Versão C — Efferd + NetScreen (23 Set) ═══════════════════════════════
 * Estas regras começaram como pré-visualização (?tema=efferd) e passaram a ser
 * a regra. Actuam por selectores largos sobre o que os ecrãs já usam, e por
 * isso não obrigaram a reescrever os 23 ecrãs: `.border.bg-card` passa a
 * cartão, as grelhas `gap-px` de linhas partilhadas passam a cartões
 * separados, `h1.font-display` passa a caixa normal, `.uppercase.tracking-wider`
 * perde as maiúsculas.
 *
 * Todas começam por `:root`: dá-lhes o mesmo peso que tinham na pré-visualização
 * (html[data-tema]), e ganham às classes do Tailwind, que o CDN injecta depois.
 */

/* ─── Tipografia ──────────────────────────────────────────────────────── */

/* Os títulos passam a caixa normal. O Bebas fica para os números grandes
   (os KPI, que levam tabular-nums) e para o monograma do shell. */
:root h1.font-display {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
}
:root .font-display:not(h1):not(.tabular-nums):not(.text-5xl):not(.text-base) {
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Botões, separadores e etiquetas deixam as maiúsculas espaçadas. */
:root .uppercase.tracking-wider {
  text-transform: none;
  letter-spacing: 0;
}
:root .label-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* ─── Superfícies ─────────────────────────────────────────────────────── */

/* As caixas deixam de ser linhas a passar dos cantos e passam a cartões. */
:root .border.bg-card:not(.border-dashed) {
  background: hsl(var(--card));
  border-color: transparent;
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--border);
}
:root .border.bg-card::before,
:root .border.bg-card::after {
  display: none;
}
:root .border-dashed {
  border-radius: var(--raio);
}

/* O Painel do dashboard (components/painel.jsx). */
:root .ns-painel {
  background: hsl(var(--card));
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--border);
}
:root .ns-painel-bordas {
  display: none;
}
:root .ns-painel.border-dashed {
  background: transparent;
  box-shadow: none;
}

/* As grelhas de "linhas partilhadas" (gap de 1px sobre a cor da linha) passam
   a cartões separados — os KPI do dashboard, as integrações da Rede, a vez em
   A minha marca. */
:root [class~='gap-px'][class*='bg-[var(--border)]'] {
  gap: 12px;
  background: transparent !important;
  box-shadow: none;
}
:root [class~='gap-px'][class*='bg-[var(--border)]'] > * {
  background: hsl(var(--card));
  border-radius: var(--raio);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ─── Controlos ───────────────────────────────────────────────────────── */

:root button,
:root input,
:root select,
:root textarea {
  border-radius: var(--raio-sm);
}
:root input[type='checkbox'],
:root input[type='radio'] {
  border-radius: 4px;
}
:root .modal-panel,
:root .toast {
  border-radius: 14px;
}

/* ─── Navegação ───────────────────────────────────────────────────────── */

:root .nav-item {
  margin-inline: 8px;
  border-left: 0;
  border-radius: var(--raio-sm);
}
:root .nav-item[aria-current='page'] {
  background: hsl(var(--muted));
}
:root .nav-item[aria-current='page']::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: hsl(var(--primary));
}
:root .nav-item[aria-current='page'] svg {
  color: hsl(var(--primary));
}

/* O cartão do plano, ao fundo do menu: deixa a moldura de cor e as maiúsculas. */
:root .ns-plano {
  border-color: transparent;
  border-radius: var(--raio-sm);
  background: hsl(var(--card));
  box-shadow: inset 0 0 0 1px var(--border);
  color: hsl(var(--foreground));
}
:root .ns-plano span:last-child {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  font-weight: 500;
}

/* O ritmo do Efferd: 16px entre cartões, e não os 36px de hoje. */
:root main .gap-9 {
  gap: 1rem;
}

/* As caixas de dentro dos cartões (cada criativo, cada canal) acompanham o
   raio, mais pequeno — cantos rectos dentro de um cartão redondo destoavam. */
:root .border.border-border[class*=' p-'],
:root .border.border-border[class^='p-'] {
  border-radius: var(--raio-sm);
}