/* ============================================================
   Hub de APIs — camada de tema premium  ·  "SOFT DEPTH"
   Refina o Sneat (Bootstrap 5) POR CIMA. Apenas visual.
   Incluído DEPOIS de demo.css / theme-default.css.
   Não altera marcação, IDs ou JS. Usa só classes existentes.
   Paridade total no dark (.dark-style) + acessibilidade AA.
   ------------------------------------------------------------
   Índice
    0. Tokens (:root + .dark-style)
    1. Base · body · fundo sutil
    2. Tipografia / hierarquia
    3. Menu lateral
    4. Navbar glassy
    5. Abas do workspace (#tabbar / .hub-tab / frames / loader)
    6. Cards
    7. Stat cards & avatares
    8. Botões
    9. Badges & pills
   10. Tabelas
   11. Forms & switches
   12. Modais · dropdowns · accordion
   13. Nav-pills & alerts
   14. Login
   15. Scrollbar
   16. ApexCharts
   17. Foco acessível + prefers-reduced-motion
   ============================================================ */

/* ============================================================
   0. TOKENS
   ============================================================ */
:root{
  /* marca — NÃO trocar a HUE base */
  --hub-primary:#696cff;
  --hub-primary-2:#7a6cff;
  --hub-primary-3:#8b5cf6;
  --hub-primary-ink:#5f61e6;      /* estado pressed/hover sólido */
  --hub-on-primary:#ffffff;       /* texto legível SOBRE a cor primária (brandCss ajusta p/ cor clara) */
  --hub-info:#03c3ec;

  /* tinta primária em rgba (halos / hovers) */
  --hub-primary-rgb:105,108,255;
  --hub-info-rgb:3,195,236;
  --hub-success-rgb:40,199,111;
  --hub-danger-rgb:234,84,85;

  /* escala de tint da marca — estados de hover consistentes */
  --hub-tint:rgba(var(--hub-primary-rgb),.045);
  --hub-tint-2:rgba(var(--hub-primary-rgb),.09);
  --hub-tint-3:rgba(var(--hub-primary-rgb),.14);

  /* gradientes de marca reutilizáveis */
  --hub-grad:linear-gradient(120deg, var(--hub-primary), var(--hub-primary-2) 55%, var(--hub-primary-3));
  --hub-grad-soft:linear-gradient(120deg, var(--hub-primary), var(--hub-primary-2));

  /* raios generosos (soft depth = cantos macios) */
  --hub-radius:16px;
  --hub-radius-sm:11px;
  --hub-radius-xs:9px;            /* controles compactos (btn-sm/xs, badge) */
  --hub-radius-lg:20px;
  --hub-radius-xl:24px;
  --hub-radius-pill:999px;

  /* superfícies & bordas hairline em 3 níveis */
  --hub-border:#ecedf5;
  --hub-border-strong:#e1e3ef;
  --hub-hairline:#f1f2f8;         /* divisor mais leve */
  --hub-surface:#ffffff;          /* cartões / painéis elevados */
  --hub-surface-2:#f9fafe;        /* superfície de apoio (inputs) */
  --hub-bg:#f3f4fb;               /* fundo do app */
  --hub-bg-2:#edeef7;             /* fundo mais fundo (gradiente) */

  /* tipografia — tracking afiado */
  --hub-tracking-tight:-.014em;
  --hub-tracking-caps:.08em;

  /* SOMBRAS EM CAMADAS — luz de cima, penumbra macia difusa */
  --hub-shadow-xs:
    0 1px 2px rgba(29,37,68,.05);
  --hub-shadow:
    0 1px 2px rgba(29,37,68,.04),
    0 4px 10px -2px rgba(29,37,68,.06),
    0 10px 24px -8px rgba(29,37,68,.07);
  --hub-shadow-md:
    0 2px 4px rgba(29,37,68,.05),
    0 10px 22px -6px rgba(29,37,68,.10),
    0 22px 46px -14px rgba(29,37,68,.12);
  --hub-shadow-lg:
    0 4px 8px rgba(29,37,68,.06),
    0 18px 38px -10px rgba(29,37,68,.15),
    0 40px 70px -22px rgba(29,37,68,.20);
  /* brilho colorido da marca */
  --hub-glow:0 10px 26px -8px rgba(var(--hub-primary-rgb),.5);
  --hub-glow-soft:0 8px 20px -10px rgba(var(--hub-primary-rgb),.42);
  /* luz interna superior — sensação tátil de superfície macia */
  --hub-inset-light:inset 0 1px 0 rgba(255,255,255,.65);

  --hub-trans:.2s cubic-bezier(.4,.2,.2,1);
  --hub-trans-slow:.32s cubic-bezier(.4,.2,.2,1);
}

