@charset "UTF-8";
/* =====================================================================
   Nowe funkcje warsztatu: etapy naprawy, następny krok, powiadomienia,
   zdjęcia, plan warsztatu, wyszukiwarka, statystyki, ustawienia.
   Kolory jak w reszcie programu (#2f6db5 / #1f3b57).
   ===================================================================== */

:root {
    --wz-niebieski: #2f6db5;
    --wz-niebieski-ciemny: #255a96;
    --wz-granat: #1f3b57;
    --wz-szary: #6a737d;
    --wz-linia: #e1e4e8;
    --wz-tlo: #f6f8fa;
    --wz-zielony: #2e7d32;
    --wz-pomarancz: #d97706;
    --wz-czerwony: #c62828;
}

/* ---------- przyciski w nowych sekcjach ---------- */
.wz-glowny,
.wz-etapy .btn-obrys, .wz-dodatki .btn-obrys, .wz-strona .btn-obrys,
.wz-dodatki button, .wz-strona button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 6px; border: 1px solid var(--wz-niebieski);
    background: var(--wz-niebieski); color: #fff; font: 600 12px/1.2 inherit; font-family: inherit;
    text-decoration: none; cursor: pointer; white-space: nowrap; height: auto; width: auto; margin: 0;
}
.wz-glowny:hover, .wz-dodatki button:hover, .wz-strona button:hover { background: var(--wz-niebieski-ciemny); border-color: var(--wz-niebieski-ciemny); color: #fff; }
.wz-etapy .btn-obrys, .wz-dodatki .btn-obrys, .wz-strona .btn-obrys { background: #fff; color: var(--wz-niebieski); }
.wz-etapy .btn-obrys:hover, .wz-dodatki .btn-obrys:hover, .wz-strona .btn-obrys:hover { background: #eef4fb; }
.wz-dodatki .btn-maly, .wz-strona .btn-maly { padding: 3px 9px; font-size: 11px; }
.wz-glowny:disabled, .wz-dodatki button:disabled, .wz-strona button:disabled { opacity: .45; cursor: not-allowed; }
.wz-strona button.wz-drugi { background: #fff; color: var(--wz-niebieski); }
.wz-strona button.wz-niebezp { background: #fff; color: var(--wz-czerwony); border-color: #e3a5a5; }

.wz-wskazowka { color: var(--wz-szary); font-size: 11px; }
.wz-pusto { color: var(--wz-szary); font-size: 12px; margin: 4px 0; }
.wz-meta { display: block; color: var(--wz-szary); font-size: 11px; }
.wz-nowrap { white-space: nowrap; }
.wz-znacznik { display: inline-block; padding: 0 6px; border-radius: 9px; background: #e8f5e9; color: var(--wz-zielony); font-size: 10px; font-weight: 700; }
.wz-uwaga { border-left: 4px solid var(--wz-pomarancz) !important; background: #fff8eb !important; }
.wz-uwaga code { background: #fff; padding: 0 4px; border-radius: 3px; }

/* =====================================================================
   PASEK ETAPÓW + NASTĘPNY KROK (karta naprawy)
   ===================================================================== */
.wz-etapy { margin: 8px 0 10px; padding: 12px 14px !important; }
.wz-etapy .info, .wz-etapy .error { margin: 0 0 10px; }

.wz-pasek {
    list-style: none; margin: 0 0 12px; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    counter-reset: etap; position: relative;
}
.wz-pasek li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; min-width: 0; padding: 0 2px; }
/* linia łącząca kropki */
.wz-pasek li::before {
    content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 3px;
    background: var(--wz-linia); z-index: 0;
}
.wz-pasek li:first-child::before { display: none; }
.wz-pasek li.zrobione::before { background: var(--wz-zielony); }
.wz-pasek form { margin: 0; padding: 0; display: contents; }
.wz-pasek .wz-kropka {
    position: relative; z-index: 1; width: 24px !important; height: 24px !important; min-width: 0; border-radius: 50% !important;
    border: 3px solid #c8d0d8 !important; background: #fff !important; padding: 0 !important; margin: 0; cursor: default; box-shadow: none;
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.wz-pasek button.wz-kropka { cursor: pointer; }
.wz-pasek button.wz-kropka:hover { border-color: var(--wz-niebieski) !important; box-shadow: 0 0 0 3px #dbe8f7; }
.wz-pasek li.zrobione .wz-kropka { background: var(--wz-zielony) !important; border-color: var(--wz-zielony) !important; }
.wz-pasek li.zrobione .wz-kropka::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.wz-pasek li.zrobione button.wz-kropka:hover { background: #fff !important; border-color: var(--wz-czerwony) !important; box-shadow: 0 0 0 3px #f6dada; }
.wz-pasek li.zrobione button.wz-kropka:hover::after { content: "↺"; color: var(--wz-czerwony); }
.wz-pasek li.biezacy .wz-kropka { border-color: var(--wz-niebieski) !important; box-shadow: 0 0 0 4px #dbe8f7; }
.wz-pasek .wz-nazwa { font-size: 11px; font-weight: 600; color: var(--wz-granat); line-height: 1.2; }
.wz-pasek li:not(.zrobione):not(.biezacy) .wz-nazwa { color: var(--wz-szary); font-weight: normal; }
.wz-pasek .wz-data { font-size: 10px; color: var(--wz-szary); }

.wz-nastepny {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-radius: 8px; background: #eef4fb; border: 1px solid #d3e2f3;
}
.wz-nastepny-opis { display: flex; flex-direction: column; gap: 2px; min-width: 220px; font-size: 13px; color: var(--wz-granat); }
.wz-nastepny-opis .wz-etykieta { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--wz-niebieski); font-weight: 700; }
.wz-podpowiedz { font-size: 12px; color: var(--wz-szary); }
.wz-podpowiedz.pilne { color: var(--wz-pomarancz); font-weight: 700; }
.wz-nastepny-akcje { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.wz-nastepny-akcje > a { height: auto; }
.wz-etap-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; width: auto !important; float: none; }
.wz-etap-form input[type="date"] {
    height: 30px; padding: 2px 6px; border: 1px solid #b7c6d8; border-radius: 6px; font: inherit; font-size: 12px;
    background: #fff; color: #222; width: auto;
}
.wz-etap-form .wz-glowny { padding: 7px 14px; font-size: 13px; }

.wz-narzedzia { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--wz-linia); }
.wz-narzedzia a { color: var(--wz-niebieski); font-size: 12px; font-weight: 600; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.wz-narzedzia a:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .wz-pasek { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
    .wz-pasek li::before { display: none; }
}

/* =====================================================================
   DOLNE SEKCJE KARTY NAPRAWY
   ===================================================================== */
.wz-dodatki { margin-top: 10px; }
.wz-dwie { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.wz-sekcja h2 .h2-prawa { margin-left: auto; display: inline-flex; gap: 6px; font-weight: normal; }
.wz-sekcja > h2, .wz-sekcja summary h2 { display: flex; align-items: center; gap: 6px; }
.wz-podtytul { font-size: 12px; color: var(--wz-granat); margin: 12px 0 4px; }

details.wz-sekcja > summary { list-style: none; cursor: pointer; }
details.wz-sekcja > summary::-webkit-details-marker { display: none; }
details.wz-sekcja > summary h2 { margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 600; color: var(--wz-granat); }
details.wz-sekcja > summary h2::after { content: "▾"; margin-left: auto; color: var(--wz-szary); }
details.wz-sekcja[open] > summary h2 { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #eef0f2; }
details.wz-sekcja[open] > summary h2::after { content: "▴"; }

.wz-powiadom { display: grid; gap: 8px; max-width: 760px; }
.wz-szablony { display: flex; flex-wrap: wrap; gap: 6px; }
.wz-dodatki .wz-szablon { background: #fff; color: var(--wz-granat); border-color: #c8d6e5; font-weight: 600; }
.wz-dodatki .wz-szablon:hover, .wz-dodatki .wz-szablon.aktywny { background: #eef4fb; border-color: var(--wz-niebieski); color: var(--wz-niebieski); }
.wz-pole { display: grid; gap: 3px; font-size: 12px; color: var(--wz-szary); font-weight: 600; }
.wz-pole small { font-weight: normal; }
.wz-pole select, .wz-pole input, .wz-pole textarea {
    width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #b7c6d8; border-radius: 6px;
    font: inherit; font-size: 13px; color: #222; background: #fff; height: auto; font-weight: normal;
}
.wz-powiadom-przyciski { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wz-lista-wiad { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wz-lista-wiad li { padding: 6px 8px; border-radius: 6px; background: var(--wz-tlo); font-size: 12px; }
.wz-lista-wiad li.blad { background: #fdecec; }

.wz-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.wz-galeria a { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--wz-tlo); border: 1px solid var(--wz-linia); }
.wz-galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wz-tabela { width: 100%; border-collapse: collapse; font-size: 12px; display: table !important; white-space: normal !important; }
.wz-tabela th { text-align: left; color: var(--wz-szary); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--wz-linia); background: none; }
.wz-tabela td { padding: 5px 6px; border-bottom: 1px solid #f0f2f4; vertical-align: top; background: none !important; }
.wz-tabela td, .wz-tabela th { text-align: left !important; }
.wz-tabela .prawo { text-align: right !important; }
.wz-tabela a { color: var(--wz-niebieski); text-decoration: none; font-weight: 600; }

.wz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.wz-lista li { padding: 5px 8px; border-radius: 6px; background: var(--wz-tlo); }
.wz-lista li.zakonczone { opacity: .65; }
.wz-historia li { background: none; padding: 3px 0; border-bottom: 1px solid #f0f2f4; border-radius: 0; }
.wz-historia .wz-meta { display: inline; }

.wz-historia-pojazdu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wz-historia-pojazdu li { display: flex; gap: 10px; align-items: flex-start; padding: 6px; border-radius: 6px; background: var(--wz-tlo); font-size: 12px; }
.wz-historia-pojazdu a { color: var(--wz-niebieski); text-decoration: none; }
.wz-miniatura { width: 56px; height: auto; flex: 0 0 56px; background: #fff; border-radius: 4px; border: 1px solid var(--wz-linia); }
.wz-zakres { color: #333; margin-top: 2px; }

.wz-kwoty { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--wz-tlo); display: grid; gap: 4px; font-size: 12px; }
.wz-kwoty > div { display: flex; justify-content: space-between; gap: 10px; }
.wz-kwoty > div span { color: var(--wz-szary); }
.wz-kwoty .minus b { color: var(--wz-czerwony); }
.wz-kwoty .plus b { color: var(--wz-zielony); }
.wz-kwoty details summary { cursor: pointer; color: var(--wz-niebieski); font-weight: 600; font-size: 11px; }
.wz-kwoty-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 6px; }
.wz-kwoty-form label { display: grid; gap: 2px; font-size: 11px; color: var(--wz-szary); }
.wz-kwoty-form input { width: 110px; padding: 4px 6px; border: 1px solid #b7c6d8; border-radius: 5px; text-align: right; height: auto; }
.wz-kwoty-form button { padding: 5px 10px; border-radius: 5px; border: 1px solid var(--wz-niebieski); background: var(--wz-niebieski); color: #fff; font-weight: 600; cursor: pointer; height: auto; width: auto; }

/* =====================================================================
   WYSZUKIWARKA W MENU
   ===================================================================== */
nav.menu_top.gm .gm-szukaj { display: flex; align-items: center; margin: 0 4px 0 auto; position: relative; width: auto; flex: 0 0 auto; float: none; padding: 0; border: 0; background: none; }
nav.menu_top.gm .gm-szukaj ~ #logout { margin-left: 0; }
.gm-szukaj input {
    width: 170px; height: 30px; padding: 4px 10px 4px 30px; border: 1px solid #c8d6e5; border-radius: 15px;
    font: inherit; font-size: 12px; background: #fff; color: #222; box-sizing: border-box; margin: 0;
}
.gm-szukaj input:focus { outline: none; border-color: var(--wz-niebieski); box-shadow: 0 0 0 3px #dbe8f7; width: 240px; }
.gm-szukaj i { position: absolute; left: 11px; color: var(--wz-szary); font-size: 12px; pointer-events: none; }
@media (max-width: 860px) { nav.menu_top.gm .gm-szukaj { order: 3; width: 100%; flex: 1 1 100%; margin: 6px 0 0; } nav.menu_top.gm .gm-szukaj input, nav.menu_top.gm .gm-szukaj input:focus { width: 100%; } }

/* =====================================================================
   STRONY NOWYCH FUNKCJI (.wz-strona w .widok)
   ===================================================================== */
.wz-strona .karta { margin-bottom: 10px; }
.wz-filtry { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.wz-filtry label { display: grid; gap: 2px; font-size: 11px; color: var(--wz-szary); font-weight: 600; }
.wz-filtry input, .wz-filtry select {
    height: 30px; padding: 3px 8px; border: 1px solid #b7c6d8; border-radius: 6px; font: inherit; font-size: 12px; background: #fff; color: #222; width: auto;
}

/* wyniki wyszukiwania */
.wz-wyniki-grupa h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--wz-szary); margin: 10px 0 4px; }
.wz-wyniki-grupa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wz-wyniki-grupa li a { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 7px 10px; border-radius: 6px; background: var(--wz-tlo); color: #222; text-decoration: none; font-size: 13px; }
.wz-wyniki-grupa li a:hover { background: #eef4fb; }
.wz-wyniki-grupa li a b { color: var(--wz-niebieski); }
.wz-wyniki-grupa mark { background: #fff3b0; padding: 0 1px; }
.wz-tablica { display: inline-block; padding: 0 6px; border: 1px solid #333; border-left: 5px solid #1d4fa8; border-radius: 3px; font-family: Consolas, monospace; font-weight: 700; font-size: 12px; background: #fff; }

/* plan warsztatu */
.wz-plan-wrap { overflow-x: auto; }
.wz-plan { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 760px; display: table !important; white-space: normal !important; table-layout: fixed; }
.wz-plan td, .wz-plan tbody th { text-align: left !important; }
.wz-plan thead th:first-child { width: 120px; }
.wz-plan th, .wz-plan td { border-right: 1px solid var(--wz-linia); border-bottom: 1px solid var(--wz-linia); padding: 4px; vertical-align: top; background: #fff !important; }
.wz-plan thead th { background: var(--wz-tlo) !important; color: var(--wz-granat); text-align: center; font-weight: 700; position: sticky; top: 0; }
.wz-plan thead th.dzis { background: #dbe8f7 !important; }
.wz-plan thead th small { display: block; font-weight: normal; color: var(--wz-szary); }
.wz-plan tbody th { text-align: left; background: var(--wz-tlo) !important; color: var(--wz-granat); width: 120px; }
.wz-plan td.dzis { background: #f5f9fe !important; }
.wz-plan td.weekend { background: #fafafa !important; }
.wz-plan .wz-wpis {
    display: block; margin: 0 0 3px; padding: 3px 5px; border-radius: 5px; border: 0 !important; border-left: 4px solid var(--wz-niebieski) !important; text-align: left; height: auto; width: auto;
    background: #eef4fb; color: #222; text-decoration: none; line-height: 1.25; cursor: pointer;
}
.wz-wpis:hover { background: #e1ecf9; }
.wz-plan .wz-wpis.zakonczone { border-left-color: var(--wz-zielony) !important; background: #eef7ef; opacity: .75; }
.wz-plan .wz-wpis.ciag { border-left-style: dotted !important; opacity: .8; }
.wz-wpis b { display: block; font-size: 11px; }
.wz-wpis span { font-size: 10px; color: var(--wz-szary); }
.wz-plan-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: end; }
.wz-plan-form label { display: grid; gap: 2px; font-size: 11px; color: var(--wz-szary); font-weight: 600; }
.wz-plan-form input, .wz-plan-form select { height: 30px; padding: 3px 8px; border: 1px solid #b7c6d8; border-radius: 6px; font: inherit; font-size: 12px; background: #fff; color: #222; width: 100%; box-sizing: border-box; }
.wz-dzis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.wz-okno { position: fixed; inset: 0; background: rgba(15, 30, 50, .45); display: none; align-items: center; justify-content: center; z-index: 3000; padding: 16px; }
.wz-okno.otwarte { display: flex; }
.wz-okno-tresc { background: #fff; border-radius: 10px; padding: 16px; width: 100%; max-width: 420px; box-shadow: 0 18px 60px rgba(0,0,0,.25); display: grid; gap: 10px; }
.wz-okno-tresc h3 { margin: 0; font-size: 15px; color: var(--wz-granat); }
.wz-okno-przyciski { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* statystyki */
.wz-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wz-kafel { padding: 10px 12px; border-radius: 8px; background: var(--wz-tlo); border: 1px solid var(--wz-linia); }
.wz-kafel span { display: block; font-size: 11px; color: var(--wz-szary); }
.wz-kafel b { display: block; font-size: 20px; color: var(--wz-granat); margin-top: 2px; }
.wz-kafel small { color: var(--wz-szary); }
.wz-pasek-wykres { display: flex; align-items: center; gap: 6px; }
.wz-pasek-wykres i { display: block; height: 10px; border-radius: 3px; background: var(--wz-niebieski); min-width: 2px; }
.wz-pasek-wykres i.zielony { background: var(--wz-zielony); }

/* zdjęcia z telefonu */
.wz-telefon { max-width: 640px; margin: 0 auto; }
.wz-telefon .wz-duze { display: grid; gap: 10px; }
.wz-telefon .wz-duze label {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 12px;
    background: var(--wz-niebieski); color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; text-align: center;
}
.wz-telefon .wz-duze label.drugi { background: #fff; color: var(--wz-niebieski); border: 2px solid var(--wz-niebieski); }
.wz-telefon .wz-duze input { display: none; }
.wz-postep { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.wz-postep li { padding: 6px 8px; border-radius: 6px; background: var(--wz-tlo); }
.wz-postep li.ok { background: #eef7ef; }
.wz-postep li.blad { background: #fdecec; }
.wz-qr { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wz-qr canvas, .wz-qr img, .wz-qr svg { width: 150px; height: 150px; image-rendering: pixelated; border: 6px solid #fff; box-shadow: 0 0 0 1px var(--wz-linia); }

/* komplet dokumentów - wybór */
.wz-wybor-dok { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; }
.wz-wybor-dok label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 6px; background: var(--wz-tlo); font-size: 13px; cursor: pointer; }
.wz-wybor-dok label:has(input:checked) { background: #eef4fb; outline: 1px solid #c8d9ee; }
.wz-wybor-dok small { display: block; color: var(--wz-szary); font-size: 11px; }

/* ustawienia / konta */
.wz-role { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; background: #eef4fb; color: var(--wz-niebieski); }
.wz-role.admin { background: #fdeceb; color: var(--wz-czerwony); }
.wz-role.warsztat { background: #eef7ef; color: var(--wz-zielony); }
.wz-zablokowane td { opacity: .55; }

@media print {
    .wz-etapy, .wz-dodatki, .gm-szukaj { display: none !important; }
}
.gm-uzytkownik { color: var(--wz-szary); font-weight: normal; margin-left: 2px; }
.wz-historia-auta { margin: 8px 0; } .wz-historia-auta li { background: #fff; border: 1px solid #e1e4e8; } .wz-historia-auta .wz-miniatura { width: 80px; flex-basis: 80px; }

/* atrybut hidden ma pierwszeństwo przed display: grid/flex */
.wz-dodatki [hidden], .wz-strona [hidden], .wz-etapy [hidden] { display: none !important; }
.wz-dodatki form, .wz-strona form { text-align: left; }
.wz-powiadom { margin: 0 !important; width: auto; }
.wz-podglad-maila table { display: table !important; white-space: normal !important; } .wz-podglad-maila td { background: #fff !important; text-align: left !important; }
.wz-etap-form .wz-rodzaj, .wz-etap-form input[type="datetime-local"] { height: 30px; padding: 2px 6px; border: 1px solid #b7c6d8; border-radius: 6px; font: inherit; font-size: 12px; background: #fff; color: #222; width: auto; }
.wz-etapy button.btn-obrys { background: #fff !important; color: var(--wz-niebieski) !important; border: 1px solid var(--wz-niebieski) !important; height: auto; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; }

/* ---------- Pobierz dane z NIP (wykaz podatników VAT MF) ---------- */
.nip-btn { display: inline-flex; align-items: center; gap: 6px; width: auto !important; height: 32px; padding: 0 12px; margin: 4px 0 6px; border: 1px solid #2f6db5; background: #fff; color: #2f6db5; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nip-btn:hover { background: #eef4fb; }
.nip-btn:disabled { opacity: .6; cursor: wait; }
.nip-btn-maly { height: 28px; margin: 0; font-size: 12px; }
.nip-wskazowka { color: #6a737d; font-size: 12px; margin: 0 0 8px; }
.nip-panel { border: 1px solid #c9d8ea; background: #f6f9fd; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; max-width: 640px; }
.nip-panel.nip-blad { border-color: #f1b8b8; background: #fdf3f3; color: #9b1c1c; }
.nip-panel.nip-uwaga { border-color: #f3d19c; background: #fffaf0; }
.nip-panel .nip-naglowek { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.nip-panel .nip-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.nip-panel .nip-status.ok { background: #dcf3e3; color: #1d6b38; }
.nip-panel .nip-status.zle { background: #fde2e2; color: #9b1c1c; }
.nip-panel dl { display: grid; grid-template-columns: 80px 1fr; gap: 3px 10px; margin: 0; }
.nip-panel dt { color: #6a737d; }
.nip-panel dd { margin: 0; }
.nip-panel .nip-rachunki { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.nip-panel .nip-wiecej { color: #6a737d; font-family: inherit; }
.nip-panel .nip-wbazie { margin-top: 8px; padding: 6px 8px; background: #fff7e6; border-radius: 6px; }
.nip-panel .nip-adres-check { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-weight: 600; }
.nip-panel .nip-adres-check input { width: auto; height: auto; margin-top: 2px; }
.nip-panel .nip-rachunek { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed #c9d8ea; }
.nip-panel .nip-rachunek input { width: 260px; max-width: 100%; height: 28px; margin: 0; padding: 2px 8px; border: 1px solid #b7c6d8; border-radius: 6px; font-size: 12px; }
.nip-wynik { font-size: 12px; margin-left: 6px; }
.nip-wynik.ok { color: #1d6b38; font-weight: 600; }
.nip-wynik.zle { color: #9b1c1c; font-weight: 600; }
.nip-adres-wiersz { margin-bottom: 8px; }

/* ---------- Skan dowodu rejestracyjnego (kod Aztec) ---------- */
.dw-karta { max-width: 900px; }
.dw-skaner { display: flex; flex-direction: column; gap: 8px; }
.dw-wiersz { display: flex; gap: 8px; flex-wrap: wrap; }
.dw-btn { display: inline-flex; align-items: center; gap: 6px; width: auto !important; height: 36px; padding: 0 14px; border: 1px solid #2f6db5; background: #fff; color: #2f6db5; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dw-btn:hover { background: #eef4fb; }
.dw-btn.dw-glowny { background: #2f6db5; color: #fff; }
.dw-btn.dw-glowny:hover { background: #255a96; }
.dw-czytnik { width: 100%; max-width: 640px; box-sizing: border-box; border: 1px dashed #9fb4cc; border-radius: 6px; padding: 6px 9px; font: 12px ui-monospace, Consolas, monospace; resize: vertical; background: #fbfdff; }
.dw-stan { font-size: 13px; min-height: 18px; }
.dw-stan.ok { color: #1d6b38; font-weight: 600; }
.dw-stan.blad { color: #9b1c1c; font-weight: 600; }
.dw-wypelnij { margin: 0 0 10px; }
.dw-wypelnij > div { margin-top: 8px; padding: 10px; border: 1px solid #d8e1ec; border-radius: 8px; background: #f8fafc; }
.dw-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 12px; }
.dw-siatka label { display: block; font-size: 12px; font-weight: 600; color: #3a4a5c; }
.dw-siatka .dw-szeroki { grid-column: span 2; }
.dw-siatka input { width: 100%; height: 32px; box-sizing: border-box; border: 1px solid #b7c6d8; border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 13px; font-weight: normal; margin-top: 2px; }
.dw-mono { font-family: ui-monospace, Consolas, monospace !important; }
.dw-adres { margin-top: 10px; }
.dw-dodatkowe { color: #6a737d; font-size: 12px; margin-top: 6px; }
.dw-wybor { margin-top: 10px; padding: 8px 10px; background: #f6f9fd; border: 1px solid #d8e1ec; border-radius: 8px; }
.dw-wybor-tytul { font-size: 12px; color: #3a4a5c; font-weight: 600; margin-bottom: 4px; }
.dw-opcja { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 13px; cursor: pointer; }
.dw-opcja input { width: auto; height: auto; margin-top: 3px; }
.dw-opcja small { color: #6a737d; font-weight: normal; }
.dw-zrodlo { margin-bottom: 8px; }
.dw-check { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; }
.dw-check input { width: auto; height: auto; }
.dw-akcje { margin-top: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 600px) { .dw-siatka .dw-szeroki { grid-column: span 1; } }

/* ---------- Import wpłat z wyciągu bankowego ---------- */
.wi-karta { max-width: 760px; }
.wi-karta.wi-szeroka { max-width: 1200px; }
.wi-kroki { margin: 0 0 12px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.wi-plik { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.wi-plik input[type=file] { width: auto; max-width: 100%; font-size: 13px; }
.wi-tabela-wrap { overflow-x: auto; }
.wi-tabela td { vertical-align: top; }
.wi-tabela .wi-opis { max-width: 420px; }
.wi-tabela .wi-nadawca { font-weight: 600; font-size: 12px; }
.wi-tabela .wi-tytul { font-size: 12px; color: #3a4a5c; overflow-wrap: anywhere; }
.wi-tabela .wi-select { width: 100%; min-width: 260px; max-width: 420px; height: 30px; font-size: 12px; border: 1px solid #b7c6d8; border-radius: 6px; }
.wi-tabela .wi-zapl { width: auto; height: auto; }
.wz-tabela.wi-tabela tr.wi-wybrany td { background: #eef8f1; }
.wz-tabela.wi-tabela tr.wi-juz td { color: #8a949e; background: #f7f7f7; }
.wi-pewnosc { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.wi-pewnosc.wi-pewne { background: #dcf3e3; color: #1d6b38; }
.wi-pewnosc.wi-prawdop { background: #e6effa; color: #1f4f8a; }
.wi-pewnosc.wi-sprawdz { background: #fff3d6; color: #8a5a00; }
.wi-reszta { font-size: 11px; color: #6a737d; margin-top: 2px; }
.wi-reszta.wi-nadplata { color: #b45309; font-weight: 600; }
.wi-info { font-size: 12px; }
.wi-akcje { margin-top: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- Podpisy klienta (tablet) ---------- */
.pk-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 10px; }
.pk-dok { margin: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.pk-dok.pk-podpisany { border-color: #9fd3b0; background: #f6fcf8; }
.pk-naglowek b { display: block; font-size: 14px; color: #1f3b57; }
.pk-rola { font-size: 12px; color: #6a737d; }
.pk-podglad { height: 64px; display: flex; align-items: center; justify-content: center; border: 1px dashed #d8e1ec; border-radius: 6px; background: #fff; }
.pk-podglad img { max-height: 58px; max-width: 100%; }
.pk-status { font-size: 12px; color: #3a4a5c; }
.pk-podpisany .pk-status { color: #1d6b38; font-weight: 600; }
.pk-akcje { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.pk-akcje button { height: 32px; padding: 0 12px; font-size: 13px; }
body.pk-otwarte { overflow: hidden; }
.pk-nakladka { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 25, 40, .55); display: flex; align-items: center; justify-content: center; padding: 12px; }
.pk-nakladka[hidden] { display: none !important; }
.pk-okno { background: #fff; border-radius: 12px; width: min(980px, 100%); max-height: 100%; overflow: auto; padding: 14px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 10px; }
.pk-okno-gora { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pk-okno-gora b { font-size: 17px; color: #1f3b57; }
.pk-zamknij { width: 40px !important; height: 40px; padding: 0; font-size: 18px; background: #f1f4f8 !important; color: #333 !important; border: 0 !important; border-radius: 8px; }
.pk-kto { font-size: 12px; font-weight: 600; color: #3a4a5c; }
.pk-kto input { display: block; width: 100%; max-width: 420px; height: 38px; margin-top: 3px; border: 1px solid #b7c6d8; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 15px; box-sizing: border-box; }
.pk-pole { position: relative; height: min(46vh, 340px); border: 2px solid #9fb4cc; border-radius: 10px; background: #fff; touch-action: none; }
.pk-pole canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.pk-linia { position: absolute; left: 6%; right: 6%; bottom: 22%; border-top: 1px solid #c9d3df; font-size: 11px; color: #9aa6b2; padding-top: 3px; pointer-events: none; }
.pk-zgoda { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.pk-zgoda input { width: 20px; height: 20px; }
.pk-stan { font-size: 13px; min-height: 18px; }
.pk-stan.blad { color: #9b1c1c; font-weight: 600; }
.pk-okno-dol { display: flex; justify-content: space-between; gap: 10px; }
.pk-okno-dol button { height: 44px; padding: 0 20px; font-size: 15px; }

/* ---------- Status pojazdu (jezdny / niejezdny / gotówkowa) ---------- */
.wz-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; width: auto; }
.wz-status-etykieta { font-size: 12px; font-weight: 700; color: #3a4a5c; margin-right: 2px; }
#etapy .wz-status button { height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid #c9d3df; background: #fff; color: #3a4a5c; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; width: auto; }
#etapy .wz-status button:hover:not(:disabled) { border-color: #2f6db5; color: #2f6db5; }
#etapy .wz-status button.aktywny { color: #fff; border-color: transparent; }
#etapy .wz-status button.wz-status-jezdny.aktywny { background: #1d7a46; }
#etapy .wz-status button.wz-status-niejezdny.aktywny { background: #b45309; }
#etapy .wz-status button.wz-status-gotowkowa.aktywny { background: #2f6db5; }
#etapy .wz-status button:disabled { cursor: default; opacity: .85; }
.wz-status .wz-wskazowka { margin-left: 4px; }

/* ---------- Do zrobienia: samochody w naprawie (z planu warsztatu) ---------- */
.wn-karta h2 { display: flex; align-items: center; gap: 8px; }
.wn-ile { min-width: 22px; text-align: center; padding: 1px 8px; border-radius: 10px; background: #2f6db5; color: #fff; font-size: 12px; }
.wn-lista { display: flex; flex-direction: column; gap: 6px; }
.wn-wiersz { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 6px 14px; align-items: center; padding: 8px 10px; border: 1px solid #e1e4e8; border-radius: 8px; background: #fff; }
.wn-auto { display: flex; flex-direction: column; gap: 1px; font-size: 13px; min-width: 0; }
.wn-auto small { color: #6a737d; font-size: 11px; }
.wn-znaczki { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.wn-status, .wn-stanowisko { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.wn-status-jezdny { background: #dcf3e3; color: #1d6b38; }
.wn-status-niejezdny { background: #fdebd3; color: #8a4b06; }
.wn-status-gotowkowa { background: #e6effa; color: #1f4f8a; }
.wn-stanowisko { background: #f1f4f8; color: #3a4a5c; }
.wn-etapy { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.wn-etapy li { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; white-space: nowrap; border: 1px solid transparent; }
.wn-etapy li.ok { background: #dcf3e3; color: #1d6b38; border-color: #b6e2c4; }
.wn-etapy li.brak { background: #fde2e2; color: #9b1c1c; border-color: #f4bcbc; }
.wn-etapy li.nastepny { box-shadow: 0 0 0 2px #9b1c1c; }
@media (max-width: 760px) { .wn-wiersz { grid-template-columns: 1fr; } }
.wn-karta h2 .h2-prawa { margin-left: auto; }

/* etap zaplanowany (rozpoczęcie naprawy / oględziny z datą przyszłą) - żółty */
.wz-pasek li.zaplanowane .wz-kropka { background: #fff4c2 !important; border-color: #d4a106 !important; }
.wz-pasek li.zaplanowane .wz-data { color: #8a6500; font-weight: 600; }
.wz-podpowiedz.wz-zaplanowana { color: #8a6500; }
.wn-etapy li.plan { background: #fff4c2; color: #7a5a00; border-color: #ecd27a; }
.wz-zaplanowana { color: #8a6500; }

/* ---------- Skan dowodu: kamera na żywo ---------- */
body.dw-kamera-otwarta { overflow: hidden; }
.dw-kamera { position: fixed; inset: 0; z-index: 2000; background: #000; display: flex; align-items: center; justify-content: center; }
.dw-kamera video { width: 100%; height: 100%; object-fit: cover; }
.dw-kamera .dw-ramka { position: absolute; width: min(72vw, 72vh); height: min(72vw, 72vh); border: 3px solid #fff; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; }
.dw-kamera .dw-kamera-napis { position: absolute; top: 16px; left: 16px; right: 16px; text-align: center; color: #fff; font-size: 15px; font-weight: 600; text-shadow: 0 1px 3px #000; }
.dw-kamera .dw-kamera-dol { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; }
.dw-kamera .dw-btn { height: 46px; padding: 0 22px; font-size: 16px; background: rgba(255,255,255,.92); }
.wz-strona button.dw-btn:not(.dw-glowny), .dw-kamera button.dw-btn { background: #fff; color: #2f6db5; border: 1px solid #2f6db5; }
.dw-kamera [hidden], .dw-skaner [hidden], .dw-wypelnij [hidden] { display: none !important; }
.dw-diag { font-size: 11px; color: #6a737d; }
.dw-diag summary { cursor: pointer; }
.dw-diag pre { white-space: pre-wrap; word-break: break-word; background: #f6f8fa; border-radius: 6px; padding: 6px 8px; margin: 4px 0 0; font-size: 11px; }

/* ---------- Wiadomość do ubezpieczalni z załącznikami ---------- */
#mailModal .modal-content { width: 760px; max-width: 96vw; max-height: 92vh; overflow: auto; box-sizing: border-box; }
#mailModal .info_sekcja, #mailModal .wiersz, #mailModal .dane { display: block; width: 100%; }
.mu-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 0; text-align: left; }
.mu-form > label { font-size: 12px; font-weight: 600; color: #3a4a5c; margin-top: 4px; }
.mu-form select, .mu-form textarea, .mu-form .mu-wiersz input { width: 100%; box-sizing: border-box; border: 1px solid #b7c6d8; border-radius: 6px; padding: 6px 9px; font: inherit; font-size: 13px; }
.mu-form select, .mu-form .mu-wiersz input { height: 34px; }
.mu-wiersz { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; }
.mu-wiersz label { font-size: 12px; font-weight: 600; color: #3a4a5c; }
.mu-uwaga { margin: 0; font-size: 12px; color: #b45309; }
.mu-podglad { padding: 8px 10px; background: #f6f8fa; border: 1px solid #e1e4e8; border-radius: 6px; font-size: 12px; white-space: pre-wrap; color: #222; }
.mu-zal { border: 1px solid #d8e1ec; border-radius: 8px; padding: 8px 10px; margin-top: 6px; background: #fbfcfe; }
.mu-zal-naglowek { display: flex; justify-content: space-between; align-items: center; margin: 4px 0; font-size: 13px; }
.mu-wszystkie { width: auto !important; height: auto !important; padding: 2px 8px !important; font-size: 11px !important; background: #fff !important; color: #2f6db5 !important; border: 1px solid #2f6db5 !important; border-radius: 999px !important; cursor: pointer; }
.mu-pusto { margin: 0 0 6px; font-size: 12px; color: #6a737d; }
.mu-pliki { list-style: none; margin: 0 0 8px; padding: 0; max-height: 170px; overflow: auto; }
.mu-pliki li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid #eef2f6; font-size: 12px; }
.mu-pliki label { display: flex; gap: 6px; align-items: center; min-width: 0; cursor: pointer; }
.mu-pliki input, .mu-zdjecie input, .mu-opcja input { width: auto !important; height: auto !important; margin: 0; }
.mu-pliki .mu-nazwa { overflow-wrap: anywhere; }
.mu-pliki small { color: #6a737d; white-space: nowrap; }
.mu-pliki a { font-size: 11px; white-space: nowrap; }
.mu-zdjecia { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; margin-bottom: 6px; }
.mu-zdjecie { position: relative; display: block; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: #eef2f6; }
.mu-zdjecie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-zdjecie input { position: absolute; top: 4px; left: 4px; transform: scale(1.3); }
.mu-zdjecie:has(input:checked) { border-color: #2f6db5; box-shadow: 0 0 0 2px #cfe0f5; }
.mu-opcja { display: flex; gap: 6px; align-items: center; font-size: 12px; font-weight: normal !important; color: #3a4a5c; }
.mu-suma { font-size: 12px; font-weight: 600; color: #1f3b57; margin-top: 4px; }
.mu-suma.mu-za-duzo { color: #9b1c1c; }
.mu-akcje { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mu-akcje button { width: auto; }
.mu-akcje .mu-drugi { background: #fff !important; color: #2f6db5 !important; border: 1px solid #2f6db5 !important; }
#mailModal .info_sekcja, #mailModal .wiersz, #mailModal .dane { border: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; min-width: 0; max-width: 100%; }
#mailModal .mu-form input[type=text], #mailModal .mu-form input[type=email], #mailModal .mu-form select, #mailModal .mu-form textarea { background: #fff !important; color: #222 !important; border: 1px solid #b7c6d8 !important; border-radius: 6px !important; box-shadow: none !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; }
#mailModal .mu-form input:focus, #mailModal .mu-form select:focus, #mailModal .mu-form textarea:focus { outline: 2px solid #9cc0ea; border-color: #2f6db5 !important; }
#mailModal .mu-wiersz { grid-template-columns: 60px minmax(0, 1fr); }
#mailModal .mu-zal { max-width: 100%; box-sizing: border-box; }
#mailModal .mu-edytuj { font-weight: normal; font-size: 11px; margin-left: 6px; color: #2f6db5; }

/* ---------- edycja dat i rozliczeń prosto z karty ---------- */
.info_naprawa_wrapper .wz-ed, .wz-ed { font: inherit; font-size: 13px; color: #1f3b57; background: #fff; border: 1px solid #c9d8ea; border-radius: 6px; padding: 3px 6px; height: 28px; box-sizing: border-box; width: auto; max-width: 100%; transition: border-color .2s, background-color .4s; }
.wz-ed.wz-data { width: 145px; }
input[type=datetime-local].wz-ed { width: 190px; }
.wz-ed.wz-kwota, .wz-wplata .wz-kwota { width: 110px; text-align: right; font: inherit; font-size: 13px; border: 1px solid #c9d8ea; border-radius: 6px; padding: 3px 6px; height: 28px; box-sizing: border-box; }
.wz-ed:hover { border-color: #8fb0d6; }
.wz-ed:focus { outline: 2px solid #cfe0f5; border-color: #2f6db5; }
.wz-ed.wz-zapis { background: #fffbea; }
.wz-ed.wz-ok { background: #e6f6ea; border-color: #3aa35b; }
.wz-ed.wz-blad { background: #fdecec; border-color: #c53030; }
.wz-ed[type=checkbox] { width: 18px; height: 18px; padding: 0; vertical-align: middle; accent-color: #2f6db5; }
.wz-tak { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: normal; }
.info_naprawa_wrapper .wz-ed-dzis, .info_naprawa_wrapper .wz-ed-x, .wz-ed-dzis, .wz-ed-x { width: auto !important; height: 24px !important; min-height: 0 !important; padding: 0 7px !important; margin: 0 0 0 4px !important; font-size: 11px !important; line-height: 22px !important; border-radius: 999px !important; background: #fff !important; color: #2f6db5 !important; border: 1px solid #c9d8ea !important; box-shadow: none !important; cursor: pointer; vertical-align: middle; }
.wz-ed-x { color: #9b1c1c !important; }
.wz-ed-dzis[hidden], .wz-ed-x[hidden], #wzZostaloWiersz[hidden], #wzRoznicaWiersz[hidden] { display: none !important; }
.wz-ed-uwaga { color: #6a737d; }
.info_naprawa_wrapper .wz-wplata button, .wz-wplata button { width: auto !important; height: 28px !important; padding: 0 12px !important; }
.wz-kwoty b .wz-ed { font-weight: 600; }
.wz-dymek { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #1f3b57; color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 10000; max-width: 90vw; }
.wz-dymek.widoczny { opacity: 1; transform: translate(-50%, 0); }
.wz-dymek.blad { background: #9b1c1c; }