@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");/* ─────────────────────────────────────────────────────────────────────
   TYPOGRAFIASÄÄNTÖ (omistajan linjaus 21.7.2026):
   font-weight enintään 600 — EI KOSKAAN 700/bold missään UI-tekstissä.
   Korostus tehdään koolla, värillä tai 600-painolla.
   ───────────────────────────────────────────────────────────────────── */
b, strong { font-weight: 600; }
: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 */
  /* Pehmeä sisääntulo: loaderin jälkeen sovellus fadeaa näkyviin sen
     sijaan että pomppaisi ruudulle (käyttäjäpalaute 2026-07-05 —
     peittää myös mahdolliset yksittäisen framen käynnistysartefaktit).
     Kesto lyhyt: ei saa tuntua odottelulta. */
  animation: appShellFadeIn 0.28s ease-out;
}

@keyframes appShellFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Android-WebView:n sininen tap-korostus pois (omistajan palaute
     27.8.2026) — painallustilat hoidetaan omilla :active/transition-
     tyyleillä. iOS/desktop: no-op. */
  -webkit-tap-highlight-color: transparent;
}

/* Yhtenäinen safe-area-lähde (27.8.2026): iOS antaa arvot env():stä,
   Android-natiivi MainActivityn injektoimista --safe-area-inset-*
   -muuttujista (WebView:n env() ei kanna Androidin edge-to-edgessä;
   sama muuttujanimi jonka Capacitor 8 injektoi Android 15:llä).
   KAIKKI koodi lukee VAIN var(--inset-top/-bottom) — env():ää ei
   käytetä suoraan missään muualla. Webissä molemmat lähteet ovat 0. */

:root {
  --inset-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --inset-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  /* Expanded-karttaheron korkeus (27.8.2026): ankkuroidaan ALAREUNASTA —
     hero päättyy aina 42px BottomNavin (64px + --inset-bottom) yläpuolelle.
     Kiinteä 85dvh jätti Androidilla legendan/sulkunapin navbarin alle,
     koska järjestelmäpalkki (~48px) on iOS:n home-indikaattoria (34px)
     korkeampi. Vakiot kalibroitu niin että iPhone Pro Max -luokassa
     (932px, inset 34) tulos on täsmälleen entinen 85dvh → iOS ei muutu.
     Drag-hookin px-vastine: ks. safeArea.js + herojen expandedHeightPx. */
  --hero-expanded-h: calc(100dvh - var(--inset-bottom) - 106px);
  /* Shellin ja siihen sidottujen fixed-overlayjen (peek-sheet, trip-
     detail-overlay ym.) yhteinen maksimileveys. Nostettu 430 → 448
     (28.8.2026): Android-natiivin kiinteä layout-leveys on 448 → 430-
     katto jätti valkeat kaistaleet reunoille. Kapeammilla viewporteilla
     (iPhonet, web) ei vaikutusta. */
  --shell-max-w: 448px;
}

/* Android-natiivi (main.jsx lisää luokan): BottomNav-pilli hieman irti
   opaakista järjestelmäpalkista — iOS:n home-indikaattorialue on läpi-
   kuultava jolloin 10px riittää, Androidin harmaata palkkia vasten pilli
   näytti liimatulta (omistajan palaute 28.8.2026). */

.platform-android .bottom-nav-wrap-v2 {
  padding-bottom: calc(16px + var(--inset-bottom));
}

/* 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: var(--shell-max-w);
  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: var(--inset-top);
  padding-bottom: var(--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: var(--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: var(--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: var(--shell-max-w);
  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: var(--shell-max-w);
  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 + var(--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);
  /* Käyttäjäpalaute 2026-07-07: 18px pystypadding teki korteista turhan
     korkeita listanäkymässä. */
  padding: 13px 20px;
  margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  /* Omistajan palaute 2026-08-14: kortti riveinä (otsikko + ikonit ylhäällä,
     kilpi + tila-pill alhaalla) — aiempi kaksipalstainen flex kutisti
     otsikon ja pillin min-content-leveyteen ja molemmat rivittyivät. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}

.vehicle-card:active {
  transform: scale(0.98);
  background: var(--surface);
}

.vehicle-make {
  font-size: 20px;
  /* 700 -> 600 (omistajan palaute 2026-07-15): kevyempi merkki/malli
     ajoneuvokorteissa. */
  font-weight: 600;
}