.dark-style{
  --hub-border:#33344a;
  --hub-border-strong:#3c3d57;
  --hub-hairline:#2f3046;
  --hub-surface:#2d2e44;
  --hub-surface-2:#33344c;
  --hub-bg:#232333;
  --hub-bg-2:#1e1f2d;

  --hub-tint:rgba(var(--hub-primary-rgb),.10);
  --hub-tint-2:rgba(var(--hub-primary-rgb),.17);
  --hub-tint-3:rgba(var(--hub-primary-rgb),.24);

  --hub-shadow-xs:
    0 1px 2px rgba(0,0,0,.32);
  --hub-shadow:
    0 1px 2px rgba(0,0,0,.30),
    0 4px 10px -2px rgba(0,0,0,.38),
    0 10px 24px -8px rgba(0,0,0,.46);
  --hub-shadow-md:
    0 2px 4px rgba(0,0,0,.34),
    0 10px 22px -6px rgba(0,0,0,.48),
    0 22px 46px -14px rgba(0,0,0,.56);
  --hub-shadow-lg:
    0 4px 8px rgba(0,0,0,.40),
    0 18px 38px -10px rgba(0,0,0,.58),
    0 40px 70px -22px rgba(0,0,0,.66);
  --hub-glow:0 10px 28px -8px rgba(var(--hub-primary-rgb),.6);
  --hub-glow-soft:0 8px 20px -10px rgba(var(--hub-primary-rgb),.5);
  --hub-inset-light:inset 0 1px 0 rgba(255,255,255,.06);
}

/* ============================================================
   1. BASE · body · fundo sutil
   ============================================================ */
