* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#app { display: flex; flex-direction: column; height: 100vh; }

#topbar { display: flex; flex-direction: column; gap: 8px; padding: 8px 14px;
  background: #1b2330; color: #fff; flex: 0 0 auto; }
.tb-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tb-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.tb-user { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.16); }
#summary.chips { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); }
.brand { font-weight: 700; letter-spacing: .5px; }
.brand span { font-weight: 400; opacity: .6; font-size: 12px; margin-left: 6px; }
.switch { font-size: 12px; opacity: .85; }
.switch a { color: #ffd54a; }
.switch b { color: #fff; }
.gm-overlays { background: #fff; padding: 7px 9px; margin: 8px; border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0,0,0,.3); font-size: 12px; line-height: 1.7; }
.gm-overlays b { display: block; margin-bottom: 3px; }
.gm-overlays label { display: block; cursor: pointer; }
.gm-overlays .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px; vertical-align: middle; }
.gm-fail { height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 8%; box-sizing: border-box; background: #fff7f7; color: #333; font-size: 14px; line-height: 1.5; }
.gm-fail b { color: #b30000; }
.gm-fail code { background: #eee; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.gm-fail a { color: #1565c0; font-weight: 600; }
#topbar .topbtn { background: #2d7dd2; color: #fff; border: 0; border-radius: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#topbar .topbtn:hover { background: #1b6ec2; }
#topbar .topbtn .n { opacity: .7; font-weight: 400; margin-left: 5px; }
#topbar #admin-btn, #topbar #pw-btn, #topbar #logout-btn { background: #5a6472; }
#topbar #admin-btn:hover, #topbar #pw-btn:hover, #topbar #logout-btn:hover { background: #454d59; }

/* panel administracyjny */
#admin-screen { position: fixed; inset: 0; z-index: 2000; background: #f4f6f9; display: flex; flex-direction: column; }
#admin-screen[hidden] { display: none; }
.admin-body { flex: 1 1 auto; overflow: auto; padding: 18px; max-width: 900px; width: 100%; margin: 0 auto; }
.admin-card { background: #fff; border: 1px solid #e2e5ea; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.admin-card h3 { margin: 0 0 12px; font-size: 15px; }
.admin-grid { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.admin-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.admin-color { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.admin-color input[type=color] { width: 34px; height: 26px; border: 1px solid #c4c9d2; border-radius: 5px; padding: 0; cursor: pointer; background: #fff; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 420px; margin: 8px 0; font-size: 14px; }
.admin-row input { padding: 7px 9px; border: 1px solid #c4c9d2; border-radius: 6px; font-size: 14px; width: 220px; }
.admin-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.admin-savebar { max-width: 900px; }
.admin-msg { font-size: 13px; }
.admin-msg.ok { color: #1aa033; font-weight: 600; }
.admin-msg.err { color: #c0202d; font-weight: 600; }
.admin-hint { font-size: 12px; color: #777; margin: 10px 0 0; }
.admin-range { display: flex; align-items: center; gap: 14px; }
.admin-range .rng-lab { font-size: 13px; white-space: nowrap; }
.admin-range input[type=range] { flex: 1; max-width: 360px; }
.rng-ends { display: flex; justify-content: space-between; max-width: 374px; margin-top: 4px; font-size: 11px; color: #999; }
.ed-btn { background: #1b6ec2; color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.ed-btn:hover { background: #155a9e; }

/* podgląd trasy — modal z mini-mapą */
#routepreview { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; }
#routepreview[hidden] { display: none; }
.rp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.rp-dialog { position: relative; z-index: 1; background: #fff; border-radius: 10px; overflow: hidden;
  width: min(900px, 92vw); height: min(72vh, 640px); display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.rp-head { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #1b2330; color: #fff; flex: 0 0 auto; }
.rp-title { font-weight: 700; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-close { border: 0; background: #e8000d; color: #fff; padding: 5px 12px; border-radius: 5px; cursor: pointer; font-weight: 600; white-space: nowrap; }
.rp-map { flex: 1 1 auto; min-height: 0; }

/* filtr „obszar mapy" — pasek + uchwyty prostokąta */
#area-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1500;
  background: #1b2330; color: #fff; padding: 8px 14px; border-radius: 9px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.4); font-size: 13px; max-width: 92vw; }
#area-bar[hidden] { display: none; }
#area-bar .area-info b { color: #ffd54a; }
#area-bar button { border: 0; border-radius: 5px; padding: 6px 12px; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; }
#area-bar .area-apply { background: #1aa033; color: #fff; }
#area-bar .area-cancel { background: #5a6472; color: #fff; }

/* paski trybów na mapie (wskazywanie adresu / podgląd trasy) + kursor krzyżyka */
#pick-bar, #mappeek-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1500;
  background: rgba(28,34,44,.95); color: #fff; padding: 8px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: 13px; }
#pick-bar[hidden], #mappeek-bar[hidden] { display: none; }
#pick-bar button, #mappeek-bar button { border: 0; border-radius: 5px; padding: 6px 12px; cursor: pointer; font-weight: 700; font-size: 12px; background: #5a6472; color: #fff; }
.leaflet-container.picking, .leaflet-container.picking .leaflet-interactive { cursor: crosshair !important; }
.area-h { background: #fff; border: 2px solid #1b6ec2; border-radius: 3px; box-sizing: border-box; cursor: nwse-resize; }
.area-h.area-c { border-radius: 50%; background: #1b6ec2; color: #fff; text-align: center; line-height: 16px; font-size: 13px; font-weight: 700; cursor: move; }

/* rysowanie/edycja geometrii: paski + kursor + markery wierzchołków/duchów */
#draw-bar, #geom-bar { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 1500;
  background: rgba(28,34,44,.95); color: #fff; padding: 8px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.3); font-size: 13px; max-width: 92vw; }
#draw-bar[hidden], #geom-bar[hidden] { display: none; }
#draw-bar .area-info b, #geom-bar .area-info b { color: #ffd54a; }
#draw-bar button, #geom-bar button { border: 0; border-radius: 5px; padding: 6px 12px; cursor: pointer; font-weight: 700; font-size: 12px; white-space: nowrap; }
#draw-bar .area-apply, #geom-bar .area-apply { background: #1aa033; color: #fff; }
#draw-bar .area-apply:disabled { background: #3a4150; color: #99a; cursor: default; }
#draw-bar .area-cancel, #geom-bar .area-cancel { background: #5a6472; color: #fff; }
.leaflet-container.drawing, .leaflet-container.drawing .leaflet-interactive { cursor: crosshair !important; }
.geom-v { background: #fff; border: 2px solid #ff00aa; border-radius: 50%; box-sizing: border-box; cursor: move; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.geom-g { background: #ff00aa; color: #fff; border: 1px solid #fff; border-radius: 50%; box-sizing: border-box;
  text-align: center; line-height: 10px; font-size: 11px; font-weight: 700; cursor: copy; opacity: .75; }
#newline-form[hidden] { display: none; }
#newline-form { position: fixed; inset: 0; z-index: 1600; }
#newline-form .pws-box .admin-row select, #newline-form .pws-box .admin-row input { flex: 1; padding: 7px 9px; border: 1px solid #cfd4dc; border-radius: 5px; }
#newline-form #nl-cancel { border: 1px solid #c4c9d2; background: #fff; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
/* duplikat trasy do innej warstwy */
#dup-form[hidden] { display: none; }
#dup-form { position: fixed; inset: 0; z-index: 1600; }
#dup-form .pws-box { width: 360px; }
#dup-form .pws-box .admin-row select, #dup-form .pws-box .admin-row input { flex: 1; padding: 7px 9px; border: 1px solid #cfd4dc; border-radius: 5px; }
#dup-form #dup-cancel { border: 1px solid #c4c9d2; background: #fff; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
#dup-form .dup-src { margin: 0 0 10px; font-size: 13px; color: #3a4252; }
#dup-form .admin-hint { font-size: 12px; }
.pop .pop-dup { display: block; width: 100%; margin-top: 6px; border: 1px solid #1b6ec2; border-radius: 6px;
  background: #fff; color: #1b6ec2; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 10px; cursor: pointer; }
.pop .pop-dup:hover { background: #eaf2fb; }
/* notatka do trasy w dymku — wyróżniona, z zachowaniem podziału na linie */
.pop tr.pop-note th, .pop tr.pop-note td { background: #fff8e1; padding-top: 4px; padding-bottom: 4px; }
.pop tr.pop-note td { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 260px; }
.pop tr.pop-note .pop-note-empty { color: #9aa1ab; }
.pop tr.pop-note .pop-note-edit { margin-left: 6px; padding: 0 3px; border: 0; background: none; font: inherit; font-size: 12px;
  cursor: pointer; opacity: .7; vertical-align: baseline; }
.pop tr.pop-note .pop-note-edit:hover { opacity: 1; }
.pop tr.pop-note .pop-note-add { margin-left: 0; padding: 0; color: #1b6ec2; font-weight: 600; opacity: 1; }
.pop tr.pop-note .pop-note-add:hover { text-decoration: underline; }
.pop .pop-note-ta { display: block; width: 100%; min-width: 190px; box-sizing: border-box; padding: 4px 6px; font: inherit; font-size: 12px;
  border: 1px solid #d9c56a; border-radius: 4px; background: #fff; resize: vertical; white-space: pre-wrap; }
.pop .pop-note-ta:focus { outline: 2px solid #1b6ec2; outline-offset: -1px; }
.pop .pop-note-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; white-space: normal; }
.pop .pop-note-bar button { padding: 3px 10px; border: 1px solid #c4c9d2; border-radius: 5px; background: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.pop .pop-note-bar .pop-note-save { border-color: #1b6ec2; background: #1b6ec2; color: #fff; font-weight: 600; }
.pop .pop-note-bar .pop-note-save:disabled { opacity: .6; cursor: default; }
.pop .pop-note-msg { font-size: 11px; color: #5b6472; }
.pop .pop-note-msg.err { color: #b3261e; }
/* lista wyboru — klik w miejsce, gdzie leży kilka tras (np. KSKNET i jej duplikat w KSK_TEMP) */
.pop-pick { min-width: 230px; }
.pop-pick .pk-hint { font-size: 12px; color: #5b6472; margin: 2px 0 4px; }
.pop-pick .pk-it { display: flex; align-items: center; gap: 7px; width: 100%; margin-top: 4px; padding: 5px 8px;
  border: 1px solid #d5dbe3; border-radius: 6px; background: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pop-pick .pk-it:hover { background: #eaf2fb; border-color: #1b6ec2; }
.pop-pick .pk-it i { flex: 0 0 auto; width: 16px; height: 4px; border-radius: 2px; }
.pop-pick .pk-l { font-weight: 600; white-space: nowrap; }
.pop-pick .pk-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3a4252; }
.pop-pick small { color: #6b7380; white-space: nowrap; }
/* panel: warstwy własne */
#admin-custom .cl-label { width: 160px; padding: 4px 7px; border: 1px solid #cfd4dc; border-radius: 5px; font-size: 13px; }
#admin-custom input[type=color] { width: 34px; height: 26px; padding: 0 2px; border: 1px solid #cfd4dc; border-radius: 5px; background: #fff; cursor: pointer; vertical-align: middle; }
#admin-custom .cl-key { color: #66708a; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
#admin-custom .cl-stat { color: #3a4252; white-space: nowrap; font-variant-numeric: tabular-nums; }
#admin-custom .u-act button:disabled { opacity: .45; cursor: not-allowed; }
#admin-custom .cl-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d9dee6; }
#admin-custom .cl-new #cl-new-label { flex: 1; min-width: 180px; max-width: 280px; padding: 6px 8px; border: 1px solid #cfd4dc; border-radius: 5px; font-size: 13px; }
#admin-custom .chk { font-size: 13px; white-space: nowrap; }
.mg-filters .mg-areabtn { background: #2d7dd2; color: #fff; border: 0; border-radius: 5px; padding: 5px 10px; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mg-filters .mg-areabtn:hover { background: #1b6ec2; }
.mg-filters .area-chip { background: #14305a; color: #fff; border-radius: 13px; padding: 3px 5px 3px 11px; font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mg-filters .area-chip button { border: 0; background: rgba(255,255,255,.16); color: #fff; border-radius: 50%; width: 21px; height: 21px; cursor: pointer; line-height: 1; }
.mg-filters .area-chip button:hover { background: rgba(255,255,255,.32); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: #2a3445; border-radius: 12px; padding: 3px 10px; font-size: 12px; white-space: nowrap; }
.chip b { color: #ffd54a; }
.chip .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

#main { display: flex; flex: 1 1 auto; min-height: 0; }
#panel { width: 360px; flex: 0 0 auto; min-width: 240px; max-width: 72vw; display: flex; flex-direction: column;
  min-height: 0; background: #f7f8fa; }
#resizer { flex: 0 0 6px; cursor: col-resize; background: #cfd4dc; border-left: 1px solid #b9bfc8; }
#resizer:hover, #resizer.drag { background: #8b94a3; }
#map { flex: 1 1 auto; min-width: 0; }
#lentbl .info { cursor: help; color: #4a6da7; font-size: 11px; }

.lenpanel { flex: 0 0 auto; background: #fff; border-bottom: 1px solid #e2e5ea; max-height: 42%; overflow: auto; }
.lenpanel > summary { padding: 7px 10px; cursor: pointer; font-weight: 700; font-size: 12px; background: #eef3fb; }
#lentbl { width: 100%; border-collapse: collapse; font-size: 12px; }
#lentbl th, #lentbl td { padding: 4px 9px; border-bottom: 1px solid #f0f2f6; text-align: left; white-space: nowrap; }
#lentbl th { background: #f7f8fa; position: sticky; top: 0; }
#lentbl td.num, #lentbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
#lentbl tr.razem td { font-weight: 700; border-top: 1px solid #c9cfd8; background: #fafbfd; }
#lentbl tr.podtyp td { color: #666; padding-left: 18px; }
#lentbl tr.naglowek td { background: #eef3fb; font-weight: 600; font-size: 11px; color: #45607a; padding-top: 7px; }
#lentbl tfoot .lennote { font-size: 10.5px; color: #777; font-weight: 400; white-space: normal; padding: 6px 9px; background: #fafbfd; }
#lentbl .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; background: #eceef2; }
.tabs button { border: 0; background: #d7dbe2; padding: 6px 10px; border-radius: 6px 6px 0 0; cursor: pointer; font-size: 12px; }
.tabs button.active { background: #fff; font-weight: 700; }
.tabs button .n { opacity: .55; margin-left: 4px; }

.filters { display: flex; gap: 6px; padding: 7px; align-items: center; flex-wrap: wrap; background: #fff;
  border-bottom: 1px solid #e2e5ea; }
.filters input[type=text], .filters select { padding: 5px 7px; border: 1px solid #c4c9d2; border-radius: 5px; font-size: 12px; }
.filters input[type=text] { flex: 1 1 140px; }
/* przycisk „Odznacz wszystkie" w kontrolce warstw Leaflet */
.leaflet-control-layers .lyr-clear { display: block; width: 100%; margin-top: 6px; padding: 5px 8px; border: 0; border-top: 1px solid #e2e5ea; background: #f6f7f9; color: #444; font: inherit; font-size: 12px; cursor: pointer; text-align: center; }
.leaflet-control-layers .lyr-clear:hover { background: #fdecec; color: #b02525; }
/* wydzielenie 3 grup klientów w kontrolce warstw: linia oddzielająca od elementów sieci + delikatne tło + pasek koloru grupy */
.leaflet-control-layers-overlays label.lyr-cli { padding-left: 5px; border-left: 3px solid transparent; border-radius: 2px; }
.leaflet-control-layers-overlays label.lyr-cli-fx { background: rgba(0,131,143,.10); border-left-color: #00838f; }
.leaflet-control-layers-overlays label.lyr-cli-cb { background: rgba(216,27,96,.10); border-left-color: #d81b60; }
.leaflet-control-layers-overlays label.lyr-cli-ch { background: rgba(249,168,37,.15); border-left-color: #f9a825; }
.leaflet-control-layers-overlays label.lyr-cli-top { border-top: 2px solid #c8ccd2; margin-top: 6px; padding-top: 4px; }
.leaflet-control-layers-overlays label.lyr-cli-sep { border-top: 1px dashed rgba(120,124,130,.4); margin-top: 5px; padding-top: 4px; }   /* delikatne odcięcie kolejnego bloku 3 pozycji */
/* kompaktowa wyszukiwarka klientów/adresów na mapie */
.map-search { position: relative; }
.map-search-in { width: 210px; max-width: 52vw; padding: 6px 10px; border: 1px solid #c4c9d2; border-radius: 8px; font: inherit; font-size: 13px; background: #fff; color: #1a1d21; box-shadow: 0 1px 5px rgba(0,0,0,.18); }
.map-search-in:focus { outline: none; border-color: #1b6ec2; box-shadow: 0 1px 5px rgba(27,110,194,.35); }
.map-search-list { position: absolute; top: calc(100% + 4px); left: 0; width: 300px; max-width: 74vw; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid #d7dbe2; border-radius: 8px; box-shadow: 0 6px 22px rgba(0,0,0,.22); z-index: 1200; }
.map-search-list .ms-item { padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #eef0f4; display: flex; flex-direction: column; gap: 1px; }
.map-search-list .ms-item:last-child { border-bottom: 0; }
.map-search-list .ms-item:hover, .map-search-list .ms-item.sel { background: #eaf2fb; }
.map-search-list .ms-lb { font-weight: 600; font-size: 13px; color: #1a1d21; line-height: 1.25; }
.map-search-list .ms-sub { font-size: 11px; color: #5b6570; line-height: 1.2; }
.map-search-list .ms-empty { padding: 8px 10px; color: #5b6570; font-size: 12px; }
/* zwijanie kontrolki warstw (filtry po prawej) */
.leaflet-control-layers .lyr-toggle { display: block; width: 100%; margin: -2px 0 4px; padding: 5px 8px; border: 0; border-bottom: 1px solid #e2e5ea; background: #eef2f7; color: #33465c; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-align: left; border-radius: 4px; }
.leaflet-control-layers .lyr-toggle:hover { background: #e2e9f2; }
.leaflet-control-layers.lyr-collapsed .leaflet-control-layers-list { display: none; }
.leaflet-control-layers.lyr-collapsed .lyr-clear { display: none; }
/* zwijanie lewego panelu (podsumowania/tabela) — więcej miejsca na mapę */
#map { position: relative; }
#main.panel-hidden > #panel, #main.panel-hidden > #resizer { display: none; }
#panel-toggle { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 700; width: 18px; height: 48px; border: 1px solid #c4c9d2; border-left: 0; border-radius: 0 8px 8px 0; background: #fff; color: #33465c; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: 2px 0 6px rgba(0,0,0,.12); padding: 0; }
#panel-toggle:hover { background: #eef4fb; }

.table-wrap { flex: 1 1 auto; overflow: auto; min-height: 0; background: #fff; }
/* lewy panel: scrollbar cienki — widoczny przy przepełnieniu, znika gdy nie. TRACK PRZEZROCZYSTY (kolorowy track zostawał na Safari widoczny jako stały pasek). Zawężone do realnych kontenerów przewijania. */
#panel .lenpanel, #panel .table-wrap, #panel .p4 { scrollbar-width: thin; scrollbar-color: #9aa2ae transparent; }
table#tbl { border-collapse: collapse; width: 100%; font-size: 12px; }
#tbl th, #tbl td { border-bottom: 1px solid #eceef2; padding: 5px 7px; text-align: left; white-space: nowrap; }
#tbl th { position: sticky; top: 0; background: #f0f2f6; cursor: pointer; user-select: none; z-index: 1; }
#tbl th.sorted::after { content: " ▾"; opacity: .6; }
#tbl th.asc::after { content: " ▴"; opacity: .6; }
#tbl tbody tr { cursor: pointer; }
#tbl tbody tr:hover { background: #fff7e0; }
#tbl tbody tr.sel { background: #ffe9a8; }
#tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.owner-pill { display: inline-block; padding: 1px 7px; border-radius: 10px; color: #fff; font-size: 11px; }

/* widok Zarządzanie / Inwentaryzacja OBCE */
.tabs button.spec { background: #dfe8fb; font-weight: 700; }
.filters .chk { font-size: 11px; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
#tbl td .ed { font-size: 11px; padding: 1px 3px; box-sizing: border-box; }
#tbl td input.kom { width: 150px; }
#tbl td input.wl { width: 56px; }
#tbl td select.ed { max-width: 130px; }
#tbl tr.disabled td { opacity: .55; }
#tbl td.kcell { text-align: center; }
#tbl td.kcell .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: middle; }
#tbl td.nm { cursor: pointer; }
#tbl td.nm:hover { text-decoration: underline; }
#tbl tr.sp-iz td { background: #ffecec; }
#tbl tr.sp-jed td { background: #fff7e6; }

/* Pełnookienny widok zarządzania */
#manage-screen, #report-screen { position: fixed; inset: 0; z-index: 2000; background: #f4f6f9; display: flex; flex-direction: column; }
#manage-screen[hidden], #report-screen[hidden] { display: none; }
.mg-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #1b2330; color: #fff; flex: 0 0 auto; flex-wrap: wrap; }
.mg-title { font-weight: 700; white-space: nowrap; }
.mg-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1 1 auto; }
.mg-filters input[type=text], .mg-filters select { padding: 5px 8px; border-radius: 5px; border: 1px solid #3a4250; font-size: 13px; }
.mg-filters input[type=text] { flex: 1 1 180px; }
.mg-filters .chk { color: #cfd4dc; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.mg-count { font-size: 12px; opacity: .85; white-space: nowrap; }
.mg-close { border: 0; background: #e8000d; color: #fff; padding: 6px 12px; border-radius: 5px; cursor: pointer; font-weight: 600; white-space: nowrap; }
.mg-body { flex: 1 1 auto; display: flex; min-height: 0; }
.mg-left { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.mg-tablewrap { flex: 1 1 auto; overflow: auto; background: #fff; }
.mg-pager { background: #eceef2; flex: 0 0 auto; }
#mgtbl { border-collapse: collapse; width: 100%; font-size: 13px; }
#mgtbl th, #mgtbl td { border-bottom: 1px solid #eef0f4; padding: 7px 12px; text-align: left; white-space: nowrap; }
#mgtbl thead th { position: sticky; top: 0; background: #eef2f8; z-index: 1; }
#mgtbl th.srt { cursor: pointer; user-select: none; }
#mgtbl th.srt.asc::after { content: ' ▲'; opacity: .6; }
#mgtbl th.srt.desc::after { content: ' ▼'; opacity: .6; }
#mgtbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
#mgtbl td.ctr { text-align: center; }
#mgtbl td.kom { color: #555; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
#mgtbl input.mi-um { width: 200px; transition: width .15s ease; }
#mgtbl input.mi-um:focus { width: 290px; }
/* warstwy punktowe w Zarządzaniu (mufy/studnie/zapasy/własna sieć) */
#mgtbl tr.pointrow td { background: #f4faf4; }
#mgtbl tr.pointrow.disabled td { opacity: .5; }
#mgtbl td .pkat { font-size: 12px; color: #444; }
#mgtbl input.mi-pn { width: 200px; }
#mgtbl input.mi-pkom { width: 150px; }
#mgtbl input.mi-php { width: 66px; text-align: right; }
#mgtbl tbody tr { cursor: pointer; }
#mgtbl tbody tr:hover { background: #fff7e0; }
#mgtbl tbody tr.sel { background: #ffe49b; }
#mgtbl tbody tr.disabled td { opacity: .5; }
#mgtbl .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
#mgtbl .stbadge { background: #e3edff; border: 1px solid #b9d0f5; border-radius: 10px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
/* edycja inline w tabeli zarządzania */
#mgtbl th.sel-col, #mgtbl td.sel-col { width: 30px; text-align: center; padding-left: 8px; padding-right: 4px; }
#mgtbl td.nmcell .pin { cursor: pointer; margin-right: 6px; opacity: .55; }
#mgtbl td.nmcell .pin:hover { opacity: 1; }
#mgtbl td.nmcell .prev { cursor: pointer; margin-right: 5px; opacity: .65; }
#mgtbl td.nmcell .prev:hover { opacity: 1; }

/* moduł Raporty (tabela jak #mgtbl + pasek akcji eksportu) */
#reptbl { border-collapse: collapse; width: 100%; font-size: 13px; }
#reptbl th, #reptbl td { border-bottom: 1px solid #eef0f4; padding: 7px 12px; text-align: left; white-space: nowrap; }
#reptbl thead th { position: sticky; top: 0; background: #eef2f8; z-index: 1; }
#reptbl th.srt { cursor: pointer; user-select: none; }
#reptbl th.srt.asc::after { content: ' ▲'; opacity: .6; }
#reptbl th.srt.desc::after { content: ' ▼'; opacity: .6; }
#reptbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
#reptbl tbody tr:hover { background: #fff7e0; }
#reptbl tbody tr.total td { font-weight: 700; background: #f4f7fb; }
#reptbl .prevcell { width: 54px; text-align: center; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
#reptbl .prev, #reptbl .popen { cursor: pointer; opacity: .7; }
#reptbl .popen { margin-left: 8px; }
#reptbl .prev:hover, #reptbl .popen:hover { opacity: 1; }
.mg-head .rep-type { padding: 5px 8px; border-radius: 5px; border: 1px solid #3a4250; font-size: 13px; font-weight: 600; }
.rep-actions { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #e2e5ea; flex: 0 0 auto; flex-wrap: wrap; }
.rep-actions .rep-count { font-size: 13px; color: #333; font-weight: 600; }
.rep-actions .rep-spacer { flex: 1 1 auto; }
@media print {
  #app, #topbar, #manage-screen, #admin-screen, .rep-actions, #rep-filters, .rep-type, .mg-close { display: none !important; }
  #report-screen { position: static; }
  #report-screen .mg-head { background: #fff; color: #000; }
  #reptbl thead th { background: #fff; }
}
#mgtbl input.mi-nazwa { width: 210px; transition: width .15s ease; }
#mgtbl input.mi-nazwa:focus { width: 360px; }
#mgtbl td.akt { text-align: center; }
#mgtbl select.mi, #mgtbl input.mi { font: inherit; font-size: 12px; padding: 3px 5px; border: 1px solid #cfd4dc; border-radius: 5px; background: #fff; }
#mgtbl select.mi { max-width: 160px; }
#mgtbl td.katcell { white-space: nowrap; }
#mgtbl select.mi-kat { max-width: 150px; margin-left: 2px; }
#mgtbl td.ridcell { padding-left: 6px; padding-right: 6px; }
#mgtbl td.ridcell code { display: inline-block; max-width: 64px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: #8a92a0; background: none; padding: 0; user-select: all; cursor: text; }
#mgtbl input.mi-wl { width: 62px; text-align: right; }
#mgtbl input.mi-kom { width: 140px; transition: width .15s ease; }
#mgtbl input.mi-kom:focus { width: 300px; }
#mgtbl input.mi:focus, #mgtbl select.mi:focus { outline: 2px solid #1b6ec2; outline-offset: -1px; border-color: #1b6ec2; }
#mgtbl .mi.saved { outline: 2px solid #1aa033 !important; }
#mgtbl tbody tr.rowsel td { background: #e8f1ff; }
#mgtbl tbody tr.rowsel:hover td { background: #dcebff; }
#mgtbl td.adrcell { white-space: nowrap; }
#mgtbl .adr2 { display: flex; align-items: center; gap: 4px; margin: 1px 0; }
#mgtbl .adr2 label { font-size: 10px; color: #8a92a0; width: 28px; flex: 0 0 auto; text-align: right; }
#mgtbl input.mi-adr { width: 260px; transition: width .15s ease; }
#mgtbl input.mi-adr:focus { width: 440px; }
#mgtbl .adrclr { border: 0; background: transparent; color: #b0b6c0; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 3px; flex: 0 0 auto; }
#mgtbl .adrclr:hover { color: #e8000d; }
#mgtbl .geo1 { margin-left: 5px; border: 1px solid #1b6ec2; background: #eaf2ff; color: #1b6ec2; border-radius: 5px; padding: 2px 7px; font-size: 11px; cursor: pointer; vertical-align: middle; }
#mgtbl .geo1:hover { background: #1b6ec2; color: #fff; }
#mgtbl .geo1:disabled { opacity: .5; cursor: default; }
#mgtbl .geopick { margin-left: 3px; border: 1px solid #2e7d32; background: #eafaef; border-radius: 5px; padding: 2px 6px; font-size: 11px; cursor: pointer; vertical-align: middle; line-height: 1; }
#mgtbl .geopick:hover { background: #2e7d32; }

/* pasek akcji masowych */
.mg-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; background: #14305a; color: #fff; flex: 0 0 auto; }
.mg-bulk[hidden] { display: none; }
.mg-bulk .b-n { font-weight: 700; white-space: nowrap; }
.mg-bulk .b-grp { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.10); padding: 4px 8px; border-radius: 7px; font-size: 13px; white-space: nowrap; }
.mg-bulk select, .mg-bulk input { padding: 4px 6px; border-radius: 5px; border: 1px solid #3a4250; font-size: 13px; }
.mg-bulk input.b-wl { width: 72px; }
.mg-bulk button { border: 0; border-radius: 5px; padding: 5px 10px; cursor: pointer; font-size: 12px; font-weight: 600; color: #fff; }
.mg-bulk .b-set { background: #2d7dd2; }
.mg-bulk .b-on { background: #1aa033; }
.mg-bulk .b-off { background: #b0852a; }
.mg-bulk .b-clr { background: #5a6472; margin-left: auto; }
.mg-bulk .b-prog { font-size: 12px; opacity: .9; margin-left: 4px; min-width: 60px; }

.pager { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px 8px;
  background: #eceef2; font-size: 12px; }
.pager button { border: 1px solid #c4c9d2; background: #fff; border-radius: 5px; padding: 3px 9px; cursor: pointer; }
.pager button:disabled { opacity: .4; cursor: default; }

.p4 { flex: 0 0 auto; background: #fff; border-top: 1px solid #e2e5ea; max-height: 30%; overflow: auto; }
.p4[open] { min-height: 0; }
.p4 > summary { padding: 7px 10px; cursor: pointer; font-weight: 600; font-size: 12px; background: #fbe9ea; }
#p4list, #onlist, #weryflist { font-size: 11px; }
#p4list .row, #onlist .row, #weryflist .row { padding: 4px 10px; border-bottom: 1px solid #f0f0f0; line-height: 1.35; word-break: break-word; }
#p4list .row .tag, #onlist .row .tag, #weryflist .row .tag { display: inline-block; background: #eee; border-radius: 8px; padding: 0 6px; margin-right: 5px; }

/* konfigurowalna przezroczystość dymka trasy (admin → „Dymek trasy"); domyślnie pełne krycie */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { opacity: var(--popup-opacity, 1); transition: opacity .15s ease; }
.leaflet-popup:hover .leaflet-popup-content-wrapper, .leaflet-popup:hover .leaflet-popup-tip { opacity: 1; }   /* czytelny po najechaniu */

/* przycisk „Edytuj trasę" w dymku mapy */
.pop .pop-edit { display: block; width: 100%; margin-top: 8px; border: 0; border-radius: 6px;
  background: #1b6ec2; color: #fff; font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 10px; cursor: pointer; }
.pop .pop-edit:hover { background: #155a9e; }

/* warstwa „Fibermax — detal": popup budynku (lista lokali) + etykieta liczby lokali na markerze */
.pop-fx .fx-sub { color: #00697a; font-size: 12px; margin: 2px 0 6px; }
.pop-fx .fx-tbl { border-collapse: collapse; width: 100%; max-height: 260px; display: block; overflow-y: auto; }
.pop-fx .fx-tbl td { padding: 2px 8px 2px 0; font-size: 12px; white-space: nowrap; border-bottom: 1px solid #eee; }
.pop-fx .fx-tbl td:first-child { font-weight: 600; }
.pop-fx .fx-tbl td.cl-adr { color: #5b6570; font-weight: 400; white-space: normal; }
.pop-fx .fx-tbl td.cl-nm { white-space: normal; }   /* długie nazwy firm zawijają się zamiast wychodzić poza dymek */
.pop-fx .fx-tbl td.cl-ab { color: #1b6e4b; font-weight: 700; white-space: nowrap; text-align: right; padding-left: 14px; font-variant-numeric: tabular-nums; }
.pop-fx .cl-tot { color: #1b6e4b; }
.pop-fx .cl-split { color: #b26a00; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pop-fx .obcy-tag { color: #c62828; }
.pop-fx .obcy-btn { display: block; width: 100%; margin-top: 8px; border: 0; border-radius: 6px;
  background: #455a64; color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 6px 10px; cursor: pointer; }
.pop-fx .obcy-btn.on { background: #c62828; }
.pop-fx .obcy-btn:hover { filter: brightness(1.12); }
.pop-fx .obcy-btn:disabled { opacity: .6; cursor: default; }
.pop-fx .nieobcy-tag { color: #2e7d32; }
.pop-fx .unrev-tag { color: #78909c; }
.pop-fx .rev-ctl { display: flex; gap: 6px; margin-top: 8px; }
.pop-fx .rev-btn { flex: 1; border: 1px solid #cfd8dc; border-radius: 6px; background: #eceff1; color: #37474f;
  font: inherit; font-size: 12px; font-weight: 700; padding: 6px 8px; cursor: pointer; }
.pop-fx .rev-btn:hover { filter: brightness(.97); }
.pop-fx .rev-btn:disabled { opacity: .6; cursor: default; }
.pop-fx .rev-btn.rv-obcy.on { background: #c62828; color: #fff; border-color: #c62828; }
.pop-fx .rev-btn.rv-nieobcy.on { background: #2e7d32; color: #fff; border-color: #2e7d32; }
/* lista firm w dymku budynku — każda firma z własnym statusem OBCE (per firma) */
.pop-fx .cl-list { max-height: 300px; overflow-y: auto; margin-top: 4px; }
.pop-fx .cl-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #eee; }
.pop-fx .cl-row:last-child { border-bottom: 0; }
.pop-fx .cl-row .cl-nm { flex: 1 1 auto; white-space: normal; font-weight: 600; font-size: 12px; }
.pop-fx .cl-row .cl-ab { flex: 0 0 auto; color: #1b6e4b; font-weight: 700; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pop-fx .rev-ctl.rev-mini { flex: 0 0 auto; margin-top: 0; gap: 4px; }
.pop-fx .rev-ctl.rev-mini .rev-btn { flex: 0 0 auto; padding: 2px 7px; font-size: 12px; line-height: 1.2; }
.leaflet-tooltip.fx-count { background: rgba(0,131,143,.9); color: #fff; border: 0; box-shadow: none;
  padding: 0 4px; font-size: 10px; font-weight: 700; border-radius: 6px; }
.leaflet-tooltip.fx-count::before { display: none; }   /* bez strzałki */

/* krótkie podświetlenie wiersza po przejściu z dymka do „Zarządzania" */
#mgtbl tbody tr.rowflash td { animation: rowflash 1.6s ease-out; }
@keyframes rowflash { 0% { background: #ffe49b; } 100% { background: transparent; } }

/* TRWAŁE podświetlenie trasy otwartej z mapy przyciskiem „Edytuj" (żeby było wiadomo o który wpis chodzi) */
#mgtbl tbody tr.rowfocus td { background: #fff3cd; }
#mgtbl tbody tr.rowfocus:hover td { background: #ffeaa0; }
#mgtbl tbody tr.rowfocus td.sel-col { box-shadow: inset 4px 0 0 #f0a500; }   /* pasek akcentu z lewej */
#mgtbl td.nmcell .focmark { margin-right: 5px; cursor: default; }

/* ---- logowanie aplikacyjne ---- */
#login-screen { position: fixed; inset: 0; z-index: 4000; background: #1c2230; display: flex; align-items: center; justify-content: center; }
#login-screen[hidden] { display: none; }
.login-box { background: #fff; border-radius: 12px; padding: 28px 32px; width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.login-box .brand { font-weight: 800; letter-spacing: .5px; }
.login-box .brand span { font-weight: 400; color: #8a93a3; font-size: 12px; margin-left: 4px; }
.login-box h2 { margin: 8px 0 16px; font-size: 18px; }
.login-box label { display: block; font-size: 13px; color: #555; margin-bottom: 12px; }
.login-box input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px; border: 1px solid #cfd4dc; border-radius: 6px; font-size: 14px; }
.login-box .ed-btn { width: 100%; margin-top: 4px; }
.login-msg { color: #e8000d; font-size: 13px; margin-top: 10px; min-height: 16px; }
/* topbar: zalogowany użytkownik + wyloguj */
.me-name { color: #cfd6e2; font-size: 13px; padding: 0 6px 0 0; white-space: nowrap; }
/* panel użytkowników (admin) */
.admin-users .u-tbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.admin-users .u-tbl th, .admin-users .u-tbl td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #eef0f4; }
.admin-users .u-act button { border: 1px solid #c4c9d2; background: #fff; border-radius: 5px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.admin-users .u-act button:hover { background: #eef2f8; }
.u-form-box { margin-top: 12px; padding: 14px; border: 1px solid #d9dee6; border-radius: 8px; background: #fafbfc; }
.u-form-box h4 { margin: 0 0 10px; }
.u-form-box h5 { margin: 12px 0 6px; font-size: 12px; color: #66708a; text-transform: uppercase; letter-spacing: .3px; }
.u-form-box .admin-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.u-form-box .admin-row input { flex: 1; padding: 6px 8px; border: 1px solid #cfd4dc; border-radius: 5px; }
.u-roles { margin: 8px 0; }
.u-tools { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.u-tools a { color: #1b6ec2; cursor: pointer; text-decoration: none; }
.u-tools a:hover { text-decoration: underline; }
.admin-users .u-tbl td.u-last { color: #66708a; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* dziennik zdarzeń (audyt) */
.audit-tools { display: flex; align-items: center; gap: 12px; margin: 8px 0 6px; flex-wrap: wrap; font-size: 13px; }
.audit-tools select { padding: 4px 8px; border: 1px solid #c4c9d2; border-radius: 6px; }
.audit-tools button { border: 1px solid #c4c9d2; background: #fff; border-radius: 5px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
.audit-tools button:hover { background: #eef2f8; }
.audit-log { max-height: 420px; overflow-y: auto; border: 1px solid #eef0f4; border-radius: 8px; }
.au-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.au-tbl th { position: sticky; top: 0; background: #f4f6f9; text-align: left; padding: 6px 10px; border-bottom: 1px solid #e2e5ea; z-index: 1; }
.au-tbl td { padding: 5px 10px; border-bottom: 1px solid #f0f2f6; vertical-align: top; }
.au-tbl td.au-ts { color: #66708a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.au-tbl td.au-who { font-weight: 600; white-space: nowrap; }
.au-tbl td.au-tg { color: #66708a; font-family: ui-monospace, monospace; font-size: 11.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.au-tbl td.au-dt { color: #55607a; }
/* modal zmiany własnego hasła (każdy zalogowany) */
#pwself { position: fixed; inset: 0; z-index: 3500; }
#pwself[hidden] { display: none; }
#pwself .rp-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.pws-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 10px; padding: 22px 24px; width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.pws-box h3 { margin: 0 0 14px; }
.pws-box .admin-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.pws-box .admin-row input { flex: 1; padding: 7px 9px; border: 1px solid #cfd4dc; border-radius: 5px; }
.pws-box #pw-close { border: 1px solid #c4c9d2; background: #fff; border-radius: 6px; padding: 7px 12px; cursor: pointer; }
/* „poza statystyką" — pozycje nieujęte w RAZEM/% (np. P4) */
#lentbl .pozastat-row td { opacity: .72; }
#lentbl .pozastat { font-size: 11px; color: #8a92a0; font-style: italic; }
.chip.pozastat-chip { opacity: .72; }
.chip.pozastat-chip span[title] { font-style: italic; opacity: .85; }

.nolayers { padding: 14px 16px; margin: 10px; border-radius: 8px; background: rgba(230,160,30,.14); border: 1px solid rgba(230,160,30,.45); font-size: 13px; line-height: 1.5; }

.jserr { margin: 10px; padding: 12px 14px; border-radius: 8px; background: rgba(232,0,13,.10); border: 1px solid rgba(232,0,13,.5); font-size: 13px; line-height: 1.5; }
.jserr code { display: block; margin: 6px 0; font-size: 12px; word-break: break-word; }
.jserr-hint { color: #8a93a3; font-size: 12px; }