/* ── Static / GitHub Pages overrides ──────────────────────────── */ /* The #app div acts as the full-page wrapper */ #app { min-height: 100vh; display: block; } /* When login view is rendered inside #app, body needs its class applied to #app */ #app > body.login-body, #app:has(> .login-left) { display: flex; min-height: 100vh; } /* Force login layout when app has login children */ .login-body { min-height: 100vh; } /* Ensure main-content gets proper bottom spacing due to demo banner */ .main-content { padding-bottom: calc(2rem + 30px) !important; } /* di-wrapper already fixed, ensure it renders above demo banner */ .di-wrapper { z-index: 9000; } /* Regras save bar: adjust for banner */ .regras-save-bar { bottom: calc(5.5rem + 30px); } /* Toast: lift above banner */ #toast-container { bottom: calc(1.5rem + 30px); } /* Login body hack: when rendered inside #app as innerHTML with tags, browsers strip the tag and its class. We use a wrapper approach instead. */ #app .login-left, #app .login-right { display: flex; } /* Ensure login page fills height when rendered via innerHTML */ #app:has(.login-left) { display: flex; min-height: 100vh; background: linear-gradient(135deg, var(--clr-navy,#002A54) 0%, #003f7a 50%, #1a2a4a 100%); position: relative; overflow: hidden; } /* ── Login layout fix for SPA (innerHTML rendering) ──────────── */ /* #app acts as the flex container when in login mode */ #app[style*="display:flex"] { flex-direction: row; align-items: stretch; } #app[style*="display:flex"] .login-left { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem 3.5rem; background: #FFFDF0; position: relative; z-index: 2; } [data-theme="escuro"] #app[style*="display:flex"] .login-left { background: #161616; } #app[style*="display:flex"] .login-right { flex: 1; background: var(--clr-navy, #002A54); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-direction: column; } [data-theme="escuro"] #app[style*="display:flex"] .login-right { background: #0D0D0E; } /* Ensure demo banner doesn't push login content */ #app[style*="display:flex"] { padding-bottom: 0 !important; }