body{
  background:var(--hub-bg);
  background-image:
    radial-gradient(1200px 620px at 100% -8%, rgba(var(--hub-primary-rgb),.05), transparent 60%),
    radial-gradient(1000px 520px at -6% 108%, rgba(var(--hub-info-rgb),.045), transparent 56%),
    linear-gradient(180deg, var(--hub-bg), var(--hub-bg-2));
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.dark-style body{
  background-image:
    radial-gradient(1200px 620px at 100% -8%, rgba(var(--hub-primary-rgb),.06), transparent 62%),
    radial-gradient(1000px 520px at -6% 108%, rgba(var(--hub-info-rgb),.04), transparent 58%),
    linear-gradient(180deg, var(--hub-bg), var(--hub-bg-2));
}

/* ============================================================
   2. TIPOGRAFIA / HIERARQUIA
   ------------------------------------------------------------
   .text-muted NÃO recebe opacity: a cor calculada do Sneat já
   passa AA; empilhar opacity sobre texto esmaecido reprovaria
   contraste (pior no dark).
   ============================================================ */
h1,h2,h3,h4,h5,h6,.card-title,.stat{ letter-spacing:var(--hub-tracking-tight); }
h1,h2,h3{ font-weight:700; }
h4,h5,h6,.card-title{ font-weight:600; }
.text-heading{ letter-spacing:-.01em; }
small,.small{ letter-spacing:.005em; }
hr{ border-color:var(--hub-border); opacity:1; }
::selection{ background:rgba(var(--hub-primary-rgb),.22); color:#fff; }
.dark-style ::selection{ background:rgba(var(--hub-primary-rgb),.34); color:#fff; }

/* ============================================================
   3. MENU LATERAL
   ============================================================ */
.layout-menu.bg-menu-theme{
  border-right:1px solid var(--hub-border);
}
.menu-vertical .menu-inner{ padding:.42rem .75rem 1.2rem; }
.menu-vertical .menu-item{ margin:.14rem 0; }

.menu-vertical .menu-item .menu-link{
  border-radius:var(--hub-radius-sm);
  padding:.62rem .82rem;
  font-weight:500;
  font-size:.94rem;
  position:relative;
  transition:background var(--hub-trans), color var(--hub-trans),
             box-shadow var(--hub-trans), transform var(--hub-trans);
}
.menu-vertical .menu-item .menu-link .menu-icon{
  font-size:1.22rem; margin-right:.6rem;
  transition:color var(--hub-trans), transform var(--hub-trans);
}

/* hover tátil (itens inativos) */
.menu-vertical .menu-item:not(.active) > .menu-link:hover{
  background:var(--hub-tint-2);
  color:var(--hub-primary);
}
.menu-vertical .menu-item:not(.active) > .menu-link:hover .menu-icon{
  color:var(--hub-primary);
  transform:translateX(1px) scale(1.04);
}
.dark-style .menu-vertical .menu-item:not(.active) > .menu-link:hover{
  color:#c9caff;
}

/* item ATIVO: pílula com gradiente + glow + luz interna (sinal único) */
.menu-vertical .menu-item.active > .menu-link{
  background:var(--hub-grad) !important;
  color:var(--hub-on-primary) !important;
  font-weight:600;
  box-shadow:var(--hub-glow), var(--hub-inset-light);
}
.menu-vertical .menu-item.active > .menu-link .menu-icon{ color:var(--hub-on-primary) !important; }
.dark-style .menu-vertical .menu-item.active > .menu-link{
  box-shadow:var(--hub-glow), inset 0 1px 0 rgba(255,255,255,.10);
}

/* cabeçalhos de seção — legibilidade AA (opacity elevada no light,
   cor explícita no dark p/ garantir >=4.5:1) */
.menu-header{
  text-transform:uppercase; letter-spacing:.10em;
  font-size:.68rem !important; font-weight:700; opacity:.7;
  padding:1.1rem 1rem .4rem;
}
.menu-header .menu-header-text{ font-size:.68rem; }
.dark-style .menu-header{ opacity:1; color:#b0b2d4; }

/* marca / topo */
.app-brand.demo{ padding:1.15rem 1.3rem .9rem; margin-bottom:.15rem; }
.app-brand-logo img{ border-radius:9px; box-shadow:var(--hub-shadow-xs); }
.app-brand-text{ font-size:1.14rem !important; font-weight:700; letter-spacing:-.015em; }
.layout-menu .menu-inner-shadow{ height:42px; }
.layout-menu-toggle .mdi, .layout-menu-toggle i{ opacity:.55; transition:opacity var(--hub-trans), transform var(--hub-trans), color var(--hub-trans); }
.layout-menu-toggle:hover .mdi, .layout-menu-toggle:hover i{ opacity:1; color:var(--hub-primary); transform:scale(1.1); }

/* menu COLAPSADO: só ícones, centralizados */
.layout-menu-collapsed:not(.layout-menu-hover) .menu-vertical .menu-item .menu-link{ justify-content:center; }
.layout-menu-collapsed:not(.layout-menu-hover) .menu-vertical .menu-item .menu-link .menu-icon{ margin-right:0; }
.layout-menu-collapsed:not(.layout-menu-hover) .menu-header{ text-align:center; }

/* ============================================================
   4. NAVBAR GLASSY
   ============================================================ */
.layout-navbar.navbar-detached{
  box-shadow:var(--hub-shadow);
  border:1px solid var(--hub-border);
  border-radius:var(--hub-radius);
  padding:.5rem 1.1rem;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.dark-style .layout-navbar.navbar-detached{
  background:rgba(45,46,68,.92);   /* opaca o bastante p/ não dissolver no fundo escuro */
  border-color:var(--hub-border);
}
.layout-navbar .navbar-nav-right{ gap:.2rem; }
.layout-navbar .text-heading{ font-size:1.02rem; font-weight:600; }
#hubSaudacao{ opacity:.75; }
#tituloAtual{ font-weight:600; letter-spacing:-.01em; }

/* botões-ícone (tema / idioma) — hover circular tátil */
.layout-navbar .nav-link.btn-icon,
.layout-navbar .btn-icon{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--hub-trans), color var(--hub-trans), transform var(--hub-trans);
}
.layout-navbar .btn-icon:hover{
  background:var(--hub-tint-3); color:var(--hub-primary);
  transform:translateY(-1px);
}
.layout-navbar .btn-icon:active{ transform:translateY(0) scale(.96); }
.dark-style .layout-navbar .btn-icon:hover{ color:#c9caff; }

/* pílula de saldo (#navSaldo) — mini-card verde macio (verde do texto
   escurecido p/ atingir AA sobre o tint claro no light) */
.layout-navbar .badge.bg-label-success{
  background:rgba(var(--hub-success-rgb),.14) !important;
  color:#157347 !important;
  font-size:.85rem; font-weight:700; padding:.5rem .9rem;
  border:1px solid rgba(var(--hub-success-rgb),.24);
  border-radius:var(--hub-radius-pill);
  box-shadow:var(--hub-shadow-xs), var(--hub-inset-light);
  transition:transform var(--hub-trans), box-shadow var(--hub-trans);
}
.layout-navbar a:hover > .badge.bg-label-success{
  transform:translateY(-1px);
  box-shadow:var(--hub-shadow), var(--hub-inset-light);
}
.dark-style .layout-navbar .badge.bg-label-success{
  color:#71dd9b !important;
  box-shadow:var(--hub-shadow-xs), inset 0 1px 0 rgba(255,255,255,.06);
}

/* avatar com status online — anel duplo refinado */
.layout-navbar .dropdown-user .avatar-initial{ font-weight:700; }
.layout-navbar .avatar.avatar-online::after{
  width:11px; height:11px; bottom:1px; right:1px;
  border:2px solid var(--hub-surface);
  box-shadow:0 0 0 2px rgba(var(--hub-success-rgb),.35);
}
.dark-style .layout-navbar .avatar.avatar-online::after{ border-color:var(--hub-surface); }
.dropdown-user .avatar{ transition:transform var(--hub-trans); }
.dropdown-user:hover .avatar{ transform:translateY(-1px); }

/* ============================================================
   5. ABAS DO WORKSPACE (#tabbar / .hub-tab / #frames)
   ------------------------------------------------------------
   ATENÇÃO: app.php tem um <style> inline carregado DEPOIS deste
   arquivo com regras .hub-tab — por isso os seletores aqui usam
   #tabbar (ID) para vencer por especificidade, senão sai um
   híbrido quebrado dos dois estilos.
   Design: PÍLULAS segmentadas — não dependem de "encostar" no
   conteúdo abaixo, ficam bem sobre qualquer fundo (claro/escuro).
   ============================================================ */
#tabbar{
  display:flex; align-items:center; gap:.4rem;
  padding:.55rem .65rem .5rem;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin;
}
/* barra fina no webkit p/ coerência com scrollbar-width:thin */
#tabbar::-webkit-scrollbar{ height:6px; }

#tabbar .hub-tab{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .6rem .45rem .95rem;
  font-size:.875rem; font-weight:500; white-space:nowrap;
  color:var(--bs-body-color);
  background:var(--hub-surface);
  border:1px solid var(--hub-border);
  border-radius:var(--hub-radius-pill);
  box-shadow:var(--hub-shadow-xs);
  cursor:pointer; position:static;
  transition:background var(--hub-trans), color var(--hub-trans),
             border-color var(--hub-trans), box-shadow var(--hub-trans);
}
#tabbar .hub-tab:hover{
  background:var(--hub-tint-2);
  border-color:rgba(var(--hub-primary-rgb),.35);
  color:var(--hub-primary);
}
.dark-style #tabbar .hub-tab:hover{ color:#c9caff; }

/* aba ATIVA — pílula gradiente, coesa com o item ativo do menu */
#tabbar .hub-tab.active{
  background:var(--hub-grad-soft);
  border-color:transparent;
  color:var(--hub-on-primary);
  font-weight:600;
  box-shadow:var(--hub-glow-soft);
}
#tabbar .hub-tab.active::before{ content:none; }

/* botão fechar aba */
#tabbar .hub-tab .x{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  font-size:1rem; line-height:1; opacity:.55;
  transition:background var(--hub-trans), opacity var(--hub-trans), color var(--hub-trans);
}
#tabbar .hub-tab:not(.active) .x:hover{
  background:rgba(var(--hub-danger-rgb),.16); color:#ea5455; opacity:1;
}
#tabbar .hub-tab.active .x{ color:var(--hub-on-primary); opacity:.7; }
#tabbar .hub-tab.active .x:hover{ background:rgba(255,255,255,.25); color:var(--hub-on-primary); opacity:1; }

