:root{
  --bg:#0b1220;
  --bg2:#0f1a2f;
  --text:#e8eefc;
  --muted:#b9c6e4;
  --card:rgba(10,16,30,0.55);
  --stroke:rgba(255,255,255,0.10);
  --accent:#7dd3fc;
  --shadow:0 14px 40px rgba(0,0,0,0.35);
}

.radar-wrap{ padding:14px; }

.radar-topbar{
  display:flex;
  gap:14px;
  align-items:stretch;
  justify-content:space-between;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:14px 14px;
}

.tb-left{ display:flex; gap:12px; align-items:flex-start; }
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(125,211,252,0.18);
  border:1px solid rgba(125,211,252,0.35);
  color:var(--text);
  font-weight:700;
  letter-spacing:0.3px;
  flex:0 0 auto;
}

.tb-head h1{ margin:0; font-size:18px; line-height:1.2; color:var(--text); }
.tb-head p{ margin:6px 0 0 0; color:var(--muted); font-size:13px; }

.tb-right{ display:flex; flex-direction:column; gap:10px; min-width:420px; }

.live{ display:flex; gap:8px; align-items:center; justify-content:flex-end; color:var(--muted); font-size:12px; }
.dot{ width:10px; height:10px; border-radius:50%; background:#64748b; box-shadow:0 0 0 4px rgba(100,116,139,0.15); }
.dot.ok{ background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,0.15); }
.dot.bad{ background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,0.15); }

