/* ═══════════════════════════════════════════════════════════
   NavMenu — Redesign pill/active-indicator
   Targetta le classi side-nav-* esistenti senza modificare HTML
   ═══════════════════════════════════════════════════════════ */

/* ── Group header (.side-nav-title) ── */
.leftside-menu .side-nav .side-nav-title {
  font-size: 0.63rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  color: #64748b !important;
  padding: 5px 20px 5px !important;
  padding-top: 16px !important;
}

/* Divider sopra ogni gruppo tranne il primo.
   Funziona correttamente con il rendering condizionale Blazor:
   se il primo @if non renderizza nulla, il gruppo successivo
   diventa :first-child e non riceve il border. */
.leftside-menu .side-nav .side-nav-title::before {
  content: '';
  display: block;
  border-top: 1px solid rgba(100, 116, 139, 0.40);
  margin: 0 0 8px;
}

.leftside-menu .side-nav .side-nav-title:first-child::before {
  display: none;
}

/* ── Nav item base (.side-nav-link) ── */
.leftside-menu .side-nav .side-nav-link {
  display: flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  padding: 8px 20px !important;
  margin: 1px 8px !important;
  border-left: 2px solid transparent !important;
  transition: background 150ms ease !important;
  color: #94a3b8 !important;
  background: transparent !important;
}

/* Icone */
.leftside-menu .side-nav .side-nav-link > i {
  color: #94a3b8 !important;
  font-size: 1.05rem !important;
  width: 18px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Etichette — span generico ma non badge né freccia */
.leftside-menu .side-nav .side-nav-link > span:not(.badge):not(.menu-arrow):not(.inbox-nav-badge) {
  font-size: 0.875rem !important;
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

/* ── Hover (solo su item non attivi) ── */
.leftside-menu .side-nav .side-nav-link:not(.active):hover {
  background: rgba(148, 163, 184, 0.08) !important;
}

.leftside-menu .side-nav .side-nav-link:not(.active):hover > i,
.leftside-menu .side-nav .side-nav-link:not(.active):hover > span:not(.badge):not(.menu-arrow):not(.inbox-nav-badge) {
  color: #cbd5e1 !important;
}

/* ── Active state ── */
.leftside-menu .side-nav .side-nav-link.active {
  background: rgba(60, 116, 211, 0.18) !important;
  border-left: 2px solid var(--upf-primary) !important;
  padding-left: 18px !important; /* 20px - 2px border: testo allineato */
}

.leftside-menu .side-nav .side-nav-link.active > i,
.leftside-menu .side-nav .side-nav-link.active > span:not(.badge):not(.menu-arrow):not(.inbox-nav-badge) {
  color: var(--upf-primary) !important;
  font-weight: 600 !important;
}

/* ── Badge inbox (Comunicazioni — WA/TG) ── */
.inbox-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--upf-primary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  margin-left: 6px;
  line-height: 1;
}

/* ── Freccia menu collapse: sposta a destra ── */
.leftside-menu .side-nav .side-nav-link .menu-arrow {
  margin-left: auto !important;
}

/* ── Active state nelle voci di sottomenu ── */
.leftside-menu .side-nav .side-nav-second-level li a.active {
  color: var(--upf-primary) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR CONDENSED — override icona active
   La sidebar condensed (70px) è gestita da app-saas.css:
   nasconde gli span, mostra tooltip su hover, espande su hover.
   Qui aggiungiamo solo l'icona colorata per l'item attivo.
   ══════════════════════════════════════════════════════════ */

html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-link.active > i {
  color: var(--upf-primary) !important;
}

/* In condensed la pill e il border-left non hanno senso:
   rimuoviamo solo visivamente senza toccare lo stato active */
html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-link.active {
  background: transparent !important;
  border-left-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   CONDENSED — reset override e fix icone
   ══════════════════════════════════════════════════════════════ */

/* Reset dei nostri override che rompono il layout condensed */
html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-link {
  margin: 0 !important;
  border-radius: 0 !important;
  border-left-color: transparent !important;
  padding: 8px var(--ct-menu-item-padding-x) !important;
  background: transparent !important;
}

/* Icona: ripristina width template per centratura + aumenta font-size */
html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-link > i {
  width: calc(var(--ct-leftbar-width-sm) - var(--ct-menu-item-padding-x) * 2) !important;
  font-size: 1.35rem !important;
  color: #94a3b8 !important;
}

/* Icona active: colorata di primary */
html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-link.active > i {
  color: var(--upf-primary) !important;
}

/* Hover in condensed: sfondo pieno primary (come template originale),
   NON il nostro background semi-trasparente */
html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-item:hover > .side-nav-link {
  background: var(--ct-menu-condensed-link-bg) !important;
  color: #fff !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-item:hover > .side-nav-link > i {
  color: #fff !important;
}

/* Testo (span) in hover condensed: bianco su sfondo primary */
html[data-sidenav-size=condensed]:not([data-layout=topnav])
  .leftside-menu .side-nav .side-nav-item:hover > .side-nav-link > span:not(.badge):not(.menu-arrow):not(.inbox-nav-badge) {
  color: #fff !important;
}