/* frames: entrada suave da aba ativa (display é controlado pelo app.php) */
#frames iframe.active{ animation:hub-fade var(--hub-trans-slow) ease; }
@keyframes hub-fade{ from{ opacity:0; } to{ opacity:1; } }

/* loader: só refinamos o visual — display e spinner são do app.php
   (NÃO definir display aqui: #frLoader venceria o .hub-loader{display:none}
   do app e o loader ficaria sempre visível). */
.hub-loader{ backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

/* ============================================================
   6. CARDS
   ------------------------------------------------------------
   Sem !important: .border-0 e .rounded-0 do Bootstrap voltam a
   funcionar (o hub carrega depois, a especificidade basta).
   Lift só em cards clicáveis; cards de conteúdo apenas trocam
   a sombra (sem transform que desloca controles).
   ============================================================ */
.card{
  border-radius:var(--hub-radius);
  box-shadow:var(--hub-shadow);
  background:var(--hub-surface);
  transition:box-shadow var(--hub-trans-slow), transform var(--hub-trans-slow), border-color var(--hub-trans);
}
.card:not(.border-0){ border:1px solid var(--hub-border); }
.card:hover{
  box-shadow:var(--hub-shadow-md);
  border-color:var(--hub-border-strong);
}
/* lift apenas onde é clicável (link/cursor-pointer) */
a > .card:hover,
.card.cursor-pointer:hover{ transform:translateY(-2px); }
/* cards aninhados/estruturais permanecem discretos */
.card .card{ box-shadow:var(--hub-shadow-xs); }
.card .card:hover{
  box-shadow:var(--hub-shadow);
  border-color:var(--hub-border);
}
.card-header{
  border-bottom:1px solid var(--hub-border);
  padding:1.15rem 1.35rem .95rem;
  background:transparent;
}
.card-header .card-title{ font-weight:600; font-size:1.03rem; margin-bottom:0; }
.card-body{ padding:1.35rem; }
.card .card-header + .card-body{ padding-top:1.1rem; }

/* card HERO com gradiente (saldo/boas-vindas) — brilho e profundidade.
   Lift intencional (hero pequeno e clicável), não genérico. */
.card[style*="gradient"]{
  border:0;
  color:#fff;
  box-shadow:var(--hub-glow), 0 20px 46px -16px rgba(var(--hub-primary-rgb),.5);
  position:relative; overflow:hidden;
}
.card[style*="gradient"]::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.10), transparent 46%);
  pointer-events:none;
}
.card[style*="gradient"]::after{
  content:"";
  position:absolute; right:-70px; top:-90px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.13), transparent 70%);
  pointer-events:none;
}
/* chip do ícone (saldo) — vidro suave em vez de quadrado branco */
.card[style*="gradient"] .avatar-initial{
  background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.card[style*="gradient"]:hover{
  transform:translateY(-2px);
  box-shadow:var(--hub-glow), 0 26px 54px -16px rgba(var(--hub-primary-rgb),.58);
}
.card[style*="gradient"] .text-muted,
.card[style*="gradient"] .card-title{ color:rgba(255,255,255,.92) !important; }
.card[style*="gradient"] .card-header,
.card[style*="gradient"] .card-body{ position:relative; z-index:1; }

/* ============================================================
   7. STAT CARDS & AVATARES
   ============================================================ */
.card .avatar .avatar-initial{
  border-radius:var(--hub-radius-sm); font-size:1.16rem;
  box-shadow:var(--hub-inset-light);
  transition:transform var(--hub-trans);
}
.dark-style .card .avatar .avatar-initial{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.card:hover > .card-body .avatar .avatar-initial,
.card:hover > .card-header .avatar .avatar-initial{ transform:scale(1.04); }
.avatar-initial.rounded{ border-radius:var(--hub-radius-sm) !important; }
.stat{ font-weight:700; }

/* ============================================================
   8. BOTÕES
   ------------------------------------------------------------
   Repouso plano (sem halo colorido parado); o glow é resposta
   ao hover/focus, dando profundidade só na interação.
   ============================================================ */
.btn{
  border-radius:var(--hub-radius-sm); font-weight:600;
  transition:background var(--hub-trans), border-color var(--hub-trans),
             box-shadow var(--hub-trans), transform var(--hub-trans), color var(--hub-trans);
}
.btn-lg{ border-radius:var(--hub-radius-sm); padding:.7rem 1.4rem; }
.btn-sm{ border-radius:var(--hub-radius-xs); }
.btn-xs{ border-radius:var(--hub-radius-xs); }

.btn-primary{
  background:var(--hub-primary); border-color:var(--hub-primary);
  --bs-btn-color:var(--hub-on-primary); --bs-btn-hover-color:var(--hub-on-primary);
  --bs-btn-active-color:var(--hub-on-primary); color:var(--hub-on-primary);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background:var(--hub-primary-ink); border-color:var(--hub-primary-ink);
  box-shadow:var(--hub-glow); transform:translateY(-2px);
}
.btn-primary:active{ transform:translateY(0) scale(.99); box-shadow:var(--hub-glow-soft); }

.btn-hub{ background:var(--hub-primary); border-color:var(--hub-primary); color:var(--hub-on-primary); }
.btn-hub:hover{ background:var(--hub-primary-ink); color:var(--hub-on-primary); box-shadow:var(--hub-glow); transform:translateY(-2px); }

.btn-outline-primary:hover{ box-shadow:var(--hub-glow-soft); transform:translateY(-2px); }
.btn-outline-secondary:hover,
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--hub-shadow); }
.btn-light{ font-weight:600; }
.btn-success:hover{ box-shadow:0 10px 22px -8px rgba(var(--hub-success-rgb),.55); transform:translateY(-2px); }
.btn-danger:hover{ box-shadow:0 10px 22px -8px rgba(var(--hub-danger-rgb),.5); transform:translateY(-2px); }

