/* =========================================================
   Menu lateral — Melivu
   Meta: marca + 13 itens em 3 seções + rodapé cabem em 900px
   de altura sem nenhuma barra de rolagem (nem vertical nem
   horizontal). Este arquivo carrega depois de styles.css e
   theme.css, então ele é a fonte final da verdade do menu.
   ========================================================= */

/* as medidas ficam no <html> porque a .main-col também precisa enxergá-las */
html{--sidebar-w:256px;--sidebar-w-collapsed:76px}
/* a coluna de conteúdo lê a mesma medida da barra: mudar a largura num lugar só */
.main-col{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w))}

.sidebar{
  width:var(--sidebar-w);
  padding:15px 12px 12px;
  gap:0;
  overflow:visible;
  border-right:1px solid var(--line);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--green-tint) 90%,var(--white)),var(--white) 230px),
    var(--white);
}
[data-theme="dark"] .sidebar{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--green-bright) 7%,transparent),transparent 230px),
    #0c1f1c;
}

.sidebar>*{position:relative;z-index:1}
html.sidebar-ready.sidebar-animating .sidebar{transition:width .32s cubic-bezier(.2,.8,.2,1),padding .32s cubic-bezier(.2,.8,.2,1)}
html.sidebar-ready.sidebar-animating .main-col{transition:margin-left .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1)}

/* ---------- marca ---------- */
.sidebar .brand{font:700 18px var(--font-display);display:flex;align-items:center;gap:9px;padding:1px 6px 11px;min-width:0;cursor:default;flex:none}
.sidebar .brand>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sidebar .brand-mark{width:32px;height:32px;border-radius:10px;font-size:16px}

/* ---------- lista: sem rolagem visível, sem estouro lateral ---------- */
.sidebar nav{
  /* folga lateral: o ímã e o deslize do hover movem o item até 5px pra direita.
     Sem essa folga o canto arredondado do item era cortado pelo overflow-x. */
  --nav-slack:6px;
  position:relative;
  flex:1 1 auto;
  min-height:0;
  margin:0 calc(var(--nav-slack) * -1);
  padding:16px var(--nav-slack) 6px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9px,#000 calc(100% - 11px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9px,#000 calc(100% - 11px),transparent 100%);
}
.sidebar nav::-webkit-scrollbar{width:0;height:0;display:none}

/* ---------- item ativo ----------
   Sem pílula, sem fundo e sem sombra: o item ativo só troca a cor do ícone. O theme.js ainda cria o
   .nav-indicator; ele fica escondido aqui. */
.nav-indicator{display:none}
/* logo sem sombra verde e sem girar no hover */
.sidebar .brand-mark,.sidebar .brand:hover .brand-mark{box-shadow:none;transform:none}

/* ---------- itens ---------- */
.nav-item{
  display:flex;align-items:center;width:100%;min-width:0;gap:10px;
  margin:0;padding:9px 11px;
  border:0;border-radius:var(--radius-md);
  background:transparent;color:#5c6862;
  font:600 12.5px var(--font-body);
  cursor:pointer;position:relative;flex:none;
  transition:background .15s,color .15s;
}
.nav-item svg{width:17px;height:17px;flex:none;opacity:.85;transition:opacity .2s,color .2s}
.nav-label{flex:1 1 auto;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item .badge{flex:none;margin-left:6px}

.nav-item:hover{background:color-mix(in srgb,var(--green-tint) 70%,transparent);color:var(--ink);transform:none}
.nav-item:hover svg{opacity:1;color:var(--green)}
.nav-item:focus-visible{outline:2px solid var(--green);outline-offset:-2px}

.nav-item.active,.nav-item.active:hover{background:transparent;color:var(--ink);font-weight:700;box-shadow:none}
.nav-item.active svg{opacity:1;color:var(--green);filter:none}
[data-theme="dark"] .nav-item.active,[data-theme="dark"] .nav-item.active:hover{background:transparent;color:#fff}
[data-theme="dark"] .nav-item.active svg{color:var(--green-bright)}

/* ---------- botão de recolher, na borda direita ---------- */
.sidebar-collapse{position:absolute;right:-13px;top:22px;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--muted);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:7;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1),color .2s,border-color .2s,box-shadow .2s}
.sidebar:hover .sidebar-collapse,.sidebar-collapse:focus-visible,html.sidebar-collapsed .sidebar-collapse{opacity:1;transform:none}
.sidebar-collapse:hover{color:var(--green-dark);border-color:var(--green);box-shadow:var(--shadow-brand);transform:scale(1.12)}
.sidebar-collapse:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.sidebar-collapse svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
html.sidebar-collapsed .sidebar-collapse svg{transform:rotate(180deg)}
[data-theme="dark"] .sidebar-collapse{background:#0f2421;border-color:var(--line);color:var(--muted)}
[data-theme="dark"] .sidebar-collapse:hover{color:var(--green-bright);border-color:color-mix(in srgb,var(--green-bright) 50%,transparent)}

/* ---------- rodapé: bloco próprio, separado da lista ---------- */
.sidebar-footer{
  position:relative;flex:none;
  margin:6px -2px 0;padding:9px 2px 0;
  display:flex;flex-direction:column;gap:7px;
  border-top:1px solid var(--line);
}
.sidebar-footer::before{content:'';position:absolute;left:2px;right:2px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--green) 45%,transparent),transparent);opacity:.7}

