/* ==========================================================================
   ClearSeg · Admin re-skin (sobre NiceAdmin + Bootstrap 5.3.3)
   --------------------------------------------------------------------------
   Camada de PELE. Não muda HTML, JS nem comportamento — só aparência.

   ORDEM DE CARGA (obrigatória):
     1) shared/css/clearseg-fonts.css      (@font-face Manrope)
     2) shared/css/clearseg-tokens.css     (custom properties — fonte da verdade)
     3) vendor/bootstrap/css/bootstrap.min.css + demais vendors
     4) shared/temp/nice-admin/assets/css/style.css
     5) ESTE ARQUIVO                        <-- por último

   ESTRATÉGIA (importante para quem for manter):
     Os utilitários do Bootstrap 5.3 (.text-success, .bg-danger, .border-success…)
     são declarados com !important e derivam de variáveis --bs-*. Brigar com eles
     por especificidade seria uma guerra de !important. Em vez disso, a §1 REMAPEIA
     as variáveis do próprio Bootstrap para os tokens ClearSeg: utilitários,
     alerts, botões, badges e forms passam a seguir a marca sozinhos.
     Só usamos !important onde é inevitável (ver §12 e §22, ambos comentados).

   ESTÉTICA: premium Apple × Pipefy, igual à landing/portal — hairlines
   (var(--line)) no lugar de sombras pesadas, cantos suaves, canvas off-white,
   foco visível com var(--focus-shadow). ZERO verde na marca (verde só em
   status semântico).
   ========================================================================== */

/* ==========================================================================
   1. DERIVADOS LOCAIS
   --------------------------------------------------------------------------
   Aliases só do admin, todos derivados dos tokens. Existem porque rgba() não
   consome var() de hex: são o índigo e o branco dos tokens com alfa. Mesma
   prática do próprio clearseg-tokens.css (ver --focus-ring).
   Ajuste de contraste da sidebar? É aqui, num lugar só.
   ========================================================================== */
