/* ============================================================================
   TOKENS — Design System Benel
   ============================================================================
   Carregue SEMPRE nesta ordem, no <head>:

     1. Bootstrap 5.3 (CDN)
     2. tokens.css                    <- este arquivo
     3. partials/theme_vars.php       <- sobrescreve a marca conforme a empresa
     4. dark-mode.css
     5. dashboard-ui.css
     6. CSS específico da página

   REGRA: nenhum valor de cor, espaçamento, raio ou sombra escrito solto no CSS
   de componente. Se precisar de um valor novo, crie o token aqui.

   As cores vieram verbatim da Plex. As escalas de espaço/raio/sombra/tipografia
   são NOVAS: na Plex esses valores são literais espalhados (8 raios diferentes,
   ~25 sombras, 14 breakpoints), o que impede consistência entre telas.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------- MARCA
     Defaults da BENEL. theme_vars.php sobrescreve --brand-primary/secondary
     por empresa, lendo empresa.cor_primaria / cor_secundaria do banco.

     O #15004D e o azul-marinho do logotipo; o #FEDF00 e o amarelo da faixa.
     O kit vinha com o indigo #4f46e5 e o violeta #7c3aed do Tailwind, que
     eram da Plex. O default importa mesmo com a cor vindo do banco: e o que
     a tela mostra ANTES de a empresa ser cadastrada, e e o fallback de toda
     regra `var(--cor-primaria, ...)` espalhada pelo CSS. */
  --brand-primary: #15004d;
  --brand-secondary: #4a2fa0;
  --brand-accent: #fedf00;
  --brand-surface-light: #ffffff;

  /* ------------------------------------------------------------- NEUTROS
     Escala slate, a família de fato já usada na Plex. */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  /* ------------------------------------------------------------ SEMÂNTICA
     Estado, não decoração. Um botão "salvar" usa --color-primary;
     um badge "ativo" usa --color-success. */
  --color-primary: var(--brand-primary);
  --color-secondary: var(--brand-secondary);
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #2563eb;

  --color-success-dark: #4ade80; /* pares para dark mode */
  --color-warning-dark: #facc15;
  --color-danger-dark: #f87171;
  --color-info-dark: #60a5fa;

  /* Semáforo de progresso (herdado do dashboard da Plex) */
  --progress-low: var(--color-danger);
  --progress-mid: var(--color-warning);
  --progress-high: var(--color-success);

  /* --------------------------------------------------- ACENTO POR MÓDULO
     Cada módulo do menu tem uma cor própria de ícone. Ao criar um módulo novo,
     acrescente um token aqui em vez de escrever o hex na folha do componente. */
  --module-1: #16a34a; /* verde   */
  --module-2: #2563eb; /* azul    */
  --module-3: #7c3aed; /* roxo    */
  --module-4: #0891b2; /* ciano   */
  --module-5: #0d9488; /* teal    */
  --module-6: #ea580c; /* laranja */
  --module-7: #f472b6; /* rosa    */

  /* ---------------------------------------------------------- SUPERFÍCIES
     Valores de light mode. dark-mode.css troca os mesmos nomes no .dark-mode,
     então componente nenhum precisa saber em que tema está. */
  --page-bg: #f4f6fb;
  --surface-bg: #ffffff;
  --surface-muted: #f3f4f6;
  --surface-raised: #ffffff;
  --border-color: #dee2e6;
  --text-primary: #212529;
  --text-secondary: #6c757d;
  --text-muted: var(--gray-500);
  --text-on-brand: #ffffff;

  /* ------------------------------------------------- FAIXAS DE AVISO
     Fundo e texto de aviso, erro, sucesso e informação — as tarjas que as
     telas usam para explicar alguma coisa (a legenda da Sincronização, o
     "a CSVT informa X" do campo fixado, o alerta do perfil de administrador).

     Existem como TOKEN e não como hex na folha do componente porque o par
     fundo/texto tem de virar junto no tema escuro: escurecer só o fundo, ou
     só o texto, produz exatamente a tarja ilegível que essas faixas existiam
     para evitar. Trocados logo abaixo, no bloco .dark-mode. */
  --color-success-bg: #dcfce7;
  --color-success-text: #14532d;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;
  --color-danger-bg: #fee2e2;
  --color-danger-text: #7f1d1d;
  --color-info-bg: #e0f2fe;
  --color-info-text: #075985;

  /* ------------------------------------------------- PONTE PARA O TEMA DA EMPRESA
     `theme-vars.blade.php` emite pares `-light`/`-dark` derivados da cor da
     empresa. Eles são ENTRADA, não consumo: folha de página nenhuma deve
     referenciar um nome com sufixo, porque par fixo não troca de tema sozinho e
     cada uso exigiria uma regra `.dark-mode` própria — foi assim que o modo
     escuro quebrou. Estes três apelidos são o único lugar autorizado a lê-los. */
  --table-header-bg: var(--table-header-bg-light);
  --table-header-text: var(--table-header-text-light);
  --brand-outline: var(--brand-outline-light);

  /* A MARCA, LEGÍVEL SOBRE A SUPERFÍCIE ATUAL.
     `--brand-primary` da BENEL é #15004d — quase preto. Serve de fundo com
     texto branco em cima (sidebar, botão), e NÃO serve para nada que precise
     aparecer SOBRE a superfície: barra de gráfico, risco de trajeto, texto de
     selo. No tema escuro essas três coisas somem, e some em silêncio — não é
     erro, é um retângulo preto sobre fundo preto.
     Derivado da marca, e não fixo, para seguir acompanhando o white-label. */
  --brand-on-surface: var(--brand-primary);
  /* O mesmo, a 10%, para fundo de selo e realce. */
  --brand-primary-soft: color-mix(in srgb, var(--brand-primary) 10%, transparent);

  /* ------------------------------------------------------------- SIDEBAR */
  --sidebar-bg: var(--brand-primary);
  --sidebar-text: rgba(255, 255, 255, 0.95);
  --sidebar-text-muted: rgba(255, 255, 255, 0.82);
  --sidebar-active-bg: rgba(255, 255, 255, 0.14);
  --sidebar-width: 72px;
  --sidebar-width-expanded: 240px;
  --topbar-height: 44px;

  /* ------------------------------------------------------------ ESPAÇAMENTO
     Escala de 4px. Use os tokens; não escreva 13px porque "ficou melhor". */
  --space-0: 0;
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem;  /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */

  /* ------------------------------------------------------------------ RAIO */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* botões e inputs */
  --radius-lg: 12px;  /* painéis         */
  --radius-xl: 14px;  /* cards           */
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---------------------------------------------------------------- SOMBRA
     Três níveis de elevação e um anel de foco. Nada além disso. */
  --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
  --shadow-drawer: 4px 0 24px rgba(0, 0, 0, 0.15);
  /* Alias histórico: a Plex usa --card-shadow mas nunca o define. Aqui existe. */
  --card-shadow: var(--shadow-sm);

  /* ------------------------------------------------------------ TIPOGRAFIA
     A interface é deliberadamente densa: corpo em 0.8125rem. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.625rem;  /* 10px — metadado                       */
  --text-xs: 0.6875rem;  /* 11px — cabeçalho de tabela, maiúsculas */
  --text-sm: 0.75rem;    /* 12px — auxiliar                       */
  --text-base: 0.8125rem;/* 13px — CORPO PADRÃO                   */
  --text-md: 0.875rem;   /* 14px — ênfase                         */
  --text-lg: 1rem;       /* 16px                                  */
  --text-xl: 1.15rem;    /* título de página                      */
  --text-2xl: 1.5rem;    /* valor de card de estatística          */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em; /* títulos          */
  --tracking-tighter: -0.03em;/* números grandes  */
  --tracking-wide: 0.05em;   /* rótulos em caixa alta */

  /* ---------------------------------------------------------------- CAMADAS
     Use os tokens; um z-index de 99999 no meio do CSS quebra modal e dropdown. */
  --z-base: 1;
  --z-sticky: 100;
  --z-sidebar: 1000;
  --z-overlay: 999;
  --z-dropdown: 1010;
  --z-modal: 1050;
  --z-toast: 1100;

  /* -------------------------------------------------------------- MOVIMENTO */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.3s ease;
}

