@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --bg:#0f172a;
  --panel:#1e293b;
  --panel2:#1e293b;
  --panel3:#334155;
  --line:#334155;
  --txt:#f1f5f9;
  --dim:#94a3b8;
  --accent:#2E7BFF;
  --accent-dim:rgba(46,123,255,.15);
  --cyan:#2E7BFF;
  --purple:#6366f1;
  --red:#ef4444;
  --green:#22c55e;
  --amber:#f59e0b;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden}

#map{position:absolute;inset:0;z-index:1;background:#0f172a;filter:brightness(.9) contrast(1.05)}

body.panel-side #panel{top:16px;right:16px;left:auto;bottom:auto;width:min(390px,calc(100vw - 32px));max-height:calc(100vh - 32px);border-radius:18px}
body.panel-bottom #panel{left:0;right:0;bottom:0;top:auto;width:100%;max-height:78vh;border-radius:20px 20px 0 0;border-bottom:none}
@media (max-width:759px){
  body.panel-side #panel{left:0;right:0;bottom:0;top:auto;width:100%;max-height:82vh;border-radius:20px 20px 0 0;border-bottom:none}
}

/* ---------- Panel ---------- */
#panel{
  position:absolute;z-index:1000;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(15,23,42,.97),rgba(15,23,42,.98));
  border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.55);
  overflow:hidden;backdrop-filter:blur(6px);
}
@media (min-width:760px){
  body:not(.panel-bottom) #panel{top:16px;right:16px;width:min(390px,calc(100vw - 32px));max-height:calc(100vh - 32px);border-radius:18px}
}

#head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  border-bottom:1px solid var(--line)}
#head h1{margin:0;font-size:18px;font-weight:700;letter-spacing:.3px}
#head .sub{margin-top:2px;font-size:12px;color:var(--dim)}
#head .headActions{display:flex;align-items:center;gap:8px}
#dockToggle{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer}
#toggle{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);font-size:20px;line-height:1;cursor:pointer}
#toggle:active{background:var(--panel3)}

/* collapsed = pokazuj tylko nagłówek */
#panel.collapsed #tabs,#panel.collapsed #body{display:none}

/* ---------- Zakładki ---------- */
#tabs{display:flex;gap:4px;padding:8px 8px 0;background:var(--panel)}
.tab{flex:1;padding:10px 6px;border:none;border-radius:10px 10px 0 0;cursor:pointer;
  background:transparent;color:var(--dim);font-size:13px;font-weight:600}
.tab.active{background:var(--panel2);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}

#body{flex:1 1 0%;min-height:0;padding:14px 16px;overflow-y:auto;-webkit-overflow-scrolling:touch}

.tabpane{display:none;animation:fade .18s ease}
.tabpane.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- Pola / kontrolki ---------- */
.row{margin-bottom:14px}
label{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}
label b{color:var(--txt);font-weight:700}
.derived{margin-top:6px;font-size:12px;color:var(--dim)}
.derived b{color:var(--cyan)}

input[type=text],input[type=number],select{
  width:100%;padding:11px 12px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);font-size:15px;min-height:44px}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

input[type=range]{width:100%;height:34px;-webkit-appearance:none;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent),#334155)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);margin-top:-8px;box-shadow:0 2px 6px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent),#334155)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:3px solid var(--accent);border-radius:50%;background:#fff}

