/* ============================================= SAUNG SERVATIUS - style.css ============================================= */ /* Navbar Logo */ .navbar-logo { max-height: 80px; width: auto; } /* About Page Logo */ .about-logo { max-width: 200px; } /* Wide & Scrollable Dropdown Menu */ .dropdown-menu-wide { min-width: 320px; max-height: 350px; overflow-y: auto; overflow-x: hidden; } /* ============================================= LAYOUT: SIDEBAR + MAIN CONTENT ============================================= */ /* IMPORTANT: body must NOT have display:flex. If main.js or any other script adds this, remove it. */ body { /* No display:flex here — it breaks fixed children stacking */ } .sidebar { width: 250px; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1050; overflow-y: auto; overflow-x: hidden; /*background-color: #f8f9fa; */ /*border-right: 1px solid #dee2e6; */ /* Use transform for animation — GPU-accelerated, more reliable than 'left' */ transition: transform 0.3s ease-in-out; } .main-content { margin-left: 250px; width: calc(100% - 250px); min-height: 100vh; overflow-x: hidden; transition: margin-left 0.3s ease-in-out; } /* ============================================= SIDEBAR OVERLAY (Mobile dimming background) ============================================= */ .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */ z-index: 1040; /* Above map (1000), below sidebar (1050) */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Active state triggered by JS */ .sidebar-overlay.active { opacity: 1; visibility: visible; } /* ============================================= SIDEBAR TOGGLE BUTTON Must live on directly — NOT inside .main-content (overflow:hidden traps z-index) ============================================= */ .sidebar-toggle { display: none; /* Hidden on desktop */ position: fixed; /* Root stacking context — NOT relative */ top: 15px; left: 15px; z-index: 1060; /* Above sidebar (1000) and overlay (1100) */ background: #fff; border: 1px solid #ccc; border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 38px; cursor: pointer; padding: 0; font-size: 1.2rem; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } /* ============================================= SIDEBAR NAV LINKS ============================================= */ .sidebar .nav-link { padding: 12px 20px; /*color: #495057; */ border-radius: 0 8px 8px 0; margin-right: 15px; transition: all 0.2s ease-in-out; border-left: 4px solid transparent; } .sidebar .nav-link:hover { background-color: #f1f3f5; /*color: #0d6efd; */ border-left: 4px solid #ced4da; } .sidebar .nav-link.active { /* background-color: #e7f1ff; */ /*color: #0d6efd;*/ /*border-left: 4px solid #0d6efd; */ } .sidebar .nav-link.text-danger:hover { background-color: #ffe6e6; border-left: 4px solid #dc3545; } /* ============================================= MOBILE RESPONSIVE ============================================= */ @media (max-width: 768px) { /* Sidebar: slide off-screen to the left */ .sidebar { transform: translateX(-100%); } /* Sidebar open state */ .sidebar.active { transform: translateX(0); } /* Main content fills full width */ .main-content { margin-left: 0; width: 100%; } /* Show the hamburger button */ .sidebar-toggle { display: block; } /* Mobile typography */ body { font-size: 0.9rem; } h1, .h1, .display-4 { font-size: 1.75rem !important; } h2, .h2, .display-5 { font-size: 1.5rem !important; } h3, .h3, .fs-4 { font-size: 1.25rem !important; } h4, .h4, .fs-5 { font-size: 1.1rem !important; } .sidebar-brand-box span.fs-5 { font-size: 1.1rem !important; } } /* ============================================= MISC ============================================= */ /* Prevent image drag/long-press save */ .protected-image { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: auto; } /* Validation */ .is-invalid { border-color: #dc3545 !important; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important; } .invalid-feedback { display: block; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #dc3545; } .is-valid { border-color: #28a745 !important; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important; } .validation-sticker { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; } .validation-sticker.valid { background-color: #28a745; color: white; } .validation-sticker.invalid { background-color: #dc3545; color: white; }