:root {
  /* Tints de marca (índigo-600 / índigo-500 sobre fundo claro) */
  --admin-brand-tint:        rgba(79, 70, 229, 0.08);   /* --indigo-600 @ 8%  */
  --admin-brand-tint-strong: rgba(79, 70, 229, 0.14);   /* --indigo-600 @ 14% */
  --admin-info-tint:         rgba(99, 102, 241, 0.08);  /* --indigo-500 @ 8%  */

  /* Escala de leitura sobre a sidebar índigo-900 (--brand-strong) */
  --admin-on-dark:           rgba(255, 255, 255, 0.78); /* texto do item      */
  --admin-on-dark-strong:    var(--white);              /* item ativo/hover   */
  --admin-on-dark-dim:       rgba(255, 255, 255, 0.55); /* ícone do item      */
  --admin-on-dark-sub:       rgba(255, 255, 255, 0.62); /* texto do submenu   */
  --admin-on-dark-sub-dim:   rgba(255, 255, 255, 0.45); /* ícone do submenu   */
  --admin-on-dark-heading:   rgba(255, 255, 255, 0.42); /* rótulo de seção    */
  --admin-on-dark-hover-bg:  rgba(255, 255, 255, 0.08);
  --admin-on-dark-active-bg: rgba(255, 255, 255, 0.14);
  --admin-on-dark-line:      rgba(255, 255, 255, 0.10);
  --admin-on-dark-scroll:    rgba(255, 255, 255, 0.18);
  --admin-on-dark-scroll-track: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   2. PONTE Bootstrap ↔ tokens ClearSeg
   --------------------------------------------------------------------------
   Único ponto do arquivo com cor literal: o Bootstrap exige triplas "r, g, b"
   cruas em --bs-*-rgb (rgba() não aceita var() de hex), então espelhamos aqui
   os tokens. Trocou um token? Atualize a linha espelhada aqui.

   Regra de legibilidade: as triplas *-rgb usam os tons de TEXTO dos status
   (--status-*-text), não os sólidos — porque .text-success/.text-danger caem
   sobre fundo claro e precisam passar em AA. Os sólidos (--status-*) ficam
   para preenchimentos (botões, barras, ícones).
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  /* --- Paleta semântica ------------------------------------------------- */
  --bs-primary:     var(--brand);
  --bs-primary-rgb: 55, 48, 163;           /* = --indigo-700  9.9:1 AAA       */
  --bs-secondary-rgb: 107, 114, 128;       /* = --text-muted  4.8:1 AA        */
  --bs-success-rgb: 15, 110, 69;           /* = --status-paid-text            */
  --bs-info-rgb:    79, 70, 229;           /* = --indigo-600  6.3:1 AA        */
  --bs-warning-rgb: 138, 90, 18;           /* = --status-pending-text         */
  --bs-danger-rgb:  142, 27, 20;           /* = --status-overdue-text         */
  --bs-light-rgb:   244, 245, 247;         /* = --surface                     */
  --bs-dark-rgb:    11, 16, 32;            /* = --ink                         */

  /* --- Tints e ênfases (alimentam alerts, .bg-*-subtle, .text-*-emphasis) - */
  --bs-primary-bg-subtle:     var(--admin-brand-tint);
  --bs-primary-text-emphasis: var(--brand);
  --bs-primary-border-subtle: var(--line);

  --bs-secondary-bg-subtle:   var(--surface);
  --bs-secondary-text-emphasis: var(--text);
  --bs-secondary-border-subtle: var(--line);

  --bs-success-bg-subtle:     var(--status-paid-bg);
  --bs-success-text-emphasis: var(--status-paid-text);
  --bs-success-border-subtle: var(--line);

  --bs-info-bg-subtle:     var(--admin-info-tint);
  --bs-info-text-emphasis: var(--brand);
  --bs-info-border-subtle: var(--line);

  --bs-warning-bg-subtle:     var(--status-pending-bg);
  --bs-warning-text-emphasis: var(--status-pending-text);
  --bs-warning-border-subtle: var(--line);

  --bs-danger-bg-subtle:     var(--status-overdue-bg);
  --bs-danger-text-emphasis: var(--status-overdue-text);
  --bs-danger-border-subtle: var(--line);

  --bs-light-bg-subtle:     var(--canvas);
  --bs-light-border-subtle: var(--line);
  --bs-dark-bg-subtle:      var(--surface);
  --bs-dark-border-subtle:  var(--line);

  /* --- Corpo, superfícies e linhas --------------------------------------- */
  /* --bs-body-bg fica BRANCO de propósito: cards/modais/dropdowns herdam dele.
     O off-white do canvas é aplicado direto no body (§3). */
  --bs-body-bg:        var(--white);
  --bs-body-color:     var(--text);
  --bs-body-color-rgb: 29, 36, 51;         /* = --text                        */
  --bs-emphasis-color: var(--ink);

  --bs-secondary-color: var(--text-muted); /* alimenta .text-muted e placeholders */
  --bs-secondary-bg:    var(--surface);
  --bs-tertiary-color:  var(--text-muted);
  --bs-tertiary-bg:     var(--canvas);

  --bs-border-color:             var(--line);
  --bs-border-color-translucent: var(--line);

  /* --- Links -------------------------------------------------------------- */
  --bs-link-color:           var(--brand-cta);
  --bs-link-color-rgb:       79, 70, 229;  /* = --indigo-600                  */
  --bs-link-hover-color:     var(--brand-cta-hover);
  --bs-link-hover-color-rgb: 99, 102, 241; /* = --indigo-500                  */
  --bs-link-decoration:      none;

  /* --- Raios (tokens: 8 / 12 / 16 / pill) --------------------------------- */
  --bs-border-radius:      var(--r-sm);
  --bs-border-radius-sm:   var(--r-sm);
  --bs-border-radius-lg:   var(--r);
  --bs-border-radius-xl:   var(--r-lg);
  --bs-border-radius-xxl:  var(--r-lg);
  --bs-border-radius-pill: var(--r-pill);

  /* --- Foco --------------------------------------------------------------- */
  --bs-focus-ring-width: 3px;
  --bs-focus-ring-color: var(--focus-ring);

  /* --- Validação de formulário -------------------------------------------- */
  --bs-form-valid-color:          var(--status-paid-text);
  --bs-form-valid-border-color:   var(--status-paid);
  --bs-form-invalid-color:        var(--status-overdue-text);
  --bs-form-invalid-border-color: var(--status-overdue);

  /* --- Tipografia --------------------------------------------------------- */
  --bs-font-sans-serif:  var(--font-sans);
  --bs-body-font-family: var(--font-sans);
}

/* ==========================================================================
   3. BASE & TIPOGRAFIA
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Só família/peso — NUNCA color aqui. Títulos dentro de contextos coloridos
   (ex.: .modal-header.bg-danger.text-white > h4) precisam herdar a cor do pai;
   uma cor fixa em h1-h6 deixaria esses títulos ilegíveis. Cores de título são
   aplicadas por componente (.pagetitle h1, .card-title, .modal-title…). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

a {
  color: var(--brand-cta);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--brand-cta-hover);
  text-decoration: none;
}

hr {
  border-color: var(--line);
  opacity: 1;
}

::selection {
  background: var(--admin-brand-tint-strong);
  color: var(--ink);
}

/* Foco visível padrão da casa, em qualquer interativo. */
:where(a, button, .btn, .page-link, .nav-link, .dropdown-item,
       .form-control, .form-select, .form-check-input):focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
}

