:root {
  /* Jamaica brand palette — green, gold & black */
  --ink: #15271b;
  --ink-2: #203a28;
  --ink-soft: #5b7263;
  --paper: #fdfdfd;
  --paper-2: #f1f6f1;
  --line: #e1eae2;
  --coral: #009b3a;        /* Jamaica green — primary action */
  --coral-2: #00772c;      /* darker green — hover */
  --gold: #f4c20d;         /* Jamaica gold — secondary accent */
  --green-flag: #009b3a;
  --black-flag: #141414;
  --purple: #6977f8;
  --teal: #14b8a6;
  --amber: #f59e0b;
  --red: #dc2626;
  --green: #16a34a;
  --shadow: 0 8px 24px rgba(8,40,18,.12);
  --shadow-2: 0 14px 40px rgba(8,40,18,.20);
  --radius: 14px;
  --radius-sm: 8px;
  --sidebar-w: 320px;
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
}
h1,h2,h3,h4 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--ink); }

.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 14px; gap: 12px;
  z-index: 1100;
  box-shadow: 0 1px 0 rgba(8,40,18,.05);
}
/* Jamaica flag accent strip beneath the top bar */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, var(--green-flag) 0 38%, var(--gold) 38% 62%, var(--black-flag) 62% 100%);
}
.hamburger {
  width: 38px; height: 38px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hamburger span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }
