/* =========================================================
   APLIKACJA KIEROWCY NA TELEFONIE — TYLKO `kierowca.html`

   Napisane 2026-10-12. Panel tego arkusza nie wczytuje.

   W panelu aplikacja kierowcy stoi w MAKIECIE telefonu (ramka,
   wycięcie, udawany pasek z godziną 9:41) — bo biuro ogląda ją na
   komputerze. Na prawdziwym telefonie makieta byłaby telefonem
   w telefonie. Tu rozciągamy ten sam ekran na całą szerokość
   i wysokość, a ramkę i udawany pasek chowamy.

   Kolory i odstępy zostają z `styles.css` — kierowca ma widzieć
   to samo, co biuro w podglądzie.
========================================================= */

body.kierowca{
  margin:0;
  background:var(--bg);
}

body.kierowca .driver-app-stage{
  display:block;
  padding:0;
}

/*
  `100dvh`, a nie samo `100vh`: na telefonie `100vh` liczy się razem
  z paskiem adresu przeglądarki i dolne zakładki chowały by się pod nim.
  `100vh` zostaje jako zapas dla starszych przeglądarek.
*/
body.kierowca .driver-app-phone{
  width:100%;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

body.kierowca .driver-app-notch,
body.kierowca .driver-app-statusbar{
  display:none;
}

/* Prawdziwe wycięcie ekranu telefonu — treść nie wchodzi pod nie. */
body.kierowca .driver-app-screen{
  padding-top:max(10px, env(safe-area-inset-top));
}

body.kierowca .driver-app-tabs{
  padding-bottom:max(14px, env(safe-area-inset-bottom));
}

/* ---------- Pasek z nazwiskiem i wylogowaniem ---------- */

.kierowca-pasek{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:4px 0 10px;
  color:var(--muted);
  font-size:13px;
}

.kierowca-link{
  border:0;
  background:none;
  color:var(--text);
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
  padding:6px 0;
}

/* ---------- Logowanie i zmiana hasła ---------- */

.kierowca-karta{
  box-sizing:border-box;
  max-width:420px;
  margin:0 auto;
  padding:max(32px, env(safe-area-inset-top)) 20px 32px;
  color:var(--text);
}

.kierowca-karta h1{
  font-size:24px;
  margin:0 0 8px;
}

.kierowca-opis{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.kierowca-komunikat{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
  line-height:1.4;
}

.kierowca-pole{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:14px 0;
  font-size:14px;
}

/*
  16 px — przy mniejszym iPhone sam przybliża ekran po kliknięciu
  w pole i kierowca musi go potem oddalać palcami.
*/
.kierowca-pole input{
  box-sizing:border-box;
  width:100%;
  padding:12px;
  font-size:16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:transparent;
  color:var(--text);
}

.kierowca-przycisk{
  width:100%;
  margin-top:8px;
  padding:14px;
  font-size:16px;
  font-weight:600;
  border:0;
  border-radius:12px;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
}

.kierowca-przycisk:disabled{
  opacity:.6;
  cursor:default;
}

/* =========================================================
   WYGLĄD APLIKACJI, NIE STRONY (2026-10-12)
   =========================================================

   Oskar: „ma wyglądać jak aplikacja webowa, ma być super
   responsywna". Trzy drobiazgi, po których strona przestaje
   wyglądać jak strona:

   - bez niebieskiego błysku przy dotknięciu (Android, iOS),
   - bez powiększania tekstu po obróceniu telefonu (iOS),
   - bez „gumowego" przewijania całej strony i bez zaznaczania
     napisów na przyciskach przy dłuższym przytrzymaniu.
========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.kierowca{
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

body.kierowca button,
body.kierowca .driver-app-tab{
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}

/* ---------- Logo i znak ---------- */

.kierowca-logo{
  display:block;
  width:210px;
  max-width:70%;
  height:auto;
  margin:8px 0 18px;
}

.kierowca-marka{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.kierowca-marka img{
  width:24px;
  height:24px;
  border-radius:6px;
  flex-shrink:0;
}

/* ---------- Podpowiedź „Dodaj do ekranu głównego" ---------- */

.kierowca-instalacja{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 14px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(59,159,224,.10);
  color:var(--text);
  font-size:13px;
  line-height:1.4;
}

.kierowca-instalacja img{
  width:40px;
  height:40px;
  border-radius:10px;
  flex-shrink:0;
}

.kierowca-instalacja div{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}

.kierowca-instalacja span{
  color:var(--muted);
}

.kierowca-instalacja-tak{
  flex-shrink:0;
  padding:9px 14px;
  border:0;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}

.kierowca-instalacja-nie{
  flex-shrink:0;
  width:32px;
  height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-size:16px;
  cursor:pointer;
}

/* =========================================================
   TABLET I KOMPUTER — KOLUMNA APLIKACJI
   =========================================================

   Na szerokim ekranie aplikacja rozciągnięta na całą szerokość
   wygląda jak źle zrobiona strona: kafelki po pół metra, przycisk
   przez cały monitor. Od 600 px trzymamy ją w kolumnie telefonu
   (480 px), wyśrodkowanej, na tle panelu — tak jak robią to
   aplikacje webowe otwarte na komputerze.
========================================================= */

@media (min-width:600px){
  body.kierowca .driver-app-phone{
    max-width:480px;
    margin:0 auto;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    box-shadow:0 0 60px rgba(0,0,0,.35);
  }

  .kierowca-karta{
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
}

/* Telefon trzymany poziomo: niski ekran, mniej odstępów nad formularzem. */
@media (max-height:500px) and (orientation:landscape){
  .kierowca-karta{
    padding-top:max(16px, env(safe-area-inset-top));
  }

  .kierowca-logo{
    margin:0 0 8px;
    width:160px;
  }
}