/* ══════════════════════════════════════════════════════════════
   SIDEBAR THEME v16 — paleta dinâmica COMPLETA na barra lateral
   ═══════════════════════════════════════════════════════════
   Quando o utilizador escolhe um tema em Configurações → Aparência,
   o FUNDO da barra lateral (não só os ícones/letras) passa a usar
   a cor do tema. Cada tema define os 3 tons do gradiente da barra
   (--sb-bg2 = topo escuro · --sb-bg = corpo · --sb-bg3 = base).

   A sidebar (app.css linha ~502) usa:
     background: linear-gradient(--sb-bg2 0%, --sb-bg 40%, --sb-bg3 100%)
   Aqui sobrepomos esses 3 tons por tema.
   ════════════════════════════════════════════════════════════ */

/* ── CIANO ── */
body.theme-ciano {
  --sb-bg:#0a3a4a; --sb-bg2:#062835; --sb-bg3:#0c6d8a;
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(207,250,254,.6);
  --sb-brd:rgba(103,232,249,.16); --sb-hover:rgba(103,232,249,.12);
  --sb-glow:rgba(103,232,249,.06);
}
/* ── INDIGO ── */
body.theme-indigo {
  --sb-bg:#1e1b4b; --sb-bg2:#15123a; --sb-bg3:#2d2875;
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(224,231,255,.6);
  --sb-brd:rgba(165,180,252,.16); --sb-hover:rgba(165,180,252,.12);
  --sb-glow:rgba(165,180,252,.06);
}
/* ── ESMERALDA ── */
body.theme-esmeralda {
  --sb-bg:#064e3b; --sb-bg2:#04352a; --sb-bg3:#0a6b51;
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(167,243,208,.6);
  --sb-brd:rgba(110,231,183,.16); --sb-hover:rgba(110,231,183,.12);
  --sb-glow:rgba(110,231,183,.06);
}
/* ── ÂMBAR ── */
body.theme-ambar {
  --sb-bg:#451a03; --sb-bg2:#2e1102; --sb-bg3:#6a2a05;
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(253,230,138,.6);
  --sb-brd:rgba(253,230,138,.16); --sb-hover:rgba(253,230,138,.12);
  --sb-glow:rgba(253,230,138,.06);
}
/* ── RUBI ── */
body.theme-rubi {
  --sb-bg:#4c0519; --sb-bg2:#350310; --sb-bg3:#7a0a28;
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(254,205,211,.6);
  --sb-brd:rgba(253,164,175,.16); --sb-hover:rgba(253,164,175,.12);
  --sb-glow:rgba(253,164,175,.06);
}
/* ── VIOLETA ── */
body.theme-violeta {
  --sb-bg:#2e1065; --sb-bg2:#1f0a47; --sb-bg3:#4a1d96;
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(237,233,254,.6);
  --sb-brd:rgba(196,181,253,.16); --sb-hover:rgba(196,181,253,.12);
  --sb-glow:rgba(196,181,253,.06);
}
/* ── ARDÓSIA ── */
body.theme-ardosia {
  --sb-bg:#042f2e; --sb-bg2:#021e1d; --sb-bg3:#084845;
  --sb-tx:rgba(255,255,255,.95); --sb-mt:rgba(153,246,228,.6);
  --sb-brd:rgba(94,234,212,.16); --sb-hover:rgba(94,234,212,.12);
  --sb-glow:rgba(94,234,212,.06);
}

/* ══════════════════════════════════════════════════════════════
   ESTILO "COLOR" — barra na cor PRIMÁRIA viva (escolha em Aparência)
   Sobrepõe qualquer tema: barra sólida na cor primária do tema.
   ══════════════════════════════════════════════════════════════ */
body.sidebar-color .sidebar {
  background: linear-gradient(160deg,
    var(--primary-dk) 0%,
    var(--primary) 55%,
    var(--primary-mid, var(--primary)) 100%) !important;
}
body.sidebar-color .sidebar-header { background: var(--primary-dk) !important; }
body.sidebar-color .nav-item svg { color: rgba(255,255,255,.9) !important; }
body.sidebar-color .nav-item.active {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important; font-weight: 700;
}
body.sidebar-color .nav-item.active svg { color: #fff !important; }
body.sidebar-color .sidebar-brand-name,
body.sidebar-color .sidebar-brand-sub { color: #fff !important; }

/* ══════════════════════════════════════════════════════════════
   ESTILO "LIGHT" — barra clara (já definido em app.css), reforço
   ══════════════════════════════════════════════════════════════ */
body.sidebar-light .nav-item svg { color:#4b6584 !important; }
body.sidebar-light .nav-item.active svg,
body.sidebar-light .nav-item:hover svg { color:var(--primary) !important; }
body.sidebar-light .nav-item.active {
  background: rgba(21,86,158,.10) !important;
  color: var(--primary-dk) !important; font-weight:600;
}
body.sidebar-light .sidebar-brand-name { color: var(--primary-dk) !important; }

/* ── Estado ativo nos temas escuros: usa a cor de acento do tema ── */
body[class*="theme-"] .nav-item.active svg,
body[class*="theme-"] .nav-item:hover svg { color: var(--sb-actx, #fff) !important; }
body[class*="theme-"] .nav-item.active {
  background: var(--sb-active, rgba(255,255,255,.18)) !important;
  color: #fff !important; font-weight: 700;
}

/* ── Transição suave ao trocar de tema ── */
.sidebar, .sidebar .nav-item, .sidebar .nav-item svg {
  transition: background .3s ease, color .3s ease;
}