:root{
  --amber-100:#FDECD1; --amber-300:#F6B25A; --amber-500:#F2994A; --amber-700:#B96A1E;
  --blue-100:#E4EEFB; --blue-500:#3B82F6; --blue-700:#1D4ED8;
  --coral-100:#FCEAE7; --coral-500:#E8604C; --coral-700:#B8402F;
  --purple-100:#F0EAFB; --purple-500:#8B5CF6; --purple-700:#6D28D9;
  --teal-100:#DEF5F0; --teal-500:#0F9C8A; --teal-700:#0B7767;
  --green-100:#E3F6E9; --green-600:#1F9D55;
  --gray-100:#F1F1EF; --gray-400:#B7BAC2;
  --ink:#1F2430; --ink-soft:#5B6270; --cream:#FFF9F1;
}
*{box-sizing:border-box; margin:0; padding:0; font-family:'Inter',sans-serif;}
body{background:var(--surface-2); color:var(--ink);}
a{text-decoration:none; color:inherit;}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

/* ---------- shell layout ---------- */
.admin-shell{display:flex; min-height:100vh;}

.sidebar{
  width:230px; flex-shrink:0; position:relative; overflow:hidden;
  background:#FDEFE4 url('../../image/sidebar_bg.png') center bottom / 100% auto no-repeat;
  display:flex; flex-direction:column; padding:20px 16px;
  transition:width .25s ease, padding .25s ease;
}
.admin-shell.sidebar-collapsed .sidebar{width:0; padding-left:0; padding-right:0;}
.sidebar nav{display:flex; flex-direction:column; gap:4px; position:relative; z-index:2;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
}
.sidebar nav a i{font-size:17px;}
.sidebar nav a:hover{background:rgba(255,255,255,0.4);}
.sidebar nav a.active{background:var(--surface); color:var(--amber-500); box-shadow:0 4px 10px rgba(0,0,0,0.06);}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}

.topbar{
  background:linear-gradient(90deg,#FDE7C0,#FBCF8F);
  padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
}
.topbar .brand{display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:19px;}
.topbar .brand .logo{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.5);
}
.topbar .brand .logo img{width:100%; height:100%; object-fit:cover;}
.topbar .actions{display:flex; align-items:center; gap:14px;}
.topbar .icon-btn{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.6); border:none;
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink); position:relative;
}
.topbar .icon-btn .dot{
  position:absolute; top:6px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--coral-500);
  box-shadow:0 0 0 2px #fbcf8f;
}

.content{padding:26px 28px 40px; flex:1;}
.page-title{font-size:20px; font-weight:700; margin-bottom:2px; display:flex; align-items:center; gap:10px;}
.page-subtitle{font-size:13px; color:var(--ink-soft); margin-bottom:22px;}

