/* ==========================================================================
   AdFlow — base

   DIREÇÃO: SaaS de analytics e gestão de mídia. Claro, denso de informação,
   orientado a dados. Sem gradiente, sem glassmorphism, sem sombra pesada.

   As regras que valem em todo o sistema:
     • a navegação é escura, o conteúdo é claro;
     • superfície branca + fio de 1px + sombra mínima = estrutura;
     • sombra forte só em elevação real (dropdown, popover, modal, gaveta);
     • todo número é tabular e alinhado à direita;
     • o verde é a ação primária e o estado ativo;
     • raio 8 (controle) / 12 (cartão) / 16 (modal) / 999 (badge);
     • espaçamento em múltiplos de 4;
     • caixa alta é proibida: hierarquia se faz com peso, tamanho e cor.

   Cor, raio, fio, sombra, espaçamento e duração saem SEMPRE das variáveis
   deste arquivo. Valor solto no meio do CSS é erro.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/archivo-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

:root {
  /* ------------------------------------------------------------------ */
  /* FAMÍLIAS                                                           */
  /* ------------------------------------------------------------------ */

  --font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Número financeiro: mesma família da interface, algarismo tabular.
     É o que faz a coluna de dinheiro alinhar sem virar bloco de terminal. */
  --font-num: var(--font-ui);

  /* ------------------------------------------------------------------ */
  /* SUPERFÍCIES                                                        */
  /* ------------------------------------------------------------------ */

  --s0: #f7f9fc;        /* fundo da aplicação */
  --s1: #ffffff;        /* moldura clara: header, toolbar */
  --s2: #ffffff;        /* painéis e cartões */
  --s2-sunk: #f9fafb;   /* faixa interna, cabeçalho de tabela */
  --s2-hover: #f4f6f9;  /* hover de controle */
  --s3: #ffffff;        /* o que flutua */

  --row-hover: #fafcfd; /* hover de linha da tabela */

  /* ------------------------------------------------------------------ */
  /* FIOS                                                               */
  /* ------------------------------------------------------------------ */

  /* Fios bem claros de propósito: a estrutura aparece sem que a tela fique
     riscada de cinza. Os valores saem da referência visual do produto. */
  --line: #eaeef4;        /* divisor padrão: cartão, painel, controle */
  --line-soft: #f0f3f8;   /* divisor interno: linha de tabela */
  --line-2: #d8dee8;      /* contorno de controle em hover */
  --line-3: #b9c0cb;      /* contorno forte, polegar da rolagem */
  --line-ink: #dfe4ec;    /* base do cabeçalho de tabela */

  /* ------------------------------------------------------------------ */
  /* TINTA — nunca #000                                                 */
  /* ------------------------------------------------------------------ */

  --fg: #101828;          /* texto principal */
  --fg-2: #475467;        /* secundário */
  --fg-3: #667085;        /* metadado, rótulo */
  --fg-4: #98a2b3;        /* desativado, placeholder */

  /* ------------------------------------------------------------------ */
  /* NAVEGAÇÃO ESCURA                                                   */
  /* ------------------------------------------------------------------ */

  --nav: #0d1722;
  --nav-2: #142330;       /* hover */
  --nav-3: #1b2c3a;       /* controle dentro da navegação */
  --nav-active: #0b3e38;  /* item ativo */
  --nav-fg: #94a3b0;
  --nav-fg-2: #ffffff;
  --nav-line: #1a2836;

  /* ------------------------------------------------------------------ */
  /* ACENTO                                                             */
  /* ------------------------------------------------------------------ */

  --accent: #079a78;
  --accent-strong: #067d63;
  --accent-soft: #e8f8f3;                  /* fundo suave: seleção, ícone */
  --accent-vivid: #19d98c;                 /* só sobre a navegação escura */
  --accent-wash: rgba(7, 154, 120, 0.06);  /* linha selecionada */

  /* Sinais ------------------------------------------------------------- */
  --up: #16a34a;
  --down: #dc2626;
  --warn: #f59e0b;
  --info: #2563eb;
  --purple: #7c3aed;
  --orange: #ea580c;

  /* Tinta legível dos sinais sobre fundo claro (o token acima é a cor
     "pura" do sinal; estes são os que passam em contraste com texto). */
  --up-ink: #027a48;
  --down-ink: #b42318;
  --warn-ink: #b54708;
  --info-ink: #175cd3;

  /* Leitura de performance --------------------------------------------- */
  --perf-strong: #027a48;
  --perf-normal: #667085;
  --perf-watch: #b54708;
  --perf-drop: #b42318;

  /* ------------------------------------------------------------------ */
  /* STATUS — par fundo/tinta de cada estado                            */
  /* ------------------------------------------------------------------ */

  --st-draft:      #667085;  --st-draft-bg:      #f2f4f7;  --st-draft-ink:      #475467;
  --st-testing:    #f59e0b;  --st-testing-bg:    #fffaeb;  --st-testing-ink:    #b54708;
  --st-running:    #2563eb;  --st-running-bg:    #eff8ff;  --st-running-ink:    #175cd3;
  --st-winner:     #16a34a;  --st-winner-bg:     #ecfdf3;  --st-winner-ink:     #027a48;
  --st-scaling:    #0e9384;  --st-scaling-bg:    #ecfdfa;  --st-scaling-ink:    #107569;
  --st-saturating: #ea580c;  --st-saturating-bg: #fff4ed;  --st-saturating-ink: #c4320a;
  --st-dead:       #dc2626;  --st-dead-bg:       #fef3f2;  --st-dead-ink:       #b42318;
  --st-archived:   #98a2b3;  --st-archived-bg:   #f2f4f7;  --st-archived-ink:   #667085;

  /* ------------------------------------------------------------------ */
  /* GEOMETRIA                                                          */
  /* ------------------------------------------------------------------ */

  --r-xs: 6px;    /* chip, ícone pequeno */
  --r-sm: 8px;    /* input, botão, item de menu */
  --r: 12px;      /* cartão, painel, popover */
  --r-lg: 16px;   /* modal, gaveta */
  --r-pill: 999px;

  /* ------------------------------------------------------------------ */
  /* ESPAÇAMENTO — múltiplos de 4                                       */
  /* ------------------------------------------------------------------ */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ------------------------------------------------------------------ */
  /* ELEVAÇÃO                                                           */
  /* ------------------------------------------------------------------ */

  /* Cartão e controle: NENHUMA sombra.
     O que separa um bloco do fundo é a borda de 1px, e só. Sombra em
     elemento de página deixa a tela com halo cinza em volta de tudo — o
     token existe para o dia em que alguém precisar dela em um caso
     específico, não para ser o padrão. */
  --shadow-xs: none;

  /* O que flutua de verdade. */
  --pop:
    0 0 0 1px rgba(16, 24, 40, 0.06),
    0 4px 6px -2px rgba(16, 24, 40, 0.03),
    0 12px 16px -4px rgba(16, 24, 40, 0.08);

  --pop-lg:
    0 0 0 1px rgba(16, 24, 40, 0.06),
    0 8px 8px -4px rgba(16, 24, 40, 0.04),
    0 20px 24px -4px rgba(16, 24, 40, 0.1);

  /* ------------------------------------------------------------------ */
  /* MEDIDAS DO SHELL                                                   */
  /* ------------------------------------------------------------------ */

  --sidebar-w: 220px;
  --sidebar-w-min: 72px;
  --topbar-h: 66px;
  --toolbar-h: 64px;
  --row-h: 64px;
  --gutter: 28px;

  /* ------------------------------------------------------------------ */
  /* MOVIMENTO — 150ms. Nada flutua, pisca ou brilha.                   */
  /* ------------------------------------------------------------------ */

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --t-fast: 0.12s;
  --t: 0.15s;
  --t-slow: 0.22s;

  --t-ui:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);

  --focus: 0 0 0 3px rgba(7, 154, 120, 0.15);
  --focus-dark: 0 0 0 3px rgba(25, 217, 140, 0.25);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--s0);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; cursor: pointer; }

