/* Small additions on top of Bootstrap 4, which carries the existing look. */ [x-cloak] { display: none !important; } /* Sign-in gate. The page is SERVED with `auth-pending` on , so the application is hidden from the very first paint rather than being hidden by script that has not run yet. auth.js clears the class once sign-in has settled. x-cloak above still covers the separate, later moment before Alpine has processed the templates. */ #auth-splash { display: none; } html.auth-pending #app { display: none; } html.auth-pending #auth-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; color: #6c757d; text-align: center; } html.auth-failed #auth-splash-message { color: #721c24; } /* Replaces the third-party flag image the legacy navbar loaded from flags.ox3.in -- no external requests. */ .state-badge { display: inline-block; min-width: 2.5rem; padding: 0.15rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 3px; color: #fff; font-weight: 700; letter-spacing: 0.05em; text-align: center; } /* Validation highlight, matching today's red border on empty required fields. */ .field-invalid, .field-invalid .ts-control { border-color: #dc3545 !important; } .payroll-input { font-variant-numeric: tabular-nums; } .credits-dialog { border: 1px solid #dee2e6; border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); padding: 1.25rem; min-width: min(30rem, 92vw); } .credits-dialog::backdrop { background: rgba(0, 0, 0, 0.5); } /* Tom Select sits inside Bootstrap form rows; keep heights consistent. */ .ts-wrapper { margin-bottom: 0; }