/* =============================================================================
 * tema.css — identidade visual da SEMED Manacapuru sobre o Velzon (Bootstrap 5.3).
 * Carregado em base.html depois de app.min.css e custom.min.css, antes do
 * navigation.css e do CSS de cada tela. Só redefine tokens (--vz-*) e ajusta
 * componentes pontuais; os templates continuam usando as classes do Bootstrap.
 *
 * Princípios: uma fonte (Inter), neutros frios, primária única (azul da marca),
 * bordas de 1px no lugar de sombras, badges tom sobre tom com contraste AA,
 * foco sempre visível. Menu lateral grafite (slate).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 0. Fonte — Inter variável, servida localmente (static/fonts/inter, OFL).
 * -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
 * 1. Paletas-base (privadas, prefixo --tk-). Não usar direto nos templates;
 *    os templates continuam usando --vz-* / classes do Bootstrap.
 * -------------------------------------------------------------------------- */
:root {
  /* Azul Educação da Prefeitura de Manacapuru (#0E47A9; pesquisa/04 §4) */
  --tk-primary-50:  #eef3fc;
  --tk-primary-100: #dce6f8;
  --tk-primary-200: #b5c9f0;
  --tk-primary-300: #86a6e4;
  --tk-primary-400: #5580d4;
  --tk-primary-500: #2f63c4;   /* primária no modo escuro / hover em fundo escuro */
  --tk-primary-600: #0e47a9;   /* PRIMÁRIA (branco sobre ela = 8.4:1) */
  --tk-primary-700: #0b3c8c;   /* hover */
  --tk-primary-800: #093274;   /* active */
  --tk-primary-900: #082b4c;
  --tk-primary-rgb: 14, 71, 169;
  /* Verde Manacapuru (marca) e acentos */
  --tk-verde: #0b6e3a;
  --tk-ouro: #f2a900;


  /* Neutros frios (slate-ish) */
  --tk-gray-0:   #ffffff;
  --tk-gray-25:  #fbfcfd;
  --tk-gray-50:  #f6f7f9;   /* fundo da página (era #f3f3f9, arroxeado) */
  --tk-gray-100: #eef0f3;   /* hover de linha, fundo terciário */
  --tk-gray-200: #e2e5ea;   /* bordas */
  --tk-gray-300: #cfd4dc;   /* borda de input */
  --tk-gray-400: #9aa2b1;   /* placeholder, ícones desabilitados */
  --tk-gray-500: #6b7385;   /* texto secundário em branco (4.8:1) */
  --tk-gray-600: #5f6779;   /* texto secundário em #f6f7f9 (5.3:1) */
  --tk-gray-700: #3a404c;   /* títulos */
  --tk-gray-800: #262a33;
  --tk-gray-900: #171a20;   /* texto do corpo */
  --tk-gray-950: #0f1115;
}

