/* Palette: Ink #17212c, Dusk #1c4f7a, Sky #7fb0d9, Ember #dd8a3f, Sand #f2ecdf — the same five
   colors used in the Benchmark mark itself (public/assets/img/favicon.svg), now driving the
   site's actual design tokens instead of sitting only inside that one image. Dark mode reuses
   Ink as the panel surface and Sand as the text color rather than inventing new ones. --warn is
   a deepened/brightened Ember per theme (tuned for text/badge contrast); the pure Ember hex is
   used directly and unadjusted for the decorative "Watch" wordmark accent (see .brand-watch). */
:root {
  color-scheme: light;
  --bg: #f2ecdf;
  --panel: #ffffff;
  --border: #e3dcce;
  --text: #17212c;
  --text-muted: #5c6673;
  --brand: #1c4f7a;
  --brand-dark: #163f61;
  --ok: #2f9e5c;
  --warn: #b8701f;
  --danger: #c8402a;
  --radius: 10px;
  --input-bg: #ffffff;
  --alert-error-bg: #fdeceb;
  --alert-error-border: #f3c6c0;
  --alert-success-bg: #ebf8f0;
  --alert-success-border: #bfe6cd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12161c;
    --panel: #17212c;
    --border: #2c3540;
    --text: #f2ecdf;
    --text-muted: #a39a8c;
    --brand: #7fb0d9;
    --brand-dark: #a7cbe8;
    --ok: #49b57b;
    --warn: #dd8a3f;
    --danger: #e2695c;
    --input-bg: #232b35;
    --alert-error-bg: #3a2320;
    --alert-error-border: #5c332c;
    --alert-success-bg: #1f3327;
    --alert-success-border: #2d4a38;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12161c;
  --panel: #17212c;
  --border: #2c3540;
  --text: #f2ecdf;
  --text-muted: #a39a8c;
  --brand: #7fb0d9;
  --brand-dark: #a7cbe8;
  --ok: #49b57b;
  --warn: #dd8a3f;
  --danger: #e2695c;
  --input-bg: #232b35;
  --alert-error-bg: #3a2320;
  --alert-error-border: #5c332c;
  --alert-success-bg: #1f3327;
  --alert-success-border: #2d4a38;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.wrap.wrap-wide { max-width: 1400px; }

a { color: var(--brand); }

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--text);
}
.brand-mark { display: block; flex: none; }
.brand-watch { font-style: italic; font-weight: 600; color: #dd8a3f; }
.brand-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-left: 6px;
}
.site-header nav { display: flex; align-items: center; gap: 18px; }
.site-header nav a { text-decoration: none; color: var(--text-muted); }
.btn-report {
  background: var(--brand);
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
}
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-toggle:hover { border-color: var(--brand); }

main.wrap { padding-top: 24px; padding-bottom: 48px; }

h1, h2, h3 { font-family: "Fraunces", Georgia, serif; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 12px; }
p.lede { color: var(--text-muted); margin-top: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filter-bar .field { display: flex; flex-direction: column; gap: 4px; }
.filter-bar label { font-size: 0.8rem; color: var(--text-muted); }
.filter-bar select, .filter-bar input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--input-bg);
  color: var(--text);
}
.filter-bar button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.filter-bar button:hover { background: var(--brand-dark); }
.clear-filters-link {
  display: inline-block;
  padding: 8px 4px;
  color: var(--text-muted);
  text-decoration: underline;
  font-size: 0.9rem;
}
.clear-filters-link:hover { color: var(--text); }

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-tile {
  flex: 1;
  min-width: 130px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-tile .n { font-family: "IBM Plex Mono", monospace; font-size: 1.6rem; font-weight: 600; }
.stat-tile .label { color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* The map deliberately always renders in its light-theme colors, regardless of site theme —
   see dashboard.js's neighborhoodStyle()/roadStyle()/boundaryStyle(). */
#map { height: 700px; border-radius: var(--radius); overflow: hidden; border: 1px solid #e3dcce; background: #e3dcce; }
.leaflet-container { background: #e3dcce; }
.leaflet-tooltip {
  background: #ffffff;
  color: #17212c;
  border: 1px solid #e3dcce;
}
.map-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 0.82rem; color: var(--text-muted); align-items: center; }
.legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.legend-line { display: inline-block; width: 14px; height: 2px; background: #5c6673; margin-right: 6px; vertical-align: 4px; }

.scroll-list { max-height: 480px; overflow-y: auto; }
.report-list { list-style: none; margin: 0; padding: 0; }
.report-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.report-list li:last-child { border-bottom: none; }
.report-meta { color: var(--text-muted); font-size: 0.85rem; }
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.badge-outage { background: var(--danger); }
.badge-speed { background: var(--warn); }
.badge-issue { background: var(--brand); }

.empty-state { color: var(--text-muted); padding: 24px 0; text-align: center; }

form.stacked { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
form.stacked label { font-weight: 600; font-size: 0.9rem; }
.hint { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
form.stacked input[type=text],
form.stacked input[type=password],
form.stacked input[type=number],
form.stacked input[type=date],
form.stacked textarea,
form.stacked select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
}
form.stacked textarea { min-height: 90px; }

.combobox { position: relative; }
.combobox-input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--input-bg);
  color: var(--text);
}
.combobox-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 4px;
}
.combobox-option {
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9rem;
}
.combobox-option:hover,
.combobox-option.active {
  background: var(--brand);
  color: #fff;
}
.combobox-empty { padding: 7px 10px; color: var(--text-muted); font-size: 0.85rem; }

.filter-bar .combobox { min-width: 220px; }
.speed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.submit-btn {
  padding: 11px 18px;
  border: none;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  align-self: flex-start;
}
.submit-btn:hover { background: var(--brand-dark); }

.alert { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.alert-error { background: var(--alert-error-bg); color: var(--danger); border: 1px solid var(--alert-error-border); }
.alert-success { background: var(--alert-success-bg); color: var(--ok); border: 1px solid var(--alert-success-border); }

.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* honeypot field is invisible to sighted users but a hidden label keeps it out of the tab order without display:none, which some bots skip */
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.admin-table th, table.admin-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.admin-table th { font-family: "IBM Plex Mono", monospace; color: var(--text-muted); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.scroll-table {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.scroll-table table.admin-table { margin: 0; }
.scroll-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  box-shadow: 0 1px 0 var(--border);
}
.scroll-table tbody td, .scroll-table tbody th { padding-left: 10px; }
.scroll-table table.admin-table tr:first-child td { border-top: none; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions button {
  padding: 4px 9px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 5px;
  cursor: pointer;
}
.row-actions button.danger { color: var(--danger); border-color: var(--alert-error-border); }
.status-hidden { color: var(--text-muted); }
.status-spam { color: var(--danger); }
.status-pending { color: var(--warn); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }

.login-box { max-width: 340px; margin: 60px auto; }

.site-footer {
  border-top: 1px solid var(--border);
  padding: 18px 0 40px;
  color: var(--text-muted);
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .site-header .wrap { flex-direction: column; gap: 10px; align-items: flex-start; }
  #map { height: 520px; }
}