/* botões-ícone / text genéricos (fora da navbar) */
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; transition:background var(--hub-trans), color var(--hub-trans), transform var(--hub-trans), box-shadow var(--hub-trans); }
.btn-icon:hover{ transform:translateY(-1px); }
.btn-text-secondary:hover{ background:var(--hub-tint-2); color:var(--hub-primary); }
.dark-style .btn-text-secondary:hover{ color:#c9caff; }

/* ============================================================
   9. BADGES & PILLS
   ============================================================ */
.badge{ font-weight:600; letter-spacing:.012em; border-radius:var(--hub-radius-xs); padding:.36em .6em; }
.badge.rounded-pill{ border-radius:var(--hub-radius-pill); padding-inline:.75em; }
.bg-label-primary{ box-shadow:var(--hub-inset-light); }
.dark-style .bg-label-primary{ box-shadow:none; }

/* ---- BRANDING: utilitários "primary" nativos do Sneat seguem a cor
   da revenda (--hub-primary, injetada por brandCss). Os demais primary
   já usam a var (btn-primary, nav-pills, form-check, menu ativo, abas). ---- */
.bg-primary{ background-color:var(--hub-primary) !important; }
.text-primary,.link-primary,a.text-primary{ color:var(--hub-primary) !important; }
.badge.bg-primary{ background-color:var(--hub-primary) !important; }
.bg-label-primary{ background-color:rgba(var(--hub-primary-rgb),.16) !important; color:var(--hub-primary) !important; }
.btn-outline-primary{
  --bs-btn-color:var(--hub-primary); --bs-btn-border-color:var(--hub-primary);
  --bs-btn-hover-bg:var(--hub-primary); --bs-btn-hover-border-color:var(--hub-primary);
  --bs-btn-active-bg:var(--hub-primary); --bs-btn-active-border-color:var(--hub-primary);
  color:var(--hub-primary); border-color:var(--hub-primary);
}
.page-item.active .page-link{ background-color:var(--hub-primary); border-color:var(--hub-primary); }
.progress-bar{ background-color:var(--hub-primary); }
.card-border-shadow-primary{ border-color:rgba(var(--hub-primary-rgb),.35) !important; }
.form-select:focus,.form-control:focus{ border-color:var(--hub-primary); }

/* ============================================================
   10. TABELAS
   ------------------------------------------------------------
   O arredondamento do bloco vem de .table-responsive
   (border-radius + overflow recortando o thead). O core.css usa
   border-collapse:collapse, então raio por célula seria no-op —
   por isso não há regras de canto por th/td aqui.
   ============================================================ */
.table-responsive{
  border-radius:var(--hub-radius);
  border:1px solid var(--hub-border);
  box-shadow:var(--hub-shadow-xs);
  overflow-x:auto;
  overflow-y:hidden;
}
.table-responsive .table{ margin-bottom:0; }

.table > :not(caption) > * > *{ padding:.9rem 1.05rem; }
.table thead th{
  text-transform:uppercase; font-size:.72rem; letter-spacing:.055em;
  color:var(--bs-secondary-color); font-weight:700;
  background:rgba(var(--hub-primary-rgb),.03);
  border-bottom:1px solid var(--hub-border);
}
.dark-style .table thead th{ background:rgba(var(--hub-primary-rgb),.08); }
.table-hover > tbody > tr{ transition:background var(--hub-trans); }
.table-hover > tbody > tr:hover > *{ background:var(--hub-tint); }
.dark-style .table-hover > tbody > tr:hover > *{ background:var(--hub-tint-2); }
.list-unstyled .border-bottom{ border-color:var(--hub-border) !important; }

/* ============================================================
   11. FORMS & SWITCHES
   ============================================================ */
.form-label{ font-weight:600; font-size:.82rem; letter-spacing:.005em; margin-bottom:.4rem; }
.form-control, .form-select{
  border-radius:var(--hub-radius-sm);
  border-color:var(--hub-border-strong);
  background:var(--hub-surface-2);
  transition:border-color var(--hub-trans), box-shadow var(--hub-trans), background var(--hub-trans);
}
.dark-style .form-control, .dark-style .form-select{ background:rgba(255,255,255,.02); }
.form-control:hover, .form-select:hover{ border-color:rgba(var(--hub-primary-rgb),.4); }
.form-control:focus, .form-select:focus{
  border-color:var(--hub-primary);
  background:var(--hub-surface);
  box-shadow:0 0 0 3px rgba(var(--hub-primary-rgb),.14);
}
.dark-style .form-control:focus, .dark-style .form-select:focus{
  background:rgba(255,255,255,.03);
  box-shadow:0 0 0 3px rgba(var(--hub-primary-rgb),.28);
}
/* placeholder legível (não usar como rótulo único) */
.form-control::placeholder{ opacity:.75; }

/* input-group merge (ícones) — reage a foco do campo */
.input-group-merge .input-group-text{
  border-color:var(--hub-border-strong);
  background:var(--hub-surface-2);
}
.dark-style .input-group-merge .input-group-text{ background:rgba(255,255,255,.02); }
.input-group:focus-within .input-group-text{ border-color:var(--hub-primary); color:var(--hub-primary); }

/* switches */
.form-switch .form-check-input{
  width:2.4em; height:1.3em; cursor:pointer;
  transition:background-color var(--hub-trans), border-color var(--hub-trans), box-shadow var(--hub-trans);
}
/* brilho simétrico e discreto, colado ao controle (sem poça deslocada) */
.form-check-input:checked{
  background-color:var(--hub-primary); border-color:var(--hub-primary);
  box-shadow:0 0 0 1px rgba(var(--hub-primary-rgb),.35), 0 2px 6px -2px rgba(var(--hub-primary-rgb),.4);
}
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(var(--hub-primary-rgb),.16); border-color:var(--hub-primary); }

