/* =========================================================
   style.css – wygląd aplikacji (kolory i układ wg garage_screen.png)
   Wzór: referenz/kod/static/css/style.css
   ========================================================= */

/* Główny kolor (niebieski pasek ze szkicu) – zmieniasz tylko tutaj */
:root {
    --color-main: #076085;
    --color-main-dark: #054a67;
    --color-text: #555;
    --color-line: #c9c9c9;
    --color-selected: #e3f0f6;
}

/* Atrybut hidden zawsze ukrywa (nawet gdy element ma display:flex) */
[hidden] { display: none !important; }

body {
    color: var(--color-text);
    background: #fff;
    /* Bezpieczne marginesy na iPhonie z "notchem" */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* ---------- Górna nawigacja ---------- */
.main-nav {
    --bs-navbar-color: #8c8c8c;
    --bs-navbar-hover-color: var(--color-main);
    --bs-navbar-active-color: var(--color-main);
    --bs-navbar-brand-color: var(--color-main);
    --bs-navbar-brand-hover-color: var(--color-main);
    --bs-navbar-nav-link-padding-x: 0;
    padding: .3rem 0 .3rem;
}
.main-nav .container-fluid { padding: 0 1rem; }
.main-nav .navbar-brand { font-size: 1.5rem; }
.main-nav .nav-link { font-size: 1.15rem; }
.main-nav .nav-link.active { font-weight: 600; }
@media (min-width: 768px) {
    .main-nav .navbar-nav { gap: 1.5rem; }
    .main-nav .nav-user { gap: .35rem; }
}
/* Telefon: rozwinięte menu – linki jeden pod drugim */
@media (max-width: 767.98px) {
    .main-nav .navbar-brand { font-size: 1.25rem; font-weight: 600; }
    .main-nav .navbar-collapse { border-top: 1px solid #ddd; margin-top: .4rem; }
    .main-nav .nav-link { padding: .55rem 0; }
    .main-nav .nav-user { border-top: 1px solid #eee; }
}

.content {
    padding: 0 1rem 2rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));   /* miejsce na pasek "Home" iPhone'a */
}

/* ---------- Niebieski pasek z tytułem, wyszukiwaniem i przyciskami ---------- */
.bar {
    background: var(--color-main);
    color: #fff;
    display: flex;
    flex-wrap: wrap;             /* na wąskim ekranie przyciski przechodzą do nowej linii */
    align-items: center;
    gap: .4rem 1rem;
    padding: .45rem .75rem;
    min-height: 2.9rem;
}
.bar-title {
    font-size: 1.35rem;
    min-width: 8rem;
}
.bar-subtitle { font-size: 1rem; opacity: .85; }
.search-field {
    flex: 0 1 22rem;
    border-radius: .4rem;
    padding: .2rem .6rem;
}
.bar-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}
/* Przyciski-ikony (Filter / Neu / Bearbeiten / Löschen) */
.bar-buttons button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    width: 2.3rem;               /* kwadratowe pole – łatwo trafić palcem */
    height: 2.3rem;
    padding: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bar-buttons button:hover,
