* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #1a1f2b;
  --panel: #232a3a;
  --panel-2: #2b3348;
  --text: #e8ecf4;
  --muted: #93a0b8;
  --accent: #3d8bfd;
  --green: #2ecc71;
  --red: #e74c3c;
  --orange: #f39c12;
  --border: #34405c;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  z-index: 1001;
}
.brand { font-weight: 700; font-size: 17px; }

.tabs { display: flex; gap: 6px; }
.tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 7px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.map-switch { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.map-switch select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}
#logout-btn {
  margin-left: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
#logout-btn:hover { color: var(--text); border-color: var(--red); }

#layout { flex: 1; display: flex; min-height: 0; }

#sidebar {
  width: 320px;
  min-width: 320px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 14px;
}

.panel-title { font-weight: 600; margin-bottom: 12px; font-size: 15px; }
.panel-title.small { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
#device-count { color: var(--muted); font-weight: 400; font-size: 13px; }

.device-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s;
}
.device-card:hover { border-color: var(--accent); }
.device-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

.device-head { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.status-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.offline { background: var(--red); }
.status-dot.never { background: var(--muted); }
/* uśpiony na postoju (oszczędzanie transferu) — to nie awaria */
.status-dot.sleeping { background: var(--accent); opacity: .75; }
.uspiony { color: var(--accent); }
.device-name { font-weight: 600; font-size: 14px; flex: 1; }
.device-name input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 14px;
}
.device-speed { font-size: 13px; color: var(--accent); font-weight: 600; }