img, video, svg { display: block; max-width: 100%; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Nunca removemos o outline: substituímos por um anel na cor do acento. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}

.sidebar :focus-visible { box-shadow: var(--focus-dark); }

::selection { background: var(--accent); color: #fff; }

/* Barra de rolagem discreta, no tom da interface. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}

*::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }

/* ==========================================================================
   Números

   Todo valor numérico usa algarismo tabular: é o que faz coluna de dinheiro
   alinhar. A família é a mesma da interface — o monoespaçado fica reservado
   para código e dado bruto (.mono).
   ========================================================================== */

.num,
.money,
td.is-numeric,
th.is-numeric,
.tnum {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* ==========================================================================
   Tipografia

   Título de tela 28 · seção 16 · corpo 14 · secundário 13 · metadado 12.
   ========================================================================== */

.page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.2;
}

.page-subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: var(--fg-3);
  line-height: 1.45;
}

.view-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.017em;
  line-height: 1.25;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.011em;
  line-height: 1.35;
}

/* Rótulo pequeno: cinza, caixa normal. Nunca uppercase. */
.label {
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-3);
  line-height: 1.35;
}

.hint {
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
  font-weight: 400;
}

.meta {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.35;
}

/* ==========================================================================
   Utilitários
   ========================================================================== */

.muted { color: var(--fg-3); }
.secondary { color: var(--fg-2); }
.up { color: var(--up-ink); }
.down { color: var(--down-ink); }

.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.hidden { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}