/* KaizenSystem – szata graficzna: ciepłe, przyjazne kolory */
:root{
  --tlo:#FBF6EE; --karta:#FFFDF9; --linia:#EADFCF; --linia2:#F5ECDD;
  --tekst:#3E2F26; --tekst2:#7A6657;
  --glowny:#C8693F; --glowny-ciemny:#A9532E;
  --akcent:#E0A042; --akcent-jasny:#FBEBCB;
  --zielen:#6B8F5E; --zielen-jasna:#E4EDDC;
  --czerwien:#C0503A; --czerwien-jasna:#F7DED8;
  --cien:0 2px 10px rgba(110,70,40,.08); --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tekst);font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.45}
a{color:var(--glowny-ciemny)}
code{background:var(--linia2);padding:1px 5px;border-radius:5px;font-size:13px}
h1,h2,h3{line-height:1.2;margin:0 0 10px}
h1{font-size:24px} h2{font-size:20px} h3{font-size:16px}
.pod,.maly{color:var(--tekst2);font-weight:400}
.maly{font-size:13px}

/* Nagłówek */
header.top{background:var(--karta);border-bottom:1px solid var(--linia);padding:10px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{font-weight:800;font-size:20px;color:var(--glowny);text-decoration:none}
.logo span{color:var(--akcent)}
.menu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.menu a{padding:7px 12px;border-radius:999px;text-decoration:none;color:var(--tekst2);font-weight:700}
.menu a:hover{background:var(--linia2)}
.menu a.on{background:var(--glowny);color:#fff}
.kto{display:flex;gap:10px;align-items:center;font-size:14px}
.kto a{color:var(--tekst);font-weight:700;text-decoration:none}
main{padding:20px;max-width:1200px;margin:0 auto}
main.waski{max-width:560px}
.stopka{text-align:center;color:var(--tekst2);font-size:12px;padding:24px}

/* Karty, układ */
.karta{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);box-shadow:var(--cien);padding:18px;margin-bottom:16px}
.karta.akcent{border-color:var(--akcent);background:#FFF8EA}
.siatka{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;align-items:start}
.dwa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.trzy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:860px){.siatka,.trzy{grid-template-columns:minmax(0,1fr)}}
@media(max-width:520px){.dwa{grid-template-columns:minmax(0,1fr)}}
.wiersz{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.odstep{margin-top:14px}
.prawo{margin-left:auto}

/* Formularze */
label{display:block;font-weight:700;font-size:13px;margin:12px 0 5px}
input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=search],input:not([type]),textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--linia);border-radius:10px;font:inherit;background:#fff;color:var(--tekst)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--akcent);outline-offset:0;border-color:var(--akcent)}
textarea{min-height:76px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--glowny)}
label.check{display:flex;gap:8px;align-items:center;font-weight:600}
.inline{display:inline}
.btn,button.btn{display:inline-block;border:0;border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer;background:var(--glowny);color:#fff;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--glowny-ciemny)}
.btn.drugi{background:var(--akcent-jasny);color:var(--tekst)}
.btn.drugi:hover{background:#F6DDA8}
.btn.zielony{background:var(--zielen)} .btn.zielony:hover{background:#587A4C}
.btn.czerwony{background:var(--czerwien)} .btn.czerwony:hover{background:#A33F2B}
.btn.maly{padding:6px 10px;font-size:13px}
.btn.blok{display:block;width:100%;text-align:center}
button.link{background:none;border:0;color:var(--glowny-ciemny);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.wymagane::after{content:" *";color:var(--czerwien)}

/* Kafelki wyboru (kategorie) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1px solid var(--linia);background:#fff;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700;cursor:pointer;user-select:none}
.chip input:checked + span{background:var(--akcent-jasny);border-color:var(--akcent)}
.chip input:focus-visible + span{outline:2px solid var(--glowny)}

/* Komunikaty */
.komunikat{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-weight:600;background:var(--zielen-jasna);border:1px solid #CADBBE}
.komunikat.blad{background:var(--czerwien-jasna);border-color:#EBC0B6}
.komunikat.info{background:var(--akcent-jasny);border-color:#F0D69E}

/* Etykiety statusu */
.etykieta{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.znaczek{display:inline-block;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--czerwien);color:#fff;font-size:12px;font-weight:800;text-align:center}

/* Tabele */
.tabela-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--cien)}
table.tab{width:100%;border-collapse:collapse;background:var(--karta)}
.tab th,.tab td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linia);font-size:14px;vertical-align:middle}
.tab th{background:var(--linia2);font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--tekst2)}
.tab tr:last-child td{border-bottom:0}
.tab tr.klik{cursor:pointer} .tab tr.klik:hover td{background:#FFF7EC}
.tab td.num{text-align:right;white-space:nowrap}
.dni{font-weight:800;white-space:nowrap}
.dni.ok{color:var(--zielen)} .dni.uwaga{color:#C98A1E} .dni.zle{color:var(--czerwien)}
.filtry{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;align-items:end}
.filtry select,.filtry input{width:auto;min-width:150px}
.pusto{padding:30px;text-align:center;color:var(--tekst2)}

/* Zakładki administracji */
.zakladki{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.zakladki a{border:1px solid var(--linia);background:var(--karta);color:var(--tekst2);padding:7px 13px;border-radius:999px;font-weight:700;text-decoration:none;font-size:14px}
.zakladki a.on{background:var(--tekst);border-color:var(--tekst);color:#fff}

/* Szczegóły zgłoszenia */
.kroki{display:flex;margin:6px 0 18px;flex-wrap:wrap}
.krok{flex:1;min-width:80px;text-align:center;font-size:12px;font-weight:700;color:var(--tekst2);position:relative;padding-top:26px}
.krok::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--linia);z-index:1}
.krok::after{content:"";position:absolute;top:13px;left:0;right:0;height:3px;background:var(--linia)}
.krok.zrob::before,.krok.zrob::after{background:var(--zielen)}
.krok.teraz::before{background:var(--glowny);box-shadow:0 0 0 5px rgba(200,105,63,.2)}
.krok.teraz{color:var(--glowny)}
.krok.odrz::before{background:var(--czerwien)} .krok.odrz{color:var(--czerwien)}
.pola{display:grid;grid-template-columns:160px 1fr;gap:7px 12px;font-size:14px;margin:12px 0}
.pola dt{color:var(--tekst2)} .pola dd{margin:0;font-weight:600}
@media(max-width:520px){.pola{grid-template-columns:1fr}.pola dd{margin-bottom:6px}}
.ramka{background:#FAF3E7;border-radius:10px;padding:10px 12px;font-size:14px;white-space:pre-wrap}
.ramka b{display:block;font-size:12px;color:var(--tekst2);text-transform:uppercase;margin-bottom:4px;white-space:normal}
.os{list-style:none;margin:0;padding:0}
.os li{position:relative;padding:0 0 14px 22px;font-size:14px}
.os li::before{content:"";position:absolute;left:4px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--akcent)}
.os li.przejscie::before{background:var(--glowny)}
.os li.system::before{background:var(--linia)}
.os li::after{content:"";position:absolute;left:8px;top:16px;bottom:0;width:1px;background:var(--linia)}
.os li:last-child::after{display:none}
.os small{color:var(--tekst2);display:block}
.os .cytat{background:#FAF3E7;border-radius:8px;padding:6px 9px;margin-top:4px;white-space:pre-wrap}
.akcje details{display:inline-block;vertical-align:top;margin:0 6px 8px 0}
.akcje details[open]{display:block;background:#FFF8EA;border:1px solid var(--akcent);border-radius:12px;padding:12px;margin-bottom:12px}
.akcje summary{list-style:none;display:inline-block}
.akcje summary::-webkit-details-marker{display:none}
.galeria{display:flex;flex-wrap:wrap;gap:10px}
.galeria a{display:block;text-decoration:none;color:var(--tekst);font-size:12px;width:110px}
.galeria img{width:110px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--linia);display:block}
.galeria .plik{width:110px;height:84px;border-radius:10px;border:1px solid var(--linia);display:flex;align-items:center;justify-content:center;background:var(--linia2);font-weight:800;color:var(--tekst2)}
.galeria span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gwiazdki{display:flex;gap:4px}
.gwiazdki label{margin:0;font-weight:700;font-size:12px}

/* Pulpit */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:16px}
.kpi .karta{margin:0}
.kpi b{display:block;font-size:28px;color:var(--glowny)}
.kpi span{color:var(--tekst2);font-size:13px}
.slupki{display:flex;flex-direction:column;gap:9px}
.slupek{display:grid;grid-template-columns:minmax(90px,170px) minmax(0,1fr) 40px;align-items:center;gap:10px;font-size:14px}
.slupek i{display:block;height:18px;border-radius:6px;min-width:3px}

/* Zgłoszenie z telefonu */
.formularz-tel .pasek{background:var(--glowny);color:#fff;margin:-18px -18px 8px;padding:14px 18px;border-radius:var(--r) var(--r) 0 0;font-weight:800}
.formularz-tel .pasek small{display:block;font-weight:600;opacity:.9}
.duzy-nr{font-size:26px;font-weight:800;text-align:center;color:var(--glowny);letter-spacing:.5px;margin:6px 0}
.qr{display:flex;justify-content:center;margin:12px 0}
.qr img,.qr canvas{background:#fff;padding:8px;border-radius:8px;border:1px solid var(--linia)}
.podglad-foto{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.podglad-foto img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--linia)}
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media(max-width:768px){.start{grid-template-columns:minmax(0,1fr)}}
.kafel{display:block;text-decoration:none;color:var(--tekst);text-align:center;padding:26px 18px}
.kafel .ikona{font-size:38px;display:block;margin-bottom:6px}
.kafel b{font-size:18px;display:block}

/* Karty QR do druku */
.karty-qr{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.karta-qr{border:2px dashed var(--akcent);border-radius:14px;padding:14px;text-align:center;background:#fff;break-inside:avoid}
.karta-qr b{display:block;color:var(--glowny);font-size:16px}
@media print{
  header.top,.stopka,.nie-drukuj,.zakladki{display:none!important}
  body{background:#fff} main{max-width:none;padding:0}
  .karta{box-shadow:none}
}

/* Telefon: menu w jednym rzędzie pod logo */
@media(max-width:640px){
  header.top{gap:8px 12px;padding:10px 14px}
  .menu{order:3;flex-basis:100%}
  .menu a{padding:6px 10px;font-size:14px}
  main{padding:14px}
}

/* ===================== Tryb demo ===================== */
.demo-pasek{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:7px 20px;background:var(--akcent-jasny);border-bottom:1px solid #F0D69E;font-size:14px}
.demo-znak{font-weight:800;color:var(--glowny-ciemny)}
.demo-jako{display:flex;align-items:center;gap:6px}
.demo-jako label{margin:0;font-size:13px}
.demo-jako select{width:auto;max-width:340px;padding:6px 8px;font-size:13px}
.demo-info{background:var(--akcent-jasny);border:1px solid #F0D69E;border-radius:12px;padding:12px 14px;margin-bottom:10px;font-size:14px}
.demo-info p{margin:8px 0 0}
.demo-dane{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:16px}
.demo-dane code{font-size:16px;font-weight:800;background:#fff}
.demo-podpowiedz{background:var(--akcent-jasny);border-radius:8px;padding:6px 10px;margin:8px 0 0}
dialog.modal{border:0;border-radius:18px;padding:22px;max-width:440px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(60,35,20,.35);color:var(--tekst);background:var(--karta);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;z-index:50}
dialog.modal::backdrop{background:rgba(62,47,38,.45)}
.modal-tlo{position:fixed;inset:0;background:rgba(62,47,38,.45);z-index:49}

/* ===================== Podgląd telefonu ===================== */
.btn-telefon{border:1px solid var(--linia);background:var(--karta);border-radius:999px;padding:6px 12px;font:inherit;font-size:14px;font-weight:700;color:var(--tekst2);cursor:pointer}
.btn-telefon:hover{background:var(--linia2)}
.telefon-dok{position:fixed;top:0;right:0;bottom:0;width:440px;background:#EFE5D6;border-left:1px solid var(--linia);z-index:40;display:flex;flex-direction:column;align-items:center;padding:10px 12px;gap:8px;box-shadow:-6px 0 24px rgba(80,50,30,.12)}
.telefon-dok[hidden]{display:none}
.telefon-pasek{display:flex;gap:8px;align-items:center;width:100%}
.telefon-pasek select{flex:1;padding:5px 8px;font-size:13px;width:auto}
.telefon-pasek .link{text-decoration:none;font-size:18px;padding:0 4px}
.telefon-ramka{position:relative;width:410px;flex:1;max-height:880px;background:#3E2F26;border-radius:44px;padding:42px 10px 18px;box-shadow:0 10px 30px rgba(60,35,20,.35)}
.telefon-glosnik{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:90px;height:8px;border-radius:8px;background:#6B5446}
.telefon-ramka iframe{width:390px;height:100%;border:0;border-radius:26px;background:var(--tlo);display:block}
body.z-telefonem header.top,body.z-telefonem .demo-pasek,body.z-telefonem main,body.z-telefonem .stopka{margin-right:440px}
body.w-ramce .btn-telefon,body.w-ramce .telefon-dok{display:none!important}
@media(max-width:1100px){.btn-telefon span{display:none}}
@media(max-width:900px){.btn-telefon{display:none}body.z-telefonem header.top,body.z-telefonem .demo-pasek,body.z-telefonem main,body.z-telefonem .stopka{margin-right:0}.telefon-dok{display:none!important}}

/* ===================== Tryb telefonu (wąski ekran) ===================== */
.przypiete-akcje{display:none}
@media(max-width:768px){
  body{font-size:16px}
  h1{font-size:20px}
  .karta{padding:14px;border-radius:12px}
  main{padding:12px 12px 90px}
  .demo-pasek{padding:7px 12px;gap:6px 10px}
  .demo-jako{flex:1 1 100%;min-width:0}
  .demo-jako select{max-width:none;flex:1 1 auto;width:100%;min-width:0}
  /* dotyk: min. 44 px */
  .btn,button.btn,.menu a,.zakladki a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn.blok{display:flex}
  input[type=text],input[type=password],input[type=email],input[type=number],input[type=date],input[type=search],input:not([type]),select,textarea{min-height:46px;font-size:16px}
  .chip span{padding:10px 14px;font-size:14px}
  label.check{min-height:40px}
  .kto{flex:1 1 100%;justify-content:flex-end}
  /* filtry w kolumnie */
  .filtry{flex-direction:column;align-items:stretch}
  .filtry > div,.filtry select,.filtry input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0}
  .filtry .prawo{margin-left:0}
  .wiersz > input,.wiersz > select{min-width:0!important;flex:1 1 100%}
  /* zakładki przewijane w poziomie zamiast łamania */
  .zakladki{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .zakladki a{flex:0 0 auto}
  /* pasek etapów: przewijany, bieżący widoczny */
  .kroki{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-left:-12px;margin-right:-12px;padding:0 12px}
  .krok{flex:0 0 92px}
  /* tabele -> karty (etykiety kolumn dodaje app.js jako data-label) */
  .tabela-wrap{overflow:visible;box-shadow:none;border-radius:0}
  table.tab,table.tab tbody,table.tab tr,table.tab td{display:block;width:100%}
  table.tab{background:transparent}
  table.tab tr:first-child:has(th),table.tab tr.wiersz-naglowka{display:none}
  table.tab th{display:none}
  table.tab tr{background:var(--karta);border:1px solid var(--linia);border-radius:12px;margin-bottom:10px;padding:8px 12px;box-shadow:var(--cien)}
  table.tab td{border:0;padding:5px 0;display:flex;gap:10px;align-items:baseline;text-align:left!important}
  table.tab td[data-label]::before{content:attr(data-label);flex:0 0 38%;font-size:12px;color:var(--tekst2);text-transform:uppercase;letter-spacing:.3px}
  table.tab td:empty{display:none}
  table.tab td input,table.tab td select{flex:1 1 0;width:auto!important;min-width:0}
  table.tab td input[type=color]{flex:0 0 56px}
  table.tab td.pusto::before{display:none}
  table.tab tr.klik:active{background:#FFF3DF}
  table.tab td:first-child{font-size:16px}
  .pola dt{margin-top:6px}
  /* przypięty przycisk „Co dalej?” */
  .przypiete-akcje{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;background:var(--glowny);color:#fff;text-decoration:none;font-weight:800;border-radius:14px;padding:12px 16px;box-shadow:0 8px 24px rgba(120,60,30,.35);text-align:center}
  .przypiete-akcje span{display:block;font-weight:600;font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .przypiete-akcje.ukryj{display:none}
  .akcje details{display:block;margin:0 0 8px}
  .akcje summary.btn{width:100%}
  .galeria a,.galeria img,.galeria .plik{width:96px}
  .galeria img,.galeria .plik{height:76px}
  .formularz-tel .pasek{margin:-14px -14px 8px;padding:14px}
  .karty-qr{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr 1fr}
  .kpi b{font-size:22px}
  .slupek{grid-template-columns:minmax(80px,120px) minmax(0,1fr) 30px;font-size:13px}
}

/* Telefon: zwarty nagłówek, pasek demo i karty listy zgłoszeń */
@media(max-width:768px){
  header.top{padding:8px 12px}
  .kto{flex:0 0 auto;order:2;margin-left:auto;gap:8px;font-size:13px}
  .menu{order:3}
  .demo-pasek .prawo{order:2;margin-left:auto}
  .demo-jako{order:3}
  table.lista-zgl tr:not(.wiersz-naglowka){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 12px}
  table.lista-zgl td{padding:0;display:block}
  table.lista-zgl td::before{display:none}
  table.lista-zgl .k-numer{grid-column:1;font-size:14px}
  table.lista-zgl .k-status{grid-column:2;grid-row:1;text-align:right!important}
  table.lista-zgl .k-tytul{grid-column:1 / -1;font-weight:700;font-size:16px;margin:2px 0 4px}
  table.lista-zgl .k-obszar,table.lista-zgl .k-zgl,table.lista-zgl .k-przyp{font-size:13px;color:var(--tekst2)}
  table.lista-zgl .k-obszar{grid-column:1;grid-row:3}
  table.lista-zgl .k-czas{grid-column:2;grid-row:3;text-align:right!important}
  table.lista-zgl .k-zgl{grid-column:1;grid-row:4}
  table.lista-zgl .k-przyp{grid-column:2;grid-row:4;text-align:right!important}
}

@media(max-width:768px){
  .menu{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:2px}
  .menu a{flex:0 0 auto;padding:6px 10px;font-size:14px}
  details.filtry-zwin{margin-bottom:12px}
  details.filtry-zwin > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--linia);border-radius:12px;background:var(--karta);font-weight:700;color:var(--tekst2)}
  details.filtry-zwin > summary::-webkit-details-marker{display:none}
  details.filtry-zwin[open] > summary{margin-bottom:10px}
}
.lista-zgl .k-numer{white-space:nowrap}

/* ===================== Nowe zgłoszenie ===================== */
.pasek-nowe{display:flex;justify-content:flex-end;margin:-4px 0 14px}
.btn-nowe{font-size:16px;padding:12px 20px;border-radius:12px;box-shadow:0 4px 14px rgba(200,105,63,.28)}
.btn-nowe span{font-weight:800;margin-right:4px}
.fab-nowe{display:none}
.zglaszasz-jako{background:var(--zielen-jasna);border-radius:10px;padding:10px 12px;margin:8px 0 0}
@media(max-width:768px){
  .pasek-nowe{display:none}
  .fab-nowe{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:31;
    width:60px;height:60px;border-radius:50%;background:var(--glowny);color:#fff;font-size:32px;font-weight:700;text-decoration:none;
    box-shadow:0 8px 22px rgba(120,60,30,.4)}
  .fab-nowe:active{background:var(--glowny-ciemny)}
  /* na stronie zgłoszenia z przypiętym „Co dalej?” – przycisk „+” nad paskiem */
  body:has(.przypiete-akcje:not(.ukryj)) .fab-nowe{bottom:calc(92px + env(safe-area-inset-bottom))}
  main{padding-bottom:100px}
}