/* Valores monetários/datas com dígitos de largura fixa. */
.tabular-nums,
.table,
.info-card h6 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.header {
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* Respiro à direita do cluster (ícones + perfil): Manrope é mais larga que a
   fonte antiga e o nome do usuário encostava/cortava na borda da viewport. */
.header .header-nav {
  padding-right: 1.25rem;
}

.header .toggle-sidebar-btn {
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}

.header .toggle-sidebar-btn:hover {
  color: var(--brand);
}

.logo span {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* --- Busca do header (campo preenchido, vira branco no foco) --------------- */
.header .search-form input {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 8px 38px 8px 12px;
  transition: var(--transition);
}

.header .search-form input::placeholder {
  color: var(--text-muted);
}

.header .search-form input:hover {
  border-color: var(--line);
  box-shadow: none;
}

.header .search-form input:focus {
  background: var(--white);
  border-color: var(--brand-cta);
  box-shadow: var(--focus-shadow);
}

.header .search-form button i {
  color: var(--text-muted);
}

/* --- Ícones e perfil ------------------------------------------------------ */
.header-nav .nav-icon {
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.header-nav .nav-icon:hover {
  color: var(--brand);
}

.header-nav .nav-profile {
  color: var(--text);
}

.header-nav .nav-profile span {
  font-weight: var(--fw-semibold);
}

.header-nav .nav-profile img {
  border: 1px solid var(--line);
}

.header-nav .badge-number {
  font-weight: var(--fw-bold);
  font-size: var(--text-caption);
}

.header-nav .profile .dropdown-header h6 {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.header-nav .profile .dropdown-header span {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.header-nav .notifications .notification-item:hover,
.header-nav .messages .message-item:hover,
.header-nav .profile .dropdown-item:hover {
  background-color: var(--surface);
}

.header-nav .notifications .notification-item h4,
.header-nav .messages .message-item h4 {
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: var(--fw-bold);
}

.header-nav .notifications .notification-item p,
.header-nav .messages .message-item p {
  color: var(--text-muted);
}

/* ==========================================================================
   5. SIDEBAR — assinatura da marca (índigo-900 profundo)
   --------------------------------------------------------------------------
   Atenção ao NiceAdmin: aqui ATIVO é .nav-link:not(.collapsed) e INATIVO é
   .nav-link.collapsed (a view aplica/remove a classe via isActive()). Por isso
   .collapsed precisa ser explicitamente neutralizado — o template pinta ele de
   branco (#fff), o que sobre o índigo viraria um bloco branco.
   ========================================================================== */
.sidebar {
  background-color: var(--brand-strong);
  border-right: none;
  box-shadow: none;
  scrollbar-color: var(--admin-on-dark-scroll-track) transparent;
}

.sidebar::-webkit-scrollbar {
  background-color: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--admin-on-dark-scroll);
  border-radius: var(--r-pill);
}

.sidebar-nav .nav-heading {
  color: var(--admin-on-dark-heading);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--admin-on-dark-line);
}

.sidebar-nav .nav-item {
  margin-bottom: 2px;
}

/* Estado base + estado inativo (.collapsed) no mesmo lugar. */
.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
  color: var(--admin-on-dark);
  background: transparent;
  border-radius: var(--r-sm);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  padding: 10px 12px;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.sidebar-nav .nav-link i,
.sidebar-nav .nav-link.collapsed i {
  color: var(--admin-on-dark-dim);
  font-size: 16px;
  transition: color var(--dur-fast) var(--ease);
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.collapsed:hover {
  color: var(--admin-on-dark-strong);
  background: var(--admin-on-dark-hover-bg);
}

.sidebar-nav .nav-link:hover i,
.sidebar-nav .nav-link.collapsed:hover i {
  color: var(--admin-on-dark-strong);
}

/* Ativo / grupo aberto */
.sidebar-nav .nav-link:not(.collapsed) {
  color: var(--admin-on-dark-strong);
  background: var(--admin-on-dark-active-bg);
}

.sidebar-nav .nav-link:not(.collapsed) i {
  color: var(--admin-on-dark-strong);
}

.sidebar-nav .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--indigo-500);
}

/* Submenu (Fila de envio, Templates, Logs…) */
.sidebar-nav .nav-content {
  padding: 2px 0 var(--space-2) 0;
}

.sidebar-nav .nav-content a {
  color: var(--admin-on-dark-sub);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  border-radius: var(--r-sm);
  padding: 8px 12px 8px 38px;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

.sidebar-nav .nav-content a i {
  color: var(--admin-on-dark-sub-dim);
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: var(--admin-on-dark-strong);
  background: var(--admin-on-dark-hover-bg);
}

.sidebar-nav .nav-content a:hover i,
.sidebar-nav .nav-content a.active i {
  color: var(--admin-on-dark-strong);
}

/* O "bolinha" do item ativo do submenu (NiceAdmin pinta o background do i). */
.sidebar-nav .nav-content a.active i {
  background-color: var(--admin-on-dark-strong);
}

/* ==========================================================================
   6. PAGE TITLE & BREADCRUMB
   ========================================================================== */
.pagetitle {
  margin-bottom: var(--space-4);
}

.pagetitle h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  margin-bottom: 0;
}

.breadcrumb a,
.breadcrumb .breadcrumb-item a {
  color: var(--text-muted);
}

.breadcrumb a:hover,
.breadcrumb .breadcrumb-item a:hover {
  color: var(--brand-cta);
}

.breadcrumb .breadcrumb-item::before {
  color: var(--line);
}

.breadcrumb .breadcrumb-item.active {
  color: var(--brand);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   7. CARDS — hairline no lugar da sombra pesada do template
   ========================================================================== */
.card {
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}

.card-header,
.card-footer {
  background-color: var(--white);
  border-color: var(--line);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

.card-header:first-child {
  border-radius: var(--r) var(--r) 0 0;
}

.card-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.card-title span {
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-normal);
}

/* ==========================================================================
   8. DASHBOARD (KPIs, ícones, filtro)
   ========================================================================== */
.dashboard .info-card h6 {
  color: var(--ink);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
}

.dashboard .card-icon {
  border-radius: var(--r);
}

.dashboard .sales-card .card-icon {
  color: var(--brand);
  background: var(--admin-brand-tint);
}

.dashboard .revenue-card .card-icon {
  color: var(--status-paid-text);
  background: var(--status-paid-bg);
}

.dashboard .customers-card .card-icon {
  color: var(--status-pending-text);
  background: var(--status-pending-bg);
}

.dashboard .filter .icon {
  color: var(--text-muted);
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: var(--brand);
}

.dashboard .filter .dropdown-header h6 {
  color: var(--text-muted);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semibold);
}

.dashboard .recent-sales .table thead,
.dashboard .top-selling .table thead {
  background: var(--surface);
}

.dashboard .activity .activity-item .activite-label {
  color: var(--text-muted);
}

.dashboard .activity .activity-item .activite-label::before {
  background-color: var(--line);
}

/* ==========================================================================
   9. BOTÕES
   --------------------------------------------------------------------------
   Cada variante do BS declara seus próprios --bs-btn-* (custom properties, sem
   !important) — então basta redeclará-los aqui.
   Contraste conferido sobre branco: primário 6.3:1 · success 6.3:1 ·
   danger 6.6:1 · warning usa texto --ink (5.2:1).
   ========================================================================== */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
  transition: var(--transition);
}

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

.btn-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--brand-cta);
  --bs-btn-border-color: var(--brand-cta);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--brand-cta-hover);
  --bs-btn-hover-border-color: var(--brand-cta-hover);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--brand-cta);
  --bs-btn-disabled-border-color: var(--brand-cta);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

