/* /static/ostrzezenia/css/ostrzezenia.css */
/* Zmiany: granice (stroke) żółte, wypełnienia wg stopnia; overlay "Poczekaj..." */

.leaflet-overlay-pane path{stroke-linejoin:round}

/* Layout */
.ost-layout{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:stretch}
.ost-mapwrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 60px rgba(0,0,0,.35);min-height:520px}
#ost-map.ost-map{width:100%;height:100%;min-height:520px}
.ost-sidebar{position:sticky;top:86px;align-self:start;background:rgba(10,12,18,.55);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:14px;backdrop-filter:blur(10px)}
.ost-h1{margin:4px 0 8px;font-size:18px}
.ost-topbar{display:flex;gap:10px;align-items:center;margin:12px 0 10px}
.ost-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:rgba(245,248,255,.92);padding:10px 12px;border-radius:12px;cursor:pointer}
.ost-btn:hover{background:rgba(255,255,255,.10)}
.ost-headline{font-size:12px;color:rgba(245,248,255,.70);line-height:1.2}

/* ✅ Overlay: "Poczekaj na załadowanie mapy" */
.ost-loading{
  position:absolute;inset:0;
  display:none;place-items:center;
  background:linear-gradient(180deg, rgba(10,12,18,.55), rgba(10,12,18,.25));
  z-index:900;
  pointer-events:none;
}
.ost-loading-card{
  pointer-events:none;
  background:rgba(15,18,26,.88);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 18px 55px rgba(0,0,0,.50);
  backdrop-filter:blur(10px);
  text-align:center;
  max-width:320px;
}
.ost-loading-title{font-weight:900;font-size:14px;letter-spacing:.2px;color:rgba(245,248,255,.95)}
.ost-loading-sub{margin-top:6px;font-size:12px;color:rgba(245,248,255,.72)}

/* Legend */
.ost-legend{margin-top:10px;border-top:1px solid rgba(255,255,255,.10);padding-top:10px}
.lg-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.lg-swatch{width:12px;height:12px;border-radius:6px;margin-top:4px;border:1px solid rgba(250,204,21,.95);box-shadow:0 8px 20px rgba(0,0,0,.25)} /* ✅ border żółty */
.lg-swatch.lvl0{background:rgba(0, 210, 105, .95)}   /* ✅ zielony */
.lg-swatch.lvl1{background:rgba(250,204,21,.95)}     /* ✅ żółty */
.lg-swatch.lvl2{background:rgba(245,158,11,.95)}     /* ✅ pomarańcz */
.lg-swatch.lvl3{background:rgba(220,38,38,.95)}      /* ✅ czerwony */

/* Details */
.ost-details{margin-top:10px}
.ost-list{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.ost-card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);border-radius:16px;padding:12px}
.ost-card-h{display:flex;align-items:center;gap:10px;font-weight:800}
.ost-pill{width:34px;height:34px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#111;font-weight:900;border:1px solid rgba(255,255,255,.20)}
.ost-sub{margin-top:6px;color:rgba(245,248,255,.75);font-size:12px;line-height:1.35}

/* Labels */
.voiv-label-wrap{pointer-events:none}
.voiv-label{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);color:rgba(245,248,255,.92);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Popup */
.ost-popup .leaflet-popup-content-wrapper{background:rgba(15,18,26,.92);color:rgba(245,248,255,.92);border-radius:16px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 45px rgba(0,0,0,.45)}
.ost-popup .leaflet-popup-tip{background:rgba(15,18,26,.92)}
.leaflet-popup-content{margin:10px 12px}
.ost-pop{min-width:240px;max-width:340px}
.ost-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.ost-pop-lvl{font-size:12px;opacity:.9}
.ost-pop-when{margin-top:6px;font-size:12px;color:rgba(245,248,255,.70)}
.ost-pop-none{margin-top:10px;font-size:12px;opacity:.85}
.ost-pop-item{display:flex;gap:10px;margin-top:10px}
.ost-pop-badge{width:26px;height:26px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#111;font-weight:900;font-size:12px;border:1px solid rgba(250,204,21,.95);flex:0 0 auto} /* ✅ border żółty */
.ost-pop-item .t{font-weight:900;font-size:12.5px}
.ost-pop-item .d{font-size:12px;color:rgba(245,248,255,.70);line-height:1.35;margin-top:2px}

@media (max-width:980px){
  .ost-layout{grid-template-columns:1fr}
  .ost-sidebar{position:static;top:auto}
  .ost-mapwrap{min-height:420px}
  #ost-map.ost-map{min-height:420px}
}

/* ✅ badge colors */
.ost-pop-badge.lvl0{background:rgba(0, 210, 105, .95)}
.ost-pop-badge.lvl1{background:rgba(250,204,21,.95)}
.ost-pop-badge.lvl2{background:rgba(245,158,11,.95)}
.ost-pop-badge.lvl3{background:rgba(220,38,38,.95)}