:root{
  --bg:#f7f3ee; --surface:#fffdfa; --ink:#241514; --ink-soft:#6b5957;
  --primary:#8c1c1c; --primary-dark:#5e1010; --accent:#dda52b; --accent-dark:#a97914;
  --line:#ecdfd7; --sev-new:#dda52b; --sev-progress:#3a72c9; --sev-resolved:#4a8f5c;
  --shadow-strong:0 18px 46px -10px rgba(60,20,15,0.30); --radius-lg:20px; --radius-md:14px; --radius-full:999px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; font-family:'Work Sans', sans-serif; color:var(--ink); }
#mapCanvas{ position:fixed; inset:0; z-index:1; background:var(--bg); }

.map-back{
  position:fixed; top:16px; left:16px; z-index:600; background:var(--surface); color:var(--primary-dark);
  text-decoration:none; font-weight:700; font-size:12.5px; padding:10px 16px; border-radius:var(--radius-full);
  box-shadow:var(--shadow-strong); border:1px solid var(--line);
}

/* ============ RIGHT-SIDE FLOATING PANEL — 30% of viewport width ============ */
.map-panel{
  position:fixed; top:0; right:0; height:100%; width:30%; min-width:300px; max-width:420px;
  z-index:500; display:flex; flex-direction:column; pointer-events:none;
}
.map-panel__inner{
  pointer-events:auto; margin:16px 16px 16px 0; background:rgba(255,253,250,0.96); backdrop-filter:blur(6px);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-strong); border:1px solid var(--line);
  padding:20px; height:calc(100% - 32px); overflow-y:auto;
}
.map-panel__head{ margin-bottom:16px; }
.map-panel__brand{ font-family:'Fraunces', serif; font-weight:600; font-size:16px; color:var(--primary-dark); display:flex; align-items:center; gap:8px; }
.map-panel__brand .mark{ width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.map-panel__count{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
.map-panel__section{ margin-bottom:20px; }
.map-panel__label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:10px; }

.map-status-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.mftab{ font-size:12px; font-weight:600; padding:8px 13px; border-radius:var(--radius-full); background:var(--bg); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; }
.mftab.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

.map-city-list{ display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
.mcity{ font-size:13px; padding:9px 12px; border-radius:var(--radius-md); cursor:pointer; color:var(--ink); display:flex; justify-content:space-between; }
.mcity:hover{ background:var(--bg); }
.mcity.active{ background:var(--primary); color:#fff; font-weight:700; }
.mcity .n{ opacity:.7; font-size:11px; }

.legend-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.legend-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.legend-dot.new{ background:var(--sev-new); }
.legend-dot.progress{ background:var(--sev-progress); }
.legend-dot.resolved{ background:var(--sev-resolved); }

.map-panel__toggle{ display:none; }

@media (max-width:820px){
  .map-panel{ width:100%; max-width:none; height:auto; bottom:0; top:auto; }
  .map-panel__inner{ margin:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; height:auto; max-height:60vh; display:none; }
  .map-panel.open .map-panel__inner{ display:block; }
  .map-panel__toggle{
    display:flex; pointer-events:auto; position:absolute; bottom:16px; right:16px; width:52px; height:52px;
    border-radius:50%; background:var(--primary); color:#fff; border:none; font-size:20px; align-items:center; justify-content:center;
    box-shadow:var(--shadow-strong); cursor:pointer;
  }
}

/* ============ LEAFLET MARKER + POPUP THEMING ============ */
.ooto-pin{ width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,0.3); border:2px solid #fff; }
.ooto-pin span{ transform:rotate(45deg); font-size:12px; }
.ooto-pin.new{ background:var(--sev-new); }
.ooto-pin.progress{ background:var(--sev-progress); }
.ooto-pin.resolved{ background:var(--sev-resolved); }

.leaflet-popup-content-wrapper{ border-radius:var(--radius-md); }
.popup-card{ width:230px; font-family:'Work Sans', sans-serif; }
.popup-card__title{ font-weight:700; font-size:13.5px; margin-bottom:4px; }
.popup-card__loc{ font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; }
.popup-card__media{ display:flex; gap:6px; margin-bottom:8px; }
.popup-card__media > div{ flex:1; aspect-ratio:1; border-radius:8px; overflow:hidden; background:var(--bg); position:relative; }
.popup-card__media img, .popup-card__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.popup-card__media span{ position:absolute; bottom:3px; left:3px; background:rgba(20,10,8,0.65); color:#fff; font-size:8.5px; font-weight:700; padding:1px 5px; border-radius:99px; text-transform:uppercase; }
.popup-card__status{ display:inline-block; font-size:10px; font-weight:700; padding:3px 9px; border-radius:99px; margin-bottom:6px; }
.popup-card__status.new{ background:#fdf1d6; color:var(--accent-dark); }
.popup-card__status.progress{ background:#e7ecf7; color:var(--sev-progress); }
.popup-card__status.resolved{ background:#e7f3ea; color:var(--sev-resolved); }
.popup-card__desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }