/* App shell + a from-Bootstrap "reskin" (redesign, module 1 onward). * * The redesign deliberately does NOT rewrite every component's className strings - the existing * markup (`.modal.d-block`, `.btn-close`, `select.form-select-sm`, `#field_*` ids, `.nav-item-btn`, * `.stat-card`, ...) is the exact contract tools/uitest's scripts drive, and the brief requires * behavior to stay identical while only the visuals change. Bootstrap 5.3's compiled CSS exposes * almost everything through CSS custom properties (some at :root, some hardcoded per component at * their original blue), so the same visual overhaul is done here instead: override those properties, * loaded after bootstrap.min.css (see templates/index.html) so these values win outright. New * elements that have no test depending on their exact class names (the sidebar's collapse toggle, * dashboard charts, empty states, skeletons) use real Tailwind utility classes directly in the JSX. */ /* ---- Design tokens (mirror tailwind.config.js's `brand`/`accent`/semantic scale) ------------- */ :root { --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-300: #6ee7b7; --brand-500: #10b981; --brand-600: #059669; --brand-700: #0f766e; --brand-800: #065f46; --brand-900: #064e3b; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-900: #0f172a; --sidebar-w: 15rem; --sidebar-w-collapsed: 4.5rem; } /* ---- Bootstrap reskin: root tokens most components reference ---------------------------------- */ :root { --bs-body-bg: #f8fafc; /* slate-50 */ --bs-body-color: #1e293b; /* slate-800 */ --bs-border-radius: .625rem; --bs-border-radius-sm: .375rem; --bs-border-radius-lg: .875rem; --bs-border-radius-xl: 1rem; --bs-link-color: var(--brand-700); --bs-link-color-rgb: 15, 118, 110; --bs-link-hover-color: var(--brand-800); --bs-link-hover-color-rgb: 6, 95, 70; --bs-focus-ring-color: rgba(5, 150, 105, .25); --bs-primary: var(--brand-600); --bs-primary-rgb: 5, 150, 105; --bs-primary-text-emphasis: var(--brand-900); --bs-primary-bg-subtle: var(--brand-100); --bs-primary-border-subtle: var(--brand-300); --bs-secondary: var(--slate-500); --bs-secondary-rgb: 100, 116, 139; --bs-success: #16a34a; --bs-success-rgb: 22, 163, 74; /* green-600: paid/verified/active */ --bs-success-text-emphasis: #14532d; --bs-success-bg-subtle: #dcfce7; --bs-success-border-subtle: #86efac; --bs-danger: #dc2626; --bs-danger-rgb: 220, 38, 38; /* red-600: overdue/rejected/missing */ --bs-danger-text-emphasis: #7f1d1d; --bs-danger-bg-subtle: #fee2e2; --bs-danger-border-subtle: #fca5a5; --bs-warning: #f59e0b; --bs-warning-rgb: 245, 158, 11; /* amber-500: pending/onboarding/charging */ --bs-warning-text-emphasis: #78350f; --bs-warning-bg-subtle: #fef3c7; --bs-warning-border-subtle: #fcd34d; --bs-info: #0ea5e9; --bs-info-rgb: 14, 165, 233; /* sky-500: informational */ --bs-info-text-emphasis: #0c4a6e; --bs-info-bg-subtle: #e0f2fe; --bs-info-border-subtle: #7dd3fc; --bs-nav-pills-link-active-bg: var(--brand-600); --bs-pagination-active-bg: var(--brand-600); --bs-pagination-active-border-color: var(--brand-600); --bs-progress-bar-bg: var(--brand-600); } body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Buttons: Bootstrap bakes each variant's colors in as its OWN local custom properties (not the root ones above), so each is retinted explicitly. */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-600); --bs-btn-border-color: var(--brand-600); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700); --bs-btn-focus-shadow-rgb: 5, 150, 105; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800); --bs-btn-disabled-bg: var(--brand-600); --bs-btn-disabled-border-color: var(--brand-600); } .btn-outline-primary { --bs-btn-color: var(--brand-700); --bs-btn-border-color: var(--brand-700); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); --bs-btn-focus-shadow-rgb: 5, 150, 105; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700); --bs-btn-disabled-color: var(--brand-700); --bs-btn-disabled-border-color: var(--brand-700); } .btn-outline-secondary { --bs-btn-color: var(--slate-600); --bs-btn-border-color: var(--slate-400); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--slate-600); --bs-btn-hover-border-color: var(--slate-600); --bs-btn-focus-shadow-rgb: 100, 116, 139; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--slate-600); --bs-btn-active-border-color: var(--slate-600); } .btn-outline-danger { --bs-btn-color: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-focus-shadow-rgb: 220, 38, 38; --bs-btn-active-color: #fff; --bs-btn-active-bg: #b91c1c; --bs-btn-active-border-color: #b91c1c; } .btn-danger { --bs-btn-bg: #dc2626; --bs-btn-border-color: #dc2626; --bs-btn-hover-bg: #b91c1c; --bs-btn-hover-border-color: #b91c1c; --bs-btn-active-bg: #991b1b; --bs-btn-active-border-color: #991b1b; } .btn-outline-light:hover { --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600); } .btn { border-radius: var(--bs-border-radius-sm); font-weight: 500; } /* Form controls: same story - the focus ring/border are hardcoded to Bootstrap blue. */ .form-control:focus, .form-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 .25rem rgba(5, 150, 105, .25); } .form-check-input:checked { background-color: var(--brand-600); border-color: var(--brand-600); } .form-check-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 .25rem rgba(5, 150, 105, .25); } .card { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .04), 0 1px 3px 0 rgb(0 0 0 / .06); } .modal-content { border-radius: var(--bs-border-radius-lg); } /* ---- Login ------------------------------------------------------------------------------------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background: linear-gradient(160deg, var(--brand-50), #f8fafc 55%); } .login-card { width: 100%; max-width: 400px; border: 0; } .login-card .nav-pills .nav-link { color: var(--slate-600); } /* ---- Auth screens (redesign): split-screen, animated visual panel + form panel ------------------ Same palette as the rest of the app (brand teal/emerald, indigo accent) so this doesn't read as a different product. The visual side is pure CSS (gradient + blurred blobs + one pulsing icon) - no image/video asset, so it's cheap to render and there is nothing to fail to load. */ @keyframes auth-drift-a { 0%, 100% { transform: translate(-8%, -6%) scale(1); } 50% { transform: translate(6%, 8%) scale(1.15); } } @keyframes auth-drift-b { 0%, 100% { transform: translate(10%, 6%) scale(1.1); } 50% { transform: translate(-6%, -10%) scale(1); } } @keyframes auth-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 100% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } } @keyframes auth-zap-flicker { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: .35; } } @keyframes auth-fade-slide-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes auth-mode-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes auth-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .auth-blob, .auth-bike-ring, .auth-zap-icon, .auth-shell, .auth-mode-panel { animation: none !important; transition: none !important; } } .auth-shell { min-height: 100vh; display: flex; background: var(--bs-body-bg); animation: auth-fade-slide-up .45s ease-out; } .auth-visual { flex: 1 1 44%; position: relative; overflow: hidden; display: none; align-items: center; justify-content: center; padding: 3rem; text-align: center; color: #fff; background: linear-gradient(155deg, var(--brand-800) 0%, var(--brand-600) 55%, #4f46e5 130%); } .auth-blob { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; pointer-events: none; } .auth-blob-a { width: 22rem; height: 22rem; top: -4rem; left: -4rem; background: #34d399; animation: auth-drift-a 14s ease-in-out infinite; } .auth-blob-b { width: 18rem; height: 18rem; bottom: -3rem; right: -3rem; background: #4f46e5; animation: auth-drift-b 17s ease-in-out infinite; } .auth-visual-content { position: relative; max-width: 22rem; } .auth-bike-ring { position: relative; width: 6rem; height: 6rem; margin: 0 auto 1.5rem; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; animation: auth-pulse-ring 2.6s ease-out infinite; } .auth-bike-icon { width: 2.75rem; height: 2.75rem; } .auth-zap-icon { position: absolute; top: -.4rem; right: -.4rem; width: 1.5rem; height: 1.5rem; color: #fde68a; animation: auth-zap-flicker 3.2s ease-in-out infinite; } .auth-visual-title { font-weight: 700; margin-bottom: .5rem; } .auth-visual-copy { color: rgba(255,255,255,.85); font-size: .92rem; margin: 0; } .auth-panel { flex: 1 1 56%; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .auth-card { width: 100%; max-width: 440px; border: 0; } .auth-brand-mobile { display: flex; } .auth-tabs .nav-link { color: var(--slate-600); } .auth-mode-panel { animation: auth-mode-in .3s ease-out; } .auth-error { animation: auth-shake .4s ease-in-out; } /* Password show/hide toggle: sits inside the same input-group as the field, so it participates in the Bootstrap input-group border-radius/border-collapse instead of floating separately. */ .password-group { position: relative; flex-wrap: wrap; } .password-group .invalid-feedback { order: 3; width: 100%; } .password-toggle { border-left: 0; } .password-group .form-control.is-invalid { border-right: 0; } .password-group .form-control.is-invalid + .password-toggle { border-color: var(--bs-danger); } /* Inline validation animates in rather than jumping the layout instantly. */ .invalid-feedback.d-block, .auth-field .invalid-feedback, .password-group .invalid-feedback { animation: auth-mode-in .18s ease-out; } /* Two-step signup: a small progress indicator, and the two panels crossfade via the same key-remount trick as the mode switch above (React re-mounts the wrapper when the panel's own `active` state changes membership is unnecessary here - the height/opacity transition is enough). */ .auth-steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; } .auth-step { display: flex; align-items: center; gap: .5rem; color: var(--slate-500); font-size: .82rem; } .auth-step-dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e2e8f0; color: var(--slate-500); font-size: .78rem; font-weight: 600; flex-shrink: 0; transition: background .2s, color .2s; } .auth-step.active .auth-step-dot { background: var(--brand-600); color: #fff; } .auth-step.done .auth-step-dot { background: var(--brand-100); color: var(--brand-700); } .auth-step.active .auth-step-label { color: var(--slate-900); font-weight: 600; } .auth-step::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; margin-left: .25rem; } .auth-step:last-child::after { display: none; } .auth-step-panel[hidden] { display: none; } .auth-step-panel.active { animation: auth-mode-in .25s ease-out; } @media (min-width: 992px) { .auth-visual { display: flex; } .auth-brand-mobile { display: none; } } @media (max-width: 575.98px) { .auth-panel { padding: 1rem; } .auth-card .card-body { padding: 1.5rem !important; } } html.dark .auth-shell { background: #0f172a; } html.dark .auth-card { background: #1e293b; color: #e2e8f0; } html.dark .auth-tabs .nav-link { color: #94a3b8; } html.dark .auth-step-dot { background: #334155; color: #cbd5e1; } html.dark .auth-step::after { background: #334155; } /* ---- App shell / sidebar (module 2: collapse, icons, tooltips) --------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); background: linear-gradient(180deg, var(--slate-900), #111827); color: #cbd5e1; flex-shrink: 0; display: flex; flex-direction: column; transition: width .2s ease-in-out; overflow-x: hidden; /* Pinned to the viewport and independently scrollable, so scrolling a tall page of content never carries the nav out of view with it, and a long nav list scrolls on its own. */ position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar.collapsed { width: var(--sidebar-w-collapsed); } .sidebar .brand { display: flex; align-items: center; gap: .5rem; padding: 1rem 1.1rem; font-weight: 700; font-size: 1.1rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; } .sidebar .brand-mark { font-size: 1.2rem; line-height: 1; } .sidebar .collapse-toggle { margin-left: auto; background: rgba(255,255,255,.08); border: 0; color: #cbd5e1; border-radius: .5rem; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar .collapse-toggle:hover { background: var(--brand-600); color: #fff; } .sidebar .section { padding: .9rem 1.1rem .3rem; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #7f8ba6; white-space: nowrap; } .sidebar.collapsed .section { opacity: 0; height: .5rem; overflow: hidden; padding: 0; } .sidebar .nav-item-btn { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: .55rem 1.1rem; font-size: .93rem; white-space: nowrap; } .sidebar .nav-item-btn:hover { background: rgba(255,255,255,.06); color: #fff; } .sidebar .nav-item-btn.active { background: var(--brand-600); color: #fff; } .sidebar .nav-icon { flex-shrink: 0; } .sidebar.collapsed .nav-label, .sidebar.collapsed .brand-label, .sidebar.collapsed .user-box-detail { display: none; } .sidebar.collapsed .nav-item-btn { justify-content: center; padding-inline: 0; } .sidebar .user-box { margin-top: auto; padding: 1rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .85rem; } .sidebar .user-box .btn { display: flex; align-items: center; justify-content: center; gap: .4rem; } .main { flex: 1; min-width: 0; } .topbar-mobile { display: none; } .content { padding: 1.5rem; } th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } .stat-card { border: 0; } .stat-card .value { font-size: 1.9rem; font-weight: 700; } @media (max-width: 767.98px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s; width: var(--sidebar-w) !important; } .sidebar.open { transform: none; } .sidebar.collapsed .nav-label, .sidebar.collapsed .brand-label, .sidebar.collapsed .user-box-detail { display: revert; } .sidebar.collapsed .nav-item-btn { justify-content: flex-start; padding-inline: 1.1rem; } .topbar-mobile { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid #e2e8f0; } .content { padding: 1rem; } } .modal-xl { max-width: min(1140px, 96vw); } dl dd { word-break: break-word; } /* ---- Rider portal's phone nav (module 6): a bottom tab bar instead of a drawer someone has to open every time - only three destinations, which fits a thumb-reach bar well. Desktop keeps the sidebar (RiderPortal.jsx's own d-none/d-md-flex on that