.device-meta {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.device-meta b { color: var(--text); font-weight: 600; }
.ign-on { color: var(--green); }
.ign-off { color: var(--muted); }

.form-row { margin-bottom: 10px; }
.form-row label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.form-row select, .form-row input {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  color-scheme: dark;
}

.quick-ranges { display: flex; gap: 6px; }
.quick-ranges button {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 12px;
}
.quick-ranges button:hover { color: var(--text); border-color: var(--accent); }

button.primary {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
button.primary:hover { filter: brightness(1.1); }

#hist-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.stat {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 8px 10px;
}
.stat span { display: block; font-size: 11px; color: var(--muted); }
.stat b { font-size: 15px; }
.stat small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.oplaty-uwaga { grid-column: 1 / -1; font-size: 12px; color: var(--orange); }
/* nazwa znanego miejsca w postoju i w przejeździe */
.stop-miejsce { font-weight: 600; margin-bottom: 2px; }

/* --- Zakładka „Miejsca" --- */
.miejsca-opis { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 6px 0 12px; }
#miejsce-form { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.miejsce-wsp { font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 6px; }
.miejsce-wsp.brak { color: var(--orange); }
.miejsce-przyciski { display: flex; gap: 8px; margin-top: 10px; }
.miejsce-przyciski button { flex: 1; min-height: 38px; }
#miejsca-lista { margin-top: 14px; }
#miejsca-podpowiedzi { margin-top: 18px; }
.miejsce-item.kandydat { border-left: 3px solid var(--orange); }
/* Pinezka wskazująca dokładny punkt; grot wypada na współrzędnych, bo cały
   znacznik ma zerowy rozmiar i jest odsunięty ujemnym marginesem. */
.pin-miejsca { width: 0; height: 0; }
.pin-strzalka {
  width: 26px; height: 34px; line-height: 0;
  margin-left: -13px; margin-top: -33px;   /* grot rysunku wypada w (13, 33) */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
  /* Pulsuje wokół grotu (transform-origin na jego wysokości), a nie w pionie —
     przesuwanie całego rysunku odsuwało grot od wskazanego punktu o 8 px. */
  transform-origin: 50% 100%;
  animation: pin-puls 1s ease-in-out 3;
}
@keyframes pin-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

button.nazwij {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer;
}
.miejsce-item {
  background: var(--panel-2); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px;
}
.miejsce-glowa { display: flex; align-items: center; gap: 8px; }
.miejsce-glowa b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.miejsce-akcje { display: flex; gap: 2px; flex-shrink: 0; }
.miejsce-akcje button {
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; padding: 4px 5px; min-width: 30px; min-height: 30px;
}
.miejsce-akcje button:hover { background: var(--panel); border-radius: 6px; }
.miejsce-dane { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sheet-poz {
  display: block; width: 100%; min-height: 44px; margin-top: 10px;
  background: var(--panel-2); color: inherit;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 15px; cursor: pointer; text-align: left; padding: 0 14px;
}
.trip-trasa { color: var(--accent); }

/* --- Zakładka „Statystyki" --- */
#stats-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
#stats-table { margin-top: 14px; }
/* Tabela bywa szersza niż panel — przewija się sama, a nie rozpycha strony. */
#stats-table { overflow-x: auto; }
table.stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}
table.stats th {
  text-align: right;
  font-weight: 600;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
table.stats th:first-child, table.stats td:first-child { text-align: left; }
table.stats td {
  text-align: right;
  padding: 5px 6px;
  border-bottom: 1px solid var(--border);
}
table.stats tbody tr:hover { background: var(--panel-2); }
table.stats tr.bez-ruchu td { color: var(--muted); }
.stats-pusto { color: var(--muted); font-size: 13px; padding: 10px 2px; }

#playback input[type=range] { width: 100%; }
.play-controls { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
#play-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
}
#play-info { font-size: 12px; color: var(--muted); }

.trip-item {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
}
.trip-item:hover { border-color: var(--accent); }
.trip-item b { color: var(--text); }

/* Wykres prędkości siedzi pod mapą, więc obszar mapy jest kolumną: mapa
   rozpycha się na resztę wysokości, wykres ma stałą. */
#map-area { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#map-box { flex: 1; position: relative; min-height: 0; }
#map-osm, #map-google { position: absolute; inset: 0; }

.hidden { display: none !important; }

/* marker pojazdu na OSM */
.vehicle-marker { background: transparent; border: none; }

/*
 * Punktem odniesienia znacznika jest lewy górny róg tego elementu — tam
 * Leaflet stawia pozycję pojazdu. Blok .vm ma więc zerowy rozmiar i służy
 * tylko za zaczep; grot i etykietę ustawiamy względem niego osobno.
 *
 * Wcześniej .vm był kolumną „grot nad etykietą" wyśrodkowaną przez
 * translate(-50%, -50%), przez co na pozycji pojazdu lądował środek całego
 * bloku, a sam grot wypadał kilkanaście pikseli wyżej. Przy oddaleniu mapy
 * wyglądało to tak, jakby pojazd jechał obok drogi.
 */
.vehicle-marker .vm {
  position: relative;
  width: 0;
  height: 0;
}
/* Środek grota dokładnie na pozycji — środkujemy marginesem, bo właściwość
   transform jest zajęta przez obrót o kurs i nadpisałaby przesunięcie. */
.vm-arrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  line-height: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.vm-arrow svg { display: block; }
/* Etykieta wisi pod grotem i nie przesuwa go — grot ma trzymać się drogi. */
.vm-label {
  position: absolute;
  left: 0;
  top: 13px;
  transform: translateX(-50%);
  background: rgba(20, 25, 38, .85);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid var(--border);
}
/* --- Wykres prędkości i postoje w historii --- */
#speed-chart {
  position: relative;
  height: 150px;
  /* Bez tego mapa (flex: 1) ściska wykres do paska — na telefonie zostawało
     z niego dwadzieścia pikseli. */
  flex-shrink: 0;
  padding: 8px 12px 6px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}
#speed-chart svg {
  width: 100%;
  height: 104px;
  display: block;
  cursor: crosshair;
}
/* Na telefonie mapa jest ważniejsza niż wykres — oddajemy jej wysokość. */
@media (max-width: 639px) {
  /* Dolny pasek nawigacji leży na treści, więc wykres musi się o niego
     odsunąć — inaczej chowa się pod nim. */
  #speed-chart {
    height: calc(116px + 66px + env(safe-area-inset-bottom));
    padding: 6px 10px calc(70px + env(safe-area-inset-bottom));
  }
  #speed-chart svg { height: 76px; }
  /* Panel odtwarzania podnosimy nad wykres, gdy wykres jest widoczny. */
  body.waski.z-wykresem #map-area > #playback {
    bottom: calc(66px + 116px + env(safe-area-inset-bottom));
  }
}
.wykres-linia {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  /* Bez tego skalowanie SVG rozciąga też grubość linii w poziomie. */
  vector-effect: non-scaling-stroke;
}
.wykres-siatka { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wykres-postoj { fill: #f1c40f; opacity: .18; }
.wykres-kursor { stroke: #e74c3c; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wykres-naglowek {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.wykres-max { font-weight: 400; }
.wykres-opis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
/* Kreska pod kursorem myszy — jaśniejsza od czerwonego znacznika odtwarzania,
   żeby dało się odróżnić „patrzę tutaj" od „odtwarzam tutaj". */
.wykres-najazd {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  opacity: .7;
}
#wykres-dymek {
  position: absolute;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  z-index: 2;
}
#wykres-dymek b { display: block; color: var(--accent); }
#wykres-dymek span { color: var(--muted); font-size: 11px; }
#stop-list { margin-top: 12px; }
.stop-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-left: 3px solid #f1c40f;
  border-radius: 8px;
  padding: 6px 9px;
  margin-bottom: 6px;
  font-size: 12px;
  cursor: pointer;
}
.stop-item:hover { border-color: var(--accent); border-left-color: #f1c40f; }

/* --- Kolejność pojazdów na liście --- */
.lista-narzedzia {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
}
.lista-narzedzia select {
  flex: 1;
  min-width: 0;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 12px;
}
.lista-narzedzia select:disabled { opacity: .5; }
.lista-narzedzia button {
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.lista-narzedzia button:hover { border-color: var(--accent); }
.uklad-strzalki { display: flex; gap: 4px; }
.uklad-strzalki .uklad {
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  /* Na telefonie strzałki muszą być na tyle duże, żeby dało się w nie trafić. */
  min-width: 30px;
  min-height: 30px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.uklad-strzalki .uklad:hover { border-color: var(--accent); }

/* Od kiedy pojazd jedzie albo stoi — pierwsza rzecz, której szuka dyspozytor. */
.stan-jedzie, .stan-stoi { font-weight: 600; }
.stan-jedzie { color: var(--green); }
.stan-stoi { color: var(--muted); }

.vm.online .vm-arrow { color: var(--green); }
.vm.offline .vm-arrow { color: var(--red); }
.vm.sleeping .vm-arrow { color: var(--accent); }

.leaflet-container { background: #0e1320; }

/* --- Terminy serwisowe z aplikacji FLOTA --- */
/* Pilność rośnie od p-0 (spokojnie) do p-4 (po terminie). */
.serwis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}
.serwis-poz {
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}
.serwis-poz b { color: var(--text); font-weight: 600; }

.serwis-poz.p-1 { color: #cdd6e6; }
.serwis-poz.p-2, .serwis-wiersz.p-2 { color: var(--orange); }
.serwis-poz.p-2 b, .serwis-wiersz.p-2 b { color: var(--orange); }
.serwis-poz.p-3, .serwis-wiersz.p-3 { color: var(--red); }
.serwis-poz.p-3 b, .serwis-wiersz.p-3 b { color: var(--red); }
.serwis-poz.p-4, .serwis-wiersz.p-4 {
  background: rgba(231, 76, 60, .18);
  color: #ff8a7a;
}
.serwis-poz.p-4 b, .serwis-wiersz.p-4 b { color: #ff8a7a; }

.serwis-szczegoly {
  margin-top: 10px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.serwis-naglowek {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.serwis-wiersz {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(52, 64, 92, .5);
}
.serwis-etykieta { line-height: 1.3; }
.serwis-wiersz:last-of-type { border-bottom: none; }
.serwis-data { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.serwis-ile {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  line-height: 1.4;
}
.serwis-stopka {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11px;
}
.serwis-stopka a { color: var(--accent); text-decoration: none; }
.serwis-stopka a:hover { text-decoration: underline; }

/* odnośnik w pasku górnym (zmiana hasła) — wygląda jak sąsiedni przycisk */
.topbar-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2);
}
.topbar-link:hover { color: var(--text); border-color: var(--accent); }

/* ============================================================
   Wąski ekran — mapa i lista naprzemiennie na pełnym ekranie
   ============================================================
   Panel boczny ma 320 px, więc obok mapy mieści się dopiero powyżej 640 px.
   Poniżej tego progu przełączamy widoki dolnym paskiem: jest w zasięgu
   kciuka, a brak gestu przeciągania nie kłóci się z przesuwaniem mapy. */

@media (max-width: 639px) {
  /* dvh uwzględnia chowający się pasek adresu; vh zostaje jako zapas
     dla starszych przeglądarek */
  html, body { height: 100vh; height: 100dvh; }

  #topbar { gap: 12px; padding: 10px 14px; }
  .brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #topbar .tabs { display: none; }   /* ich rolę przejmuje dolny pasek */

  #sidebar, #map-area { width: 100%; min-width: 0; }
  #sidebar { border-right: none; }

  /* dolny pasek zasłaniałby treść — rezerwujemy pod niego miejsce */
  #sidebar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  body.widok-mapy #sidebar { display: none; }
  body.widok-listy #map-area { display: none; }

  /* Suwak odtwarzania przenosimy nad mapę (app.js przekłada element),
     bo w widoku mapy panel boczny jest schowany. */
  body.waski #map-area > #playback {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 1000;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
  }

  /* karta pojazdu: dane w dwóch kolumnach zamiast jednego długiego wiersza */
  .device-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
  }
  .serwis-poz { white-space: normal; }
  .serwis-poz.p-3, .serwis-poz.p-4 { flex-basis: 100%; }

  .quick-ranges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* Poza wąskim układem dolna nawigacja i przycisk „na mapę” są zbędne. */
#mobile-nav, #more-sheet, #karta-pojazdu { display: none; }

/* Karta pojazdu nad mapą, po kliknięciu strzałki. Na komputerze stoi
   w lewym dolnym rogu mapy, na telefonie na całą szerokość nad dolnym
   paskiem. Wysokość ograniczona do połowy mapy — app.js przesuwa mapę tak,
   żeby pojazd stał nad kartą. */
#karta-pojazdu:not(.hidden) {
  display: block;
  position: absolute;
  left: 12px;
  bottom: 24px;
  width: min(440px, calc(100% - 24px));
  z-index: 1001;
  max-height: 50%;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.kp-glowa { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kp-nazwa { flex: 1; font-weight: 600; font-size: 15px; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-predkosc { font-weight: 600; font-variant-numeric: tabular-nums; }
.kp-zamknij {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 50%;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.kp-historia {
  display: block; width: 100%; margin-top: 12px; min-height: 40px;
  background: var(--panel-2); color: inherit;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.kp-historia:hover, .kp-zamknij:hover { border-color: var(--accent); }

@media (max-width: 639px) {
  #karta-pojazdu:not(.hidden) {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(66px + env(safe-area-inset-bottom));
  }
  /* w widoku listy mapy nie ma, więc karta też znika */
  body.widok-listy #karta-pojazdu { display: none; }
  .kp-zamknij { width: 36px; height: 36px; font-size: 15px; }
  .kp-historia { min-height: 44px; }
}

.na-mape { display: none; }

@media (max-width: 639px) {
  #mobile-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1002;
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #mobile-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 56px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
  }
  #mobile-nav button span { font-size: 19px; line-height: 1; }
  #mobile-nav button.active { color: var(--accent); }

  #more-sheet { display: block; position: fixed; inset: 0; z-index: 1003; }
  #more-sheet.hidden { display: none; }
  .sheet-tlo { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
  .sheet-tresc {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--border);
    padding: 16px 16px 20px;
  }
  .sheet-tytul {
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin-bottom: 12px;
  }
  /* .map-switch trafia tu z paska górnego — układamy ją pionowo */
  .sheet-tresc .map-switch {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    font-size: 14px;
  }

  .na-mape {
    display: block;
    width: 100%;
    margin-top: 10px;
    min-height: 44px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
  }
}

/* Palec nie trafia w cel wysoki na 28 px — niezależnie od szerokości ekranu. */
@media (pointer: coarse) {
  .tab,
  .quick-ranges button,
  #hist-load,
  #logout-btn,
  .topbar-link,
  .map-switch select,
  #play-btn { min-height: 44px; }

  #hist-device, #hist-from, #hist-to {
    min-height: 44px;
    font-size: 16px;   /* poniżej 16 px iOS przybliża stronę przy dotknięciu pola */
  }
  #play-slider { height: 32px; }
  .trip-item { padding: 12px 10px; }
}

/* Napięcie instalacji pojazdu (lokalizatory Teltonika) */
.napiecie-ok { color: var(--muted); }
.napiecie-nisko { color: var(--red); font-weight: 600; }


/* --- Karta SIM z 1NCE --- */
.sim-pasek {
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
  border-left: 3px solid var(--border);
}
.sim-pasek b { color: var(--text); font-weight: 600; }
/* Kolory jak przy terminach serwisowych: zielony spokój, pomarańcz uwaga,
   czerwony „zajmij się tym dziś". */
.sim-pasek.s-ok        { border-left-color: var(--green); }
.sim-pasek.s-niski     { border-left-color: var(--orange); }
.sim-pasek.s-niski b   { color: var(--orange); }
.sim-pasek.s-zly       { border-left-color: var(--red); }
.sim-pasek.s-zly b     { color: var(--red); }
.sim-pasek.s-nieznany  { border-left-color: var(--border); }

.sim-szczegoly {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.sim-tytul { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.sim-wiersz { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.sim-wiersz span { color: var(--muted); }
.sim-wiersz b { font-weight: 600; word-break: break-all; text-align: right; }

/* --- Kilometry dzień po dniu (panel na żywo) --- */
#dzienne { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }

.dz-dzis {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.dz-dzis b { font-size: 19px; display: block; }
.dz-dzis span { font-size: 11px; color: var(--muted); }

.dz-wiersz {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  padding: 2px 0;
}
.dz-wiersz.dzis { color: var(--text); font-weight: 600; }
/* Szerokości na sztywno, żeby słupki zaczynały się i kończyły w jednej linii
   niezależnie od długości liczby — inaczej wykres „faluje”. */
.dz-data { width: 52px; flex-shrink: 0; }
.dz-km   { width: 58px; flex-shrink: 0; text-align: right; }
.dz-slupek {
  flex: 1;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.dz-slupek i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.dz-wiersz.dzis .dz-slupek i { background: var(--green); }

.dz-suma {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
}
.dz-suma b { color: var(--text); }