*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:16px;height:100%;overflow:hidden;position:fixed;width:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#f5f5f5;color:#1a1a1a;height:100%;overscroll-behavior:none;
  overflow:hidden;position:fixed;width:100%}


#appMain{display:flex;flex-direction:column;height:100%;overflow:hidden}
#screensScroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
/* NAV */
.nav{background:#fff;border-bottom:1px solid #e0e0e0;padding:0 16px;
  height:56px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.nav-logo{display:flex;align-items:center;gap:8px}
.nav-badge{background:#8DC63F;color:#fff;font-size:12px;font-weight:700;
  padding:3px 8px;border-radius:4px;letter-spacing:.5px}
.nav-title{font-size:15px;font-weight:600;color:#1a1a1a}
.nav-sync{width:32px;height:32px;border:none;background:none;
  cursor:pointer;color:#666;font-size:18px;display:flex;align-items:center;justify-content:center}
.nav-sync.syncing{animation:spin 1s linear infinite;color:#8DC63F}
@keyframes spin{to{transform:rotate(360deg)}}

/* SCREENS */
.screen{display:none;padding:16px;padding-bottom:24px}
.screen.active{display:block}

/* BOTTOM TAB BAR */
.tabbar{flex-shrink:0;height:60px;background:#fff;
  border-top:1px solid #e0e0e0;display:flex;z-index:100;
  box-shadow:0 -1px 3px rgba(0,0,0,.06)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;border:none;background:none;
  color:#999;font-size:10px;font-weight:500;cursor:pointer;padding:4px}
.tab.active{color:#8DC63F}
.tab i{font-size:22px}

/* CARDS */
.card{background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.08)}
.card-title{font-size:13px;font-weight:600;color:#666;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}

/* FIELDS */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:#666;margin-bottom:5px;font-weight:500}
.field input,.field select{width:100%;height:44px;border:1.5px solid #e0e0e0;
  border-radius:8px;padding:0 12px;font-size:16px;background:#fff;
  -webkit-appearance:none;appearance:none;color:#1a1a1a}
.field input:focus,.field select:focus{outline:none;border-color:#8DC63F}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* BUTTONS */
.btn{width:100%;height:48px;border:none;border-radius:10px;
  font-size:16px;font-weight:600;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:8px;transition:opacity .15s}
.btn:active{opacity:.8}
.btn-primary{background:#8DC63F;color:#fff}
.btn-secondary{background:#f0f0f0;color:#333}
.btn-danger{background:#fee2e2;color:#dc2626}
.btn-sm{height:36px;font-size:14px;border-radius:8px;padding:0 14px;width:auto}

/* DAY CARDS */
.day-card{background:#fff;border-radius:12px;margin-bottom:10px;
  overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.day-header{padding:14px 16px;display:flex;align-items:center;
  justify-content:space-between;cursor:pointer}
.day-name{font-size:16px;font-weight:600}
.day-nl{font-size:12px;color:#999;font-weight:400}
.day-status{font-size:12px;color:#999;display:flex;align-items:center;gap:6px}
.day-status.ok{color:#8DC63F}
.day-status.warn{color:#f59e0b}
.day-body{padding:0 16px 16px;border-top:1px solid #f0f0f0}

/* PRACE */
.praca-card{background:#f8f8f8;border-radius:8px;padding:12px;
  margin-bottom:8px;position:relative}
.praca-del{position:absolute;top:8px;right:8px;width:28px;height:28px;
  border:none;background:#fee2e2;border-radius:6px;color:#dc2626;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.hours-bar{display:flex;align-items:center;gap:8px;padding:10px 0 4px;
  border-top:1px solid #f0f0f0;margin-top:8px}
.hours-label{font-size:12px;color:#666}
.hours-val{font-size:13px;font-weight:700}
.hours-val.ok{color:#8DC63F}
.hours-val.over{color:#dc2626}

/* WEEKSTAAT LIST */
.ws-item{background:#fff;border-radius:10px;padding:14px 16px;
  margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.ws-info{flex:1}
.ws-klient{font-size:15px;font-weight:600}
.ws-meta{font-size:12px;color:#999;margin-top:2px}
.ws-badge{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
.ws-badge.otwarty{background:#fef9c3;color:#854d0e}
.ws-badge.zamkniety{background:#dcfce7;color:#166534}

/* PODPIS */
.signature-wrap{border:2px dashed #e0e0e0;border-radius:10px;
  background:#fafafa;margin-bottom:12px;position:relative}
#signatureCanvas{display:block;width:100%;touch-action:none}
.sig-clear{position:absolute;top:8px;right:8px;border:none;
  background:#f0f0f0;border-radius:6px;padding:4px 10px;
  font-size:12px;color:#666;cursor:pointer}
.sig-hint{text-align:center;font-size:12px;color:#bbb;padding:8px 0 4px}

/* STATUS TOAST */
.toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);
  background:#333;color:#fff;padding:10px 20px;border-radius:20px;
  font-size:13px;z-index:999;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}

/* TYDZIEN INDICATOR */
.week-chip{display:inline-flex;align-items:center;gap:6px;
  background:#e8f5d8;color:#4a7c1f;padding:4px 12px;
  border-radius:20px;font-size:13px;font-weight:600;margin-bottom:16px}

/* EMPTY STATE */
.empty{text-align:center;padding:48px 16px;color:#999}
.empty i{font-size:48px;display:block;margin-bottom:12px;opacity:.3}
.empty p{font-size:14px}

/* SETUP SCREEN */
.setup-wrap{min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;background:#fff}
.setup-logo{margin-bottom:32px;text-align:center}
.setup-logo .logo-badge{background:#8DC63F;color:#fff;font-size:24px;
  font-weight:800;padding:8px 20px;border-radius:8px;display:inline-block}
.setup-logo p{font-size:14px;color:#999;margin-top:8px}
.setup-wrap h2{font-size:22px;font-weight:700;margin-bottom:8px;text-align:center}
.setup-wrap p{font-size:14px;color:#666;text-align:center;margin-bottom:24px}
.setup-wrap .field{width:100%;max-width:360px}
.setup-wrap .btn{max-width:360px}

/* ONLINE INDICATOR */
.online-dot{width:8px;height:8px;border-radius:50%;
  background:#dc2626;display:inline-block;margin-right:4px}
.online-dot.online{background:#8DC63F}

/* PODGLĄD LISTY (modal) */
#modalPodglad{touch-action:pan-x pan-y pinch-zoom}
.pg-modal-box{background:#fff;border-radius:16px;padding:12px;
  max-width:500px;margin:0 auto;width:100%;max-height:90vh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;
  touch-action:pan-x pan-y pinch-zoom}
.pg-close{position:absolute;top:8px;right:8px;width:30px;height:30px;
  border:none;background:rgba(255,255,255,.9);border-radius:50%;font-size:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  color:#666;cursor:pointer;z-index:50}

.pg-lang-toggle{position:absolute;top:8px;left:8px;height:30px;padding:0 12px;
  border:none;background:rgba(255,255,255,.9);border-radius:15px;font-size:13px;font-weight:700;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  color:#333;cursor:pointer;z-index:50}

.pg-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:2px solid #8DC63F}
.pg-logo{background:#8DC63F;color:#fff;font-weight:800;font-size:14px;
  padding:6px 12px;border-radius:6px;letter-spacing:.5px;flex-shrink:0}
.pg-titles{flex:1}
.pg-title{font-size:14px;font-weight:700;color:#1a1a1a}
.pg-sub{font-size:12px;color:#666;margin-top:2px}

.pg-table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.pg-table th{background:#f0f0f0;padding:6px 4px;text-align:left;
  font-size:10px;text-transform:uppercase;color:#666;font-weight:600;
  border-bottom:1px solid #ddd}
.pg-table td{padding:6px 4px;vertical-align:top;border-bottom:1px solid #f0f0f0;
  word-wrap:break-word;overflow-wrap:break-word}
.pg-day{font-weight:600;width:22%}
.pg-day small{font-weight:400;color:#999;font-size:9px;display:block}
.pg-czas{width:23%;color:#444;font-size:11px}
.pg-suma{font-weight:700;color:#8DC63F;width:13%;font-size:11px}
.pg-opis{color:#333;width:42%}
.pg-opis-line{padding:2px 0;font-size:11px;line-height:1.3}
.pg-brak{color:#bbb;font-style:italic;font-size:11px}
.podglad-empty td{color:#ccc;font-style:italic}
.pg-brak-dnia{color:#ccc;font-style:italic;text-align:center}

.pg-table tfoot td{border-top:2px solid #8DC63F;border-bottom:none;
  padding-top:10px;font-size:13px}
.pg-total-label{font-weight:700;text-align:right}
.pg-total-val{font-weight:800;color:#8DC63F;font-size:15px}

.pg-status{margin-top:14px;text-align:center}
.pg-badge-open{display:inline-block;background:#FEF9C3;color:#854D0E;
  font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px}
.pg-badge-closed{display:inline-block;background:#dcfce7;color:#166534;
  font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px}


/* KLIENT SELECTOR (chipy klientów aktywnych w tym tygodniu) */
.klient-selector{margin-bottom:12px}
.klient-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.klient-chip{background:#fff;border:1.5px solid #e0e0e0;border-radius:20px;
  padding:8px 16px;font-size:13px;font-weight:600;color:#666;cursor:pointer;
  transition:all .15s;white-space:nowrap}
.klient-chip.active{background:#8DC63F;border-color:#8DC63F;color:#fff}
.klient-chip.chip-closed{opacity:.7}
.klient-chip-add{background:#f8f8f8;border-style:dashed;color:#999}
.klient-chip-add:active{background:#f0f0f0}

/* STATUS BADGES */
.status-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.status-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
  display:inline-flex;align-items:center;gap:3px}
.badge-open{background:#FEF9C3;color:#854D0E}
.badge-closed{background:#E0E7FF;color:#3730A3}
.badge-signed{background:#dcfce7;color:#166534}
.badge-unsigned{background:#FEE2E2;color:#991B1B}

/* przycisk trzeciorzędny - "Odłóż" */
.btn-tertiary{background:#fff;color:#666;border:1.5px solid #e0e0e0}
.btn-tertiary:active{background:#f8f8f8}

/* WS BADGES w historii - rozszerzone o podpis */
.ws-badge.podpisana{background:#dcfce7;color:#166534}
.ws-badge.niepodpisana{background:#FEE2E2;color:#991B1B}

/* KLIENT GROUP w widoku Tydzień */
.klient-week-group{background:#fff;border-radius:12px;padding:14px;
  margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.klient-week-header{display:flex;align-items:center;gap:6px;margin-bottom:10px;
  flex-wrap:wrap}
.klient-week-name{font-size:15px;font-weight:700;color:#1a1a1a}

/* WALIDACJA — niekompletne prace */
.praca-card.praca-incomplete{border:1.5px solid #fca5a5;background:#fef2f2}
.praca-warning{background:#fee2e2;color:#991b1b;font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:6px;margin-bottom:10px}
.required-star{color:#dc2626;font-weight:700}
.field select.field-empty,.field input.field-empty{border-color:#fca5a5;background:#fef2f2}

/* MODAL BŁĘDU WALIDACJI (przy próbie zamknięcia) */
.pg-validation-error{text-align:center;padding:8px 4px}
.pg-validation-icon{font-size:40px;margin-bottom:8px}
.pg-validation-title{font-size:17px;font-weight:700;color:#991b1b;margin-bottom:6px}
.pg-validation-sub{font-size:13px;color:#666;margin-bottom:10px}
.pg-validation-list{text-align:left;background:#fef2f2;border-radius:10px;
  padding:14px 14px 14px 32px;margin:0 0 4px 0}
.pg-validation-list li{font-size:13px;color:#991b1b;margin-bottom:6px;line-height:1.4}
.pg-validation-list li:last-child{margin-bottom:0}

/* RESPONSYWNOŚĆ MODALA NA MAŁYCH EKRANACH */
@media (max-width: 360px) {
  .pg-modal-box{padding:14px 12px;max-height:92vh}
  .pg-table{font-size:11px}
  .pg-title{font-size:13px}
  .pg-sub{font-size:11px}
}

/* Wyraźne oddzielenie przycisków akcji od treści, zawsze widoczne na dole modala */
.pg-confirm-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px;
  padding-top:14px;border-top:1px dashed #e0e0e0}

/* DOJAZD — toggle buttons (Tak/Nie, Prywatny/Służbowy) */
.dojazd-card{border-left:3px solid #8DC63F}
.toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toggle-btn{height:44px;border:1.5px solid #e0e0e0;border-radius:8px;
  background:#fff;color:#666;font-size:15px;font-weight:600;cursor:pointer;
  transition:all .15s}
.toggle-btn.active{background:#8DC63F;border-color:#8DC63F;color:#fff}
.toggle-btn:active{opacity:.85}
.dojazd-km-result{background:#E8F5D8;color:#4a7c1f;font-size:13px;font-weight:700;
  padding:8px 12px;border-radius:8px;margin-top:4px;text-align:center}

/* DOJAZD — sekcja czasu przejazdu */
.dojazd-czas-section{border-top:1px dashed #e0e0e0;padding-top:12px;margin-top:4px}
.dojazd-czas-title{font-size:13px;font-weight:600;color:#666;margin-bottom:10px}
.dojazd-czas-result{background:#E8F5D8;border-radius:8px;padding:10px 12px;
  margin-top:8px;font-size:13px;color:#3a5c17}
.dojazd-czas-result > div{padding:2px 0}
.dojazd-czas-total{font-weight:700;border-top:1px solid #c5e0a5;
  margin-top:6px;padding-top:6px}
.dojazd-czas-hint{font-size:11px;color:#7a9a52;font-style:italic;margin-top:4px}
.pg-dojazd-line{color:#4a7c1f;font-style:italic}

.pg-dojazd-summary{background:#E8F5D8;border-radius:8px;padding:8px 12px;
  margin:8px 0;font-size:13px;color:#3a5c17;text-align:center}

/* WIELODNIOWY WIDOK — karty dni zwijane/rozwijane */
.dzien-card-collapsed, .dzien-card-expanded{background:#fff;border-radius:12px;
  margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);overflow:hidden}
.dzien-card-expanded{border:1.5px solid #8DC63F}
.dzien-header{padding:14px 16px;display:flex;align-items:center;
  justify-content:space-between;cursor:pointer}
.dzien-nazwa{font-size:15px;font-weight:600;color:#1a1a1a}
.dzien-nazwa small{font-weight:400;color:#999;font-size:12px}
.dzien-header-right{display:flex;align-items:center;gap:10px}
.dzien-status-skrot{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px}
.dzien-status-skrot.ok{background:#E8F5D8;color:#4a7c1f}
.dzien-status-skrot.pusty{background:#f0f0f0;color:#999}
.dzien-chevron{font-size:14px;color:#999;width:16px;text-align:center}
.dzien-body{padding:0 16px 16px;border-top:1px solid #f0f0f0}

/* ════════════════════════════════════════════════════════
   PODGLĄD W STYLU PDF — wiernie odwzorowuje papierowy weekstaat
   Kolumny: Naam opdrachtgever | relatie nr. | aantal uren | reis uren | aantal km | opis
   ════════════════════════════════════════════════════════ */
.pdfw-page{background:#fff;border:1px solid #999;border-radius:2px;
  font-family:Arial,Helvetica,sans-serif;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);touch-action:pan-x pan-y pinch-zoom}

.pdfw-topbar{background:#fff;padding:8px 38px 6px 10px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid #8DC63F}
.pdfw-logo-img{height:32px;width:auto;display:block}
.pdfw-weekstaat-title{font-size:13px;font-weight:800;letter-spacing:.5px;color:#1a1a1a}

.pdfw-infobar{padding:5px 10px;font-size:11px;color:#222;
  display:flex;align-items:baseline;gap:16px;border-bottom:1px solid #1a1a1a;
  flex-wrap:wrap}
.pdfw-info-klient{font-size:13px;font-weight:700;text-decoration:underline;
  text-underline-offset:2px}

.pdfw-table{width:100%;border-collapse:collapse;font-size:9px;table-layout:fixed}
.pdfw-thead-row th{background:#fff;color:#222;text-align:left;
  font-weight:700;padding:3px 4px;font-size:7.5px;line-height:1.2;
  border:1px solid #1a1a1a;vertical-align:bottom}
.pdfw-th-klient{width:19%}
.pdfw-th-relatie{width:11%}
.pdfw-th-uren{width:10%}
.pdfw-th-reis{width:10%}
.pdfw-th-km{width:9%}
.pdfw-th-opis{width:41%}

.pdfw-row td{padding:3px 4px;vertical-align:top;
  border-left:1px solid #1a1a1a;border-right:1px solid #1a1a1a;
  word-wrap:break-word;overflow-wrap:break-word;font-size:9px}
.pdfw-row td{border-top:1px solid #1a1a1a}
.pdfw-row-nowy-dzien td{border-top:2px solid #1a1a1a}
.pdfw-day-label{font-weight:700;font-size:9px}
.pdfw-td-czas-cell{font-weight:600;color:#2a5c8a;font-size:9px;margin-top:1px}
.pdfw-td-uren,.pdfw-td-reis,.pdfw-td-km{text-align:center;font-weight:600}
.pdfw-td-opis{font-size:8.5px;color:#222;line-height:1.4}
.pdfw-opis-line{padding:0.5px 0}

.pdfw-klient-row td{border:1px solid #1a1a1a;border-top:none;
  padding:3px 4px;background:#fafafa}
.pdfw-klient-name-cell{font-weight:700;font-size:10px;color:#1a1a1a}

.pdfw-totalen-tr td{border:1px solid #1a1a1a;border-top:2px solid #1a1a1a;
  padding:5px 4px;font-size:9px;font-weight:700;background:#f2f2f2}
.pdfw-totalen-label{text-align:left}
.pdfw-totalen-val-cell{text-align:center}
.pdfw-totalen-auto-cell{font-size:8px;font-weight:600;color:#444}

.pdfw-uwagi-row{display:flex;border-left:1px solid #1a1a1a;border-right:1px solid #1a1a1a;
  border-bottom:1px solid #1a1a1a;font-size:8.5px}
.pdfw-uwagi-label{flex:1;padding:5px 8px;border-right:1px solid #1a1a1a;color:#333}
.pdfw-uwagi-sig-label{flex:1.4;padding:5px 8px;color:#333}

.pdfw-signature-area{min-height:46px;border-left:1px solid #1a1a1a;
  border-right:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a;
  padding:4px 10px;display:flex;align-items:center;justify-content:flex-end}
.pdfw-signature-img{max-width:260px;max-height:90px}
.pdfw-signature-empty{width:100%;height:38px}

.pdfw-row-razem td{background:#f0f7e8;font-style:italic}
.pdfw-row-razem .pdfw-td-opis{color:#3a5c17}

/* ── AUTOCOMPLETE KODY PRACY ── */
.ac-dropdown { border-radius: 8px; }
.ac-item:hover { background: #f0faf4; }
.ac-item:last-child { border-bottom: none !important; }
.autocomplete-wrap input { width: 100%; }
/* ── ZOOM KONTROLA ── */
/* Blokuj zoom na UI, zezwol tylko na weekstaat */
body { touch-action: pan-x pan-y; }
input, button, select, textarea { touch-action: manipulation; }
/* Kontener weekstaatu - pozwol na pinch-zoom i scroll */
#podgladPodpisuNL { touch-action: pan-x pan-y pinch-zoom; }