:root{
  --sidebar-w: 60px;

  /* glassy panel (dark) */
  --panel-bg: rgba(15, 23, 42, 0.58);
  --panel-border: rgba(255,255,255,0.34);

  --text:#e5e7eb;
  --muted: rgba(229,231,235,0.75);

  --btn-bg:#2563eb;
  --btn-bg-hover:#1e40af;

  --bar-bg: rgba(255,255,255,0.10);
  --bar-fill:#22c55e;

  --radius:14px;

  /* footer */
  --bottom-bar-h: 28px;

  /* light glass */
  --glass-bg: rgba(255,255,255,0.30);
  --glass-bg-strong: rgba(255,255,255,0.42);
  --glass-border: rgba(15,23,42,0.14);
  --glass-highlight: rgba(255,255,255,0.55);

  /* “ink” colors on light glass */
  --ink: rgba(15,23,42,0.92);
  --ink-muted: rgba(15,23,42,0.60);
  --ink-faint: rgba(15,23,42,0.42);

  --accent-violet: rgba(139,92,246,0.95); /* violet-500 */
  --accent-violet-hover: rgba(124,58,237,1); /* violet-600 */
}

*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:#000;
  padding-bottom: var(--bottom-bar-h);
}

.app-shell{
  display:block;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

/* ===== Sidebar (LIGHT GLASS) ===== */
.sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom: var(--bottom-bar-h);
  width: var(--sidebar-w);

  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 8px;
  gap:10px;

  z-index:1300;
}

.sidebar-spacer{ flex:1; }

/* highlight sheen */
.sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.18) 35%,
      rgba(255,255,255,0.08) 70%
    ),
    radial-gradient(420px 240px at 45% 15%,
      rgba(255,255,255,0.40),
      rgba(255,255,255,0.00) 55%
    );
  opacity: 1;
}

/* top fade (keep light) */
.sidebar::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:40px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.22),
    rgba(255,255,255,0.00)
  );
  pointer-events:none;
}

/* keep icons above overlays */
.sidebar > *{ position:relative; z-index:1; }

/* ===== Icon buttons (DARK on light glass) ===== */
.icon-btn{
  width:44px;
  height:44px;
  border:none;
  border-radius:10px;
  background:transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  outline:none;
}

.icon-btn:hover{ background: rgba(15,23,42,0.06); }

.icon-btn:focus-visible{
  outline:2px solid rgba(37,99,235,0.55);
  outline-offset:2px;
}

.icon-btn svg{
  width:22px;
  height:22px;
  fill: var(--ink-muted);
}
.icon-btn:hover svg{ fill: var(--ink); }

/* ===== Map area (map goes UNDER sidebar) ===== */
.main{
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom: var(--bottom-bar-h);
}

.map{
  position:absolute;
  inset:0;
}

/* push Leaflet left controls away from sidebar */
.leaflet-left{ left: var(--sidebar-w) !important; }
/* keep Leaflet controls above the footer */
.leaflet-bottom{
bottom: var(--bottom-bar-h) !important;
}
/* ===== Floating panel (dark glass) ===== */
.panel{
  position:absolute;
  top:12px;
  left:12px;
  z-index: 600;

  width: min(340px, calc(100vw - var(--sidebar-w) - 24px));
  max-width: 340px;
  max-height: calc(100vh - 24px);

  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);

  backdrop-filter: blur(26px) saturate(160%) contrast(110%);
  -webkit-backdrop-filter: blur(26px) saturate(160%) contrast(110%);

  box-shadow:
    0 14px 44px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.08);

  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.08) 22%,
      rgba(255,255,255,0.02) 45%,
      rgba(255,255,255,0.00) 60%
    ),
    radial-gradient(
      1200px 500px at 15% -20%,
      rgba(255,255,255,0.35),
      rgba(255,255,255,0.08) 35%,
      rgba(255,255,255,0.00) 65%
    );
  mix-blend-mode: overlay;
  opacity: 0.85;
}

/* Header */
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  cursor:grab;
  user-select:none;
  touch-action:none;

  padding:10px 10px 10px 12px;
  border-bottom:1px solid rgba(255,255,255,0.08);

  position:relative;
  z-index:1;
}
.panel-header:active{ cursor:grabbing; }

.panel-title{
  display:flex;
  gap:8px;
  align-items:baseline;
}
.panel-title-strong{ font-weight:800; letter-spacing:0.2px; }
.panel-title-muted{ color: var(--muted); font-size:13px; }

