/* ============================================================
   SUF · Menu HUD — carregado DEPOIS do gastos.css, vence o cascade.
   O menu é montado por assets/js/nav.js a partir de UMA lista só,
   então mexer no menu = mexer num lugar só.
   ============================================================ */

.sidebar {
  width: 226px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(21,12,38,.97), rgba(12,7,20,.97));
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 0;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
/* textura de scanlines + brilho na borda direita (vibe HUD) */
.sidebar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}
.sidebar::after {
  content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--green), var(--purple), transparent);
  opacity: .55;
}

.sb-head { padding: 15px 16px 8px; position: relative; z-index: 1; }
.sb-brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 18px; letter-spacing: .18em;
  background: linear-gradient(90deg, var(--green), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sb-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 9px var(--green); -webkit-text-fill-color: initial;
  animation: sb-pulse 2.2s ease-in-out infinite;
}
@keyframes sb-pulse { 50% { opacity: .3; transform: scale(.75); } }

.sb-crumb {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px;
  transition: border-color .2s, color .2s, background .2s;
}
.sb-crumb:hover { color: var(--green); border-color: var(--green); background: rgba(57,255,157,.06); }
.sb-crumb .arw { color: var(--green); font-size: 13px; line-height: 0; }
.sb-crumb.home { display: none; }

.sb-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 6px 12px 14px; position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(178,107,255,.35) transparent;
}
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(178,107,255,.35); border-radius: 20px; }

/* a luz que segue o cursor e descansa na página atual */
.sb-indic {
  position: absolute; left: 8px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--green), var(--purple));
  box-shadow: 0 0 10px rgba(57,255,157,.55);
  top: 0; height: 0; opacity: 0; pointer-events: none;
  transition: top .28s cubic-bezier(.22,1,.36,1), height .28s cubic-bezier(.22,1,.36,1), opacity .2s;
}

.sb-sec {
  font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); opacity: .55; padding: 11px 12px 5px 14px;
  display: flex; align-items: center; gap: 9px;
}
.sb-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 12px; border-radius: 9px;
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500;
  position: relative;
  transition: color .18s, background .18s, transform .18s;
}
.sb-item .ic { font-size: 13.5px; width: 19px; text-align: center; filter: grayscale(.5) opacity(.75); transition: filter .18s; }
.sb-item .lb { white-space: nowrap; }
.sb-item.sub { padding-top: 6px; padding-bottom: 6px; padding-left: 27px; font-size: 12.5px; }
.sb-item.sub .ic { font-size: 12px; }
.sb-item:hover { color: var(--text); background: rgba(255,255,255,.03); transform: translateX(2px); }
.sb-item:hover .ic { filter: none; }
.sb-item.active {
  color: var(--text); font-weight: 700;
  background: linear-gradient(90deg, rgba(57,255,157,.15), rgba(178,107,255,.10) 55%, transparent);
}
.sb-item.active .ic { filter: none; }
.sb-item:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.sb-foot {
  padding: 9px 16px 11px; border-top: 1px solid var(--border);
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  font-family: ui-monospace, Consolas, monospace; font-size: 10px; letter-spacing: .08em;
  color: var(--muted);
}
.sb-foot a { color: var(--muted); text-decoration: none; }
.sb-foot a:hover { color: var(--green); }

/* mobile: gaveta que desliza (o gastos.css tinha display:none/flex — aqui é transform) */
@media (max-width: 980px) {
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 40; display: flex;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    box-shadow: 22px 0 55px rgba(0,0,0,.6);
  }
  .sidebar.aberta { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-live { animation: none; }
  .sb-indic, .sb-item, .sidebar { transition: none; }
}