/* Secundário = ação neutra (Voltar/Cancelar): branco com hairline, não cinza
   pesado. Mesmo espírito do .btn-outline do portal. */
.btn-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--white);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-border-color: var(--text-muted);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface);
  --bs-btn-active-border-color: var(--text-muted);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-bg: var(--white);
  --bs-btn-disabled-border-color: var(--line);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-success {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--status-paid-text);
  --bs-btn-border-color: var(--status-paid-text);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--status-paid);
  --bs-btn-hover-border-color: var(--status-paid);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--status-paid-text);
  --bs-btn-active-border-color: var(--status-paid-text);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--status-paid);
  --bs-btn-disabled-border-color: var(--status-paid);
  --bs-btn-focus-shadow-rgb: 26, 143, 92;
}

.btn-danger {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--status-overdue);
  --bs-btn-border-color: var(--status-overdue);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--status-overdue-text);
  --bs-btn-hover-border-color: var(--status-overdue-text);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--status-overdue-text);
  --bs-btn-active-border-color: var(--status-overdue-text);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--status-overdue);
  --bs-btn-disabled-border-color: var(--status-overdue);
  --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

/* Âmbar claro pede texto escuro (mesma lógica do btn-warning nativo do BS). */
/* Soft amber (fundo claro + texto âmbar escuro): "requer atenção" sem o
   sólido mostarda muddy. Hover preenche sólido. */
.btn-warning {
  --bs-btn-color: var(--status-pending-text);
  --bs-btn-bg: var(--status-pending-bg);
  --bs-btn-border-color: var(--status-pending);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--status-pending-text);
  --bs-btn-hover-border-color: var(--status-pending-text);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--status-pending-text);
  --bs-btn-active-border-color: var(--status-pending-text);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--status-pending-text);
  --bs-btn-disabled-bg: var(--status-pending-bg);
  --bs-btn-disabled-border-color: var(--status-pending);
  --bs-btn-focus-shadow-rgb: 183, 121, 31;
}

.btn-info {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--brand-cta);
  --bs-btn-hover-border-color: var(--brand-cta);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--brand-strong);
  --bs-btn-active-border-color: var(--brand-strong);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--white);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: 55, 48, 163;
}

