:root{
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #141416;
  --muted: #6b7280;
  --accent: #1e88e5;
  --shadow: 0 6px 18px rgba(18,22,30,0.08);
  --round: 12px;
  --map-controls-bg: rgba(255,255,255,0.9);
}

/* Dark theme variables */
[data-theme="dark"]{
  --bg: #0f1115;
  --card: #161a22;
  --text: #e6e6e6;
  --muted: #9aa0a6;
  --accent: #4ea3ff;
  --shadow: 0 8px 22px rgba(0,0,0,0.6);
  --map-controls-bg: rgba(20,22,28,0.6);
}

/* Base */
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;font-size:15px;line-height:1.3}

/* Header / topbar */
.app-header{
  width:40vw;
  min-width: max-content;
  max-width:none;
  margin:0;
  height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 12px;
  background:linear-gradient(180deg,#ffffff,#f6f6f6);
  border-bottom:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  position:fixed;
  top:0;
  left:0;
  z-index:70;
}
[data-theme="dark"] .app-header{
  background: linear-gradient(180deg,#0f1115,#121316);
  border-bottom-color: rgba(255,255,255,0.04);
}
.brand{display:flex;align-items:center;gap:8px}
.brand-img{height:36px;display:block}

/* Top search area (logo + select + input + search button) */
.search-group.top-search{flex:1;display:flex;align-items:center;gap:8px;margin:0 12px}
.search-type{
  height:34px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.08);
  padding:4px 8px;
  background:var(--card);
  font-size:14px;
}
.search-group.top-search input[type="search"]{
  flex:1;padding:8px 10px;border-radius:20px;border:1px solid rgba(0,0,0,0.08);
  background:var(--card);outline:none;color:var(--text);box-shadow:none;height:34px;
}
.search-btn{
  background:linear-gradient(180deg,#ffb347,#ff9f00);
  border:0;
  padding:6px 10px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  transition: box-shadow .12s ease, transform .08s ease;
}
.search-btn img{height:18px;display:block}

/* Hover: apply shadow-only hover for all search buttons (both inside .controls and in search-group) */
#search-btn:hover,
.search-group .search-btn:hover,
.controls .search-btn:hover {
 box-shadow:0 2px 6px #5f6368;
  transform: translateY(-1px);
}

/* Top controls (toggles + route button + layer switch) */
.controls.top-controls{display:flex;align-items:center;gap:8px}
.control-toggle{
  background:var(--card);
  border:1px solid rgba(0,0,0,0.06);
  padding:6px 8px;border-radius:8px;cursor:pointer;font-weight:700;
  box-shadow:var(--shadow);
}
.route-btn{
  /* use same visual style as search button */
  background:linear-gradient(180deg,#ffb347,#ff9f00);
  border:0;
  padding:6px 10px;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  color:#000;
  font-weight:700;
}
.route-btn img{height:18px;display:block}
.route-label{margin-right: 10px;margin-left:6px;font-weight:800;font-size:14px}

/* keep existing layer switch styles (buttons inherit .layer-btn rules) */
.controls .layer-switch{margin-left:6px}

/* Top menu (replaces old inline layer-switch UI)
   #top-menu is toggled open/closed by JS; initial state is hidden for accessibility.
*/
.top-menu-toggle{ /* small modifier to visually match other control toggles */
  margin-left:6px;
}

/* Container for the top menu; positioned below header and above map content */
.top-menu{
  position: absolute;
  top: 52px; /* just under header (header height:48 + small gap) */
  right: 12px;
  width: 320px;
  max-width: calc(100% - 32px);
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px;
  z-index: 70;
  transform: translateY(-8px);
  opacity: 0;
  transition: all .18s ease;
  pointer-events: none;
  border: 1px solid rgba(0,0,0,0.06);
}

/* Visible/open state */
.top-menu.open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Menu sections */
.top-menu .menu-section{
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0,0,0,0.04);
}
.top-menu .menu-section:last-child{ border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.top-menu .menu-header{
  font-weight:700;
  margin-bottom:6px;
  font-size:13px;
}

/* Layer buttons inside menu */
.top-menu .menu-layers{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.top-menu .menu-layer{
  background: transparent;
  border:1px solid rgba(0,0,0,0.04);
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  color:var(--text);
  font-size:13px;
}
.top-menu .menu-layer[aria-pressed="true"]{
  background:var(--accent);
  color:#fff;
  box-shadow:0 6px 14px rgba(30,88,165,0.12);
  border-color: transparent;
}

/* Action buttons (POI / panel toggles / tools) */
.top-menu .menu-action{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:8px 6px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  color:var(--text);
}
.top-menu .menu-action:hover{
  background: rgba(0,0,0,0.02);
}

/* Responsiveness: on narrow screens show full-width menu below header */
@media (max-width:900px){
  .top-menu{
    left:8px;
    right:8px;
    width:auto;
    top: 56px; /* mobile header height */
  }
  .top-menu .menu-layers{ gap:8px }
  .top-menu .menu-layer{ flex: 1 1 calc(50% - 8px); text-align:center }
}

/* Reduce vertical space on small screens */
@media (max-width:900px){
  .app-header{height:44px;padding:6px;width:100%}
  .brand-img{height:28px}
  .search-type{display:none}
  .search-group.top-search input[type="search"]{height:30px}
}

/* Layer switch (OSM / Google-like / Apple-like) */
.controls .layer-switch{
  display:flex;
  gap:6px;
  align-items:center;
  background:var(--map-controls-bg);
  padding:4px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow: var(--shadow);
}
.controls .layer-btn{
  background:transparent;
  border:0;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  color:var(--text);
  font-size:13px;
}
.controls .layer-btn[aria-pressed="true"]{
  background:var(--accent);
  color:#fff;
  box-shadow:0 6px 14px rgba(30,88,165,0.14);
}

/* Keep existing control button styling */
.controls button{background:var(--card);border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:10px;cursor:pointer}

/* Ensure search & route buttons inside controls keep the accent gradient (override generic .controls button) */
.controls .search-btn,
.controls .route-btn{
  background:linear-gradient(180deg,#ffb347,#ff9f00);
  border:0;
  padding:6px 10px;
  border-radius:8px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  color:#000;
  font-weight:700;
  transition: box-shadow .12s ease, transform .08s ease;
}
/* Hover: use only a darker shadow (no border) to avoid layout shift */
.controls .search-btn:hover,
.controls .route-btn:hover,
.controls .control-toggle:hover,
.controls .layer-btn:hover,
.top-menu .menu-action:hover{
  box-shadow:0 2px 6px #5f6368;
}

/* Map-style specific tweaks to make UI resemble Google / Apple */
.map-style-google .poi-item{
  border-radius:8px;
  box-shadow:0 6px 20px rgba(60,64,67,0.09);
  border:1px solid rgba(0,0,0,0.04);
  background:var(--card);
}
.map-style-google .poi-item .meta .title{font-size:14px}
.map-style-google .poi-item .meta .address{font-size:13px;color:#5f6368}
.map-style-google .poi-item .rating{color:#f4b400;font-weight:700}

/* Apple-like: softer, more rounded, subtle gradient */
.map-style-apple .poi-item{
  border-radius:12px;
  box-shadow:0 8px 30px rgba(10,12,14,0.12);
  border:1px solid rgba(0,0,0,0.02);
  background: linear-gradient(180deg, #ffffff, #fbfbfc);
}
.map-style-apple .poi-item .meta .title{font-size:15px;font-weight:700}
.map-style-apple .poi-item .meta .address{color:var(--muted)}

/* Controls appearance per style */
.map-style-google .ol-control button{background:#fff;color:var(--text)}
.map-style-apple .ol-control button{background:rgba(255,255,255,0.9);color:var(--text);border-radius:8px}

/* Smooth transitions when switching styles */
.poi-item, .ol-control button, .layer-btn{
  transition: all .18s ease;
}

/* Apple-style map rendering tweaks: tint, subtle relief and label emphasis to mimic Apple Maps */
.map-style-apple .map img,
.map-style-apple .map canvas {
  /* slight boost in saturation and contrast for vivid greens and blues */
  filter: saturate(1.12) contrast(1.06) brightness(1.02);
}

/* Add a subtle coastal/ocean wash and vertical gradient to mimic Apple look */
.map-style-apple .map::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 22; /* above tiles but below UI panels */
  background: linear-gradient(to bottom, rgba(84,153,206,0.10), rgba(255,255,255,0.02));
  mix-blend-mode: multiply;
  opacity: 0.95;
}



/* Make shown labels feel bolder/rounded similar to Apple Maps by boosting weight in overlays/panels */
.map-style-apple .panel-header,
.map-style-apple .brand,
.map-style-apple .poi-item .meta .title {
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  color: #0d3528;
}

/* Make route stroke color softer on Apple style */
.map-style-apple .ol-layer .ol-overlaycontainer-stopevent path,
.map-style-apple .route-line {
  stroke: #3aa0ff;
  stroke-width: 5;
}

/* Ensure panels and header remain above the map overlay */
.map-style-apple .panel, .map-style-apple .app-header, .map-style-apple .controls{
  z-index: 30;
}

/* Keep existing main layout comment after tweaks */
 
/* Main layout */
.app-main{display:flex;align-items:flex-start;height:100vh;position:relative;overflow:auto}
.panel{
  width:320px;
  background:var(--card);
  box-shadow:var(--shadow);
  border-radius:12px;
  margin:16px;
  padding:10px;
  display:inline-flex;
  flex-direction:column;
  z-index:30;
  transition: all .18s ease;
  /* shrink-wrap to content and stay as short as content allows; cap height for very large content */
  flex: 0 0 auto;
  align-self: flex-start;
  height: auto;
  max-height: calc(70vh);
  overflow: auto; /* internal scroll if content exceeds max-height */
}

/* Collapsed panels: hide visually and free layout space so map expands */
.panel.collapsed{
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
}

/* Slide out off-canvas for left and right sides for nicer UX */
.panel-left.collapsed{
  transform: translateX(-120%);
}
.panel-right.collapsed{
  transform: translateX(120%);
}

/* When panels are collapsed the map container (flex:1) will take available space.
   Ensure panels visually overlay less by reducing their box-shadow when collapsed. */
.panel.collapsed{box-shadow: none;}
.panel-left{margin-left:16px;margin-top: 60px;}
.panel-right{margin-right:16px;margin-left:auto}
.panel-header{font-weight:700;margin-bottom:8px;position:relative;padding-right:28px}
.panel-close{
  position:absolute;
  right:6px;
  top:6px;
  border:0;
  background:transparent;
  font-size:14px;
  line-height:1;
  padding:4px 6px;
  cursor:pointer;
  color:var(--muted);
  border-radius:6px;
}
.panel-close:hover{background:rgba(0,0,0,0.04);color:var(--text)}
.panel-body{overflow:auto;max-height: calc(90vh - 110px); /* body scrolls if panel content is large; keeps panel compact otherwise (adjusted to 90% viewport) */ }

/* Map container
   Fix: use viewport-fixed positioning so the map always spans the full available browser width.
   Panels (aside elements) stay in document flow and are rendered above the map via z-index.
*/
#map-container{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100vh;
  min-width:0;
  transition: all .28s ease;
  z-index:10; /* keep below header (z-index:70) and panels (z-index:30) */
  overflow: visible;
}

/* Adjust for mobile where the header height differs */
@media (max-width:900px){
  #map-container{
    top:56px;
    height:calc(100vh - 56px);
  }
}

/* (No-op) panels-collapsed handled by fixed positioning of #map-container above.
   Keep this selector for compatibility but remove forced sizing to avoid conflicts. */
#app.panels-collapsed #map-container{
  margin:0;
  width:100%;
  left:0;
  right:0;
}

/* Map inner element */
.map{position:absolute;left:0;right:0;top:0;bottom:0}

/* Cards & small UI */
.card{background:var(--card);padding:10px;border-radius:10px;box-shadow:var(--shadow);color:var(--text)}
.card.small{padding:8px;font-size:14px}
.route-fields label{display:block;margin-bottom:8px;font-size:13px}
.route-fields input{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:transparent}

/* Via input row (A -> vias -> B) */
.via-input{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  padding:6px;
  border-radius:8px;
  background: rgba(0,0,0,0.02);
}
.via-input .via-handle{
  cursor:grab;
  user-select:none;
  padding:6px 8px;
  border-radius:6px;
  background:transparent;
  color:var(--muted);
  flex:0 0 auto;
  font-weight:700;
}
.via-input .via-label{
  flex:0 0 auto;
  font-weight:700;
  font-size:13px;
  color:var(--text);
}
.via-input .via-field{
  flex:1 1 auto;
  padding:8px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:transparent;
}
.via-input .via-remove{
  flex:0 0 auto;
  background:transparent;
  border:0;
  padding:6px;
  border-radius:6px;
  cursor:pointer;
  color:var(--muted);
}
.via-input .via-remove:hover{background:rgba(0,0,0,0.04);color:var(--text);}

/* Temporary via styling while dragging route */
.via-temp{
  background: linear-gradient(90deg, rgba(78,163,255,0.06), rgba(30,88,165,0.03));
  border:1px dashed rgba(78,163,255,0.18);
}

/* Route mode selector (driving / walking / cycling) */
.route-modes{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.route-modes .mode-btn{
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  padding:6px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
}
.route-modes .mode-btn[aria-pressed="true"]{
  background:var(--accent);
  color:#fff;
  box-shadow:0 6px 14px rgba(30,88,165,0.12);
  border-color: transparent;
}
.route-modes .mode-btn img{height:18px;display:block;margin:0}

/* Dragging visual */
.via-input.dragging,
.via-input.dragging .via-handle{
  opacity:0.85;
  outline: 2px dashed rgba(30,88,165,0.18);
}

/* Small screens: make via rows stack nicer */
@media (max-width:600px){
  .via-input{flex-direction:column;align-items:stretch}
  .via-input .via-handle{align-self:flex-start}
  .via-input .via-remove{align-self:flex-end}
}

/* Buttons */
.route-actions{display:flex;gap:8px;margin:8px 0}
.route-actions button{flex:1;padding:8px;border-radius:10px;border:0;background:var(--accent);color:#fff;cursor:pointer}

/* POI */
.poi-categories{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.poi-cat{padding:6px 8px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);background:transparent;cursor:pointer}
.poi-cat.active{background:var(--accent);color:#fff;border-color:transparent}

/* POI List */
.poi-results{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.poi-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:10px;
  background:var(--card);
  box-shadow: 0 6px 18px rgba(60,64,67,0.08);
  border:1px solid rgba(60,64,67,0.06);
  transition:transform .12s ease, box-shadow .12s ease;
}

.poi-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(60,64,67,0.12);
}

/* Thumbnail inside POI card (left image) */
.poi-item .thumb{
  width:56px;
  height:56px;
  border-radius:8px;
  overflow:hidden;
  background:#f2f2f2;
  flex:0 0 56px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Meta text area */
.poi-item .meta{
  flex:1;
  min-width:0; /* allow ellipsis */
}

.poi-item .meta .title{
  display:block;
  font-weight:700;
  font-size:15px;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.poi-item .meta .address{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.poi-item .meta .rating{
  margin-top:6px;
  font-size:13px;
  color:var(--muted);
}

/* Actions (buttons on the right) */
.poi-item .actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
  margin-left:8px;
  align-items:center;
}

.poi-item .actions button{
  border:0;
  background:transparent;
  color:var(--accent);
  padding:6px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
.poi-item .meta{flex:1}
.poi-item .actions{display:flex;gap:6px}

/* Toasts */
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--card);padding:10px 12px;border-radius:10px;box-shadow:var(--shadow);color:var(--text)}

/* FAB */
.fab{background:var(--accent);color:white;border-radius:999px;padding:10px 14px;border:0;cursor:pointer;font-weight:700}

/* Mobile */
@media (max-width:900px){
  .panel{position:fixed;left:8px;right:8px;width:auto;border-radius:12px;z-index:45}
  .panel-left{bottom:16px;top:auto;transform:translateY(0)}
  .panel-right{display:none}
  .app-header{height:56px}
  .search-group input{font-size:14px}
  .route-actions{flex-direction:column}
}

/* Map controls overrides (OpenLayers default controls) */
.ol-control button{background:var(--map-controls-bg);color:var(--text);border-radius:6px;padding:6px;border:0}
.ol-control{box-shadow:var(--shadow)}
@media (max-width: 600px){
  .mloc-fab{ bottom:60px; right:12px; left:auto; transform-origin:center center;}
  .mloc-fab.mloc-loading{ transform-origin:center center; }
  .mloc-pointer{ transform-origin: center center; }
}

/* Focus and accessibility */
button:focus,input:focus{outline:3px solid rgba(78,163,255,0.25);outline-offset:2px}

/* My Location FAB */
.mloc-fab{
  position:absolute;
  right:16px;
  bottom:80px; /* nad kontrolkami mapy */
  z-index:1000;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
  transform-origin: center center;
}
.mloc-btn{
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(0,0,0,0.06);
  background: var(--map-controls-bg);
  box-shadow: var(--shadow);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.mloc-btn img{width:22px;height:22px;display:block}
.mloc-popover{
  position:absolute;
  right:0;
  bottom:56px;
  background: var(--card);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: var(--shadow);
  border-radius:10px;
  padding:8px 10px;
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  min-width: 160px;
}
.mloc-row{display:flex;gap:8px;align-items:center;font-size:14px}
.mloc-popover .mloc-orientation{
  margin-top:6px;
  border:0;
  background:transparent;
  color: var(--accent);
  font-weight:600;
  cursor:pointer;
}

/* Desktop: pokaż popover na hover; Mobile: przez klasę .open */
.mloc-fab:hover .mloc-popover,
.mloc-fab.open .mloc-popover{
  opacity:1;
  transform: translateY(-6px);
  pointer-events:auto;
}

@media (max-width:900px){
  .mloc-fab{ right:12px; bottom:88px; }
}

/* --- Additional styles: make #top-menu resemble context menu and add live cursor coords under FAB --- */
.top-menu .menu-current-pos{
  padding:8px;
  border-radius:8px;
  background: var(--map-controls-bg);
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom:8px;
  font-size:13px;
}
.top-menu .menu-current-pos div { line-height:1.15; }
.top-menu .menu-current-pos .pos-value { color: var(--muted); font-weight:600; font-size:13px; }

/* Live cursor coordinates box (default positioned near FAB) */
.cursor-coords {
  position: absolute;
  right: 16px;
  bottom: 140px; /* sits under FAB by default */
  z-index: 1001;
  background: var(--card);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 13px;
  pointer-events: none;
  opacity: 0.98;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.06);
}

/* If cursor coords is placed inside .mloc-fab, adjust placement so it appears as a small label below the FAB */
.mloc-fab .cursor-coords {
  position: absolute;
  right: calc(100% + 8px);
  bottom: 6px;
  transform: translateY(0);
  font-size: 12px;
  padding: 6px 8px;
  min-width: 120px;
  text-align: right;
}

/* Small-screen adjustments: keep cursor coords above FAB on narrow viewports */
@media (max-width:900px){
  .cursor-coords { right: 12px; bottom: 140px; }
  .mloc-fab .cursor-coords { right: calc(100% + 6px); bottom: 4px; font-size:12px; }
}