/* kartoteki.css
   ===============
   Style dla zakładki "Kierowcy i pojazdy" (kartoteki pojazdu/kierowcy) -
   przeprojektowanie z 17.08.2026.

   POPRAWKA 17.08.2026: pierwsza wersja uzywala var(--accent-green) dla
   podswietlenia aktywnych elementow (podzakladki) - to ZLA zmienna,
   --accent-green (#34D399 / szmaragd) w calej reszcie apki oznacza
   status "ok/online/potwierdzone" (patrz .badge.on, .dr-status-executed,
   .driver-state-badge.driving), NIE "wybrany element". Kolorem "wybrany/
   aktywny" jest wszedzie var(--accent-brand) - przygaszona ziel marki,
   uzywana w .vehicle-selector button.active, .pobrania-subtab-btn.active,
   .trips-range-presets button.active, .btn-primary. Ponizej dopasowane
   1:1 do tych wzorcow (sprawdzone bezposrednio w CSS produkcyjnym).
*/

/* Podzakladki Pojazdy/Kierowcy - KOPIA .pobrania-subtab-btn (pobrania.css).
   Celowo NIE reuzywamy tamtej klasy (kolizja z globalnym JS handlerem
   podzakladek Pobrania - patrz komentarz w index.html), wiec duplikujemy
   TYLKO STYL pod wlasna nazwa klasy. */
.kartoteki-subtab-btn {
  padding: 8px 16px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.kartoteki-subtab-btn.active {
  background: var(--accent-brand);
  color: #fff;
  border-color: var(--accent-brand);
}

/* Panel kartoteki - ta sama konwencja co .vehicle-card / .driver-summary-card
   (vehicle-card.css): surface (nie surface-2!), var(--radius), 1px border. */
.kartoteka-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.kartoteka-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.kartoteka-panel-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

/* Etykieta sekcji - ta sama konwencja co .chart-card-title (charts.css) */
.kartoteka-section-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 18px 0 10px;
}

.kartoteka-panel > .kartoteka-section-label:first-of-type {
  margin-top: 4px;
}

.kartoteka-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.kartoteka-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kartoteka-field-wide {
  grid-column: 1 / -1;
}

.kartoteka-field label {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* Pola formularza - ta sama konwencja co .trips-range-custom input[type="date"]
   (vehicle-card.css) i .dr-scope-dates input[type="date"] (pobrania.css). */
.kartoteka-field input,
.kartoteka-field select,
.kartoteka-field textarea {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 8px;
}

.kartoteka-field input:disabled {
  color: var(--text-dim);
  cursor: not-allowed;
}

.kartoteka-field textarea {
  resize: vertical;
}

.kartoteka-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.kartoteka-save-status {
  font-size: 12px;
  color: var(--accent-green);
}

.kartoteka-section {
  margin-top: 8px;
}

/* Nazwa kierowcy w wierszu segmentu (widok pojazd -> kierowcy, "Kierowcy,
   ktorzy prowadzili pojazd" w kartotece pojazdu) - reuzywa layout wiersza
   .driver-segment-row z vehicle-card.css, ale BEZ czcionki monospace:
   .driver-segment-vrn jest tam pomyslane dla numerow rejestracyjnych,
   nie dla imion i nazwisk. */
.driver-segment-name {
  font-weight: 700;
  font-size: 13px;
  min-width: 140px;
}

/* Odznaki terminow (przeglad/OC/kalibracja/karta kierowcy) - DOKLADNIE
   konwencja .dr-status-*/.driver-state-badge/.badge.on (rgba(...,0.15)
   tlo + kolorowy tekst, bez obwodki), NIE wlasny wymyslony styl z obwodka. */
.term-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 2px;
  width: fit-content;
}

.term-badge.term-ok {
  background: rgba(52, 211, 153, 0.15);
  color: var(--accent-green);
}

.term-badge.term-soon {
  background: rgba(245, 166, 35, 0.15);
  color: var(--accent-amber);
}

.term-badge.term-expired {
  background: rgba(242, 84, 91, 0.18);
  color: var(--accent-red);
}

/* ===== Podpowiedzi odczytanych identyfikatorow ===== */
/* Dodane 27.08.2026 - numery iButton/NFC widziane w danych, jeszcze
   nieprzypisane do kierowcy. */

.kartoteka-seen {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.9;
}

.kartoteka-seen-btn {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
}
.kartoteka-seen-btn:hover { background: var(--surface); border-color: var(--accent-brand); }

/* ===== Kierowcy do uzupelnienia ===== */
/* Rekordy utworzone automatycznie z numeru iButton/NFC - maja nazwe
   zastepcza i czekaja na prawdziwe imie i nazwisko. */

.kartoteka-badge-todo {
  display: inline-block;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(178, 106, 0, .15);
  color: #b26a00;
}