/* ---------------------------------------------------------------------------
   DARK MODE
   Só troca superfícies e texto. Marca, espaçamento, raio e tipografia não mudam.
   --------------------------------------------------------------------------- */
.dark-mode {
  --page-bg: color-mix(in srgb, var(--brand-primary) 10%, var(--gray-950));
  --surface-bg: color-mix(in srgb, var(--brand-primary) 17%, var(--gray-900));
  --surface-muted: color-mix(in srgb, var(--brand-primary) 24%, #111827);
  --surface-raised: color-mix(in srgb, var(--brand-primary) 18%, #111827);
  --border-color: #495057;
  --text-primary: #e9ecef;
  --text-secondary: #adb5bd;
  --text-muted: var(--gray-400);

  --sidebar-bg: color-mix(in srgb, var(--brand-primary) 80%, var(--gray-950));

  --color-success: var(--color-success-dark);
  --color-warning: var(--color-warning-dark);
  --color-danger: var(--color-danger-dark);
  --color-info: var(--color-info-dark);

  /* As faixas de aviso no escuro: fundo translúcido da própria cor sobre a
     superfície, e texto na versão clara dela. Um fundo opaco pastel (o do modo
     claro) com texto escuro fica ilegível aqui; e manter o fundo claro com o
     texto claro do tema faz a tarja SUMIR — foi o que aconteceu. */
  --color-success-bg: color-mix(in srgb, var(--color-success-dark) 18%, transparent);
  --color-success-text: var(--color-success-dark);
  --color-warning-bg: color-mix(in srgb, var(--color-warning-dark) 18%, transparent);
  --color-warning-text: var(--color-warning-dark);
  --color-danger-bg: color-mix(in srgb, var(--color-danger-dark) 18%, transparent);
  --color-danger-text: var(--color-danger-dark);
  --color-info-bg: color-mix(in srgb, var(--color-info-dark) 18%, transparent);
  --color-info-text: var(--color-info-dark);

  --table-header-bg: var(--table-header-bg-dark);
  --table-header-text: var(--table-header-text-dark);
  --brand-outline: var(--brand-outline-dark);
  --brand-on-surface: color-mix(in srgb, var(--brand-secondary) 55%, #ffffff);
  /* Mais forte que os 10% do claro: sobre superfície escura, 10% da marca é
     indistinguível do próprio cartão — o selo perde a forma. */
  --brand-primary-soft: color-mix(in srgb, var(--brand-secondary) 32%, transparent);

  --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* --------------------------------------------- PONTE PARA O BOOTSTRAP 5.3

     `data-bs-theme="dark"` faz o Bootstrap trocar de paleta sozinho — para o
     CINZA GENERICO dele (#212529, #343a40, #495057). Funciona, e fica errado
     de um jeito discreto: o sistema inteiro e roxo-escuro da marca e os
     componentes do Bootstrap (dropdown, offcanvas, select, table-striped,
     modal) ficam cinza-chumbo no meio. Parece descuido, e num produto
     white-label e pior: a marca que a empresa configurou para de valer
     justamente nos componentes prontos.

     Redefinir os `--bs-*` aqui e o que faz o Bootstrap herdar a marca em vez
     de ignora-la. `[data-bs-theme=dark]` e `.dark-mode` tem a MESMA
     especificidade, e esta folha carrega depois do CDN do Bootstrap — e so
     por isso que estas linhas vencem. Mudar a ordem no `<head>` as desliga
     sem quebrar nada visivelmente. */
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-emphasis-color: var(--text-primary);
  --bs-heading-color: var(--text-primary);
  --bs-border-color: var(--border-color);
  --bs-secondary-bg: var(--surface-muted);
  --bs-tertiary-bg: var(--surface-raised);
  --bs-link-color: var(--brand-on-surface);
  --bs-link-hover-color: var(--brand-on-surface);
  --bs-code-color: var(--brand-on-surface);
}

/* ---------------------------------------------------------------------------
   BREAKPOINTS
   Os mesmos do Bootstrap 5. A Plex tem 14 valores diferentes espalhados
   (480, 520, 576, 600, 640, 767.98, 768, 769, 900, 991, 991.98, 992, 1024, 1200)
   e por isso as telas quebram em larguras diferentes umas das outras.
   CSS não permite variável em @media, então estes são os valores canônicos:
       sm  576px      md  768px      lg  992px      xl 1200px      xxl 1400px
   Use exatamente estes. Para "abaixo de", use max-width: 767.98px.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--page-bg);
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
}

/* Foco visível em tudo que recebe teclado — requisito de acessibilidade e
   condição para o sistema ser utilizável sem mouse. */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

@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;
  }
}

/* ---------------------------------------------------------------------------
   UTILITÁRIOS DO DESIGN SYSTEM
   Componentes reutilizáveis que não existem no Bootstrap.
   --------------------------------------------------------------------------- */

/* Card de estatística — a faixa no topo de toda listagem */
.ds-stat-card {
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ds-stat-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}
.ds-stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}
.ds-stat-value--success { color: var(--color-success); }
.ds-stat-value--danger  { color: var(--color-danger); }

.ds-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
@media (max-width: 767.98px) {
  .ds-stats-grid { grid-template-columns: 1fr; }
}

/* Cabeçalho de tabela — mesmo tratamento em todas as listagens */
.ds-table thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface-bg));
  border: 0;
}
.ds-table tbody td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
}
.ds-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand-primary) 4%, transparent);
}

/* Estado vazio — obrigatório em toda listagem (ver docs/ui-ux.md) */
.ds-empty {
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--text-secondary);
}
.ds-empty__icon {
  font-size: 2.4rem;
  opacity: 0.4;
  display: block;
  margin-bottom: var(--space-2);
}
.ds-empty__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}
.ds-empty__hint {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* Estado de carregamento */
.ds-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 40vh;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}