/* -----------------------------------------------------------------------------
 * 2. Tokens — MODO CLARO
 * -------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
  /* Tipografia */
  --vz-font-sans-serif: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vz-body-font-family: var(--vz-font-sans-serif);
  --vz-body-font-size: 0.875rem;     /* 14px (era 13px) */
  --vz-body-line-height: 1.5;
  --vz-body-font-weight: 400;
  --tk-fs-xs: 0.75rem;   /* 12 — meta, badges, rótulos */
  --tk-fs-sm: 0.8125rem; /* 13 — tabela densa, help text */
  --tk-fs-md: 0.875rem;  /* 14 — corpo */
  --tk-fs-lg: 1rem;      /* 16 — títulos de card */
  --tk-fs-xl: 1.25rem;   /* 20 — título de página */
  --tk-fs-2xl: 1.5rem;   /* 24 — KPIs */
  --tk-fw-regular: 400;
  --tk-fw-medium: 500;
  --tk-fw-semibold: 600;

  /* Superfícies e texto */
  --vz-body-bg: var(--tk-gray-50);
  --vz-body-bg-rgb: 246, 247, 249;
  --vz-body-color: var(--tk-gray-900);
  --vz-body-color-rgb: 23, 26, 32;
  --vz-emphasis-color: var(--tk-gray-950);
  --vz-heading-color: var(--tk-gray-900);
  --vz-secondary-bg: #ffffff;          /* = --vz-card-bg */
  --vz-tertiary-bg: var(--tk-gray-100);
  --vz-tertiary-bg-rgb: 238, 240, 243;
  --vz-secondary-color: var(--tk-gray-600);   /* text-muted: 5.3:1 (era 3.1:1) */
  --vz-secondary-color-rgb: 95, 103, 121;
  --vz-tertiary-color: var(--tk-gray-500);
  --vz-light: var(--tk-gray-100);
  --vz-light-rgb: 238, 240, 243;
  --vz-input-bg-custom: #ffffff;
  --vz-input-border-custom: var(--tk-gray-300);

  /* Bordas */
  --vz-border-width: 1px;
  --vz-border-color: var(--tk-gray-200);
  --vz-border-color-translucent: rgba(23, 26, 32, 0.10);

  /* Raios: 4 (badge/checkbox) · 6 (botão/input) · 8 (card/dropdown) · 12 (modal) */
  --vz-border-radius-sm: 4px;
  --vz-border-radius: 6px;
  --vz-border-radius-lg: 8px;
  --vz-border-radius-xl: 12px;
  --vz-border-radius-xxl: 16px;
  --vz-border-radius-pill: 999px;

  /* Sombras: só 2 níveis. Cards usam borda, não sombra. */
  --tk-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --tk-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.06);
  --vz-box-shadow-sm: var(--tk-shadow-sm);
  --vz-box-shadow: var(--tk-shadow-md);
  --vz-box-shadow-lg: var(--tk-shadow-md);

  /* Foco */
  --tk-focus-ring: 0 0 0 3px rgba(var(--tk-primary-rgb), 0.28);
  --vz-focus-ring-width: 3px;
  --vz-focus-ring-opacity: 0.28;

  /* Primária */
  --vz-primary: var(--tk-primary-600);
  --vz-primary-rgb: var(--tk-primary-rgb);
  --vz-primary-text-emphasis: var(--tk-primary-700);
  --vz-primary-bg-subtle: var(--tk-primary-50);
  --vz-primary-border-subtle: var(--tk-primary-200);
  --vz-link-color: var(--tk-primary-600);
  --vz-link-color-rgb: var(--tk-primary-rgb);
  --vz-link-hover-color: var(--tk-primary-700);
  --vz-link-hover-color-rgb: 51, 65, 133;

  /* Secundária = neutro (Velzon usa um roxo #3577f1 aqui em alguns pontos) */
  --vz-secondary: var(--tk-gray-600);
  --vz-secondary-rgb: 95, 103, 121;
  --vz-secondary-text-emphasis: var(--tk-gray-700);
  --vz-secondary-bg-subtle: var(--tk-gray-100);
  --vz-secondary-border-subtle: var(--tk-gray-300);

  /* Semânticas — sólido / texto-ênfase / fundo-sutil / borda-sutil
     Todos os pares texto-ênfase sobre bg-subtle >= 4.5:1 */
  --vz-success: #0b7d6c;          --vz-success-rgb: 11, 125, 108;   /* branco 5.0:1 */
  --vz-success-text-emphasis: #047857;
  --vz-success-bg-subtle: #e6f6f0;  /* 4.9:1 com o texto */
  --vz-success-border-subtle: #a7e3cf;

  --vz-info: #1f6fd1;             --vz-info-rgb: 31, 111, 209;
  --vz-info-text-emphasis: #175cd3;
  --vz-info-bg-subtle: #e8f1fd;     /* 5.3:1 */
  --vz-info-border-subtle: #b2cff7;

  --vz-warning: #f5b544;          --vz-warning-rgb: 245, 181, 68;   /* sólido usa texto escuro (8.1:1) */
  --vz-warning-text-emphasis: #a15c07;
  --vz-warning-bg-subtle: #fdf3e1;  /* 4.7:1 */
  --vz-warning-border-subtle: #f6d79e;

  --vz-danger: #d03b2f;           --vz-danger-rgb: 208, 59, 47;     /* branco 4.8:1 */
  --vz-danger-text-emphasis: #b42318;
  --vz-danger-bg-subtle: #fdecea;   /* 5.8:1 */
  --vz-danger-border-subtle: #f5c2bd;

  --vz-dark: var(--tk-gray-900);  --vz-dark-rgb: 23, 26, 32;
  --vz-dark-text-emphasis: var(--tk-gray-800);
  --vz-dark-bg-subtle: var(--tk-gray-100);
  --vz-dark-border-subtle: var(--tk-gray-300);

  /* Topbar / rodapé */
  --vz-header-bg: #ffffff;
  --vz-header-border: var(--tk-gray-200);
  --vz-footer-bg: transparent;
}

/* -----------------------------------------------------------------------------
 * 3. Tokens — MODO ESCURO (neutro frio, sem tom azulado do Velzon)
 * -------------------------------------------------------------------------- */