#kartoteka-driver-selector button.needs-name { border-style: dashed; }

/* ===== Skaner dowodu rejestracyjnego ===== */
/* Dodane 14.09.2026 — odczyt kodu Aztec kamerą telefonu. */

.dr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dr-modal-tresc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 16px;
}

.dr-modal-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dr-zamknij {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
}
.dr-zamknij:hover { color: var(--text); }

#dr-skaner-video {
  width: 100%;
  max-height: 300px;
  background: #000;
  border-radius: 10px;
  object-fit: cover;
}

.dr-stan {
  font-size: 13px;
  color: var(--text-dim);
  margin: 10px 0;
  line-height: 1.5;
}

.dr-ostrzezenie {
  background: rgba(245,166,35,.12);
  border: 1px solid rgba(245,166,35,.4);
  color: var(--accent-amber);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12.5px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.dr-lista {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}

.dr-pozycja {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  font-size: 12.5px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.dr-pozycja:last-child { border-bottom: none; }
.dr-pozycja input[type="checkbox"] { flex: 0 0 auto; margin: 0; }

.dr-opis { flex: 0 0 42%; color: var(--text-dim); }
.dr-wartosc { flex: 1; color: var(--text); font-weight: 500; }

/* Dotychczasowa wartość — pokazujemy tylko przy polach już wypełnionych,
   żeby było widać, co zostanie nadpisane. */
.dr-obecna {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--accent-amber);
}

.dr-akcje { display: flex; gap: 8px; margin-top: 12px; }

/* ===== Ręczne wklejanie kodu ===== */
/* Dodane 14.09.2026 — droga awaryjna, gdy kamera zawiedzie. */

.dr-recznie {
  margin: 10px 0;
  font-size: 12.5px;
}

.dr-recznie summary {
  cursor: pointer;
  color: var(--accent-brand);
  padding: 4px 0;
}

.dr-recznie-opis {
  color: var(--text-dim);
  font-size: 12px;
  margin: 6px 0;
  line-height: 1.5;
}

#dr-kod-recznie {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  resize: vertical;
  margin-bottom: 8px;
}

/* ===== Zdjęcie dowodu ===== */
/* Dodane 14.09.2026 — odczyt ze zdjęcia z aparatu, pewniejszy niż podgląd. */

.dr-zdjecie-blok {
  margin: 12px 0;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.dr-zdjecie-opis {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.5;
}

.dr-zdjecie-btn {
  display: inline-block;
  cursor: pointer;
  /* Etykieta udaje przycisk, bo pole wyboru pliku ukrywamy — inaczej
     przeglądarka pokazałaby systemowy przycisk „Wybierz plik". */
  text-align: center;
}

/* ===== Sekcje kartoteki z dowodu ===== */
/* Dodane 14.09.2026 — 32 pola z dowodu rejestracyjnego, pogrupowane
   i zwijane, żeby kartoteka nadal otwierała się na tym, co najczęstsze. */

.kartoteka-sekcja {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.kartoteka-sekcja summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}

.kartoteka-sekcja[open] summary {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.kartoteka-sekcja-opis {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ===== CEPiK w kartotece kierowcy ===== */
/* Dodane 16.09.2026 — sprawdzanie uprawnień w Centralnej Ewidencji Kierowców. */

.cepik-blok {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.cepik-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cepik-tytul { font-size: 13px; font-weight: 600; }

.cepik-select {
  font-size: 12px;
  padding: 4px 8px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.cepik-opis {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 10px;
}

.cepik-wynik { margin-top: 10px; }

.cepik-czekaj, .cepik-brak, .cepik-blad {
  font-size: 12.5px;
  padding: 10px;
  border-radius: 8px;
  line-height: 1.5;
}

.cepik-czekaj { color: var(--text-dim); }
.cepik-brak { background: var(--surface); color: var(--text-dim); }

.cepik-blad {
  background: var(--surface);
  color: var(--danger, #c0392b);
  border: 1px solid var(--danger, #c0392b);
}

.cepik-ok {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}

.cepik-wiersz {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
}

.cepik-wiersz span { color: var(--text-dim); }

.cepik-katy {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.cepik-kat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-weight: 600;
  font-size: 13px;
}

.cepik-kat small {
  font-weight: 400;
  font-size: 10.5px;
  color: var(--text-dim);
}

/* Termin minal — ma byc widoczny od razu, to caly powod sprawdzania. */
.cepik-kat-minal {
  border-color: var(--danger, #c0392b);
  color: var(--danger, #c0392b);
}

.cepik-kat-minal small { color: var(--danger, #c0392b); }

.cepik-komunikat {
  font-size: 12px;
  color: var(--warning, #b8860b);
  padding: 4px 0;
}

.cepik-stopka {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
}