/* ============================================================
   Sidebar padrao Rede One no CRM — Carlos, 02/09/2026
   Padroniza logo, subtitulo e largura pelo modulo Gestao de
   Condominios (/sonia/condominios, css/gestao.css) e
   adiciona o recolhimento com tooltip.
   ============================================================ */

/* largura da coluna = mesma do modulo de condominios */
#screen-app{grid-template-columns:288px 1fr}
@media(min-width:1600px){ #screen-app{grid-template-columns:320px 1fr} }

.sidebar{padding:26px 16px 22px;gap:10px;transition:padding .18s ease}

/* ---- marca: logo grande centrada + rotulo do app (igual condominios) ---- */
.sb-brand{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:6px 6px 20px;border-bottom:1px solid var(--line);
  margin-bottom:16px;text-align:center;position:relative;
}
.sb-brand .one-logo{
  width:196px;max-width:100%;height:auto;
  -webkit-transform:translateZ(0);transform:translateZ(0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
/* so uma logo por tema (a regra de largura acima nao pode reativar a outra) */
.sb-brand .one-logo.on-light{display:block}
.sb-brand .one-logo.on-dark{display:none}
[data-theme=dark] .sb-brand .one-logo.on-light{display:none}
[data-theme=dark] .sb-brand .one-logo.on-dark{display:block}
.sb-app{
  font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-2);line-height:1.35;
}
/* especificidade acima de '.sb-brand img' do identidade-one.css */
.sb-brand img.sb-brand-icone{width:38px;height:38px;display:none;border-radius:9px;object-fit:contain}
.sb-sep{display:none}

/* menu com a mesma proporcao do modulo de condominios */
.sidebar .nav-item{font-size:14.5px;padding:11px 12px;margin-bottom:2px}
.sidebar .nav-item .ic{font-size:16px;width:22px}

@media(min-width:1600px){
  .sb-brand .one-logo{width:224px}
  .sidebar .nav-item{font-size:15.5px;padding:12px 13px}
}

/* ---- botao de recolher ---- */
.sb-toggle{
  position:absolute;top:-8px;right:-6px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--ink-3);font-size:13px;line-height:1;cursor:pointer;padding:0;
  transition:.14s;
}
.sb-toggle:hover{border-color:var(--brand);color:var(--brand)}

/* ---- estado recolhido ---- */
#screen-app.sb-collapsed{grid-template-columns:78px 1fr}
@media(min-width:1600px){ #screen-app.sb-collapsed{grid-template-columns:82px 1fr} }
.sb-collapsed .sidebar{padding:22px 8px 18px;overflow:visible}
.sb-collapsed .sb-brand{padding:2px 0 14px;gap:8px}
.sb-collapsed .sb-brand .one-logo,
.sb-collapsed .sb-brand .one-logo.on-light,
.sb-collapsed .sb-brand .one-logo.on-dark{display:none}
[data-theme=dark] .sb-collapsed .sb-brand .one-logo.on-dark{display:none}
.sb-collapsed .sb-brand img.sb-brand-icone{display:block}
.sb-collapsed .sb-app{display:none}
.sb-collapsed .sb-toggle{position:static;margin-top:4px}
.sb-collapsed .nav-item{justify-content:center;padding:11px 0;position:relative}
.sb-collapsed .nav-item .ic{width:auto;font-size:18px;opacity:1}
.sb-collapsed .nav-lbl{display:none}
.sb-collapsed .sb-boss{display:none}
.sb-collapsed .nav-item .nav-lock{
  position:absolute;top:3px;right:9px;margin-left:0;font-size:9px;opacity:.95;
}
.sb-collapsed .nav-item .nav-lock .nl-tag{display:none}

/* tooltip do menu recolhido (fica no body pra nao ser cortado) */
#sb-tip{
  position:fixed;z-index:200;pointer-events:none;
  background:var(--ink);color:#fff;font-size:12px;font-weight:600;
  padding:7px 11px;border-radius:9px;white-space:nowrap;
  box-shadow:0 8px 22px rgba(10,12,18,.28);
  opacity:0;transform:translateY(-50%) translateX(-4px);transition:opacity .12s ease,transform .12s ease;
}
#sb-tip.show{opacity:1;transform:translateY(-50%) translateX(0)}
[data-theme=dark] #sb-tip{background:#f2f2f4;color:#16161a}
#sb-tip .tip-plano{
  margin-left:7px;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  opacity:.85;
}

/* mobile: drawer mantem o comportamento do CRM, sem recolher
   (breakpoint 860 = o mesmo do v2.css, onde a sidebar vira drawer) */
@media(max-width:860px){
  #screen-app,#screen-app.sb-collapsed{grid-template-columns:1fr}
  .sb-brand .one-logo{width:172px}
  .sb-toggle{display:none}
  .sb-collapsed .sidebar{padding:26px 16px 22px}
  .sb-collapsed .nav-item{justify-content:flex-start;padding:11px 12px}
  .sb-collapsed .nav-lbl{display:inline}
  .sb-collapsed .sb-brand .one-logo.on-light{display:block}
  [data-theme=dark] .sb-collapsed .sb-brand .one-logo.on-dark{display:block}
  .sb-collapsed .sb-brand img.sb-brand-icone{display:none}
  .sb-collapsed .sb-app{display:block}
  .sb-collapsed .sb-boss{display:block}
  .sb-collapsed .nav-item .nav-lock{position:static;margin-left:auto;font-size:11px}
  .sb-collapsed .nav-item .nav-lock .nl-tag{display:inline-block}
}