:root { --blue:#1a73e8; --red:#d62828; --ok:#2e7d32; --fg:#1d2433; --mut:#6b7280; --line:#e5e7eb; --bg:#fff; --soft:#f3f4f6; --top:52px; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--fg); background:var(--bg); -webkit-tap-highlight-color:transparent; }
a { color:var(--blue); }
button, input, select, textarea { font:inherit; color:inherit; }
.hidden { display:none !important; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 14px; border-radius:8px; border:1px solid var(--line); background:var(--soft); font-weight:600; cursor:pointer; text-decoration:none; color:var(--fg); min-height:40px; }
.btn.pri { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.ok { background:var(--ok); border-color:var(--ok); color:#fff; }
.btn.danger { color:#b3261e; }
.btn:disabled { opacity:.5; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sp { flex:1; }
.hint { color:var(--mut); font-size:13px; }
.small { font-size:12px; }

/* ---------- ekrany ---------- */
.screen { position:fixed; inset:0; display:flex; flex-direction:column; }
.topbar { height:var(--top); flex:none; display:flex; align-items:center; gap:6px; padding:0 8px; background:var(--blue); color:#fff; z-index:1200; }
.topbar h1 { font-size:17px; margin:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .ib { background:none; border:0; color:#fff; font-size:22px; width:42px; height:42px; border-radius:50%; cursor:pointer; }
.topbar .ib:active { background:rgba(255,255,255,.18); }
.sync { font-size:12px; background:rgba(255,255,255,.18); border-radius:12px; padding:3px 9px; white-space:nowrap; cursor:pointer; }
.sync.warn { background:#f57c00; } .sync.err { background:#b3261e; }
.content { flex:1; overflow:auto; padding:16px; max-width:760px; width:100%; margin:0 auto; }

/* logowanie */
.auth { max-width:380px; margin:6vh auto 0; }
.auth img { width:72px; height:72px; border-radius:16px; display:block; margin:0 auto 10px; }
.auth h2 { text-align:center; margin:0 0 4px; } .auth p { text-align:center; }
.auth input { width:100%; padding:12px; border:1px solid var(--line); border-radius:8px; margin:6px 0; font-size:16px; }
.auth .btn { width:100%; margin-top:6px; }

/* lista projektów */
.plist { display:grid; gap:10px; }
.pcard { border:1px solid var(--line); border-radius:12px; padding:14px; cursor:pointer; display:flex; gap:12px; align-items:center; background:#fff; }
.pcard:active { background:var(--soft); }
.pcard .ic { width:44px; height:44px; border-radius:10px; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:22px; flex:none; }
.pcard b { display:block; } .pcard span { color:var(--mut); font-size:13px; }
.badge { font-size:11px; padding:2px 7px; border-radius:10px; background:var(--soft); color:var(--mut); margin-left:4px; }

/* ---------- widok projektu ---------- */
#pview { position:fixed; inset:var(--top) 0 0 0; }
#map { position:absolute; inset:0; }
.crosshair { cursor:crosshair !important; }
.white-tiles img.leaflet-tile { background:#fff; }
.fab { position:absolute; right:12px; bottom:24px; z-index:900; display:flex; flex-direction:column; gap:10px; }
.fab button { width:52px; height:52px; border-radius:50%; border:0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.35); font-size:22px; cursor:pointer; }
.fab button.main { background:var(--blue); color:#fff; font-size:30px; }
.fab button.on { background:#ffb703; }
.drawbar { position:absolute; left:50%; transform:translateX(-50%); top:10px; z-index:1000; background:#fff; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.3); padding:8px 10px; display:flex; gap:6px; align-items:center; font-size:14px; max-width:calc(100% - 20px); flex-wrap:wrap; justify-content:center; }
.me { width:18px; height:18px; border-radius:50%; background:#1e88e5; border:3px solid #fff; box-shadow:0 0 0 2px rgba(30,136,229,.45); }
.flabel { background:rgba(255,255,255,.88); border:0; box-shadow:none; font-weight:700; font-size:11px; padding:0 3px; }
.flabel::before { display:none; }
.mres { background:rgba(255,255,255,.96); border:1px solid #ff1744; border-radius:6px; padding:4px 7px; font:12px/1.35 system-ui,sans-serif; white-space:nowrap; transform:translate(10px,-50%); width:auto !important; height:auto !important; }
.mseg { background:rgba(255,23,68,.88); color:#fff; border-radius:4px; padding:0 4px; font:600 10px/16px system-ui,sans-serif; white-space:nowrap; width:auto !important; height:auto !important; transform:translate(-50%,-50%); }
.leaflet-control-layers-expanded { max-height:60vh; overflow:auto; }

/* lista obiektów (szuflada) */
.drawer { position:absolute; left:0; top:0; bottom:0; width:340px; max-width:88%; background:#fff; z-index:1100; box-shadow:2px 0 12px rgba(0,0,0,.25); display:flex; flex-direction:column; transform:translateX(-102%); transition:transform .2s; }
.drawer.open { transform:none; }
.drawer .dh { padding:10px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px; }
.drawer input, .drawer select { width:100%; padding:9px; border:1px solid var(--line); border-radius:8px; }
.flist { flex:1; overflow:auto; list-style:none; margin:0; padding:0; }
.flist li { display:flex; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.flist li.sel { background:#fff4e5; }
.flist .dot { width:14px; height:14px; border-radius:50%; flex:none; border:2px solid #fff; box-shadow:0 0 0 1px #bbb; }
.flist .m { flex:1; min-width:0; } .flist .m b { display:block; } .flist .m span { color:var(--mut); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.flist .d { color:var(--mut); font-size:12px; white-space:nowrap; }

/* panel obiektu (dolny arkusz) */
.sheet { position:absolute; left:0; right:0; bottom:0; z-index:1050; background:#fff; border-radius:14px 14px 0 0; box-shadow:0 -4px 18px rgba(0,0,0,.28); max-height:72%; display:flex; flex-direction:column; transform:translateY(105%); transition:transform .2s; }
.sheet.open { transform:none; }
.sheet .grab { width:40px; height:5px; border-radius:3px; background:#ccc; margin:7px auto 0; flex:none; }
.sheet .sh { display:flex; align-items:center; gap:8px; padding:6px 12px 8px; border-bottom:1px solid var(--line); flex:none; }
.sheet .sh .dot { width:18px; height:18px; border-radius:50%; flex:none; }
.sheet .sh input.lbl { font-size:18px; font-weight:700; border:1px solid transparent; border-radius:6px; padding:3px 5px; flex:1; min-width:0; background:none; }
.sheet .sh input.lbl:focus { border-color:var(--line); background:#fff; }
.sheet .sb { overflow:auto; padding:10px 12px 18px; }
.sheet .info { font-size:13px; color:var(--mut); margin-bottom:8px; }
.sheet .info b { color:var(--fg); }
.sheet .acts { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.sheet .acts .btn { flex:1; min-width:90px; }
.ff { display:flex; flex-direction:column; gap:3px; margin-bottom:9px; }
.ff > span { font-size:12px; color:var(--mut); font-weight:600; }
.ff input, .ff select, .ff textarea { width:100%; padding:9px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:16px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { border:1px solid var(--line); background:#fff; border-radius:16px; padding:6px 12px; cursor:pointer; }
.chip.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:6px; margin:6px 0; }
.gallery .th { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--soft); }
.gallery .th img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.gallery .th .st { position:absolute; left:3px; bottom:3px; font-size:11px; background:rgba(0,0,0,.6); color:#fff; border-radius:6px; padding:0 5px; }
.gallery .th button { position:absolute; top:3px; right:3px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; }
.src { font-size:12px; color:var(--mut); border-top:1px dashed var(--line); margin-top:8px; padding-top:6px; }
.src table { border-collapse:collapse; } .src td { padding:1px 8px 1px 0; vertical-align:top; }
.saved { font-size:12px; color:var(--ok); opacity:0; transition:opacity .3s; } .saved.show { opacity:1; }

/* okna dialogowe */
dialog { border:0; border-radius:14px; padding:0; width:min(640px, 96vw); max-height:90vh; box-shadow:0 10px 40px rgba(0,0,0,.4); }
dialog::backdrop { background:rgba(0,0,0,.45); }
dialog .dh { display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2; }
dialog .dh h3 { margin:0; flex:1; font-size:17px; }
dialog .dh button { border:0; background:none; font-size:24px; cursor:pointer; }
dialog .db { padding:14px; overflow:auto; max-height:calc(90vh - 56px); }
dialog label.fl { display:block; font-size:13px; color:var(--mut); font-weight:600; margin:8px 0 3px; }
dialog input[type=text], dialog input[type=email], dialog input[type=number], dialog textarea, dialog select { width:100%; padding:9px; border:1px solid var(--line); border-radius:8px; font-size:15px; }
.menu-list { display:flex; flex-direction:column; }
.menu-list button { text-align:left; padding:13px 10px; border:0; background:none; border-bottom:1px solid var(--line); font-size:16px; cursor:pointer; display:flex; gap:12px; align-items:center; }
.menu-list button:active { background:var(--soft); }
.menu-list button small { display:block; color:var(--mut); font-size:12px; }
table.prev { border-collapse:collapse; font-size:12px; width:100%; }
table.prev th, table.prev td { border:1px solid var(--line); padding:3px 5px; text-align:left; white-space:nowrap; }
.scrollx { overflow:auto; max-height:220px; }
.fe-item { border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:8px; }
.fe-item input, .fe-item select, .fe-item textarea { padding:7px; border:1px solid var(--line); border-radius:6px; }
.fe-item .row input[data-k=label] { flex:1; min-width:140px; } .fe-item .unit { width:70px; }
.fe-item textarea { width:100%; margin-top:6px; font-size:13px; }
.fe-item button { border:1px solid var(--line); background:#fff; border-radius:6px; padding:4px 8px; cursor:pointer; }

.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#1d2433; color:#fff; padding:9px 14px; border-radius:8px; z-index:6000; font-size:14px; max-width:92%; text-align:center; opacity:0; pointer-events:none; transition:opacity .2s; }
.toast.show { opacity:1; }
.progress { height:6px; background:var(--soft); border-radius:3px; overflow:hidden; margin:8px 0; } .progress > div { height:100%; background:var(--blue); width:0; transition:width .2s; }

.iv-row { border-top:1px dashed var(--line); margin-top:6px; padding-top:4px; }
/* zaproszenie na ekranie logowania */
.invite-banner { background:#e8f0fe; border:1px solid #c6dafc; border-radius:10px; padding:10px 12px; margin:10px 0; font-size:14px; }

/* ---------- panel administratora ---------- */
.adm-tabs { display:flex; gap:4px; overflow-x:auto; padding:8px; background:#fff; border-bottom:1px solid var(--line); flex:none; scrollbar-width:none; }
.adm-tabs button { flex:none; border:1px solid var(--line); background:var(--soft); border-radius:18px; padding:8px 14px; cursor:pointer; font-weight:600; white-space:nowrap; }
.adm-tabs button.on { background:var(--blue); color:#fff; border-color:var(--blue); }
.adm-body { flex:1; overflow:auto; display:flex; flex-direction:column; }
.adm-filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:10px; border-bottom:1px solid var(--line); background:#fafbfc; }
.adm-filters select, .adm-filters input { padding:8px; border:1px solid var(--line); border-radius:8px; max-width:100%; }
.adm-res { padding:10px; overflow:auto; }
.adm-t { border-collapse:collapse; width:100%; font-size:13px; }
.adm-t th { text-align:left; background:var(--soft); position:sticky; top:0; z-index:1; }
.adm-t th, .adm-t td { border-bottom:1px solid var(--line); padding:6px 8px; vertical-align:top; }
.adm-t tr.sum td { font-weight:700; background:#f1f8e9; }
.adm-t tr.off td { color:#aaa; }
.adm-t select { padding:3px; border:1px solid var(--line); border-radius:6px; font-size:12px; }
.adm-t .athumb { width:56px; height:56px; object-fit:cover; border-radius:6px; cursor:zoom-in; vertical-align:middle; }
.adm-mapwrap { flex:1; display:flex; min-height:420px; }
#amap { flex:1; min-height:360px; }
.adm-side { width:300px; overflow:auto; padding:10px; border-left:1px solid var(--line); font-size:13px; }
.adm-kv th { text-align:left; color:var(--mut); font-weight:600; padding:2px 10px 2px 0; } .adm-kv td { font-weight:700; }
.alog { max-height:260px; overflow:auto; font-size:12px; border-top:1px solid var(--line); padding-top:6px; }
.adm-slider { display:flex; gap:10px; align-items:center; padding:8px 10px; border-top:1px solid var(--line); }
.adm-slider input { flex:1; }
@media (max-width: 760px) { .adm-mapwrap { flex-direction:column; } .adm-side { width:auto; border-left:0; border-top:1px solid var(--line); } #amap { min-height:55vh; } }

/* ---------- Android / telefon ---------- */
html, body { overscroll-behavior:none; }                       /* bez „odświeżania” przy przeciąganiu w dół */
.topbar { padding-top:env(safe-area-inset-top); height:calc(var(--top) + env(safe-area-inset-top)); }
#pview { top:calc(var(--top) + env(safe-area-inset-top)); }
.fab { bottom:calc(24px + env(safe-area-inset-bottom)); }
.sheet .sb { padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
.leaflet-touch .leaflet-bar a { width:40px; height:40px; line-height:40px; }           /* większe +/− pod palec */
.leaflet-touch .leaflet-control-layers-toggle { width:44px; height:44px; }
.flist li { min-height:52px; }
.menu-list button { min-height:52px; }
button, .btn, a, label { touch-action:manipulation; }          /* bez opóźnienia i przybliżania przy stuknięciu */
input, select, textarea { font-size:16px; }                     /* Chrome nie przybliża pola przy wpisywaniu */
.btn:active, .fab button:active { transform:scale(.97); }

@media (min-width: 900px) {
  .drawer { transform:none; box-shadow:none; border-right:1px solid var(--line); }
  #pview.has-drawer #map, #pview.has-drawer .sheet { left:340px; }
  .sheet { left:auto; right:12px; bottom:12px; width:420px; border-radius:14px; max-height:calc(100% - 24px); }
  .fab { right:auto; left:352px; }
  #btnList { display:none; }
}