/* Stili per i loghi */
.menu-logo-normal {
    display: block;
    transition: opacity 0.3s ease;
}

.menu-logo-small {
    display: none;
    transition: opacity 0.3s ease;
}

/* Quando il menu è collassato */
.layout-menu-collapsed .menu-logo-normal {
    display: none;
}

.layout-menu-collapsed .menu-logo-small {
    display: block;
}

/* Quando il menu è in hover (mostra il logo grande) */
.layout-menu-collapsed.layout-menu-hover .menu-logo-normal {
    display: block;
}

.layout-menu-collapsed.layout-menu-hover .menu-logo-small {
    display: none;
}

/* Opzionale: nascondi il testo del brand quando è collassato, ma mostralo in hover */
.layout-menu-collapsed .app-brand-text {
    display: none !important;
}

.layout-menu-collapsed.layout-menu-hover .app-brand-text {
    display: block !important;
}

/* Menu collassato: icone uniformi, qualunque siano (svg, img, font, remix, FA, ecc.) */
.layout-menu-collapsed .menu-link { 
  display: flex; 
  align-items: center; 
}

/* Seleziona le icone più comuni dentro .menu-link */
.layout-menu-collapsed .menu-link :is(svg, img, i, .fa, [class^="fa-"], [class*=" fa-"], [class^="ri-"], [class*=" ri-"]) {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;   /* utile per icone font-based (FA/Remix) */
  line-height: 24px; /* evita salti verticali */
}

/* Font Awesome disegna spesso via ::before → matcha la dimensione */
.layout-menu-collapsed .menu-link :is(.fa, [class^="fa-"], [class*=" fa-"])::before {
  font-size: 24px;
  line-height: 24px;
}


/* Centra le icone quando il menu è collassato */
.layout-menu-collapsed .menu-link {
    justify-content: center;
    padding: 1rem;
}
/* Aggiungi più spazio verticale per le voci del menu collassato */
.layout-menu-collapsed .menu-item {
    margin: 0.25rem 0;
}

/* Nascondi solo il testo, non le icone */
.layout-menu-collapsed .menu-link div {
    display: none;
}

/* Quando il menu è in hover, mostra di nuovo il testo */
.layout-menu-collapsed.layout-menu-hover .menu-link div {
    display: block;
}

.layout-menu-collapsed.layout-menu-hover .menu-link {
    justify-content: flex-start;
}

/* NUOVO: Stili per il menu e il logo footer */
.layout-menu {
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
}

.menu-inner {
    flex: 1;
    overflow-y: auto;
}

.menu-footer {
    margin-top: auto;
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-footer img {
    max-width: 100%;
    height: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.menu-footer img:hover {
    opacity: 1;
}

/* Quando il menu è collassato, nascondi il logo footer */
.layout-menu-collapsed .menu-footer {
    display: none;
}

/* Mostra il logo footer quando il menu è in hover */
.layout-menu-collapsed.layout-menu-hover .menu-footer {
    display: block;
}

/* Stili base per il demo */
.layout-menu {
    width: 260px;
    background: #017CBF;
    color: white;
}

.app-brand {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-inner {
    padding: 1rem 0;
}

.menu-item {
    list-style: none;
}

.menu-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease;
    gap: 0.75rem;
}

.menu-link > :is(svg, img, i, .fa, [class^="fa-"], [class*=" fa-"], [class^="ri-"], [class*=" ri-"]) {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 24px;
}

.menu-link > .menu-icon {
    margin-left: 2px !important;
}

.layout-menu-collapsed .menu-link > .menu-icon {
    margin-left: 10px !important;
}

.layout-menu-collapsed.layout-menu-hover .menu-link > .menu-icon {
    margin-left: 2px !important;
}

.menu-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.menu-sub {
    list-style: none;
}

.menu-toggle::after {
    content: "▼";
    margin-left: auto;
    font-size: 12px;
}

hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 1rem;
}

ul.menu-inner {
  -ms-overflow-style: none;  /* IE e Edge */
  scrollbar-width: none;     /* Firefox */
}

ul.menu-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* nasconde anche le barre custom di PerfectScrollbar */
ul.menu-inner .ps__rail-y,
ul.menu-inner .ps__rail-x {
  display: none !important;
}