.btn-dark {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-hover-bg: var(--brand-strong);
  --bs-btn-hover-border-color: var(--brand-strong);
  --bs-btn-active-bg: var(--brand-strong);
  --bs-btn-active-border-color: var(--brand-strong);
  --bs-btn-active-shadow: none;
}

.btn-light {
  --bs-btn-color: var(--text);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--canvas);
  --bs-btn-hover-border-color: var(--text-muted);
  --bs-btn-active-shadow: none;
}

.btn-link {
  --bs-btn-color: var(--brand-cta);
  --bs-btn-hover-color: var(--brand-cta-hover);
  --bs-btn-active-color: var(--brand);
  text-decoration: none;
}

/* --- Outline: hairline neutro, cor só no texto/hover ---------------------- */
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--brand-cta);
  --bs-btn-hover-border-color: var(--brand-cta);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--line);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-secondary {
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface);
  --bs-btn-hover-border-color: var(--text-muted);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface);
  --bs-btn-active-border-color: var(--text-muted);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--line);
  --bs-btn-focus-shadow-rgb: 79, 70, 229;
}

.btn-outline-success {
  --bs-btn-color: var(--status-paid-text);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--status-paid-text);
  --bs-btn-hover-border-color: var(--status-paid-text);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--status-paid-text);
  --bs-btn-active-border-color: var(--status-paid-text);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 26, 143, 92;
}

.btn-outline-danger {
  --bs-btn-color: var(--status-overdue-text);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--status-overdue);
  --bs-btn-hover-border-color: var(--status-overdue);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--status-overdue-text);
  --bs-btn-active-border-color: var(--status-overdue-text);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 180, 35, 24;
}

.btn-outline-warning {
  --bs-btn-color: var(--status-pending-text);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--status-pending);
  --bs-btn-hover-border-color: var(--status-pending);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--status-pending);
  --bs-btn-active-border-color: var(--status-pending);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 183, 121, 31;
}

.btn-outline-info {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--brand-strong);
  --bs-btn-active-border-color: var(--brand-strong);
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 55, 48, 163;
}

.btn-outline-dark {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line);
  --bs-btn-bg: var(--white);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-shadow: none;
}

/* Botão "voltar ao topo" do template. */
.back-to-top {
  background: var(--brand-cta);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
}

.back-to-top:hover {
  background: var(--brand-cta-hover);
}

/* ==========================================================================
   10. FORMULÁRIOS
   --------------------------------------------------------------------------
   Só classes .form-* — nunca as tags input/select/textarea cruas, para não
   vazar em editores de terceiros (quill/tinymce).
   ========================================================================== */
.form-control,
.form-select {
  font-family: var(--font-sans);
  color: var(--text);
  background-color: var(--white);
  border-color: var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--text-muted);
}

.form-control:focus,
.form-select:focus {
  color: var(--text);
  background-color: var(--white);
  border-color: var(--brand-cta);
  box-shadow: var(--focus-shadow);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--surface);
  color: var(--text-muted);
  border-color: var(--line);
}

.form-label {
  color: var(--text);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}

.form-text,
.form-control-plaintext {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

/* Prefixos/sufixos (ex.: "R$" e o botão de busca por nome na Análise). */
.input-group-text {
  background-color: var(--surface);
  border-color: var(--line);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
}

/* Checkboxes / radios */
.form-check-input {
  border-color: var(--line);
}

.form-check-input:checked {
  background-color: var(--brand-cta);
  border-color: var(--brand-cta);
}

.form-check-input:focus {
  border-color: var(--brand-cta);
  box-shadow: var(--focus-shadow);
}

.form-switch .form-check-input:focus {
  border-color: var(--brand-cta);
}

/* Feedback de validação: cores vêm das --bs-form-* remapeadas na §1. */
.invalid-feedback,
.valid-feedback {
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
}

/* ==========================================================================
   11. TABELAS (+ simple-datatables)
   --------------------------------------------------------------------------
   As bordas saem de --bs-table-border-color, e NÃO de um border-bottom fixo:
   assim .table-borderless continua sem bordas (o app usa bastante).
   ========================================================================== */
.table {
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--canvas);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--canvas);
  --bs-table-hover-color: var(--ink);
  --bs-table-active-bg: var(--surface);
  font-size: var(--text-small);
}

.table thead th {
  color: var(--text-muted);
  background-color: var(--surface);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.table tbody td {
  vertical-align: middle;
}

.table tbody td strong {
  color: var(--ink);
  font-weight: var(--fw-bold);
}

.table-bordered {
  --bs-table-border-color: var(--line);
}

/* --- simple-datatables (vendor) ------------------------------------------- */
.datatable-wrapper .datatable-top,
.datatable-wrapper .datatable-bottom {
  color: var(--text-muted);
  font-size: var(--text-small);
  padding: var(--space-3) 0;
}

.datatable-wrapper .datatable-input,
.datatable-wrapper .datatable-selector {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--text);
  background-color: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 10px;
}