[data-bs-theme=dark] {
  --vz-body-bg: #0f1115;
  --vz-body-bg-rgb: 15, 17, 21;
  --vz-body-color: #e6e8ec;                /* 14.4:1 sobre card */
  --vz-body-color-rgb: 230, 232, 236;
  --vz-emphasis-color: #ffffff;
  --vz-heading-color: #f1f3f5;
  --vz-secondary-bg: #16191f;              /* card */
  --vz-tertiary-bg: #1d2027;
  --vz-tertiary-bg-rgb: 29, 32, 39;
  --vz-secondary-color: #9aa3b2;           /* 6.9:1 sobre card */
  --vz-secondary-color-rgb: 154, 163, 178;
  --vz-light: #1d2027;
  --vz-light-rgb: 29, 32, 39;
  --vz-input-bg-custom: #12151a;
  --vz-input-border-custom: #2f343e;
  --vz-border-color: #2a2e37;
  --vz-border-color-translucent: rgba(255, 255, 255, 0.08);

  --tk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --tk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);

  --vz-primary: #8b9bf0;                   /* texto/links; 6.7:1 sobre card */
  --vz-primary-rgb: 139, 155, 240;
  --vz-primary-text-emphasis: #a5b0f5;
  --vz-primary-bg-subtle: #232845;
  --vz-primary-border-subtle: #39407a;
  --vz-link-color: #8b9bf0;
  --vz-link-hover-color: #a5b0f5;
  --tk-focus-ring: 0 0 0 3px rgba(139, 155, 240, 0.40);

  --vz-secondary: #9aa3b2;  --vz-secondary-rgb: 154, 163, 178;
  --vz-secondary-text-emphasis: #cfd4dc;
  --vz-secondary-bg-subtle: #1d2027;
  --vz-secondary-border-subtle: #2f343e;

  --vz-success: #34c79a;   --vz-success-rgb: 52, 199, 154;
  --vz-success-text-emphasis: #4ade9a;  --vz-success-bg-subtle: #12302a;  --vz-success-border-subtle: #1e5a48;
  --vz-info: #60a5fa;      --vz-info-rgb: 96, 165, 250;
  --vz-info-text-emphasis: #60a5fa;     --vz-info-bg-subtle: #14243d;     --vz-info-border-subtle: #1f3e6b;
  --vz-warning: #fbbf5a;   --vz-warning-rgb: 251, 191, 90;
  --vz-warning-text-emphasis: #fbbf5a;  --vz-warning-bg-subtle: #33270f;  --vz-warning-border-subtle: #5c4719;
  --vz-danger: #f87171;    --vz-danger-rgb: 248, 113, 113;
  --vz-danger-text-emphasis: #f87171;   --vz-danger-bg-subtle: #3a1b1b;   --vz-danger-border-subtle: #6b2a2a;
  --vz-dark: #e6e8ec;      --vz-dark-rgb: 230, 232, 236;
  --vz-dark-text-emphasis: #e6e8ec;     --vz-dark-bg-subtle: #1d2027;     --vz-dark-border-subtle: #2f343e;

  --vz-header-bg: #16191f;
  --vz-header-border: #2a2e37;
}

/* -----------------------------------------------------------------------------
 * 4. Base e tipografia
 * -------------------------------------------------------------------------- */