.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).
     HUOM: ensimmäinen varjo piirtyy PÄÄLLIMMÄISEKSI — mustan sisärenkaan
     spreadin pitää olla valitilaa suurempi (1px valkea + 1px musta), muuten
     valkea peittää mustan kokonaan (bugi: 1.5px+1.5px näkyi vain desktopin
     pyöristysartefaktina, mobiilin DPR≥2 ei koskaan). */
  border: 1.5px solid #000000;
  box-shadow:
    inset 0 0 0 1px #ffffff,
    inset 0 0 0 2px #000000;
  font-size: 13px;
  /* 700 -> 500 (omistajan palaute 2026-07-15). VehicleDetailin kilpichipit
     yliajavat inline-tyylillä 600:aan. */
  font-weight: 500;
  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);
  /* Tila-pill ei saa koskaan rivittyä (omistajan palaute 2026-08-14) */
  white-space: nowrap;
}

.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ä (omistajan palaute 2026-07-16): liikennevalologiikka —
   KAIKILLA tiloilla tismalleen sama rakenne kuin ajossa-pinnillä
   (valkoinen rengas + värikoodattu ydin, sama koko), vain ytimen väri
   vaihtuu:
   - go    = vihreä (#2E8E5B)            = Ajossa
   - idle  = keltaisen oranssi (#F5A623) = Pysähtynyt
   - rest  = punainen (#E03131)          = Pysäköity
   Pulssihalot ja suuntanuoli VAIN ajossa-tilassa — ne viestivät liikettä.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --pin-go:   #2E8E5B;   /* driving */
  --pin-idle: #F5A623;   /* stopped */
  --pin-rest: #E03131;   /* parked */
}

.pin {
  --pin-size: 16px;
  --pin-core: 7px;
  position: relative;
  width: var(--pin-size);
  height: var(--pin-size);
  display: inline-block;
  flex: none;
}

/* KRIITTINEN — marker-pinnin sijainti kartalla.
   maplibre lisää kartan markeriin luokan `maplibregl-marker`, jonka oma CSS on
   `position: absolute; top:0; left:0` → ankkuroi pinnin canvasin origoon, samaan
   koordinaatistoon kuin GL-reittiviiva. Yllä oleva plain `.pin { position:
   relative }` (jota tarvitaan legenda- ja detail-pinneissä jotta absolute-lapset
   keskittyvät) yliajaa sen SAMALLA spesifisyydellä ja myöhempänä lähdejärjestyk-
   sessä → marker valui inline-block-virtaukseen ja piirtyi VAKIO-offsetilla pois
   oikeasta koordinaatista (eri offset per auto, koska kukin marker on eri kohdassa
   virtaa). Transform liikkui kartan mukana mutta lähti väärästä peruspisteestä.
   Tämä sääntö (spesifisyys 0,0,2,0) pakottaa kartan markerit takaisin
   absolute:ksi → osuvat täsmälleen reittiviivaan ja rekisterikilpi-overlayhin
   kaikilla autoilla. Legenda-/detail-pinnit (ei maplibregl-marker-luokkaa)
   säilyvät relative:nä. */

.pin.maplibregl-marker {
  position: absolute;
}

/* 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 (kaikki tilat
   samaa kokoa 2026-07-16 alkaen). 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; }

/* ── RENGAS + YDIN — yhteinen kaikille tiloille: valkoinen rengas +
   värikoodattu ydin (--pin-color). Tila-luokka asettaa vain värin. ── */

.pin .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 .pin-core {
  width: var(--pin-core); height: var(--pin-core);
  background: var(--pin-color, var(--pin-go));
}

.pin-driving { --pin-color: var(--pin-go); }

.pin-stopped { --pin-color: var(--pin-idle); }

.pin-parked  { --pin-color: var(--pin-rest); }

/* Tapahtumapiste (esim. tankkauspaikka — historiallinen sijainti):
   ajossa-pinnin vihreä ILMAN liikettä viestiviä haloja/nuolta
   (omistajan palaute 2026-07-16). */

.pin-event   { --pin-color: 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; }
}

.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; }

