/* ============================================================
   Hub de APIs — camada de tema premium (refina o Sneat por cima)
   Apenas visual. Não altera marcação crítica, IDs ou JS.
   ============================================================ */

:root{
  --hub-primary:#696cff;
  --hub-primary-2:#7a6cff;
  --hub-primary-3:#8b5cf6;
  --hub-radius:14px;
  --hub-radius-sm:10px;
  --hub-radius-lg:18px;
  --hub-border:#eef0f6;
  --hub-bg:#f6f7fb;
  --hub-shadow:0 1px 2px rgba(31,42,68,.04), 0 2px 8px rgba(31,42,68,.06);
  --hub-shadow-md:0 6px 18px rgba(31,42,68,.08);
  --hub-shadow-lg:0 12px 32px rgba(31,42,68,.12);
  --hub-trans:.2s ease;
}
.dark-style{
  --hub-border:#2b2c40;
  --hub-bg:#232333;
  --hub-shadow:0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.22);
  --hub-shadow-md:0 6px 18px rgba(0,0,0,.30);
  --hub-shadow-lg:0 12px 32px rgba(0,0,0,.38);
}

body{ background:var(--hub-bg); }

/* ---------- Tipografia / hierarquia ---------- */
h1,h2,h3,h4,h5,h6,.card-title{ letter-spacing:-.01em; }
.text-muted{ opacity:.92; }

/* ============================================================
   MENU LATERAL
   ============================================================ */
.menu-vertical .menu-inner{ padding:.35rem .7rem 1rem; }
.menu-vertical .menu-item{ margin:.12rem 0; }
.menu-vertical .menu-item .menu-link{
  border-radius:var(--hub-radius-sm);
  padding:.62rem .8rem;
  font-weight:500;
  font-size:.95rem;
  transition:background var(--hub-trans), color var(--hub-trans), box-shadow var(--hub-trans);
}
.menu-vertical .menu-item .menu-link .menu-icon{
  font-size:1.2rem; margin-right:.55rem; transition:var(--hub-trans);
}
.menu-vertical .menu-item:not(.active) .menu-link:hover{
  background:rgba(105,108,255,.09);
  color:var(--hub-primary);
}
.menu-vertical .menu-item:not(.active) .menu-link:hover .menu-icon{ color:var(--hub-primary); }
/* item ativo: pílula com gradiente + glow */
.menu-vertical .menu-item.active > .menu-link{
  background:linear-gradient(90deg, var(--hub-primary), var(--hub-primary-2)) !important;
  color:#fff !important;
  box-shadow:0 6px 16px rgba(105,108,255,.38);
}
.menu-vertical .menu-item.active > .menu-link .menu-icon{ color:#fff !important; }
.dark-style .menu-vertical .menu-item:not(.active) .menu-link:hover{ background:rgba(105,108,255,.18); }

/* cabeçalhos de seção (Painel / Administração) */
.menu-header{
  text-transform:uppercase; letter-spacing:.09em;
  font-size:.68rem !important; font-weight:600; opacity:.5;
  padding:1rem 1rem .35rem;
}
.menu-header .menu-header-text{ font-size:.68rem; }

/* marca / topo do menu */
.app-brand.demo{ padding:1.1rem 1.25rem .9rem; margin-bottom:.2rem; }
.app-brand-logo img{ border-radius:8px; }
.app-brand-text{ font-size:1.12rem !important; letter-spacing:-.01em; }
.layout-menu .menu-inner-shadow{ height:38px; }
.layout-menu-toggle .mdi, .layout-menu-toggle i{ opacity:.6; transition:var(--hub-trans); }
.layout-menu-toggle:hover .mdi, .layout-menu-toggle:hover i{ opacity:1; }

/* menu colapsado: só ícones, centralizados e bonitos */
.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; }

/* ============================================================
   TOPBAR / NAVBAR
   ============================================================ */
