/* ============================================================
   UnityBridge console design system
   ------------------------------------------------------------
   The shell, panels, tables, tiles, badges and controls that all
   four apps share: admin, barangay, rescue and resident. Each
   app also loads its own stylesheet for the pieces only it has
   (the resident SOS button, the rescue mission cards, the admin
   emergency bar), and loads THIS file after it so the shared
   look wins over whatever those files said before.

   Tokens are declared on body[data-page] rather than :root
   because frontend/css/theme.css loads last and defines the
   shared surfaces on :root; an attribute selector outranks it.
   ============================================================ */

/* ============================================================
   UnityBridge - CDRRMO administrator console
   ------------------------------------------------------------
   The console keeps its structured layout - ruled panels, a stat
   strip, dense tables - but wears the UnityBridge orange: gradient
   chrome on the sidebar, topbar and primary buttons, warm surfaces
   and cream rules, so it sits with the resident, barangay and
   rescue apps instead of apart from them.

   Tokens are declared on body[data-page] rather than :root
   because frontend/css/theme.css loads AFTER this file and
   defines the shared warm surfaces on :root. An attribute
   selector outranks :root, so the console's own palette wins
   without touching the other three apps.
   ============================================================ */

body[data-page]{
  /* the brand orange, and the gradients built from it */
  --brand-300:#F6B25A;
  --brand-500:#F2994A;
  --brand-600:#E4832F;
  --brand-700:#B96A1E;
  --brand-900:#8A4A12;
  --grad-chrome:linear-gradient(168deg,#FFF3E4 0%,#FCE0BE 48%,#F7C795 100%);   /* sidebar */
  --grad-bar:linear-gradient(90deg,#F8BE72 0%,#F2994A 55%,#E9822F 100%);       /* topbar */
  --grad-action:linear-gradient(90deg,#F6B25A,#EE8C36);                        /* buttons */
  --grad-head:linear-gradient(90deg,#FFF6EA,#FFFCF8);                          /* panel headers */

  /* neutrals - warm, so white panels sit on cream rather than on grey */
  --slate-900:#2A2118;
  --slate-600:#6B6156;
  --slate-400:#B2A79A;
  --slate-200:#E7E0D6;
  --slate-100:#F4F0E9;
  --slate-50:#FCF9F4;

  /* surfaces (overriding the shared set in css/theme.css) */
  --surface:#FFFFFF;
  --surface-2:#F8F5F0;
  --surface-3:#FDFBF8;
  --surface-side:var(--brand-500);
  --line:#EAE3D8;
  --line-soft:#F4EFE7;
  --shadow-card:none;
  --shadow-pop:0 18px 44px rgba(84,56,25,0.22);

  /* status - each with its own rule colour */
  --amber-100:#FDECD1; --amber-300:var(--brand-300); --amber-500:var(--brand-500); --amber-700:var(--brand-700);
  --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:var(--slate-100); --gray-400:var(--slate-400);

  /* the accent colour for links, tabs and the active state */
  --steel-600:#A15912; --steel-500:var(--brand-600); --steel-100:#FDECD1;

  --ink:var(--slate-900); --ink-soft:var(--slate-600); --cream:#FFF9F1;

  --chrome-h:58px;         /* topbar height, used by the sticky offsets */
}

*{box-sizing:border-box; margin:0; padding:0; font-family:'Inter',sans-serif;}
body{background:var(--surface-2); color:var(--ink); -webkit-font-smoothing:antialiased;}
a{text-decoration:none; color:inherit;}
h1,h2,h3,h4{font-family:'Inter',sans-serif; letter-spacing:-0.01em;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

/* ---------- shell layout ----------
   The sidebar and topbar are fixed furniture: a long table now scrolls
   under them instead of pushing the navigation off the screen. */
.admin-shell{display:flex; min-height:100vh;}

.sidebar{
  width:244px; flex-shrink:0; position:sticky; top:0; align-self:flex-start;
  height:100vh; overflow-y:auto; overflow-x:hidden;
  background:var(--grad-chrome); color:#5E3B16;
  display:flex; flex-direction:column; padding:0 0 14px;
  transition:width .2s ease;
}
.admin-shell.sidebar-collapsed .sidebar{width:0;}

/* Masthead: the office identifies itself before anything else on the page */
.brand-block{
  display:flex; align-items:center; gap:11px; padding:15px 18px 16px;
  border-bottom:1px solid rgba(185,106,30,0.20); margin-bottom:12px;
}
.brand-block .brand-seal{
  width:38px; height:38px; border-radius:10px; overflow:hidden; flex-shrink:0; background:#fff;
  box-shadow:0 1px 4px rgba(140,76,20,.18);
  display:flex; align-items:center; justify-content:center;
}
.brand-block .brand-seal img{width:100%; height:100%; object-fit:cover;}
.brand-block .brand-word{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; letter-spacing:1.2px; color:var(--ink);
}
.brand-block .brand-office{font-size:10.5px; color:var(--brand-900); margin-top:2px; letter-spacing:.2px; font-weight:600;}

.sidebar nav{display:flex; flex-direction:column; gap:1px; padding:0 10px;}
.nav-section{
  font-size:9.5px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
  color:#7A4A12; padding:14px 10px 6px;
}
.nav-section:first-child{padding-top:2px;}
.sidebar nav a{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px;
  font-size:13px; font-weight:600; color:#5E3B16; border-left:2px solid transparent;
}
.sidebar nav a i{font-size:17px; color:#8A5B2E;}
.sidebar nav a:hover{background:rgba(255,255,255,0.58); color:#4A2D0F;}
.sidebar nav a:hover i{color:#5E3B16;}
.sidebar nav a.active{
  background:#fff; color:#A15912; font-weight:700;
  border-left-color:var(--brand-600); border-radius:0 9px 9px 0;
  box-shadow:0 2px 8px rgba(140,76,20,.14);
}
.sidebar nav a.active i{color:var(--brand-500);}

.nav-logout{
  margin:auto 20px 0; display:flex; align-items:center; gap:10px; padding:10px 0 0;
  border-top:1px solid rgba(185,106,30,0.20); font-size:12.5px; font-weight:600; color:#5E3B16;
}
.nav-logout:hover{color:#5E3B16;}
.nav-logout i{font-size:16px;}

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

/* ---------- topbar: office identity and who is signed in ---------- */
.topbar{
  background:var(--grad-bar); color:var(--ink); height:var(--chrome-h);
  padding:0 22px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:940;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.35), 0 1px 0 rgba(140,76,20,.10);
}
.topbar .menu-toggle{
  width:32px; height:32px; border-radius:9px; background:rgba(255,255,255,0.55); border:none;
  color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.topbar .menu-toggle:hover{background:rgba(255,255,255,0.8);}
.topbar-meta{min-width:0; flex:1;}
.topbar-office{
  font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar-sub{font-size:10.5px; color:#7A5320; margin-top:1px; letter-spacing:.3px;}
.topbar .actions{display:flex; align-items:center; gap:14px; margin-left:auto;}
.topbar .icon-btn{
  width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,0.55); border:none;
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink); position:relative;
}
.topbar .icon-btn:hover{background:rgba(255,255,255,0.8);}
.topbar .icon-btn .dot{
  position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--coral-500); box-shadow:0 0 0 2px #F5A85C;
}
.user-chip{display:flex; align-items:center; gap:9px; padding-left:14px; border-left:1px solid rgba(255,255,255,0.45);}
.user-chip .user-avatar{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.75); color:var(--brand-700);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;
}
.user-chip .user-meta{display:flex; flex-direction:column; line-height:1.25;}
.user-chip .user-name{font-size:12.5px; font-weight:700; color:var(--ink);}
.user-chip .user-role{font-size:10px; color:#7A5320; letter-spacing:.4px; text-transform:uppercase;}

.content{padding:22px 26px 40px; flex:1;}

/* ---------- page header band ---------- */
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--line);
}
.page-title{font-size:19px; font-weight:700; letter-spacing:-0.015em; display:flex; align-items:center; gap:8px;}
.page-subtitle{font-size:12.5px; color:var(--ink-soft); margin-top:4px; line-height:1.5;}
.page-head .page-subtitle{margin-bottom:0;}
.page-head-actions{display:flex; align-items:center; gap:8px;}

/* ---------- stat strip ----------
   One bordered panel divided by hairlines, not four floating cards: the
   figures are one reading, so they are presented as one object. */
.stat-tiles{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px;
}
.stat-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; display:flex; align-items:center; gap:13px;
  box-shadow:0 1px 2px rgba(140,76,20,0.04);
}
.stat-tile .icon-circle{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.stat-tile .num{font-size:23px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums;}
.stat-tile .label{
  font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.6px;
  font-weight:600; margin-top:4px;
}
.tile-amber .icon-circle{background:var(--amber-100); color:var(--amber-700);}
.tile-blue .icon-circle{background:var(--steel-100); color:var(--steel-600);}
.tile-green .icon-circle{background:var(--green-100); color:var(--green-600);}
.tile-coral .icon-circle{background:var(--coral-100); color:var(--coral-700);}
.tile-purple .icon-circle{background:var(--purple-100); color:var(--purple-700);}
.tile-gray .icon-circle{background:var(--gray-100); color:var(--ink-soft);}

/* ---------- panels ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  box-shadow:none;
}
/* The head is a band across the full width of the panel, ruled off from
   its contents, the way a form or a report section is titled. */
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:-16px -18px 14px; padding:11px 18px;
  background:var(--grad-head); border-bottom:1px solid var(--line); border-radius:13px 13px 0 0;
}
.card-head h3{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--slate-600);
  display:flex; align-items:center; gap:7px;
}
.card-head .link{font-size:11.5px; font-weight:600; color:var(--steel-600);}
.card-head .link:hover{text-decoration:underline;}
.select-chip{
  border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:5px 9px;
  font-size:12px; color:var(--ink-soft); display:flex; align-items:center; gap:6px;
}

.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;}
.grid-2-even{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}

/* A grid item will not shrink below its content's minimum size unless it is
   told it may, and a Chart.js canvas carries an explicit pixel width. So
   collapsing the sidebar let the charts grow into the space, and bringing it
   back could not squeeze them down again: the page kept the wider layout and
   grew a horizontal scrollbar. The canvas cap is the second line of defence,
   for the frame before Chart.js has resized itself. */
.grid-2 > *, .grid-2-even > *, .grid-3 > *, .stat-tiles > *, .em-layout > *{min-width:0;}
.card{min-width:0;}
canvas{max-width:100%;}

/* ---------- empty state ---------- */
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:34px 20px; color:var(--ink-soft);
}
.empty-state i{font-size:26px; color:var(--slate-400); margin-bottom:10px;}
.empty-state p{font-size:13px; font-weight:600; color:var(--ink); margin-bottom:4px;}
.empty-state span{font-size:12px; max-width:240px; line-height:1.5;}

/* ---------- tables ----------
   Full-bleed inside their panel, hairline rows, figures on tabular
   numerals so columns of numbers line up. */
.table-wrap{overflow-x:auto; margin:0 -18px;}
table{width:100%; border-collapse:collapse; font-size:12.5px;}
thead th{
  text-align:left; font-size:10px; letter-spacing:.7px; color:var(--slate-600);
  text-transform:uppercase; font-weight:700; padding:9px 12px; white-space:nowrap;
  background:var(--grad-head); border-bottom:1px solid var(--slate-200);
}
/* A table reads as part of its panel: the column header sits directly under
   the panel header, or against the top edge when the panel has no header. */
.card-head + .table-wrap{margin-top:-14px;}
.card > .table-wrap:first-child{margin-top:-16px; border-radius:13px 13px 0 0; overflow:hidden;}
tbody td{
  padding:10px 12px; border-bottom:1px solid var(--line-soft); color:var(--ink); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
thead th:first-child, tbody td:first-child{padding-left:18px;}
thead th:last-child, tbody td:last-child{padding-right:18px;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--slate-50);}
.row-icon{
  width:24px; height:24px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; margin-right:8px; vertical-align:middle;
}
.avatar{
  width:26px; height:26px; border-radius:50%; background:var(--slate-100); color:var(--slate-600);
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; margin-right:8px; vertical-align:middle;
}

/* ---------- list rows (notifications) ---------- */
.list-row{
  display:flex; align-items:flex-start; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line-soft);
}
.list-row:last-child{border-bottom:none;}
.list-row .icon-circle{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0; color:#fff;
}
.list-row .body{flex:1; min-width:0;}
.list-row .title{font-size:13px; font-weight:600; 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; align-items:center; gap:10px; flex-shrink:0; flex-wrap:nowrap; justify-content:flex-end;}
.list-row .time{font-size:11px; color:var(--slate-400); white-space:nowrap; font-variant-numeric:tabular-nums;}
.list-row.unread{background:var(--steel-100); border-radius:9px; padding-left:10px; padding-right:10px;}
.list-row.urgent{
  background:#FDF2F0; border-left:3px solid var(--coral-500); border-radius:0 9px 9px 0;
  padding-left:10px; padding-right:10px;
}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:6px;
  font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  border:1px solid transparent;
}
.badge-pending{background:var(--amber-100); color:var(--amber-700); border-color:#EBD6A8;}
.badge-approved,.badge-verified,.badge-active,.badge-resolved{background:var(--green-100); color:var(--green-600); border-color:#BFDCC7;}
/* A hazard that is still happening. Green said "fine" next to a resolved row
   that was also green, so the one thing on the list that still needs someone
   is the one thing that reads as urgent. Accounts keep .badge-active green:
   an active account is good standing, not a live emergency. */
.badge-live{background:var(--coral-100); color:var(--coral-700); border-color:#EFC7C0;}
.badge-rejected,.badge-suspended{background:var(--coral-100); color:var(--coral-700); border-color:#EFC7C0;}
.badge-responding{background:var(--steel-100); color:var(--steel-600); border-color:#C6D8F6;}
.badge-assigned{background:var(--purple-100); color:var(--purple-700); border-color:#D3C9F0;}
.badge-high{background:var(--coral-100); color:var(--coral-700); border-color:#EFC7C0;}
.badge-medium{background:var(--amber-100); color:var(--amber-700); border-color:#EBD6A8;}
.badge-low{background:var(--slate-100); color:var(--slate-600); border-color:var(--slate-200);}
.badge-resolved-strong{background:var(--teal-100); color:var(--teal-700); border-color:#B8D9D3;}

.status-dot{width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px;}
.dot-green{background:var(--green-600);} .dot-amber{background:var(--amber-500);} .dot-gray{background:var(--slate-400);}

/* ---------- inline messages ---------- */
.message{font-size:12.5px; padding:9px 12px; border-radius:9px; display:none; border-left:3px solid transparent;}
.message.error{background:var(--coral-100); color:var(--coral-700); border-left-color:var(--coral-500); display:block;}
.message.success{background:var(--green-100); color:var(--green-600); border-left-color:var(--green-600); display:block;}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:6px; margin-bottom:16px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.tabs button{
  background:none; border:none; padding:9px 2px; font-size:12.5px; font-weight:600; color:var(--slate-600);
  border-bottom:2px solid transparent; margin-right:20px; cursor:pointer;
}
.tabs button:hover{color:var(--ink);}
.tabs button.active{color:var(--steel-600); border-color:var(--steel-600);}

/* ---------- filters and controls ---------- */
.filters-bar{display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.search-input{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:12.5px; color:var(--slate-400); flex:1; min-width:180px;
}
.search-input:focus-within{border-color:var(--steel-500); box-shadow:0 0 0 3px rgba(37,99,235,0.10);}
.search-input input{border:none; outline:none; font-size:12.5px; width:100%; background:transparent; color:var(--ink);}
.filter-select{
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 11px; font-size:12.5px;
  color:var(--ink-soft); display:flex; align-items:center; gap:6px;
}
.filter-select:focus{outline:none; border-color:var(--steel-500); box-shadow:0 0 0 3px rgba(37,99,235,0.10);}

.btn{
  border:1px solid transparent; border-radius:10px; padding:9px 15px; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; transition:background .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--grad-action); color:#fff; box-shadow:0 4px 10px rgba(226,124,45,.28);}
.btn-primary:hover{background:linear-gradient(90deg,#F4A63F,#E07A22);}
.btn-outline{background:var(--surface); border-color:var(--line); color:var(--ink);}
.btn-outline:hover{background:var(--slate-50); border-color:var(--slate-400);}
.btn-green{background:var(--green-600); color:#fff;}
.btn-green:hover{background:#156334;}
.btn-red{background:var(--coral-500); color:#fff;}
.btn-red:hover{background:var(--coral-700);}
.btn-red-outline{background:var(--surface); border-color:var(--coral-500); color:var(--coral-500);}
.btn-red-outline:hover{background:var(--coral-100);}
.btn-danger{background:var(--coral-500); color:#fff; border:none; box-shadow:none;}
.btn-danger:hover{background:var(--coral-700);}
.btn-sm{padding:7px 12px; font-size:12px;}
.btn-block{width:100%; justify-content:center;}
.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible{
  outline:2px solid var(--steel-500); outline-offset:2px;
}

/* ---------- pagination ---------- */
.pagination{
  display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line-soft); font-size:12px; color:var(--ink-soft);
}
.page-nums{display:flex; align-items:center; gap:5px;}
.page-nums button{
  min-width:27px; height:27px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  font-size:12px; color:var(--ink-soft);
}
.page-nums button:hover{background:var(--slate-50);}
.page-nums button.active{background:var(--grad-action); border-color:var(--brand-600); color:#fff; font-weight:700;}
.page-nums button.nav{border:none; background:transparent;}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,30,56,0.55); display:none; align-items:center; justify-content:center;
  z-index:1000; padding:20px;
}
.modal-overlay.active{display:flex;}
.modal-box{
  background:var(--surface); border-radius:16px; width:100%; max-width:1100px; max-height:94vh; overflow-y:auto;
  padding:0 28px 26px; box-shadow:var(--shadow-pop);
}
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin:0 -28px 20px; padding:18px 28px; border-bottom:1px solid var(--line); background:var(--grad-head);
  position:sticky; top:0; z-index:2; border-radius:15px 15px 0 0;
}
.modal-head .title-group{display:flex; gap:12px;}
.modal-head .icon-circle{
  width:36px; height:36px; border-radius:10px; background:var(--steel-100); color:var(--steel-600);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.modal-head h2{font-size:17px; font-weight:700;}
.modal-head p{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
.modal-close{
  width:28px; height:28px; border-radius:9px; border:1px solid var(--line); background:var(--surface);
  color:var(--slate-600); font-size:15px; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{background:var(--slate-100);}

.detail-row{display:flex; align-items:center; gap:10px; font-size:13.5px; padding:10px 0; border-bottom:1px solid var(--line-soft);}
.detail-row i{color:var(--slate-400); width:16px;}
.detail-row .k{color:var(--ink-soft); min-width:96px;}
.detail-row .v{font-weight:600;}

.notice{
  display:flex; gap:10px; background:var(--steel-100); color:var(--steel-600); font-size:12px;
  padding:10px 12px; border-radius:9px; border-left:3px solid var(--steel-500); margin-top:14px; line-height:1.5;
}

.map-placeholder{
  border-radius:10px; overflow:hidden; position:relative; height:180px; border:1px solid var(--line);
  background:var(--slate-100);
}
/* No rule for svg inside here. There was one, sizing a decorative placeholder
   illustration to the box, and no page draws that illustration any more - but
   every .map-placeholder is a real Leaflet map, and the rule was stretching
   Leaflet's own SVG: the little flag in its attribution blew up into a blue
   and yellow block across the map. */
.map-pin{
  position:absolute; width:24px; height:24px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(10,30,56,0.3);
}
.map-pin i{transform:rotate(45deg); color:#fff; font-size:12px;}

.attachments{display:flex; gap:10px; margin-top:8px;}
.attachments .thumb{
  width:62px; height:62px; border-radius:9px; background:var(--slate-100); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--slate-600); font-size:16px;
  position:relative; overflow:hidden;
}
.attachments .thumb.more{background:var(--steel-100); color:var(--steel-600); font-size:11px; font-weight:700; flex-direction:column; gap:2px;}

/* The frame is large enough that on a short screen the box scrolls, so the
   decision buttons stay pinned to its bottom edge rather than disappearing
   below a photo. The shadow paints over the box's own bottom padding. */
.modal-actions{
  display:flex; gap:10px; margin-top:24px; padding-top:14px;
  position:sticky; bottom:0; z-index:3;
  background:var(--surface); box-shadow:0 26px 0 var(--surface);
  border-top:1px solid var(--line-soft);
}
.modal-actions .btn{flex:1; justify-content:center; padding:13px; font-size:13.5px;}

/* ---------- user detail / validation ---------- */
.ud-section{
  font-size:10px; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:var(--slate-600); margin:18px 0 4px; padding-bottom:4px; border-bottom:1px solid var(--line-soft);
}
.ud-section:first-child{margin-top:0;}
.ud-proof{
  display:block; width:100%; max-height:260px; object-fit:contain;
  border:1px solid var(--line); border-radius:10px; background:var(--slate-50); margin-top:6px;
}
.ud-member{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:8px; font-size:12.5px;}
.ud-member-meta{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-soft); margin-top:4px;}
.ud-member-meta i{font-size:13px;}

/* ---------- click-to-view rows ---------- */
.clickable-row{cursor:pointer;}
.clickable-row:hover{background:var(--slate-50);}

/* ---------- leaflet, squared off to match the panels ---------- */
/* Leaflet numbers its own furniture from the page's stacking order: the zoom
   buttons and the attribution credit are z-index 1000, and .leaflet-container
   sets no z-index of its own, so those numbers competed with the console's
   chrome rather than staying inside the map. The +/- buttons and the OSM
   credit floated over the open sidebar (960) and could reach a modal overlay
   (1000) too. z-index on a positioned element makes each map its own stacking
   context, so every layer Leaflet creates is confined to it whatever number it
   is given - and 0 keeps the map itself exactly where it was in the page. */
.leaflet-container{border-radius:9px; font-family:'Inter',sans-serif; position:relative; z-index:0;}
.leaflet-control-zoom a{border-radius:8px !important; color:var(--ink) !important;}
.leaflet-popup-content-wrapper{border-radius:10px;}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  /* !important because pages set grid-template-columns inline to size their
     own two columns (the map beside its legend, the trend beside the donut).
     An inline style outranks a plain rule here, so without this the phone
     kept the desktop split and squeezed a map into a 40mm strip. */
  .stat-tiles{grid-template-columns:repeat(2,1fr) !important;}
  .grid-2, .grid-2-even, .grid-3{grid-template-columns:1fr !important;}
}
@media (max-width:1000px){
  .em-layout{grid-template-columns:1fr;}
  .em-map-card{position:relative; top:0;}
  .em-map{height:320px;}
}
/* The dimmed sheet behind the open drawer. Below the sidebar (960) and above
   the topbar (940), so the drawer stays lit and everything the drawer covers
   is both dimmed and tappable-to-close. It is only ever shown on the narrow
   layout, where the sidebar is a drawer at all. */
.sidebar-scrim{
  position:fixed; inset:0; z-index:950; background:rgba(10,30,56,0.42);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.sidebar-scrim.show{opacity:1; pointer-events:auto;}
@media (min-width:821px){ .sidebar-scrim{display:none;} }

@media (max-width:820px){
  .sidebar{position:fixed; left:-244px; top:0; bottom:0; height:100%; z-index:960; transition:left .2s;}
  .sidebar.open{left:0;}
  .topbar-sub{display:none;}
  .topbar{padding:0 12px; gap:10px;}
  .user-chip{padding-left:10px;}
  .user-chip .user-meta{display:none;}
  .content{padding:18px 16px 32px;}
}
@media (max-width:640px){
  .sos-alarm{padding:9px 14px; font-size:12.5px;}
  .sos-alarm-text{white-space:normal;}
  .stat-tiles{grid-template-columns:1fr !important;}
  .em-grid{grid-template-columns:1fr;}

  /* Stacked, the second card is a scroll away, so neither needs to fill the
     screen: a map taller than the viewport cannot be panned past on a phone,
     because the drag scrolls the map instead of the page. */
  .card{padding:14px;}
  .card-head{margin:-14px -14px 12px; padding:10px 14px;}
  .table-wrap{margin:0 -14px;}
  thead th:first-child, tbody td:first-child{padding-left:14px;}
  thead th:last-child, tbody td:last-child{padding-right:14px;}
  .page-head{padding-bottom:10px; margin-bottom:14px;}
  .page-title{font-size:17px;}
  .modal-box{padding:0 16px 16px;}
  .modal-head{margin:0 -16px 14px; padding:14px 16px;}

  /* Controls that sit side by side on a desktop have nowhere to go on a
     phone: the map's Map/Satellite switch and its status filter were running
     off the right edge rather than wrapping, because the row justifies them
     apart and the select never shrinks. Stack them instead. */
  .map-toolbar{flex-direction:column; align-items:stretch; gap:8px;}
  .map-toolbar .map-toggle{justify-content:center;}
  .map-filter-select, .filter-select, .search-input{width:100%; min-width:0;}
  .filters-bar{gap:8px;}
  .page-head{flex-direction:column; align-items:flex-start;}
  .modal-actions{flex-direction:column;}
}

/* ---------- installed on a phone ----------
   Once the app is on an iPhone's home screen there is no browser chrome left
   to hold the status bar and the home indicator off the page: the viewport
   runs edge to edge (viewport-fit=cover in every page head), so the topbar
   would sit under the clock and the sidebar's last menu item under the home
   indicator. env() is 0 on every device without those, so these rules cost
   nothing elsewhere. */
@media (display-mode: standalone) {
  .topbar{
    height:calc(var(--chrome-h) + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
  }
  .sidebar{padding-top:env(safe-area-inset-top, 0px); padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));}
  .content{
    padding-left:calc(26px + env(safe-area-inset-left, 0px));
    padding-right:calc(26px + env(safe-area-inset-right, 0px));
    padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
  }
}
@media (display-mode: standalone) and (max-width:820px) {
  .content{
    padding-left:calc(16px + env(safe-area-inset-left, 0px));
    padding-right:calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
  }
}

/* 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;}

/* ---------- paper ----------
   css/theme.css carries the print layout for Report Generation. It restores
   print values on :root, which this file's body[data-page] block would
   otherwise outrank, so the paper values are restated here. */
@media print{
  body[data-page]{
    --surface:#fff; --surface-2:#fff; --surface-3:#fff;
    --line:#C9CDD4; --line-soft:#E3E6EA;
    --ink:#000; --ink-soft:#333;
    --slate-50:#fff; --slate-100:#fff; --slate-600:#333; --slate-200:#C9CDD4;
  }
  .card-head{background:#fff !important; margin:0 0 8px; padding:0 0 6px;}
  .table-wrap{margin:0;}
  thead th:first-child, tbody td:first-child{padding-left:6px;}
  .sos-alarm, .nav-badge{display:none !important;}
}