/* Mittarikortti — kuva 1: lämmin gradient-tausta, ylisuuri haalea taustaikoni,
   värillinen piste + otsikko, iso arvo + pieni yksikkö, glassmorph-reuna. */

.metric-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 9px 11px 10px;
  /* Lämmin off-white -tausta — hieman vaaleampi kuin --sandstone, mutta ei
     täysin valkoinen (käyttäjäpalaute). Tumma tila: override alla. */
  background: #fcfaf6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  user-select: none;
  transition: transform var(--transition);
  min-width: 0;
  min-height: 86px;
  isolation: isolate;
}

/* Tumma tila: lämmin tumma kortti (sandstone-dark) #121212-sivua vasten. */

.app-shell.dark .metric-card { background: var(--sandstone); }

/* Glassmorph-gradienttireuna (1 px rengas, gradient-mask-tekniikka kuten
   ajopäiväkirjan korteissa, mutta vaaleampi + oranssi vivahde). */

.metric-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  /* Glassmorph: vaalea kohokorostus vasemmalla ylhäällä → tummempi harmaa
     gradient oikealla alhaalla (hieman tummempi kuin aiempi). */
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(140,140,145,0.16) 50%, rgba(140,140,145,0.28) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.metric-card--clickable { cursor: pointer; }

.metric-card--clickable:active { transform: scale(0.98); }

/* Ylisuuri haalea taustaikoni — oikealla, osin reunan yli (overflow:hidden rajaa). */

.metric-card-bgicon {
  position: absolute;
  right: -16px;
  top: 50%;
  /* Kallistettu muutaman asteen vasemmalle (yläosa vasemmalle = -rotaatio). */
  transform: translateY(-46%) rotate(-6deg);
  opacity: 0.14;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
}

/* Per-ikoni hienosäätö kortin sisällä (käyttäjäpalaute). Säilyttää -6° kallistuksen. */

.metric-card-bgicon--battery { transform: translateY(-30%) rotate(-6deg); }

/* alas */

.metric-card-bgicon--km      { right: -12px; transform: translateY(-32%) rotate(-12deg); }

/* oikealle + alas + enemmän kallistusta (koko isompi JSX:ssä) */

.metric-card-bgicon--fuel    { right: -4px; transform: translateY(-32%) rotate(-6deg); }

/* alas */

/* Header: värillinen piste + otsikko */

.metric-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.metric-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.metric-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Arvo: iso luku + pieni yksikkö. Tall (3 saraketta) hieman pienempi jotta
   pitkä "226 219" + yksikkö mahtuu kapeaan korttiin. */

.metric-card-value {
  position: relative;
  z-index: 1;
  /* 800 → 600 (omistajan palaute 2026-07-15): kevyemmät mittariarvot
     (Käyttöakku/Kilometrit/Ajoakku/Polttoaine). */
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -0.4px;
  font-size: 22px;
  /* Hieman ilmaa arvon ja kortin vasemman reunan väliin (käyttäjäpalaute). */
  padding-left: 3px;
}

.metric-card--tall .metric-card-value { font-size: 19px; }

.metric-card--wide .metric-card-value { font-size: 22px; }

/* Ylivuotava arvo (esim. 6-numeroinen mittarilukema + km pienellä
   näytöllä): pienempi porras, ettei kortin overflow:hidden leikkaa
   yksikköä (pilottipalaute 2026-07-18). MetricCard MITTAA mahtuuko arvo
   normaalikoossa ja lisää luokan vain jos ei mahdu — mahtuvat arvot
   pysyvät samassa koossa kuin muut kortit (omistajan palaute). */

.metric-card-value--compact { letter-spacing: -0.6px; }

.metric-card--tall .metric-card-value--compact { font-size: 16px; }

.metric-card--wide .metric-card-value--compact { font-size: 19px; }

.metric-card-value--compact .metric-card-unit { margin-left: 2px; }

.metric-card-unit {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  margin-left: 3px;
  letter-spacing: 0;
}

/* ── 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%;
  /* Sama pallomainen brändigradientti kuin tankkauskortin pallossa
     (BRAND_RGB 234,88,12) — profiilipallot yhtenäiset kaikissa koossa
     (käyttäjäpalaute 2026-07-03). */
  background: radial-gradient(circle at 35% 32%,
    rgba(234, 88, 12, 0.55) 0%,
    rgba(234, 88, 12, 0.55) 26%,
    rgba(234, 88, 12, 0.95) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.25);
}