.sidebar-footer .company-switch{padding:7px 8px;gap:9px;min-width:0;border-radius:var(--radius-md);border:1px solid var(--line);background:color-mix(in srgb,var(--green-tint) 75%,var(--white));transition:border-color .2s}
.sidebar-footer .company-switch>span:not(.company-logo):not(.chevron){flex:1 1 auto;min-width:0}
.sidebar-footer .company-switch small{display:block;font:700 9px var(--font-body);letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);margin-bottom:2px}
.sidebar-footer .company-switch strong{display:block;font:700 12.5px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-footer .company-logo{width:29px;height:29px;border-radius:9px;font-size:10.5px}
.sidebar-footer .company-switch:hover{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.sidebar-footer .company-switch:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.company-switch .chevron{transition:transform .2s}
.company-switch[aria-expanded="true"] .chevron{transform:rotate(180deg)}
[data-theme="dark"] .sidebar-footer .company-switch{background:rgba(255,255,255,.05);border-color:var(--line)}

.sidebar-footer .company-menu{left:0;right:0;bottom:calc(100% + 8px);width:auto}
/* o gatilho joga o foco no primeiro item ao abrir: sem isso o navegador desenha o contorno preto padrão */
.sidebar-footer .company-menu button:focus-visible{outline:2px solid var(--green);outline-offset:-2px;background:var(--green-tint)}
.sidebar-footer .company-menu button{transition:background .16s}

.sidebar-logout{width:100%;display:flex;align-items:center;gap:9px;margin:0;padding:6px 8px;border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--muted);cursor:pointer;text-align:left;font:500 12px var(--font-body);position:relative;overflow:hidden;min-width:0;transition:background .2s,color .2s,border-color .2s}
.sidebar-logout .nav-label{display:flex;flex-direction:column;gap:0;min-width:0;flex:1 1 auto}
.sidebar-logout strong{font:700 12px var(--font-body);color:var(--ink);transition:color .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-logout small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-logout-icon{width:29px;height:29px;border-radius:9px;background:var(--line-soft);color:var(--muted);display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.sidebar-logout-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sidebar-logout:hover{background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 25%,transparent);color:var(--danger)}
.sidebar-logout:hover strong{color:var(--danger)}
.sidebar-logout:hover .sidebar-logout-icon{background:var(--danger);color:#fff}
.sidebar-logout:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
[data-theme="dark"] .sidebar-logout strong{color:var(--ink)}
[data-theme="dark"] .sidebar-logout:hover{background:color-mix(in srgb,var(--danger) 16%,transparent);color:#ff9c92}
[data-theme="dark"] .sidebar-logout:hover strong{color:#ff9c92}

/* ---------- tooltip do modo recolhido ---------- */
.sidebar-tip{position:absolute;left:calc(100% + 12px);top:0;transform:translate(-6px,-50%);background:var(--sidebar);color:#fff;font:600 11.5px var(--font-body);padding:7px 11px;border-radius:9px;white-space:nowrap;box-shadow:var(--shadow-md);pointer-events:none;opacity:0;transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.2,1);z-index:30}
.sidebar-tip::before{content:'';position:absolute;left:-5px;top:50%;width:10px;height:10px;background:inherit;transform:translateY(-50%) rotate(45deg);border-radius:2px}
.sidebar-tip.show{opacity:1;transform:translate(0,-50%)}
[data-theme="dark"] .sidebar-tip{background:#1a3a35}

/* ---------- modo recolhido: só ícones ---------- */
html.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed);padding-left:11px;padding-right:11px}
html.sidebar-collapsed .main-col{margin-left:var(--sidebar-w-collapsed);width:calc(100% - var(--sidebar-w-collapsed))}
html.sidebar-collapsed .sidebar .brand{justify-content:center;padding-left:0;padding-right:0}
html.sidebar-collapsed .sidebar .brand>span,
html.sidebar-collapsed .nav-label,
html.sidebar-collapsed .company-switch>span:not(.company-logo){display:none}
html.sidebar-collapsed .nav-item{justify-content:center;padding:9px 0;gap:0}
html.sidebar-collapsed .nav-item::after{display:none}
html.sidebar-collapsed .nav-item .badge{position:absolute;top:3px;right:6px;margin:0;padding:1px 5px;font-size:9px;line-height:1.3}
html.sidebar-collapsed .sidebar-footer .company-switch{justify-content:center;padding:7px}
html.sidebar-collapsed .company-menu{left:calc(100% + 8px);right:auto;bottom:8px;width:216px}
html.sidebar-collapsed .sidebar-logout{justify-content:center;padding:6px}
html.sidebar-collapsed .sidebar-logout .nav-label{display:none}

/* ---------- telas altas: sobra espaço, então o menu respira ---------- */
@media(min-height:800px){
  .sidebar{padding-top:18px}
  .sidebar .brand{padding-bottom:14px}
  .sidebar nav{gap:5px}
  .nav-item{padding:10px 11px}
  .sidebar-footer{gap:9px;padding-top:11px}
  .sidebar-footer .company-switch{padding:8px}
  .sidebar-logout{padding:7px 8px}
}

/* telas altas: em vez de deixar um vão morto acima do rodapé, a lista distribui a sobra
   em respiro real (dois degraus, medidos pra nunca criar rolagem no limiar de cada um) */
@media(min-height:880px){
  .sidebar{padding-top:20px}
  .sidebar .brand{padding-bottom:18px}
  .sidebar nav{gap:6px}
  .nav-item{padding:11px 11px}
  .sidebar-footer{gap:10px;padding-top:12px}
}
@media(min-height:1000px){
  .sidebar{padding-top:26px}
  .sidebar .brand{padding-bottom:24px}
  .sidebar nav{gap:8px}
  .nav-item{padding:13px 11px}
  .sidebar-footer{gap:12px;padding-top:16px}
}

/* ---------- telas baixas: o menu se comprime em vez de criar rolagem ---------- */
@media(max-height:790px){
  /* comprime só o necessário: antes cortava ~75px pra economizar 7 e o vão acima do rodapé disparava */
  .sidebar nav{gap:3px}
  .sidebar-footer{gap:7px;padding-top:9px}
  .sidebar-logout small{display:none}
  .sidebar-logout strong{font-size:12.5px}
}
@media(max-height:720px){
  .sidebar nav{gap:2px}
  .sidebar{padding-top:12px}
  .sidebar .brand{padding-bottom:7px}
  .nav-item{padding:7px 11px}
  .sidebar-footer .company-switch{padding:6px 8px}
}

@media(max-width:760px){
  html{--sidebar-w:72px}
  .sidebar{width:var(--sidebar-w);padding:15px 10px 12px}
  .sidebar-collapse{display:none}
  .sidebar .brand{justify-content:center;padding-left:0;padding-right:0}
  /* o styles.css zera o font-size pra esconder os rótulos, mas aqui o cartão de empresa
     redeclara o font: sem esconder o span, "EMPRESA ATUAL / Acme Brasil" vazava da trilha de 72px */
  .sidebar .brand>span,.nav-label,.sidebar-logout .nav-label,
  .sidebar-footer .company-switch>span:not(.company-logo){display:none}
  .nav-item{justify-content:center;padding:9px 0;gap:0;font-size:0}
  .nav-item svg{font-size:12.5px}
  .sidebar-footer .company-switch{justify-content:center;padding:7px}
  .sidebar-logout{justify-content:center;padding:6px}
  .sidebar-footer .company-menu{left:calc(100% + 8px);right:auto;bottom:8px;width:216px}
}

@media(prefers-reduced-motion:reduce){
  .nav-item,.nav-label,.nav-indicator,.nav-item svg,
  .sidebar-collapse,.sidebar-collapse svg,.sidebar-logout,.sidebar-logout-icon,
  .sidebar-tip,.company-switch,.company-switch .chevron,
  .sidebar-footer .company-menu button{transition:none}
  html.sidebar-ready.sidebar-animating .sidebar,html.sidebar-ready.sidebar-animating .main-col{transition:none}
}