/* --------------------------------------------------------------------------- YEvaGO Admin — the layer on top of the public site's stylesheet. index.css (the compiled brand build: Bootstrap plus the YEvaGO variables) is loaded first and does the real work — the cream background, the navy headings, Lato, the corner radii, buttons, cards, tables, forms, alerts and badges. Everything an admin page shows that the public site also has uses those Bootstrap classes directly. This file adds only what an operations screen needs and a marketing site has no reason to carry: KPI tiles, the donut and bar charts, and a few density adjustments for long data tables. It deliberately defines no palette. Every colour below is a brand token read back out of index.css (--bs-primary, --bs-body-bg, …) or the brand hexes themselves, so a change to the SCSS variables reaches these pages too rather than leaving the admin area behind on a stale copy of the palette. --------------------------------------------------------------------------- */ :root { /* The brand palette, named once. Mirrors SCSS/_variables.scss. */ --admin-orange: #FF6B35; --admin-navy: #1A1A2E; --admin-gold: #F7C948; /* Surfaces sit slightly above the cream page background, the way .card does. */ --admin-surface: #fff; --admin-border: rgba(26, 26, 46, .08); /* $card-border-color */ --admin-muted: rgba(26, 26, 46, .58); } .admin-body { /* index.css already sets the cream background and Lato on ; this only guarantees the page fills the viewport when a screen is short on content. */ min-height: 100vh; } .admin-main--centered { max-width: 30rem; margin-inline: auto; padding-top: 6vh; } /* ── Header ──────────────────────────────────────────────────────────────── */ .admin-badge { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--admin-orange); border: 1px solid currentColor; border-radius: 2rem; padding: .05rem .5rem; vertical-align: middle; } .admin-who { font-size: .8125rem; color: var(--admin-muted); } /* ── Page headings ───────────────────────────────────────────────────────── */ .admin-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .admin-page-head h1 { margin: 0; font-size: 1.5rem; font-weight: 800; } .admin-page-head p { margin: .25rem 0 0; color: var(--admin-muted); font-size: .8125rem; } /* ── KPI tiles ───────────────────────────────────────────────────────────── */ .admin-stat { height: 100%; background: var(--admin-surface); border: 1px solid var(--admin-border); border-radius: var(--bs-border-radius); padding: 1rem 1.125rem; } .admin-stat__label { color: var(--admin-muted); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .admin-stat__value { font-size: 1.875rem; font-weight: 900; line-height: 1.15; margin-top: .35rem; color: var(--admin-navy); } .admin-stat__split { color: var(--admin-muted); font-size: .8125rem; margin-top: .25rem; } /* The one tile that is a call to action — drivers waiting on a human. */ .admin-stat--action { border-color: var(--admin-orange); } .admin-stat--action .admin-stat__value { color: var(--admin-orange); } /* ── Charts (inline SVG / CSS — no charting library) ─────────────────────── */ .admin-bars { display: flex; align-items: flex-end; gap: .625rem; height: 10.5rem; padding-top: .5rem; } .admin-bars__col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .25rem; height: 100%; } .admin-bars__stack { width: 100%; max-width: 2.875rem; display: flex; flex-direction: column-reverse; justify-content: flex-start; height: 100%; } .admin-bars__seg { width: 100%; border-radius: .1875rem .1875rem 0 0; min-height: 0; } .admin-bars__seg--passengers { background: var(--admin-navy); } .admin-bars__seg--drivers { background: var(--admin-orange); } .admin-bars__label { font-size: .6875rem; color: var(--admin-muted); text-align: center; white-space: nowrap; } .admin-bars__total { font-size: .75rem; font-weight: 700; } .admin-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; font-size: .8125rem; color: var(--admin-muted); } .admin-legend span { display: inline-flex; align-items: center; gap: .375rem; } .admin-swatch { width: .6875rem; height: .6875rem; border-radius: .1875rem; display: inline-block; } .admin-pie-row { display: flex; align-items: center; gap: 1.375rem; flex-wrap: wrap; } .admin-pie { width: 8.25rem; height: 8.25rem; flex: 0 0 auto; } .admin-pie-key { list-style: none; margin: 0; padding: 0; font-size: .875rem; flex: 1 1 11rem; } .admin-pie-key li { display: flex; align-items: center; gap: .5rem; padding: .1875rem 0; } .admin-pie-key b { margin-left: auto; font-variant-numeric: tabular-nums; } .admin-pie-key small { color: var(--admin-muted); width: 2.625rem; text-align: right; font-variant-numeric: tabular-nums; } /* ── Tables ──────────────────────────────────────────────────────────────── */ /* .table does the rest; these are density and alignment only. */ .admin-table th { font-size: .6875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--admin-muted); font-weight: 700; white-space: nowrap; } .admin-table td { vertical-align: middle; } .admin-table .num { text-align: right; font-variant-numeric: tabular-nums; } .admin-empty { color: var(--admin-muted); padding: 1.25rem 0; text-align: center; } /* ── Definition lists ────────────────────────────────────────────────────── */ .admin-dl { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: .4375rem 1.125rem; margin: 0; font-size: .875rem; } .admin-dl dt { color: var(--admin-muted); font-weight: 400; } .admin-dl dd { margin: 0; } /* ── Two-factor enrolment ────────────────────────────────────────────────── */ .admin-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); gap: .5rem; margin: .75rem 0; padding: 0; list-style: none; } .admin-codes li { font-family: var(--bs-font-monospace); background: var(--bs-body-bg); border: 1px solid var(--admin-border); border-radius: .375rem; padding: .4375rem .625rem; text-align: center; letter-spacing: .05em; } .admin-key { font-family: var(--bs-font-monospace); background: var(--bs-body-bg); border: 1px solid var(--admin-border); border-radius: .375rem; padding: .5625rem .75rem; display: inline-block; letter-spacing: .12em; word-break: break-all; } .admin-code-input { font-family: var(--bs-font-monospace); letter-spacing: .3em; font-size: 1.1875rem; text-align: center; } /* ── Filter tabs ─────────────────────────────────────────────────────────── */ .admin-tabs { display: flex; gap: .25rem; flex-wrap: wrap; } .admin-tabs a { padding: .375rem .8125rem; border-radius: 2rem; /* pill, like the brand's buttons */ text-decoration: none; font-size: .8125rem; font-weight: 700; color: var(--admin-muted); border: 1px solid var(--admin-border); background: var(--admin-surface); } .admin-tabs a:hover { color: var(--admin-orange); border-color: var(--admin-orange); } .admin-tabs a.active { background: var(--admin-orange); border-color: var(--admin-orange); color: #fff; } .admin-photo { max-width: 100%; border-radius: var(--bs-border-radius); border: 1px solid var(--admin-border); } .admin-muted { color: var(--admin-muted); } .admin-note { color: var(--admin-muted); font-size: .78125rem; margin-top: .625rem; } @media (max-width: 40rem) { .admin-dl { grid-template-columns: 1fr; gap: .125rem 0; } .admin-dl dd { margin-bottom: .5625rem; } }