.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: var(--shell-max-w);
  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; }
}

/* "Käynnissä"-pisteanimaatio: 1 → 2 → 3 → 1. dot1 aina näkyvä; dot2 ilmestyy
   1/3-kohdassa, dot3 2/3-kohdassa, ja loopin alussa molemmat resetoituvat. */

@keyframes liveDot2 {
  0%, 33%   { opacity: 0; }
  34%, 100% { opacity: 1; }
}

@keyframes liveDot3 {
  0%, 66%   { opacity: 0; }
  67%, 100% { opacity: 1; }
}

@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. */

/* Liquid-glass -painike (käyttäjäpalaute 2026-06-16): kelluvat BackButton +
   kartan sulkupainikkeet. Läpikuultava lasi (blur + saturate) ja EPÄTASAINEN
   vaalea reuna — useat inset-highlightit (ylä kirkkain, sivut/ala himmeämmät)
   antavat "nestemäisen" valorenkaan crispin 1px-reunan sijaan. Pehmeä
   ulkovarjo erottaa painikkeen vaaleasta taustasta (BackButton valkoisella).
   Kutsuja antaa koon/sijainnin/borderRadiusin inline. */

.liquid-glass-btn {
  background: rgba(250, 250, 252, 0.38);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.9),
    inset 0 -2px 4px rgba(255, 255, 255, 0.22),
    inset 1px 0 2px rgba(255, 255, 255, 0.3),
    inset -1px 0 2px rgba(255, 255, 255, 0.18),
    0 2px 9px rgba(0, 0, 0, 0.13);
}

/* Map-heron glassmorph-alareuna (käyttäjäpalaute 2026-06-23). Sama lasitunne
   kuin .liquid-glass-btn:ssä (blur 16px + saturate), mutta reunana: sumennus on
   voimakkaimmillaan aivan alareunassa ja häivittyy ylöspäin karttaan mask:n
   avulla → kartta "sulaa" frosted-reunaan eikä lopu kovaan viivaan.
   Lisätään absoluuttisena lapsena hero-containeriin jonka overflow:hidden +
   alakulmien pyöristys leikkaavat tämän automaattisesti samaan muotoon. */

.maphero-glass-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Korkeus = kulmasäde (var(--radius-lg) = 24px) jotta pyöristetyt alakulmat
     istuvat hero:n kulmiin. border-radius: inherit → sama pyöristys kuin
     hero-containerilla (collapsed '0 0 24px 24px', expanded 0). */
  height: var(--radius-lg);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  /* EI frostia (ei backdrop-filteriä) → kartta näkyy TÄYSIN terävänä. Pelkkä
     gradientmainen lasireuna: vaalea translucent hohto joka on kirkkaimmillaan
     aivan pyöristetyssä alareunassa ja häivyttyy nopeasti pois ylöspäin, +
     kirkas lasilippa aivan reunassa. Vaikutus rajautuu ohueen reunaan, ei
     peitä karttaa (käyttäjäpalaute 2026-06-23). */
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.14) 45%,
    rgba(255, 255, 255, 0) 80%
  );
  box-shadow: inset 0 -1.5px 0.5px rgba(255, 255, 255, 0.8);
}

.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%;
  /* Sama pallomainen brändigradientti kuin tankkauskortissa + kevyempi
     fontti (800→600) — käyttäjäpalaute 2026-07-03. */
  background: radial-gradient(circle at 35% 32%,
    rgba(234, 88, 12, 0.55) 0%,
    rgba(234, 88, 12, 0.55) 26%,
    rgba(234, 88, 12, 0.95) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  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 */
}

/* Kapeat näytöt: Huollot/Katsastukset/Vikakoodit + status-pallot mahtuvat
   varmasti yhdelle riville (käyttäjäpalaute 2026-07-03) — tiiviimmät
   paddingit ja pykälän pienempi fontti. overflow-x säilyy fallbackina. */

@media (max-width: 430px) {
  .maintenance-tabs { padding: 0 12px 8px; gap: 3px; }
  .m-tab { padding: 8px 9px; font-size: 13px; }
}