body {
  font-family: var(--vz-font-sans-serif);
  font-feature-settings: "cv11", "ss01";       /* Inter: 1 de traço reto, a/g de UI */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Velzon força Poppins em headings e HK Grotesk no menu — unificar */
:is(.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6),
.ff-secondary,
.navbar-menu .navbar-nav .nav-link {
  font-family: var(--vz-font-sans-serif);
  letter-spacing: -0.011em;
}
:is(h1,.h1) { font-size: 1.5rem;   font-weight: 600; }
:is(h2,.h2) { font-size: 1.25rem;  font-weight: 600; }
:is(h3,.h3) { font-size: 1.125rem; font-weight: 600; }
:is(h4,.h4) { font-size: 1rem;     font-weight: 600; }
:is(h5,.h5) { font-size: 0.9375rem; font-weight: 600; }
:is(h6,.h6) { font-size: 0.875rem; font-weight: 600; }
.fw-bold, .fw-bolder { font-weight: 600 !important; }   /* teto de peso = 600 */
.fs-10 { font-size: 0.75rem !important; }               /* nada abaixo de 12px */
.fs-11 { font-size: 0.75rem !important; }
.text-muted { color: var(--vz-secondary-color) !important; }
.font-monospace, code, kbd { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.tabular-nums, .table td, .kpi-valor { font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
 * 5. Cabeçalho de página / breadcrumb — sentence case, sem CAIXA ALTA
 *    (app.min.css: .page-title-box h4{font-weight:700;font-size:15px!important;text-transform:uppercase})
 * -------------------------------------------------------------------------- */
.page-title-box {
  padding: 0;
  margin: 0 0 1.25rem;              /* Velzon puxa a faixa para as bordas com margem negativa */
  background: transparent;
  box-shadow: none;
  border: 0;
}
.page-title-box h4 {
  font-size: var(--tk-fs-xl) !important;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.015em;
  color: var(--vz-heading-color);
}
.breadcrumb { --vz-breadcrumb-font-size: var(--tk-fs-sm); --vz-breadcrumb-divider-color: var(--tk-gray-400); }
.breadcrumb-item a { color: var(--vz-secondary-color); }
.breadcrumb-item a:hover { color: var(--vz-body-color); }
.breadcrumb-item.active { color: var(--vz-body-color); }

/* -----------------------------------------------------------------------------
 * 6. Cards — borda 1px, sem sombra
 * -------------------------------------------------------------------------- */
.card {
  --vz-card-border-width: 1px;
  --vz-card-border-color: var(--vz-border-color);
  --vz-card-border-radius: var(--vz-border-radius-lg);
  --vz-card-inner-border-radius: calc(var(--vz-border-radius-lg) - 1px);
  --vz-card-spacer-y: 1.25rem;
  --vz-card-spacer-x: 1.25rem;
  --vz-card-cap-padding-y: 0.875rem;
  --vz-card-cap-padding-x: 1.25rem;
  --vz-card-cap-bg: transparent;
  border: 1px solid var(--vz-border-color) !important;     /* app.min.css zera a borda */
  box-shadow: none !important;
  margin-bottom: 1.25rem;
}
.card-header { border-bottom: 1px solid var(--vz-border-color); }
.card-title, .card-header .card-title { font-size: var(--tk-fs-lg); font-weight: 600; text-transform: none; }
.card-animate:hover { transform: none; box-shadow: none !important; }

/* -----------------------------------------------------------------------------
 * 7. Botões — alturas 32 (sm) · 36 (md) · 40 (lg); raio 6
 *    .btn-primary e afins têm HEX compilado no bootstrap.min.css (#405189),
 *    por isso as variáveis precisam ser redefinidas por variante.
 * -------------------------------------------------------------------------- */
.btn {
  --vz-btn-padding-x: 0.875rem;
  --vz-btn-padding-y: 0.4375rem;     /* 14px*1.5 + 2*7 + 2 = 36px */
  --vz-btn-font-size: var(--tk-fs-md);
  --vz-btn-font-weight: 500;
  --vz-btn-border-radius: var(--vz-border-radius);
  --vz-btn-box-shadow: none;
  --vz-btn-focus-box-shadow: var(--tk-focus-ring);
  --vz-btn-active-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
}
.btn-sm { --vz-btn-padding-y: 0.25rem; --vz-btn-padding-x: 0.625rem; --vz-btn-font-size: var(--tk-fs-sm); --vz-btn-border-radius: var(--vz-border-radius); }
.btn-lg { --vz-btn-padding-y: 0.5rem;  --vz-btn-padding-x: 1rem;     --vz-btn-font-size: var(--tk-fs-md); --vz-btn-border-radius: var(--vz-border-radius); }

.btn-primary {
  --vz-btn-color: #fff;
  --vz-btn-bg: var(--tk-primary-600);
  --vz-btn-border-color: var(--tk-primary-600);
  --vz-btn-hover-color: #fff;
  --vz-btn-hover-bg: var(--tk-primary-700);
  --vz-btn-hover-border-color: var(--tk-primary-700);
  --vz-btn-active-color: #fff;
  --vz-btn-active-bg: var(--tk-primary-800);
  --vz-btn-active-border-color: var(--tk-primary-800);
  --vz-btn-disabled-bg: var(--tk-primary-600);
  --vz-btn-disabled-border-color: var(--tk-primary-600);
}
[data-bs-theme=dark] .btn-primary {
  --vz-btn-bg: var(--tk-primary-500);
  --vz-btn-border-color: var(--tk-primary-500);
  --vz-btn-hover-bg: var(--tk-primary-400);
  --vz-btn-hover-border-color: var(--tk-primary-400);
  --vz-btn-active-bg: var(--tk-primary-600);
}
/* Secundário = branco com borda (Primer/Polaris) */
.btn-light, .btn-outline-secondary, .btn-secondary {
  --vz-btn-color: var(--vz-body-color);
  --vz-btn-bg: var(--vz-secondary-bg);
  --vz-btn-border-color: var(--vz-input-border-custom);
  --vz-btn-hover-color: var(--vz-body-color);
  --vz-btn-hover-bg: var(--vz-tertiary-bg);
  --vz-btn-hover-border-color: var(--vz-input-border-custom);
  --vz-btn-active-color: var(--vz-body-color);
  --vz-btn-active-bg: var(--vz-border-color);
  --vz-btn-active-border-color: var(--vz-input-border-custom);
  box-shadow: var(--tk-shadow-sm);
}
/* Ghost */
.btn-ghost-primary, .btn-ghost-secondary, .btn-ghost-dark, .btn-link {
  --vz-btn-hover-bg: var(--vz-tertiary-bg);
  box-shadow: none;
}
.btn-danger {
  --vz-btn-bg: var(--vz-danger); --vz-btn-border-color: var(--vz-danger);
  --vz-btn-hover-bg: #b42318; --vz-btn-hover-border-color: #b42318;
  --vz-btn-active-bg: #912018; --vz-btn-active-border-color: #912018;
}
.btn-success {
  --vz-btn-bg: var(--vz-success); --vz-btn-border-color: var(--vz-success);
  --vz-btn-hover-bg: #096b5d; --vz-btn-hover-border-color: #096b5d;
  --vz-btn-active-bg: #075a4e; --vz-btn-active-border-color: #075a4e;
}
.btn-warning { --vz-btn-color: var(--tk-gray-900); --vz-btn-hover-color: var(--tk-gray-900); }
/* "soft" do Velzon (bg-subtle) — manter, mas com texto-ênfase (contraste AA) */
.btn-soft-primary { color: var(--vz-primary-text-emphasis); background: var(--vz-primary-bg-subtle); }
.btn-soft-danger  { color: var(--vz-danger-text-emphasis);  background: var(--vz-danger-bg-subtle); }
.btn-soft-success { color: var(--vz-success-text-emphasis); background: var(--vz-success-bg-subtle); }
.btn-icon { width: 2.25rem; height: 2.25rem; }
.btn-icon.btn-sm { width: 2rem; height: 2rem; }

/* -----------------------------------------------------------------------------
 * 8. Foco visível (bootstrap.min.css tem `box-shadow:0 0 1 .25rem` — valor
 *    INVÁLIDO, então hoje inputs não têm anel de foco)
 * -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--vz-primary); outline-offset: 2px; }
.btn:focus-visible { outline: 0; box-shadow: var(--tk-focus-ring); }
.form-control:focus, .form-select:focus, .form-check-input:focus,
.choices.is-focused .choices__inner, .select2-container--focus .select2-selection {
  border-color: var(--tk-primary-400) !important;
  box-shadow: var(--tk-focus-ring) !important;
  outline: 0;
}

/* -----------------------------------------------------------------------------
 * 9. Inputs / selects — 36px, raio 6, borda gray-300
 * -------------------------------------------------------------------------- */
.form-control, .form-select {
  min-height: 2.25rem;
  padding: 0.4375rem 0.75rem;
  font-size: var(--tk-fs-md);
  border: 1px solid var(--vz-input-border-custom);
  border-radius: var(--vz-border-radius);
  background-color: var(--vz-input-bg-custom);
  transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { min-height: 2rem; padding: 0.25rem 0.625rem; font-size: var(--tk-fs-sm); }
.form-control::placeholder { color: var(--tk-gray-400); }
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--tk-gray-400); }
.form-control:disabled, .form-select:disabled { background-color: var(--vz-tertiary-bg); color: var(--vz-secondary-color); }
.form-label { font-size: var(--tk-fs-sm); font-weight: 500; color: var(--vz-body-color); margin-bottom: 0.375rem; }
.form-text, .invalid-feedback { font-size: var(--tk-fs-xs); }
.form-check-input:checked { background-color: var(--vz-primary); border-color: var(--vz-primary); }
.input-group-text { background: var(--vz-tertiary-bg); border-color: var(--vz-input-border-custom); color: var(--vz-secondary-color); }

/* -----------------------------------------------------------------------------
 * 10. Tabelas — cabeçalho discreto, linhas 44px, hover neutro
 * -------------------------------------------------------------------------- */
.table {
  --vz-table-border-color: var(--vz-border-color);
  --vz-table-hover-bg: rgba(var(--vz-body-color-rgb), 0.03);
  --vz-table-striped-bg: rgba(var(--vz-body-color-rgb), 0.02);
  font-size: var(--tk-fs-md);
}
.table > :not(caption) > * > * { padding: 0.625rem 0.875rem; vertical-align: middle; }
.table > thead > tr > th,
.table-light > tr > th, .table .table-light th {
  font-size: var(--tk-fs-xs);
  font-weight: 500;
  color: var(--vz-secondary-color);
  text-transform: none;
  letter-spacing: 0;
  background: var(--vz-tertiary-bg);
  border-bottom: 1px solid var(--vz-border-color);
  white-space: nowrap;
}
/* app.min.css define .table-light com --vz-table-color:white no escuro (texto some) */
.table-light { --vz-table-color: var(--vz-body-color); --vz-table-bg: var(--vz-tertiary-bg); }
.table-card { margin: 0; }
.table-sm > :not(caption) > * > * { padding: 0.375rem 0.75rem; }

/* -----------------------------------------------------------------------------
 * 11. Badges / pills — tom-sobre-tom, sentence case, raio 4 (ou pill)
 *     Recomendação de mapeamento (templates):
 *       Status   Novo=info · Aberto/Em atendimento=primary · Aguardando=warning
 *                Pausado=secondary · Resolvido=success · Fechado=dark(neutro)
 *       Prioridade (com ponto colorido, sem fundo sólido):
 *                Baixa=secondary · Média=info · Alta=warning · Urgente=danger
 * -------------------------------------------------------------------------- */
.badge {
  --vz-badge-padding-x: 0.5rem;
  --vz-badge-padding-y: 0.1875rem;
  --vz-badge-font-size: var(--tk-fs-xs);
  --vz-badge-font-weight: 500;
  --vz-badge-border-radius: var(--vz-border-radius-sm);
  line-height: 1.25;
  text-transform: none !important;       /* neutraliza text-uppercase em ticket_list.html */
  letter-spacing: 0;
}
.badge.rounded-pill { --vz-badge-padding-x: 0.5625rem; }
/* bg-*-subtle + text-* → usar text-emphasis (o text-* puro reprova AA: ex. #f7b84b sobre #fef4e4 = 1.6:1) */
.badge.bg-primary-subtle   { color: var(--vz-primary-text-emphasis) !important;   box-shadow: inset 0 0 0 1px var(--vz-primary-border-subtle); }
.badge.bg-success-subtle   { color: var(--vz-success-text-emphasis) !important;   box-shadow: inset 0 0 0 1px var(--vz-success-border-subtle); }
.badge.bg-info-subtle      { color: var(--vz-info-text-emphasis) !important;      box-shadow: inset 0 0 0 1px var(--vz-info-border-subtle); }
.badge.bg-warning-subtle   { color: var(--vz-warning-text-emphasis) !important;   box-shadow: inset 0 0 0 1px var(--vz-warning-border-subtle); }
.badge.bg-danger-subtle    { color: var(--vz-danger-text-emphasis) !important;    box-shadow: inset 0 0 0 1px var(--vz-danger-border-subtle); }
.badge.bg-secondary-subtle,
.badge.bg-dark-subtle,
.badge.bg-light            { color: var(--vz-secondary-text-emphasis) !important; background: var(--vz-secondary-bg-subtle) !important; box-shadow: inset 0 0 0 1px var(--vz-secondary-border-subtle); }
/* Sólidos só para alertas fortes (ex.: SLA estourado) */
.badge.bg-warning, .badge.text-bg-warning { color: var(--tk-gray-900) !important; }
/* Ponto de prioridade: <span class="tk-dot tk-dot-danger"></span> */
.tk-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; margin-right: .375rem; vertical-align: middle; }
.tk-dot-danger { background: var(--vz-danger); } .tk-dot-warning { background: var(--vz-warning); }
.tk-dot-info { background: var(--vz-info); }     .tk-dot-secondary { background: var(--tk-gray-400); }

/* -----------------------------------------------------------------------------
 * 12. Dropdowns, popovers, tooltips
 * -------------------------------------------------------------------------- */
.dropdown-menu {
  --vz-dropdown-border-width: 1px;
  --vz-dropdown-border-color: var(--vz-border-color);
  --vz-dropdown-border-radius: var(--vz-border-radius-lg);
  --vz-dropdown-box-shadow: var(--tk-shadow-md);
  --vz-dropdown-padding-y: 0.25rem;
  --vz-dropdown-item-padding-y: 0.4375rem;
  --vz-dropdown-item-padding-x: 0.75rem;
  --vz-dropdown-font-size: var(--tk-fs-md);
  --vz-dropdown-link-hover-bg: var(--vz-tertiary-bg);
  --vz-dropdown-link-active-bg: var(--vz-primary-bg-subtle);
  --vz-dropdown-link-active-color: var(--vz-primary-text-emphasis);
  border: 1px solid var(--vz-border-color);
  box-shadow: var(--tk-shadow-md);
  animation: none !important;            /* Velzon anima com translate; deixar instantâneo */
}
.dropdown-menu .dropdown-item { border-radius: var(--vz-border-radius-sm); margin: 0 0.25rem; width: calc(100% - 0.5rem); }
.tooltip { --vz-tooltip-font-size: var(--tk-fs-xs); --vz-tooltip-border-radius: var(--vz-border-radius); --vz-tooltip-bg: var(--tk-gray-900); }

/* -----------------------------------------------------------------------------
 * 13. Modais / offcanvas
 * -------------------------------------------------------------------------- */
.modal {
  --vz-modal-border-width: 1px;
  --vz-modal-border-color: var(--vz-border-color);
  --vz-modal-border-radius: var(--vz-border-radius-xl);
  --vz-modal-box-shadow: 0 20px 48px rgba(16, 24, 40, 0.18);
  --vz-modal-header-padding: 1rem 1.25rem;
  --vz-modal-padding: 1.25rem;
  --vz-modal-header-border-width: 1px;
  --vz-modal-footer-border-width: 1px;
}
.modal-title { font-size: var(--tk-fs-lg); font-weight: 600; }
.modal-footer { gap: 0.5rem; background: transparent; }
.modal-backdrop { --vz-backdrop-bg: #0f1115; --vz-backdrop-opacity: 0.45; }
.offcanvas { --vz-offcanvas-border-color: var(--vz-border-color); }

/* -----------------------------------------------------------------------------
 * 14. Toasts / alerts / SweetAlert2
 * -------------------------------------------------------------------------- */
.toast {
  --vz-toast-border-radius: var(--vz-border-radius-lg);
  --vz-toast-border-color: var(--vz-border-color);
  --vz-toast-box-shadow: var(--tk-shadow-md);
  --vz-toast-font-size: var(--tk-fs-md);
}
.alert { --vz-alert-border-radius: var(--vz-border-radius-lg); font-size: var(--tk-fs-md); }
.alert-primary { --vz-alert-color: var(--vz-primary-text-emphasis); }
.alert-warning { --vz-alert-color: var(--vz-warning-text-emphasis); }
.alert-success { --vz-alert-color: var(--vz-success-text-emphasis); }
.alert-danger  { --vz-alert-color: var(--vz-danger-text-emphasis); }
.alert-info    { --vz-alert-color: var(--vz-info-text-emphasis); }
.swal2-popup { border-radius: var(--vz-border-radius-xl) !important; font-family: var(--vz-font-sans-serif) !important; }
.swal2-title { font-size: 1.125rem !important; font-weight: 600 !important; }
.swal2-styled.swal2-confirm { background: var(--vz-primary) !important; border-radius: var(--vz-border-radius) !important; }

/* -----------------------------------------------------------------------------
 * 15. Abas — sublinhado de 2px (Linear/GitHub), sem "pills" coloridas
 * -------------------------------------------------------------------------- */
.nav-tabs, .nav-tabs-custom {
  --vz-nav-tabs-border-color: var(--vz-border-color);
  --vz-nav-tabs-link-active-bg: transparent;
  --vz-nav-tabs-link-active-border-color: transparent;
  border-bottom: 1px solid var(--vz-border-color);
  gap: 1.25rem;
}
.nav-tabs .nav-link, .nav-tabs-custom .nav-link {
  padding: 0.625rem 0.125rem;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--vz-secondary-color);
  font-weight: 500;
  font-size: var(--tk-fs-md);
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--vz-body-color); }
.nav-tabs .nav-link.active, .nav-tabs-custom .nav-link.active {
  color: var(--vz-body-color);
  border-bottom-color: var(--vz-primary);
  background: transparent;
}
.nav-tabs-custom .nav-link::after { display: none; }   /* barra animada do Velzon */
.nav-pills { --vz-nav-pills-border-radius: var(--vz-border-radius); --vz-nav-pills-link-active-bg: var(--vz-primary-bg-subtle); --vz-nav-pills-link-active-color: var(--vz-primary-text-emphasis); }