/* ============================================================
   12. MODAIS · DROPDOWNS · ACCORDION
   ------------------------------------------------------------
   .modal-content SEM overflow:hidden — dropdowns/selects/tooltips
   e o anel de foco não podem ser recortados. Cantos arredondados
   só no header/footer.
   ============================================================ */
.modal-content{
  border:1px solid var(--hub-border);
  border-radius:var(--hub-radius-lg);
  box-shadow:var(--hub-shadow-lg);
  background:var(--hub-surface);
}
.modal-header{
  border-bottom:1px solid var(--hub-border); padding:1.25rem 1.5rem;
  border-top-left-radius:var(--hub-radius-lg);
  border-top-right-radius:var(--hub-radius-lg);
}
.modal-footer{
  border-top:1px solid var(--hub-border); padding:1.1rem 1.5rem;
  border-bottom-left-radius:var(--hub-radius-lg);
  border-bottom-right-radius:var(--hub-radius-lg);
}
.modal-body{ padding:1.5rem; }
.modal-title{ font-weight:700; letter-spacing:-.01em; }
.modal-backdrop.show{
  background:rgba(24,27,45,.42);
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  opacity:1 !important;
}
.dark-style .modal-backdrop.show{ background:rgba(0,0,0,.6); }

.dropdown-menu{
  border:1px solid var(--hub-border);
  box-shadow:var(--hub-shadow-md);
  border-radius:var(--hub-radius);
  padding:.4rem;
  background:var(--hub-surface);
}
.dropdown-item{
  border-radius:var(--hub-radius-sm);
  padding:.5rem .75rem;
  transition:background var(--hub-trans), color var(--hub-trans), transform var(--hub-trans);
}
/* fundo em todos os itens; a cor primária SÓ em itens neutros
   (preserva o significado de .text-danger/.text-success/.text-warning) */
