@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");:root {
--text: #6b6375;
--text-h: #08060d;
--bg: #fff;
--border: #e5e4e7;
--code-bg: #f4f3ec;
--accent: #aa3bff;
--accent-bg: rgba(170, 59, 255, 0.1);
--accent-border: rgba(170, 59, 255, 0.5);
--social-bg: rgba(244, 243, 236, 0.5);
--shadow:
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
--mono: ui-monospace, Consolas, monospace;
font: 18px/145% var(--sans);
letter-spacing: 0.18px;
color-scheme: light dark;
color: var(--text);
background: var(--bg);
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (max-width: 1024px) {
font-size: 16px;
}
}
@media (prefers-color-scheme: dark) {
:root {
--text: #9ca3af;
--text-h: #f3f4f6;
--bg: #16171d;
--border: #2e303a;
--code-bg: #1f2028;
--accent: #c084fc;
--accent-bg: rgba(192, 132, 252, 0.15);
--accent-border: rgba(192, 132, 252, 0.5);
--social-bg: rgba(47, 48, 58, 0.5);
--shadow:
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
}
#social .button-icon {
filter: invert(1) brightness(2);
}
}
body {
margin: 0;
}
#root {
width: 1126px;
max-width: 100%;
margin: 0 auto;
/* Käyttäjäpalaute 2026-06-05: text-align: center poistettu — tämä oli
Vite-template-jäänne joka periytyi KAIKKEEN sovellukseen ja
aiheutti että kortit (Notifications, VehicleDetail ActionRow,
ReserveVehicleSheet otsikko ym.) renderöityivät keskitettyinä
vaikka komponentit eivät sitä halunneet. Paikat jotka oikeasti
tarvitsevat keskityksen (.login-title, .profile-name, .modal-card,
.timer-display, .sheet-header) asettavat text-align:center
eksplisiittisesti — joten tämä muutos ei riko niitä. */
text-align: left;
border-inline: 1px solid var(--border);
min-height: 100svh;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
h1,
h2 {
font-family: var(--heading);
font-weight: 500;
color: var(--text-h);
}
h1 {
font-size: 56px;
letter-spacing: -1.68px;
margin: 32px 0;
@media (max-width: 1024px) {
font-size: 36px;
margin: 20px 0;
}
}
h2 {
font-size: 24px;
line-height: 118%;
letter-spacing: -0.24px;
margin: 0 0 8px;
@media (max-width: 1024px) {
font-size: 20px;
}
}
p {
margin: 0;
}
code,
.counter {
font-family: var(--mono);
display: inline-flex;
border-radius: 4px;
color: var(--text-h);
}
code {
font-size: 15px;
line-height: 135%;
padding: 4px 8px;
background: var(--code-bg);
}
/* Käyttäjäpalaute 2026-06-09: desktop-ympäristössä #root:n 1126 px:n
leveys tekisi split-screen-näkymistä (Login + DesktopShell) kapean
keskellä ruutua. Desktopilla otetaan koko leveys käyttöön. Mobile-
tyyli säilyy alle 1024 px:n näytöillä. */
@media (min-width: 1024px) {
#root {
width: 100%;
max-width: 100%;
border-inline: none;
}
}
:root {
--bg: #ffffff;
--bg2: #faf7f2; /* Sandstone — alias --sandstone:lle, monessa
inline-tyylissä vakiintunut alias jonka oletuksena
odotettiin olevan undefined; nyt eksplisiittinen
hero-tausta. Käyttäjäpalaute 2026-06-06:
vaalennettu 50 % kohti valkoista (#F5EFE6 → #FAF7F2). */
--sandstone: #faf7f2; /* Lämmin sand-vaalea hero:n taustaksi (top-bar +
page-header-card + inline-herojen tausta).
Käyttäjäpalaute 2026-06-06: vaalennettu
(#F5EFE6 → #FAF7F2) jotta disabloidut
painikkeet erottuvat paremmin. */
--surface: #f5f5f7;
--surface2: #ebebed;
--text: #1d1d1f;
--text2: #6e6e73;
--text3: #aeaeb2;
/* ── UUSI ORANSSI VÄRITYS ── */
--accent: #ff7a00; /* Pääväri: Vahva oranssi */
--cyan: #ffd2a6; /* Kakkosväri (aiemmin syyaani): Vaalea pastellioranssi liukuväreihin */
--green: #30d158;
--yellow: #ffd60a;
--orange: #ff9f0a;
--red: #ff3b30;
--shadow: 0 2px 16px rgba(255, 122, 0, 0.08); /* Oranssiin taittava hehku */
--shadow-lg: 0 8px 32px rgba(255, 122, 0, 0.15);
--radius: 16px;
--radius-sm: 10px;
--radius-lg: 24px;
--font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
--transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.app-shell.dark {
--bg: #121212;
/* Sandstone:n tumma vastike — lämmin tumma sävy joka erottuu --bg:stä
muutamalla pisteellä mutta säilyttää brändin warmth:n. */
--bg2: #1f1c19;
--sandstone: #1f1c19;
--surface: #1e1e1e;
--surface2: #2c2c2e;
--text: #f5f5f7;
--text2: #aeaeb2;
--text3: #6e6e73;
/* ── TUMMAN TILAN ORANSSI ── */
--accent: #ff9500;
--shadow: 0 2px 16px rgba(255, 149, 0, 0.2);
--shadow-lg: 0 8px 32px rgba(255, 149, 0, 0.3);
}
.app-shell.dark .vehicle-card {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.app-shell {
background: var(--bg);
color: var(--text);
transition:
background-color 0.3s ease,
color 0.3s ease; /* Pehmeä siirtymä teemaa vaihtaessa */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* HTML ja body käyttävät samaa taustaväriä — sulautuvat selaimen reunoihin */
html,
body {
background: var(--bg);
color: var(--text);
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100dvh;
}
body {
font-family: var(--font);
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
/* Form-elementit eivät peri body:n fonttia oletuksena (selainten oma
default Arial/Helvetica). Pakotetaan käyttämään brand-fonttia kaikkialla
jotta esim. button-tekstit (huoltokirjan tabit, tuntikirjauksen
Aloita/Tauko/Lopeta, navbar) renderöityvät Plus Jakarta Sans:lla.
inherit periyttää body → var(--font). */
button, input, textarea, select {
font-family: inherit;
}
/* Dark-tilassa html/body myös tumma — ilman tätä välilyönti on valkoinen */
html:has(.app-shell.dark),
body:has(.app-shell.dark) {
background: #121212;
}
/* ── Shell ── */
.app-shell {
width: 100%;
max-width: 430px;
height: 100vh;
height: 100dvh;
margin: 0 auto;
background: var(--bg);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
/* Safe-area respect — sisältö ei mene notch/home-indicator alueelle */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
/* Käyttäjäpalaute kuva 2: root-hero-välilehdillä (Raportit/Ilmoitukset/
Ylläpito) otsikon yläpuolinen turva-alue (status bar / notch, =
padding-top: env(safe-area-inset-top)) värjätään sandstoneksi jotta se
sulautuu hero-kenttään saumattomasti. ::before täyttää tarkalleen
padding-top-kaistan (top:0 → padding-boxin yläreuna). Ilman notch:ia
env() = 0 → näkymätön. App.jsx lisää luokan vain mobiilissa root-tilassa
(ei Profile-overlay:n päällä). */
.app-shell--sandstone-top::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: env(safe-area-inset-top);
background: var(--sandstone);
z-index: 0;
pointer-events: none;
}
/* ── Login ── */
.login-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 60px 32px 40px;
animation: fadeIn 0.6s ease;
position: relative;
overflow: hidden;
}
.theme-toggle-btn {
position: absolute;
top: 24px;
right: 24px;
background: var(--surface);
border: 1.5px solid var(--surface2);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text);
transition: var(--transition);
}
.theme-toggle-btn:active {
transform: scale(0.9);
}
.login-logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--accent), var(--cyan));
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
box-shadow: 0 8px 24px rgba(0, 122, 255, 0.25);
}
.login-logo svg {
width: 40px;
height: 40px;
color: #fff;
}
.login-title {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.5px;
text-align: center;
}
.login-subtitle {
font-size: 15px;
color: var(--text2);
text-align: center;
margin-bottom: 32px;
}
.login-buttons {
display: flex;
gap: 12px;
width: 100%;
margin-top: auto;
}
/* Login-näkymän pill-input:ien placeholder — valkoinen sävy
yhdenmukaisesti input-tekstin ja painikkeiden valkoisen tekstin kanssa. */
.login-screen input::placeholder {
color: rgba(255, 255, 255, 0.65);
font-weight: 500;
}
.login-screen input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.65);
}
/* Chromen/Edge:n autofill ohittaa muuten meidän color- ja background-arvot
omilla "keltaisilla" tyylellään. Pakotetaan teksti valkoiseksi ja
tausta läpinäkyväksi 1000 px:n inset-shadowilla (= riittävän iso ettei
alkuperäinen autofill-keltainen näy). transition-trikki estää myös
välähdystä fokusvaiheessa. font-family-perintö varmistetaan myös. */
.login-screen input:-webkit-autofill,
.login-screen input:-webkit-autofill:hover,
.login-screen input:-webkit-autofill:focus,
.login-screen input:-webkit-autofill:active {
-webkit-text-fill-color: #fff !important;
-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
caret-color: #fff;
transition: background-color 5000s ease-in-out 0s;
font: 700 14px/1 var(--font) !important;
}
/* Uudelle Login-kortille (.login-card-input) sama autofill-override,
mutta tumma teksti ja valkoinen tausta — kortin valkoinen tausta
pakottaa autofill:n näyttämään yhtenäiseltä eikä Chromen oletus-
keltaiselta/harmaalta. */
.login-card-input:-webkit-autofill,
.login-card-input:-webkit-autofill:hover,
.login-card-input:-webkit-autofill:focus,
.login-card-input:-webkit-autofill:active {
-webkit-text-fill-color: var(--text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
caret-color: var(--text);
transition: background-color 5000s ease-in-out 0s;
font: 600 14px/1 var(--font) !important;
}
/* ── Buttons ── */
.btn-secondary {
flex: 1;
padding: 16px;
border-radius: var(--radius);
border: 1.5px solid var(--surface2);
background: var(--bg);
font-family: var(--font);
font-size: 16px;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: var(--transition);
}
.btn-secondary:active {
transform: scale(0.97);
}
.btn-primary {
flex: 1;
padding: 16px;
border-radius: var(--radius);
border: none;
background: var(--text);
font-family: var(--font);
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
transition: var(--transition);
}
.btn-primary:active {
transform: scale(0.97);
}
/* ── Page ── */
.page {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 0 20px;
padding-bottom: 100px;
-webkit-overflow-scrolling: touch;
}
.page-enter {
animation: fadeIn 0.25s ease-out;
}
.content-slide-up {
animation: slideUpItem 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.header-greeting {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.5px;
padding-top: 20px;
line-height: 1.2;
}
.header-sub {
font-size: 15px;
color: var(--text2);
margin-top: 2px;
font-weight: 500;
}
/* ── Time Tracking ── */
.shift-status-bar {
margin-top: 12px;
padding: 8px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: var(--transition);
}
.shift-status-bar.idle {
background: var(--surface);
color: var(--text2);
}
.shift-status-bar.working {
background: rgba(48, 209, 88, 0.12);
color: #1a8f3c;
}
.shift-status-bar.paused {
background: rgba(255, 214, 10, 0.15);
color: #a68500;
}
.clock-btn-area {
display: flex;
justify-content: center;
align-items: center;
margin-top: 28px;
gap: 20px;
}
.clock-in-btn {
width: 150px;
height: 150px;
border-radius: 36px;
background: var(--bg);
border: none;
box-shadow:
var(--shadow-lg),
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--bounce);
position: relative;
overflow: hidden;
}
.clock-in-btn::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
rgba(0, 122, 255, 0.04) 0%,
transparent 70%
);
opacity: 0;
transition: var(--transition);
}
.clock-in-btn:hover::after {
opacity: 1;
}
.clock-in-btn:active {
transform: scale(0.93);
}
.action-btn {
width: 130px;
height: 130px;
border-radius: 30px;
background: var(--bg);
border: none;
box-shadow:
var(--shadow-lg),
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: var(--bounce);
}
.action-btn:active {
transform: scale(0.93);
}
.action-btn-label {
font-size: 12px;
font-weight: 600;
color: var(--text2);
font-family: var(--font);
}
.timer-display {
text-align: center;
margin-top: 20px;
font-size: 48px;
font-weight: 300;
letter-spacing: 2px;
font-variant-numeric: tabular-nums;
color: var(--text);
transition: var(--transition);
}
.timer-display.counting {
color: var(--green);
}
.timer-display.paused-timer {
color: var(--orange);
}
.timer-display.final-animation {
animation: countUpReveal 1.5s ease-out;
}
/* ── Equipment ── */
.equip-section {
margin-top: 20px;
}
.equip-reserve-btn {
width: 100%;
padding: 14px 20px;
border-radius: var(--radius);
border: 1.5px solid var(--surface2);
background: var(--bg);
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--text);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.equip-reserve-btn:active {
transform: scale(0.97);
}
.reserved-card {
background: var(--surface);
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 8px;
animation: slideUpItem 0.3s ease both;
}
.reserved-card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.reserved-card-title {
font-weight: 700;
font-size: 15px;
}
.reserved-card-plate {
display: inline-flex;
padding: 2px 8px;
border-radius: 5px;
border: 1.5px solid var(--text);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
margin-top: 3px;
}
.reserved-card-since {
font-size: 12px;
color: var(--text2);
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.reserved-card-actions {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.reserved-action-btn {
padding: 8px 14px;
border-radius: 100px;
border: none;
font-family: var(--font);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 5px;
}
.reserved-action-btn:active {
transform: scale(0.95);
}
.reserved-action-btn.tankkaus {
background: rgba(0, 122, 255, 0.1);
color: var(--accent);
}
.reserved-action-btn.logout {
background: rgba(255, 59, 48, 0.08);
color: var(--red);
}
/* ── Vehicle Picker ── */
.vehicle-pick-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--surface);
cursor: pointer;
transition: var(--transition);
}
.vehicle-pick-item:last-child {
border-bottom: none;
}
.vehicle-pick-item:active {
opacity: 0.7;
}
.vehicle-pick-name {
font-weight: 600;
font-size: 15px;
}
.vehicle-pick-plate {
font-size: 12px;
color: var(--text2);
}
.vehicle-pick-status {
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 100px;
}
.vehicle-pick-status.vapaa {
background: rgba(48, 209, 88, 0.12);
color: #1a8f3c;
}
.vehicle-pick-status.varattu {
background: rgba(255, 149, 10, 0.12);
color: #b36d00;
}
/* ── Peek Sheet ── */
.peek-sheet {
position: fixed;
bottom: 80px;
left: 50%;
width: 100%;
max-width: 430px;
background: var(--bg);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08);
z-index: 20;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
max-height: 70vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.peek-header {
padding: 10px 24px 8px;
cursor: pointer;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
}
.peek-drag {
width: 40px;
height: 4px;
border-radius: 100px;
background: var(--text3);
margin-bottom: 10px;
}
.peek-title-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.peek-title {
font-size: 18px;
font-weight: 700;
}
.peek-content {
padding: 0 24px 24px;
overflow-y: auto;
flex: 1;
}
.peek-preview {
padding: 0 24px 12px;
}
/* ── Bottom Sheet ── */
/* ── Sheet overlay (sumennettu tausta) ── */
.sheet-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 30;
animation: fadeIn 0.25s ease;
}
/* Bottom-sheet aktiivisena: globaali BackButton piilotetaan jotta käyttäjä
sulkee sheet:n drag-handlella tai overlay-klikkauksella (eikä back-toiminolla
joka veisi koko sivun taakse). Käyttäjäpalaute: "Piilota kun sheet aktiivinen". */
body.sheet-open .back-button {
display: none !important;
}
/* WorkShiftGrid natiivi vaakaa-scroll — piilotetaan scrollbar puhtaan
visuaalisen ilmeen vuoksi. scroll-snap-type tekee snapping:n päivätarkasti. */
.work-shift-grid-scroll {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.work-shift-grid-scroll::-webkit-scrollbar {
display: none; /* Chromium/Safari */
}
.bottom-sheet {
position: fixed;
/* Sheet ulottuu AIVAN viewport:n alaosaan (bottom:0) jotta ei jää harmaa
kaista navbar-wrap:n top-padding-alueen kohdalle.
Navbar wrap (z-index 60) jää sheet:n (z-index 35) päälle eli kelluu
visuaalisesti edelleen — padding-bottom suojaa sisällön niin että
scrollattava lista jää navbar-pilli:n yläpuolelle.
94 px = pilli (~64) + wrap padding top (10) + bottom (10) + breathing.
env() iOS:n safe-area-tukeen. */
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 430px;
background: var(--bg);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
z-index: 35;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Max-height: koko ruutu (sheet ulottuu bottom:0 → ei vähennystä). */
max-height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
padding-bottom: calc(94px + env(safe-area-inset-bottom));
}
.bottom-sheet.closed {
/* Slide-out matkaa: koko sheet:n korkeus (alas viewport:n ulkopuolelle). */
transform: translateX(-50%) translateY(100%);
}
.bottom-sheet.open {
transform: translateX(-50%) translateY(0);
}
.sheet-header {
padding: 16px 24px 12px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.sheet-drag-handle {
width: 40px;
height: 4px;
border-radius: 100px;
background: var(--text3);
margin: 0 auto 12px;
}
.sheet-title {
font-size: 20px;
font-weight: 700;
}
.sheet-content {
padding: 0 24px 24px;
overflow-y: auto;
flex: 1;
}
/* ── Shift Cards ── */
.shift-card {
background: var(--surface);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition);
}
.shift-card:active {
transform: scale(0.98);
}
.shift-date {
font-weight: 700;
font-size: 15px;
}
.shift-times {
font-size: 13px;
color: var(--text2);
margin-top: 2px;
}
.shift-total {
font-size: 18px;
font-weight: 700;
color: var(--accent);
}
.add-shift-btn {
width: 100%;
padding: 14px;
border-radius: var(--radius);
border: 2px dashed var(--surface2);
background: transparent;
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: var(--transition);
margin-top: 4px;
}
.add-shift-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ── Modal ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
animation: fadeIn 0.2s ease;
}
.modal-card {
background: var(--bg);
border-radius: var(--radius-lg);
padding: 32px 24px 24px;
width: 100%;
max-width: 340px;
text-align: center;
box-shadow: var(--shadow-lg);
animation: scaleIn 0.3s var(--bounce);
}
.modal-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.modal-text {
font-size: 15px;
color: var(--text2);
margin-bottom: 24px;
}
.modal-buttons {
display: flex;
gap: 10px;
}
/* ── Bottom Nav ── */
/* ── Vehicle List ── */
.vehicle-toolbar {
display: flex;
gap: 10px;
align-items: center;
padding-top: 20px;
margin-bottom: 16px;
}
.search-input-wrap {
display: flex;
align-items: center;
background: var(--surface);
border-radius: 100px;
padding: 10px 14px;
gap: 8px;
transition: all 0.35s ease;
/* flex:1 = täyttää aina toolbar:n vapaan tilan. Lisää-nappi vie oman
leveytensä oikealta, ja kun se piilotetaan (hidden-btn → width:0),
search venyy automaattisesti yli sen leveyden. Aiempi flex:0 0 auto
jätti turhaa tyhjää tilaa hakukentän ja Lisää-napin väliin. */
flex: 1;
min-width: 120px;
}
.search-input-wrap.expanded {
/* Sama flex:1 kuin perustasolla — .expanded on toistaiseksi vain
paikanvaraaja jos tulevaisuudessa halutaan eri styling fokuksessa. */
flex: 1;
}
.search-input-wrap input {
border: none;
background: none;
outline: none;
font-family: var(--font);
font-size: 15px;
color: var(--text);
width: 100%;
min-width: 0;
}
.search-input-wrap input::placeholder {
color: var(--text3);
}
.toolbar-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 100px;
border: 1.5px solid var(--surface2);
background: var(--bg);
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--text);
cursor: pointer;
white-space: nowrap;
transition: var(--transition);
flex-shrink: 0;
}
.toolbar-btn:active {
transform: scale(0.95);
}
.toolbar-btn.hidden-btn {
opacity: 0;
width: 0;
padding: 0;
border: none;
overflow: hidden;
pointer-events: none;
}
.vehicle-card {
background: var(--bg);
border-radius: var(--radius);
padding: 18px 20px;
margin-bottom: 10px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
display: flex;
justify-content: space-between;
align-items: flex-start;
cursor: pointer;
transition: var(--transition);
position: relative;
}
.vehicle-card:active {
transform: scale(0.98);
background: var(--surface);
}
.vehicle-make {
font-size: 20px;
font-weight: 700;
}
.plate-badge {
display: inline-flex;
align-items: center;
/* Aito rekisterikilpi: valkea tausta + mustat kirjaimet riippumatta teemasta */
background: #ffffff;
color: #000000;
padding: 3px 10px;
border-radius: 5px;
/* Tupla-reunus: ulkoreuna (border) + valkea valitila + sisareuna (inset shadow) */
border: 1.5px solid #000000;
box-shadow:
inset 0 0 0 1.5px #ffffff,
inset 0 0 0 1.5px #000000;
font-size: 13px;
font-weight: 700;
margin-top: 4px;
letter-spacing: 0.5px;
}
.vehicle-status {
font-size: 13px;
font-weight: 600;
padding: 5px 12px;
border-radius: 100px;
background: var(--surface);
color: var(--text2);
}
.vehicle-status.ajossa {
background: rgba(48, 209, 88, 0.12);
color: #1a8f3c;
}
.vehicle-status.pysäköity {
background: var(--surface);
color: var(--text2);
}
/* Trip-state-koneen (migraatio 051) "Pysähtynyt"-tila — auto on
pysähtynyt mutta 3 min grace pyörii vielä. UI:lle oranssi väri
joka erottuu sekä vihreästä Ajossa-tilasta että harmaasta
Pysäköity-tilasta. Sama oranssi kuin brändin --accent. */
.vehicle-status.pysähtynyt {
background: rgba(255, 122, 0, 0.15);
color: #cc6200;
}
/* ───────────────────────────────────────────────────────────────────────────
Kartan pisteet — kolme tilaa: driving / stopped / parked.
Käytetään sekä Home.jsx:n FleetMap:ssa (yleisnäkymä, kaikki autot) että
VehicleDetail.jsx:n MapHero:ssa (yksittäinen auto). Tila johdetaan
ensisijaisesti trip_phase:sta, fallback ignition || movement -signaaleista.
Värijärjestelmä on yhdenmukainen status-pillien kanssa:
- go = vihreä (#2E8E5B) = Ajossa
- idle = oranssi (#F26419) = Pysähtynyt, korkea näkyvyys
- rest = terrakotta (#C97A4A) = Pysäköity, pieni ja vaalea
───────────────────────────────────────────────────────────────────────── */
:root {
--pin-go: #2E8E5B; /* driving */
--pin-idle: #F26419; /* stopped */
--pin-rest: #C97A4A; /* parked */
--pin-rest-soft: #F0BB97;
--pin-ember: #FFD9B8;
}
.pin {
--pin-size: 16px;
--pin-core: 7px;
position: relative;
width: var(--pin-size);
height: var(--pin-size);
display: inline-block;
flex: none;
}
/* Click-hit-area on visuaalista palloa selvästi suurempi (~40×40 px) jotta
pieneen pin:iin osuu helposti myös isohkolla sormella mobiilissa.
Käyttäjäpalaute 2026-06-07: pallo oli liian pieni klikattavaksi.
::before on transparentti mutta pointer-events:auto → klikki menee
suoraan emo-elementtiin (.pin) jonka addEventListener käsittelee
pin-click:in. z-index 1 = halojen (0) yli mutta pin-arrow:n (2) alle.
Transparenttina ei vaikuta visuaaliseen ulkoasuun.
inset:-12 + pin 16x16 = 40×40 efektiivinen hit-area. pin-parked
(14x14) → 38×38. Apple HIG:n 44 px suositus käytännössä täyttyy.
*/
.pin::before {
content: "";
position: absolute;
inset: -12px;
border-radius: 50%;
background: transparent;
pointer-events: auto;
z-index: 1;
}
.pin-core,
.pin-halo,
.pin-ring {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
}
/* ── DRIVING — vihreä pulssi ── */
.pin-driving .pin-halo {
width: var(--pin-size); height: var(--pin-size);
background: var(--pin-go);
opacity: 0;
animation: pin-pulse 2.4s ease-out infinite;
}
.pin-driving .pin-halo.delay { animation-delay: 1.2s; }
.pin-driving .pin-ring {
width: calc(var(--pin-core) + 4px);
height: calc(var(--pin-core) + 4px);
background: #fff;
box-shadow: 0 1px 3px rgba(26, 22, 18, 0.18), 0 0 0 1px rgba(26, 22, 18, 0.04);
}
.pin-driving .pin-core {
width: var(--pin-core); height: var(--pin-core);
background: var(--pin-go);
}
/* ── DRIVING — suuntanuoli pin:in yllä ──
Käyttäjäpalaute 2026-06-07: vihreä kolmio valkoisella reunalla joka
osoittaa ajoneuvon menosuuntaan. Vain driving-tilassa (pysähtynyt/
pysäköity-pinneillä suunta ei ole merkityksellinen).
Mitat (käyttäjäpalaute 2026-06-07 iter 3: +20% isompi + lähemmäksi):
- viewBox 12×10, path M6 2 L10 8 L2 8 Z (stroke saa 1 px liikkumavaraa)
- render-size 12×10 px (oli 10×8) — 20 % isompi
- stroke 1.25 px SVG-tilassa (skaalautuu suhteessa → näkyvä ~1.25 px)
- top: -6 + height 10 → alareuna pin-bbox:n y=4. Triangle:n näkyvä
alaviiva on arrow.localY=8 → pin.y=2 (vain 0.5 px gap ring:in top
y=2.5:een). Arrow bbox:n alaosa overlap:ää ring:in päälle mutta on
transparenttia → ei visuaalista ristiriitaa, vain "kiinni" -look.
Rotation pivot: nuolen alareunan KESKI + 4 px alaspäin = pin:in
keskipiste (8,8). Tämä saa nuolen kiertämään pin:in ympäri
kompassi-neulan tavoin — heading 0° = ylös, 90° = oikealle, 180° = alas.
transition: smooth swing 0.55s (käyttäjäpalaute: snäppi ei tarvita).
--pin-heading CSS-muuttuja päivittyy JS-puolelta (vehiclePin.js
initPinHeading / animatePinHeading).
*/
.pin-arrow {
position: absolute;
top: -6px;
left: 50%;
width: 12px;
height: 10px;
transform: translateX(-50%) rotate(var(--pin-heading, 0deg));
transform-origin: 50% calc(100% + 4px);
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
/* z-index halojen yli (halot scale 1.8 saavuttavat nuolen alueen,
mutta ovat silloin opacity 0 → ei näkyvää konfliktia). */
z-index: 2;
}
.pin-arrow svg {
width: 100%;
height: 100%;
display: block;
fill: var(--pin-go);
stroke: #ffffff;
stroke-width: 1.25;
stroke-linejoin: round;
/* Pieni drop-shadow jotta nuoli erottuu vaaleilla karttatausta-alueilla. */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}
@keyframes pin-pulse {
0% { transform: translate(-50%, -50%) scale(0.45); opacity: 0.55; }
70% { opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}
/* ── STOPPED — oranssi pysähdys ── */
.pin-stopped .pin-ring {
width: calc(var(--pin-core) + 4px);
height: calc(var(--pin-core) + 4px);
background: var(--pin-ember);
box-shadow: 0 1px 3px rgba(26, 22, 18, 0.14);
}
.pin-stopped .pin-core {
width: var(--pin-core); height: var(--pin-core);
background: var(--pin-idle);
}
/* ── PARKED — pienempi, terrakotta ── */
.pin-parked {
--pin-size: 14px;
--pin-core: 5px;
}
.pin-parked .pin-ring {
width: calc(var(--pin-size) * 0.66);
height: calc(var(--pin-size) * 0.66);
background: var(--pin-rest-soft);
box-shadow: 0 1px 2px rgba(26, 22, 18, 0.12);
}
.pin-parked .pin-core {
width: var(--pin-core); height: var(--pin-core);
background: var(--pin-rest);
}
.vehicle-status.huollossa {
background: rgba(255, 149, 10, 0.12);
color: #b36d00;
}
.vehicle-alert-badge {
position: absolute;
top: 10px;
right: 10px;
}
.vehicle-reserved-info {
font-size: 11px;
color: var(--accent);
font-weight: 600;
margin-top: 4px;
display: flex;
align-items: center;
gap: 4px;
}
/* ── Vehicle Detail ── */
/* ── Yhtenäinen takaisin-palikki kaikissa näkymissä ── */
.page-back-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 12px 10px;
flex-shrink: 0;
}
.detail-header {
display: flex;
align-items: center;
gap: 12px;
padding-top: 16px;
margin-bottom: 8px;
}
.back-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
}
.back-btn:active {
transform: scale(0.9);
}
.detail-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.detail-update {
text-align: right;
font-size: 12px;
color: var(--text2);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.detail-update-icon {
display: flex;
align-items: center;
gap: 4px;
}
.detail-reserved {
font-size: 13px;
font-weight: 600;
color: var(--red);
margin-top: 5px;
display: flex;
align-items: center;
gap: 4px;
}
/* ── Gauge Grid ── */
.gauge-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.gauge-card {
background: var(--surface);
border-radius: var(--radius);
padding: 14px 16px;
display: grid;
grid-template-columns: 38px 1fr;
align-items: center;
gap: 14px;
}
.gauge-card > svg {
justify-self: center;
}
.gauge-card-text {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
align-items: flex-start;
min-width: 0;
}
.gauge-card-value {
font-size: 17px;
font-weight: 700;
line-height: 1.2;
}
.gauge-card-label {
font-size: 12px;
color: var(--text2);
font-weight: 500;
}
/* ── Metric Card Grid ──
Käyttövoimakohtainen mittaristo. 2-saraketta hybridille (4 korttia 2x2),
3-saraketta ICE/EV:lle (3 korttia rivissa).
Kaksi varianttia ohjaavat layoutia:
--wide (hybridi 2x2): graafi + arvo rivissa, matalampi 130 px
--tall (ICE/EV 3x1): arvo yllä keskitettyna, graafi alla koko leveydella,
korkeampi 165 px
Koko kortti on klikattava - ei erillista nuolta. */
.metric-grid {
display: grid;
gap: 8px;
margin-bottom: 14px;
flex-shrink: 0;
}
.metric-grid--2col { grid-template-columns: 1fr 1fr; }
.metric-grid--3col { grid-template-columns: 1fr 1fr 1fr; }
.metric-card {
background: var(--surface);
border-radius: var(--radius);
/* Käyttäjäpalaute 2026-06-05 (3. kierros): padding sama joka puolella
(7 px) jotta kortin alareuna istuu graafin alareunaan samalla välillä
kuin sivut. Aiemmin 10 px ylä/ala jätti tyhjää tilaa. */
padding: 7px;
display: flex;
flex-direction: column;
position: relative;
user-select: none;
transition: transform var(--transition);
min-width: 0;
}
.metric-card--clickable { cursor: pointer; }
.metric-card--clickable:active { transform: scale(0.98); }
/* min-height poistettu: kortti sulkeutuu sisällön mukaan jotta arvo
tulee tiukasti otsikon alle ja graafin alapuolella ei jää tyhjää.
Käyttäjäpalaute 2026-06-05 (3. kierros). */
/* Header: ikoni + label vierekkain. padding-left antaa pienen sisennyksen
etta icon ei ole liian lahella kortin reunaa, vaikka kortin oma padding
pysyy ennallaan (7 px). */
.metric-card-header {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
min-width: 0;
padding-left: 4px;
}
.metric-card-label {
font-size: 12px;
font-weight: 600;
color: var(--text2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Body - base. Variantit muuttavat suuntaa ja kohdistusta. */
.metric-card-body {
flex: 1;
display: flex;
min-width: 0;
margin-top: 2px;
align-items: center;
gap: 4px;
}
/* Tall-variantti: arvo otsikon alle (justify-content:flex-start) jotta
ei jää tyhjää tilaa otsikon ja arvon väliin. Käyttäjäpalaute 2026-06-05.
Aiempi center keskitti pystysuunnassa, mikä jätti tilaa yläosaan. */
.metric-card--tall .metric-card-body {
flex-direction: column;
justify-content: flex-start;
gap: 4px;
}
/* Wide: rivissa, graafi vasemmalla flex-1, arvo oikeassa reunassa.
metric-card-body säilyttää oletustyylinsä (rivi-suunta) → ei erillistä
sääntöä tarvita. Jos joskus tarvitaan, ovat alla olevat .metric-card--wide
.metric-card-graph yms. tarkennoksia. */
.metric-card--wide .metric-card-graph {
flex: 1;
min-width: 0;
align-self: stretch;
display: flex;
align-items: center;
}
.metric-card--wide .metric-card-value {
font-size: 20px;
white-space: nowrap;
}
/* Tall: pinotettu, value yllä, graafi alla.
Käyttäjäpalaute 2026-06-05: justify-content center → flex-start jotta
arvo asettuu otsikon alle eikä keskelle (tyhjä tila yläosassa pois).
Sääntö ylhäällä rivit 1162-1172 (.metric-card--tall .metric-card-body)
sisältää lopullisen flex-direction + justify-start + gap-määrittelyn. */
.metric-card--tall .metric-card-graph {
width: 100%;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
}
.metric-card--tall .metric-card-value {
/* 19 px: kompakti niin etta XXX XXX km mahtuu yhdelle riville
~107 px korttialueessa, mutta silti riittavan iso lukemaan */
font-size: 19px;
}
.metric-card-value {
font-weight: 700;
color: var(--text);
/* nowrap myos tall-tilassa - estaa pitkien arvojen rivittymisen
(esim. odometeri "888 888 km") */
white-space: nowrap;
}
/* Vihje-teksti oikealla pohjassa, harmaa ja pieni */
.metric-card-hint {
font-size: 10px;
color: var(--text3);
text-align: right;
line-height: 1.3;
align-self: flex-end;
margin-top: 4px;
}
/* ── Heating ── */
.heating-card {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 18px 20px;
margin-bottom: 14px;
}
.heating-card-row {
display: flex;
align-items: center;
gap: 14px;
}
.heating-set-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-radius: 100px;
border: none;
background: var(--yellow);
font-family: var(--font);
font-size: 14px;
font-weight: 700;
color: var(--text);
cursor: pointer;
transition: var(--bounce);
flex-shrink: 0;
}
.heating-set-btn:active {
transform: scale(0.93);
}
.heating-set-btn.heating-active {
background: var(--orange);
}
.heating-info {
flex: 1;
min-width: 0;
}
.heating-info-label {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.heating-info-time {
font-size: 12px;
color: var(--text2);
margin-top: 2px;
}
.heating-info-empty {
font-size: 13px;
color: var(--text3);
}
.temp-display {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.temp-now {
font-size: 11px;
color: var(--text3);
font-weight: 600;
text-align: right;
}
.temp-value {
font-size: 20px;
font-weight: 700;
text-align: right;
}
.heating-cancel-row {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--surface2);
display: flex;
justify-content: flex-end;
}
.heating-cancel-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 100px;
border: none;
background: rgba(255, 59, 48, 0.12);
font-family: var(--font);
font-size: 14px;
font-weight: 700;
color: var(--red);
cursor: pointer;
transition: var(--bounce);
}
.heating-cancel-btn:active {
transform: scale(0.93);
}
.chart-sheet {
height: 75dvh !important;
max-height: 75dvh !important;
}
/* ── Detail List ── */
.detail-list {
background: var(--bg);
border-radius: var(--radius);
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
margin-bottom: 18px;
}
.detail-list-item {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 18px;
cursor: pointer;
transition: background var(--transition);
border-bottom: 1px solid var(--surface);
}
.detail-list-item:last-child {
border-bottom: none;
}
.detail-list-item:active {
background: var(--surface);
}
.detail-list-item-icon {
width: 22px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.detail-list-item-text {
flex: 1;
font-size: 15px;
font-weight: 600;
text-align: left;
}
/* ── Location ── */
.location-section {
margin-bottom: 24px;
}
.location-address {
font-size: 13px;
font-weight: 500;
color: var(--text2);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.map-placeholder {
width: 100%;
height: 180px;
border-radius: var(--radius);
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
color: var(--text3);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
overflow: hidden;
position: relative;
}
.map-placeholder::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
transparent 49%,
var(--surface2) 49%,
var(--surface2) 51%,
transparent 51%
),
linear-gradient(
0deg,
transparent 49%,
var(--surface2) 49%,
var(--surface2) 51%,
transparent 51%
);
background-size: 40px 40px;
opacity: 0.5;
}
.map-placeholder:active {
background: var(--surface2);
}
.map-pin {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
/* ── Heating Sheet Time Picker ── */
.time-picker-wrap {
display: flex;
justify-content: center;
gap: 4px;
align-items: center;
margin: 20px 0;
height: 180px;
position: relative;
}
.time-col {
position: relative;
height: 180px;
width: 80px;
overflow: hidden;
cursor: ns-resize;
touch-action: none;
}
.time-col::before,
.time-col::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 60px;
z-index: 2;
pointer-events: none;
}
.time-col::before {
top: 0;
background: linear-gradient(to bottom, var(--bg) 30%, transparent);
}
.time-col::after {
bottom: 0;
background: linear-gradient(to top, var(--bg) 30%, transparent);
}
.time-col-inner {
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.time-num {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
font-weight: 300;
color: var(--text3);
cursor: pointer;
transition:
color 0.15s ease,
font-size 0.15s ease,
font-weight 0.15s ease;
user-select: none;
}
.time-num.selected {
font-size: 42px;
font-weight: 700;
color: var(--text);
}
.time-sep {
font-size: 42px;
font-weight: 300;
color: var(--text);
display: flex;
align-items: center;
height: 180px;
padding: 0 4px;
}
.quick-btns {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.quick-btn {
padding: 8px 18px;
border-radius: 100px;
border: 1.5px solid transparent;
background: var(--surface);
color: var(--text);
font-family: var(--font);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.quick-btn.active-quick {
background: var(--text);
color: #fff;
border-color: var(--text);
}
.quick-btn:active {
transform: scale(0.95);
}
.date-picker-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.date-picker-input {
flex: 1;
padding: 10px 14px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--surface2);
background: var(--bg);
font-family: var(--font);
font-size: 15px;
color: var(--text);
outline: none;
transition: var(--transition);
}
.date-picker-input:focus {
border-color: var(--accent);
}
.sheet-buttons {
display: flex;
gap: 10px;
margin-top: 16px;
}
.btn-cancel {
flex: 1;
padding: 16px;
border-radius: var(--radius);
border: 1.5px solid var(--surface2);
background: var(--bg);
font-family: var(--font);
font-size: 16px;
font-weight: 600;
color: var(--text2);
cursor: pointer;
}
.btn-confirm {
flex: 1;
padding: 16px;
border-radius: var(--radius);
border: none;
background: linear-gradient(135deg, var(--cyan), var(--accent));
font-family: var(--font);
font-size: 16px;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: var(--transition);
}
.btn-confirm:active {
transform: scale(0.97);
}
/* ── Notifications ── */
.notif-card {
padding: 9px 14px 9px 16px;
border-radius: var(--radius);
background: var(--surface);
margin-bottom: 6px;
/* Eksplisiittinen left-align (käyttäjäpalaute: ennen näkyi keskitettynä —
jokin ulompi parent perii text-align: centerin). */
text-align: left;
}
.notif-card .notif-title {
font-weight: 700;
font-size: 15px;
margin-bottom: 2px;
}
.notif-card .notif-body {
font-size: 13px;
color: var(--text2);
}
.notif-card .notif-time {
font-size: 11px;
color: var(--text3);
margin-top: 3px;
}
/* ── Profile ── */
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--cyan));
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.2);
}
.profile-name {
text-align: center;
font-size: 22px;
font-weight: 700;
}
.profile-role {
text-align: center;
font-size: 14px;
color: var(--text2);
margin-bottom: 32px;
}
.profile-field {
padding: 16px 0;
border-bottom: 1px solid var(--surface);
display: flex;
justify-content: space-between;
}
.profile-field-label {
font-size: 14px;
color: var(--text2);
}
.profile-field-value {
font-size: 14px;
font-weight: 600;
}
.logout-btn {
width: 100%;
padding: 16px;
border-radius: var(--radius);
border: none;
background: rgba(255, 59, 48, 0.08);
font-family: var(--font);
font-size: 16px;
font-weight: 600;
color: var(--red);
cursor: pointer;
margin-top: 32px;
transition: var(--transition);
}
.logout-btn:active {
transform: scale(0.97);
}
/* ── Form ── */
.form-group {
margin-bottom: 16px;
}
.form-label {
font-size: 13px;
font-weight: 600;
color: var(--text2);
margin-bottom: 6px;
display: block;
}
.form-input {
width: 100%;
padding: 12px 16px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--surface2);
background: var(--bg);
font-family: var(--font);
font-size: 15px;
color: var(--text);
outline: none;
transition: var(--transition);
}
.form-input:focus {
border-color: var(--accent);
}
/* ── Ajopäiväkirja ── */
.log-page-header {
display: flex;
align-items: center;
gap: 10px;
padding-top: 16px;
margin-bottom: 4px;
}
.log-page-title {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.4px;
}
.log-vehicle-label {
font-size: 13px;
color: var(--text2);
font-weight: 500;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 6px;
}
.log-month-header {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text3);
padding: 18px 0 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.log-month-km {
font-size: 12px;
font-weight: 700;
color: var(--text2);
}
.log-entry {
background: var(--bg);
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
margin-bottom: 8px;
padding: 13px 16px;
cursor: pointer;
transition: background var(--transition);
}
.log-entry:active {
background: var(--surface);
}
.log-entry-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 5px;
}
.log-entry-left {
display: flex;
flex-direction: column;
gap: 1px;
}
.log-entry-date {
font-size: 12px;
font-weight: 600;
color: var(--text2);
}
.log-entry-times {
font-size: 12px;
color: var(--text3);
}
.log-entry-km {
font-size: 18px;
font-weight: 800;
color: var(--text);
white-space: nowrap;
line-height: 1;
}
.log-entry-km span {
font-size: 11px;
font-weight: 600;
color: var(--text2);
margin-left: 2px;
}
.log-entry-route {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 5px;
}
.log-route-place {
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
.log-route-arrow {
color: var(--text3);
flex-shrink: 0;
font-size: 11px;
font-weight: 700;
}
.log-entry-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.log-meta-purpose {
font-size: 11px;
font-weight: 600;
color: var(--text2);
background: var(--surface);
padding: 2px 8px;
border-radius: 100px;
}
.log-meta-driver {
font-size: 11px;
color: var(--text3);
}
.log-meta-odometer {
font-size: 11px;
color: var(--text3);
}
.log-meta-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--surface2);
flex-shrink: 0;
}
.log-add-btn {
width: 100%;
padding: 14px;
border-radius: var(--radius);
border: 1.5px dashed var(--surface2);
background: transparent;
font-family: var(--font);
font-size: 14px;
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: var(--transition);
margin: 4px 0 24px;
}
.log-add-btn:active {
border-color: var(--accent);
color: var(--accent);
}
.log-summary-bar {
background: var(--surface);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 16px;
display: flex;
justify-content: space-around;
gap: 10px;
}
.log-summary-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.log-summary-value {
font-size: 18px;
font-weight: 800;
}
.log-summary-label {
font-size: 11px;
color: var(--text2);
font-weight: 500;
}
/* ── Trip Detail Overlay ── */
.trip-detail-overlay {
position: fixed;
inset: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 430px;
background: #1c2433;
z-index: 200;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
animation: slideUpFull 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes slideUpFull {
from {
transform: translateX(-50%) translateY(100%);
}
to {
transform: translateX(-50%) translateY(0);
}
}
.td-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 12px;
}
.td-back {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.td-meta {
text-align: center;
flex: 1;
}
.td-date-label {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.45);
text-transform: uppercase;
letter-spacing: 0.8px;
}
.td-title {
font-size: 22px;
font-weight: 800;
color: #fff;
letter-spacing: -0.4px;
margin-top: 2px;
}
.td-sub {
font-size: 13px;
color: rgba(255, 255, 255, 0.45);
margin-top: 1px;
}
.td-map {
margin: 4px 20px 0;
border-radius: 18px;
overflow: hidden;
height: 220px;
background: #253347;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.td-map-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.td-map-grid {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
transparent 49%,
rgba(255, 255, 255, 0.04) 49%,
rgba(255, 255, 255, 0.04) 51%,
transparent 51%
),
linear-gradient(
0deg,
transparent 49%,
rgba(255, 255, 255, 0.04) 49%,
rgba(255, 255, 255, 0.04) 51%,
transparent 51%
);
background-size: 36px 36px;
}
.td-route-line {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.td-dot-start {
width: 14px;
height: 14px;
border-radius: 50%;
background: #30d158;
border: 2.5px solid #fff;
box-shadow: 0 0 8px rgba(48, 209, 88, 0.6);
}
.td-dot-end {
width: 14px;
height: 14px;
border-radius: 50%;
background: #ff9f0a;
border: 2.5px solid #fff;
box-shadow: 0 0 8px rgba(255, 159, 10, 0.6);
}
.td-route-connector {
width: 3px;
height: 52px;
background: linear-gradient(to bottom, #30d158, #007aff, #ff9f0a);
border-radius: 2px;
}
.td-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(255, 255, 255, 0.07);
margin: 20px 20px 0;
border-radius: 14px;
overflow: hidden;
}
.td-stat {
background: #1c2433;
padding: 16px 18px;
}
.td-stat-label {
font-size: 10px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.td-stat-value {
font-size: 20px;
font-weight: 800;
color: #fff;
letter-spacing: -0.3px;
line-height: 1.1;
}
.td-stat-sub {
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
margin-top: 2px;
}
.td-stat.full {
grid-column: 1/-1;
}
.td-section-title {
font-size: 11px;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: 0.8px;
margin: 24px 20px 12px;
}
.td-graph {
margin: 0 20px 32px;
background: rgba(255, 255, 255, 0.04);
border-radius: 14px;
padding: 16px 16px 12px;
overflow: hidden;
}
.td-graph-svg {
width: 100%;
display: block;
}
/* ── Animations ── */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Liikkuva katkoviiva — käytetään aktiivisen ajon ("Ajossa") ja viimeisimmän
pysähdyksen välillä TripsView:n aikajanalla. Tausta siirtyy YLÖSPÄIN
yhden dash-syklin verran (8 px) → dashes näyttävät virtaavan ylös
("Ajossa" -pisteestä poispäin, kohti nykyhetkeä).
8 px = 4 px täytetty + 4 px tyhjä = DASHED_RAIL_STYLE backgroundSize. */
@keyframes rail-flow {
0% { background-position-y: 0; }
100% { background-position-y: -8px; }
}
@keyframes countUpReveal {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideUpItem {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Calendar Grid ── */
.cal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
font-weight: 700;
font-size: 16px;
}
.cal-nav-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--text);
transition: var(--transition);
}
.cal-nav-btn:active {
transform: scale(0.9);
}
.cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-size: 12px;
font-weight: 600;
color: var(--text3);
margin-bottom: 8px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 12px;
}
.cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 15px;
font-weight: 600;
cursor: pointer;
color: var(--text);
transition: var(--transition);
}
.cal-day:hover:not(.disabled):not(.empty) {
background: var(--surface2);
}
.cal-day.selected {
background: var(--accent);
color: #fff;
}
.cal-day.disabled {
color: var(--text3);
cursor: not-allowed;
opacity: 0.35;
}
.cal-day.empty {
cursor: default;
background: transparent;
}
/* Custom overlay for the dropdown to sit above other elements */
.date-picker-dropdown {
/* position: absolute; POISTETTU */
/* top: 100%; POISTETTU */
/* left: 0; POISTETTU */
width: 100%;
background: var(--bg);
border: 1.5px solid var(--surface2);
border-radius: var(--radius-sm);
padding: 16px;
margin-bottom: 16px;
animation: slideUpItem 0.2s ease;
}
/* ── Top Bar & Avatar ── */
.top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 10px;
/* Käyttäjäpalaute 2026-06-06: hero-tausta sandstone-sävyiseksi.
Top-bar muodostaa visuaalisesti yhden lohkon page-header-card:n
kanssa — yhteinen sandstone-väri pitää sen yhtenäisenä. */
background: var(--sandstone);
z-index: 10;
}
.top-bar-title {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.5px;
}
/* Ajoneuvolistan skeleton-placeholder (käyttäjäpalaute 2026-06-12):
latauksen aikana korttien tilalla sykkivät harmaat laatikot — näkymä
rakentuu heti eikä koko ruutu peity loader-overlaylla. Korkeus ~vastaa
VehicleCard:ia jotta layout ei hypi kun oikeat kortit saapuvat.
animationDelay porrastetaan inline-stylellä → aaltomainen syke. */
.skeleton-card {
height: 96px;
border-radius: var(--radius);
background: var(--surface);
animation: skeletonPulse 1.4s ease-in-out infinite;
}
@keyframes skeletonPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* Omat tiedot -asetuslistan rivit (käyttäjäpalaute 2026-06-12):
hiusviiva vain rivien VÄLIIN — sibling-selektori jättää ryhmän
ensimmäisen rivin ilman yläviivaa. */
.profile-settings-row + .profile-settings-row {
border-top: 1px solid var(--bg);
}
.profile-avatar-small {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--cyan));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 15px;
letter-spacing: 1px;
box-shadow: var(--shadow);
cursor: pointer; /* Lisää sormikursorin */
transition: transform var(--bounce);
}
.profile-avatar-small:active {
transform: scale(0.9);
}
/* ── Kirjautumissivun Aaltoanimaatio ── */
.wave-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 350px;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.wave {
position: absolute;
left: 50%;
width: 1000px;
height: 1000px;
margin-left: -500px;
border-radius: 42%;
animation: spin infinite linear;
}
.wave1 {
bottom: -780px;
background: var(--accent);
animation-duration: 24s; /* Tuplattu (aiemmin 12s) -> puolet hitaampi */
}
.wave2 {
bottom: -760px;
background: rgba(255, 122, 0, 0.4);
animation-duration: 36s; /* Tuplattu (aiemmin 18s) */
}
.wave3 {
bottom: -740px;
background: rgba(255, 122, 0, 0.15);
animation-duration: 50s; /* Tuplattu (aiemmin 25s) */
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ── Maintenance View ── */
.maintenance-tabs {
display: flex;
overflow-x: auto;
/* Käyttäjäpalaute kuva 3: jatkaa page-back-header:n sandstone-bändiä alas
pillirivin yli → yhtenäinen sandstone-yläosa joka rajautuu alhaalta
Tulevat/Menneet-folder-tabeihin. */
background: var(--sandstone);
/* Käyttäjäpalaute 2026-06-06: pilli-painikkeet (Huollot/Katsastukset/
Vikakoodit) olivat liian erillään toisistaan — tiivistetty 8→4. Padding-
bottom puolitettu (16→8) jotta väli alla oleviin Tulevat/Menneet
-välilehtiin pieneni. */
gap: 4px;
padding: 0 20px 8px;
scrollbar-width: none; /* Firefox */
}
.maintenance-tabs::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
.m-tab {
padding: 8px 16px;
border-radius: 100px;
background: transparent; /* Ei taustaa valitsemattomana */
color: var(--text3); /* Harmaa teksti */
font-family: var(--font);
font-weight: 700;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
border: none;
transition: var(--transition);
}
.m-tab.active {
background: rgba(255, 122, 0, 0.12); /* Vaalea oranssi tausta */
color: var(--accent); /* Oranssi teksti */
}
.m-summary-grid {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 0 20px 20px;
}
.m-summary-card {
flex: 1; /* Pakottaa kaikki kolme korttia täsmälleen saman levyisiksi */
background: var(--surface);
border-radius: var(--radius);
padding: 16px 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.m-summary-val {
font-size: 16px;
font-weight: 800;
line-height: 1;
}
.m-summary-lbl {
font-size: 10px;
color: var(--text2);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.m-content-panel {
background: var(--bg);
border-radius: var(--radius);
padding: 20px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
min-height: 300px;
animation: fadeIn 0.3s ease;
}
.app-shell.dark .m-content-panel {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
@keyframes markerPulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.25);
opacity: 0.6;
}
}
/* ════════════════════════════════════════════════════════════════════════
BottomNav v2 — läpinäkyvä pilli-rivi 5 painikkeella.
Käytössä uudessa designissa: oranssi sävyt + backdrop-blur + glass-look.
Korvaa aiemman .bottom-nav-wrap-luokan (säilytetään alla legacynä siltä
varalta että jokin paikka viittaa siihen). Pilli-rivi kelluu kelluvana
pohjan päällä — pieni marginaali alareunaan jättää ilmaa.
════════════════════════════════════════════════════════════════════════ */
.bottom-nav-wrap-v2 {
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* Padding kelluttaa rivin näyttöjen reunoista — pieni marginaali jokaiseen
suuntaan. Bottom-padding huomioi iOS-safe-area:n. */
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
z-index: 60;
pointer-events: none;
display: flex;
justify-content: center;
}
.bottom-nav-row-v2 {
pointer-events: auto;
position: relative; /* indicator:in ankkurointi */
/* Leveys mukautuu näkyvien tab:ien määrään (--nav-tab-count) JA per-pill-
leveyteen (--nav-pill-width). Per-pill-leveys kasvaa kun tabeja vähemmän
jotta välit pysyvät visuaalisesti hengittävinä:
5 tabia × 75 px → 387 px
4 tabia × 88 px → 364 px
3 tabia × 102 px → 318 px
2 tabia × 120 px → 252 px
min(540, viewport−40) suojaa pieniä näyttöjä. */
width: calc(var(--nav-tab-count, 5) * var(--nav-pill-width, 75px) + 12px);
max-width: min(540px, calc(100vw - 40px));
display: flex;
align-items: stretch;
gap: 0; /* tasajako flex:1:llä — ei välejä */
padding: 6px;
/* Selkeästi läpinäkyvämpi tausta — käyttäjäpalaute: 'käytä 0.2'.
Blur säilyy jotta sisältö ei näy täysin terävänä navbar:n läpi.
Ikoneilla on solid color (#9A938A / #F26419) → ne pysyvät täysin
selkeinä taustan läpinäkyvyydestä huolimatta. */
background: rgba(255, 255, 255, 0.20);
/* Blur 20 → 10 (käyttäjäpalaute: 'vähennetään puoleen testiksi') */
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1.5px solid rgba(255, 122, 0, 0.10);
border-radius: 100px;
box-shadow:
0 10px 32px rgba(255, 122, 0, 0.14),
0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Liukuva valintakehys — yksi indicator joka liukuu activeTab:in mukaan
transform:translateX:llä. Bouncy cubic-bezier antaa pienen overshoot:n
joka tuntuu "springy" mutta nopeasti laskee paikalleen. Width on
calc(100% / 5) jotta se vastaa tarkalleen yhden tab:n leveyttä
(5 tab:ia jakavat sisätilan tasaisesti flex:1:llä). */
.bottom-nav-indicator-v2 {
position: absolute;
top: 6px;
left: 6px;
/* Width = (100% - 12px) / N — sama kaava kuin .pill-flex:1, jaettuna
näkyvien tab:ien määrällä. CSS-var --nav-tab-count tulee inline-style:lla
BottomNav.jsx:stä, fallback 5. */
width: calc((100% - 12px) / var(--nav-tab-count, 5));
height: calc(100% - 12px);
/* Ember (#FFD9B9 = 255,217,185) kevyellä transparency:llä jotta navbar:n
blur paistaa läpi pillin alta. Pidetään riittävä alpha (0.82) jotta
Ember näkyy edelleen pehmeänä taustana ikonin/labelin alle. */
background: rgba(255, 217, 185, 0.82);
border-radius: 100px;
/* Ember-taustan kanssa kevyempi varjo */
box-shadow: 0 1px 3px rgba(242, 100, 25, 0.18);
transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 1;
pointer-events: none;
}
.bottom-nav-pill-v2 {
/* flex:1 + min-width:0 = ehdoton tasajako jokainen pill varaa saman 1/5-
leveyden riippumatta tekstipituudesta. Ilman min-width:0 sisällön
intrinsinen koko (esim. "Ilmoitukset"-teksti) voisi pakottaa pill:in
leveämmäksi → indicator-leveys (calc((100%-12px)/5)) ei vastaisi
todellista pill-leveyttä → indicator näkyy pielessä. */
flex: 1 1 0;
min-width: 0;
position: relative; /* z-index toimii indicator:in päällä */
z-index: 2;
/* Ei border:iä, ei taustaa — pelkkä pohja paistaa läpi (tai indicator
active-tilassa). */
border: none;
background: transparent;
border-radius: 100px; /* sama muoto kuin indicator → hover-/active-feedback siisti */
/* Sivupadding 2 px (mahduttaa pisin label 'Ilmoitukset'). Pysty-padding
8 → 6 (käyttäjäpalaute: 'ota hieman navbarin korkeudesta pois'). */
padding: 6px 2px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* Ikoni-label gap 6 → 4 (käyttäjäpalaute: 'lähemmäksi toisiaan') */
gap: 4px;
cursor: pointer;
/* Ink-3 — lepotila harmaa */
color: #9A938A;
font-family: var(--font);
transition: color 0.25s ease, transform 0.1s ease;
}
.bottom-nav-pill-v2:active {
transform: scale(0.92);
}
.bottom-nav-pill-v2.active {
/* Aktiivinen tab: Ember-pillin päällä Orange (#F26419) jotta kontrasti
pehmeää B-taustaa vasten. */
color: #F26419;
}
.bottom-nav-label-v2 {
/* Brändi-spec mukaiset arvot:
fontti: Plus Jakarta Sans (peritty var(--font):sta)
koko: 12 px
paino: 600 (semibold)
kirjainväli: -0.01em
väri: #9A938A lepo / #F26419 aktiivinen (peritty button:sta) */
font-size: 11px;
font-weight: 600;
/* Letter-spacing -0.02em (aiemmin -0.01em) jotta 'Ilmoitukset' mahtuu
pillin sisätilaan pienillä näytöillä. Erot eivät ole silminhuomattavia. */
letter-spacing: -0.02em;
/* line-height 1.1 leikkasi descender:eitä (p, g, y, j) alaosastaan
erityisesti Plus Jakarta Sans -fontilla. 1.4 antaa riittävän vertical
metric-tilan ilman että tekstirivi venyy visuaalisesti. */
line-height: 1.4;
/* Pieni paddingBottom varmistaa että alarivin descender:eitä ei leikkaa
pill-container:n bottom-padding. */
padding-bottom: 1px;
white-space: nowrap;
/* Jos teksti ei mahdu 1/5-tab-leveyteen (esim. "Ilmoitukset" iPhone SE:llä),
leikkaa overflow ja näytä ellipsis (...). Tämä takaa että flex-tasajako
ei rikkoudu vaikka jokin label olisi liian pitkä. */
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dark-mode: tumma läpinäkyvä tausta + sama oranssi indicator */
.app-shell.dark .bottom-nav-row-v2 {
background: rgba(48, 32, 22, 0.55);
border-color: rgba(255, 122, 0, 0.30);
box-shadow:
0 10px 32px rgba(255, 122, 0, 0.20),
0 2px 8px rgba(0, 0, 0, 0.30);
}
.app-shell.dark .bottom-nav-indicator-v2 {
background: rgba(255, 122, 0, 0.85); /* sama oranssi */
}
/* ── Bottom Nav (legacy v1): oranssi pilleri + pullistuma + valkoinen hehku valitun alla ── */
.bottom-nav-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(64px + env(safe-area-inset-bottom));
z-index: 60;
pointer-events: none;
padding-bottom: env(safe-area-inset-bottom);
}
/* Oranssi palkki — täysleveä, ulottuu reunoihin asti. ::before pidentää
saman oranssin värin safe-area-inset-bottom -alueelle, jotta PWA-iOS:n
home-indikaattorin alla ei näy valkoista raitaa ja jotta liukuvan
pullistuman alareuna jää huomaamatta (orange-on-orange). */
.bottom-nav-pill {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 64px;
background: var(--accent);
box-shadow:
0 -4px 20px rgba(255, 122, 0, 0.2),
0 -1px 3px rgba(255, 122, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
gap: 100px;
pointer-events: auto;
}
.bottom-nav-pill::before {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: env(safe-area-inset-bottom);
background: var(--accent);
pointer-events: none;
}
/* Liukuva indikaattori — pullistuma + valkoinen hehku napin takana.
Sijoittuu siten että lähtötila on vasemman napin keskellä. */
.bottom-nav-indicator {
position: absolute;
top: 0;
/* Vasemman napin keskikohta viewportissa: 50% - (napin_leveys + gap) / 2 */
/* Napin leveys 88px, gap 40px → siirtymä keskipisteestä 64px */
/* Indikaattorin leveys 88px, joten sen vasen reuna on napin keskipisteestä -44px */
left: calc(50% - 138px);
width: 88px;
height: 100%;
pointer-events: none;
transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.55, 1);
z-index: 1;
}
/* Oranssi pullistuma joka kohoaa pillerin yläreunasta ulos. top:-22px
keskittää pullistuman aktiivisen napin keskipisteeseen — aktiivinen
nappi on translateY(-10), joten sen ikonin keskipiste on pillerin
sisällä y=22. Pullistuma height 88, joten center = -22+44 = 22. Tämä
tekee orange-ringin valkoisen hehkun ympärille symmetriseksi. */
.bottom-nav-indicator::before {
content: "";
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
width: 88px;
height: 88px;
border-radius: 50%;
background: var(--accent);
box-shadow:
0 -4px 12px rgba(255, 122, 0, 0.25),
0 2px 6px rgba(255, 122, 0, 0.15);
}
/* Valkoinen hehku/pohja valitun napin takana — pienempi kuin pullistuma */
.bottom-nav-indicator::after {
content: "";
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 54px;
height: 54px;
border-radius: 50%;
background: #fff;
z-index: 2;
}
/* Napit — sijoittuvat indikaattorin päälle */
.bottom-nav-btn {
position: relative;
flex: 0 0 auto;
width: 88px;
height: 100%;
border: none;
background: transparent;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
-webkit-tap-highlight-color: transparent;
transition: transform 0.26s cubic-bezier(0.34, 1.2, 0.55, 1);
}
/* Valittu nappi nousee ylös valkoiseen hehkuun */
.bottom-nav-btn.active {
transform: translateY(-10px);
}
.bottom-nav-btn:active:not(.active) {
transform: scale(0.92);
}
.bottom-nav-btn.active:active {
transform: translateY(-10px) scale(0.94);
}
.bottom-nav-btn svg {
transition: color 0.3s ease;
}
/* ── Ladataan-pyörä (inline-käyttö esim. lämpötilan latauksessa) ── */
.loading-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid var(--surface2);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.8s infinite linear;
}
/* ── Floating label -input (muokkausmodaalissa) ── */
.floating-field {
position: relative;
margin-bottom: 10px;
}
.floating-label {
position: absolute;
top: -7px;
left: 14px;
padding: 0 6px;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: var(--text2);
background: var(--bg);
z-index: 1;
letter-spacing: 0.2px;
pointer-events: none;
}
.floating-input {
width: 100%;
padding: 13px 14px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--surface2);
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 15px;
font-weight: 600;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s ease;
appearance: none;
-webkit-appearance: none;
}
.floating-input:focus {
border-color: var(--accent);
}
/* Select-kenttä — lisätään pieni nuoli oikeaan reunaan */
select.floating-input {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
/* ═══════════════════════════════════════════════════════════════
MaintenanceView — Yleiset-välilehden kortit
═══════════════════════════════════════════════════════════════ */
/* Kortti-grid konteksti — gap = 10px (sama kuin korkeuspadding) */
.m-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Kahden kortin rivi (Lukitus + Huollot) */
.m-cards-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* ─── Kortin perusrakenne ─────────────────────────────── */
.m-card {
position: relative;
background: var(--surface);
border-radius: var(--radius);
border: 1.5px solid transparent;
transition: border-color 0.15s ease;
}
/* Warning-korostus (oranssi reunaviiva) */
.m-card-warning {
border-color: var(--orange);
}
/* Status-badge — reunaviivan päällä oikeassa yläkulmassa */
.m-card-status {
position: absolute;
top: -8px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none;
/* Pieni pyöreä taustaympyrä jottei korttien reunat näy ikonin läpi */
background: var(--bg);
border-radius: 50%;
width: 22px;
height: 22px;
}
/* ─── Kompakti-kortti (Lukitus, Huollot, Vikakoodit) ─── */
/* Ikoni ylhäällä, label ja arvo alla — keskitetty pystysuora asettelu */
.m-card-compact {
padding: 12px 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 4px;
}
.m-card-compact .m-card-icon {
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
}
.m-card-compact .m-card-label {
font-size: 13px;
font-weight: 500;
color: var(--text2);
}
.m-card-compact .m-card-value {
font-size: 14px;
font-weight: 700;
color: var(--text);
line-height: 1.25;
}
/* ─── Data-kortti (Kilometrit, Polttoaine, Akku) ───────── */
.m-card-data {
padding: 10px 14px;
display: grid;
grid-template-columns: 90px minmax(0, 1fr) 120px;
column-gap: 12px;
align-items: center;
}
.m-card-data-left {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.m-card-data-left .m-card-icon {
color: var(--text);
}
.m-card-data-left .m-card-label {
font-size: 13px;
font-weight: 500;
color: var(--text2);
}
.m-card-data-values {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
align-items: flex-start;
}
.m-card-value-main {
font-size: 14px;
font-weight: 700;
color: var(--text);
line-height: 1.1;
}
.m-card-value-secondary {
font-size: 14px;
font-weight: 700;
color: var(--text);
line-height: 1.1;
}
.m-card-data-graph {
height: 60px;
background: var(--bg);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
}
.graph-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text3);
font-size: 14px;
font-weight: 500;
border-radius: 8px;
background:
linear-gradient(var(--bg), var(--bg)) padding-box,
repeating-linear-gradient(
45deg,
transparent 0,
transparent 6px,
var(--surface2) 6px,
var(--surface2) 7px
)
border-box;
border: 1px dashed transparent;
}
/* Vikakoodi-kortti ilman graafi-aluetta — kaksi saraketta */
.m-card-data.m-card-data-no-graph {
grid-template-columns: 90px 1fr;
}
/* ─── Tragio Loader ────────────────────────────────────────────────────── */
/*
* Brändillinen latausanimaatio (TragioLoader.jsx). 6 piirin tähtikuvio
* joka pulssailee bell-shaped wavena: jokainen ympyrä noudattaa samaa
* 3-keyframe ease-in-out -kaarta, mutta -0.333 × speed -viiveellä per
* ympyrä. 6 ympyrää × stagger 0.333 = 2 = duration → täysi sykli ilman
* aukkoa.
*
* Customise per käyttöpaikka:
* style={{ '--tg-size': '48px', '--tg-speed': '0.4s' }}
*/
.tragio-loader {
--tg-size: 96px;
--tg-speed: 0.6s;
--tg-base-scale: 0.45;
--tg-peak-scale: 1.45;
--tg-base-opacity: 0.18;
display: inline-block;
width: var(--tg-size);
height: var(--tg-size);
}
.tragio-loader svg {
width: 100%;
height: 100%;
display: block;
}
.tragio-loader circle {
transform-box: fill-box;
transform-origin: center;
animation: tragio-trace calc(var(--tg-speed) * 2) ease-in-out infinite;
}
.tragio-loader circle:nth-child(1) { animation-delay: 0s; }
.tragio-loader circle:nth-child(2) { animation-delay: calc(var(--tg-speed) * -0.333); }
.tragio-loader circle:nth-child(3) { animation-delay: calc(var(--tg-speed) * -0.666); }
.tragio-loader circle:nth-child(4) { animation-delay: calc(var(--tg-speed) * -1); }
.tragio-loader circle:nth-child(5) { animation-delay: calc(var(--tg-speed) * -1.333); }
.tragio-loader circle:nth-child(6) { animation-delay: calc(var(--tg-speed) * -1.666); }
@keyframes tragio-trace {
0%, 100% {
transform: scale(var(--tg-base-scale));
opacity: var(--tg-base-opacity);
}
50% {
transform: scale(var(--tg-peak-scale));
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.tragio-loader circle {
animation: none;
transform: scale(1);
opacity: 0.7;
}
}
/* ─── Sivun yläosa: alapuolelta pyöristetty otsikkokortti ─────────────── */
/*
* Käytetään admin-paneeleissa ja muissa "settings"-tyylisissä näkymissä.
* Yläreuna sulautuu sivun ylälaitaan (Tragio-headeriin), alareuna pyöreä.
* Sisältö: H1-otsikko + ali-otsikko (esim. orgin nimi).
*
* Markup:
*
*
Ylläpitopaneeli
*
Vännikit
*