/* -----------------------------------------------------------------------------
 * 16. Paginação
 * -------------------------------------------------------------------------- */
.pagination {
  --vz-pagination-border-radius: var(--vz-border-radius);
  --vz-pagination-font-size: var(--tk-fs-sm);
  --vz-pagination-active-bg: var(--vz-primary);
  --vz-pagination-active-border-color: var(--vz-primary);
  --vz-pagination-hover-bg: var(--vz-tertiary-bg);
  --vz-pagination-focus-box-shadow: var(--tk-focus-ring);
  gap: 0.25rem;
}
.pagination .page-link { border-radius: var(--vz-border-radius) !important; min-width: 2rem; text-align: center; }

/* -----------------------------------------------------------------------------
 * 17. Topbar e menu lateral grafite
 *     :root[data-sidebar=dark] tem a mesma especificidade do Velzon e vem
 *     depois dele, então vence (o bloco do custom.css não vencia).
 *     Contraste sobre #0b1d3a: item 11.3:1 · título 6.5:1 · ativo 13.1:1.
 * -------------------------------------------------------------------------- */
#page-topbar { border-bottom: 1px solid var(--vz-header-border, var(--vz-border-color)); box-shadow: none !important; }
#page-topbar .topbar-user { background: transparent; }
:root { --vz-header-item-bg: var(--vz-tertiary-bg); }

