.sidebar-overlay { 
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5);
    z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-overlay.visible { opacity: 1; visibility: visible; }

.sidebar { 
    position: fixed; top: 0; right: 0; width: 280px; height: 100%;
    background-color: #000000; transform: translateX(100%); transition: transform 0.3s ease-out; z-index: 1100; 
    padding: 1.5rem; box-shadow: -2px 0 10px rgba(0,0,0,0.2); display: flex;
    flex-direction: column; justify-content: space-between; border-top-left-radius: 1rem; 
    border-bottom-left-radius: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.sidebar.open { transform: translateX(0); }

.sidebar-header { display: flex; justify-content: flex-end; margin-bottom: 2rem; }

.sidebar-close-btn { 
    background: none; border: none; font-size: 2rem; color: white; cursor: pointer;
    padding: 0.5rem; border-radius: 0.5rem; transition: background-color 0.2s ease; 
}
.sidebar-close-btn:hover { background-color: rgba(255, 255, 255, 0.1); }

.sidebar-menu { list-style: none; padding: 0; margin: auto 0; width: 100%; }
.sidebar-menu li { margin-bottom: 1.25rem; }
.sidebar-menu a, .sidebar-menu button { 
    display: flex; align-items: center; gap: 1rem;
    color: white; font-size: 1.1rem; padding: 0.75rem 1rem; border-radius: 0.75rem; 
    text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; width: 100%;
    text-align: left; background: none; border: none; cursor: pointer; 
}
.sidebar-menu a:hover, .sidebar-menu button:hover { 
    background-color: rgba(255, 255, 255, 0.15); transform: translateX(5px); 
}
.sidebar-menu .fa-solid { font-size: 1.25rem; width: 24px; text-align: center; }

.sidebar-footer { 
    margin-top: 2rem; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; 
}

/* Inherited from app utility classes */
.national-hidden { display: none !important; }