:root{
  --card-bg:#fff; --muted:#6b7280; --ring:#e5e7eb; --shadow:0 6px 20px rgba(0,0,0,.15);
  --primary:#2563eb;
  --hist-h:180px;
}
html,body{height:100%;margin:0;background:#f6f7f9;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue","Noto Sans",sans-serif}
#map{height:100%;width:100%}

#sidebar{
  position:absolute; top:12px; right:12px; width:360px; max-height:96vh; overflow:auto;
  background: transparent; border-radius:14px; box-shadow:var(--shadow); padding:12px; z-index:1000;
  transition:transform .25s ease;
}
#sidebar.collapsed{ transform:translateX(calc(100% + 16px)); }
#toggleSidebar{
  position:absolute; right:12px; top:12px; z-index:1100;
  display:none;
  background:var(--card-bg); border:1px solid var(--ring); border-radius:999px; padding:10px 12px; box-shadow:var(--shadow);
}

.card{background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);padding:10px;margin-bottom:10px}
.muted{color:var(--muted);font-size:13px}

.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:8px;padding:8px 10px;cursor:pointer}
.btn.secondary{background:#1118270d;color:#111827}
.btn.ghost{background:#11182708;color:#111827}
.btn:disabled{opacity:.6;cursor:not-allowed}

.legend{display:grid;grid-template-columns:16px 1fr;gap:6px 10px;align-items:center;font-size:13px}
.dot{width:14px;height:14px;border-radius:999px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.statrow{display:flex;gap:8px;flex-wrap:wrap;font-size:14px}
.pill{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px}

#histWrap {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  align-items: center;
  justify-content: center;
  z-index: 9998;
  pointer-events: auto;

}


#histBox.modal-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 9999; background: #fff !important; color: inherit; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); width: min(960px, 95vw); max-height: 92vh; display: none; flex-direction: column; isolation: isolate; overflow: hidden; }


#histContent {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
}


#histBox .tabs { background: #fff; }
#histBox .tab-content {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08);
  border-top: none;
  border-radius: 0 0 12px 12px;
}

#histProg { height: 4px; border-radius: 999px; overflow: hidden; display: none; background: #e5e7eb; }
#histBar  { height: 100%; width: 0%; background: var(--primary, #2563eb); transition: width .2s ease; }

.modal:not(.modal-open) > #histBox,
#histBox[data-open] {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: auto !important;
}

