/* ============================================================================
   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. theme_vars.php sobrescreve --brand-primary/secondary por empresa,
     lendo empresa.cor_primaria / cor_secundaria do banco. */
  --brand-primary: #4f46e5;
  --brand-secondary: #7c3aed;
  --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;

  /* ------------------------------------------------------------- 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);

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

/* ---------------------------------------------------------------------------
   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);
}