/* Site theme (light/dark) using CSS variables. Accent: clean blue on dark background for long sessions. */ :root { --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f2f5fa; --text: #0f172a; /* slate-900 */ --muted: #64748b; /* slate-500 */ --border: #e2e8f0; /* slate-200 */ --accent: #2a8bf2; /* clean blue */ --accent-hover: #2278d6; --accent-contrast: #ffffff; --link: var(--accent); --success: #22c55e; --success-hover: #1ea652; --warning: #f59e0b; --warning-hover: #d98c08; --danger: #ef4444; --danger-hover: #d93b3b; /* Scrollbar colors (light theme) */ --scrollbar-track: var(--surface-2); --scrollbar-thumb: #cbd5e1; /* slate-300 */ --scrollbar-thumb-hover: #94a3b8; /* slate-400 */ } [data-theme="dark"] { --bg: #0b1220; /* near-black navy */ --surface: #121a2a; /* dark surface */ --surface-2: #0f1726; /* darker row alt */ --text: #e6edf3; /* light text */ --muted: #9fb3c8; /* muted text */ --border: #1f2a3a; /* subtle lines */ --accent: #2a8bf2; /* clean blue */ --accent-hover: #2b7ada; --accent-contrast: #0b1220; --link: #74b6ff; --success-hover: #1b9246; --warning-hover: #c27c06; --danger-hover: #c13333; /* Scrollbar colors (dark theme) */ --scrollbar-track: var(--surface-2); --scrollbar-thumb: #22314a; --scrollbar-thumb-hover: #2d4369; } /* Base */ html { background: var(--bg); color: var(--text); margin: 0; display: block !important; width: 100% !important; } body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block !important; width: 100% !important; } a { color: var(--link); } a:hover, a:focus { color: var(--accent); } /* Navbar */ .app-header.navbar, .navbar { background: var(--surface) !important; border-bottom: 1px solid var(--border); } .navbar .nav-link { color: var(--text); } .navbar .nav-link:hover { color: var(--accent) !important; } /* Highlight the current (active) top-level page in the navbar */ .navbar .nav-link.active, .navbar .nav-link[aria-current="page"] { color: var(--accent) !important; /* Avoid layout shift on desktop by not changing link box metrics */ background-color: transparent; border: 0; border-radius: 0; box-shadow: inset 0 -2px 0 var(--accent); } /* Responsive Navbar base */ .app-header.navbar { display: flex; align-items: center; gap: 8px; /* Keep header in normal flow but pinned to the top; prevents content overlap */ position: sticky !important; top: 0 !important; /* Ensure the drawer (inside header) sits above the backdrop appended to */ z-index: 2000; /* Provide a small separation from following content across pages */ margin-bottom: 16px; } .app-header .navbar-collapse { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; } .app-header .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; } .app-header .navbar-toggler:hover { border-color: var(--accent); color: var(--accent); } .app-header .navbar-toggler-icon { width: 20px; height: 2px; background: var(--text); position: relative; display: block; } .app-header .navbar-toggler-icon::before, .app-header .navbar-toggler-icon::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease, top .2s ease; } .app-header .navbar-toggler-icon::before { top: -6px; } .app-header .navbar-toggler-icon::after { top: 6px; } .app-header.is-open .navbar-toggler-icon { background: transparent; } .app-header.is-open .navbar-toggler-icon::before { top: 0; transform: rotate(45deg); } .app-header.is-open .navbar-toggler-icon::after { top: 0; transform: rotate(-45deg); } /* Mobile drawer navigation enhancements */ @media (min-width: 992px) { .app-header .navbar-toggler { display: none; } .app-header .navbar-collapse { position: static; height: auto; transform: none; box-shadow: none; border: 0; padding: 0; } } @media (max-width: 991.98px) { /* Stack nav items vertically inside the drawer */ .app-header .nav.navbar-nav { flex-direction: column; align-items: stretch; width: 100%; } .app-header .nav.navbar-nav .nav-item { width: 100%; } .app-header .nav.navbar-nav .nav-link { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); } .app-header .dropdown { position: static; } .app-header .dropdown .dropdown-content { position: static; min-width: 0; width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; margin: 6px 0; padding: 6px; display: none; } .app-header .dropdown.open .dropdown-content { display: block; } .app-header .dropdown .dropdown-content a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--text); } .app-header .dropdown .dropdown-content a:hover { background: var(--surface); color: var(--accent); } /* Off-canvas drawer (enabled only when JS is present) */ html.js .app-header .navbar-collapse { position: fixed; top: 0; right: 0; height: 100dvh; width: min(86vw, 360px); max-width: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -12px 0 24px rgba(0,0,0,.25); transform: translateX(100%); transition: transform .25s ease; padding: 12px 12px 24px; overflow-y: auto; z-index: 1100; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; } html.js .app-header .navbar-collapse.is-open { transform: translateX(0); } /* Backdrop behind the drawer */ .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1050; opacity: 1; transition: opacity .2s ease; } /* Prevent body scroll when drawer is open */ body.nav-open { overflow: hidden; } } /* Screen-reader-only utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Right-side navbar spacing (theme toggle vs Logout/Login) Use modern flex gap where supported, and provide a margin fallback */ .app-header .navbar-nav.ml-auto { gap: 12px; /* adjust to taste: 12–20px */ } .app-header .navbar-nav.ml-auto > li + li { margin-left: 12px !important; /* fallback for browsers without flex gap */ } /* Add breathing room at the far left so first item doesn't touch edge */ .app-header.navbar > .navbar-nav:first-child, .app-header.navbar .nav.navbar-nav:first-child { padding-left: 14px; } /* Dropdowns in custom navbar */ .dropdown-content { background: var(--surface); border: 1px solid var(--border); } .dropdown-content a { color: var(--text); } .dropdown-content a:hover { background: var(--surface-2); color: var(--accent); } /* Desktop dropdown behavior (hover) */ @media (min-width: 992px) { .app-header .navbar-toggler { display: none; } /* Keep navbar items on a single row and align properly */ /* Important: only apply when NOT in force-compact mode */ .app-header:not(.force-compact) .navbar-collapse { display: flex !important; align-items: center; justify-content: flex-start; /* left group first */ flex-wrap: nowrap; /* avoid wrapping on desktop */ } /* Ensure both groups are horizontal flex rows, not floated */ .app-header .nav.navbar-nav, .app-header .navbar-nav.ml-auto { display: flex; flex-direction: row; align-items: center; float: none !important; /* neutralize legacy float rules */ } /* Push the right group to the far right */ .app-header .navbar-nav.ml-auto { margin-left: auto !important; } /* Prevent label wrapping that can cause layout jumps */ .app-header .nav-link { white-space: nowrap; } .app-header .dropdown { position: relative; } .app-header .dropdown-content { position: absolute; min-width: 220px; display: none; top: 100%; left: 0; box-shadow: 0 8px 24px rgba(0,0,0,.08); z-index: 1001; } .app-header .dropdown:hover > .dropdown-content { display: block; } } /* Mobile menu behavior */ @media (max-width: 991.98px) { .app-header.navbar { flex-wrap: wrap; } .app-header .navbar-collapse { display: none; width: 100%; background: var(--surface); border-top: 1px solid var(--border); max-height: calc(100vh - 56px); overflow-y: auto; } .app-header.is-open .navbar-collapse { display: block; } .app-header .nav.navbar-nav, .app-header .navbar-nav.ml-auto { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 6px 0; margin: 0; } .app-header .navbar-nav.ml-auto { margin-left: 0 !important; } .app-header .navbar-nav.ml-auto > li + li { margin-left: 0 !important; } .app-header .nav-link { display: block; width: 100%; padding: 10px 14px; } .app-header .dropdown { position: static; } .app-header .dropdown > a.nav-link { font-weight: 600; } .app-header .dropdown-content { position: static; display: none; min-width: 100%; box-shadow: none; border-left: 0; border-right: 0; } .app-header .dropdown.open > .dropdown-content { display: block; } /* reduce extra spacing between stacked right-side items */ .app-header .navbar-nav.ml-auto { gap: 0; } } /* Force-compact mode: engage mobile menu layout on wide screens when content would wrap */ .app-header.force-compact { flex-wrap: wrap; } .app-header.force-compact .navbar-toggler { display: inline-flex !important; } .app-header.force-compact .navbar-collapse { display: none !important; width: 100%; background: var(--surface); border-top: 1px solid var(--border); max-height: calc(100vh - 56px); overflow-y: auto; } .app-header.force-compact.is-open .navbar-collapse { display: block !important; } .app-header.force-compact .nav.navbar-nav, .app-header.force-compact .navbar-nav.ml-auto { display: flex; flex-direction: column; gap: 0; width: 100%; padding: 6px 0; margin: 0; } .app-header.force-compact .navbar-nav.ml-auto { margin-left: 0 !important; } .app-header.force-compact .navbar-nav.ml-auto > li + li { margin-left: 0 !important; } .app-header.force-compact .nav-link { display: block; width: 100%; padding: 10px 14px; white-space: normal; } .app-header.force-compact .dropdown { position: static; } .app-header.force-compact .dropdown > a.nav-link { font-weight: 600; } .app-header.force-compact .dropdown-content { position: static; display: none; min-width: 100%; box-shadow: none; border-left: 0; border-right: 0; } .app-header.force-compact .dropdown.open > .dropdown-content { display: block; } /* Cards */ .card { background-color: var(--surface); color: var(--text); border: 1px solid var(--border); } .card-header, .card-footer { background-color: var(--surface); color: var(--text); border-color: var(--border); } .card-body { background-color: var(--surface); color: var(--text); } /* Buttons - unify look across legacy and new buttons */ /* Base shape/spacing applied to native button elements only */ button, input[type="button"], input[type="submit"], input[type="reset"] { border-radius: 8px; padding: 6px 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { border-color: var(--accent); color: var(--accent); } /* Default .btn appearance = primary/accent */ .btn { border-radius: 8px; padding: 6px 12px; border: 1px solid var(--accent); background-color: var(--accent); color: var(--accent-contrast); transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* Global modal sizing fixes: ensure content doesn't overflow viewport */ /* Base modal overlay behavior (works with our lightweight modal implementation) */ .modal { /* Make the overlay cover the entire viewport and not be the scrolling container */ position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0 */ z-index: 3000; /* above sticky header (2000) */ /* Hidden by default; JS will set to 'flex' when opening */ display: none; align-items: center; justify-content: center; padding: 1rem; /* breathing room around the dialog */ /* Prevent the overlay itself from creating a second scrollbar */ overflow: hidden; /* Subtle backdrop */ background: rgba(0, 0, 0, 0.45); } /* When a modal is open, lock page scrolling so only the modal scrolls */ html.modal-open, body.modal-open { overflow: hidden !important; /* Avoid scroll chaining into the page behind the modal */ overscroll-behavior: contain; } /* Ensure no overlay scrollbar even when legacy CSS targets .modal-open .modal */ html.modal-open .modal, body.modal-open .modal { overflow: hidden !important; } /* Dialog sizing and layout */ .modal-dialog { /* keep wide content usable on smaller screens */ max-width: none; width: min(720px, calc(100vw - 2rem)); margin: 1.25rem auto; } .modal-content { display: flex; flex-direction: column; /* Use dynamic viewport height to avoid mobile URL-bar issues */ max-height: calc(100dvh - 2rem); box-sizing: border-box; /* Clip any overflowing children (e.g., long form controls) to the card */ overflow: hidden; /* Prevent accidental horizontal growth */ min-width: 0; max-width: 100%; } .modal-header, .modal-footer { flex: 0 0 auto; } .modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-width: 0; } /* If a

wraps header/body/footer inside .modal-content, make the form the flex column so the body can actually scroll. */ .modal-content > form { display: flex; flex-direction: column; height: 100%; min-height: 0; /* allow children to shrink and not overflow */ } .modal-content > form .modal-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; /* Firefox fix: enable flexed scroll containers */ } /* Themed scrollbars */ /* Firefox */ html, body, .modal, .modal-body { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* WebKit/Blink (Chrome, Edge, Safari) */ html::-webkit-scrollbar, body::-webkit-scrollbar, .modal::-webkit-scrollbar, .modal-body::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 8px; } html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 8px; border: 2px solid var(--scrollbar-track); /* creates space around thumb */ } html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Ensure form controls inside modals never exceed the container */ .modal .form-control, .modal input, .modal select, .modal textarea { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; } /* Prevent long content from forcing horizontal overflow */ .modal *, .modal .form-control, .modal select { min-width: 0; max-width: 100%; } /* Footer buttons wrap neatly instead of overflowing */ .modal-footer { flex-wrap: wrap; gap: 8px; } @media (max-width: 576px) { .modal-dialog { width: calc(100vw - 1rem); margin: .5rem auto; } .modal-content { max-height: calc(100dvh - 1rem); } } .btn:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); } .btn-primary { background-color: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-contrast) !important; } .btn-success { background-color: var(--success) !important; border-color: var(--success) !important; color: #fff !important; } .btn-warning { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #0b1220 !important; } .btn-danger { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; } .btn-info { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } /* Variant hovers for subtle change */ .btn-primary:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } .btn-success:hover { background-color: var(--success-hover) !important; border-color: var(--success-hover) !important; } .btn-warning:hover { background-color: var(--warning-hover) !important; border-color: var(--warning-hover) !important; } .btn-danger:hover { background-color: var(--danger-hover) !important; border-color: var(--danger-hover) !important; } .btn-info:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* Map legacy custom colors used around the app */ .btn-teal { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; } .btn-teal:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } .btn-yellow { background-color: var(--warning) !important; border-color: var(--warning) !important; color: #0b1220 !important; } .btn-yellow:hover { background-color: var(--warning-hover) !important; border-color: var(--warning-hover) !important; } .btn-red { background-color: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; } .btn-red:hover { background-color: var(--danger-hover) !important; border-color: var(--danger-hover) !important; } .text-yellow { color: var(--warning) !important; } /* Payments modal: make the receipt input match the theme instead of yellow text */ /* Scope narrowly to inputs inside our custom modal so other .text-yellow uses remain intact */ .modal input#JSON_id-input, .modal input.text-yellow { background-color: var(--surface-2) !important; color: var(--text) !important; /* readable text color on both themes */ border: 1px solid var(--border) !important; border-radius: 6px !important; padding: 6px 8px !important; } .modal input#JSON_id-input::placeholder { color: var(--muted); } .modal input#JSON_id-input:focus { background-color: var(--surface) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 .2rem rgba(42,139,242,.25) !important; /* subtle focus ring */ color: var(--text) !important; outline: none !important; } /* Muted/secondary for legacy neutral buttons */ .btn-default, .btn-secondary { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text) !important; } .btn-default:hover, .btn-secondary:hover { background-color: var(--surface) !important; border-color: var(--accent) !important; } .btn-outline-theme { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-outline-theme:hover { color: var(--accent); border-color: var(--accent); } .btn-sm { padding: 4px 10px; font-size: 0.875rem; } .btn:disabled, .btn.disabled { opacity: 0.75; cursor: default; filter: grayscale(10%); } .btn-static { pointer-events: none; } /* Legacy helper mapping: some pages use a custom-btn class */ .custom-btn { border-radius: 8px !important; padding: 6px 12px !important; background-color: var(--accent) !important; border: 1px solid var(--accent) !important; color: var(--accent-contrast) !important; } .custom-btn:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--accent-contrast) !important; } /* Table */ .table-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; float: none; } .styled-table { background: var(--surface); color: var(--text); width: 100%; margin: 25px auto; } .styled-table thead tr { background-color: var(--accent) !important; color: var(--accent-contrast) !important; } .styled-table tbody tr { border-bottom: 1px solid var(--border); } .styled-table tbody tr:nth-of-type(even) { background-color: var(--surface-2); } .styled-table tbody tr:last-of-type { border-bottom: 2px solid var(--accent); } /* Bootstrap-like tables */ .table { color: var(--text); background: var(--surface); } .table thead th { border-bottom-color: var(--border); } .table td, .table th { border-color: var(--border); } .table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-2); } .table-hover tbody tr:hover { background-color: var(--surface-2); } /* Error rows */ .styled-table tbody tr.row-error { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .styled-table tbody tr.row-error { background: rgba(239, 68, 68, 0.12) !important; } /* Labels */ .label.success { background-color: var(--success); } .label.info { background-color: var(--accent); } .label.warning { background-color: var(--warning); } .label.danger { background-color: var(--danger); } /* Badges (Bootstrap) */ .badge { border-radius: 10px; padding: .35em .6em; font-weight: 600; } .badge-secondary { background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .badge-success { background-color: var(--success); color: #fff; } .badge-danger { background-color: var(--danger); color: #fff; } .badge-info { background-color: var(--accent); color: #fff; } .badge-warning { background-color: var(--warning); color: #0b1220; } /* Utility */ .muted { color: var(--muted); } .surface { background: var(--surface); } .surface-2 { background: var(--surface-2); } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* add spacing between theme toggle and Logout */ .theme-toggle { margin-right: 16px; } /* Modal theming (Bootstrap 4) */ .modal-content { background-color: var(--surface); color: var(--text); border: 1px solid var(--border); } .modal-header, .modal-footer { background-color: var(--surface); border-color: var(--border); } .modal-body { background-color: var(--surface); } .modal-title { color: var(--text); } .close, .close span { color: var(--text); opacity: .8; } .close:hover { color: var(--accent); opacity: 1; } .modal-backdrop { background-color: #0b1220; } .modal-backdrop.show { opacity: .6; } /* Inline ellipsis action button used in lists */ .ellipsis-btn { background-color: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; } .ellipsis-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; } /* Form controls */ input[type="text"], input[type="search"], input[type="number"], select, textarea { background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; } input::placeholder, textarea::placeholder { color: var(--muted); } .form-control { background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .form-control:focus { background-color: var(--surface); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 .2rem rgba(42,139,242,.25); } .form-check-label, label { color: var(--text); } /* Search/filter toolbar (used on pages with searchable tables) */ .form-container { /* Ensure consistent layout and spacing across pages */ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; /* space between forms/controls */ padding-top: 10px; /* keep clear of the navbar */ } .form-container form { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; /* space between input and buttons within the same form */ margin: 0; /* reset any default margins */ } .form-container input[type="text"], .form-container input[type="search"], .form-container .form-control { flex: 1 1 260px; /* grow to fill, but don't get too tiny */ min-width: 180px; } .form-container .btn, .form-container button { margin-left: 0 !important; /* override legacy left-margin rule */ white-space: nowrap; /* keep button labels intact */ } /* Put the page header on its own row when it sits in the same container */ .form-container .page-header { flex: 1 1 100%; margin: 6px 0 0 0; } @media (max-width: 576px) { .form-container input[type="text"], .form-container input[type="search"], .form-container .form-control { flex: 1 1 100%; /* make search input full-width on small screens */ } } /* Desktop refinements for search toolbars so controls sit neatly on one row */ @media (min-width: 992px) { /* Keep forms on a single line when possible */ .form-container form { flex-wrap: nowrap; } /* Constrain input width so it doesn't consume the entire row */ .form-container input[type="text"], .form-container input[type="search"], .form-container .form-control { flex: 0 1 440px; /* comfortable default width on desktop */ max-width: 560px; min-width: 260px; } /* Slightly tighten top padding on desktop while keeping global header margin */ .form-container { padding-top: 8px; } } /* Alerts (Bootstrap) */ .alert { color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border); } .alert-success { background-color: rgba(34,197,94,0.15); border-color: #1b9246; } .alert-danger { background-color: rgba(239,68,68,0.15); border-color: #c13333; } .alert-warning { background-color: rgba(245,158,11,0.18); border-color: #c27c06; color: #0b1220; } .alert-info { background-color: rgba(42,139,242,0.15); border-color: #2b7ada; } /* Pagination (theme-aware, overrides legacy rules from style.css) */ .pagination .page-item .page-link { color: var(--accent-contrast) !important; background-color: var(--accent) !important; border-color: var(--accent) !important; } .pagination .page-item .page-link:hover { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; color: var(--accent-contrast) !important; } .pagination .page-item.active .page-link, .pagination .page-item.active .page-link:hover { background-color: var(--surface-2) !important; color: var(--accent) !important; border-color: var(--accent) !important; } /* ---------- Login page layout ---------- */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; } .login-wrapper > .main { /* Ensure the inner wrapper doesn't stretch the full width and keeps the card centered */ width: 100%; display: flex; align-items: center; justify-content: center; } .login-card { width: min(420px, 92vw); border-radius: 12px; /* Fallback centering in case parent rules are overridden by legacy CSS */ margin: 0 auto; } .login-card .card-body { padding: 24px 22px; } .login-card label { font-weight: 600; margin-bottom: 4px; } /* Input group theming (icons on the left) */ .input-group-text { background-color: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } /* Ensure icons inside input-group match theme */ .input-group-text .fas, .input-group-text .fa { color: inherit; }