@media (max-width: 360px) {
  .m-tab { padding: 8px 6px; font-size: 12px; }
}

.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 + var(--inset-bottom));
  z-index: 60;
  pointer-events: none;
  display: flex;
  justify-content: center;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

/* Piilotettu (sheet peittää navbarin): fade + liu'utus alas. .is-hidden tulee
   BottomNav:lta hidden-propista → navbar fadeutuu pehmeästi eikä pomppaa, ja
   palaa SYNKASSA kelluvien painikkeiden kanssa (käyttäjäpalaute 2026-06-29). */

.bottom-nav-wrap-v2.is-hidden {
  opacity: 0;
  transform: translateY(14px);
}

.bottom-nav-wrap-v2.is-hidden .bottom-nav-row-v2 {
  pointer-events: none;
}

.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 + var(--inset-bottom));
  z-index: 60;
  pointer-events: none;
  padding-bottom: var(--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: var(--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;
}

/* Vaalea custom-checkbox (esim. Lisälämmittimen ohjaus). Natiivi checkbox
   piirtyy tummanharmaana — tämä antaa vaalean harmaan ruudun ja oranssin
   täytön valkoisella ruksilla valittuna. */

.light-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--surface2);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.light-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.light-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Pieni pyöreä valinta-checkbox (Raporttien auto-valinta, kuva 5). */

.round-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface2);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.round-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.round-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── "Lisää tankkaus" FAB (translucent oranssi, claude design 2026-06-29) ── */