/* ---------- welcome banner ---------- */
.welcome-banner{
  background:linear-gradient(90deg,#FFF1DC,#FCE1B8);
  border-radius:16px; padding:22px 26px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-bottom:22px; flex-wrap:wrap;
}
.welcome-banner h1{font-size:20px; font-weight:700; margin-bottom:4px;}
.welcome-banner p{font-size:13px; color:var(--ink-soft); margin-bottom:14px;}
.welcome-banner .btn-report{
  background:linear-gradient(90deg,var(--amber-300),var(--amber-500)); color:#fff; border:none;
  padding:12px 20px; border-radius:9px; font-size:13px; font-weight:700; letter-spacing:0.5px;
  box-shadow:0 8px 16px rgba(242,153,74,0.32); display:inline-flex; align-items:center; gap:8px;
}
.sos-btn{
  width:64px; height:64px; border-radius:50%; background:radial-gradient(circle,#F58B7A,#E8604C);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px; flex-shrink:0;
  box-shadow:0 0 0 8px rgba(232,96,76,0.15);
  transition:transform .15s ease;
}

/* ---------- Emergency SOS button (dashboard) ---------- */
.sos-wrap{
  border:none; background:none; padding:4px; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:7px; flex-shrink:0;
}
.sos-wrap:hover .sos-btn{transform:scale(1.06);}
.sos-wrap:active .sos-btn{transform:scale(.95);}
.sos-wrap:focus-visible{outline:3px solid #E8604C; outline-offset:4px; border-radius:14px;}
.sos-label{font-size:11px; font-weight:800; letter-spacing:1.3px; color:#B8402F;}
/* An SOS is open: keep pulsing so the resident knows it's live */
.sos-wrap.sos-open .sos-btn{animation:ubSosPulse 1.4s ease-out infinite;}
@keyframes ubSosPulse{
  0%  {box-shadow:0 0 0 0 rgba(232,96,76,.55);}
  100%{box-shadow:0 0 0 18px rgba(232,96,76,0);}
}

/* ---------- Emergency SOS modal ---------- */
.sos-box{max-width:420px; text-align:center;}
.sos-box h2{font-size:18px; font-weight:800; margin-bottom:4px;}
.sos-sub{font-size:13px; color:var(--ink-soft); line-height:1.5; margin-bottom:16px;}
.sos-count{position:relative; width:116px; height:116px; margin:4px auto 16px;}
.sos-count svg{width:100%; height:100%; transform:rotate(-90deg);}
.sos-count .track{fill:none; stroke:#FCE3DE; stroke-width:9;}
.sos-count .prog{fill:none; stroke:#E8604C; stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1s linear;}
.sos-count .num{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:42px; font-weight:800; color:#B8402F; font-family:'Poppins',sans-serif;
}
.sos-types{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-bottom:12px;}
.sos-types button{
  border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:7px 12px;
  font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:5px;
}
.sos-types button.on{background:#FCEAE7; border-color:#E8604C; color:#B8402F;}
.sos-note{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:14px; font-family:inherit; margin-bottom:12px; background:var(--surface-3);
}
.sos-loc{font-size:12px; color:var(--ink-soft); margin-bottom:14px; min-height:16px;}
.sos-actions{display:flex; flex-direction:column; gap:9px;}
.sos-actions button, .sos-actions a{
  width:100%; padding:13px; border-radius:11px; font-size:14px; font-weight:800;
  letter-spacing:.4px; cursor:pointer; font-family:inherit; text-decoration:none;
  display:flex; align-items:center; justify-content:center; gap:8px; border:none;
}
.sos-send{background:linear-gradient(90deg,#F07A66,#E8604C); color:#fff; box-shadow:0 8px 18px rgba(232,96,76,.35);}
.sos-send:disabled{opacity:.6; cursor:wait;}
.sos-secondary{background:var(--surface); color:var(--ink); border:1px solid var(--line) !important;}
.sos-call{background:#1F2430; color:#fff;}
.sos-state{
  display:flex; align-items:center; gap:10px; text-align:left; font-size:13.5px; line-height:1.45;
  background:var(--surface-3); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px;
}
.sos-state .dot{width:12px; height:12px; border-radius:50%; flex-shrink:0;}
.sos-state.waiting .dot{background:#F2994A; animation:ubSosPulse 1.4s ease-out infinite;}
.sos-state.ack .dot{background:#0F9C8A;}
.sos-state.done .dot{background:#9AA0AB;}
.sos-meta{font-size:12px; color:var(--ink-soft); margin-bottom:14px; line-height:1.6;}
@media (prefers-reduced-motion: reduce){
  .sos-wrap.sos-open .sos-btn, .sos-state.waiting .dot{animation:none;}
  .sos-count .prog{transition:none;}
}

/* ---------- filled stat tiles ---------- */
.stat-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:22px;}
.stat-tile{
  border-radius:14px; padding:18px 20px; display:flex; align-items:center; gap:12px;
}
.stat-tile .icon-circle{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; color:#fff;
}
.stat-tile .num{font-size:22px; font-weight:700; line-height:1.15;}
.stat-tile .label{font-size:12px; color:var(--ink-soft);}
.tile-coral{background:var(--coral-100);} .tile-coral .icon-circle{background:var(--coral-500);}
.tile-amber{background:var(--amber-100);} .tile-amber .icon-circle{background:var(--amber-500);}
.tile-green{background:var(--green-100);} .tile-green .icon-circle{background:var(--green-600);}

/* ---------- cards ---------- */
.card{background:var(--surface); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow-card);}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px;}
.card-head h3{font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px;}
.card-head .link{font-size:12.5px; font-weight:600; color:var(--blue-500);}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  text-align:left; font-size:11.5px; letter-spacing:0.3px; color:var(--ink-soft);
  text-transform:uppercase; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:12px 12px; border-bottom:1px solid var(--line-soft); color:var(--ink); white-space:nowrap;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-3);}
.row-icon{
  width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; margin-right:8px; vertical-align:middle;
}

/* ---------- list rows (alerts / incidents / notifications) ---------- */
.list-row{
  display:flex; align-items:flex-start; gap:12px; padding:14px 4px; border-bottom:1px solid var(--line-soft);
}
.list-row:last-child{border-bottom:none;}
.list-row .icon-circle{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:17px; flex-shrink:0; color:#fff;
}
.list-row .body{flex:1; min-width:0;}
.list-row .title{font-size:13.5px; font-weight:700; color:var(--ink);}
.list-row .desc{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.list-row .meta{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}
.list-row .right{display:flex; flex-direction:row; align-items:center; gap:10px; flex-shrink:0; flex-wrap:nowrap; justify-content:flex-end;}
.list-row .time{font-size:11px; color:var(--ink-soft); white-space:nowrap;}
.list-row .chevron{color:var(--ink-soft); font-size:16px; margin-left:6px;}
.list-row-flex{display:flex; align-items:center; gap:10px;}

/* Phones: the badges + date block never shrinks, so on a ~360px screen it
   took ~280px and crushed the text column to a few characters ("Ot" for
   "Other", addresses breaking one word per line, the date running off the
   card). Drop that block onto its own line under the text instead, indented
   to line up with it (38px icon + 12px gap). The notifications chevron stays
   on the first line, pinned to the right. */
@media (max-width:640px){
  .list-row{flex-wrap:wrap; row-gap:8px;}
  .list-row .icon-circle{order:0;}
  .list-row .body{order:1; flex:1 1 0;}
  .list-row > .ti-chevron-right{order:2; align-self:center;}
  .list-row .right{
    order:3; flex:1 0 100%; padding-left:50px;
    justify-content:flex-start; flex-wrap:wrap; gap:6px 8px;
  }

  /* Dashboard "Recent Alerts": a 4-column table is ~560px wide, so on a
     phone only Type and Location showed and Severity/Date hid off to the
     right behind a sideways swipe. Stack each row as a small card instead:
       [icon] Type ............ [Severity]
       Location
       Date · time                                                     */
  table.stack-mobile thead{display:none;}
  table.stack-mobile, table.stack-mobile tbody{display:block; width:100%;}
  table.stack-mobile tr{
    display:grid; grid-template-columns:1fr auto; align-items:center;
    gap:4px 10px; padding:12px 2px; border-bottom:1px solid var(--line-soft);
  }
  table.stack-mobile tr:last-child{border-bottom:none;}
  table.stack-mobile td{display:block; padding:0; border:none;}
  table.stack-mobile td:nth-child(1){grid-column:1; grid-row:1; font-weight:700;}
  table.stack-mobile td:nth-child(3){grid-column:2; grid-row:1; justify-self:end;}
  table.stack-mobile td:nth-child(2){grid-column:1 / -1; font-size:12.5px; color:var(--ink-soft); padding-left:34px;}
  table.stack-mobile td:nth-child(4){grid-column:1 / -1; font-size:11.5px; color:var(--ink-soft); padding-left:34px;}
  table.stack-mobile td:nth-child(4) br{display:none;}
  table.stack-mobile td:nth-child(4) span{margin-left:6px;}
  table.stack-mobile td[colspan]{grid-column:1 / -1; padding:20px 0 !important;}

  /* Dashboard welcome banner: the EMERGENCY button (circle + label) would
     wrap onto its own line under the Report button. Pin it to the top-right
     corner and keep the heading clear of it. 52px keeps it a generous tap
     target - it's the one button that must never be fiddly to hit. */
  .welcome-banner.has-sos{position:relative; padding:20px 18px;}
  .welcome-banner.has-sos > div:first-child{width:100%;}
  .welcome-banner.has-sos h1, .welcome-banner.has-sos p{padding-right:84px;}
  .welcome-banner.has-sos .sos-wrap{position:absolute; top:12px; right:10px;}
  .welcome-banner.has-sos .sos-btn{
    width:52px; height:52px; font-size:22px;
    box-shadow:0 0 0 6px rgba(232,96,76,0.15);
  }
  .welcome-banner.has-sos .sos-label{font-size:9.5px;}
}

/* ---------- badges ---------- */
.badge{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:700;}
.badge-pending{background:var(--amber-100); color:var(--amber-700);}
.badge-verified,.badge-active,.badge-resolved{background:var(--green-100); color:var(--green-600);}
.badge-rejected{background:var(--coral-100); color:var(--coral-700);}
.badge-high{background:var(--coral-100); color:var(--coral-700);}
.badge-medium{background:var(--amber-100); color:var(--amber-700);}
.badge-progress{background:var(--blue-100); color:var(--blue-700);}

/* ---------- filter pills ---------- */
.filter-pills{display:flex; align-items:center; gap:8px; margin-bottom:18px; overflow-x:auto; padding-bottom:4px;}
.filter-pills button{
  border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:8px 16px; font-size:12.5px;
  font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0;
}
.filter-pills button.active{background:linear-gradient(90deg,var(--amber-300),var(--amber-500)); color:#fff; border-color:transparent;}

/* ---------- filters bar ---------- */
.filters-bar{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.search-input{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:9px 14px; font-size:13px; color:var(--ink-soft); flex:1; min-width:180px;
}
.search-input input{border:none; outline:none; font-size:13px; width:100%; background:transparent;}
.filter-select{
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13px; color:var(--ink-soft);
  display:flex; align-items:center; gap:6px;
}

/* ---------- buttons ---------- */
.btn{border:none; border-radius:9px; padding:9px 16px; font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px;}
.btn-outline{background:var(--surface); border:1px solid var(--line); color:var(--ink);}
.btn-primary{background:linear-gradient(90deg,var(--amber-300),var(--amber-500)); color:#fff;}

/* ---------- pagination ---------- */
.pagination{display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-size:12.5px; color:var(--ink-soft);}
.page-nums{display:flex; align-items:center; gap:6px;}
.page-nums button{width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; color:var(--ink-soft);}
.page-nums button.active{background:var(--amber-500); border-color:var(--amber-500); color:#fff; font-weight:700;}
.page-nums button.nav{border:none; background:transparent;}

/* ---------- empty state ---------- */
.empty-state{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 20px; color:var(--ink-soft);}
.empty-state i{font-size:30px; color:var(--gray-400); margin-bottom:10px;}
.empty-state p{font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.empty-state span{font-size:12px; max-width:220px; line-height:1.5;}

/* ---------- map ---------- */
.map-toolbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:10px;}
.map-toggle{display:flex; gap:4px; background:#F3F1EC; border-radius:9px; padding:4px;}
.map-toggle button{border:none; background:transparent; padding:7px 14px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.map-toggle button.active{background:var(--surface); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,0.08);}
.map-canvas{width:100%; height:420px; border-radius:12px;}
.leaflet-div-pin{
  width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 6px rgba(0,0,0,0.3); border:2px solid #fff;
}
.leaflet-div-pin i{transform:rotate(45deg); color:#fff; font-size:14px;}
/* A resolved alert is history, not a warning - muted so the active ones
   stand out at a glance. */
.leaflet-div-pin.is-resolved{opacity:.55; transform:rotate(-45deg) scale(.85);}

/* ---------- dashboard map ---------- */
/* z-index:0 makes this its own stacking context: Leaflet's controls sit at
   z-index 1000 and would otherwise float over the sidebar and topbar. */
.dash-map{
  height:330px; border-radius:12px; overflow:hidden; position:relative; z-index:0;
  background:linear-gradient(180deg,#DCEEFA 0%,#EAF3E3 100%);
}
.dash-map-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:10px; font-size:12px; color:var(--ink-soft);
}
.dash-map-legend{display:flex; gap:14px;}
.dash-map-legend .dot{
  width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle;
}
.dash-map-empty{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; text-align:center; padding:20px;
  font-size:13px; color:var(--ink-soft); background:var(--surface-3);
}
.dash-map-empty i{font-size:24px; color:var(--green-600);}
@media (max-width:640px){
  .dash-map{height:260px;}
}

/* ---------- report incident form ---------- */
.form-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:22px; align-items:start;}
.field-label{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--ink); margin:16px 0 8px;}
.field-label:first-child{margin-top:0;}
.field-label i{color:var(--amber-500);}
select, textarea, input[type="text"], input[type="number"]{
  width:100%; padding:11px 14px; border:1px solid var(--line); background:var(--surface-3);
  border-radius:10px; font-size:13.5px; color:var(--ink); outline:none; font-family:inherit;
}
select:focus, textarea:focus, input:focus{border-color:var(--amber-500); background:var(--surface);}
textarea{resize:vertical; min-height:90px;}
.char-count{text-align:right; font-size:11px; color:var(--ink-soft); margin-top:4px;}
.field-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

.upload-buttons{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.upload-btn{
  border:1px dashed var(--line); background:var(--surface-3); border-radius:10px; padding:16px 10px; text-align:center;
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink);
}
.upload-btn i{display:block; font-size:20px; color:var(--amber-500); margin-bottom:6px;}
.upload-btn span{display:block; font-size:11px; font-weight:400; color:var(--ink-soft); margin-top:2px;}
.upload-file{font-size:12px; font-weight:600; color:var(--teal-500);}
.upload-file-row{
  display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 10px;
  background:var(--teal-100); border-radius:8px;
}
.upload-file-row i.ti-photo{color:var(--teal-700); font-size:15px;}
.upload-file-row .upload-file{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.remove-file-btn{
  border:none; background:none; color:var(--coral-500); cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; padding:2px;
}
.remove-file-btn:hover{color:var(--coral-700);}

.tip-card{border-radius:12px; padding:14px 16px; margin-bottom:12px; font-size:12px; line-height:1.5; display:flex; gap:10px;}
.tip-card i{font-size:16px; flex-shrink:0; margin-top:1px;}
.tip-teal{background:var(--teal-100); color:var(--teal-700);}
.tip-blue{background:var(--blue-100); color:var(--blue-700);}
.tip-amber{background:var(--amber-100); color:var(--amber-700);}
.tip-purple{background:var(--purple-100); color:var(--purple-700);}

.location-status{font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px; margin-bottom:8px;}
.location-status.ok{color:var(--teal-500);}
.location-status.error{color:var(--coral-500);}
.btn-locate{border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:7px 12px; font-size:12px; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.coords{font-size:11.5px; color:var(--ink-soft); margin-top:6px;}

button[type="submit"]{
  width:100%; padding:13px; border:none; border-radius:10px; cursor:pointer; margin-top:22px;
  background:linear-gradient(90deg,var(--amber-300),var(--amber-500));
  color:#fff; font-size:14px; font-weight:700; letter-spacing:1px;
  box-shadow:0 10px 20px rgba(242,153,74,0.35);
}
button[type="submit"]:disabled{opacity:0.6; cursor:not-allowed;}

.message{margin-top:14px; font-size:13px; padding:10px; border-radius:8px; display:none;}
.message.error{background:#FCEAE7; color:#B8402F; display:block;}
.message.success{background:#E7F8F0; color:#0F9C8A; display:block;}

@media (max-width:900px){
  .form-grid{grid-template-columns:1fr;}
}

@media (max-width:1100px){
  .stat-tiles{grid-template-columns:repeat(1,1fr);}
}
@media (max-width:820px){
  .sidebar{position:fixed; left:-230px; top:0; bottom:0; z-index:900; transition:left .2s;}
  .sidebar.open{left:0;}
}

/* ---- Alert detail modal (dashboard + alerts pages) ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(31,36,48,0.55);
}
.modal-overlay.active{display:flex;}
.modal-box{
  background:var(--surface); border-radius:18px; width:100%; max-width:520px;
  padding:24px; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:18px;}
.modal-head .title-group{display:flex; gap:12px; align-items:center;}
.modal-head .icon-circle{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.modal-head h2{font-size:16.5px; font-weight:700;}
.modal-head p{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.modal-close{
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:#F3F1EC; color:var(--ink); font-size:15px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{background:#E9E5DD;}

/* Rows that open a detail view */
.clickable-row{cursor:pointer; transition:background .12s;}
.clickable-row:hover{background:#FCF8F2;}

.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.detail-item .detail-label{
  font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:4px;
}
.detail-item .detail-value{font-size:13.5px; color:var(--ink); line-height:1.5;}
.detail-block{margin-bottom:16px;}
.detail-block .detail-label{
  font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}
.detail-desc{
  font-size:13.5px; color:var(--ink); line-height:1.6;
  background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:12px;
}
.detail-photo{width:100%; border-radius:10px; display:block; border:1px solid var(--line);}

/* Wide rather than long. The photo column is capped so a portrait photo cannot
   stretch the modal into a scroll, and object-fit:contain means what is shown
   is the whole photo, letterboxed on the panel colour, rather than a crop of
   it. */
.detail-cols{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,400px);
  gap:20px; align-items:start;
}
.detail-media{margin-bottom:0;}
.detail-media .detail-photo{
  max-height:58vh; object-fit:contain; background:var(--surface-3);
}
@media (max-width:820px){
  .detail-cols{grid-template-columns:1fr;}
  .detail-media .detail-photo{max-height:44vh;}
}
@media (max-width:520px){
  .detail-grid{grid-template-columns:1fr;}
}
/* The hidden attribute must always win. Class rules like .empty-state{display:flex}
   otherwise override it, which kept "No reports yet" showing on top of charts
   that had data, and left things like the bell dot visible when they shouldn't be. */
[hidden]{display:none !important;}