/* =========================================================================
   Tarefinha — Design "Multicolor" (handoff Claude Design)
   -------------------------------------------------------------------------
   Camada visual completa. Reaproveita o sistema de tokens do projectflow.css
   e reescreve a aparência dos componentes para bater com a referência.

   REGRA DE OURO (aprendida na marra): NUNCA declarar `position` para
   .sidebar (fixed) nem .topbar (sticky) — sobrescrever isso tira a sidebar
   do fluxo fixo e joga o conteúdo para fora da tela.

   ESCOPO — a distinção que custou caro:

   O que REDEFINE algo que já existia (tokens, cores, componentes do
   projectflow.css) fica em `body:not([data-theme])`, para um tema da Loja
   continuar vencendo.

   O que é COMPONENTE NOVO, criado neste redesign e sem contrapartida no CSS
   base (.search-kbd, .nav-ico, .dash-tab, .tf-*, .pf-pager, .plan-*,
   .stat-spark, .user-caret, .ico-*), fica SEM escopo. Ali o
   :not([data-theme]) não protegia nada — não há regra base nem regra de tema
   competindo — e só servia para APAGAR o estilo quando um tema estava ativo,
   deixando busca, abas, gráficos e paginação sem formatação nenhuma.

   Regra prática: tema decide cor; estrutura e tamanho não são tema.
   (E o <style id="pf-theme"> é injetado DEPOIS deste arquivo, então em empate
   de especificidade o tema vence de qualquer forma.)
   ========================================================================= */

/* ------------------------------------------------------------- keyframes */
@keyframes pfFloatY { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-16px) rotate(var(--r,0deg)); } }
@keyframes pfGrowBar { from { width: 0; } }
@keyframes pfRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pfFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pfPopIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pfSpin { to { transform: rotate(360deg); } }
@keyframes pfPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* ---------------------------------------------------------------- tokens */
body:not([data-theme]) {
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  --primary-color: #6d4aff;
  --secondary-color: #3b82f6;
  --success-color: #12b3a6;
  --warning-color: #f59a3c;
  --danger-color: #ef4d6b;
  --purple-color: #8b5cf6;

  --radius: 22px;

  --primary-gradient: linear-gradient(140deg, #8b5cf6, #6d4aff);
  --brand-gradient: linear-gradient(95deg, #7c3aed 0%, #4f46e5 35%, #2f7bf6 70%, #22d3ee 100%);
  --blue-gradient: linear-gradient(140deg, #5db4ff, #3b82f6);
  --purple-gradient: linear-gradient(140deg, #8b5cf6, #3b82f6 55%, #22d3ee);
  --orange-gradient: linear-gradient(140deg, #ffbf66, #ff8c42);
  --red-gradient: linear-gradient(140deg, #ff8fa3, #ff4d6d);
  --teal-gradient: linear-gradient(140deg, #3fe0c4, #12b3a6);
  --green-gradient: linear-gradient(140deg, #4ade80, #22c55e);
  --violet-gradient: linear-gradient(140deg, #a486ff, #7c3aed);

  --brand-logo-bg: var(--brand-gradient);
}

/* ----- Modo claro (padrão) = o design ----- */
body.light-mode:not([data-theme]) {
  --app-bg: linear-gradient(155deg, #f3f0ff 0%, #eef1ff 45%, #f6eeff 100%);
  --sidebar-bg: #ffffff;
  --topbar-bg: transparent;

  --panel-bg: rgba(255, 255, 255, .9);
  --panel-bg-2: rgba(255, 255, 255, .62);
  --border: #e8e4f5;

  --text: #221f33;
  --muted: #8b8898;
  --cell-solid: #ffffff;

  --shadow-panel: 0 12px 34px rgba(90, 60, 160, .09);
  --shadow-float: 0 6px 16px rgba(90, 70, 160, .10);

  --tint-1: #faf9ff;
  --tint-2: #f7f5ff;
  --tint-3: #f3f1f9;
  --tint-4: #f1ecff;
  --divider: #eceaf3;
}

/* ----- Modo escuro: mesma linguagem ----- */
body:not(.light-mode):not([data-theme]) {
  --app-bg:
    radial-gradient(circle at 90% 12%, rgba(124, 58, 237, .30), transparent 26%),
    radial-gradient(circle at 6% 90%, rgba(34, 211, 238, .14), transparent 20%),
    linear-gradient(150deg, #120f22 0%, #171334 48%, #1b1140 100%);
  --sidebar-bg: rgba(18, 15, 34, .82);
  --topbar-bg: transparent;
  --panel-bg: rgba(38, 32, 66, .72);
  --panel-bg-2: rgba(255, 255, 255, .06);
  --border: rgba(160, 140, 235, .18);
  --text: #f3f0ff;
  --muted: #a49fc4;
  --cell-solid: #1d1836;
  --shadow-panel: 0 18px 44px rgba(10, 5, 30, .38);
  --shadow-float: 0 8px 20px rgba(10, 5, 30, .32);
  --tint-1: rgba(255,255,255,.04);
  --tint-2: rgba(255,255,255,.06);
  --tint-3: rgba(255,255,255,.08);
  --tint-4: rgba(139, 92, 246, .22);
  --divider: rgba(160, 140, 235, .16);
}

/* ------------------------------------------------------------ tipografia */
body:not([data-theme]) { letter-spacing: -.01em; }
body:not([data-theme]) h1,
body:not([data-theme]) h2,
body:not([data-theme]) h3,
body:not([data-theme]) h4,
body:not([data-theme]) h5,
body:not([data-theme]) .section-title { letter-spacing: -.5px; font-weight: 800; }
body:not([data-theme]) .page-title,
body:not([data-theme]) .page-header h1 { font-size: clamp(26px, 2.4vw, 35px); }
body:not([data-theme]) .section-title { font-size: 18px; font-weight: 700; }

/* ------------------------------------------------- background decorativo
   6 esferas de vidro flutuando, como na referência. Pseudo-elementos +
   um container fixo injetado por CSS — nenhum HTML novo é necessário. */
body.light-mode:not([data-theme])::before,
body.light-mode:not([data-theme])::after {
  content: ''; position: fixed; pointer-events: none; z-index: -1;
}
/* Cores em força total, exatamente como no template (sem opacity). */
body.light-mode:not([data-theme])::before {
  top: 44px; right: 250px; width: 150px; height: 150px;
  border-radius: 30px; --r: 12deg; transform: rotate(12deg);
  background: linear-gradient(140deg, rgba(139,92,246,.9), rgba(34,211,238,.85));
  box-shadow: inset 0 0 40px rgba(255,255,255,.5), 0 20px 45px rgba(90,110,240,.25);
  animation: pfFloatY 7s ease-in-out infinite;
}
body.light-mode:not([data-theme])::after {
  top: 80px; right: 70px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9e8ff, #5db4ff 55%, #3b82f6);
  box-shadow: inset -10px -14px 30px rgba(40,90,200,.4), 0 18px 40px rgba(60,110,240,.3);
  animation: pfFloatY 9s ease-in-out infinite;
}
/* esferas extras via .content (não cria elemento, usa os pseudos dele) */
body.light-mode:not([data-theme]) .content::before,
body.light-mode:not([data-theme]) .content::after {
  content: ''; position: fixed; pointer-events: none; z-index: -1; border-radius: 50%;
}
body.light-mode:not([data-theme]) .content::before {
  bottom: 40px; left: 300px; width: 110px; height: 110px;
  background: radial-gradient(circle at 40% 35%, #dbe6ff, #7fa8ff 60%, #4f6fe6);
  box-shadow: inset -6px -8px 20px rgba(50,70,200,.35), 0 14px 30px rgba(80,100,240,.22);
  animation: pfFloatY 8.5s ease-in-out infinite;
}
body.light-mode:not([data-theme]) .content::after {
  top: 250px; right: 24px; width: 44px; height: 44px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #b6ecff 60%, #22d3ee);
  box-shadow: 0 8px 18px rgba(30,160,200,.25);
  animation: pfFloatY 8s ease-in-out infinite;
}
/* Esfera lilás do topo direito (5ª do template). Pendurada em #main, que é
   static/z-index:auto — no .topbar (sticky, z-index 1030) ela criaria um
   contexto próprio e pintaria POR CIMA da pílula de usuário. Fica abaixo da
   topbar, à altura das abas. */
body.light-mode:not([data-theme]) #main::before {
  content: ''; position: fixed; pointer-events: none; z-index: -1;
  top: 92px; right: 26px; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c9b6ff 60%, #9d5cff);
  box-shadow: 0 10px 24px rgba(120,90,240,.28);
  animation: pfFloatY 6s ease-in-out infinite;
}
/* 6ª forma: a esfera ciano menor que acompanha a azul no canto inferior
   esquerdo (no template ficam lado a lado, com ~100px de distância). */
body.light-mode:not([data-theme]) #main::after {
  content: ''; position: fixed; pointer-events: none; z-index: -1;
  bottom: 96px; left: 402px; width: 66px; height: 66px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e2fbff, #8fe6f5 60%, #22d3ee);
  box-shadow: 0 10px 22px rgba(30,160,200,.2);
  animation: pfFloatY 7.5s ease-in-out infinite;
}
/* As esferas ficam em z-index -1: pintam acima do fundo da página e atrás de
   todo o conteúdo. Antes eu resolvia isso empurrando o conteúdo para cima com
   `.content { z-index: 1 }` + `.content > * { z-index: 1 }` — e isso QUEBRAVA
   TODOS OS MODAIS: os modais são filhos diretos de .content (vêm do
   @yield('content')), então a segunda regra sobrescrevia o z-index 1055 do
   Bootstrap para 1, enquanto o .modal-backdrop (que o Bootstrap pendura no
   <body>, fora de .content) continuava em 1050 — resultado: o backdrop escuro
   por cima do modal. Não reintroduzir z-index em .content nem em .content > *.
   Pelo mesmo motivo, NUNCA declarar position em .sidebar/.topbar. */
@media (max-width: 991px) {
  body.light-mode:not([data-theme])::before,
  body.light-mode:not([data-theme])::after,
  body.light-mode:not([data-theme]) .content::before,
  body.light-mode:not([data-theme]) .content::after,
  body.light-mode:not([data-theme]) #main::before,
  body.light-mode:not([data-theme]) #main::after { display: none; }
}

/* --------------------------------------------------------------- painéis
   Efeito de "cards empilhados" da referência: duas camadas deslocadas atrás
   do card, a de trás com gradiente pastel. */
body:not([data-theme]) .glass {
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.light-mode:not([data-theme]) .glass { border-color: rgba(255, 255, 255, .9); }

/* Cards limpos: sem camadas empilhadas/gradiente atrás (removido a pedido).
   O cartão fica com a superfície branca, o raio e a sombra suave, só isso. */

body:not([data-theme]) .soft-glass { border-radius: 16px; }
body:not([data-theme]) hr,
body:not([data-theme]) .board-group-header { border-color: var(--divider) !important; }

/* ---------------------------------------------------------------- sidebar */
body.light-mode:not([data-theme]) .sidebar { border-right: 1px solid #f0eef7; box-shadow: none; }
/* Rodapé colado embaixo: o espaço em branco entre o último item do menu e o
   card do workspace vem daqui (margin-top:auto), como no template. NÃO
   declarar `position` — a sidebar é fixed no CSS base. */
body:not([data-theme]) .sidebar { display: flex; flex-direction: column; }
body:not([data-theme]) .sidebar .sidebar-menu { flex: 0 0 auto; }
body:not([data-theme]) .sidebar-footer { margin-top: auto; padding-top: 24px; }
body:not([data-theme]) .sidebar-menu li { margin: 4px 0; }
body:not([data-theme]) .sidebar-link {
  border-radius: 13px;
  padding: 12px 14px;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
}
body.light-mode:not([data-theme]) .sidebar-link { color: #6b6880; }
body.light-mode:not([data-theme]) .sidebar-link i { color: #a3a0b3; font-size: 17px; }
/* Ícone SVG do menu: herda a cor do link (currentColor), então acompanha
   automaticamente os estados hover/ativo. */
.sidebar-link .nav-ico {
  width: 21px; height: 21px; flex: none; color: inherit;
}
body.light-mode .sidebar-link .nav-ico { color: #a3a0b3; }
body:not([data-theme]) .sidebar-link:hover { background: var(--tint-2); color: var(--primary-color); }
body:not([data-theme]) .sidebar-link.active {
  background: var(--tint-4);
  color: var(--primary-color);
  font-weight: 700;
}
body:not([data-theme]) .sidebar-link:hover i,
body:not([data-theme]) .sidebar-link.active i,
.sidebar-link:hover .nav-ico,
.sidebar-link.active .nav-ico { color: var(--primary-color); }
/* Recolhida: o ícone centraliza sozinho (o texto some via .menu-text). */
body:not([data-theme]) .sidebar.collapsed .sidebar-link { justify-content: center; padding: 12px 0; }

/* Marca: logo + wordmark com gradiente multicolor */
body:not([data-theme]) .brand span {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; font-size: 24px; letter-spacing: -.5px;
}
/* A marca agora usa a logo real: tira o "ladrilho" colorido de trás. */
body:not([data-theme]) .brand-logo {
  background: none; box-shadow: none; border-radius: 0;
  width: 42px; height: 42px;
}
body:not([data-theme]) .brand-logo img { width: 42px; height: 42px; display: block; object-fit: contain; }
/* No tema escuro a marca some: a espiral tem bastante azul/roxo escuro e o
   fundo da sidebar é quase preto. Um leve ganho de brilho mais um halo na cor
   da marca destacam sem trocar o desenho nem clarear o logo a ponto de
   descaracterizar. Vale para a sidebar e para o logo do loader. */
body:not(.light-mode):not([data-theme]) .brand-logo img,
body:not(.light-mode):not([data-theme]) .app-loader-core .logo img {
  filter: brightness(1.16) saturate(1.08) drop-shadow(0 0 9px rgba(139, 92, 246, .6));
}

/* ---------------------------------------------------------------- topbar */
body:not([data-theme]) .topbar { border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.light-mode:not([data-theme]) .topbar .icon-btn,
body.light-mode:not([data-theme]) .topbar .action-btn {
  background: #fff; border-color: transparent; box-shadow: var(--shadow-float);
}
body.light-mode:not([data-theme]) .topbar .icon-btn:hover,
body.light-mode:not([data-theme]) .topbar .action-btn:hover { background: var(--tint-2); }

/* ---------------------------------------------------------- busca global
   A busca ocupa o espaço que sobra (como no design) mas PODE encolher —
   largura fixa em vw estourava a topbar e gerava scroll horizontal. */
body:not([data-theme]) .topbar-left,
body:not([data-theme]) .topbar-right { flex: 0 0 auto; min-width: 0; }
/* O contêiner visual passa a ser o FORM (lupa + campo + atalho lado a lado),
   como no template; o input fica transparente por dentro.
   TUDO AQUI É ESTRUTURA, e por isso fica fora do escopo de tema: com
   `body:not([data-theme])` o form perdia o display:flex sob um tema da Loja,
   a lupa (que é position:static aqui, contra o absolute do CSS base) saía
   flutuando acima do campo e o atalho ⌘K caía para baixo.
   As cores usam tokens, então continuam acompanhando o tema ativo. */
.topbar-center { flex: 1 1 auto; min-width: 0; }
.search-box { width: 100%; max-width: 820px; min-width: 0; }
.search-box form {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 18px; border-radius: 16px;
}
body.light-mode .search-box form {
  background: var(--cell-solid, #fff); box-shadow: 0 6px 18px rgba(90, 70, 160, .08);
}
body:not(.light-mode) .search-box form {
  background: var(--panel-bg-2); border: 1px solid var(--border);
}
.search-box input {
  flex: 1; min-width: 0; height: auto;
  padding: 0; border: 0; background: transparent; box-shadow: none;
  font-size: 15px; color: var(--text); outline: none;
}
.search-box input:focus { border: 0; box-shadow: none; }
body.light-mode .search-box input::placeholder { color: #a3a0b3; }
.search-box form:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #6d4aff) 18%, transparent);
}
.search-box .search-ico {
  position: static; flex: none; font-size: 15px; color: #a3a0b3;
}
.search-box .search-kbd { display: flex; gap: 5px; flex: none; }
/* O <kbd> do atalho é markup novo deste redesign; sem esta regra ele cai no
   estilo padrão do navegador (monospace, fundo escuro) e fica destoando.
   Sem escopo de tema pelo mesmo motivo das demais: não há regra base
   competindo, e o :not([data-theme]) só apagaria o estilo sob um tema. */
.search-box .search-kbd kbd {
  background: var(--tint-3, #f3f1f9); color: var(--muted, #8b8898);
  font-size: 12px; font-weight: 600; font-family: inherit;
  padding: 4px 8px; border-radius: 7px; box-shadow: none; line-height: 1.2;
}
@media (max-width: 767px) { .search-box .search-kbd { display: none; } }
body:not([data-theme]) .search-results { border-radius: 16px; box-shadow: 0 18px 44px rgba(90,60,160,.16); }

/* ------------------------------------------------------ pílula de usuário */
body:not([data-theme]) .dropdown > button:has(.user-text) {
  border-radius: 16px !important; padding: 8px 14px 8px 8px !important; gap: 12px !important;
}
body.light-mode:not([data-theme]) .dropdown > button:has(.user-text) { background: #fff; box-shadow: var(--shadow-float); }
/* Avatar quadrado-arredondado (44/12), como no template. Escopado à pílula
   para não mexer nos avatares circulares do board/documentos. */
body:not([data-theme]) .dropdown > button:has(.user-text) .avatar {
  width: 44px !important; height: 44px !important; border-radius: 12px;
}
body:not([data-theme]) .user-text { line-height: 1.2; }
body:not([data-theme]) .user-text .fw-bold { font-size: 15px; font-weight: 700; }
body:not([data-theme]) .user-text small { font-size: 12.5px; color: #9a97a8; }
.user-caret { flex: none; color: #9a97a8; }
body:not([data-theme]) .dropdown-menu {
  border-radius: 16px; border-color: var(--divider);
  box-shadow: 0 18px 44px rgba(90,60,160,.16); padding: 8px;
}
body:not([data-theme]) .dropdown-item { border-radius: 10px; font-weight: 600; }

/* --------------------------------------------------- card de time / plano */
body.light-mode:not([data-theme]) .plan-card {
  background: var(--tint-1); border: 1px solid #efeafc; border-radius: 16px;
  padding: 15px; backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Cabeçalho do card: ladrilho roxo + nome + contagem (como no template). */
.plan-head { display: flex; align-items: center; gap: 11px; }
.plan-ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  background: var(--primary-gradient);
  box-shadow: 0 6px 14px rgba(109, 74, 255, .28);
}
.plan-head .fw-bold { font-size: 15px; line-height: 1.25; }
.plan-head small { font-size: 12.5px; }
/* Pilha de avatares sobrepostos + selo de excedentes. */
.plan-avatars { display: flex; align-items: center; }
.plan-avatars .avatar {
  width: 32px !important; height: 32px !important; border-radius: 50%;
  border: 2.5px solid var(--tint-1); object-fit: cover;
}
.plan-avatars > *:not(:first-child) { margin-left: -11px; }
.plan-avatar-more {
  height: 32px; padding: 0 11px; border-radius: 16px;
  background: var(--tint-4); color: var(--primary-color);
  font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center;
  border: 2.5px solid var(--tint-1);
}
body:not([data-theme]) #collapseSidebar { border-radius: 13px; font-weight: 600; }
body.light-mode:not([data-theme]) #collapseSidebar { background: #fff; border-color: #ececf3; color: #8b8898; }
body.light-mode:not([data-theme]) #collapseSidebar:hover { background: var(--tint-2); color: var(--primary-color); }

/* ------------------------------------------------- ícones SVG (x-ico)
   Herdam a cor do contexto (currentColor) e alinham com o texto do botão. */
body:not([data-theme]) .pf-ico { flex: none; vertical-align: -3px; }
body:not([data-theme]) .action-btn .pf-ico,
body:not([data-theme]) .btn-gradient .pf-ico,
body:not([data-theme]) .icon-btn .pf-ico { vertical-align: 0; }
body:not([data-theme]) .filter-pill .pf-ico { margin-right: 6px; vertical-align: -3px; }

/* Regras do projectflow.css que miravam `i` e deixaram de casar quando o ícone
   virou SVG. Sem estas, o tamanho e o realce de estado se perderam. */
body:not([data-theme]) .epic-metric .pf-ico {
  /* o slot foi desenhado para 12px; o x-ico entra com 18px por padrão.
     margin-right fica em 0: .epic-metric já é flex com gap 7px, e a margem que
     eu tinha posto antes somava, virando 12px de respiro onde eram 7. */
  width: 13px; height: 13px; margin-right: 0; vertical-align: -2px;
}
body:not([data-theme]) .filter-field .pf-ico { color: var(--muted); }
body:not([data-theme]) .feature-toggle .pf-ico { color: var(--muted); }
/* o ícone precisa acender junto com a borda quando a feature é marcada */
body:not([data-theme]) .feature-toggle:has(input:checked) .pf-ico { color: var(--primary-color); }

/* ---------------------------------------------------------------- botões */
body:not([data-theme]) .icon-btn,
body:not([data-theme]) .action-btn { border-radius: 14px; font-weight: 600; }
body.light-mode:not([data-theme]) .icon-btn,
body.light-mode:not([data-theme]) .action-btn { background: #fff; border-color: #ececf3; color: #5a5670; }
body:not([data-theme]) .icon-btn:hover,
body:not([data-theme]) .action-btn:hover {
  border-color: color-mix(in srgb, var(--primary-color) 45%, transparent); color: var(--primary-color);
}
body:not([data-theme]) .action-btn.active {
  background: var(--tint-4); border-color: color-mix(in srgb, var(--primary-color) 40%, transparent); color: var(--primary-color);
}
body:not([data-theme]) .btn-gradient {
  border-radius: 14px; font-weight: 700;
  background: var(--primary-gradient); box-shadow: 0 10px 24px rgba(109,74,255,.28);
}
body:not([data-theme]) .btn-gradient:hover { box-shadow: 0 14px 30px rgba(109,74,255,.36); }

/* ------------------------------------------- cabeçalho da página (template)
   h1 35px/800 -.5px #221f33; subtítulo 15.5px #8b8898 com 6px de respiro. */
body:not([data-theme]) .page-title {
  font-size: clamp(26px, 2.6vw, 35px);
  font-weight: 800; letter-spacing: -.5px; line-height: 1.1;
  color: var(--text); margin: 0;
}
body:not([data-theme]) .page-subtitle {
  margin: 6px 0 0; color: var(--muted); font-size: 15.5px; font-weight: 500;
}

/* -------------------------------------------------------- abas (tabs) */
.dash-tabs {
  gap: 30px; border-bottom: 1px solid #e6e2f2;
  margin: 22px 0 24px; padding-bottom: 2px; flex-wrap: wrap;
}
.dash-tab {
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
  border-radius: 0;
}
.dash-tab svg { flex: none; }
.dash-tab.active {
  color: var(--primary-color); font-weight: 700; border-bottom-color: var(--primary-color);
  background: none;
}
body.light-mode .dash-tab:hover { color: #5a37e0; background: none; }

/* ----------------------------------------------------- cards de métrica */
body:not([data-theme]) .stat-card {
  border-radius: var(--radius);
  animation: pfPopIn .5s cubic-bezier(.4,0,.2,1) both;
}
body:not([data-theme]) .stat-icon {
  width: 58px; height: 58px; border-radius: 16px;
  box-shadow: 0 8px 18px rgba(80, 110, 240, .32);
}
body:not([data-theme]) .stat-value {
  font-size: clamp(28px, 2.6vw, 38px); font-weight: 800; line-height: 1.05; color: var(--text);
  font-variant-numeric: tabular-nums;
}
body:not([data-theme]) .stat-label { color: var(--muted); font-size: 14px; font-weight: 600; }
/* Minicurva no canto inferior direito (decorativa, como no template). */
body:not([data-theme]) .stat-card { position: relative; overflow: hidden; }
.stat-spark {
  position: absolute; right: 20px; bottom: 18px;
  pointer-events: none; opacity: .9;
}
/* Texto de apoio abaixo do número */
body:not([data-theme]) .stat-card .trend {
  margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted);
}
body:not([data-theme]) .stat-card .trend.down { color: var(--danger-color); }
@media (max-width: 575px) { .stat-spark { display: none; } }
body:not([data-theme]) .stat-card-link:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(90,60,160,.16); }
/* entrada escalonada dos cards */
body:not([data-theme]) .row > [class*="col-"]:nth-child(1) .stat-card { animation-delay: .02s; }
body:not([data-theme]) .row > [class*="col-"]:nth-child(2) .stat-card { animation-delay: .08s; }
body:not([data-theme]) .row > [class*="col-"]:nth-child(3) .stat-card { animation-delay: .14s; }
body:not([data-theme]) .row > [class*="col-"]:nth-child(4) .stat-card { animation-delay: .20s; }

/* ------------------------------------------------------------- tabelas */
body:not([data-theme]) .pf-table thead th {
  color: var(--muted); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
  text-transform: none; border-bottom: 1px solid var(--divider);
}
body:not([data-theme]) .pf-table tbody tr { border-bottom: 1px solid var(--divider); }
body.light-mode:not([data-theme]) .pf-table tbody tr:hover { background: var(--tint-2); }
/* entrada escalonada das linhas */
body:not([data-theme]) .pf-table tbody tr { animation: pfRowIn .45s ease both; }
body:not([data-theme]) .pf-table tbody tr:nth-child(1) { animation-delay: .04s; }
body:not([data-theme]) .pf-table tbody tr:nth-child(2) { animation-delay: .09s; }
body:not([data-theme]) .pf-table tbody tr:nth-child(3) { animation-delay: .14s; }
body:not([data-theme]) .pf-table tbody tr:nth-child(4) { animation-delay: .19s; }
body:not([data-theme]) .pf-table tbody tr:nth-child(5) { animation-delay: .24s; }
body:not([data-theme]) .pf-table tbody tr:nth-child(n+6) { animation-delay: .28s; }

/* --------------------------------------------------- chips, pills, badges */
body:not([data-theme]) .badge-soft,
body:not([data-theme]) .status-pill {
  border-radius: 9px; font-weight: 700; letter-spacing: .01em; padding: 5px 12px; font-size: 12.5px;
}
body.light-mode:not([data-theme]) .badge-gray { background: var(--tint-3); color: #7b7790; }
body.light-mode:not([data-theme]) .badge-blue { background: #efe9ff; color: #6d4aff; }
body.light-mode:not([data-theme]) .badge-red,
body.light-mode:not([data-theme]) .badge-danger { background: #fde8ec; color: #e0334f; }
body.light-mode:not([data-theme]) .badge-orange,
body.light-mode:not([data-theme]) .badge-warning { background: #fdeede; color: #d98020; }
body.light-mode:not([data-theme]) .badge-yellow { background: #fdf6dd; color: #c69a12; }
body.light-mode:not([data-theme]) .badge-green,
body.light-mode:not([data-theme]) .badge-success { background: #e6f8f3; color: #12b3a6; }

/* --------------------------------------------------------------- inputs */
body:not([data-theme]) .form-control,
body:not([data-theme]) .form-select,
body:not([data-theme]) .filter-select { border-radius: 13px; }
body.light-mode:not([data-theme]) .form-control,
body.light-mode:not([data-theme]) .form-select,
body.light-mode:not([data-theme]) .filter-select { background: #fff; border-color: #e6e2f2; color: var(--text); }
body:not([data-theme]) .form-control:focus,
body:not([data-theme]) .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
}

/* --------------------------------------------------------------- modais */
body:not([data-theme]) .modal-content { border-radius: var(--radius); }
body:not([data-theme]) .modal-content.glass { box-shadow: 0 28px 70px rgba(60,40,120,.22); }

/* ------------------------------------------------------------- progresso */
body:not([data-theme]) .board-progress,
body:not([data-theme]) .progress { border-radius: 7px; height: 11px; background: var(--divider); overflow: hidden; }
body:not([data-theme]) .board-progress-bar,
body:not([data-theme]) .progress-bar {
  border-radius: 7px;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6, #22d3ee);
  animation: pfGrowBar 1.2s cubic-bezier(.4,0,.2,1) .2s both;
}
body:not([data-theme]) .progress-mini .progress-mini-bar { background: linear-gradient(90deg, #8b5cf6, #22d3ee); }

/* ============================== BOARD / MINHAS TAREFAS ==================
   Família de componentes compartilhada por /boards/{id} e /my-tasks
   (.board-group, .board-card, .board-table). Não recebia o design e por
   isso destoava do resto do app. Só propriedades visuais — a edição inline,
   o drag&drop e os data-attributes continuam intactos. */

/* Entrada dos cards e das linhas, no mesmo padrão do resto do app (o
   .stat-card e o .pf-table já faziam isso; board e my-tasks ficaram de fora).

   Dois cuidados aqui:
   1. As linhas usam pfFadeIn (só opacidade), não pfPopIn: as duas primeiras
      colunas do board são `position: sticky`, e `transform` num ancestral cria
      containing block e bagunça o congelamento enquanto a animação roda.
   2. A tabela é re-renderizada por AJAX (filtros e tempo real). Sem o
      `.pf-anim-done` que o tarefinha-design.js pendura depois da primeira
      carga, tudo repiscaria a cada atualização remota de um colega. */
body:not([data-theme]) .board-group {
  animation: pfPopIn .5s cubic-bezier(.4, 0, .2, 1) both;
}
body:not([data-theme]) .board-group:nth-of-type(2) { animation-delay: .07s; }
body:not([data-theme]) .board-group:nth-of-type(3) { animation-delay: .14s; }
body:not([data-theme]) .board-group:nth-of-type(4) { animation-delay: .21s; }
body:not([data-theme]) .board-group:nth-of-type(n+5) { animation-delay: .28s; }

body:not([data-theme]) .board-table tbody tr { animation: pfFadeIn .4s ease both; }
body:not([data-theme]) .board-table tbody tr:nth-child(1) { animation-delay: .05s; }
body:not([data-theme]) .board-table tbody tr:nth-child(2) { animation-delay: .09s; }
body:not([data-theme]) .board-table tbody tr:nth-child(3) { animation-delay: .13s; }
body:not([data-theme]) .board-table tbody tr:nth-child(4) { animation-delay: .17s; }
body:not([data-theme]) .board-table tbody tr:nth-child(5) { animation-delay: .21s; }
body:not([data-theme]) .board-table tbody tr:nth-child(n+6) { animation-delay: .25s; }

/* Depois da primeira carga, nada mais anima nesta tela. */
body:not([data-theme]) #board-table.pf-anim-done .board-group,
body:not([data-theme]) #board-table.pf-anim-done .board-table tbody tr { animation: none; }

/* Cartão do grupo: a sombra herdada era escura (rgba(0,0,0,.24)) e sujava
   o fundo claro. Aqui vira a sombra lilás suave da referência. */
body.light-mode:not([data-theme]) .board-group-body.board-card,
body.light-mode:not([data-theme]) .board-card {
  background: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 34px rgba(90, 60, 160, .09);
}
body:not([data-theme]) .board-group-body.board-card,
body:not([data-theme]) .board-card { border-radius: 20px; }

/* Cabeçalho do grupo */
body:not([data-theme]) .board-group-head { padding: 10px 6px 12px; }
body:not([data-theme]) .group-name-static,
body:not([data-theme]) .group-name-input { font-weight: 700; font-size: 15px; letter-spacing: -.2px; }
body:not([data-theme]) .group-swatch { border-radius: 6px; }
body.light-mode:not([data-theme]) .group-count {
  background: var(--tint-4);
  border-color: transparent;
  color: var(--primary-color);
  font-weight: 700;
  font-size: 12px;
}

/* Cabeçalho da tabela: era 16px em azul-marinho — pesado demais para uma
   tela densa. Vira o rótulo discreto da referência. */
body:not([data-theme]) .board-table thead th {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted);
}
body.light-mode:not([data-theme]) .board-table thead th { background: #fff; }
body:not([data-theme]) .board-table tbody tr { border-bottom: 1px solid var(--divider); }
body.light-mode:not([data-theme]) .board-table tbody tr:hover { background: var(--tint-2); }

/* Densidade das células: título/data estavam em 16px (tamanho de corpo). */
body:not([data-theme]) .cell-title { font-size: 14.5px; font-weight: 600; border-radius: 9px; }
body:not([data-theme]) .cell-date,
body:not([data-theme]) .date-btn { font-size: 13px; }
body.light-mode:not([data-theme]) .cell-title:hover { background: var(--tint-2); }
body:not([data-theme]) .cell-title:focus {
  background: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

/* Chips de tipo/status/prioridade: o raio 999px deixava tudo em formato de
   pílula. Aqui viram quadradinhos arredondados, com largura uniforme para as
   colunas ficarem alinhadas. */
body:not([data-theme]) .cell-color {
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  min-width: 108px;
}

/* Prazo em semáforo: verde dentro do prazo, âmbar perto de vencer, vermelho
   vencido. O amarelo/vermelho do CSS base foram calibrados para fundo escuro
   e ficavam ilegíveis no claro. */
body:not([data-theme]) .date-range.has-date,
body:not([data-theme]) .date-range.has-date i {
  color: #0d8f7f;
}
body:not([data-theme]) .date-range.has-date {
  background: color-mix(in srgb, var(--success-color) 13%, transparent);
}
body:not([data-theme]) .date-range.due-soon,
body:not([data-theme]) .date-range.due-soon i {
  color: #b4700f;
}
body:not([data-theme]) .date-range.due-soon {
  background: color-mix(in srgb, var(--warning-color) 18%, transparent);
}
body:not([data-theme]) .date-range.overdue,
body:not([data-theme]) .date-range.overdue i {
  color: #d63455;
}
body:not([data-theme]) .date-range.overdue {
  background: color-mix(in srgb, var(--danger-color) 14%, transparent);
}

/* Linha de resumo do grupo e barra de seleção */
body.light-mode:not([data-theme]) .group-summary-row { background: var(--tint-1); }
body:not([data-theme]) .bubble { border-radius: 999px; font-weight: 700; }
body.light-mode:not([data-theme]) .bubble {
  background: var(--tint-3); border-color: transparent; color: #7b7790;
}
body.light-mode:not([data-theme]) .bubble:hover { background: var(--tint-4); color: var(--primary-color); }

/* ================= RESQUÍCIOS DO TEMA ESCURO (varredura das 33 telas) =====
   O app nasceu escuro: há ~56 superfícies `rgba(255,255,255,.02–.06)` e ~58
   usos do ciano antigo (#00d8d8) no CSS base. No fundo claro essas
   superfícies somem e o ciano destoa do roxo. Aqui corrijo as que a
   auditoria provou que aparecem em tela, sem reescrever o CSS base. */

/* Superfícies que ficavam invisíveis no claro ------------------------- */
body.light-mode:not([data-theme]) .filter-field,
body.light-mode:not([data-theme]) .help-search,
body.light-mode:not([data-theme]) .gh-privacy,
body.light-mode:not([data-theme]) .bucket-drop-hint {
  background: #fff;
  border-color: #e6e2f2;
}
body.light-mode:not([data-theme]) .summary-bar {
  background: var(--tint-1);
  border: 1px solid var(--divider);
  border-radius: 14px;
}
body.light-mode:not([data-theme]) .bucket-drop-hint {
  background: var(--tint-2);
  border-style: dashed;
}

/* Cabeçalho das tabelas: fundo era rgba(255,255,255,.03) (some no claro) */
body.light-mode:not([data-theme]) .pf-table thead th,
body.light-mode:not([data-theme]) .table-glass thead th {
  background: var(--tint-1);
  border-bottom: 1px solid var(--divider);
}
body:not([data-theme]) .pf-table thead th:first-child,
body:not([data-theme]) .table-glass thead th:first-child { border-top-left-radius: 12px; }
body:not([data-theme]) .pf-table thead th:last-child,
body:not([data-theme]) .table-glass thead th:last-child { border-top-right-radius: 12px; }

/* Ciano antigo que sobrou hardcoded -> paleta nova --------------------- */
/* Filtros de status (Projetos). Antes esta regra pintava TODA pílula com o
   tom de destaque — e como ela tem a mesma especificidade de
   `.filter-pill.active` e carrega depois, o estado selecionado sumia: os
   quatro botões ficavam idênticos. Agora o repouso é neutro e só o ativo
   recebe o preenchimento. */
body:not([data-theme]) .filter-pill {
  border-radius: 999px;
  font-weight: 600;
  padding: 9px 16px;
}
body.light-mode:not([data-theme]) .filter-pill {
  background: #fff;
  border-color: #ececf3;
  color: #5a5670;
  box-shadow: var(--shadow-float);
}
body.light-mode:not([data-theme]) .filter-pill:hover {
  border-color: color-mix(in srgb, var(--primary-color) 45%, transparent);
  color: var(--primary-color);
}
/* Contador vira um chip, como no template. */
body:not([data-theme]) .filter-pill b {
  border-radius: 8px; padding: 1px 8px; font-size: 12.5px; font-weight: 700;
}
body.light-mode:not([data-theme]) .filter-pill b { background: var(--tint-3); color: #7b7790; }

body:not([data-theme]) .filter-pill.active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 18px rgba(109, 74, 255, .26);
}
/* No pílula preenchida tudo vira branco, inclusive o ícone colorido. */
body:not([data-theme]) .filter-pill.active .pf-ico { color: #fff; }
body:not([data-theme]) .filter-pill.active b { background: rgba(255, 255, 255, .22); color: #fff; }

/* Ciano hardcoded em CSS (o resto do ciano do app vem de DADO — cor do
   grupo/épico — ou da cor de destaque do usuário, e por isso NÃO é tocado). */
/* ------------------------------------------------------------- épicos
   Os cards estavam a meio caminho: o tile ganhou o gradiente roxo fixo do
   design e com isso PERDEU a cor do épico (que é dado — a cor do grupo do
   board), a sombra de hover era a preta do tema escuro e a trilha da barra de
   status era branca translúcida, invisível no fundo claro. */

/* Tile no tamanho e no raio dos stat-cards (58/16), com gradiente derivado da
   cor do próprio épico em vez do roxo fixo. */
body:not([data-theme]) .epic-chip {
  width: 54px; height: 54px; border-radius: 16px;
  color: #fff;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--epic-color, #8753de) 72%, #ffffff),
    var(--epic-color, #8753de));
  box-shadow: 0 10px 22px -10px var(--epic-color, #8753de);
}
body:not([data-theme]) .epic-chip .pf-ico { width: 24px; height: 24px; }

/* A faixa de 4px na esquerda não existe no template — e estava quebrada de
   qualquer forma: a borda do .glass vencia e ela saía branca. A identidade de
   cor fica no tile e no brilho radial que o card já tem. */
body:not([data-theme]) .epic-card { border-left: 0; }

body.light-mode:not([data-theme]) .epic-card:hover {
  box-shadow: 0 22px 48px rgba(90, 60, 160, .16);
}
body.light-mode:not([data-theme]) .epic-bar { background: var(--tint-3); }

/* Entrada dos cards, no mesmo padrão das outras telas. */
body:not([data-theme]) .epic-card { animation: pfPopIn .5s cubic-bezier(.4, 0, .2, 1) both; }
body:not([data-theme]) .col-lg-6:nth-child(2) .epic-card { animation-delay: .06s; }
body:not([data-theme]) .col-lg-6:nth-child(3) .epic-card { animation-delay: .12s; }
body:not([data-theme]) .col-lg-6:nth-child(4) .epic-card { animation-delay: .18s; }
body:not([data-theme]) .col-lg-6:nth-child(n+5) .epic-card { animation-delay: .24s; }
body:not([data-theme]) .nav-tabs .nav-link.active {
  background: var(--tint-4);
  color: var(--primary-color);
  border-color: transparent;
  border-radius: 12px 12px 0 0;
  font-weight: 700;
}

/* Sombras escuras sobrando (encardem o fundo claro) -------------------- */
body.light-mode:not([data-theme]) .profile-hero-avatar {
  box-shadow: 0 8px 22px rgba(90, 60, 160, .18);
}

/* ======================= GRÁFICO SVG "Criadas x Concluídas" ==============
   Mesmas animações do template: a linha se desenha (stroke-dashoffset), a
   área e os pontos surgem depois, em cascata. */
@keyframes tfDraw { to { stroke-dashoffset: 0; } }
@keyframes tfFade { to { opacity: 1; } }

.tf-chart-card { padding: 24px 26px; }
.tf-chart-head {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.tf-chart-title {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 200px;
  font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.2px;
}
.tf-legend { display: flex; align-items: center; gap: 22px; }
.tf-leg {
  display: flex; align-items: center; gap: 8px;
  color: #6b6880; font-size: 14px; font-weight: 600;
}
.tf-leg i { width: 11px; height: 11px; border-radius: 50%; display: block; }
body:not(.light-mode) .tf-leg { color: var(--muted); }
.tf-chart-wrap { margin-top: 16px; overflow-x: auto; }
/* height:auto faz o desenho preencher a largura do card sem sobrar faixa
   vazia (com height fixo o viewBox era reduzido para caber e ficava pequeno). */
.tf-chart-wrap svg {
  display: block; width: 100%; height: auto; min-width: 620px;
}

.tf-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: tfDraw 1.4s ease forwards;
}
.tf-line-1 { animation-delay: .1s; }
.tf-line-2 { animation-delay: .35s; }
.tf-area { opacity: 0; animation: tfFade 1s ease .55s forwards; }
.tf-dot { opacity: 0; animation: tfFade .5s ease forwards; }
.tf-dot-1 { animation-delay: 1.35s; }
.tf-dot-2 { animation-delay: 1.5s; }
body:not(.light-mode) .tf-dot { stroke: #1d1836; }

@media (prefers-reduced-motion: reduce) {
  .tf-line { stroke-dashoffset: 0; animation: none; }
  .tf-area,
  .tf-dot { opacity: 1; animation: none; }
}

/* ------------------------------------------------------ paginação simples
   O !important é necessário: utilitários do Bootstrap (.d-flex) usam
   `display: flex !important` e venceriam o atributo `hidden` do paginador. */
body:not([data-theme]) [data-pager-row][hidden] { display: none !important; }

.pf-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--divider);
}
.pf-pager .icon-btn { width: 34px; height: 34px; font-size: 12px; }
.pf-pager .icon-btn:disabled { opacity: .38; cursor: default; }
.pf-pager .icon-btn:disabled:hover {
  color: inherit; border-color: #ececf3; background: #fff;
}
.pf-pager-info {
  font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ cartões de gráfico
   Todos iguais: raio 20, padding 18/20, título 16/700 e corpo de mesma
   altura — a grade 2x2 fica alinhada independentemente do conteúdo. */
body:not([data-theme]) .chart-card {
  border-radius: 20px;
  padding: 18px 20px;
  display: flex; flex-direction: column;
}
body:not([data-theme]) .chart-card-header {
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
}
body:not([data-theme]) .chart-card-header h5 {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  font-size: 16px; font-weight: 700; color: var(--text); margin: 0; letter-spacing: -.2px;
}
body:not([data-theme]) .chart-card-header h5 i { font-size: 17px; color: var(--primary-color); }
body:not([data-theme]) .chart-card-tools { display: flex; gap: 8px; flex: none; }
body:not([data-theme]) .chart-tool-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid #ececf3; background: #fff; color: #a3a0b3;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
body:not([data-theme]) .chart-tool-btn:hover { color: var(--primary-color); border-color: var(--primary-color); }
body:not([data-theme]) .chart-card-body { flex: 1; display: flex; flex-direction: column; }
body:not([data-theme]) .chart-card-body .chart-container,
.chart-card-body .chart-empty { flex: 1; min-height: 300px; }

/* --------------------------------------------------- assistente (chips) */
body.light-mode:not([data-theme]) .fa-panel { border-radius: 20px; }
body.light-mode:not([data-theme]) .fa-chip {
  border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
  background: var(--tint-4); color: #5a37e0;
}

/* --------------------------------------------------------- links / scroll */
body:not([data-theme]) a { color: var(--primary-color); }
body:not([data-theme]) a:hover { color: #5a37e0; }

/* No tema escuro o roxo do link rende só 2.98:1 contra o fundo do card —
   abaixo do mínimo de 4.5:1 da WCAG AA. Em branco vai a 15.35:1.
   Precisa ser escopado em :not(.light-mode): a regra genérica acima vale para
   os DOIS temas, e branco nela deixaria o link invisível no fundo claro.
   O .brand fica de fora de propósito — é o nome da marca na sidebar, e a cor
   ali é escolha de identidade, não de leitura. */
body:not(.light-mode):not([data-theme]) a:not(.brand) { color: #ffffff; }
body:not(.light-mode):not([data-theme]) a:not(.brand):hover { color: #d9d2ff; }

/* Efeito colateral do branco: o texto normal no escuro é #f3f0ff, quase
   branco, então o link deixava de se distinguir da frase em volta. O
   sublinhado devolve a sinalização.
   `a:not([class])` mira só os links de PROSA — botões, itens de menu e ícones
   têm classe e ficam de fora, que é o que se quer: sublinhar um .dropdown-item
   ou um botão ficaria estranho. */
body:not(.light-mode):not([data-theme]) .content a:not([class]) {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body:not(.light-mode):not([data-theme]) .content a:not([class]):hover {
  text-decoration-color: currentColor;
}
/* Âncora que é BOTÃO PREENCHIDO não pode seguir a cor de link: o fundo já é
   escuro/gradiente e o texto tem de continuar branco. A regra genérica acima
   tem especificidade (0,2,1) e vence o `color:#fff` das classes de botão
   (0,1,0) — foi assim que o "Entrar com o GitHub" ficou com texto roxo sobre
   #24292f. Vale para as 8 âncoras-botão do app (btn-github, btn-gradient,
   btn-danger-gradient); o :hover precisa entrar junto pelo mesmo motivo. */
body:not([data-theme]) a.btn-github,
body:not([data-theme]) a.btn-github:hover,
body:not([data-theme]) a.btn-gradient,
body:not([data-theme]) a.btn-gradient:hover,
body:not([data-theme]) a.btn-danger-gradient,
body:not([data-theme]) a.btn-danger-gradient:hover { color: #fff; }
body:not([data-theme]) ::-webkit-scrollbar { width: 8px; height: 8px; }
body:not([data-theme]) ::-webkit-scrollbar-thumb { background: rgba(120,110,160,.25); border-radius: 8px; }
body:not([data-theme]) ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------ loader de página
   O app JÁ tem um loader (#app-loader, com anéis animados). Aqui só o
   reskin: fundo do design, marca com gradiente e a logo real no centro. */
body.light-mode:not([data-theme]) .app-loader {
  background: linear-gradient(155deg, #f3f0ff 0%, #eef1ff 45%, #f6eeff 100%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body:not(.light-mode):not([data-theme]) .app-loader {
  background: linear-gradient(150deg, #120f22 0%, #171334 48%, #1b1140 100%);
}
body:not([data-theme]) .app-loader-title {
  font-weight: 800; font-size: 22px; letter-spacing: -.5px;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body:not([data-theme]) .app-loader-sub { color: var(--muted); font-weight: 600; font-size: 13px; }
/* logo real no miolo do anel (substitui o ícone) */
body:not([data-theme]) .app-loader-core .logo img {
  width: 46px; height: 46px; display: block; object-fit: contain;
}

/* --------------------------------------------------- ícones informativos
   O ciano do .text-info do Bootstrap destoa da paleta. Estas classes dão o
   tom certo sem mexer em layout — usadas nas listas de Configurações. */
.ico-accent { color: var(--primary-color); }
.ico-warn { color: #d08010; }
.ico-ok { color: #0d8f7f; }

/* ------------------------------------------------------------ acessível */
@media (prefers-reduced-motion: reduce) {
  body:not([data-theme]) .stat-card-link:hover { transform: none; }
  body.light-mode:not([data-theme])::before,
  body.light-mode:not([data-theme])::after,
  body.light-mode:not([data-theme]) .content::before,
  body.light-mode:not([data-theme]) .content::after { animation: none; }
  body:not([data-theme]) .stat-card,
  body:not([data-theme]) .pf-table tbody tr,
  body:not([data-theme]) .board-group,
  body:not([data-theme]) .board-table tbody tr,
  body:not([data-theme]) .epic-card,
  body:not([data-theme]) .board-progress-bar,
  body:not([data-theme]) .progress-bar { animation: none !important; }
  .pf-loader-ring, .pf-loader-mark { animation: none; }
}