.layout-navbar.navbar-detached{
  box-shadow:var(--hub-shadow);
  border:1px solid var(--hub-border);
  border-radius:var(--hub-radius);
  padding:.45rem 1.1rem;
  backdrop-filter:saturate(1.1);
}
.layout-navbar .navbar-nav-right{ gap:.15rem; }
.layout-navbar .text-heading{ font-size:1.02rem; }
/* botão de tema com hover circular */
.layout-navbar .btn-icon{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:var(--hub-trans);
}
.layout-navbar .btn-icon:hover{ background:rgba(105,108,255,.12); color:var(--hub-primary); }
/* badge de saldo: vira mini-card */
.layout-navbar .badge.bg-label-success{
  background:rgba(40,199,111,.14) !important; color:#1f9d63 !important;
  font-size:.85rem; font-weight:600; padding:.5rem .85rem; border:1px solid rgba(40,199,111,.22);
  border-radius:30px;
}
.dark-style .layout-navbar .badge.bg-label-success{ color:#71dd9b !important; }
/* avatar com status online refinado */
.layout-navbar .avatar.avatar-online:after{
  width:11px; height:11px; bottom:0; right:0; border:2px solid var(--bs-card-bg,#fff);
  box-shadow:0 0 0 1px rgba(40,199,111,.4);
}
.layout-navbar .avatar-initial{ font-weight:600; }
.dropdown-menu{ border:1px solid var(--hub-border); box-shadow:var(--hub-shadow-md); border-radius:var(--hub-radius); }

/* ============================================================
   CARDS
   ============================================================ */
.card{
  border:1px solid var(--hub-border) !important;
  border-radius:var(--hub-radius) !important;
  box-shadow:var(--hub-shadow);
  transition:box-shadow var(--hub-trans), transform var(--hub-trans), border-color var(--hub-trans);
}
.card:hover{ box-shadow:var(--hub-shadow-md); }
.card-header{ border-bottom:1px solid var(--hub-border); padding:1.1rem 1.25rem .9rem; background:transparent; }
.card-header .card-title{ font-weight:600; font-size:1.02rem; }
.card-body{ padding:1.25rem; }

/* cards de métrica (stat) — efeito de elevação no hover */
.card .avatar .avatar-initial{ border-radius:12px; font-size:1.15rem; }
.stat{ letter-spacing:-.02em; }

/* card "hero" com gradiente (saldo, boas-vindas) ganha mais polimento */
.card[style*="gradient"]{
  border:0 !important;
  box-shadow:0 12px 30px rgba(105,108,255,.28) !important;
  position:relative; overflow:hidden;
}
.card[style*="gradient"]::after{
  content:""; position:absolute; right:-40px; top:-60px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.12);
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{ border-radius:var(--hub-radius-sm); font-weight:500; transition:var(--hub-trans); }
.btn-lg{ border-radius:12px; }
.btn-sm{ border-radius:8px; }
.btn-primary{ background:var(--hub-primary); border-color:var(--hub-primary); }
.btn-primary:hover{ background:#5f61e6; border-color:#5f61e6; box-shadow:0 8px 18px rgba(105,108,255,.35); transform:translateY(-1px); }
.btn-hub{ background:var(--hub-primary); border-color:var(--hub-primary); color:#fff; }
.btn-hub:hover{ background:#5f61e6; color:#fff; box-shadow:0 8px 18px rgba(105,108,255,.35); transform:translateY(-1px); }
.btn-light{ font-weight:600; }
.btn-outline-secondary:hover{ transform:translateY(-1px); }

/* ============================================================
   BADGES / TABELAS / DEMAIS
   ============================================================ */
.badge{ font-weight:600; letter-spacing:.01em; border-radius:7px; }
.table > :not(caption) > * > *{ padding:.85rem 1rem; }
.table thead th{ text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; color:var(--bs-secondary-color); font-weight:600; }
.table-hover > tbody > tr:hover > *{ background:rgba(105,108,255,.04); }
.list-unstyled .border-bottom{ border-color:var(--hub-border) !important; }
.form-control, .form-select{ border-radius:var(--hub-radius-sm); border-color:var(--hub-border); transition:var(--hub-trans); }
.form-control:focus, .form-select:focus{ border-color:var(--hub-primary); box-shadow:0 0 0 3px rgba(105,108,255,.12); }

/* scrollbar discreta */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:rgba(105,108,255,.22); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(105,108,255,.4); }
*::-webkit-scrollbar-track{ background:transparent; }

/* apex charts: respiro interno + grid suave */
.apexcharts-canvas{ margin:0 auto; }

/* dark mode: ajustes finos */
.dark-style .card-header{ border-color:var(--hub-border); }
.dark-style .table-hover > tbody > tr:hover > *{ background:rgba(105,108,255,.10); }