/* =================================================================== älg // DASH — design tokens Palette: graphite night + glacier ice + oak amber (sparingly) Type: Manrope (display/body) + IBM Plex Mono (data/telemetry) Signature: instrument-cluster gauges with a needle-sweep reveal =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { --bg: #0F1319; --surface: #161C24; --surface-raised: #1D2530; --line: #29323D; --line-soft: #1F2731; --ice: #8FD3E8; --ice-dim: rgba(143, 211, 232, 0.14); --oak: #D98A4A; --oak-dim: rgba(217, 138, 74, 0.16); --text: #EDEFF2; --text-muted: #8792A1; --text-faint: #576373; --good: #7FD9A6; --warn: #E0B23D; --danger: #E2685F; --danger-dark: #932E28; /* Pastel text colors used on top of low-opacity tinted panels (error banners, alert pills, service notices) — split out as their own variables specifically so the light theme can swap them for darker equivalents; the pale versions below read fine on this dark background but would be nearly invisible on a light one. */ --danger-text: #F3B4AE; --warn-text: #EFD9A0; --service-warn-text: #FCE58A; --radius: 16px; --radius-sm: 10px; --font-display: 'Manrope', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* * Light theme — same semantic variable names, redesigned values, not * a mechanical inversion. Every accent color that worked as a bright * pop against near-black needed re-checking for contrast against a * light background instead; several needed to go noticeably darker * and more saturated to stay legible (e.g. --ice went from a pale sky * blue to a real teal, since the original would practically vanish on * white). Applied via a data-theme attribute on , set server-side * from the logged-in user's saved preference — no flash of the wrong * theme on load. */ [data-theme="light"] { --bg: #F1F4F7; --surface: #FFFFFF; --surface-raised: #F1F3F6; --line: #D7DEE5; --line-soft: #E8ECF0; --ice: #0E7FA3; --ice-dim: rgba(14, 127, 163, 0.10); --oak: #B8611F; --oak-dim: rgba(184, 97, 31, 0.12); --text: #1A2027; --text-muted: #5B6572; --text-faint: #7C8794; --good: #1E9E5C; --warn: #A9760A; --danger: #C93B31; --danger-dark: #7A2019; --danger-text: #93261C; --warn-text: #7A5A0A; --service-warn-text: #6B5500; } /* * Swedish theme — navy base with real blue in it (not neutral gray), * white text, and the flag's blue/gold reimagined as the accent pair * rather than used as literal surface colors — flat flag-yellow as a * background or running text turns out harsh and low-contrast at any * real size, so gold here is a softer, warmer variant that still * reads unmistakably "the flag" without being uncomfortable to look * at. Status colors (good/warn/danger) deliberately stay the same * semantic colors as the other themes — green still means OK, red * still means trouble — the Swedish identity lives in the base * surfaces, text, and primary accent, not in overriding what a status * color means. */ [data-theme="swedish"] { --bg: #0A1428; --surface: #0F1D38; --surface-raised: #16274A; --line: #2A3F66; --line-soft: #1C2D50; --ice: #E0AE3E; --ice-dim: rgba(224, 174, 62, 0.14); --oak: #7EC4E8; --oak-dim: rgba(126, 196, 232, 0.16); --text: #F5F8FC; --text-muted: #9FB4D6; --text-faint: #64789E; --good: #7FD9A6; --warn: #E0B23D; --danger: #E2685F; --danger-dark: #932E28; --danger-text: #F3B4AE; --warn-text: #EFD9A0; --service-warn-text: #FCE58A; } [data-theme="swedish"] body { background-image: radial-gradient(circle at 15% -10%, rgba(224,174,62,0.07), transparent 45%), radial-gradient(circle at 100% 10%, rgba(126,196,232,0.06), transparent 40%); } /* * Fuel gauge and lease gauge tiers, Swedish theme only — deliberately * NOT routed through --good/--oak, since those are already repurposed * as this theme's general accent pair (gold/sky-blue) and using them * here would mean the gauge's "warning" tier renders as blue instead * of a warning color. These tiers get their own explicit colors: * flag-yellow for "fine", a genuine orange for "watch it", and the * same red used everywhere else for "trouble" — the red tier doesn't * need to change, red already means the same thing in every theme. */ [data-theme="swedish"] .gauge.tier-green .value-ring { stroke: #FECC02; } [data-theme="swedish"] .gauge.tier-orange .value-ring { stroke: #E8821E; } [data-theme="swedish"] .lease-gauge .value-ring { stroke: #FECC02; } [data-theme="swedish"] .lease-gauge.time-warn .value-ring { stroke: #E8821E; } /* Driving-history bars unified to the same flag-yellow as the gauges above, instead of the softer general accent gold (--ice) — those were two visibly different yellows sitting side by side. */ [data-theme="swedish"] .month-box-bar { background: #FECC02; } * { box-sizing: border-box; } /* Always reserves scrollbar-gutter space, whether or not a given page is actually tall enough to need one — without this, a short page (Profile) and a tall one (Dashboard) have slightly different *available* widths, so the centered .main/.topbar/.site-footer content shifts a few pixels left or right depending on which page you're on. This is what made navigating between pages feel like things were subtly moving around. */ html { overflow-y: scroll; scrollbar-gutter: stable; } html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-display); } body { background-image: radial-gradient(circle at 15% -10%, rgba(143,211,232,0.06), transparent 45%), radial-gradient(circle at 100% 10%, rgba(217,138,74,0.05), transparent 40%); } /* Same idea, much subtler — the dark theme's gradient wash reads as moody atmosphere; at full strength on a light background it just looks like a smudge. */ [data-theme="light"] body { background-image: radial-gradient(circle at 15% -10%, rgba(14,127,163,0.05), transparent 45%), radial-gradient(circle at 100% 10%, rgba(184,97,31,0.04), transparent 40%); } a { color: inherit; } button, input { font-family: inherit; } ::selection { background: var(--ice-dim); color: var(--text); } /* ---------- Topographic backdrop (login) ---------- */ .contour-field { position: fixed; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none; } /* ---------- Login ---------- */ .login-page-wrap { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .login-shell { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 32px 32px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); position: relative; } .login-mark { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 28px; } /* Same clean flag-patch style, but hanging off the bottom edge of a vehicle card instead of sitting flush in a seam — positioned at 75% across, not centered, per your placement request. Lives on the OUTER .car-card (overflow: visible) so it can actually spill past the card's own bottom border; .car-card-inner still clips everything else (photo bleed, corner glow) as before. Landscape, matching the real Swedish flag's actual proportions (roughly 8:5 width:height) rather than the arbitrary portrait shape this had before — straddles the bottom border line symmetrically. */ .car-card-flag-tag { position: absolute; bottom: -21px; left: 85%; transform: translateX(-50%); width: 30px; height: 19px; background: #006AA7; box-shadow: 0 2px 5px rgba(0,0,0,0.45); z-index: 2; } .car-card-flag-tag::before { content: ''; position: absolute; left: 10px; top: 0; width: 4px; height: 100%; background: #FECC02; } .car-card-flag-tag::after { content: ''; position: absolute; left: 0; top: 7.5px; width: 100%; height: 4px; background: #FECC02; } .login-logo { height: 44px; width: auto; display: block; } .login-mark .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 12px var(--ice); } .login-mark span { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .login-card h1 { font-size: 22px; font-weight: 700; margin: 0 0 20px; } #loginLoadingView { text-align: center; padding: 20px 0; } .login-spinner { width: 32px; height: 32px; margin: 0 auto 16px; border: 3px solid var(--line); border-top-color: var(--ice); border-radius: 50%; animation: login-spin 0.8s linear infinite; } @keyframes login-spin { to { transform: rotate(360deg); } } .login-loading-text { color: var(--text-muted); font-size: 14px; margin: 0; } .login-card p.sub { font-size: 14px; color: var(--text-muted); margin: 0 0 28px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 6px; } .field input { width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.15s ease; } .field input:focus { border-color: var(--ice); } /* * Same dark styling as .field input above, but NOT scoped to a .field * wrapper — this is the actual root cause of most look-inconsistent * form controls in Admin: any input/select/textarea sitting in a plain * div instead of .field (the Driver dropdown, custom-greetings * textarea, several others) fell through to the browser's stock * light-mode appearance with no styling at all. One general rule here * closes that gap everywhere at once, rather than chasing individual * missed spots one at a time. */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], select, textarea { padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s ease; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus, select:focus, textarea:focus { border-color: var(--ice); } select { cursor: pointer; } /* For selects that also carry a fixed inline height (Driver, Access level) — the general select rule's padding (12px top+bottom, 24px total) barely leaves room for the text inside a 38px box, which is what was actually making that text look cramped/hard to read, not a font or color issue this time. Less vertical padding here so the text has proper breathing room within that fixed height. */ .select-compact { padding: 6px 10px; } /* Native