.datatable-wrapper .datatable-input:focus,
.datatable-wrapper .datatable-selector:focus {
  outline: none;
  border-color: var(--brand-cta);
  box-shadow: var(--focus-shadow);
}

.datatable-wrapper .datatable-info {
  color: var(--text-muted);
}

.datatable-wrapper .datatable-sorter::before {
  border-top-color: var(--text-muted);
}

.datatable-wrapper .datatable-sorter::after {
  border-bottom-color: var(--text-muted);
}

.datatable-wrapper .datatable-pagination a {
  color: var(--text);
  border-radius: var(--r-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--text-small);
}

.datatable-wrapper .datatable-pagination a:hover {
  background-color: var(--surface);
  color: var(--ink);
}

.datatable-wrapper .datatable-pagination .datatable-active a,
.datatable-wrapper .datatable-pagination .datatable-active a:focus,
.datatable-wrapper .datatable-pagination .datatable-active a:hover {
  background-color: var(--brand-cta);
  color: var(--white);
}

/* ==========================================================================
   12. BADGES / CHIPS DE STATUS
   --------------------------------------------------------------------------
   Chips do portal: tint de fundo + texto escuro (≥AA), formato pílula.
   !important é INEVITÁVEL aqui: .bg-* são utilitários do Bootstrap declarados
   com !important. A especificidade (.badge.bg-x) já vence; o !important é só
   para empatar a "camada". É o único lugar do arquivo que faz isso por cor.
   ========================================================================== */
.badge {
  --bs-badge-border-radius: var(--r-pill);
  --bs-badge-font-weight: var(--fw-bold);
  --bs-badge-padding-x: 0.7em;
  --bs-badge-padding-y: 0.38em;
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-normal);
}

.badge.bg-success {
  background-color: var(--status-paid-bg) !important;
  color: var(--status-paid-text);
}

.badge.bg-warning {
  background-color: var(--status-pending-bg) !important;
  color: var(--status-pending-text);
}

.badge.bg-danger {
  background-color: var(--status-overdue-bg) !important;
  color: var(--status-overdue-text);
}

.badge.bg-primary,
.badge.bg-info {
  background-color: var(--admin-brand-tint) !important;
  color: var(--brand);
}

.badge.bg-secondary,
.badge.bg-light {
  background-color: var(--surface) !important;
  color: var(--text);
}

.badge.bg-dark {
  background-color: var(--ink) !important;
  color: var(--white);
}

/* Chips já "subtle" no HTML (ex.: % dos KPIs): o fundo vem de --bs-*-bg-subtle
   (§1) e o texto de .text-*; aqui só garantimos o formato pílula. */
.badge[class*="-subtle"] {
  border-radius: var(--r-pill);
}

/* ==========================================================================
   13. ALERTS
   --------------------------------------------------------------------------
   Fundo/texto/borda saem das --bs-*-bg-subtle / -text-emphasis / -border-subtle
   remapeadas na §1 (hairline neutra). A semântica vem da barra lateral colorida.
   ========================================================================== */
.alert {
  border-radius: var(--r);
  font-size: var(--text-small);
}

.alert-heading {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.alert-success {
  border-left: 3px solid var(--status-paid);
}

.alert-warning {
  border-left: 3px solid var(--status-pending);
}

.alert-danger {
  border-left: 3px solid var(--status-overdue);
}

.alert-info,
.alert-primary {
  border-left: 3px solid var(--brand-cta);
}

.alert-secondary,
.alert-light {
  border-left: 3px solid var(--text-muted);
}

/* NiceAdmin zera o foco do X; devolvemos com :focus-visible (acessibilidade). */
.btn-close:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
}

/* ==========================================================================
   14. MODAIS
   ========================================================================== */
.modal {
  --bs-modal-border-color: var(--line);
  --bs-modal-border-radius: var(--r);
  --bs-modal-header-border-color: var(--line);
  --bs-modal-footer-border-color: var(--line);
}

.modal-content {
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
}

/* Só em cabeçalhos SEM utilitário de fundo: o modal de backlog de e-mails usa
   .modal-header.bg-danger.text-white e o título precisa continuar branco. */
.modal-header:not([class*="bg-"]) .modal-title {
  color: var(--ink);
}

.modal-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.modal-backdrop.show {
  opacity: 0.4;
}

/* ==========================================================================
   15. DROPDOWNS
   ========================================================================== */
.dropdown-menu {
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--surface);
  --bs-dropdown-link-active-color: var(--white);
  --bs-dropdown-link-active-bg: var(--brand-cta);
  --bs-dropdown-header-color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--space-2) 0;
}

.dropdown-menu .dropdown-item {
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
}

.dropdown-menu .dropdown-item:hover {
  background-color: var(--surface);
  color: var(--ink);
}

.dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--line);
  color: var(--line);
}

.dropdown-menu .dropdown-footer a {
  color: var(--brand-cta);
  text-decoration: none;
}