:root[data-sidebar=dark] {
  --tk-side-bg: #082b4c;
  --tk-side-line: #123d66;
  --tk-side-text: #cbd5e1;
  --tk-side-icon: #94a3b8;
  --tk-side-title: #94a3b8;
  --tk-side-hover: rgba(255, 255, 255, 0.05);
  --tk-side-active: #0e47a9;
  --tk-side-accent: #f2a900;
  --vz-vertical-menu-bg: var(--tk-side-bg);
  --vz-vertical-menu-border: var(--tk-side-bg);
  --vz-vertical-menu-item-color: var(--tk-side-text);
  --vz-vertical-menu-item-hover-color: #ffffff;
  --vz-vertical-menu-item-active-color: #ffffff;
  --vz-vertical-menu-item-bg: var(--tk-side-hover);
  --vz-vertical-menu-item-active-bg: var(--tk-side-active);
  --vz-vertical-menu-sub-item-color: var(--tk-side-text);
  --vz-vertical-menu-sub-item-hover-color: #ffffff;
  --vz-vertical-menu-sub-item-active-color: #ffffff;
  --vz-vertical-menu-title-color: var(--tk-side-title);
  --vz-vertical-menu-box-shadow: none;
  --vz-vertical-menu-dropdown-box-shadow: var(--tk-shadow-md);
  --vz-twocolumn-menu-iconview-bg: var(--tk-side-bg);
}

