:root{
  --bg:#0A0F1C;
  --panel:#121A2C;
  --panel-2:#0E1526;
  --border:#1E2A45;
  --border-soft:#182238;
  --accent:#FF6B35;
  --accent-dim:#3A2416;
  --teal:#2DD4BF;
  --red:#EF4444;
  --red-dim:#3A1616;
  --amber:#F5A623;
  --amber-dim:#3A2E12;
  --green:#22C55E;
  --green-dim:#132A1C;
  --text:#E8EDF7;
  --text-mid:#AAB4CC;
  --text-muted:#6E7A97;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden;}
body{
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,107,53,0.08), transparent),
    radial-gradient(ellipse 700px 500px at 90% 10%, rgba(45,212,191,0.06), transparent),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  padding:22px;
}
body.page-hero{padding-top:0;}
a{color:inherit;}
.mono{font-family:'JetBrains Mono',monospace;}
.display{font-family:'Space Grotesk',sans-serif;}
.shell{max-width:1360px; margin:0 auto;}

/* ===== TOPBAR ===== */
.topbar{display:flex; align-items:center; justify-content:space-between; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px 22px; margin-bottom:16px; flex-wrap:wrap; gap:12px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.brand-mark-img{width:100%; height:100%; object-fit:contain;}
.brand-text .name{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; letter-spacing:0.5px;}
.brand-text .sub{font-size:10.5px; color:var(--text-muted); letter-spacing:0.6px; text-transform:uppercase; margin-top:1px;}
.searchbar{flex:1; max-width:380px; margin:0 28px; display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:10px; padding:9px 14px; color:var(--text-muted); font-size:13px;}
.searchbar input{background:none; border:none; outline:none; color:var(--text); font-size:13px; width:100%; font-family:'Inter',sans-serif;}
.searchbar svg{width:15px; height:15px; opacity:0.7; flex-shrink:0;}
.top-right{display:flex; align-items:center; gap:18px;}
.bell-wrap{position:relative; color:var(--text-mid); cursor:pointer;}
.bell-wrap svg{width:19px; height:19px;}
.bell-dot{position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--panel);}
.user{display:flex; align-items:center; gap:10px; text-decoration:none;}
.avatar{width:36px; height:36px; border-radius:9px; background:linear-gradient(145deg,#2A3856,#1A2439); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--teal);}
.user-text .uname{font-size:13px; font-weight:600;}
.user-text .urole{font-size:10.5px; color:var(--text-muted);}
.logout-link{font-size:11px; color:var(--text-muted); text-decoration:underline; margin-left:6px;}

.nav-tabs{display:flex; gap:6px; margin-top:16px; margin-bottom:16px; flex-wrap:wrap;}
.nav-tabs a{padding:9px 16px; border-radius:9px; font-size:12.5px; font-weight:600; text-decoration:none; color:var(--text-mid); background:var(--panel); border:1px solid var(--border);}
.nav-tabs a.active{color:var(--accent); border-color:var(--accent-dim); background:var(--accent-dim);}

/* ===== STAT CARDS ===== */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px;}
.stat-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 18px;}
.stat-head{display:flex; align-items:center; gap:8px; color:var(--text-mid); font-size:12.5px; margin-bottom:12px;}
.stat-head .ic{width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.stat-head .ic svg{width:14px; height:14px;}
.ic-blue{background:rgba(45,212,191,0.12); color:var(--teal);}
.ic-red{background:var(--red-dim); color:var(--red);}
.ic-amber{background:var(--amber-dim); color:var(--amber);}
.ic-green{background:var(--green-dim); color:var(--green);}
.stat-row{display:flex; align-items:baseline; gap:8px;}
.stat-num{font-family:'Space Grotesk',sans-serif; font-size:27px; font-weight:700;}
.stat-delta{font-size:12px; font-weight:600;}
.up{color:var(--red);} .down{color:var(--green);} .flat{color:var(--amber);}
.stat-foot{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.stat-foot span{font-size:10.5px; color:var(--text-muted);}

/* ===== MAIN GRID ===== */
.main-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin-bottom:16px;}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden;}
.panel-pad{padding:18px;}