.dropdown-menu .dropdown-footer a:hover {
  color: var(--brand-cta-hover);
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    background: var(--white);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
}

/* ==========================================================================
   16. PAGINAÇÃO
   ========================================================================== */
.pagination {
  --bs-pagination-color: var(--text);
  --bs-pagination-bg: var(--white);
  --bs-pagination-border-color: var(--line);
  --bs-pagination-border-radius: var(--r-sm);
  --bs-pagination-hover-color: var(--ink);
  --bs-pagination-hover-bg: var(--surface);
  --bs-pagination-hover-border-color: var(--line);
  --bs-pagination-focus-color: var(--brand);
  --bs-pagination-focus-bg: var(--surface);
  --bs-pagination-focus-box-shadow: var(--focus-shadow);
  --bs-pagination-active-color: var(--white);
  --bs-pagination-active-bg: var(--brand-cta);
  --bs-pagination-active-border-color: var(--brand-cta);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-border-color: var(--line);
  gap: 4px;
}

.pagination .page-link {
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   17. TABS / NAV
   --------------------------------------------------------------------------
   Escopo em .nav-tabs/.nav-pills de propósito: mexer em .nav-link solto
   atingiria a sidebar e o header.
   ========================================================================== */
.nav-tabs {
  --bs-nav-tabs-border-color: var(--line);
  --bs-nav-tabs-border-radius: var(--r-sm);
  --bs-nav-tabs-link-hover-border-color: var(--line);
  --bs-nav-tabs-link-active-color: var(--brand);
  --bs-nav-tabs-link-active-bg: var(--white);
  --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--white);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--text-small);
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: var(--ink);
}

.nav-pills {
  --bs-nav-pills-border-radius: var(--r-pill);
  --bs-nav-pills-link-active-color: var(--white);
  --bs-nav-pills-link-active-bg: var(--brand-cta);
}

/* Abas "bordered" do NiceAdmin (usadas nas telas de detalhe). */
.nav-tabs-bordered {
  border-bottom: 1px solid var(--line);
}

.nav-tabs-bordered .nav-link {
  color: var(--text-muted);
  margin-bottom: -1px;
  border: none;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: var(--ink);
}

.nav-tabs-bordered .nav-link.active {
  background-color: transparent;
  color: var(--brand);
  border-bottom: 2px solid var(--brand-cta);
}

/* ==========================================================================
   18. LIST GROUP (resultados da busca por nome — EVL-30)
   ========================================================================== */
.list-group {
  --bs-list-group-color: var(--text);
  --bs-list-group-bg: var(--white);
  --bs-list-group-border-color: var(--line);
  --bs-list-group-border-radius: var(--r-sm);
  --bs-list-group-action-hover-color: var(--ink);
  --bs-list-group-action-hover-bg: var(--surface);
  --bs-list-group-active-color: var(--white);
  --bs-list-group-active-bg: var(--brand-cta);
  --bs-list-group-active-border-color: var(--brand-cta);
}

.list-group-item {
  font-size: var(--text-small);
}

/* ==========================================================================
   19. ACCORDION
   ========================================================================== */
.accordion {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--r);
  --bs-accordion-btn-focus-box-shadow: var(--focus-shadow);
  --bs-accordion-active-color: var(--brand);
  --bs-accordion-active-bg: var(--surface);
}

.accordion-item {
  border: 1px solid var(--line);
}

.accordion-button:not(.collapsed) {
  color: var(--brand);
  background-color: var(--surface);
  box-shadow: none;
}

.accordion-flush .accordion-button:not(.collapsed) {
  color: var(--brand-cta);
}

.accordion-flush .accordion-body {
  color: var(--text);
  font-size: var(--text-small);
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
.footer {
  background: transparent;
  border-top: 1px solid var(--line);
  font-size: var(--text-small);
}

.footer .copyright,
.footer .credits {
  color: var(--text-muted);
}

.footer .copyright a,
.footer .credits a {
  color: var(--brand-cta);
}

/* ==========================================================================
   21. PLUGINS DE TERCEIROS (toque mínimo — não redesenhar)
   ========================================================================== */

/* --- Quill (carregado no Head; sem uso nas views hoje) -------------------- */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: var(--line);
}

.ql-toolbar.ql-snow {
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.ql-container.ql-snow {
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--font-sans);
}

/* --- SweetAlert -----------------------------------------------------------
   O plugin injeta o CSS dele em runtime (<style> no <head>), então usamos
   especificidade maior (.swal-modal .swal-button) em vez de contar com a ordem
   de carga. Só cor/raio/fonte — estrutura e animações intactas.
   ------------------------------------------------------------------------- */
.swal-modal {
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}