[data-sidebar=dark] .navbar-menu { border-right: 1px solid var(--tk-side-line); box-shadow: none; }
[data-sidebar=dark] .navbar-brand-box,
[data-sidebar=dark] .sidebar-quick-action { border-bottom-color: var(--tk-side-line); }
.sidebar-new-ticket-btn { font-size: var(--tk-fs-sm); letter-spacing: 0; border-radius: var(--vz-border-radius); gap: 0.25rem; }
/* .btn-label é um estilo do Velzon (rótulo com 44px de recuo para ícone); aqui é só o texto. */
.sidebar-new-ticket-btn .btn-label { padding-left: 0; }

/* Itens: 36px, fonte do corpo, cantos arredondados nos dois lados e sem
   deslocamento no hover (o custom.css empurrava o rótulo 10px). */
.navbar-menu .navbar-nav .nav-link {
  font-family: var(--vz-font-sans-serif);
  font-size: var(--tk-fs-md);
  font-weight: 500;
}
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link,
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link:hover:not(.active),
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link.active {
  margin: 1px 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--vz-border-radius);
}
.navbar-menu .navbar-nav .nav-link i { color: var(--tk-side-icon, inherit); }
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link:hover:not(.active) {
  background: var(--tk-side-hover);
  color: #ffffff;
}
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-item > .nav-link:hover i { color: #e2e8f0; }
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link.active {
  background: var(--tk-side-active);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--tk-side-accent);
}
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-item > .nav-link.active i { color: var(--tk-side-accent); }
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-link:focus-visible {
  outline: 2px solid var(--tk-side-accent);
  outline-offset: -2px;
}