/* ===== HERO MAP (dashboard only): map fills edge-to-edge from the very
   top of the viewport; topbar/nav/stat cards float as overlays on top ===== */
.hero-map-wrap{
  position:relative;
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  min-height:720px;
  overflow:hidden;
  background:#0D1424;
}
.hero-gmap{position:absolute; inset:0; z-index:0;}
.hero-inner{position:relative; z-index:2; max-width:1360px; margin:0 auto; padding:22px 22px 0;}
.hero-title-block{background:rgba(15,21,38,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border-soft); border-radius:12px; padding:14px;}

.hero-map-wrap .topbar{background:rgba(15,21,38,0.68); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);}
.hero-map-wrap .nav-tabs{margin-bottom:10px;}
.hero-map-wrap .nav-tabs a{background:rgba(15,21,38,0.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.hero-map-wrap .nav-tabs a.active{background:rgba(58,36,22,0.78);}

.hero-stats-row{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:16px;}
.hero-stats-row-4{grid-template-columns:repeat(4,1fr); margin-top:8px;}
.hero-stats-row-5{grid-template-columns:1.3fr repeat(4,1fr); margin-top:8px;}
.hero-title-card{justify-content:center;}
.hud-card{background:rgba(10,15,28,0.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border-soft); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column;}
.hud-head{display:flex; align-items:flex-start; gap:7px; color:var(--text-mid); font-size:11px; margin-bottom:8px; min-height:30px; line-height:1.35;}
.hud-head .ic{flex-shrink:0; margin-top:1px;}
.hud-head .ic{width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.hud-head .ic svg{width:12px; height:12px;}
.hud-row{display:flex; align-items:baseline; gap:6px;}
.hud-num{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700;}
.hud-delta{font-size:10.5px; font-weight:600;}

.map-legend{position:absolute; bottom:34px; left:14px; z-index:5; display:flex; flex-wrap:wrap; max-width:calc(100% - 28px); background:rgba(10,15,28,0.88); border:1px solid var(--border-soft); padding:9px 16px; border-radius:9px; font-size:10.5px; color:var(--text-mid);}
.map-legend .li{display:flex; align-items:center; white-space:nowrap; margin-right:18px; margin-bottom:4px;}
.map-legend-toggle{background:rgba(255,255,255,0.06); border:1px solid var(--border-soft); border-radius:6px; padding:3px 10px 3px 8px; color:var(--text-mid); font:inherit; font-size:10.5px; cursor:pointer;}
.map-legend-toggle:hover{background:rgba(255,255,255,0.12); color:#fff;}
.map-legend-toggle .dot{margin-right:6px;}
.map-legend .li:last-child{margin-right:0;}
.map-legend .li .dot{margin-right:7px;}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block;}

/* ===== EMERGENCY MARKER (citizen report, pending) — highlight + blink ===== */
.edris-emergency-marker{position:absolute; width:0; height:0; transform:translate(-50%,-50%); z-index:20; cursor:pointer;}
.edris-emergency-pulse{
  position:absolute; top:-22px; left:-22px; width:44px; height:44px;
  border-radius:50%; background:rgba(168,85,247,0.55);
  animation:edris-pulse-ring 1.8s cubic-bezier(0.2,0.6,0.4,1) infinite;
  pointer-events:none;
}
.edris-emergency-pulse.edris-pulse-delay{animation-delay:0.9s;}
.edris-emergency-ring{
  position:absolute; top:-13px; left:-13px; width:26px; height:26px;
  border-radius:50%; border:2px solid #a855f7;
  animation:edris-blink 1s ease-in-out infinite;
  pointer-events:none;
}
.edris-emergency-dot{
  position:absolute; top:-8px; left:-8px; width:16px; height:16px;
  border-radius:50%; background:#a855f7; border:2px solid #fff;
  box-shadow:0 0 8px rgba(168,85,247,0.95);
  animation:edris-blink 1s ease-in-out infinite;
}
@keyframes edris-pulse-ring{
  0%{transform:scale(0.35); opacity:0.85;}
  100%{transform:scale(1.9); opacity:0;}
}
@keyframes edris-blink{
  0%,100%{opacity:1;}
  50%{opacity:0.25;}
}

@media (max-width:980px){
  .hero-map-wrap{min-height:900px;}
  .hero-stats-row{grid-template-columns:repeat(2,1fr);}
}

/* ===== SIREN BANNER (site-wide real-time emergency alert) ===== */
.edris-siren-banner{
  position:fixed; top:-80px; left:50%; transform:translateX(-50%);
  z-index:9999; display:flex; align-items:center; gap:14px;
  background:linear-gradient(90deg,#B91C1C,#EF4444);
  color:#fff; padding:12px 18px; border-radius:0 0 12px 12px;
  box-shadow:0 8px 30px rgba(239,68,68,0.45);
  max-width:min(680px,92vw); font-size:13.5px;
  transition:top 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.edris-siren-banner.show{top:0;}
.edris-siren-icon{font-size:20px; animation:edris-siren-shake 0.6s ease-in-out infinite;}
.edris-siren-text{flex:1; line-height:1.4;}
.edris-siren-btn{
  background:#fff; color:#B91C1C; font-weight:700; font-size:12px;
  padding:7px 12px; border-radius:8px; white-space:nowrap; text-decoration:none;
}
.edris-siren-close{
  background:transparent; border:none; color:#fff; font-size:20px; line-height:1;
  cursor:pointer; padding:0 2px; opacity:0.85;
}
.edris-siren-close:hover{opacity:1;}
@keyframes edris-siren-shake{
  0%,100%{transform:rotate(0deg);}
  25%{transform:rotate(-12deg);}
  75%{transform:rotate(12deg);}
}

.bell-wrap.edris-bell-ringing{color:var(--red); animation:edris-siren-shake 0.5s ease-in-out infinite;}
.bell-wrap.edris-bell-ringing .bell-dot{animation:edris-blink 0.5s ease-in-out infinite;}

.edris-bell-dropdown{width:290px; max-height:360px; overflow-y:auto; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.45); z-index:9999; cursor:default;}
.edris-bell-dropdown-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; color:var(--text-mid); padding:12px 14px 8px;}
.edris-bell-dropdown-loading,.edris-bell-dropdown-empty{padding:20px 14px; text-align:center; font-size:12.5px; color:var(--text-muted);}
.edris-bell-item{display:flex; gap:10px; padding:9px 14px; border-top:1px solid var(--border-soft);}
.edris-bell-item-icon{font-size:16px; flex-shrink:0; line-height:1.4;}
.edris-bell-item-cat{font-size:12.5px; font-weight:600; color:#fff;}
.edris-bell-item-meta{font-size:11px; color:var(--text-muted); margin-top:2px;}
.edris-bell-dropdown-viewall{display:block; text-align:center; padding:11px; font-size:12px; font-weight:600; color:var(--teal); border-top:1px solid var(--border-soft); text-decoration:none;}
.edris-bell-dropdown-viewall:hover{background:var(--panel-2);}

.shipment-panel{padding:16px 18px 4px;}
.panel-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.panel-title .tag{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--accent); background:var(--accent-dim); padding:2px 7px; border-radius:5px; letter-spacing:0.5px;}
table{width:100%; border-collapse:collapse; font-size:12.5px;}
thead th{text-align:left; color:var(--text-muted); font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:0.5px; padding:8px 6px; border-bottom:1px solid var(--border-soft);}
tbody td{padding:11px 6px; border-bottom:1px solid var(--border-soft); color:var(--text-mid);}
tbody tr:last-child td{border-bottom:none;}
td.mono-id{font-family:'JetBrains Mono',monospace; color:var(--text);}
.badge{padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:600; display:inline-block; border:none; cursor:default;}
.b-transit{background:rgba(45,212,191,0.12); color:var(--teal);}
.b-resolved{background:var(--green-dim); color:var(--green);}
.b-critical{background:var(--red-dim); color:var(--red);}
.b-monitor{background:var(--amber-dim); color:var(--amber);}

.right-col{display:flex; flex-direction:column; gap:16px;}

.weather-card .panel-pad{padding:16px 18px;}
.weather-main{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.weather-icon{color:var(--amber); flex-shrink:0;}
.weather-temp{font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; line-height:1;}
.weather-desc{font-size:12px; color:var(--text-mid); margin-top:2px;}
.weather-meta{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--border-soft);}
.weather-meta div{background:var(--panel-2); border-radius:9px; padding:8px 10px; text-align:center;}
.weather-meta span{display:block; font-size:10px; color:var(--text-muted); margin-bottom:3px;}
.weather-meta b{font-size:13px; color:var(--text);}
.weather-forecast{display:flex; justify-content:space-between; gap:6px;}
.wf-day{flex:1; text-align:center; background:var(--panel-2); border-radius:9px; padding:8px 4px;}
.wf-label{font-size:10.5px; color:var(--text-muted); margin-bottom:4px; text-transform:uppercase;}
.wf-icon{color:var(--teal); display:flex; justify-content:center; margin-bottom:4px;}
.wf-temp{font-size:11px; color:var(--text-mid);}

.hazard-card .panel-pad{padding:16px 18px;}
.hazard-section{margin-bottom:4px;}
.hazard-divider{height:1px; background:var(--border-soft); margin:14px 0;}
.hazard-sub-head{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text-mid); margin-bottom:8px; gap:8px;}
.hazard-sub-head .dim{color:var(--text-muted); font-size:10.5px; font-weight:400;}
.hazard-flood-values{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--text); margin-bottom:8px;}
.hazard-flood-values .dim{color:var(--text-muted); font-size:11px;}
.hazard-link{display:inline-block; font-size:11px; color:var(--teal); text-decoration:underline; margin-top:4px;}
.quake-row{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--border-soft);}
.quake-row:last-of-type{border-bottom:none;}
.quake-mag{font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600; padding:3px 7px; border-radius:6px; flex-shrink:0; min-width:38px; text-align:center;}
.quake-low{background:var(--green-dim); color:var(--green);}
.quake-mid{background:var(--amber-dim); color:var(--amber);}
.quake-high{background:var(--red-dim); color:var(--red);}
.quake-info{min-width:0;}
.quake-place{font-size:12px; color:var(--text-mid); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.quake-time{font-size:10.5px; color:var(--text-muted);}
.unit-photo{height:140px; margin:14px 14px 0; border-radius:11px; position:relative; overflow:hidden; background:linear-gradient(150deg,#1C2A44,#0E1526); display:flex; align-items:center; justify-content:center;}
.unit-photo svg{width:90px; height:90px; opacity:0.9;}
.unit-body{padding:14px 18px 18px; text-align:center;}
.unit-body h3{font-family:'Space Grotesk',sans-serif; font-size:15.5px; margin-bottom:12px;}
.unit-meta{text-align:left; font-size:12px; display:grid; row-gap:7px;}
.unit-meta div{display:flex; justify-content:space-between; color:var(--text-mid); gap:10px;}
.unit-meta b{color:var(--text); font-weight:600; text-align:right;}

.route-card .panel-pad{padding:16px 18px;}
.route-track{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:11px; color:var(--text-mid);}
.track-bar{height:6px; border-radius:6px; background:var(--border-soft); position:relative; overflow:hidden; margin-bottom:10px;}
.track-fill{position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:repeating-linear-gradient(90deg,var(--teal) 0 6px, transparent 6px 10px);}
.track-dot{position:absolute; top:50%; width:12px; height:12px; border-radius:50%; background:var(--amber); border:2px solid var(--panel); transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(245,166,35,0.25);}
.route-times{display:flex; justify-content:space-between; font-size:11.5px;}
.route-times div{text-align:center;}
.route-times b{display:block; font-size:12.5px; margin-top:2px;}
.route-empty{text-align:center; color:var(--text-muted); font-size:12.5px; padding:20px 0;}

.alert-card .panel-pad{padding:16px 18px;}
.alert-row{display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:10px; font-size:11.5px; align-items:start; margin-bottom:10px;}
.alert-row:last-child{margin-bottom:0;}
.alert-row .lab{color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px;}
.alert-row .val{color:var(--text);}
.alert-row .val.critical{color:var(--red); font-weight:600;}
.alert-row .val.link{color:var(--teal); text-decoration:underline; cursor:pointer;}
.alert-empty{color:var(--text-muted); font-size:12.5px;}


/* ===== FORMS (login, add-incident, etc.) ===== */
.form-panel{max-width:420px; margin:80px auto; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:32px;}
.form-panel h2{font-family:'Space Grotesk',sans-serif; margin-bottom:4px; font-size:19px;}
.login-logo{display:block; width:100%; max-width:280px; margin:0 auto 18px; height:auto;}
.form-panel p.sub{color:var(--text-muted); font-size:12.5px; margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; color:var(--text-mid); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:9px;
  padding:10px 12px; color:var(--text); font-size:13.5px; font-family:'Inter',sans-serif; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:#fff; border:none; border-radius:9px; padding:11px 18px;
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif;
}
.btn:hover{background:#E35B28;}
.btn-secondary{background:var(--panel-2); color:var(--text-mid); border:1px solid var(--border-soft);}
.btn-full{width:100%;}
.error-msg{background:var(--red-dim); color:var(--red); border:1px solid rgba(239,68,68,0.3); border-radius:9px; padding:10px 14px; font-size:12.5px; margin-bottom:16px;}
.success-msg{background:var(--green-dim); color:var(--green); border:1px solid rgba(34,197,94,0.3); border-radius:9px; padding:10px 14px; font-size:12.5px; margin-bottom:16px;}

.modal-overlay{position:fixed; inset:0; background:rgba(6,9,16,0.7); display:none; align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px; width:100%; max-width:460px; max-height:90vh; overflow-y:auto;}
.modal-box h3{font-family:'Space Grotesk',sans-serif; font-size:16px; margin-bottom:16px;}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px;}

@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .main-grid{grid-template-columns:1fr;}
  .searchbar{display:none;}
}

/* ---- Citizen Reports (Tuao App integration) ---- */
.btn-sm{padding:7px 12px; font-size:11.5px; border-radius:7px;}
.filter-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--border-soft); padding-bottom:12px;}
.filter-tab{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--text-muted); background:var(--panel-2); border:1px solid transparent; text-decoration:none;}
.filter-tab:hover{color:var(--text);}
.filter-tab.active{background:var(--accent-dim); color:var(--accent); border-color:rgba(255,107,53,0.35);}
.filter-tab-count{background:var(--accent); color:#fff; border-radius:20px; font-size:10px; font-weight:700; padding:1px 7px; line-height:1.5;}

.citizen-report-list{display:flex; flex-direction:column; gap:12px; margin-bottom:8px;}
.citizen-report-card{display:flex; gap:14px; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:12px; padding:14px;}
.citizen-report-card.cr-driver{border-color:var(--red); box-shadow:0 0 0 1px rgba(220,38,38,0.25);}
.b-driver-sos{background:var(--red-dim); color:var(--red);}
.cr-thumb-wrap{flex-shrink:0;}
.cr-thumb{width:110px; height:110px; object-fit:cover; border-radius:9px; background:var(--panel); flex-shrink:0; display:block;}
.cr-thumb-empty{display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:10.5px; text-align:center; border:1px dashed var(--border-soft);}
.cr-body{flex:1; min-width:0;}
.cr-top-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
.cr-category{font-family:'Space Grotesk',sans-serif; font-size:14.5px; font-weight:600;}
.cr-meta{font-size:12px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:14px; margin-bottom:4px;}
.cr-detect-tag{padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:600;}
.cr-detect-boundary{background:var(--green-dim); color:var(--green);}
.cr-detect-nearest{background:var(--amber-dim); color:var(--amber);}
.cr-meta a{color:var(--teal);}
.cr-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}