.brand { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
.brand:has(.brand-logo) { flex-direction: row; align-items: center; gap: 10px; }
.brand-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 6px rgba(8,40,18,.18); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-mark { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; color: var(--coral); font-size: 17px; letter-spacing: -.3px; }
.brand-sub { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.topbar-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 8px 12px; border-radius: 10px; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 13px;
}
.btn:hover { background: var(--paper-2); }
.btn-ghost { background: transparent; }
.btn-primary { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-primary:hover { background: var(--coral-2); border-color: var(--coral-2); }
.btn-emergency { background: var(--red); color: #fff; border-color: var(--red); width: 100%; margin-top: 8px; }
.btn-emergency:hover { background: #b91c1c; }

.icon-btn { width: 32px; height: 32px; border: none; background: transparent; font-size: 20px; color: var(--ink-soft); border-radius: 8px; }
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }

.map-wrap {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0; bottom: 0;
}
.map-wrap.full { left: 0; }
#map { height: 100%; width: 100%; background: #e6eaf2; }

.map-overlay {
  position: absolute;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  z-index: 500;
  font-size: 12px;
}
.map-overlay.top-left { top: 12px; left: 12px; min-width: 280px; max-width: 320px; }
.map-overlay.bottom-left { bottom: 24px; left: 12px; }
/* When Emergency Dashboard is open, slide bottom-left widget down */
body.em-open .map-overlay.bottom-left { display: none; }
.map-overlay.top-right { top: 12px; right: 370px; width: 280px; }
.map-overlay.bottom-left { bottom: 24px; left: 12px; min-width: 200px; }
.map-overlay.bottom-right { bottom: 24px; right: 12px; display: flex; gap: 8px; align-items: center; }

.legend-head, .cond-head { font-weight: 700; color: var(--ink); margin-bottom: 6px; font-family: 'Plus Jakarta Sans', sans-serif; }
.legend-body { display: grid; gap: 6px; }
.legend-row { display: flex; align-items: center; gap: 8px; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }
.cond-row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--ink-soft); }
.cond-row b { color: var(--ink); font-weight: 700; }
.cond-row.weather { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 6px; }

.live-dot { width: 8px; height: 8px; background: #16a34a; border-radius: 50%; box-shadow: 0 0 0 0 rgba(22,163,74,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(22,163,74,.6)} 70%{box-shadow:0 0 0 10px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)} }
.live-time { color: var(--ink-soft); }

#searchPanel input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
#searchResults { margin-top: 6px; display: grid; gap: 4px; max-height: 280px; overflow: auto; }
#searchResults .res { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
#searchResults .res:hover { background: var(--paper-2); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(11,29,81,.4); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-card { background: #fff; border-radius: 16px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 22px; position: relative; box-shadow: var(--shadow-2); }
.modal-close { position: absolute; top: 12px; right: 14px; border: none; background: transparent; font-size: 24px; color: var(--ink-soft); cursor: pointer; }
.modal-card h3 { margin-bottom: 12px; font-size: 20px; }
.modal-card label { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 600; margin-bottom: 10px; }
.modal-card label input, .modal-card label select, .modal-card label textarea {
  display: block; width: 100%; margin-top: 4px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink);
}
.modal-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-card .file-drop input[type=file] { padding: 8px; }
.muted { color: var(--ink-soft); }
.small { font-size: 11px; }

.camera-frame { background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.camera-frame img { width: 100%; height: 100%; object-fit: cover; }
.camera-meta { padding: 10px 0; font-size: 13px; color: var(--ink-soft); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.upload-list-head { margin-top: 14px; font-weight: 700; font-size: 13px; color: var(--ink); }
.upload-list { list-style: none; padding: 0; margin: 6px 0 0; max-height: 200px; overflow: auto; }
.upload-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px; }
.upload-list .meta { color: var(--ink-soft); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px;
  z-index: 1500; box-shadow: var(--shadow-2); font-size: 13px;
}

/* Icons (minimal css shapes) */
.ic { width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; }
.ic-report { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b1d51" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>'); }
.ic-alert { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>'); }
.ic-cog { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b1d51" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'); }
.ic-search { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b1d51" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>'); }
.ic-upload { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b1d51" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>'); }
.ic-target { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b1d51" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/></svg>'); }
.ic-jamaica { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23009b3a" stroke="%23000" stroke-width="0.5"><path d="M2 4h20l-10 16z"/></svg>'); }
.ic-cluster { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b1d51" stroke-width="2"><circle cx="7" cy="7" r="3"/><circle cx="17" cy="7" r="3"/><circle cx="7" cy="17" r="3"/><circle cx="17" cy="17" r="3"/></svg>'); }

@media (max-width: 900px) {
  .topbar-actions .btn span { display: none; }
  .map-overlay.top-left { min-width: 0; max-width: 220px; }
  .map-overlay.top-right { width: calc(100% - 24px); right: 12px; left: 12px; }
}

/* Report form — incident type picker (tile selector, replaces dropdown) */
.modal-card .field { margin-bottom: 14px; }
.modal-card .field-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 8px;
}
.modal-card .type-tiles {
  display: grid; gap: 8px;
  grid-template-columns: repeat(4, 1fr);
}
.modal-card .type-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; margin: 0; padding: 12px 6px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s, transform .08s;
}
.modal-card .type-tile input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0;
}
.modal-card .type-tile .tt-ico { font-size: 23px; line-height: 1; }
.modal-card .type-tile .tt-name {
  font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.25;
}
.modal-card .type-tile:hover { border-color: #bfe3c9; background: var(--paper-2); }
.modal-card .type-tile:active { transform: scale(.97); }
.modal-card .type-tile:has(input:checked) {
  border-color: var(--coral); background: #e9f7ee;
  box-shadow: 0 0 0 3px rgba(0,155,58,.14);
}
.modal-card .type-tile:has(input:focus-visible) { border-color: var(--coral); }
@media (max-width: 480px) {
  .modal-card .type-tiles { grid-template-columns: repeat(3, 1fr); }
}

/* ---- mobile: map app topbar & overlays ---- */
@media (max-width: 600px) {
  .topbar { padding: 0 8px; gap: 6px; }
  .brand-logo { width: 32px; height: 32px; }
  .brand-sub { display: none; }
  .brand-mark { font-size: 16px; }
  .topbar-actions { gap: 2px; }
  .topbar-actions .btn { padding: 7px 8px; }
  .topbar-actions a[href="about.html"] { display: none; }
  .map-overlay.bottom-left { font-size: 11px; padding: 8px 10px; }
  .map-overlay.bottom-left, .map-overlay.bottom-right { bottom: 14px; }
  .modal { padding: 10px; align-items: flex-end; }
  .modal-card { max-height: 92vh; padding: 18px; border-radius: 16px 16px 0 0; }
}
@media (max-width: 380px) {
  .brand-text { display: none; }
}