/* static/css/base.css — App shell (logged-in) foundation Owns: layout skeleton, header, sidebar, submenus, utilities (No marketing/public styles here — those live in main.css) */ /* ====================== 0) THEME TOKENS ====================== */ :root{ --brand-bg: #4B006E; --brand-bg-2: #3b0057; --brand-accent: #5f178a; --brand-accent-2: #721ca9; --text-on-brand: #fff; --surface: #f8f9fa; --text-muted: #444; --radius: 8px; --mobile-header-h: 50px; } /* ====================== 1) APP SHELL (logged-in) ======================= */ /* Applies only when */ body.app-shell{ background: #f8f9fa; color: #212529; text-align: initial; display: block; min-height: 100vh; overflow-x: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } html, body.app-shell { height: 100%; margin: 0; } body.app-shell #page-container{ display:flex; flex-direction:column; height:100vh; } body.app-shell .wrapper{ display:flex; flex:1 1 auto; overflow-y:hidden; overflow-x:visible; min-width:0; } body.app-shell #sidebar{ flex-shrink:0; width:250px; background:#3b0057; color:#fff; transition: margin-left .3s ease; overflow-y:auto; } body.app-shell:not(.sidebar-open) #sidebar{ margin-left:-250px; } @media (min-width: 992px){ body.app-shell:not(.sidebar-open) #sidebar{ margin-left:0; } } body.app-shell #main-content{ flex:1 1 auto; overflow-y:auto; position:relative; background:#f8f9fa; transition: margin-left .3s ease; } @media (max-width: 991px){ body.app-shell.sidebar-open #main-content{ margin-left:250px; } } /* Sidebar pieces */ body.app-shell .sidebar-user{ text-align:center; padding:1rem; border-bottom:1px solid rgba(255,255,255,.2); } body.app-shell .sidebar-user img{ width:60px; border-radius:50%; } body.app-shell .sidebar-user .name{ margin-top:.5rem; font-weight:700; color:#fff; } body.app-shell .sidebar-nav{ list-style:none; margin:0; padding:0; } body.app-shell .sidebar-nav .nav-link{ display:flex; justify-content:space-between; align-items:center; color:#e1e1ff; text-decoration:none; padding:.8rem 1rem; font-size:1rem; transition: background-color .2s; border-bottom:1px solid rgba(255,255,255,.1); } body.app-shell .sidebar-nav .nav-link:hover, body.app-shell .sidebar-nav .nav-link.active{ background:#5f178a; font-weight:600; } body.app-shell .disabled-link{ opacity:.6; pointer-events:none; cursor:not-allowed; } body.app-shell .arrow{ margin-left:.5rem; transition: transform .3s; } body.app-shell .submenu{ max-height:0; overflow:hidden; background:#5e157d; transition:max-height .3s ease; } body.app-shell .submenu.open{ max-height:500px; } body.app-shell .submenu .nav-link{ padding-left:2rem; border-bottom:1px solid rgba(255,255,255,.1); } /* Mobile top bar in app */ body.app-shell .header-bar{ display:flex; align-items:center; height:50px; padding:0 1rem; background:#4B006E; color:#fff; } body.app-shell .header-bar .hamburger{ background:transparent; border:none; color:#fff; font-size:1.5rem; margin-right:1rem; } body.app-shell .header-bar .app-title{ font-weight:700; font-size:1.2rem; } /* Flash / toast / misc in app */ body.app-shell .flash-container{ position:fixed; top:70px; right:20px; z-index:9999; width:300px; } body.app-shell .flash-container .alert{ margin-bottom:15px; } body.app-shell .toast.bg-purple, body.app-shell .bg-purple{ background-color: rgba(2,158,2,1) !important; color:#fff !important; } body.app-shell .table td, body.app-shell .table th{ vertical-align: middle; } body.app-shell .btn-sm{ margin:0 2px; } body.app-shell .card{ border-radius:8px; } /* ====================== 1) GLOBAL STABILITY ================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; } body{ display: flex; flex-direction: column; min-height: 100vh; background: var(--surface); color: #212529; transition: background-color .3s, color .3s; overflow-x: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Make .container-fluid under #main-content truly edge-to-edge */ body.app-shell #main-content > .container-fluid { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; } /* Keep app pages full-width inside #main-content */ body.app-shell #main-content > .container { max-width: 100% !important; width: 100%; padding-left: 1rem; padding-right: 1rem; } /* Layout skeleton */ #page-container{ display:flex; flex-direction:column; height:100vh; } .wrapper{ display:flex; flex:1 1 auto; overflow-y:hidden; /* keep vertical handled by #main-content */ overflow-x:visible; /* allow horizontal bleed */ min-width:0; min-height:0; height: 100vh; } /* ====================== 2) MOBILE HEADER ===================== */ .header-bar{ display:flex; align-items:center; height:50px; padding:0 1rem; background: var(--brand-bg); color: var(--text-on-brand); position: sticky; top: 0; z-index: 1050; /* stays above drawer/backdrop */ } .header-bar .hamburger{ background:transparent; border:0; color:inherit; font-size:1.5rem; margin-right:1rem; padding:.25rem; line-height:1; border-radius:6px; } .header-bar .hamburger:active{ background: rgba(255,255,255,.1); } .header-bar .app-title{ font-weight:700; font-size:1.2rem; } /* ====================== 3) SIDEBAR + MAIN ==================== */ #sidebar{ flex-shrink:0; width:250px; background: var(--brand-bg-2); color: var(--text-on-brand); transition: margin-left .3s ease, transform .3s ease; overflow-y:auto; } /* Desktop: never auto-hide the sidebar via the .sidebar-open flag */ @media (min-width: 992px){ body:not(.sidebar-open) #sidebar{ margin-left:0; } } /* Mobile drawer below header (no content shift) */ @media (max-width: 991px){ #sidebar{ position: fixed; top: var(--mobile-header-h); /* below sticky header */ left: 0; height: calc(100dvh - var(--mobile-header-h)); /* fill remaining height */ width: min(85vw, 300px); /* sensible width on phones */ z-index: 1040; box-shadow: 2px 0 14px rgba(0,0,0,.25); overscroll-behavior: contain; margin-left: 0; /* neutralize desktop hide */ transform: translateX(-100%); /* hidden by default */ } body.sidebar-open #sidebar{ transform: translateX(0); } /* shown */ /* Dim the page but keep the header tappable */ body.sidebar-open::before{ content: ""; position: fixed; left: 0; right: 0; top: var(--mobile-header-h); bottom: 0; background: rgba(0,0,0,.35); z-index: 1035; } } /* Main content */ #main-content{ flex:1 1 auto; overflow-y:auto; position:relative; background: var(--surface); transition: margin-left .3s ease; padding-bottom:40px; /* avoid footer overlap */ min-height: 0; /* prevent overflow clipping */ } /* ====================== 4) SIDEBAR USER ====================== */ .sidebar-user{ text-align:center; padding:1rem; border-bottom:1px solid rgba(255,255,255,.2); } .sidebar-user img{ width:60px; border-radius:50%; } .sidebar-user .name{ margin-top:.5rem; font-weight:700; color: var(--text-on-brand); } /* ====================== 5) NAV & SUBMENUS ==================== */ .sidebar-nav{ list-style:none; margin:0; padding:0; } .sidebar-nav .nav-link{ display:flex; justify-content:space-between; align-items:center; color:#e1e1ff; text-decoration:none; padding:.8rem 1rem; font-size:1rem; transition: background-color .2s; border-bottom:1px solid rgba(255,255,255,.1); } .sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active{ background: var(--brand-accent); font-weight:600; } /* Animated height (smooth open/close) */ .submenu{ max-height: 0; overflow: hidden; background:#5e157d; transition: max-height .25s ease; will-change: max-height; } .submenu.open{ max-height: 700px; /* roomy enough for long lists */ overflow-y: auto; } /* Indentation + separators */ .submenu .nav-link{ padding-left:2rem; border-bottom:1px solid rgba(255,255,255,.1); } /* nested levels */ .has-submenu > .submenu > .has-submenu > a.nav-link { padding-left: 2.25rem; } .has-submenu > .submenu > .has-submenu > .submenu .nav-link { padding-left: 2.75rem; } .submenu .dropdown-divider{ border-top-color: rgba(255,255,255,.15); margin: .35rem 0; } /* Caret rotation via aria-expanded */ .has-submenu > a .arrow{ transition: transform .2s ease; margin-left:.5rem; } .has-submenu > a[aria-expanded="true"] .arrow{ transform: rotate(180deg); } /* ====================== 6) UTILITIES ========================= */ .disabled-link{ opacity:.6; pointer-events:none; cursor:not-allowed; } .flash-container{ position:fixed; top:70px; right:20px; z-index:9999; width:300px; } .flash-container .alert{ margin-bottom:15px; } footer.footer-bar{ position:fixed; bottom:0; right:0; background:#f2f2f2; color:var(--text-muted); font-size:.85rem; padding:.4rem .8rem; z-index:999; border-top-left-radius: var(--radius); box-shadow:-2px -2px 8px rgba(0,0,0,.05); text-align:right; max-width:100%; } /* Toast color used by showToast() */ .bg-purple{ background-color: rgba(2,158,2,1) !important; color:#fff !important; } /* Tables, buttons, cards */ .table td, .table th{ vertical-align: middle; } .btn-sm{ margin:0 2px; } .card{ border-radius: var(--radius); } /* Keyboard focus (visible but subtle) */ .sidebar-nav .nav-link:focus{ outline: 2px solid rgba(255,255,255,.5); outline-offset: -2px; } /* Scrollbar niceties inside long submenus */ .submenu.open::-webkit-scrollbar { width: 8px; } .submenu.open::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 8px; } .submenu.open { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ * { transition: none !important; } } /* put this at the END of static/css/base.css */ body.app-shell #main-content > .container, body.app-shell #main-content > .container-fluid { max-width: 100% !important; width: 100% !important; }