/* ===== Mini-variant drawer (icon rail, estilo VS Code) =====
   No desktop (>=600px) o drawer encolhe para 76px mostrando só ícones;
   no hover expande por cima do conteúdo (flyout) sem empurrar nada.
   No mobile (<600px) o drawer vira overlay normal e estas regras não se aplicam. */
@media (min-width: 600px) {
    .mud-drawer.nav-mini {
        width: 76px !important;
        min-width: 76px !important;
        overflow: visible;
        transition: width .2s ease;
    }

    /* Margem fixa do conteúdo: não "pula" quando o menu expande no hover */
    .mud-drawer.nav-mini ~ .mud-main-content {
        margin-left: 76px !important;
    }

    /* Esconde textos fora do hover; centraliza ícones */
    .nav-mini:not(:hover) .nav-label {
        display: none;
    }

    .nav-mini:not(:hover) .mud-nav-link {
        justify-content: center;
    }

    /* Expande no hover (flyout por cima do conteúdo) */
    .mud-drawer.nav-mini:hover {
        width: 250px !important;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
        z-index: 5;
    }

    /* No estado mini, o nav-menu interno não pode rolar horizontalmente
       e precisa deixar o flyout sobressair */
    .nav-mini .mud-nav-menu {
        overflow: visible;
    }
}