/* Regole per nascondere il banner su tutti i dispositivi */
.sidebar-alert,
.card.sidebar-alert,
div[class*="sidebar-alert"] {
    display: none !important;
    visibility: hidden !important;
}

/* Regole specifiche per tablet */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) {
    .sidebar-alert,
    .card.sidebar-alert {
        display: none !important;
    }
}

.variables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.variables-grid code {
    background-color: #e9ecef;
    padding: 2px 4px;
    border-radius: 3px;
    color: #dc3545;
}

/* Miglioramento visibilità logo su sfondo blu */
body[data-topbar=dark] .logo-light img {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Nascondi completamente il logo quando la sidebar è aperta */
body.sidebar-enable .navbar-brand-box {
    width: 70px !important;
    overflow: hidden;
}

body.sidebar-enable .navbar-brand-box .logo {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-100%);
}

/* Regole aggiuntive per desktop */
@media (min-width: 992px) {
    body.sidebar-enable.vertical-collpsed .navbar-brand-box {
        width: 70px !important;
    }
    
    body.sidebar-enable.vertical-collpsed .logo-lg {
        display: none !important;
    }
}

/* Solo il logo piccolo visibile su mobile */
@media (max-width: 991.98px) {
    body.sidebar-enable .navbar-brand-box {
        width: 70px !important;
    }
    
    body.sidebar-enable .navbar-brand-box .logo {
        display: none !important;
    }
}