.bar-buttons button:focus-visible,
.bar-buttons button.active {     /* włączony filtr */
    background: var(--color-main-dark);
}
/* Pozycje menu sortowania NIE są ikonami (pułapka z referencji, WZORCE C7) */
.bar .dropdown-item {
    width: auto;
    height: auto;
    color: #333;
    font-size: 1rem;
    display: block;
}
.bar .dropdown-item.active { background: var(--color-main); color: #fff; }
.button-separator {
    width: 1px;
    align-self: stretch;
    margin: .35rem .3rem;
    background: rgba(255, 255, 255, .35);
}

/* ---------- Tabele ---------- */
.data-table {
    font-size: .95rem;
    margin-bottom: 0;
}
.data-table th {
    font-weight: 600;
    color: #666;
    white-space: nowrap;
    border-bottom: 1px solid #999;
}
.data-table td {
    color: var(--color-text);
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}
.data-table tbody tr[data-id] { cursor: pointer; }
.data-table tbody tr.selected > td { background: var(--color-selected); }
.col-select { width: 2.2rem; }
.col-icon { width: 3.5rem; text-align: center; }
.col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* Większe pola wyboru – łatwiej trafić palcem na iPhonie */
.data-table input[type=checkbox] {
    width: 1.15rem;
    height: 1.15rem;
    cursor: pointer;
}
.empty-hint {
    color: #aaa;
    text-align: center;
    font-style: italic;
    cursor: default !important;
}

/* Pojazd "nicht aktiv" – szary tekst */
.data-table tr.inactive > td { color: #aaa; }

/* Przycisk z ikoną i liczbą (kolumny "Dok" i "Bilder") */
.btn-count {
    border: none;
    background: none;
    color: var(--color-main);
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: 1.2rem;
    line-height: 1;
    white-space: nowrap;
}
.btn-count:hover { background: var(--color-selected); }
.btn-count.empty { color: #b5c7d0; }          /* brak plików – jaśniejsza ikona */
.btn-count.empty:hover { color: var(--color-main); }
.count-number {
    font-size: .8rem;
    font-weight: 600;
    margin-left: .15rem;
    vertical-align: middle;
}

/* Licznik zaplanowanych serwisów przy Kennzeichen */
.badge-count {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .45em;
    border-radius: 1em;
    font-size: .75em;
    color: #fff;
    background: #e67e00;
    vertical-align: middle;
}
/* Serwis zaplanowany (jeszcze nie wykonany) */
.badge-planned {
    font-size: .8rem;
    color: #e67e00;
    border: 1px solid #f0b46b;
    border-radius: 3px;
    padding: 0 .35rem;
}
.status-geplant .service-name { font-weight: 600; color: #333; }

/* Terminy TÜV */
.data-table td.date-overdue { color: #c62828; font-weight: 600; }
.data-table td.date-soon { color: #e67e00; font-weight: 600; }

/* Notatka pod nazwą serwisu (jedna linia, reszta "...") i informacje dodatkowe */
.note-preview, .small-info {
    font-size: .8rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}
.note-preview:empty, .small-info:empty { display: none; }
.small-info.wrap { white-space: normal; }      /* np. długa nazwa pojazdu – łamie się do nowej linii */
@media (max-width: 575.98px) {
    .note-preview, .small-info { max-width: 45vw; }
    /* Wąskie kolumny (pole wyboru, kółko, ikony) – mniej miejsca na brzegach */
    .data-table .col-select, .data-table .col-done, .data-table .col-icon { width: auto; padding-left: .15rem; padding-right: .15rem; }
}
.small-info.date-overdue { color: #c62828; font-weight: 600; }
.small-info.date-soon { color: #e67e00; font-weight: 600; }
.note-cell { white-space: pre-line; }

/* ---------- Licznik w menu ("Geplant 12") ---------- */
.nav-counter:not(:empty) {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .45em;
    border-radius: 1em;
    font-size: .75em;
    font-weight: 600;
    color: #fff;
    background: #e67e00;
    vertical-align: middle;
}

/* ---------- Strona "Geplant" ---------- */
.col-done { width: 2.6rem; }
/* Duże kółko do odhaczania – łatwo trafić kciukiem */
.btn-done {
    border: none;
    background: none;
    padding: .1rem .2rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-main);
}
.btn-done:hover { color: var(--color-main-dark); }
/* Odhaczony serwis: szary i przekreślony, aż do odświeżenia listy */
.data-table tr.done .service-name,
.data-table tr.done .vehicle-link { color: #aaa; text-decoration: line-through; }
.data-table tr.done .btn-done { color: #2e7d32; }
.vehicle-link { color: var(--color-main); text-decoration: none; font-weight: 600; }
.vehicle-link:hover { text-decoration: underline; }
.small-info.date-overdue, .data-table td.date-overdue { color: #c62828; }

/* ---------- TÜV-Planer ---------- */
.month-picker {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 1 auto;
}
.month-picker button {
    background: none; border: none; color: #fff;
    width: 2.1rem; height: 2.1rem; border-radius: 4px; font-size: 1.1rem;
}
.month-picker button:hover { background: var(--color-main-dark); }
.month-picker input { width: 11rem; padding: .2rem .5rem; }
.month-picker select { width: 8.5rem; padding: .2rem 2rem .2rem .5rem; }
/* Nagłówki grup (Überfällig, November 2026, ...) */
.tuv-table tr.group-row > td {
    background: #eef4f7;
    color: var(--color-main);
    font-weight: 600;
    border-left: 3px solid var(--color-main);
    cursor: default;
}
.tuv-table tr.group-overdue > td { background: #fdecea; color: #c62828; border-left-color: #c62828; }
.tuv-table tr.group-muted > td { background: #f5f5f5; color: #888; border-left-color: #bbb; }
.group-count {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .45em;
    border-radius: 1em;
    font-size: .8em;
    border: 1px solid currentColor;
}
.tuv-table input.form-control-sm { min-width: 8.5rem; }
.tuv-table .input-warning { border-color: #e67e00; color: #e67e00; }
.data-table td.date-soon { color: #e67e00; font-weight: 600; }
@media (max-width: 575.98px) {
    .month-picker { order: 3; flex: 1 1 100%; min-width: 0; }
    .month-picker input { flex: 1 1 auto; width: auto; min-width: 0; }
    .month-picker select { width: 7rem; flex: 0 0 auto; }
    .month-picker button { width: 1.8rem; flex: 0 0 auto; }
    /* Pole terminu wąskie – przycisk "erledigt" musi zmieścić się na ekranie */
    .tuv-table input.form-control-sm { min-width: 0; width: 7.4rem; padding-left: .3rem; padding-right: .2rem; }
}

/* ---------- Prawa dostępu: bez prawa element znika (serwer i tak blokuje) ---------- */
body.no-add .needs-add,
body.no-edit .needs-edit,
body.no-delete .needs-delete { display: none !important; }

/* ---------- Protokoll (logowania) ---------- */
.log-options {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 0 1 auto;
}
.log-options label { font-size: .9rem; opacity: .85; margin-left: .5rem; white-space: nowrap; }
.log-options select { width: auto; padding: .2rem 2rem .2rem .5rem; }
.log-table tr.log-fehlgeschlagen > td { background: #fdecea; }
.log-table tr.log-fehlgeschlagen .log-event { color: #c62828; font-weight: 600; }
.log-table tr.log-login .log-event { color: #2e7d32; }
.log-table tr.log-logout .log-event { color: #777; }
@media (max-width: 575.98px) {
    .log-options { order: 3; flex: 1 1 100%; min-width: 0; }
    .log-options select { flex: 1 1 0; min-width: 0; }
    .log-options label { display: none; }
}

/* ---------- Druk (TÜV-Planer: przycisk 🖨, także "Als PDF speichern") ---------- */
.print-only { display: none; }
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    .print-only { display: block; }
    th.print-only, td.print-only { display: table-cell; }
    span.print-only { display: inline; }
    .no-print, .main-nav, .messages, .scroll-hint-top, .scroll-hint-bottom, .modal { display: none !important; }
    /* Strona z listą: zwykły układ, bez przewijania – drukarka bierze całą tabelę */
    body.page-list { height: auto; overflow: visible; display: block; }
    body.page-list .content, .scroll-area { display: block; overflow: visible !important; height: auto; padding: 0; }
    .scroll-area thead th { position: static; }
    thead { display: table-header-group; }      /* nagłówek tabeli na każdej stronie */
    tr { break-inside: avoid; }
    body { color: #000; font-size: 10pt; }
    .data-table th, .data-table td { color: #000 !important; padding: .25rem .35rem; }
    /* Wszystkie kolumny widoczne na wydruku (także te ukryte na wąskim ekranie) */
    .data-table .d-none { display: table-cell !important; }
    .data-table .small-info.d-md-none { display: none !important; }
    .print-header h1 { font-size: 16pt; margin: 0 0 .2rem; }
    .print-header { margin-bottom: .6rem; }
    .tuv-table tr.group-row > td { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-box { font-size: 14pt; text-align: center; }
    /* strzałki sortowania – niepotrzebne na papierze (selektor mocniejszy niż reguła ogólna niżej w pliku) */
    .data-table th.sortable::after { content: none; }
    .tuv-table { width: 100%; }
    /* "Bemerkung" – miejsce na odręczne notatki (stała szerokość – procenty tabela ignoruje) */
    .tuv-table .print-note { width: 45mm; min-width: 45mm; }
    a { color: #000; text-decoration: none; }
}

/* ---------- Sortowanie: strzałki przy nagłówkach ---------- */
th.sortable {
    cursor: pointer;
    user-select: none;
}
th.sortable:hover { color: var(--color-main); }
/* Bez sortowania: blada podwójna strzałka; aktywna kolumna: ▲ albo ▼ w kolorze aplikacji */
th.sortable::after {
    content: "\21C5";
    margin-left: .3em;
    font-size: .8em;
    opacity: .3;
}
th.sort-up::after { content: "\25B2"; opacity: 1; color: var(--color-main); }
th.sort-down::after { content: "\25BC"; opacity: 1; color: var(--color-main); }
th.sort-up, th.sort-down { color: var(--color-main); }

/* ---------- Obszary z paskiem przewijania ---------- */
.scroll-area {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;               /* bez odstępu – inaczej wiersze "prześwitują" nad nagłówkiem */
    padding-bottom: 0;
}
/* Nagłówki tabel "przyklejone" do góry przy przewijaniu */
.scroll-area thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

/* =========================================================
   UKŁAD STRON Z LISTAMI (PC, tablet i telefon)
   Strona ma dokładnie wysokość ekranu: menu i niebieskie paski stoją,
   przewijają się tylko listy – cały ekran nigdy.
   Na głównym ekranie: pojazdy u góry, serwisy na dole, po połowie wysokości.
   ========================================================= */
body.page-list {
    height: 100vh;                 /* starsze przeglądarki */
    height: 100dvh;                /* iPhone/iPad: wysokość bez paska adresu Safari */
    display: flex;
    flex-direction: column;
    overflow: hidden;              /* cała strona się nie przewija */
}
body.page-list .content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}
body.page-list .scroll-full,
.garage-layout .scroll-area {
    flex: 1 1 0;                   /* lista = cała pozostała wysokość */
    min-height: 0;
}
.garage-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);   /* po połowie wysokości */
    gap: 1rem;
}
.garage-layout > section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Telefon: węższe marginesy, mniejszy odstęp między listami */
@media (max-width: 767.98px) {
    .content { padding: 0 .5rem 2rem; }
    .garage-layout { gap: .5rem; }
    .bar-title { font-size: 1.15rem; min-width: 0; }
    /* Wyszukiwarka zajmuje całą linię pod tytułem */
    .search-field { order: 3; flex: 1 1 100%; }
    .bar-buttons { margin-left: auto; }
    .data-table { font-size: .95rem; }
    .data-table td, .data-table th { padding-left: .3rem; padding-right: .3rem; }
}

/* ---------- Wskaźnik "jest więcej wpisów" (WZORCE C3) ---------- */
.scroll-container { position: relative; }

.scroll-hint-top,
.scroll-hint-bottom {
    position: absolute;
    z-index: 2;                    /* nad przyklejonym nagłówkiem tabeli */
    pointer-events: none;          /* kliknięcia przechodzą do wierszy pod spodem */
    opacity: 0;
    transition: opacity .2s;
}
.scroll-hint-top.visible,
.scroll-hint-bottom.visible { opacity: 1; }

/* Cień pod nagłówkiem – lista jest przewinięta w dół */
.scroll-hint-top {
    height: .8rem;
    background: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
}
/* Rozjaśnienie na dole + okrągły przycisk ▼ */
.scroll-hint-bottom {
    height: 2.6rem;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: .2rem;
}
.scroll-hint-bottom button {
    pointer-events: auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: none;
    background: var(--color-main);
    color: #fff;
    font-size: .7rem;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    opacity: .85;
}
.scroll-hint-bottom button:hover { opacity: 1; }
.scroll-hint-bottom:not(.visible) button { pointer-events: none; }

/* Paski przewijania zawsze widoczne (Chrome, Safari, Edge) */
.scroll-area::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-area::-webkit-scrollbar-track { background: #f0f0f0; }
.scroll-area::-webkit-scrollbar-thumb {
    background: #9fb8c5;
    border-radius: 5px;
    border: 2px solid #f0f0f0;
}
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--color-main); }
@supports (-moz-appearance: none) {
    .scroll-area { scrollbar-width: thin; scrollbar-color: #9fb8c5 #f0f0f0; }
}

/* ---------- Przyciski ---------- */
.btn-main {
    background: var(--color-main);
    border-color: var(--color-main);
    color: #fff;
}
.btn-main:hover, .btn-main:focus {
    background: var(--color-main-dark);
    border-color: var(--color-main-dark);
    color: #fff;
}
.btn-outline-main {
    color: var(--color-main);
    border-color: var(--color-main);
    background: #fff;
}
.btn-outline-main:hover, .btn-outline-main:focus {
    background: var(--color-main);
    color: #fff;
}
/* Małe przyciski w wierszach tabeli (dokumenty) */
.btn-row {
    border: none;
    background: none;
    color: var(--color-main);
    padding: .25rem .45rem;
    border-radius: 4px;
    font-size: 1.05rem;
    line-height: 1;
    display: inline-block;
}
.btn-row:hover { background: var(--color-selected); }

/* ---------- Okna ---------- */
.modal-subtitle { font-size: .9rem; color: #888; }
/* Nagłówki sekcji w oknie pojazdu (Fahrzeug, Zulassung, TÜV, GPS-Tracker...) */
.form-section {
    color: var(--color-main);
    font-weight: 600;
    border-bottom: 1px solid #dde7ec;
    padding-bottom: .3rem;
    margin: 1.4rem 0 .75rem;
}
.modal-body > .form-section:first-of-type { margin-top: 0; }
/* Stan trackera GPS */
.tracker-online { color: #2e7d32; font-weight: 600; }
.tracker-offline { color: #c62828; font-weight: 600; }

/* Kolumna "GPS" na liście pojazdów */
.btn-count.gps-online { color: #2e7d32; }
.btn-count.gps-offline { color: #9aa9b1; }
.btn-count.gps-unknown { color: #c9d6dc; }
.btn-count .gps-warning { color: #e67e00; margin-left: .15rem; }
.btn-count .count-number.gps-warning { margin-left: .1rem; }

/* Okno "Position": mapa i tabela danych */
.position-map {
    width: 100%;
    height: 45vh;
    min-height: 220px;
    border: 1px solid #ddd;
    border-radius: .4rem;
}
.position-table th { width: 45%; font-weight: 600; color: #666; }

/* ---------- Komunikaty ---------- */
.messages {
    position: fixed;
    top: .75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;              /* nad oknami modalnymi */
    width: min(30rem, 92vw);
}

/* ---------- Logowanie / zmiana hasła ---------- */
.login-box {
    max-width: 22rem;
    margin: 10vh auto 0;
    padding: 1.5rem;
    border: 1px solid #ddd;
}
.login-title {
    color: var(--color-main);
    font-size: 1.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

/* ---------- Dokumenty ---------- */
.doc-extension {
    font-size: .7rem;
    color: #777;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 .3rem;
    margin-left: .3rem;
    vertical-align: middle;
}
.document-form {
    margin-top: 1.25rem;
    padding: .75rem;
    background: #f5f8fa;
    border-radius: .4rem;
}

/* ---------- Przeglądarka zdjęć ---------- */
.photo-preview {
    position: relative;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 45vh;
}
.photo-preview img {
    max-width: 100%;
    max-height: 60vh;
    display: block;
}
.preview-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    line-height: 1;
    opacity: .8;
}
.preview-arrow.left { left: .5rem; }
.preview-arrow.right { right: .5rem; }

.photo-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: .5rem;
}
.photo-thumbnails img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;          /* kwadratowe miniatury bez zniekształceń */
    cursor: pointer;
    border: 3px solid transparent;
}
.photo-thumbnails img.active { border-color: var(--color-main); }

/* ---------- Telefon (iPhone) ---------- */
@media (max-width: 575.98px) {
    .photo-preview { min-height: 35vh; }
    /* W oknach z formularzem: "Abbrechen" chowamy (zamyka też ✕ u góry),
       a oba przyciski zapisu dzielą jedną linię na pełną szerokość */
    form.modal-content .modal-footer .btn-outline-secondary { display: none; }
    form.modal-content .modal-footer .btn { flex: 1 1 auto; white-space: nowrap; }
}
/* Na iPhonie pola formularza muszą mieć min. 16px, inaczej Safari powiększa stronę */
@media (max-width: 991.98px) {
    input, select, textarea { font-size: 16px !important; }
}

/* W zainstalowanej aplikacji: bez "gumowego" przewijania całej strony poza krawędź */
html.pwa, html.pwa body { overscroll-behavior-y: none; }