/* Títulos de seção: legíveis e sem caixa alta. */
.navbar-menu .menu-title > span {
  font-size: var(--tk-fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--vz-vertical-menu-title-color);
  padding: 1rem 1.25rem 0.375rem;
}
.navbar-menu .menu-title:not(:first-child) { margin-top: 0.25rem; border-top: 0; padding-top: 0; }

/* Subitens (Configurações): recuo alinhado ao rótulo do pai, sem a régua
   vertical do custom.css. */
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-sm .nav-link {
  margin: 1px 0.5rem 1px 0;
  padding: 0.4375rem 0.75rem 0.4375rem 2.75rem !important;
  border-right: 0;
  border-radius: var(--vz-border-radius);
  font-size: var(--tk-fs-sm);
}
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-sm .nav-link:hover { background: var(--tk-side-hover); color: #ffffff; }
[data-sidebar=dark] .navbar-menu .navbar-nav .nav-sm .nav-link.active { color: #ffffff; font-weight: 600; }
[data-sidebar=dark] .nav-tickets .nav-sub-title {
  color: var(--tk-side-title);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--tk-fs-xs);
  padding-left: 2.75rem;
}

/* Badges do menu: volume neutro; alerta em vermelho suave, sem pulsar. */
[data-sidebar=dark] .nav-tickets .nav-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  font-size: var(--tk-fs-xs);
  font-weight: 600;
  animation: none;
  box-shadow: none;
}
[data-sidebar=dark] .nav-tickets .nav-badge-alerta { background: rgba(248, 113, 113, 0.18); color: #fecaca; }
.navbar-menu .nav-link .badge { animation: none; }

/* Menu recolhido: ícone centralizado e quadrado, sem margens laterais. */
[data-sidebar-size=sm] .navbar-menu .navbar-nav .nav-item > .nav-link.menu-link,
[data-sidebar-size=sm-hover] .navbar-menu:not(:hover) .navbar-nav .nav-item > .nav-link.menu-link {
  margin: 2px auto !important;
  padding: 0.5rem !important;
  justify-content: center;
}

/* -----------------------------------------------------------------------------
 * 18. Estados vazios e skeleton
 * -------------------------------------------------------------------------- */
.tk-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.5rem; padding: 3rem 1.5rem; color: var(--vz-secondary-color);
}
.tk-empty__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--vz-border-radius-lg);
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--vz-tertiary-bg); color: var(--vz-secondary-color);
}
.tk-empty__title { font-size: var(--tk-fs-lg); font-weight: 600; color: var(--vz-body-color); margin: 0.25rem 0 0; }
.tk-empty__text { max-width: 36ch; font-size: var(--tk-fs-md); margin: 0 0 0.5rem; }

.tk-skeleton {
  display: block; border-radius: var(--vz-border-radius-sm);
  background: linear-gradient(90deg, var(--vz-tertiary-bg) 25%, var(--vz-border-color) 37%, var(--vz-tertiary-bg) 63%);
  background-size: 400% 100%;
  animation: tk-shimmer 1.4s ease infinite;
  min-height: 0.75rem;
}
@keyframes tk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .tk-skeleton { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -----------------------------------------------------------------------------
 * 19. Miscelânea
 * -------------------------------------------------------------------------- */
.avatar-title { font-weight: 600; }
.footer { border-top: 1px solid var(--vz-border-color); color: var(--vz-secondary-color); font-size: var(--tk-fs-sm); }
::selection { background: rgba(var(--tk-primary-rgb), 0.18); }
hr { border-color: var(--vz-border-color); opacity: 1; }

/* -----------------------------------------------------------------------------
 * 20. Componentes padrão (templatetags/ui.py e partials/vazio.html)
 * -------------------------------------------------------------------------- */
.tk-prioridade { display: inline-flex; align-items: center; font-size: var(--tk-fs-sm); color: var(--vz-body-color); white-space: nowrap; }
.tk-prioridade .tk-dot { margin-right: 0.375rem; }
.page-title-box .breadcrumb-item { color: var(--vz-secondary-color); }
.min-w-0 { min-width: 0; }
.card .tk-empty { padding: 2.5rem 1.5rem; }
/* .visually-hidden é position:absolute; sem ancestral posicionado ele "foge"
   do scroller da tabela e alarga a página inteira no celular. */
.table-responsive { position: relative; }