.dropdown-item:hover,.dropdown-item:focus{ background:var(--hub-tint-2); }
.dropdown-item:not(.text-danger):not(.text-success):not(.text-warning):hover,
.dropdown-item:not(.text-danger):not(.text-success):not(.text-warning):focus{ color:var(--hub-primary); }
.dark-style .dropdown-item:not(.text-danger):not(.text-success):not(.text-warning):hover,
.dark-style .dropdown-item:not(.text-danger):not(.text-success):not(.text-warning):focus{ color:#c9caff; }
.dropdown-item-text{ padding-inline:.75rem; }
.dropdown-divider{ border-color:var(--hub-border); opacity:1; margin:.4rem 0; }

/* accordion (#apiAcc) — SEM overflow:hidden (não recorta anel de
   foco); cantos arredondados via border-radius do próprio botão. */
.accordion-item{
  border:1px solid var(--hub-border) !important;
  border-radius:var(--hub-radius) !important;
  margin-bottom:.6rem;
  background:var(--hub-surface);
  box-shadow:var(--hub-shadow-xs);
}
.accordion-button{
  font-weight:600; border-radius:var(--hub-radius) !important;
  padding:1rem 1.25rem;
  background:var(--hub-surface);
  transition:background var(--hub-trans), color var(--hub-trans), box-shadow var(--hub-trans);
}
/* aberto: arredonda só o topo p/ casar com o corpo abaixo */
.accordion-button:not(.collapsed){
  border-radius:var(--hub-radius) var(--hub-radius) 0 0 !important;
  background:rgba(var(--hub-primary-rgb),.07);
  color:var(--hub-primary);
  box-shadow:inset 0 -1px 0 var(--hub-border);
}
.dark-style .accordion-button:not(.collapsed){ background:var(--hub-tint-2); color:#c9caff; }
.accordion-body{ padding:1.1rem 1.25rem 1.25rem; }

/* ============================================================
   13. NAV-PILLS & ALERTS
   ============================================================ */
.nav-pills .nav-link{
  border-radius:var(--hub-radius-sm); font-weight:600;
  transition:background var(--hub-trans), color var(--hub-trans), box-shadow var(--hub-trans);
}
.nav-pills .nav-link:not(.active):hover{
  background:var(--hub-tint-2); color:var(--hub-primary);
}
.nav-pills .nav-link.active{
  background:var(--hub-grad-soft);
  color:var(--hub-on-primary) !important;
  box-shadow:var(--hub-glow-soft), var(--hub-inset-light);
}
.dark-style .nav-pills .nav-link.active{ box-shadow:var(--hub-glow-soft), inset 0 1px 0 rgba(255,255,255,.08); }

.alert{ border-radius:var(--hub-radius); border:1px solid transparent; box-shadow:var(--hub-shadow-xs); }
.alert-success{ border-color:rgba(var(--hub-success-rgb),.25); }
.alert-danger{ border-color:rgba(var(--hub-danger-rgb),.28); }

/* ============================================================
   14. LOGIN
   ============================================================ */
.auth-card{
  border-radius:var(--hub-radius-xl);
  box-shadow:var(--hub-shadow-lg);
  border:1px solid var(--hub-border);
  overflow:hidden;
  background:var(--hub-surface);
}
.auth-brand{
  background:linear-gradient(140deg, var(--hub-primary), var(--hub-primary-2) 48%, var(--hub-primary-3));
  color:#fff;
  position:relative; overflow:hidden;
}
.auth-brand::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(50% 40% at 12% 8%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(46% 44% at 100% 100%, rgba(var(--hub-info-rgb),.30), transparent 62%);
  pointer-events:none;
}
.auth-brand > *{ position:relative; z-index:1; }

/* chips de canal */
.chan-grid{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chan{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; border-radius:var(--hub-radius-pill);
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:.82rem; font-weight:600;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:var(--hub-inset-light);
  transition:transform var(--hub-trans), background var(--hub-trans);
}
.chan:hover{ transform:translateY(-2px); background:rgba(255,255,255,.22); }

/* feature list */
.feat{
  display:flex; align-items:flex-start; gap:.6rem;
  color:rgba(255,255,255,.92); font-size:.9rem;
  margin-bottom:.7rem;
  transition:transform var(--hub-trans);
}
.feat:hover{ transform:translateX(2px); }
.feat i,.feat .bi{ color:#fff; opacity:.9; margin-top:.1rem; }

.auth-form{ padding:2.4rem 2.2rem; background:var(--hub-surface); }
.auth-form .form-control{ padding:.6rem .85rem; }

/* ============================================================
   15. SCROLLBAR
   ============================================================ */
*{ scrollbar-width:thin; scrollbar-color:rgba(var(--hub-primary-rgb),.3) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:rgba(var(--hub-primary-rgb),.24);
  border-radius:var(--hub-radius-pill);
  border:2px solid transparent; background-clip:padding-box;
}
*::-webkit-scrollbar-thumb:hover{ background:rgba(var(--hub-primary-rgb),.42); background-clip:padding-box; }
*::-webkit-scrollbar-track{ background:transparent; }
.dark-style *{ scrollbar-color:rgba(var(--hub-primary-rgb),.42) transparent; }
.dark-style *::-webkit-scrollbar-thumb{ background:rgba(var(--hub-primary-rgb),.36); background-clip:padding-box; }
.dark-style *::-webkit-scrollbar-thumb:hover{ background:rgba(var(--hub-primary-rgb),.5); background-clip:padding-box; }

/* ============================================================
   16. APEXCHARTS
   ============================================================ */
.apexcharts-canvas{ margin:0 auto; }
.apexcharts-tooltip{
  border:1px solid var(--hub-border) !important;
  box-shadow:var(--hub-shadow-md) !important;
  border-radius:var(--hub-radius-sm) !important;
  background:var(--hub-surface) !important;
}
.apexcharts-gridline{ opacity:.55; }
.dark-style .apexcharts-tooltip{ background:var(--hub-surface-2) !important; color:#e7e8f5; }

/* ============================================================
   17. FOCO ACESSÍVEL + REDUCED MOTION
   ------------------------------------------------------------
   Estratégia: OUTLINE real (sobrevive a overflow:hidden de
   #tabbar/.table-responsive/.accordion-item/.modal-content E ao
   forced-colors) + box-shadow como reforço de brilho. SEM
   border-radius no foco (não deforma círculos nem retângulos).
   ============================================================ */
:focus-visible{
  outline:2px solid var(--hub-primary);
  outline-offset:2px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.hub-tab:focus-visible,
.hub-tab .x:focus-visible,
.menu-link:focus-visible,
.accordion-button:focus-visible,
.page-link:focus-visible{
  outline:2px solid var(--hub-primary);
  outline-offset:2px;
  box-shadow:0 0 0 4px rgba(var(--hub-primary-rgb),.18);
}
/* superfícies coloridas: halo BRANCO p/ contraste sobre o gradiente
   (outline primário permanece visível na borda p/ page-bg claro) */
.btn-primary:focus-visible,
.btn-hub:focus-visible,
.menu-item.active > .menu-link:focus-visible,
.nav-pills .nav-link.active:focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.85), var(--hub-glow);
}
.dark-style :focus-visible{ outline-color:#a5a7ff; }
.dark-style .btn-primary:focus-visible,
.dark-style .btn-hub:focus-visible,
.dark-style .menu-item.active > .menu-link:focus-visible,
.dark-style .nav-pills .nav-link.active:focus-visible{
  box-shadow:0 0 0 3px rgba(255,255,255,.85), var(--hub-glow);
}
/* Alto Contraste do Windows / forced-colors: box-shadow não é
   pintado — garante anel do sistema visível */
@media (forced-colors:active){
  :focus-visible{ outline:2px solid Highlight !important; outline-offset:2px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .card[style*="gradient"]:hover,
  a > .card:hover,
  .card.cursor-pointer:hover,
  .btn:hover,
  .btn:active,
  .btn-primary:focus-visible,
  .chan:hover,
  .feat:hover,
  .hub-tab:hover,
  .card:hover .avatar .avatar-initial,
  .menu-vertical .menu-item:not(.active) > .menu-link:hover,
  .menu-vertical .menu-item:not(.active) > .menu-link:hover .menu-icon,
  .layout-navbar .btn-icon:hover,
  .layout-navbar a:hover > .badge.bg-label-success,
  .dropdown-user:hover .avatar{
    transform:none !important;
  }
}