:root{
  --tlo:#f7f9fc; --karta:#ffffff; --tekst:#14181f; --tekst2:#5b6572;
  --linia:#e2e8f0; --linia2:#cbd5e1;
  --akcent:#1668d8; --akcent-tlo:#e8f1fe;
  --zielony:#0f9d58; --zielony-tlo:#e6f6ec;
  --pomaranczowy:#e07b00; --pomaranczowy-tlo:#fff3e0;
  --blekitny:#0596c7; --blekitny-tlo:#e3f6fd;
  --szary-tlo:#eef1f5;
  --czerwony:#d93025;
  --r:10px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--tlo); color:var(--tekst);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}
.pasek-gorny{
  background:var(--karta); border-bottom:1px solid var(--linia);
  padding:12px 24px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20;
  /* Bez zawijania pasek z siedmioma zakładkami rozpychał CAŁĄ stronę
     (1283 px przy oknie 900) i na telefonie trzeba było przewijać w bok,
     żeby dojść do ostatniej zakładki. */
  flex-wrap:wrap;
}
.logo{font-size:17px; font-weight:650; letter-spacing:-.2px}
.logo span{color:var(--akcent)}
.stan{margin-left:auto; display:flex; gap:14px; font-size:12.5px; color:var(--tekst2)}
.stan b{color:var(--tekst); font-weight:600}
.plakietka{
  padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--szary-tlo); color:var(--tekst2);
}
.plakietka.on{background:var(--zielony-tlo); color:var(--zielony)}
.plakietka.off{background:var(--pomaranczowy-tlo); color:var(--pomaranczowy)}

.kontener{max-width:1180px; margin:0 auto; padding:22px 24px 60px}