select{border:1px solid var(--ring); border-radius:8px; padding:6px 8px; background:#fff}
.progress{height:4px; background:#e5e7eb; border-radius:999px; overflow:hidden; display:none}
.progress .bar{height:100%; width:0%; background:var(--primary); transition:width .2s}
.histCanvasWrap{height:var(--hist-h); min-height:140px}
#histCanvas{width:100%; height:100%}

#apiWrap{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center; z-index:5000;
}
#apiBox{
  background:#fff; width:min(960px,94vw); max-height:92vh;
  border-radius:14px; box-shadow:var(--shadow); padding:14px;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
}
#apiHead{display:flex; gap:10px; align-items:center; justify-content:space-between;}
#apiBody{overflow:auto; padding-right:4px}
.api-grid{display:grid; grid-template-columns:1fr; gap:10px}
.api-card{border:1px solid var(--ring); border-radius:12px; padding:10px}
.api-card h4{margin:0 0 6px 0}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size:12px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:8px; overflow:auto}
.copy{cursor:pointer; border:1px solid var(--ring); background:#fff; border-radius:8px; padding:6px 8px; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; font-size:.875rem; line-height:1.25rem}
.copy:hover{background:rgba(0,0,0,.04)}
.small{font-size:12px; color:#374151}
a.api{color:#2563eb; text-decoration:none; word-break:break-all}
a.api:hover{text-decoration:underline}

@media (max-width: 920px){
  #sidebar{width:min(92vw,420px)}
}
@media (max-width: 720px){
  #toggleSidebar{display:block}
  #sidebar{width:min(92vw,420px)}
}
@media (max-width: 640px){
  #histWrap,#apiWrap{align-items:stretch; justify-content:stretch}
  #histBox,#apiBox{
    width:100vw; height:100svh; max-height:none; border-radius:0; padding:12px 12px 10px;
  }
  :root{ --hist-h:52svh; }
}

.mini-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12px;color:#374151}
.mini-grid b{font-weight:700}

.leaflet-popup-content{max-height:70vh; overflow:auto; -webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .leaflet-popup-content{max-height:60svh}
}

#radar-control-box {
  position: absolute;
  left: 12px;
  bottom: 18px;
  z-index: 650;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #222;
  background: rgba(255,255,255,0.92);
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  width: 380px;
}
#radar-control-box .radar-top { display:flex; align-items:center; gap:8px; }
#radar-control-box button { width:38px; height:36px; font-size:18px; }
#radar-control-box input[type=range] { flex:1; }
#radar-control-box .radar-bottom { display:flex; justify-content:space-between; gap:12px; margin-top:8px; align-items:center; }
#radar-control-box label { font-size:12px; display:flex; gap:6px; align-items:center; }
.leaflet-container .radar-controls.leaflet-bar { border: none; padding: 0; background: transparent; box-shadow: none; }

#aladinWrap {
  position: fixed; inset: 0; display: none;
  background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
  z-index: 2000;
}
#aladinBox {
  background: var(--b1, #fff); border-radius: 12px; padding: 16px;
  max-width: 960px; width: 92%; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
#aladinHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
#aladinTitle{font-weight:700;white-space:nowrap}
#aladinControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#aladinControls label{display:flex;align-items:center;gap:6px;white-space:nowrap}
#aladinControls select{ min-width:110px; }
#aladinBox .btn{ height:32px; line-height:30px; padding:0 10px; }

.codebox{max-height:0;overflow:hidden;border:1px solid var(--border,#e5e7eb);border-radius:12px;margin-top:10px;background:var(--bg-soft,#0b0c0f08);transition:max-height .25s ease}
.codebox.open{max-height:680px}
pre.code{margin:0;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12.5px;line-height:1.5;white-space:pre;tab-size:2}
.mono{white-space:pre;overflow:auto}
.row .btn{white-space:nowrap}

#apiWrap .row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
#apiWrap .btn{min-height:2rem;height:2rem}
#apiWrap .btn-sm{min-height:2rem;height:2rem}
#apiWrap .btn.whitespace-nowrap{white-space:nowrap}
#apiUnifiedCode.codebox{max-height:0;overflow:hidden;border:1px solid var(--border,#e5e7eb);border-radius:12px;margin-top:10px;background:var(--bg-soft,#0b0c0f08);transition:max-height .25s ease}
#apiUnifiedCode.codebox.open{max-height:34rem}
#apiUnifiedCode pre.code{margin:0;padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:12.5px;line-height:1.5;white-space:pre;tab-size:2;}

#apiWrap .btn.toggle{
  white-space: nowrap;
  min-height: auto;
  height: auto;
  line-height: 1.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  text-align: center;
  min-width: 100px;
}
#apiWrap .btn.toggle span{display:inline-block;white-space:nowrap}

/* Vrstva nad celým webom – NIKDY sa nehýbe so sidebarom */
#ui-layer{
  position: fixed;
  inset: 0;
  z-index: 2147483647;        /* úplne navrchu */
  pointer-events: none;        /* vrstva neblokuje kliky pod sebou */
}

/* Samotné tlačidlo – klikateľné, pripnuté vpravo dole */
#ui-layer #installBtn{
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  pointer-events: auto;       /* toto JE klikateľné */
  border-radius: 9999px;
  box-shadow: var(--shadow);
  background: var(--card-bg);
  border: 1px solid var(--ring);
}

/* Pre istotu zruš akékoľvek skrytie buttonu z iných štýlov */
#installBtn.hidden, #installBtn[hidden]{ display: flex !important; visibility: visible !important; opacity: 1 !important; }



@media (pointer: coarse){
  #installBtn{ padding: 12px 16px; font-size: 16px; } 
}