@media (max-width:600px){
  .citizen-report-card{flex-direction:column;}
  .cr-thumb, .cr-thumb-empty{width:100%; height:160px;}
}

/* ---- Live Monitor page: full-screen map ---- */
.page-fullscreen-sidebar .hero-map-wrap{min-height:100vh;}
.page-fullscreen-sidebar{overflow:hidden;} /* the sidebar handles its own scrolling; no page scroll needed */

.monitor-menu-btn{display:flex; align-items:center; gap:8px; background:rgba(15,21,38,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border-soft); border-radius:10px; padding:10px 16px; color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0;}
.monitor-menu-btn:hover{background:rgba(15,21,38,0.9);}

.monitor-sidebar-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:40; opacity:0; pointer-events:none; transition:opacity 0.25s ease;}
.monitor-sidebar-backdrop.open{opacity:1; pointer-events:auto;}

.monitor-sidebar{position:fixed; top:0; right:0; height:100vh; width:340px; max-width:88vw; background:var(--panel); border-left:1px solid var(--border); z-index:41; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.32,0.72,0,1); overflow-y:auto; box-shadow:-12px 0 40px rgba(0,0,0,0.4);}
.monitor-sidebar.open{transform:translateX(0);}
.monitor-sidebar-head{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:var(--panel); z-index:1;}
.monitor-sidebar-close{background:var(--panel-2); border:1px solid var(--border-soft); border-radius:8px; width:30px; height:30px; color:var(--text-mid); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.monitor-sidebar-close:hover{color:#fff;}
.monitor-sidebar-section{padding:18px 20px; border-bottom:1px solid var(--border-soft);}
.monitor-sidebar-section:last-child{border-bottom:none;}
.monitor-sidebar-label{font-size:10.5px; font-weight:700; letter-spacing:0.5px; color:var(--text-muted); text-transform:uppercase; margin-bottom:10px;}

.monitor-layers-row{display:flex; flex-wrap:wrap; gap:10px;}
.monitor-layers-col{flex-direction:column;}
.monitor-layers-col .monitor-layer-btn{width:100%;}
.monitor-layer-btn{display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:9px; padding:10px 16px; color:var(--text-muted); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;}
.monitor-layer-btn .ml-icon{font-size:15px;}
.monitor-layer-btn.active{background:var(--accent-dim); color:var(--accent); border-color:rgba(255,107,53,0.4);}
.monitor-layer-btn:hover{color:#fff;}

.monitor-radar-controls{display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-soft);}
.monitor-radar-play{flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--accent); border:none; color:#fff; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.monitor-radar-play:hover{background:#E35B28;}
.monitor-radar-slider{flex:1; min-width:0; accent-color:var(--accent);}
.monitor-radar-time{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-mid); min-width:52px; text-align:right;}
.monitor-radar-attribution{font-size:10.5px; color:var(--text-muted);}
.monitor-radar-attribution a{color:var(--teal);}

.monitor-weather-card{display:flex; align-items:center; gap:14px; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:12px; padding:14px 16px;}
.monitor-weather-card .mw-icon{flex-shrink:0;}
.monitor-weather-card .mw-temp{font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:#fff; line-height:1.1;}
.monitor-weather-card .mw-label{font-size:12.5px; color:var(--text-mid); margin-top:3px;}
.monitor-weather-card .mw-sub{font-size:11px; color:var(--text-muted); margin-top:4px;}

.monitor-legend-row{display:flex; flex-wrap:wrap; gap:10px 18px; font-size:11px; color:var(--text-mid);}
.monitor-legend-col{flex-direction:column; gap:10px;}
.monitor-legend-row .li{display:flex; align-items:center; gap:6px;}

@media (max-width:768px){
  .monitor-sidebar{width:100vw; max-width:100vw;}
}

/* ---- Photo lightbox (Citizen Reports) ---- */
.edris-lightbox{position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999; display:none; align-items:center; justify-content:center; padding:40px; cursor:zoom-out;}
.edris-lightbox.open{display:flex;}
.edris-lightbox img{max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,0.6); cursor:default;}
.edris-lightbox-close{position:absolute; top:20px; right:24px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; width:40px; height:40px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;}
.edris-lightbox-close:hover{background:rgba(255,255,255,0.2);}