.swal-title {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

.swal-text {
  color: var(--text);
  font-family: var(--font-sans);
}

.swal-modal .swal-button {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  border-radius: var(--r-sm);
}

.swal-modal .swal-button--confirm {
  background-color: var(--brand-cta);
  color: var(--white);
}

.swal-modal .swal-button--confirm:not([disabled]):hover {
  background-color: var(--brand-cta-hover);
}

.swal-modal .swal-button--confirm:focus {
  box-shadow: var(--focus-shadow);
}

.swal-modal .swal-button--cancel {
  background-color: var(--surface);
  color: var(--text);
}

.swal-modal .swal-button--cancel:not([disabled]):hover {
  background-color: var(--line);
}

/* Modal mais largo p/ conteudo em grade (ex.: resumo da fila de e-mails no
   Painel). Combina .swal-modal.swal-wide (2 classes) — mais especifico que a
   regra .swal-modal isolada acima, o que decide sem depender de ordem de
   carga (mesmo raciocinio do comentario no topo desta secao). */
.swal-modal.swal-wide {
  width: 600px;
}

/* --- ApexCharts (tooltip; as cores das séries vêm do JS — ver §22) --------- */
.apexcharts-tooltip {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow) !important;
  font-family: var(--font-sans) !important;
}

.apexcharts-text,
.apexcharts-xaxis text,
.apexcharts-yaxis text {
  font-family: var(--font-sans) !important;
  fill: var(--text-muted);
}

/* ==========================================================================
   22. COMPAT — cores inline do Dashboard Home (PONTE TEMPORÁRIA)
   --------------------------------------------------------------------------
   DivDashboardOnda1.php escreve cores do Bootstrap direto no atributo style
   dos 3 cards de KPI (#198754 pago, #0d6efd a receber, #dc3545 em atraso) e
   nos ícones. Estilo inline só é derrotado por !important — daí os seletores
   [style*="…"] abaixo.

   ISTO É UMA PONTE: quando o PHP for tokenizado (Fase 3/4), APAGUE esta seção
   inteira. Se o hex do PHP mudar antes disso, a regra simplesmente para de
   aplicar (volta ao visual Bootstrap) — não quebra nada.
   ========================================================================== */
/* KPI tiles v2 — sem listra lateral: a cor de status vive no ícone, no valor
   e no chip. O !important no border-left derrota o style="" inline do PHP. */
.dashboard .info-card {
  border-left: 1px solid var(--line) !important;
}

.dashboard .info-card .card-body {
  padding: 18px 20px 14px;
}

.dashboard .info-card .card-title {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 0 0 12px;
}

.dashboard .info-card .card-title span {
  font-weight: 500;
}

.dashboard .info-card h6 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.dashboard .card-icon {
  font-size: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.dashboard .sales-card .card-icon {
  color: var(--brand-cta);
  background: var(--admin-brand-tint);
}

/* divisor <hr> do PHP some; o rodapé ganha o hairline */
.dashboard .info-card hr {
  display: none;
}

.dashboard .info-card .card-body > .d-flex.justify-content-between {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.dashboard .info-card .badge.fs-6 {
  font-size: 0.78rem !important;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.35em 0.75em;
  font-variant-numeric: tabular-nums;
}

.dashboard .card-icon[style*="#198754"] {
  background: var(--status-paid-bg) !important;
  color: var(--status-paid-text) !important;
}

.dashboard .card-icon[style*="#dc3545"] {
  background: var(--status-overdue-bg) !important;
  color: var(--status-overdue-text) !important;
}

/* KPI tiles v3 — valor à esquerda, ícone vira ornamento à direita.
   O :not() exclui a linha de rodapé (% do total), que também é .d-flex. */
.dashboard .info-card .card-body > .d-flex.align-items-center:not(.justify-content-between) {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.dashboard .info-card .card-body > .d-flex.align-items-center:not(.justify-content-between) .ps-3 {
  padding-left: 0 !important;
}

/* Chips de seleção (btn-check) — pílulas segmentadas, ex.: meses do dashboard */
.btn-check + .btn {
  border-radius: 999px;
  border-color: var(--line);
  color: var(--text-muted);
  font-weight: 600;
}

.btn-check + .btn:hover {
  border-color: var(--brand-cta);
  color: var(--brand-cta);
  background: var(--admin-brand-tint);
}

.btn-check:checked + .btn {
  background: var(--brand-cta);
  border-color: var(--brand-cta);
  color: var(--white);
}

/* Busca do header — pílula quieta */
.header .search-form input {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  padding: 0.45rem 2.4rem 0.45rem 1.1rem;
  font-family: var(--font-sans);
  color: var(--text);
}

.header .search-form input:focus {
  border-color: var(--brand-cta);
  box-shadow: var(--focus-shadow);
  background: var(--white);
}

.header .search-form button {
  color: var(--text-muted);
}

/* ==========================================================================
   23. MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .form-control,
  .form-select,
  .sidebar-nav .nav-link,
  .sidebar-nav .nav-content a,
  a {
    transition: none !important;
  }
}