.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
button.btn{flex:1;min-width:84px;min-height:44px;padding:10px 12px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:14px;font-weight:600}
button.btn:active{transform:translateY(1px);background:var(--panel3)}
button.btn.primary{background:linear-gradient(180deg,#4690ff,#2E7BFF);color:#fff;border-color:#5a9cff}
button.btn.ghost{background:transparent}
button.btn.danger{color:#ef4444;border-color:#7f1d1d}
button.btn.fav.on{color:#fff;background:var(--accent);border-color:var(--accent)}

.seg{display:flex;gap:6px}
.seg button{flex:1;min-height:40px;padding:8px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--dim);font-size:13px;cursor:pointer}
.seg button.active{background:var(--panel3);color:var(--txt);border-color:var(--accent)}
.seg button[data-d="1.2"].active{box-shadow:inset 0 0 0 1px var(--accent-dim)}
.seg button[data-d="1.3"].active{box-shadow:inset 0 0 0 1px var(--accent-dim)}
.seg button[data-d="1.45"].active{box-shadow:inset 0 0 0 1px var(--accent-dim)}

.fromto{display:flex;align-items:flex-end;gap:8px}
.fromto .row{flex:1;margin-bottom:0}
#swapBtn{flex:0 0 auto;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);font-size:18px;cursor:pointer;margin-bottom:0}

.note{font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:10px;
  border-top:1px dashed var(--line);padding-top:10px}
.status{font-size:12.5px;margin:10px 0;min-height:16px;color:var(--amber)}
.status.err{color:var(--red)}
.status.ok{color:var(--txt)}
.hidden{display:none!important}

.legendDock{position:fixed;left:14px;bottom:14px;z-index:1100;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.legendDock button{pointer-events:auto}
.legendDockPanel{width:min(280px,calc(100vw - 28px));border:1px solid var(--line);background:rgba(15,23,42,.96);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.42);overflow:hidden;transition:transform .2s ease,opacity .2s ease;pointer-events:auto}
.legendDockHead{padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.legendDockRows{padding:10px;display:grid;grid-template-columns:1fr;gap:8px;max-height:50vh;overflow:auto}
.legendDock.collapsed .legendDockPanel{transform:translateY(10px) scale(.98);opacity:0;pointer-events:none}
.legendDock:not(.collapsed) #legendToggle{background:var(--panel3)}
#legendToggle{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-weight:700;pointer-events:auto;flex:0 0 auto}

.legendRow{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);
  background:var(--panel2);border-radius:10px;font-size:11.5px;color:var(--dim)}
.legendSwatch{flex:0 0 auto;width:18px;height:18px;border-radius:999px;border:1px solid var(--line);position:relative}
.legendSwatch.line{border-radius:4px;background:linear-gradient(90deg,var(--accent),#334155)}
.legendSwatch.line::after{content:'';position:absolute;inset:7px 2px;border-top:2px solid var(--accent);opacity:.85}
.legendSwatch.circle{background:radial-gradient(circle at center,var(--accent) 20%,rgba(46,123,255,.2) 22%,rgba(46,123,255,.03) 64%,transparent 65%)}
.legendSwatch.fuel{background:#f59e0b}
.legendSwatch.food{background:#ef4444}
.legendSwatch.sights{background:#6366f1}
.legendSwatch.nature{background:#22c55e}

.cityBubble{width:34px;height:34px;border-radius:999px;border:1px solid rgba(46,123,255,.75);background:rgba(15,23,42,.82);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.cityBubble small{display:block;font-size:9px;color:var(--dim);font-weight:600;line-height:1}
.cityBubbleLabel{background:rgba(15,23,42,.92);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:2px 6px;font-size:10px;white-space:nowrap;box-shadow:0 8px 18px rgba(0,0,0,.3)}
.cityBubbleLabel:before{display:none}

.tripCostCard{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;margin:8px 0 14px}
.tripCostCell{padding:10px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel2),#0f172a)}
.tripCostCell.strong{background:linear-gradient(180deg,#1e293b,#0f172a);border-color:var(--accent)}
.tripCostKey{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tripCostValue{display:block;margin-top:6px;font-size:18px;font-weight:800;color:var(--txt)}

.routeColumns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 14px}
.routeColumn{min-width:0}
.routeColumn .list{margin-top:6px}
@media (max-width:759px){
  .tripCostCard,.routeColumns{grid-template-columns:1fr}
}

/* ---------- Pojazd: info ---------- */
#vehInfo{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;
  margin-bottom:14px;font-size:13px;line-height:1.6}
#vehInfo .big{font-size:16px;font-weight:700;margin-bottom:2px}
#vehInfo .spec{color:var(--dim)}
#vehInfo .spec b{color:var(--txt)}

#vehForm{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
#vehForm h3{margin:0 0 10px;font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- Wskaźnik paliwa ---------- */
#gauge{position:relative;height:18px;border-radius:9px;margin:6px 0 4px;
  background:linear-gradient(90deg,var(--accent) 0%,#334155 100%);
  border:1px solid var(--line)}
#gaugeNeedle{position:absolute;top:-4px;width:4px;height:26px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 6px rgba(46,123,255,.8);transition:left .35s ease;left:0}
.gaugeScale{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);margin-bottom:12px}

.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:14px 0}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px}
.stat .k{font-size:11px;color:var(--dim);display:flex;align-items:center;gap:5px}
.stat .v{font-size:18px;font-weight:700;margin-top:3px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.cyan{background:var(--accent)} .dot.purple{background:var(--purple)}
.dot.red{background:var(--red)} .dot.green{background:var(--green)} .dot.amber{background:var(--amber)}

/* ---------- Listy (tankowania / miejsca) ---------- */
.list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.item{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:10px}
.item .ico{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
  font-size:16px;background:var(--panel3)}
.item .meta{flex:1;min-width:0}
.item .name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .desc{font-size:11.5px;color:var(--dim);margin-top:2px}
.item a{color:var(--accent);text-decoration:none;font-size:11.5px}
.rate{font-size:12px;font-weight:700;color:var(--txt);white-space:nowrap}

.item.highlight{border-color:var(--accent);background:linear-gradient(180deg,rgba(46,123,255,.06),rgba(46,123,255,.02))}

.feeMeta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.feeTag{padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--panel3);font-size:10px;color:var(--dim);white-space:nowrap}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{padding:8px 12px;border-radius:20px;border:1px solid var(--line);background:var(--panel2);
  color:var(--dim);font-size:13px;cursor:pointer}
.chip.active{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}

.keybox{display:flex;gap:8px}
.keybox input{flex:1}

/* ---------- Leaflet dark popupy / etykiety ---------- */
.leaflet-popup-content-wrapper{background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:12px}
.leaflet-popup-tip{background:var(--panel);border:1px solid var(--line)}
.leaflet-container a.leaflet-popup-close-button{color:var(--dim)}
.pop b{font-size:14px}
.pop a{color:var(--txt)}
.city-label{background:transparent;border:none;box-shadow:none;color:var(--accent);
  font-size:11px;font-weight:600;text-shadow:0 1px 3px #000}
.leaflet-tooltip.city-label:before{display:none}
.leaflet-control-attribution{background:rgba(15,23,42,.78)!important;color:#64748b!important}
.leaflet-control-attribution a{color:#94a3b8!important}

.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-pane img,
.leaflet-tile-pane img{filter:grayscale(1) contrast(1.05) brightness(.95)}

.leaflet-div-icon{background:transparent;border:none}

.leaflet-interactive{stroke-linecap:round;stroke-linejoin:round}

.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Panel Rozszerzony (Extended Panel) ---------- */
#extendedPanel {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(15,23,42,.97), rgba(15,23,42,.98));
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
  backdrop-filter: blur(6px);
}

#extendedPanel.hidden {
  display: none !important;
}

body.panel-side #extendedPanel {
  top: 16px;
  right: calc(16px + 390px + 12px);
  left: auto;
  bottom: auto;
  width: 440px;
  max-height: calc(100vh - 32px);
  border-radius: 18px;
}

/* Mobile & bottom dock style overrides */
@media (max-width: 759px) {
  #extendedPanel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 85vh !important;
    border-radius: 20px 20px 0 0 !important;
    border-bottom: none !important;
    z-index: 1200 !important;
    display: flex !important;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  #extendedPanel.hidden {
    display: flex !important;
    transform: translateY(100%);
    pointer-events: none;
  }
  
  #extendedPanel:not(.hidden) {
    transform: translateY(0);
    pointer-events: auto;
  }
}

body.panel-bottom #extendedPanel {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-height: 85vh !important;
  border-radius: 20px 20px 0 0 !important;
  border-bottom: none !important;
  z-index: 1200 !important;
  display: flex !important;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.panel-bottom #extendedPanel.hidden {
  display: flex !important;
  transform: translateY(100%);
  pointer-events: none;
}

body.panel-bottom #extendedPanel:not(.hidden) {
  transform: translateY(0);
  pointer-events: auto;
}

.extendedPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  border-bottom: 1px solid var(--line);
}

.extendedPanelHead h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--txt);
}

.extendedPanelHead .sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--dim);
}

