:root { --gpx-accent: #3b82f6; --gpx-bg: #fff; --gpx-text: #0f172a; }
.gpx-app{font-family:system-ui,Arial;background:linear-gradient(180deg,#f8fafc,white);padding:16px;}
.gpx-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.gpx-shell{display:flex;height:70vh;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;min-height:320px}
.gpx-sidebar{width:280px;background:var(--gpx-bg);border-right:1px solid #eee;display:flex;flex-direction:column;min-width:60px;max-width:70%}
.gpx-list{padding:8px;overflow:auto;flex:1;font-size:13px;line-height:1.2}
.gpx-row{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid #f1f1f1;font-size:13px;color:var(--gpx-text)}
.gpx-actions{margin-left:auto;display:flex;gap:6px}
/*.gpx-btn{background:var(--gpx-accent);color:#fff;padding:8px 10px;border-radius:6px;border:0;cursor:pointer}*/
.gpx-btn{color:#fff;padding:6px 5px;border-radius:6px;border:0;cursor:pointer}
/*.gpx-smallbtn{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:6px;border-radius:6px;cursor:pointer}*/
.gpx-smallbtn{border:1px solid rgba(0,0,0,0.06);padding:5px;border-radius:6px;cursor:pointer}
.gpx-resizer { width:6px; cursor:ew-resize; background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01)); }
.gpx-main{flex:1;position:relative;display:flex;flex-direction:column}
.gpx-map{height:100%;width:100%; min-height:200px}
.gpx-panel { position: absolute; right: 12px; bottom: 12px; z-index: 9999; }
.gpx-panel button { background: rgba(255,255,255,0.95); border: 1px solid #ddd; padding:6px 8px; border-radius:6px; cursor:pointer; }
@media (max-width:900px){ .gpx-shell{flex-direction:column;height:auto} .gpx-sidebar{width:100%;order:1} .gpx-resizer{display:none} .gpx-main{order:2;height:60vh} .gpx-map{height:100%} }
/* Controls below map (do not overlay map) */
.gpx-controls-below{
  width:100%;
/*  padding:10px 12px; */
  box-sizing:border-box;
  border-top:1px solid #eee;
/*  background: #fafafa; */
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
}
.gpx-controls-below .gpx-control-btn{
/*  background:transparent; */
  border:1px solid #ddd;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
}
#fullmap-container { width:100%; }
/* Search + select-all compact line already inlined, but add small tweaks */
.gpx-sidebar input[type="search"] { font-size:13px }

/* fullscreen top-right icon */
.gpx-fullscreen-top{
  position:absolute;
  right:12px;
  top:12px;
  z-index:10020;
/*  background:#ffffffcc; */
  border:1px solid #ddd;
  padding:1px 10px;
  border-radius:6px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* three-dots bottom-right */
.gpx-three-dots{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:10020;
/*  background:#fff; */
  border:1px solid #ddd;
  padding:2px 8px;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  font-size:18px;
}

/* sliding side panel (hidden off-canvas) */
.gpx-side-panel{
  position:absolute;
  right:-260px;
  bottom:60px;
/*  width:240px; */
  z-index:10025;
  background: #fff; 
  border:1px solid #e6e6e6;
  border-radius:8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: right 280ms ease;
  overflow:hidden;
  pointer-events:auto;
}
.gpx-side-panel.open{ right:12px; }

/* small panel buttons */
.gpx-panel-btn{ display:block; width:100%; text-align:left; padding:8px; border:1px solid #eee; border-radius:6px; /*background:transparent;*/ cursor:pointer; }

/* ensure controls below map remain below and do not shrink map */
.gpx-controls-below{ width:100%; padding:10px 12px; box-sizing:border-box; border-top:1px solid #eee; background:#fafafa; display:flex; justify-content:flex-end; align-items:center; gap:8px; }

/* ensure three-dots hidden on very small screens if needed */
@media (max-width:600px){
  .gpx-three-dots{ right:8px; bottom:8px; padding:6px; font-size:16px; }
  .gpx-side-panel{ width:200px; }
}
.gpx-toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    color: var(--gpx-text);
}
/* klasa ukrywająca (najsilniejsza) */
.leaflet-pane-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* prosty styl przełącznika (możesz dopasować) */
.toggle-switch {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  user-select:none;
}

.toggle-switch input[type="checkbox"]{
  width:44px;
  height:24px;
  -webkit-appearance:none;
  appearance:none;
  background:#ddd;
  border-radius:999px;
  position:relative;
  outline:none;
  cursor:pointer;
  transition:background .15s;
}
.toggle-switch input[type="checkbox"]::after{
  content:"";
  width:18px;
  height:18px;
  border-radius:50%;
  background:white;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  position:absolute;
  left:3px;
  top:3px;
  transition:transform .15s;
}
.toggle-switch input[type="checkbox"]:checked{
  background:#4caf50;
}
.toggle-switch input[type="checkbox"]:checked::after{
  transform: translateX(20px);
}
/* MOBILE FIX – LISTA TRAS */
@media (max-width: 768px) {
  /* cała aplikacja jedna pod drugą */
  .gpx-shell {
    flex-direction: column;
    height: auto;
  }
  /* sidebar (lista) na całą szerokość */
  .gpx-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: 0;
    border-bottom: 1px solid #e6e6e6;
  }
  /* lista – bez sztucznej wysokości */
  .gpx-list {
    padding: 6px;
    font-size: 13px;
  }
  .gpx-row {
    padding: 6px;
    gap: 6px;
    align-items: flex-start;
  }
  .gpx-row input[type="checkbox"] {
    margin-top: 3px;
    transform: scale(1);
  }
  .gpx-row .title {
    font-size: 14px;
    line-height: 1.25;
  }
  .gpx-row .gpx-actions {
    margin-left: auto;
    gap: 4px;
  }
  .gpx-smallbtn {
    padding: 4px 6px;
    font-size: 12px;
  }
  .leaflet-control {
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    border-radius: 8px;
    overflow: hidden;
  }
  .leaflet-control a,
  .leaflet-control button {
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 14px !important;
    padding: 0 !important;
  }
  .leaflet-control a span,
  .leaflet-control button span {
    line-height: 28px !important;
  }
  .leaflet-top    { top: 6px !important; }
  .leaflet-bottom { bottom: 6px !important; }
  .leaflet-left   { left: 6px !important; }
  .leaflet-right  { right: 6px !important; }
  .leaflet-control-zoom a + a,
  .leaflet-bar a + a {
    border-top: 1px solid rgba(0,0,0,.08);
  }
}
/* MAP LOADER */
#map-loader {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#map-loader.active {
  display: flex;
}
#map-loader .spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #ddd;
  border-top-color: #1e73be;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}