.szukajka{
  background:var(--karta); border:1px solid var(--linia); border-radius:14px;
  padding:16px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.szukajka textarea{
  width:100%; min-height:96px; resize:vertical; border:1px solid var(--linia);
  border-radius:var(--r); padding:12px 14px; font:inherit; color:var(--tekst);
  background:#fff; outline:none;
}
.szukajka textarea:focus{border-color:var(--akcent); box-shadow:0 0 0 3px var(--akcent-tlo)}
.rzad{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap}
button{
  font:inherit; font-weight:550; border-radius:var(--r); border:1px solid var(--linia2);
  background:#fff; color:var(--tekst); padding:9px 15px; cursor:pointer;
}
button:hover{background:#f4f7fb}
button.glowny{background:var(--akcent); border-color:var(--akcent); color:#fff}
button.glowny:hover{background:#1259bd}
button:disabled{opacity:.45; cursor:not-allowed}
button:disabled:hover{background:#fff}
button.glowny:disabled:hover{background:var(--marka)}
button.maly{padding:5px 10px; font-size:12.5px}
/* Drugi kanał rozsyłki stoi obok pierwszego, więc nie może wyglądać tak samo
   ani na niego krzyczeć — to wybór równorzędny, nie akcja główna. */
button.wtorny{background:var(--marka-tlo); border-color:var(--marka-tlo);
  color:var(--marka-ciemna)}
button.wtorny:hover{background:#d8e7f7}
.podpowiedz{font-size:12.5px; color:var(--tekst2)}

.ladunek{
  background:var(--karta); border:1px solid var(--linia); border-radius:12px;
  padding:14px 16px; margin-top:14px;
}
.trasa{font-size:16.5px; font-weight:650; letter-spacing:-.2px}
.trasa .strzalka{color:var(--tekst2); margin:0 8px; font-weight:400}
.chipy{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px}
.chip{
  background:var(--szary-tlo); border-radius:999px; padding:3px 11px;
  font-size:12.5px; color:var(--tekst2);
}
.chip b{color:var(--tekst); font-weight:600}
.chip.zimno{background:var(--blekitny-tlo); color:#065a78}
.chip.km{background:var(--akcent-tlo); color:var(--akcent)}

.naglowek-listy{
  display:flex; align-items:baseline; gap:10px; margin:22px 0 10px;
}
.naglowek-listy h2{font-size:15px; margin:0; font-weight:650}
.naglowek-listy .ile{font-size:13px; color:var(--tekst2)}

.przewoznik{
  background:var(--karta); border:1px solid var(--linia); border-radius:12px;
  margin-bottom:9px; overflow:hidden;
}
.przewoznik.top{border-color:var(--akcent); box-shadow:0 0 0 2px var(--akcent-tlo)}
.glowna-linia{display:flex; align-items:center; gap:14px; padding:12px 15px}
.kropka{width:9px; height:9px; border-radius:50%; flex:none}
.kropka.swiezy{background:var(--zielony)}
.kropka.reaktywowany{background:var(--pomaranczowy)}
.kropka.dzika_karta{background:var(--blekitny)}
.kropka.historyczny{background:var(--linia2)}
.nazwa{font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nazwa .flaga{margin-right:7px}
.cena{font-variant-numeric:tabular-nums; font-weight:650; white-space:nowrap}
.cena .znak{color:var(--tekst2); font-weight:500; margin-right:3px}
.cena .kiedy{display:block; font-size:11.5px; color:var(--tekst2); font-weight:400; text-align:right}
.opiekun{font-size:12.5px; color:var(--tekst2); white-space:nowrap}
.akcje{display:flex; gap:5px; flex:none}
.ikona{
  width:32px; height:32px; display:grid; place-items:center; padding:0;
  border-radius:8px; font-size:14px;
}
.ikona.kciuk-gora:hover{background:var(--zielony-tlo); border-color:var(--zielony); color:var(--zielony)}
.ikona.kciuk-dol:hover{background:#fdeceb; border-color:var(--czerwony); color:var(--czerwony)}
.meta{
  display:flex; gap:14px; flex-wrap:wrap; padding:0 15px 11px 38px;
  font-size:12.5px; color:var(--tekst2);
}
.meta .powod{color:var(--tekst2)}
.szuflada{border-top:1px solid var(--linia); background:#fbfcfe; padding:14px 15px}
.grupa{margin-bottom:12px}
.grupa h4{margin:0 0 7px; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--tekst2); font-weight:600}
.pola{display:flex; gap:7px; flex-wrap:wrap}
.pole{
  display:inline-flex; align-items:center; gap:6px; background:#fff;
  border:1px solid var(--linia); border-radius:999px; padding:5px 12px;
  font-size:13px; cursor:pointer; user-select:none;
}
.pole input{margin:0; accent-color:var(--akcent)}
.pole.zazn{background:var(--akcent-tlo); border-color:var(--akcent); color:var(--akcent)}
.pusto{
  text-align:center; padding:44px 20px; color:var(--tekst2);
  background:var(--karta); border:1px dashed var(--linia2); border-radius:12px;
}
.blad{background:#fdeceb; border:1px solid #f5c6c2; color:#a3271f;
  padding:11px 14px; border-radius:var(--r); margin-top:12px; font-size:14px}

/* --- marka klienta i zakładki ------------------------------------------- */
:root{ --marka:#0f5ea8; --marka-tlo:#e7f0fa; --marka-ciemna:#0b4880; }
.logo-klienta{height:26px; width:auto; display:block}
.zakladki{display:flex; flex-wrap:wrap; gap:4px; margin-left:8px; min-width:0}
.zakladka{
  border:none; background:transparent; color:var(--tekst2); font-weight:550;
  padding:7px 13px; border-radius:8px; font-size:14px;
}
.zakladka:hover{background:var(--szary-tlo)}
.zakladka.akt{background:var(--marka-tlo); color:var(--marka-ciemna)}
button.glowny{background:var(--marka); border-color:var(--marka)}
button.glowny:hover{background:var(--marka-ciemna); border-color:var(--marka-ciemna)}
.szukajka textarea:focus{border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-tlo)}
.przewoznik.top{border-color:var(--marka); box-shadow:0 0 0 2px var(--marka-tlo)}
.pole.zazn{background:var(--marka-tlo); border-color:var(--marka); color:var(--marka-ciemna)}
.pole input{accent-color:var(--marka)}

.naglowek-widoku{margin-bottom:14px}
.input-szeroki{
  flex:1; min-width:220px; padding:9px 13px; border:1px solid var(--linia);
  border-radius:var(--r); font:inherit; background:#fff; outline:none;
}
.input-szeroki:focus{border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-tlo)}
.wstep{color:var(--tekst2); font-size:14px; margin:0 0 16px; max-width:760px}

/* --- kontakty ------------------------------------------------------------ */
.kontakt{
  background:var(--karta); border:1px solid var(--linia); border-radius:12px;
  padding:12px 15px; margin-bottom:8px;
}
.kontakt-glowa{display:flex; align-items:center; gap:12px}
.kontakt-glowa .nazwa{flex:1}
.kontakt-glowa .licznik{font-size:12.5px; color:var(--tekst2); white-space:nowrap}
.brak{background:var(--pomaranczowy-tlo); color:var(--pomaranczowy);
  padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600}
.jest{background:var(--zielony-tlo); color:var(--zielony);
  padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600}
/* Trzeci stan obok „jest” i „brak”: wiadomość przygotowana, ale jeszcze
   niewysłana. Zielony znaczyłby, że poszła, pomarańczowy — że coś nie gra;
   ani jedno, ani drugie nie jest prawdą, dopóki człowiek nie kliknie. */
.czeka{background:var(--szary-tlo); color:var(--tekst2);
  padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600}
.formularz{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:9px; margin-top:12px; padding-top:12px; border-top:1px solid var(--linia);
}
.formularz label{display:flex; flex-direction:column; gap:4px; font-size:12px;
  color:var(--tekst2); font-weight:600}
.formularz input{
  padding:8px 11px; border:1px solid var(--linia); border-radius:8px;
  font:inherit; font-weight:400; color:var(--tekst); background:#fff; outline:none;
}
.formularz input:focus{border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-tlo)}

/* --- integracje ---------------------------------------------------------- */
.integracja{
  background:var(--karta); border:1px solid var(--linia); border-radius:12px;
  padding:14px 16px; margin-bottom:9px;
}
.integracja-glowa{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.integracja-glowa h3{margin:0; font-size:15px; font-weight:650}
.kat{background:var(--szary-tlo); color:var(--tekst2); padding:2px 9px;
  border-radius:999px; font-size:11.5px; font-weight:600}
.tryb{margin-left:auto; display:flex; gap:4px; align-items:center}
.przelacznik{display:flex; border:1px solid var(--linia2); border-radius:999px; overflow:hidden}
.przelacznik button{border:none; border-radius:0; padding:5px 13px; font-size:12.5px; background:#fff}
.przelacznik button.akt{background:var(--marka); color:#fff}
.przelacznik button.akt.draft{background:var(--tekst2)}
.integracja p.opis{margin:8px 0 0; font-size:13.5px; color:var(--tekst2); max-width:70ch}
.uwaga{
  margin-top:10px; padding:9px 12px; border-radius:8px; font-size:13px;
  background:var(--pomaranczowy-tlo); color:#8a4b00; border:1px solid #f5d9b0;
}
.uwaga.info{background:var(--akcent-tlo); color:#0b4a9e; border-color:#c3ddfb}
.wynik-testu{margin-top:10px; font-size:13px; padding:8px 12px; border-radius:8px}
.wynik-testu.ok{background:var(--zielony-tlo); color:#0a6b3c}
.wynik-testu.zle{background:#fdeceb; color:#a3271f}

/* --- skrzynka zapytań, portal i mailing --------------------------------- */
.zapytanie-sk{
  background:var(--karta); border:1px solid var(--linia); border-radius:12px;
  padding:13px 15px; margin-bottom:10px;
}
.zapytanie-sk .trasa{font-size:15px}
.oferta-sk{
  border:1px solid var(--linia); border-left:3px solid var(--linia2);
  border-radius:10px; margin-top:9px; background:#fbfcfe;
}
.oferta-sk.przyjeta{border-left-color:var(--zielony); background:var(--zielony-tlo)}
.oferta-sk .glowna-linia{padding:10px 13px; gap:12px}
.oferta-sk .meta{padding:0 13px 10px}
.oferta-sk .rzad{padding:0 13px 12px; margin-top:0}
.rozbicie{
  display:flex; gap:10px; flex:1; font-size:12.5px; color:var(--tekst2);
  font-variant-numeric:tabular-nums; flex-wrap:wrap;
}
.rozbicie .marza{color:var(--zielony); font-weight:600}
.input-waski{
  width:130px; padding:7px 10px; border:1px solid var(--linia);
  border-radius:8px; font:inherit; background:#fff; outline:none;
}
.input-waski:focus{border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-tlo)}

.tendery{margin-top:10px; padding-top:10px; border-top:1px solid var(--linia)}
.tendery h4{margin:0 0 7px; font-size:12px; text-transform:uppercase;
  letter-spacing:.4px; color:var(--tekst2); font-weight:600}
.tender{
  display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px dotted var(--linia); font-size:13.5px;
}
.tender:last-child{border-bottom:none}
.tender .nazwa{flex:1}

.pasek-rozsylki{
  background:var(--karta); border:1px dashed var(--linia2); border-radius:12px;
  padding:11px 14px; margin-top:10px;
}
.pasek-rozsylki .rzad{margin-top:0}
.rozsylka{margin-top:12px}
.wysylka{
  background:#fbfcfe; border:1px solid var(--linia); border-radius:10px;
  padding:9px 12px; margin-bottom:7px;
}
/* Wiersz rozsyłki WhatsAppem ma w głowie trzy przyciski zamiast jednego, więc
   przy 375 px treść wystawała poza kartę o 86 px — strona wyglądała poprawnie,
   a numer i „Otwórz rozmowę” były ucięte. Zmierzone: bez zawijania 381 px
   w karcie szerokiej na 295. `min-width:0` jest konieczne, bo element flex
   domyślnie nie kurczy się poniżej swojej treści, a numer nie ma spacji. */
.wysylka .kontakt-glowa{flex-wrap:wrap; row-gap:7px}
/* `.nazwa` ma globalnie ucinanie wielokropkiem — dobre w kartotece, złe tutaj:
   przy 375 px zostawało „Nowak …”, a numer, do którego zaraz piszemy, znikał
   z ekranu w całości. Zmierzone: 248 px treści w 71 px widocznych. Tutaj
   nazwa ma się ZAWINĄĆ, nie skrócić. */
.wysylka .kontakt-glowa .nazwa{
  min-width:0; overflow-wrap:anywhere;
  white-space:normal; overflow:visible; text-overflow:clip;
}
/* Samo zdjęcie wielokropka nie wystarczyło i widać to było dopiero na
   zrzucie: nazwie zostawało 71 px między znacznikiem a przyciskami, więc
   zawijała się po jednym słowie, a numer łamał się w środku. Poniżej 700 px
   nazwa z numerem biorą więc całą pierwszą linię, a stan, język i przyciski
   schodzą pod nią. */
@media (max-width: 700px){
  .wysylka .kontakt-glowa{align-items:flex-start}
  .wysylka .kontakt-glowa .nazwa{flex:1 1 100%; order:-1}
}
.podglad{margin-top:10px; padding-top:10px; border-top:1px solid var(--linia)}
.podglad .temat{font-weight:650; font-size:13.5px; margin-bottom:7px}
.podglad pre{
  white-space:pre-wrap; word-break:break-word; font:12.5px/1.6 ui-monospace,
  SFMono-Regular,Menlo,monospace; background:#fff; border:1px solid var(--linia);
  border-radius:8px; padding:11px 13px; margin:0 0 9px; color:var(--tekst);
}
details.pominiete{margin-top:8px}
details.pominiete summary{
  cursor:pointer; font-size:13px; color:var(--tekst2); padding:5px 0;
}
.formularz textarea{
  padding:8px 11px; border:1px solid var(--linia); border-radius:8px;
  font:inherit; font-weight:400; color:var(--tekst); background:#fff;
  outline:none; min-height:88px; resize:vertical;
}
.formularz textarea:focus{border-color:var(--marka); box-shadow:0 0 0 3px var(--marka-tlo)}
.formularz label .podpowiedz{font-weight:400; margin-top:2px}
/* Przyciski w siatce formularza nie mają się rozciągać na wysokość rzędu. */
.formularz>button{align-self:end; justify-self:start; white-space:nowrap}
.formularz>.pole{align-self:end; height:fit-content}
.integracja .rzad .nazwa{flex:1; font-weight:550; font-size:13.5px}

/* --- system podpowiedzi ----------------------------------------------- */
.znaczek-pomocy{
  width:17px; height:17px; min-width:17px; padding:0; margin-left:7px;
  border-radius:50%; border:1px solid var(--linia2); background:#fff;
  color:var(--tekst2); font-size:11px; font-weight:700; line-height:1;
  cursor:pointer; display:inline-grid; place-items:center; vertical-align:middle;
}
.znaczek-pomocy:hover{background:var(--akcent); border-color:var(--akcent); color:#fff}
.dymek{
  position:absolute; z-index:60; width:min(340px, 92vw);
  background:#fff; border:1px solid var(--linia2); border-radius:12px;
  box-shadow:0 10px 30px rgba(16,24,40,.16); padding:13px 15px 12px;
}
.dymek-gora{display:flex; align-items:center; gap:8px; margin-bottom:7px}
.dymek-gora strong{font-size:13.5px; font-weight:650}
.dymek-licznik{font-size:11.5px; color:var(--tekst2); background:var(--szary-tlo);
  border-radius:999px; padding:1px 8px}
.dymek-x{margin-left:auto; border:none; background:none; font-size:19px;
  line-height:1; color:var(--tekst2); cursor:pointer; padding:0 2px}
.dymek-x:hover{color:var(--tekst); background:none}
.dymek-tresc{margin:0 0 11px; font-size:13.5px; line-height:1.6; color:var(--tekst)}
/* Ramka „czego trzeba, żeby to ruszyło" — celowo w innym kolorze niż opis,
   bo na prezentacji to jest zdanie, po które klient sięga wzrokiem. */
.dymek-wymagania{
  background:var(--pomaranczowy-tlo); border:1px solid #f5d9b0; color:#7a4300;
  border-radius:9px; padding:9px 11px; margin:0 0 11px; font-size:12.5px;
  line-height:1.55;
}
.dymek-wymagania-naglowek{
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  margin-bottom:5px;
}
.dymek-wymagania ul{margin:0; padding-left:16px}
.dymek-wymagania li{margin-bottom:4px}
.dymek-wymagania li:last-child{margin-bottom:0}
.dymek-wymagania.gotowe{
  background:var(--zielony-tlo); border-color:#bfe6cd; color:#0a6b3c;
}
.dymek-wymagania.gotowe .dymek-wymagania-naglowek{margin-bottom:0}
.dymek{width:min(390px, 92vw)}
.dymek-stopka{display:flex; gap:7px; justify-content:flex-end; min-height:1px}
.przycisk-przewodnik{
  border-color:var(--akcent); color:var(--akcent); font-size:13px;
}
.przycisk-przewodnik:hover{background:var(--akcent-tlo)}
.etykieta-pola{font-size:12px; font-weight:600; color:var(--tekst2);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:7px;
  display:flex; align-items:center}


/* ===================== DANE — wczytywanie arkuszy ====================== */
/* Ekran ogląda się na telefonie (magazyn, trasa), więc wszystko, co szerokie,
   przewija się WEWNĄTRZ swojej karty — strona nigdy nie jedzie w bok. */

.plan-wczytania{margin-top:14px}

.liczby{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0}
.liczby .licznik{background:var(--karta); border:1px solid var(--linia);
  border-radius:var(--r); padding:10px 14px; min-width:0}
.liczby .licznik b{font-size:20px; display:block; line-height:1.1}
.liczby .licznik span{color:var(--tekst2); font-size:13px}
.liczby .licznik.przygaszony{background:var(--szary-tlo); border-color:var(--linia2)}
.liczby .licznik.przygaszony b{color:var(--tekst2)}

details.mapowanie{background:var(--karta); border:1px solid var(--linia);
  border-radius:var(--r); padding:10px 14px; margin:10px 0}
details.mapowanie summary{cursor:pointer; font-weight:600}
.tabela-mapowania{width:100%; border-collapse:collapse; margin-top:10px}
.tabela-mapowania td{padding:5px 6px; border-bottom:1px solid var(--linia);
  vertical-align:middle; font-size:14px}
.tabela-mapowania td:first-child{white-space:nowrap; color:var(--tekst2)}
.tabela-mapowania select{max-width:100%; min-width:0; width:100%}

.tabela-podgladu{width:100%; border-collapse:collapse; background:var(--karta);
  border:1px solid var(--linia); border-radius:var(--r); font-size:13px;
  display:block; overflow-x:auto; white-space:nowrap}
.tabela-podgladu th{text-align:left; padding:7px 9px; background:var(--szary-tlo);
  border-bottom:1px solid var(--linia); font-weight:600}
.tabela-podgladu td{padding:6px 9px; border-bottom:1px solid var(--linia)}
.tabela-podgladu td.liczba{text-align:right; font-variant-numeric:tabular-nums}

.ostrzezenia-karta,.blad-karta,.wynik-zapisu{border-radius:var(--r);
  padding:11px 14px; margin:10px 0; border:1px solid}
.ostrzezenia-karta{background:var(--pomaranczowy-tlo); border-color:var(--pomaranczowy)}
/* Noty wyglądają spokojniej od ostrzeżeń, bo nie są wezwaniem do działania —
   mówią tylko, skąd panel wziął dane, których w arkuszu nie było wprost. */
.noty-karta{
  background:var(--szary-tlo); border:1px solid var(--linia);
  border-radius:10px; padding:11px 14px; margin:10px 0;
}
.noty-karta .tytul{font-weight:650; font-size:13px; margin-bottom:6px}
.blad-karta{background:#fdecea; border-color:var(--czerwony)}
.wynik-zapisu{background:var(--zielony-tlo); border-color:var(--zielony)}
.ostrzezenia-karta .tytul,.blad-karta .tytul,.wynik-zapisu .tytul{
  font-weight:700; margin-bottom:5px}
.wiersz-uwagi{font-size:13.5px; padding:2px 0; overflow-wrap:anywhere}

.pasek-decyzji{display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--linia)}
.pasek-decyzji .pole{white-space:normal}
.pasek-decyzji input[type=text],.pasek-decyzji input:not([type]){max-width:70px}

@media (max-width:700px){
  .liczby .licznik{flex:1 1 44%}
  .tabela-mapowania td:first-child{white-space:normal}
  .pasek-decyzji .glowny{width:100%}
}


/* ---- pasek górny na wąskim ekranie ---------------------------------- */
/* Liczniki („0 zleceń, 0 przewoźników") zabierają na telefonie całą szerokość,
   a są informacją pomocniczą — nie warto dla nich zwijać zakładek. */
@media (max-width:820px){
  .pasek-gorny{padding:10px 12px; gap:10px}
  .stan{margin-left:0; order:3; width:100%; flex-wrap:wrap; gap:10px}
}
@media (max-width:560px){
  .stan{display:none}
  .logo{font-size:15px}
  .zakladki{order:3; width:100%; overflow-x:auto; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch}
  .zakladki .zakladka{flex:0 0 auto}
}