.fab-fuel {
  position: relative;
  width: 58px; height: 58px;      /* ≥44px kosketusalue */
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  /* brändioranssi gradient (hieman läpikuultava) */
  background: linear-gradient(160deg,
              rgba(255, 122, 0, 0.92),
              rgba(240, 95, 20, 0.92) 58%,
              rgba(226, 83, 11, 0.95));
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
          backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255, 178, 128, 0.6);
  box-shadow: 0 12px 26px -12px rgba(242, 100, 25, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.fab-fuel:active { transform: scale(0.94); }

/* pumppu-ikoni (stroke=currentColor), nudattu 1px oikealle optista keskitystä varten */

.fab-fuel > svg { width: 26px; height: 26px; transform: translateX(1px); }

/* valkoinen +-merkki oikeaan yläkulmaan */

.fab-fuel .plus {
  position: absolute; top: -3px; right: -3px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 2.5px solid rgba(244, 240, 233, 0.7);  /* sovita app-taustaan */
}

.fab-fuel .plus > svg { width: 13px; height: 13px; color: #B23A0C; }

/* kiln */

.floating-label {
  position: absolute;
  top: -7px;
  left: 14px;
  padding: 0 6px;
  font-size: 11px;
  /* 700 -> 600 (omistajan palaute 2026-07-15) */
  font-weight: 600;
  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;
  /* 600 -> 500 (omistajan palaute 2026-07-15): syöte- ja
     placeholder-tekstit kevyemmiksi. */
  font-weight: 500;
  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,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ── Animoitu floating-label-input (rekisteröityminen) ──
   Selite on tyhjänä kentän keskellä (kuin placeholder) ja nousee kentän
   yläreunan päälle kun kenttä on fokuksessa tai siinä on tekstiä. Animaatio
   vaatii CSS-pseudoluokat (:focus / :placeholder-shown), joten input käyttää
   placeholder=" " (välilyönti) jotta :placeholder-shown tunnistaa tyhjän. */

.fl-field {
  position: relative;
  width: 100%;
}

.fl-input {
  width: 100%;
  /* Epäsymmetrinen padding: ylälaitaan reilusti tilaa, jotta nostettu selite
     mahtuu KENTÄN SISÄÄN aivan yläreunaan ja arvotekstin väliin jää selvä
     väli. Toimii värikkäällä taustalla, koska selite on inputin oman
     valkoisen täytön päällä (ei reunan päällä). */
  padding: 24px 14px 7px;
  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.18s ease;
  appearance: none;
  -webkit-appearance: none;
}

.fl-input:focus {
  border-color: var(--accent);
}

.fl-input.fl-has-adorn {
  padding-right: 46px;
}

.fl-label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  /* EI taustaa — selite on aina inputin sisällä valkoisen täytön päällä */
  font-size: 15px;
  font-weight: 600;
  color: var(--text2);
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: top 0.16s ease, transform 0.16s ease, font-size 0.16s ease,
    font-weight 0.16s ease, color 0.16s ease;
}

/* Nostettu tila (fokus tai täytetty kenttä): selite nousee kentän SISÄLLÄ
   ylälaitaan, ei reunan päälle. placeholder=" " → :placeholder-shown tunnistaa
   tyhjän. */

.fl-input:focus + .fl-label,
.fl-input:not(:placeholder-shown) + .fl-label {
  top: 4px;
  transform: translateY(0);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.fl-input:focus + .fl-label {
  color: var(--accent);
}

/* Oikean reunan lisäelementti (silmä-ikoni / spinneri) */

.fl-adorn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   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:
 *   <div className="page-header-card">
 *     <div className="page-header-card-title">Ylläpitopaneeli</div>
 *     <div className="page-header-card-sub">Vännikit</div>
 *   </div>
 */

.page-header-card {
  /* Edge-to-edge — yläreuna sulautuu top-bar:iin, ALA + sivut piirtävät
     1px ohuen rajan (ei yläreunaa, koska se aiheuttaisi näkyvän viivan
     top-bar:n alapuolella). border-radius vain alakulmat.
     Käyttäjäpalaute: pienempi paddingTop (14 → 6) → hero kompaktimmaksi.
     paddingLeft:n yliajavat komponentit (Notifications/AdminPanel) → 20 px.
     Käyttäjäpalaute 2026-06-06: hero-tausta sandstone-sävyiseksi (yhteinen
     top-bar:n kanssa). */
  margin: 0;
  background: var(--sandstone);
  box-shadow:
    inset 1px 0 0 rgba(0, 0, 0, 0.1),
    inset -1px 0 0 rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border-radius: 0 0 24px 24px;
  /* Käyttäjäpalaute kuva 2: pääotsikon keskilinja kohdistetaan profiili-
     painikkeen keskilinjaan (.tab-hero-profile top:8 + 38/2 = 27). Otsikko
     (26px, lineHeight 1.1 ≈ 28.6px) → paddingTop 13 nostaa otsikon keskilinjan
     ~27:ään → samalla tasolle profiilin kanssa, ja yläpuolelle jää vapaata
     tilaa. (Aiempi 6 piti otsikon liian ylhäällä, profiilin yläpuolella.) */
  /* paddingTop 21: otsikon (26px) keskilinja kohdistuu profiilipallon
     keskilinjaan (.tab-hero-profile top:16 → keskipiste 35). Kanoninen kohta
     jaettu kaikkien root-herojen kesken (käyttäjäpalaute 2026-06-15).
     Desktop-override (28px) media-queryssä säilyy. */
  padding: 21px 14px 14px;
  text-align: left;
}

.page-header-card-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  text-align: left;
}

.page-header-card-sub {
  font-size: 14px;
  color: var(--text2);
  margin-top: 2px;
  text-align: left;
}

.page-header-card-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Desktop-layout (käyttäjäpalaute 2026-06-09, breakpoint 1024 px)
   .app-shell saa app-shell--desktop -modifier:n kun useIsDesktop()=true.
   Mobile-säännöt (kaikki yllä olevat) eivät muutu — desktop on opt-in.

   Topbar 64 px ylä = content-alue alkaa kohdasta (0, 64). Sisältö
   skrollaa pystysuunnassa overflow:auto:lla. .top-bar (mobile-tyylinen)
   + bottom-nav piilotetaan koska DesktopTopBar korvaa ne.
   Käyttäjäpalaute 2026-06-12: vasen 260 px sidebar poistettu — tabit
   siirtyivät topbariin ja koko leveys vapautui sisällölle (kartoille).
─────────────────────────────────────────────────────────────────────────────── */

/* Käyttäjäpalaute 2026-06-09 iter 2: .app-shell--desktop-app on PÄÄ-app:n
   shell (vaatii topbar-padding:n). Login + Membership käyttävät
   pelkkää .app-shell--desktop -modifier:a (ei chromea → ei tarvitse
   padding:ia). */

.app-shell--desktop-app {
  /* Sisältöalueen padding jättää tilaa kiinteälle topbar:lle */
  padding-top: 64px;
  box-sizing: border-box;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Mobile-tyyliset chrome-elementit piiloon desktopilla */

.app-shell--desktop-app .top-bar {
  display: none !important;
}

.app-shell--desktop-app .bottom-nav-wrap-v2 {
  display: none !important;
}

/* Sisältöalue: täysi korkeus padding:n jälkeen, oma scroll */

.app-shell--desktop-app > .vehicle-stream-content,
.app-shell--desktop-app > .desktop-content-area {
  height: calc(100vh - 64px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* BackButton (kelluva nuoli-painike) — ei piiloteta CSS:llä desktopilla.
   Käyttäjäpalaute 2026-06-09 iter 8: sub-näkymissä (Työhistoriani,
   Ajopäiväkirja, Tankkaukset, Huoltokirja, Tarkastamaton ajo) painike
   on tarpeellinen koska topbar-navigaatio vie vain root-tabeihin eikä
   sub-näkymästä palaa. App.jsx:n backHandler-logiikka hallitsee
   näkyvyyttä jo: root-tab-tilassa backHandler null → painike ei renderöidy,
   sub-tilassa backHandler määritetty → painike näkyy luonnostaan myös
   desktopilla. */

@media (min-width: 1024px) {
  /* BackButton.jsx käyttää inline-style:ssä top:12 / left:12 — !important
     pakottaa desktop-override:n voimaan. top:78 = topbarin (64) alle;
     left:14 = sama 14 px etäisyys sisältöalueen vasemmasta reunasta kuin
     sidebar-aikana (silloin 274 = 260 + 14). Geometria otsikko-paddingien
     (56/68 px alla) suhteen säilyy identtisenä. */
  .app-shell--desktop-app .back-button {
    top: 78px !important;
    left: 14px !important;
  }
  /* Käyttäjäpalaute 2026-06-09 iter 10-11: BackButton (38 px + left 14 =
     oikea reuna 52) menee otsikkotekstin päälle kaikissa näkymissä joissa
     se voi näkyä (Raportit/Ylläpito/Ilmoitukset sub-tiloissa, Työhistoriani,
     Admin-jäsen-näkymä, VehicleDetail nimi-header, WorkShift greeting).
     Lisätään 56 px paddingLeft kaikkiin näihin otsikko-elementteihin. */
  /* work-month-nav-hero: 68 px kuten ajopäiväkirjassa (desktop-back-
     button-spacer) — 56 jätti vain 4 px raon BackButtonin oikeaan reunaan
     (14 + 38 = 52) ja otsikko tuntui liimautuvan painikkeeseen
     (käyttäjäpalaute 2026-06-12). page-header-card-näkymissä (Ilmoitukset/
     Ylläpito-juuret) BackButtonia ei ole → 56 riittää. */
  .app-shell--desktop-app .work-month-nav-hero {
    padding-left: 68px !important;
  }
  .app-shell--desktop-app .page-header-card {
    padding-left: 56px !important;
  }
  /* Root-tason otsikkokortit (Ylläpito, Ilmoitukset, Raportit) — ei
     BackButtonia → otsikko/organisaatio/pillit lähemmäs vasenta reunaa
     (omistajan palaute 22.7.2026: 56 px jätti liikaa tyhjää). Ei aivan
     reunaan → 24 px kevyt sivumarginaali. Alisivut (esim. Käyttäjät) EIVÄT
     saa tätä luokkaa → säilyttävät 56 px BackButton-varauksen. */
  .app-shell--desktop-app .page-header-card--root {
    padding-left: 24px !important;
  }
  .app-shell--desktop-app .reports-month-nav-hero {
    /* reports-month-nav-hero käyttää inline-padding-shorthandia → !important
       tarvitaan. Root-taso (ei BackButtonia) → sama 24 px kuin muut rootit. */
    padding-left: 24px !important;
  }
  .app-shell--desktop-app .desktop-back-button-spacer {
    /* !important jyrää inline-padding-shorthandin (esim. TripDetailView:n
       padding:'16px 20px 10px' joka asetti paddingLeft:20:n). Iter 12.
       Käyttäjäpalaute 2026-06-09 iter 12: paddingLeft 52→68 jotta osoite/
       otsikko ovat selvästi erillään BackButton:sta (gap ~12 px BackButton:n
       oikealta reunalta otsikon alkuun). */
    padding-left: 68px !important;
  }
}

/* VehicleDetailin desktop-overlayn (Kaluston alinäkymä karttapalstan päällä)
   siirtymät (omistajan spec 2026-07-22, päivitetty): koko paneeli liukuu
   sisään VASEMMALTA kun avataan kartasta ja ulos VASEMMALLE kun suljetaan.
   Tabin vaihtuessa (Ajopäiväkirja↔Tankkaukset) ulkopaneeli PYSYY paikallaan
   ja läpinäkymättömänä — vain SISÄLTÖ ristifadetaan (vd-overlay-content-fade),
   joten kartta ei vilku läpi (aiempi koko paneelin opacity-fade paljasti
   kartan → välähdys). */

@keyframes vdOverlaySlideInLeft {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes vdOverlaySlideOutLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes vdOverlayContentFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vd-overlay-enter-left { animation: vdOverlaySlideInLeft 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

.vd-overlay-exit-left  { animation: vdOverlaySlideOutLeft 0.24s cubic-bezier(0.55, 0.06, 0.68, 0.19) both; }

.vd-overlay-content-fade { animation: vdOverlayContentFade 0.16s ease both; }

/* Käyttäjäpalaute 2026-06-09: .app-shell:n max-width:430px (mobile-app-
   widget-tyyli) teki desktop-näkymistä kapean strip:n. .app-shell--desktop
   override:aa tämän full-widthiksi. */

.app-shell--desktop {
  max-width: 100% !important;
  width: 100% !important;
}

/* Profiili-overlay heroissa (käyttäjäpalaute 2026-06-11: Tragio-logo
   poistettu globaalista top-bar:sta → profiili siirtyi kunkin root-näkymän
   heroon). page-header-card-pohjaiset näkymät (Ilmoitukset, Ylläpito):
   absolute oikeaan yläkulmaan. Reports: inline flex-rivissä (ei absolute).
   Molemmat piiloon desktopilla, jossa DesktopShell tarjoaa profiilin. */

.tab-hero-profile {
  position: absolute;
  /* Kanoninen profiilipallon kohta (käyttäjäpalaute 2026-06-15): 16 px ylä +
     oikea (yhtä paljon paddingia), 38 px pallo → keskipiste y=35. Sama kaikilla
     root-heroilla (Työt/Raportit/Ilmoitukset/Ylläpito) → pallo ei hyppää
     välilehteä vaihtaessa, ja otsikko kohdistetaan tähän keskilinjaan. */
  top: 16px;
  right: 16px;
  z-index: 2;
}

/* Käyttäjäpalaute 2026-06-09 iter 2: piilota komponenttien sisäiset
   topbar-overlay:t desktopilla (DesktopShell tarjoaa jo logon + profiilin
   → muutoin näkyisi kaksi profiilipainiketta). Mobile-näkymä säilyttää
   nämä komponenttien sisäisinä overlay:nä alle 1024 px näytöillä. */

@media (min-width: 1024px) {
  .component-internal-topbar,
  .tab-hero-profile,
  .tab-hero-profile-inline {
    display: none !important;
  }

  /* Käyttäjäpalaute 2026-06-09 iter 5: Raportit/Ilmoitukset/Ylläpito
     -näkymien otsikot tuntuivat liian tiukasti yläreunassa desktopilla
     (mobile-padding 6-8 px ei riitä kun DesktopShell:n oranssi yläreuna
     on suoraan yläpuolella). Lisätään ~26 px paddingTop näiden hero-
     elementteihin desktopilla. Mobile-versio (alle 1024 px) säilyttää
     tiukan alkuperäisen ulkoasun. */
  .app-shell--desktop-app .page-header-card {
    padding-top: 28px;
  }
  /* ReportsMonthNavHero käyttää inline-style:ssä padding-shorthandia
     (padding: '8px 20px 10px'), joka asettaa paddingTopin ja jyrää
     class-tason CSS:n. !important pakottaa desktop-overriden voimaan
     ilman että ReportsMonthNavHero:n inline-style:tä tarvitsee
     refaktoroida. */
  .app-shell--desktop-app .reports-month-nav-hero {
    padding-top: 28px !important;
  }
}