.panel-toggle{
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  border-radius:10px;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.panel-toggle:hover{ background: rgba(255,255,255,0.10); }
.panel-toggle:focus-visible{
  outline:2px solid rgba(37,99,235,0.7);
  outline-offset:2px;
}
.panel-toggle svg{
  width:20px;
  height:20px;
  fill:#e5e7eb;
  transition: transform 180ms ease;
}

/* Body (this is what collapses) */
.panel-body{
  padding:12px;
  overflow:auto;
  transition: max-height 220ms ease, opacity 160ms ease, padding 220ms ease;
  max-height: 70vh;
  position:relative;
  z-index:1;
}

.panel.is-collapsed .panel-body{
  max-height:0;
  padding:0;
  opacity:0;
  overflow:hidden;
}
.panel.is-collapsed .panel-toggle svg{ transform: rotate(180deg); }

/* Hide/show whole panel (settings button) */
.panel.is-hidden{ display:none; }

/* Form layout */
.sim-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
  align-items:end;
}

.field{
  min-width:0;
  padding: 0 4px;
  display:grid;
  grid-template-rows:auto auto;
  gap:6px;
}

.field label{
  display:inline-block;
  font-size:12px;
  color: var(--muted);
  margin:0;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:help;
}

.field input{
  width:100%;
  min-width:0;

  padding: 9px 12px;
  font-size:14px;
  color: var(--text);
  font-variant-numeric: tabular-nums;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  outline:none;
}
.field input:focus{
  border-color: rgba(37,99,235,0.8);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.22);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  opacity:0.55;
}

.actions{ grid-column: 1 / -1; }

button#btn-sim{
  width:100%;
  padding:12px 14px;
  border:none;
  border-radius:12px;
  background: var(--btn-bg);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
button#btn-sim:hover{ background: var(--btn-bg-hover); }
button#btn-sim:disabled{ opacity:0.6; cursor:not-allowed; }

/* Progress bar */
.bar{
  height:10px;
  background: var(--bar-bg);
  border-radius:999px;
  overflow:hidden;
  margin-top:12px;
}
.bar > div{
  height:10px;
  width:0%;
  background: var(--bar-fill);
  transition: width 0.2s ease;
}

/* Download */
.muted{
  margin:10px 0 0 0;
  color: var(--muted);
  font-size:13px;
}
.muted a{ color:#93c5fd; text-decoration:none; }
.muted a:hover{ text-decoration:underline; }

/* Tooltip bubble */
.tip-bubble{
  position:fixed;
  z-index:2000;
  max-width: min(280px, 75vw);
  padding: 10px 10px;
  border-radius:12px;
  color: var(--text);

  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);

  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);

  font-size:12.5px;
  line-height:1.35;

  pointer-events:none;
  opacity:0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.tip-bubble.is-visible{ opacity:1; transform: translateY(0); }

.tip-arrow{
  position:absolute;
  width:10px;
  height:10px;
  background: rgba(15,23,42,0.55);
  border-left: 1px solid rgba(255,255,255,0.16);
  border-top: 1px solid rgba(255,255,255,0.16);
  transform: rotate(45deg);
}

/* Ensure no “(i)” marker ever */
.has-tip::after{ content:none !important; }

/* Bottom bar (FULL PAGE, fixed) */
.bottom-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height: var(--bottom-bar-h);
  padding: 0 12px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  color: rgba(229,231,235,0.65);

  background: rgba(11,15,20,0.72);
  border-top: 1px solid rgba(255,255,255,0.10);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  z-index: 1200; /* above map + controls */
}

.bottom-bar a{
  color: rgba(147,197,253,0.90);
  text-decoration:none;
  margin-left:4px;
}
.bottom-bar a:hover{
  text-decoration:underline;
  color:#93c5fd;
}

.bottom-bar > *{ position:relative; z-index:1; }

/* Responsive */
@media (max-width: 980px){
  .panel{
    left:10px;
    top:10px;
    width: calc(100vw - var(--sidebar-w) - 20px);
    max-width:360px;
  }
  .panel-body{ max-height:64vh; }
}

@media (max-width: 480px){
  :root{
    --bottom-bar-h: 26px;
    --sidebar-w: 44px;
    --panel-gap: 10px;
  }

  .panel{
    top: max(10px, env(safe-area-inset-top));
    left: calc(var(--sidebar-w) + var(--panel-gap));
    right: max(10px, env(safe-area-inset-right));
    width: auto;

    /* padarom ją “kortele”, ne per visą ekraną */
    max-width: 360px;
  }

  .leaflet-left{ left: var(--sidebar-w) !important; }
}