body { background-color: #f0eeea; }

/* Prevent any page from causing horizontal scroll on mobile */
body, #main-content { overflow-x: hidden; }

#main-nav {
    background-color: #141f18;
    transform: translateX(-15rem);
    transition: transform 0.3s ease;
}
#main-nav.is-open { transform: translateX(0); }

#top-bar { background-color: #f0eeea; }

/* Sidebar slides in at xl (1280px) — wide enough to comfortably fit sidebar + content */
@media (min-width: 1280px) {
    #main-nav { transform: translateX(0); }
}

/* Desktop sidebar margin — only at xl+ */
#main-content.has-sidebar { margin-left: 0; }
@media (min-width: 1280px) {
    #main-content.has-sidebar { margin-left: 15rem; }
}

/* Make tall modals scrollable on mobile */
@media (max-height: 700px), (max-width: 640px) {
    #modal .modal-inner { max-height: 90vh; overflow-y: auto; }
}