.controls{ display:flex; gap:10px; align-items:center; justify-content:flex-end; }
.btn{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(15,26,47,0.6);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{ border-color:rgba(125,211,252,0.35); }

#timeSlider{ width:220px; }

.meta{ display:flex; flex-direction:column; gap:2px; min-width:160px; text-align:right; }
#timeLabel{ color:var(--text); font-size:12px; }
.muted, #sourceLabel{ color:var(--muted); font-size:11px; }

.toggles{ display:flex; gap:14px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.tg{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; }
.tg input{ transform:translateY(0.5px); }
.opabox{ display:flex; gap:10px; align-items:center; }
#tempOpacity{ width:140px; }

.radar-map{
  height: calc(100vh - 210px);
  min-height: 520px;
  margin-top:14px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

.legend{
  margin-top:12px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px 12px;
}
.leg-item{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px; }
.swatch{ width:14px; height:14px; border-radius:5px; border:1px solid var(--stroke); }
.swatch.rain{ background:rgb(25,120,255); }
.swatch.snow{ background:rgb(255,110,200); }
.swatch.temp{ background:linear-gradient(90deg, rgb(59,130,246), rgb(109,40,217), rgb(22,163,74), rgb(239,68,68)); }

/* Mobile */
@media (max-width: 980px){
  .radar-topbar{ flex-direction:column; }
  .tb-right{ min-width:unset; }
  .controls{ justify-content:space-between; }
  #timeSlider{ flex:1; }
  .meta{ min-width:unset; text-align:left; }
  .live{ justify-content:flex-start; }
}


/* --- Layout: mapa + prawa legenda --- */
.radar-body{
  display:flex;
  gap:14px;
  align-items:stretch;
  margin-top:14px;
}

.radar-mapwrap{
  flex: 1 1 auto;
  min-width: 0;
}

.radar-map{
  height: 72vh;
  min-height: 520px;
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

/* Prawy panel */
.radar-side{
  width: 330px;
  flex: 0 0 330px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.side-card{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  box-shadow: var(--shadow);
}

.side-card h3{
  margin:0 0 10px 0;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--text);
}

.leg-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  color: var(--text);
  font-size: 13px;
}

.leg-note{
  margin: 8px 0 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.20);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.swatch.rain{ background:#2563eb; }   /* niebieski */
.swatch.snow{ background:#ff4fa3; }   /* różowy */
.swatch.risk1{ background:#ca8a04; }
.swatch.risk2{ background:#ea580c; }
.swatch.risk3{ background:#b91c1c; }

/* Skala temperatur (styl jak w serwisach meteo) */
.tempbar{
  height: 14px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
  background: linear-gradient(90deg,
    #3b82f6 0%,
    #1d4ed8 18%,
    #7c3aed 34%,
    #22c55e 52%,
    #eab308 70%,
    #f97316 84%,
    #ef4444 100%
  );
}
.temp-labels{
  display:flex;
  justify-content:space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
  user-select:none;
}

/* Responsywność: na małych ekranach legenda pod mapą */
@media (max-width: 980px){
  .radar-body{ flex-direction: column; }
  .radar-side{ width:100%; flex: 0 0 auto; }
  .radar-map{ height: 62vh; min-height: 420px; }
}

/* =========================
   Mobile responsiveness
   ========================= */
@media (max-width: 980px){
  .radar-topbar{ flex-wrap: wrap; }
  .tb-left{ min-width: 0; }
  .tb-right{ width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .controls{ flex-wrap: wrap; }
  .radar-map{ height: 62vh; min-height: 420px; }
}
@media (max-width: 560px){
  .radar-wrap{ padding: 12px; }
  .tb-head h1{ font-size: 24px; }
  .radar-map{ height: 58vh; min-height: 380px; border-radius: 16px; }
  .legend{ gap: 10px; }
}



/* Chmury (zachmurzenie) */
.swatch.clouds{ background: linear-gradient(90deg, #111827 0%, #6b7280 45%, #e5e7eb 100%); }
#cloudsOpacity{ width:140px; }

/* RainViewer satellite tiles -> skala szarości (profesjonalne, neutralne chmury) */
.rv-clouds img{
  filter: grayscale(1) contrast(2.4) brightness(0.35);
  mix-blend-mode: multiply;
}

/* --- Ryzyko burz (PRO) --- */
.risk-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px}
.risk-legend .rrow{display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--stroke); border-radius:12px; background:rgba(0,0,0,0.18)}
.risk-legend .dot{width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.35); box-shadow:0 0 8px rgba(0,0,0,.25)}
.risk-legend .r1{background:#ca8a04}
.risk-legend .r2{background:#ea580c}
.risk-legend .r3{background:#b91c1c}
.small{font-size:12px}


/* Popup: ryzyko burz */
.risk-popup{line-height:1.25}
.risk-popup b{font-weight:800}
.risk-title{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.risk-title-text{flex:1;min-width:0}
.risk-dot{width:10px;height:10px;border-radius:999px;box-shadow:0 0 0 2px rgba(0,0,0,.22), 0 0 14px rgba(0,0,0,.25)}
.risk-pill{font-size:12px;font-weight:800;letter-spacing:.2px;padding:4px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.25);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.risk-pill.risk1{background:rgba(202,138,4,.18);color:#fff}
.risk-pill.risk2{background:rgba(234,88,12,.18);color:#fff}
.risk-pill.risk3{background:rgba(185,28,28,.18);color:#fff}
.risk-dot.risk1{background:#ca8a04}
.risk-dot.risk2{background:#ea580c}
.risk-dot.risk3{background:#b91c1c}
.risk-desc{margin:0 0 10px 0;opacity:.95}
.risk-metrics{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px;margin:10px 0 8px 0}
.risk-metric{background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.risk-metric span{font-size:12px;opacity:.8}
.risk-metric b{font-size:14px}
.risk-metric em{font-style:normal;font-size:11px;opacity:.7}
.risk-footnote{margin-top:8px;font-size:12px;opacity:.78}

/* === Convective risk popup (NOAA-like, PRO) === */
.risk-leaflet-popup .leaflet-popup-content{margin:10px 12px}
.risk-leaflet-popup .leaflet-popup-content-wrapper{border-radius:16px;box-shadow:0 20px 50px rgba(2,6,23,.25);background:#ffffff}
.risk-leaflet-popup .leaflet-popup-tip{box-shadow:0 20px 50px rgba(2,6,23,.18)}

.risk-pop{min-width:320px;max-width:440px;color:#0b1220}
.risk-pop__bar{height:6px;border-radius:10px;margin-bottom:10px;background:#334155}
.risk-pop__bar.risk1{background:#b45309}
.risk-pop__bar.risk2{background:#c2410c}
.risk-pop__bar.risk3{background:#991b1b}

.risk-pop__head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.risk-pop__icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.06);font-size:18px}
.risk-pop__titles{line-height:1.1}
.risk-pop__title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#0f172a}
.risk-pop__subtitle{font-size:18px;font-weight:900;color:#0b1220}
.risk-pop__badge{margin-left:auto;font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(2,6,23,.12);background:rgba(2,6,23,.04)}
.risk-pop__badge.risk1{background:rgba(180,83,9,.12);border-color:rgba(180,83,9,.25)}
.risk-pop__badge.risk2{background:rgba(194,65,12,.12);border-color:rgba(194,65,12,.25)}
.risk-pop__badge.risk3{background:rgba(153,27,27,.12);border-color:rgba(153,27,27,.25)}

.risk-pop__desc{color:#0f172a;margin:8px 0 10px;font-size:14px;line-height:1.35}
.risk-pop__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 12px}
.risk-card{background:rgba(2,6,23,.03);border:1px solid rgba(2,6,23,.10);border-radius:12px;padding:10px}
.risk-card__k{font-size:12px;color:#0f172a;font-weight:800}
.risk-card__v{font-size:22px;font-weight:1000;line-height:1.1;color:#0b1220}
.risk-card__u{font-size:12px;color:#334155;line-height:1.25;margin-top:4px}

.risk-pop__advice{border-top:1px solid rgba(2,6,23,.08);padding-top:10px;margin-top:6px}
.risk-pop__adviceTitle{font-weight:1000;margin-bottom:6px;color:#0b1220}
.risk-pop__adviceList{margin:0;padding-left:18px}
.risk-pop__adviceList li{margin:4px 0}
.risk-pop__foot{margin-top:10px;font-size:12px;color:#334155;line-height:1.35}

/* better readability in dark UI contexts */
.risk-leaflet-popup .leaflet-popup-close-button{color:#0f172a !important}
.risk-leaflet-popup .leaflet-popup-content-wrapper,
.risk-leaflet-popup .leaflet-popup-tip{
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.28));
}

@media (max-width: 520px){
  .risk-pop{min-width:280px;max-width:92vw}
  .risk-pop__grid{grid-template-columns:1fr;gap:8px}
}

/* Blok pomocy w legendzie ryzyka burz */
.risk-help{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.06)}
.risk-help__title{font-weight:800;margin-bottom:6px}
.risk-help__list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.risk-help__list li{opacity:.92}
.risk-help__note{margin-top:8px;font-size:12px;opacity:.75}


/* Legenda chmur (skala szarości) */
.legend-cloudbar{height:10px;border-radius:999px;background:linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.55));box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;margin-top:8px}
.legend-tempbar{height:10px;border-radius:999px;overflow:hidden}


/* --- FIX: sidebar scroll on desktop (legend always visible) --- */
@media (min-width: 992px){
  .radar-side{
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
  }
  .radar-side::-webkit-scrollbar{ width: 10px; }
  .radar-side::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.14);
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,.0);
    background-clip: padding-box;
  }
  .radar-side::-webkit-scrollbar-track{ background: transparent; }
}


/* --- Ryzyko burz: skala w popupie (PRO) --- */
.risk-pop__scale{display:flex;align-items:center;gap:10px;margin:6px 0 10px 0}
.risk-pop__scaleTitle{font-size:12px;font-weight:700;color:#111;opacity:.85}
.risk-pop__scaleBar{display:flex;align-items:center;border-radius:999px;overflow:hidden;border:1px solid rgba(0,0,0,.12);background:#f5f6f8}
.risk-pop__seg{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;font-size:12px;font-weight:800;color:rgba(0,0,0,.55);min-width:72px}
.risk-pop__seg.on{color:#111;box-shadow:inset 0 0 0 999px rgba(255,255,255,.25)}
.risk-pop__seg.lvl1{background:rgba(245,158,11,.30)}
.risk-pop__seg.lvl2{background:rgba(249,115,22,.32)}
.risk-pop__seg.lvl3{background:rgba(239,68,68,.32)}