#closeExtended {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--txt);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#closeExtended:active {
  background: var(--panel3);
}

.extendedPanelBody {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.extSection {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.extSection h3 {
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dim);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.tripModeToggle {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}

.toggleContainer {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--txt);
  user-select: none;
}

.toggleContainer input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.detailedCosts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.costRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--dim);
}

.costRow strong {
  color: var(--txt);
}

.costDivider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.costRow.total {
  font-size: 15px;
  color: var(--txt);
}

.costRow.total strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(46, 123, 255, 0.2);
}

.clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.clickable:hover {
  background: var(--panel3);
  border-color: var(--accent);
}

.btn-select-dest {
  margin-top: 8px;
  width: 100%;
  min-height: 32px !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

/* Mobile trigger button for bottom sheet details */
.mobile-details-btn {
  display: none;
}

@media (max-width: 759px) {
  .mobile-details-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
  }
}

/* =========== FUEL CALCULATOR =========== */
.calcSection {
  margin-top: 16px;
  padding: 14px;
  background: var(--accent-dim);
  border: 1px solid rgba(46,123,255,.2);
  border-radius: 12px;
}
.calcSection h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}
.calcSection .row {
  margin-bottom: 8px;
}
.calcSection input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.calcGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.calcCell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}
.calcLabel {
  font-size: 11px;
  color: #8ea4b4;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.calcValue {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.waypointsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.waypointItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel3);
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.waypointItem .waypointName {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 8px;
}
.waypointItem .btnDeleteWaypoint {
  background: transparent;
  border: none;
  color: var(--red);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.waypointBubble {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}
.warn-msg {
  background: rgba(245, 158, 11, 0.15);
  border: 1px dashed var(--amber);
  color: #fbbf24;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.4;
}