/*
 * HOA Hub — Application Stylesheet
 * © Nexa Webdesign CC — nexawebdesign.com
 * Extracted from index.html — do not edit index.html CSS directly.
 */

/* ═══════════════════════════════════════════════════════════
   Design Direction: Industrial / Urban Infrastructure
   Dark slate + Amber/Orange accent (street lamp warm glow)
   Monospaced data, bold headlines, grid-heavy layout
═══════════════════════════════════════════════════════════ */
:root {
  --bg:          #0b0f1e;
  --surface:     #131929;
  --surface2:    #1a2238;
  --surface3:    #1f293d;
  --border:      #263048;
  --border2:     #2e3d5c;
  --amber:       #f97316;
  --amber-glow:  rgba(249,115,22,0.15);
  --amber-dim:   #c05a0b;
  --green:       #22c55e;
  --green-glow:  rgba(34,197,94,0.12);
  --red:         #ef4444;
  --red-glow:    rgba(239,68,68,0.12);
  --yellow:      #eab308;
  --blue:        #3b82f6;
  --text:        #e2e8f0;
  --text-muted:  #64748b;
  --text-dim:    #94a3b8;
  --mono:        'JetBrains Mono', monospace;
  --sans:        'Syne', sans-serif;
  --radius:      8px;
  --radius-lg:   14px;
  --shadow:      0 4px 24px rgba(0,0,0,0.4);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bot:    env(safe-area-inset-bottom, 0px);
}

/* ── Light Theme ───────────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #f1f5f9;
  --surface:     #ffffff;
  --surface2:    #f8fafc;
  --surface3:    #f1f5f9;
  --border:      #e2e8f0;
  --border2:     #cbd5e1;
  --amber:       #ea6c00;
  --amber-glow:  rgba(234,108,0,0.1);
  --amber-dim:   #c05a0b;
  --green:       #16a34a;
  --green-glow:  rgba(22,163,74,0.1);
  --red:         #dc2626;
  --red-glow:    rgba(220,38,38,0.1);
  --yellow:      #ca8a04;
  --blue:        #2563eb;
  --text:        #0f172a;
  --text-muted:  #94a3b8;
  --text-dim:    #475569;
  --shadow:      0 4px 24px rgba(0,0,0,0.1);
}

/* Light-mode overrides for elements that use hard-coded dark colours */
[data-theme="light"] .app-header             { background: #ffffff; border-bottom: 1px solid var(--border); }
[data-theme="light"] .nav-bar                { background: #ffffff; border-top: 1px solid var(--border); }
[data-theme="light"] .login-card             { background: #ffffff; }
[data-theme="light"] .form-control           { background: #f8fafc; color: var(--text); border-color: var(--border); }
[data-theme="light"] .form-control:focus     { background: #ffffff; }
[data-theme="light"] .card                   { background: #ffffff; }
[data-theme="light"] .stat-card              { background: #ffffff; }
[data-theme="light"] .setting-row            { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .suburb-panel-header    { background: #f8fafc; }
[data-theme="light"] .suburb-panel-body      { background: #ffffff; }
[data-theme="light"] .suburb-street-panel    { border-color: var(--border); }
[data-theme="light"] .status-btn             { background: #f8fafc; border-color: var(--border); color: var(--text-dim); }
[data-theme="light"] .status-btn.selected    { border-color: var(--amber); }
[data-theme="light"] .nav-tab                { color: var(--text-muted); }
[data-theme="light"] .nav-tab.active         { color: var(--amber); }
[data-theme="light"] .filter-chip            { background: #f1f5f9; color: var(--text-dim); border-color: var(--border); }
[data-theme="light"] .filter-chip.active     { background: var(--amber-glow); color: var(--amber); border-color: var(--amber); }
[data-theme="light"] .report-card            { background: #ffffff; }
[data-theme="light"] .map-controls           { background: #ffffff; border-bottom: 1px solid var(--border); }
[data-theme="light"] .map-legend             { background: rgba(255,255,255,0.95); }
[data-theme="light"] #leaflet-map            { background: #e5e7eb; }
[data-theme="light"] .leaflet-container      { background: #e5e7eb !important; }

/* Live Street Indicator */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(249,115,22,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(249,115,22,0); }
  100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}
.live-dot-active {
  background: var(--amber) !important;
  animation: pulse-dot 1.8s infinite;
}
.live-dot-searching {
  background: var(--yellow, #f59e0b) !important;
  animation: pulse-dot 0.8s infinite;
}
[data-theme="light"] #live-street-card {
  background: rgba(249,115,22,0.05);
  border-color: rgba(249,115,22,0.25);
}
[data-theme="light"] .gps-btn               { background: #f1f5f9; border-color: var(--border); color: var(--text); }
[data-theme="light"] .gps-btn:hover         { border-color: var(--amber); color: var(--amber); }
[data-theme="light"] code                    { background: #f1f5f9; color: var(--text-dim); }
[data-theme="light"] #server-cfg-section     { background: #f8fafc; border-color: var(--border); }
[data-theme="light"] #login-overlay          { background: #f1f5f9; }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Bulletproof hide: overrides all other display rules incl. iOS Safari SVG/form quirks ── */
[hidden],
.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Prevent double-tap zoom on all tappable elements */
button, a, select, input, textarea, label, [role="button"] {
  touch-action: manipulation;
}

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prevent any horizontal scroll at the root */
  overscroll-behavior: none;
}

body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  max-width: 100%;
  /* Stop pinch-zoom and horizontal pan at CSS level */
  touch-action: pan-y;
  /* Prevent rubber-band / bounce scrolling on Android Chrome */
  overscroll-behavior: none;
  /* Clamp anything that might bleed past the edge */
  position: fixed;
  inset: 0;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ── Layout Shell ──────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--safe-top) + 10px) 16px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
  position: relative;
  flex-shrink: 0;
}

.header-logo {
  width: 38px; height: 38px;
  background: var(--amber);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(249,115,22,0.4);
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%,100% { box-shadow: 0 0 20px rgba(249,115,22,0.4); }
  50%      { box-shadow: 0 0 35px rgba(249,115,22,0.7); }
}

.header-title {
  flex: 1 1 0;       /* can both grow AND shrink below content size */
  min-width: 0;      /* critical — allows flex child to shrink below text width */
  overflow: hidden;
}
.header-title h1 {
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.05em; line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-title p {
  font-size: 10px; color: var(--text-muted);
  font-family: var(--mono); margin-top: 2px;
  letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Connectivity badge */
.conn-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  border: 1px solid;
  transition: all 0.4s ease;
  white-space: nowrap;
}
.conn-badge.online  { background: var(--green-glow); border-color: var(--green); color: var(--green); }
.conn-badge.offline { background: var(--red-glow);   border-color: var(--red);   color: var(--red); }
.conn-badge::before {
  content: ''; width: 7px; height: 7px;
  border-radius: 50%; background: currentColor;
  animation: blink 1.5s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Sync badge */
.sync-badge {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 99px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  background: var(--amber-glow); border: 1px solid var(--amber);
  color: var(--amber); cursor: pointer; white-space: nowrap;
  transition: opacity 0.3s;
}
.sync-badge:hover { opacity: 0.8; }
.sync-badge.hidden { display: none; }
.sync-badge svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Nav Tabs ──────────────────────────────────────────────── */
nav {
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 4px 4px calc(var(--safe-bot) + 4px);
  gap: 2px;
  flex-shrink: 0;
}

.nav-tab {
  flex: 1; padding: 6px 2px; border: none;
  background: transparent; cursor: pointer;
  border-radius: var(--radius); transition: all 0.2s;
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  color: var(--text-muted);
}
.nav-tab svg { width: 18px; height: 18px; transition: color 0.2s; }
.nav-tab span { font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: 0.04em; }
.nav-tab.active { color: var(--amber); background: var(--amber-glow); }
.nav-tab:not(.active):hover { color: var(--text-dim); background: var(--surface3); }
/* Patrol tab active state uses green */
.nav-tab[data-page="patrol"].active { color: #22c55e; background: rgba(34,197,94,0.12); }

/* ── Content Area ──────────────────────────────────────────── */
main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.page { display: none; padding: 16px; }
.page.active { display: block; min-height: 100%; }
#page-map.active      { display: flex; flex-direction: column; padding: 0; min-height: 0; }
/* Settings/admin page must fill full height so admin-panel flex layout works */
#page-settings.active {
  display: flex; flex-direction: column;
  padding: 0; height: 100%; min-height: 0; overflow: hidden;
}
#admin-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
/* Module pages with header + scrollable list */
#page-notices.active, #page-visitors.active, #page-voting.active, #page-patrol.active {
  display: flex; flex-direction: column; padding: 0; min-height: 0; height: 100%;
}
#page-notices  #member-notices-list,
#page-visitors #member-passes-list,
#page-voting   #member-meetings-list { flex: 1; overflow-y: auto; }

/* ── Dashboard ─────────────────────────────────────────────── */
.section-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 20px;
}

.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
  position: relative; overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.stat-card:active { transform: scale(0.97); }

.stat-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}
.stat-card.total::before    { background: var(--blue); }
.stat-card.faulty::before   { background: var(--red); }
.stat-card.working::before  { background: var(--green); }
.stat-card.pending::before  { background: var(--amber); }

.stat-card .s-label {
  font-family: var(--mono); font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px;
}
.stat-card .s-value {
  font-family: var(--mono); font-size: 32px; font-weight: 700;
  line-height: 1;
}
.stat-card.total   .s-value { color: var(--blue); }
.stat-card.faulty  .s-value { color: var(--red); }
.stat-card.working .s-value { color: var(--green); }
.stat-card.pending .s-value { color: var(--amber); }

.stat-card .s-sub {
  font-family: var(--mono); font-size: 9px;
  color: var(--text-muted); margin-top: 4px;
}

.stat-icon {
  position: absolute; right: 12px; top: 12px; font-size: 24px; opacity: 0.2;
}

/* Street report table */
.street-table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 16px;
}

.street-table-wrap table {
  width: 100%; border-collapse: collapse;
}
.street-table-wrap thead tr {
  background: var(--surface3); border-bottom: 1px solid var(--border2);
}
.street-table-wrap th {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); padding: 10px 12px; text-align: left;
}
.street-table-wrap td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px;
}
.street-table-wrap tr:last-child td { border-bottom: none; }
.street-table-wrap tr:hover td { background: var(--surface3); }

.street-name-cell { font-weight: 600; color: var(--text); }
.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 8px;
  border-radius: 99px; font-size: 11px; font-weight: 700;
}
.count-pill.faulty  { background: var(--red-glow);   color: var(--red);   border: 1px solid rgba(239,68,68,0.3); }
.count-pill.working { background: var(--green-glow);  color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.count-pill.total   { background: rgba(59,130,246,0.1); color: var(--blue); border: 1px solid rgba(59,130,246,0.3); }

.empty-state {
  padding: 40px 20px; text-align: center;
  color: var(--text-muted); font-family: var(--mono); font-size: 12px;
}
.empty-state .empty-icon { font-size: 36px; margin-bottom: 10px; }

/* recent reports */
.report-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 12px 10px;
  margin-bottom: 8px; display: flex; flex-direction: column; gap: 0;
  transition: border-color 0.2s;
}
.report-card.faulty  { border-left: 3px solid var(--red); }
.report-card.working { border-left: 3px solid var(--green); }
.report-card.unknown { border-left: 3px solid var(--yellow); }

/* Top row: dot + street + status dot */
.rc-top {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px;
}
.rc-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
}
.report-card.faulty  .rc-status-dot { background: var(--red);   box-shadow: 0 0 8px var(--red); }
.report-card.working .rc-status-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.report-card.unknown .rc-status-dot { background: var(--yellow); }

.rc-body { flex: 1; min-width: 0; }
.rc-street {
  font-weight: 700; font-size: 13px; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-pole  {
  font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-bottom: 4px;
}

/* Status + fault type badge row */
.rc-status-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px;
}
.rc-status-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; letter-spacing: .04em;
}
.rc-status-badge.faulty  { color: var(--red);    background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.25); }
.rc-status-badge.working { color: var(--green);  background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.25); }
.rc-status-badge.unknown { color: var(--yellow); background: rgba(234,179,8,.12);  border: 1px solid rgba(234,179,8,.25); }
.rc-fault-badge {
  font-family: var(--mono); font-size: 9px; color: var(--text-dim);
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 4px; padding: 2px 6px;
}

/* Reporter row */
.rc-reporter {
  font-family: var(--mono); font-size: 10px; color: var(--text2);
  margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
}
.rc-reporter strong { color: var(--amber); font-weight: 600; }

/* Notes preview */
.rc-notes {
  font-size: 11px; color: var(--text-dim); font-style: italic;
  margin-bottom: 5px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.4;
}

.rc-meta  {
  font-family: var(--mono); font-size: 9px; color: var(--text-muted);
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}

/* Action bar — full width at bottom */
.rc-actions {
  display: flex; gap: 6px; border-top: 1px solid var(--border);
  padding-top: 8px; margin-top: 2px;
}
.rc-actions button {
  flex: 1; background: none; border: 1px solid var(--border2);
  color: var(--text-dim); border-radius: 6px;
  padding: 5px 4px; font-family: var(--mono); font-size: 10px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.rc-actions button.view-btn:hover { border-color: var(--amber); color: var(--amber); }
.rc-actions button.edit-btn { color: var(--blue, #60a5fa); border-color: rgba(96,165,250,.3); }
.rc-actions button.edit-btn:hover { background: rgba(96,165,250,.08); border-color: var(--blue, #60a5fa); }
.rc-actions button.del-btn  { color: var(--red); border-color: rgba(239,68,68,.3); }
.rc-actions button.del-btn:hover  { background: var(--red-glow); }

/* pending sync tag */
.sync-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--mono); font-size: 8px; font-weight: 700;
  color: var(--amber); background: var(--amber-glow);
  border: 1px solid rgba(249,115,22,0.3); border-radius: 4px;
  padding: 2px 5px;
}

/* ── Repair Report Preview (in-app overlay) ───────────────── */
#rr-content .rr-header { display:flex;align-items:center;gap:14px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:2px solid var(--red); }
#rr-content .rr-wordmark { font-size:22px;font-weight:900;color:var(--red);letter-spacing:-.5px;font-family:var(--mono); }
#rr-content .rr-title  { font-size:18px;font-weight:800;color:var(--red);letter-spacing:-.3px; }
#rr-content .rr-org    { font-size:10px;color:var(--text-muted);margin-top:2px; }
#rr-content .rr-meta-bar { display:flex;gap:16px;flex-wrap:wrap;background:rgba(239,68,68,.07);
  border:1px solid rgba(239,68,68,.2);border-radius:6px;padding:7px 12px;margin-bottom:14px;
  font-family:var(--mono);font-size:10px;color:var(--text2); }
#rr-content .rr-meta-bar strong { color:var(--red); }
#rr-content .rr-section-title { font-size:11px;font-weight:700;color:var(--red);margin:0 0 6px;
  text-transform:uppercase;letter-spacing:.06em; }
#rr-content .rr-summary-table { width:100%;margin-bottom:18px; }
#rr-content .rr-suburb-dot { display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:6px;vertical-align:middle; }
#rr-content .rr-suburb-section { margin-bottom:20px; }
#rr-content .rr-suburb-header  { display:flex;justify-content:space-between;align-items:center;
  padding:7px 12px;background:var(--surface2);margin-bottom:8px;border-radius:0 6px 6px 0; }
#rr-content .rr-suburb-name  { font-size:13px;font-weight:800;color:var(--text); }
#rr-content .rr-suburb-count { font-size:10px;color:var(--text-muted);font-family:var(--mono); }
#rr-content .rr-map-container { margin-bottom:8px;border-radius:8px;overflow:hidden;border:1px solid var(--border); }
#rr-content .rr-map-img       { display:block;width:100%;max-height:220px;object-fit:cover; }
#rr-content .rr-map-fallback  { padding:10px 14px;background:var(--surface2);font-size:10px;color:var(--text-muted); }
#rr-content .rr-map-fallback a { color:var(--amber); }
#rr-content .rr-table a { color:var(--blue, #60a5fa); text-decoration:underline; }
#rr-content .rr-table { width:100%;border-collapse:collapse;margin-bottom:8px;font-size:10px; }
#rr-content .rr-table th { background:rgba(239,68,68,.15);color:var(--red);padding:5px 6px;
  text-align:left;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid rgba(239,68,68,.3); }
#rr-content .rr-table td { padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:top;color:var(--text2); }
#rr-content .rr-row-alt td { background:var(--surface2); }
#rr-content .rr-table tfoot td { background:rgba(239,68,68,.07);font-weight:700;border-top:2px solid rgba(239,68,68,.3); }
#rr-content .rr-marker-num { display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;color:#fff;font-size:9px;font-weight:800; }
#rr-content .rr-repair-row { display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  background:var(--surface2);border:1px dashed var(--border2);border-radius:6px;
  padding:8px 12px;margin-top:6px;font-size:10px;color:var(--text-muted); }
#rr-content .rr-sign-line  { flex:1;min-width:140px;border-bottom:1px solid var(--border2);padding-bottom:2px; }
#rr-content .rr-footer { text-align:center;font-size:9px;color:var(--text-muted);margin-top:24px;
  padding-top:8px;border-top:1px solid var(--border); }

/* ── Map Page ──────────────────────────────────────────────── */
/* GPS dot pulse animation */
@keyframes gpsPulse {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}
.map-gps-dot-wrap {
  position: relative; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
}
.map-gps-dot-wrap::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #22c55e;
  opacity: 0.35;
  animation: gpsPulse 2s ease-out infinite;
}
.map-gps-dot-inner {
  width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.5), 0 2px 8px rgba(0,0,0,0.5);
  position: relative; z-index: 1;
}
/* Report Here floating button */
#map-report-btn {
  position: absolute;
  bottom: 54px; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  background: var(--amber);
  color: #000;
  border: none;
  border-radius: 28px;
  padding: 12px 24px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 20px rgba(249,115,22,0.5), 0 2px 8px rgba(0,0,0,0.4);
  cursor: pointer;
  display: none;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}
#map-report-btn:active {
  transform: translateX(-50%) scale(0.96);
  box-shadow: 0 2px 10px rgba(249,115,22,0.4);
}
#map-report-btn.locating {
  background: var(--surface2);
  color: var(--text-muted);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#map-recenter-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 1001;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: #22c55e;
  font-size: 20px;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  transition: transform 0.15s, background 0.15s;
  line-height: 1;
}
#map-recenter-btn:active { transform: scale(0.88); background: var(--surface2); }

.map-controls {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 8px 10px; display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; overflow: hidden; width: 100%;
}
.map-controls select {
  flex: 1; min-width: 0;        /* allow shrinking below content size */
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); border-radius: var(--radius); padding: 7px 6px;
  font-family: var(--mono);
  /* MUST be 16px — anything smaller triggers Android viewport zoom on focus */
  font-size: 16px;
  outline: none; max-width: 100%;
  /* Truncate long option text rather than overflow */
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.map-controls select:focus { border-color: var(--amber); }
.map-controls .gps-btn {
  flex-shrink: 0;     /* buttons never shrink — they're secondary to the selects */
}
#map-polygon-btn.active {
  background: var(--amber-glow);
  border-color: var(--amber);
  color: var(--amber);
}

/* Suburb polygon labels (Leaflet) */
.suburb-poly-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--amber) !important;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  pointer-events: none;
}
.suburb-poly-label::before { display: none !important; }


.map-legend {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 8px 12px; display: flex; gap: 14px; justify-content: center;
}
.legend-item {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; color: var(--text-muted);
}
.legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
}

/* ── Form Page ─────────────────────────────────────────────── */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px;
}

.form-group { margin-bottom: 14px; }

.form-label {
  display: block; font-family: var(--mono); font-size: 9px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin-bottom: 6px;
}
.form-label span.req { color: var(--amber); }

.form-control {
  width: 100%; background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); border-radius: var(--radius); padding: 10px 12px;
  font-family: var(--mono);
  /* 16px prevents iOS/Android from auto-zooming the viewport on focus */
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s ease, font-size 0.15s ease;
  -webkit-appearance: none; appearance: none;
  /* Ensure no horizontal overflow on small screens */
  max-width: 100%;
}
.form-control:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow), 0 4px 16px rgba(0,0,0,0.25);
  /* Zoom the focused field so the user can read it clearly —
     replaces device-level pinch-zoom which is disabled */
  transform: scale(1.035);
  transform-origin: top left;
  position: relative;
  z-index: 10;
}
.form-control.error { border-color: var(--red); }
.form-control::placeholder { color: var(--text-muted); }

textarea.form-control { resize: vertical; min-height: 80px; }

select.form-control option { background: var(--surface2); }


/* Status buttons */
.status-group {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.status-btn {
  padding: 10px; border: 1px solid var(--border2);
  border-radius: var(--radius); background: var(--surface2);
  color: var(--text-muted); cursor: pointer; font-family: var(--mono);
  font-size: 10px; font-weight: 700; text-align: center;
  transition: all 0.2s; display: flex; flex-direction: column;
  align-items: center; gap: 4px; -webkit-appearance: none;
}
.status-btn .sb-icon { font-size: 18px; }
.status-btn.selected         { background: var(--amber-glow); border-color: var(--amber); color: var(--amber); }
.status-btn.selected.faulty  { background: var(--red-glow);   border-color: var(--red);   color: var(--red); }
.status-btn.selected.working { background: var(--green-glow);  border-color: var(--green); color: var(--green); }
.status-btn.selected.unknown { background: rgba(234,179,8,0.1); border-color: var(--yellow); color: var(--yellow); }

/* ── Category picker ─────────────────────────────────────────────────── */
.cat-btn {
  padding: 8px 4px; border: 1px solid var(--border2);
  border-radius: var(--radius); background: var(--surface2);
  color: var(--text-muted); cursor: pointer; font-family: var(--mono);
  font-size: 9px; font-weight: 700; text-align: center;
  transition: all 0.18s; display: flex; flex-direction: column;
  align-items: center; gap: 3px; -webkit-appearance: none;
  touch-action: manipulation;
}
.cat-btn .cat-icon { font-size: 20px; line-height: 1; }
.cat-btn.selected  { border-width: 2px; }

/* ── Priority buttons ────────────────────────────────────────────────── */
.pri-btn {
  flex: 1; min-width: 0; padding: 7px 4px; border: 1px solid var(--border2);
  border-radius: var(--radius); background: var(--surface2);
  color: var(--text-muted); cursor: pointer; font-family: var(--mono);
  font-size: 9px; font-weight: 700; text-align: center;
  transition: all 0.18s; -webkit-appearance: none; touch-action: manipulation;
}
.pri-btn.selected { border-width: 2px; }

/* GPS */
.gps-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px;
  align-items: flex-end;
}
.gps-btn {
  height: 40px; padding: 0 12px; border: 1px solid var(--border2);
  background: var(--surface3); color: var(--text-dim);
  border-radius: var(--radius); cursor: pointer; font-family: var(--mono);
  font-size: 10px; font-weight: 700; display: flex; align-items: center;
  gap: 5px; transition: all 0.2s; white-space: nowrap; -webkit-appearance: none;
}
.gps-btn:hover { border-color: var(--amber); color: var(--amber); }
.gps-btn.acquiring { border-color: var(--amber); color: var(--amber); animation: gps-pulse 1s ease-in-out infinite; }
@keyframes gps-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* Photo */
.photo-drop {
  border: 2px dashed var(--border2); border-radius: var(--radius-lg);
  padding: 24px; text-align: center; cursor: pointer; transition: all 0.2s;
  background: var(--surface2);
}
.photo-drop:hover, .photo-drop.drag-over { border-color: var(--amber); background: var(--amber-glow); }
.photo-drop input { display: none; }
.photo-drop p { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-top: 6px; }
#photo-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#photo-preview img {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border2);
}

/* Submit btn */
.btn-primary {
  width: 100%; padding: 14px; border: none;
  background: var(--amber); color: #000;
  border-radius: var(--radius-lg); font-family: var(--mono);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer; transition: all 0.2s; -webkit-appearance: none;
  text-transform: uppercase;
}
.btn-primary:hover  { background: #ff8c3a; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  width: 100%; padding: 10px; border: 1px solid var(--border2);
  background: var(--surface3); color: var(--text-dim);
  border-radius: var(--radius-lg); font-family: var(--mono);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; -webkit-appearance: none; margin-bottom: 8px;
}
.btn-secondary:hover { border-color: var(--amber); color: var(--amber); }

/* Error messages */
.field-error { font-family: var(--mono); font-size: 9px; color: var(--red); margin-top: 4px; }

/* ── Settings Page ──────────────────────────────────────────── */
.setting-row {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px; margin-bottom: 10px;
}
.setting-row h3 { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.setting-row p  { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-bottom: 10px; }

/* ── Admin Settings Panel ──────────────────────────────────── */
.aps-section { border-bottom: 1px solid var(--border); }
.aps-section:last-of-type { border-bottom: none; }
.aps-section-hdr {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--amber); text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 14px 10px; background: rgba(217,119,6,0.04);
  border-bottom: 1px solid var(--border);
}
.aps-body { padding: 14px 14px 8px; }
.aps-hint {
  display: block; font-family: var(--mono); font-size: 10px;
  color: var(--text-muted); font-weight: 400; margin-top: 1px;
}

.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-label { font-size: 12px; }
.toggle-label small { display: block; font-family: var(--mono); font-size: 9px; color: var(--text-muted); margin-top: 2px; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border2); border-radius: 22px; transition: 0.3s;
}
.slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s;
}
input:checked + .slider { background: var(--amber); }
input:checked + .slider::before { transform: translateX(18px); }

/* ── Toast ─────────────────────────────────────────────────── */
#toast-container {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column;
  align-items: center; gap: 6px; pointer-events: none;
  width: calc(100% - 32px); max-width: 380px;
}
.toast {
  background: var(--surface2); border: 1px solid var(--border2);
  color: var(--text); border-radius: var(--radius);
  padding: 10px 14px; font-family: var(--mono); font-size: 11px;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px;
  animation: toast-in 0.3s ease, toast-out 0.3s ease 2.5s forwards;
  pointer-events: auto; width: 100%; max-width: 380px;
}
.toast.success { border-color: var(--green); }
.toast.error   { border-color: var(--red); }
.toast.info    { border-color: var(--amber); }
@keyframes toast-in  { from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)} }
@keyframes toast-out { from{opacity:1} to{opacity:0; pointer-events:none} }
@keyframes banner-in { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }

/* ── Admin System Banners ───────────────────────────────────── */
#system-banners { position:sticky; top:0; z-index:900; display:flex; flex-direction:column; gap:0; flex-shrink:0; }
.sys-banner { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; font-size:12px; line-height:1.5; border-bottom:1px solid rgba(0,0,0,0.15); animation:banner-in 0.25s ease; }
.sys-banner.warn  { background:#78350f; color:#fef3c7; }
.sys-banner.error { background:#7f1d1d; color:#fee2e2; }
.sys-banner.info  { background:#1e3a5f; color:#dbeafe; }
.sys-banner-icon  { font-size:14px; flex-shrink:0; margin-top:1px; }
.sys-banner-body  { flex:1; min-width:0; }
.sys-banner-title { font-weight:700; font-size:12px; }
.sys-banner-msg   { font-size:11px; opacity:0.88; margin-top:1px; }
.sys-banner-actions { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; }
.sys-banner-btn { font-size:11px; font-weight:700; padding:3px 10px; border-radius:4px; border:1px solid currentColor; background:rgba(255,255,255,0.15); color:inherit; cursor:pointer; white-space:nowrap; }
.sys-banner-btn:hover { background:rgba(255,255,255,0.28); }
.sys-banner-close { flex-shrink:0; background:none; border:none; color:inherit; font-size:18px; cursor:pointer; opacity:0.6; padding:0 2px; line-height:1; align-self:flex-start; }
.sys-banner-close:hover { opacity:1; }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 1000; display: flex; align-items: flex-end; justify-content: center;
  animation: modal-bg-in 0.25s ease;
}
@keyframes modal-bg-in { from{opacity:0} to{opacity:1} }
.modal-overlay.hidden { display: none; }

.modal-sheet {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px 20px 0 0; padding: 20px 16px;
  width: 100%; max-width: 600px;
  animation: sheet-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 85vh; overflow-y: auto;
}
@keyframes sheet-in { from{transform:translateY(100%)} to{transform:translateY(0)} }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.modal-header h2 { font-size: 16px; font-weight: 800; }
.modal-close {
  background: var(--surface3); border: 1px solid var(--border2);
  color: var(--text); width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--red-glow); border-color: var(--red); color: var(--red); }

/* Pole detail */
.detail-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px;
}
.detail-row:last-child { border-bottom: none; }
.detail-key { color: var(--text-muted); width: 90px; flex-shrink: 0; }
.detail-val { color: var(--text); word-break: break-word; }

/* ── Scrollable sections ───────────────────────────────────── */
.page-section { margin-bottom: 20px; }

/* Progress bar for street table */
.fault-bar {
  height: 4px; border-radius: 2px; background: var(--border);
  margin-top: 4px; overflow: hidden;
}
.fault-bar-fill { height: 100%; border-radius: 2px; background: var(--red); transition: width 0.6s ease; }

/* Filter row */
.filter-row {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}
.filter-chip {
  padding: 5px 12px; border-radius: 99px; font-family: var(--mono);
  font-size: 10px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--border2); background: var(--surface);
  color: var(--text-muted); transition: all 0.2s;
}
.filter-chip.active { background: var(--amber-glow); border-color: var(--amber); color: var(--amber); }
.filter-chip:hover:not(.active) { border-color: var(--text-muted); color: var(--text); }

/* ── Places Autocomplete Dropdown ─────────────────────────────── */
.street-ac-list {
  display: none;
  pointer-events: none;   /* never intercept clicks when hidden */
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 500;
  max-height: 220px;
  overflow-y: auto;
}
.street-ac-list.open { display: block; pointer-events: auto; }
.street-ac-item {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: center;
}
.street-ac-item:last-child { border-bottom: none; }
.street-ac-item:hover, .street-ac-item.selected {
  background: var(--amber-glow);
  color: var(--amber);
}
.street-ac-item .ac-main { flex: 1; }
.street-ac-item .ac-secondary {
  font-size: 10px; color: var(--text-muted); white-space: nowrap;
}
.street-ac-powered {
  padding: 5px 12px;
  font-family: var(--mono); font-size: 9px;
  color: var(--text-muted); text-align: right;
  border-top: 1px solid var(--border);
  letter-spacing: 0.06em;
}
[data-theme="light"] .street-ac-list { background: #fff; border-color: #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
[data-theme="light"] .street-ac-item { border-color: #e8edf2; }

/* ── Responsive ────────────────────────────────────────────── */
@media (min-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .status-group { grid-template-columns: 1fr 1fr 1fr; }
}

/* Very narrow screens (< 360px) — compress header badges */
@media (max-width: 359px) {
  .conn-badge { font-size: 8px; padding: 3px 6px; }
  .sync-badge { font-size: 7px; padding: 3px 5px; }
  .header-title h1 { font-size: 12px; }
  /* Stack map controls selects vertically on tiny screens */
  .map-controls { flex-direction: column; align-items: stretch; }
  .map-controls select { width: 100%; }
}

/* ── Header overflow protection ────────────────────────────── */
header { overflow: hidden; }
header > * { min-width: 0; flex-shrink: 1; }
.header-logo { flex-shrink: 0; }   /* logo stays fixed size */

/* On narrow Android screens compress the header */
@media (max-width: 400px) {
  header { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .header-logo { width: 32px; height: 32px; font-size: 15px; }
  .header-title h1 { font-size: 12px; letter-spacing: 0.03em; }
  #user-badge { max-width: 90px; padding: 3px 7px; }
  /* Hide ONLINE/OFFLINE text label, keep just the dot via background */
  .conn-badge { font-size: 0; width: 10px; height: 10px; padding: 0;
                border-radius: 50%; min-width: 10px; flex-shrink: 0; }
}

@media (max-width: 360px) {
  header { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .header-title h1 { font-size: 11px; }
  #user-badge { max-width: 72px; }
}

/* Leaflet overrides */
.leaflet-container { background: #1a2238 !important; font-family: var(--mono); }
.leaflet-popup-content-wrapper {
  background: var(--surface2) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
}
.leaflet-popup-tip { background: var(--surface2) !important; }
.leaflet-popup-content { margin: 10px 12px !important; font-size: 11px !important; font-family: var(--mono); }
.leaflet-popup-content b { color: var(--amber); }

.custom-pole-marker {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 14px;
  border: 2px solid;
}

/* ── Login Overlay ─────────────────────────────────────────── */
#login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  transition: opacity 0.35s ease;
}
#login-overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0;
  pointer-events: none;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  width: 100%; max-width: 360px;
  box-shadow: var(--shadow);
}
.login-logo {
  width: 52px; height: 52px;
  background: var(--amber);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 0 auto 16px;
  box-shadow: 0 0 30px rgba(249,115,22,0.5);
  animation: glow-pulse 3s ease-in-out infinite;
}
.login-title {
  text-align: center; margin-bottom: 24px;
}
.login-title h2 {
  font-size: 18px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}
.login-title p {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-muted); letter-spacing: 0.1em;
}
#login-error {
  background: var(--red-glow); border: 1px solid var(--red);
  border-radius: var(--radius); padding: 10px 12px;
  font-size: 12px; color: var(--red);
  margin-bottom: 14px; display: none;
}
#login-btn {
  width: 100%; margin-top: 8px;
  position: relative; overflow: hidden;
}
#login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.login-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle; margin-right: 6px;
}

/* ── Suburb Street Panels ────────────────────────────────── */
.suburb-street-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.suburb-panel-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--amber); letter-spacing: 0.06em;
  user-select: none;
  transition: background 0.15s;
}
.suburb-panel-header:hover { background: rgba(249,115,22,0.06); }
.suburb-panel-count {
  margin-left: auto;
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 99px; padding: 1px 8px;
  font-size: 10px; color: var(--amber);
}
.suburb-panel-arrow { font-size: 10px; color: var(--text-muted); }
.suburb-panel-body { padding: 10px 12px; background: var(--bg); }
.suburb-panel-list { max-height: 200px; overflow-y: auto; }
.suburb-panel-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px;
}
.suburb-panel-item:last-child { border-bottom: none; }
.suburb-panel-item span { color: var(--text-dim); }
.suburb-panel-item .custom-tag {
  font-size: 9px; color: var(--amber);
  background: rgba(249,115,22,0.1); border-radius: 3px;
  padding: 1px 5px; margin-left: 6px;
}
.suburb-panel-item button {
  background: none; border: none; color: var(--red);
  cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1;
}
.suburb-panel-empty {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-muted); padding: 4px 0 8px;
}


#user-badge {
  display: none; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.3);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--blue);
  min-width: 0;          /* allow shrink */
  max-width: 120px;      /* cap so long usernames don't dominate */
  flex-shrink: 1;
  overflow: hidden;
}
#user-badge-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
#user-badge .role-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); flex-shrink: 0;
}
#user-badge.admin { color: var(--amber); border-color: rgba(249,115,22,0.3); background: var(--amber-glow); }
#user-badge.admin .role-dot { background: var(--amber); }
/* ══════════════════════════════════════════════════════════════
   PATROL PAGE
═══════════════════════════════════════════════════════════════ */

/* Patrol nav badge — shows active indicator dot on tab */
.nav-tab[data-page="patrol"] { position: relative; }
#patrol-active-dot {
  position: absolute; top: 5px; right: calc(50% - 12px);
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px #22c55e;
  animation: blink 1.5s ease-in-out infinite;
  display: none;
}

/* ── Patrol Idle ─────────────────────────────── */
#patrol-idle {
  display: flex; flex-direction: column;
  align-items: center; padding: 24px 16px;
  flex: 1; overflow-y: auto; min-height: 0;
}
.patrol-hero {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(34,197,94,0.12);
  border: 2px solid rgba(34,197,94,0.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 24px rgba(34,197,94,0.2);
}
.patrol-hero svg { color: #22c55e; }
#patrol-idle h2 {
  font-size: 16px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center; margin-bottom: 6px;
}
#patrol-idle p {
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  text-align: center; margin-bottom: 24px;
}

/* Live patroller count banner */
#live-patroller-banner {
  background: var(--surface2); border: 1px solid rgba(34,197,94,0.3);
  border-radius: var(--radius-lg); padding: 10px 14px;
  margin-bottom: 16px; width: 100%; text-align: left;
}
#live-patroller-count-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: #22c55e;
  margin-bottom: 2px;
}
#live-patroller-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  flex-shrink: 0; animation: gpsPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.3);
}
#live-patroller-list {
  font-size: 10px; color: var(--text-muted); line-height: 1.7; padding-left: 16px;
}

.patrol-setup-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; width: 100%;
  margin-bottom: 16px;
}

/* ── Patrol Active ───────────────────────────── */
#patrol-active { display: flex; flex-direction: column; flex: 1; overflow-y: auto; min-height: 0; }

.patrol-banner {
  background: rgba(34,197,94,0.1);
  border-bottom: 1px solid rgba(34,197,94,0.25);
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.patrol-banner-left {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: #22c55e; letter-spacing: 0.06em;
}
.patrol-banner-left::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px #22c55e;
  animation: blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
#patrol-timer {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  color: #22c55e; letter-spacing: 0.1em;
}
.patrol-stats-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.patrol-stat {
  padding: 8px 12px; text-align: center;
  border-right: 1px solid var(--border);
}
.patrol-stat:last-child { border-right: none; }
.patrol-stat-label {
  font-family: var(--mono); font-size: 8px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px;
}
.patrol-stat-value {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--text);
}

/* Mini trail map */
#patrol-trail-map {
  height: 220px; background: var(--surface); flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  position: relative; /* needed for re-centre button positioning */
}

/* Active actions bar */
.patrol-actions-bar {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.patrol-incident-btn {
  padding: 12px; border-radius: var(--radius-lg);
  border: 1px solid rgba(249,115,22,0.3);
  background: var(--amber-glow); color: var(--amber);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
}
.patrol-incident-btn:active { transform: scale(0.97); }
.patrol-panic-btn {
  padding: 12px; border-radius: var(--radius-lg);
  border: 2px solid #ef4444;
  background: rgba(239,68,68,0.12); color: #ef4444;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s;
  animation: panic-idle-pulse 3s ease-in-out infinite;
}
@keyframes panic-idle-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0.2); }
}
.patrol-panic-btn:active { transform: scale(0.97); }

/* Incidents list in active view */
.patrol-incidents-wrap {
  flex: 1; overflow-y: auto; padding: 0 16px 8px;
}
.patrol-incidents-wrap h4 {
  font-family: var(--mono); font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.08em; padding: 10px 0 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.patrol-incident-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px;
  border-left: 3px solid var(--amber);
}
.patrol-incident-card.resolved { border-left-color: #22c55e; opacity: 0.7; }
.pic-type { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text); }
.pic-meta { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.pic-addr { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

/* End patrol button */
.patrol-end-wrap { padding: 12px 16px; border-top: 1px solid var(--border); }
.patrol-end-btn {
  width: 100%; padding: 12px;
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-lg); color: #ef4444;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; cursor: pointer; transition: all 0.15s;
}
.patrol-end-btn:active { background: rgba(239,68,68,0.2); }

/* ── Patrol Summary ──────────────────────────── */
#patrol-summary { padding: 16px; }
.patrol-summary-hero {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 16px;
  text-align: center; margin-bottom: 16px;
}
.patrol-summary-hero h3 {
  font-size: 14px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: #22c55e; margin-bottom: 4px;
}
.patrol-summary-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin: 16px 0;
}
.pss-card {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 8px; text-align: center;
}
.pss-label { font-family: var(--mono); font-size: 8px; color: var(--text-muted); text-transform: uppercase; }
.pss-val   { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text); }

/* ── Incident Modal ──────────────────────────── */
#patrol-incident-modal .modal-body { padding: 16px; overflow-y: auto; max-height: 70vh; }
.incident-type-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}
.incident-type-btn {
  padding: 10px 8px; border-radius: var(--radius);
  border: 1px solid var(--border2);
  background: var(--surface2); cursor: pointer;
  text-align: center; transition: all 0.15s;
  font-family: var(--mono); font-size: 10px; color: var(--text-muted);
}
.incident-type-btn .it-icon { font-size: 20px; display: block; margin-bottom: 4px; }
.incident-type-btn.selected {
  border-color: var(--amber); background: var(--amber-glow); color: var(--amber);
}
.incident-type-btn:active { transform: scale(0.97); }

/* ══════════════════════════════════════════════════════════════
   PANIC OVERLAY (triggered by THIS patroller)
═══════════════════════════════════════════════════════════════ */
#panic-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: #7f1d1d;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 24px;
}
.panic-icon-ring {
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(239,68,68,0.3);
  border: 3px solid #ef4444;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  animation: panic-ring-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
}
@keyframes panic-ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
  70%  { box-shadow: 0 0 0 20px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.panic-title {
  font-family: var(--mono); font-size: 22px; font-weight: 800;
  color: #fca5a5; letter-spacing: 0.1em; text-align: center;
  text-transform: uppercase; margin-bottom: 8px;
}
.panic-subtitle {
  font-family: var(--mono); font-size: 12px; color: #fca5a5;
  text-align: center; margin-bottom: 24px; opacity: 0.8;
}
.panic-coords {
  font-family: var(--mono); font-size: 11px; color: #fca5a5;
  text-align: center; margin-bottom: 8px; opacity: 0.7;
}
#panic-responders {
  font-family: var(--mono); font-size: 12px; color: #fca5a5;
  text-align: center; margin-bottom: 32px;
  min-height: 20px;
}
.panic-cancel-btn {
  padding: 14px 32px; border-radius: 99px;
  border: 2px solid #fca5a5; background: transparent;
  color: #fca5a5; font-family: var(--mono); font-size: 13px;
  font-weight: 700; letter-spacing: 0.06em; cursor: pointer;
  transition: all 0.2s;
}
.panic-cancel-btn:active { background: rgba(252,165,165,0.1); }

/* ══════════════════════════════════════════════════════════════
   PANIC ALERT OVERLAY (received FROM another patroller)
═══════════════════════════════════════════════════════════════ */
#panic-alert-overlay {
  position: fixed; inset: 0; z-index: 99997;
  background: rgba(0,0,0,0.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 24px;
  backdrop-filter: blur(4px);
}
.panic-alert-card {
  background: #7f1d1d; border: 2px solid #ef4444;
  border-radius: var(--radius-lg); padding: 20px 18px;
  width: 100%; max-width: 360px; text-align: center;
  animation: panic-alert-in 0.3s ease;
  box-shadow: 0 8px 40px rgba(239,68,68,0.5);
  max-height: 90vh; overflow-y: auto;
}
@keyframes panic-alert-in {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.panic-alert-header {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 10px;
}
.panic-alert-icon { font-size: 28px; }
.panic-alert-title {
  font-family: var(--mono); font-size: 16px; font-weight: 800;
  color: #fca5a5; letter-spacing: 0.08em; text-transform: uppercase;
}
.panic-alert-name {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: #fff; margin-bottom: 4px;
}
.panic-alert-meta {
  font-family: var(--mono); font-size: 11px; color: #fca5a5;
  margin-bottom: 4px; opacity: 0.8;
}
.panic-alert-addr {
  font-size: 11px; color: #fca5a5; margin-bottom: 12px; opacity: 0.7;
}
/* Embedded panic location map */
/* ── In-map panic navigation banner ───────────────────────────────── */
#map-panic-nav-bar {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  background: #ef4444;
  color: #fff;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 2px solid #b91c1c;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 9999;
  pointer-events: all;
  -webkit-user-select: none;
  touch-action: manipulation;
}
#map-panic-nav-bar.active { display: flex; }
#map-panic-nav-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#map-panic-nav-dist {
  flex-shrink: 0; background: rgba(0,0,0,0.25);
  padding: 2px 8px; border-radius: 20px;
  white-space: nowrap; font-size: 11px;
}
#map-panic-nav-stop {
  flex-shrink: 0;
  background: #fff;
  border: 2px solid #fff;
  color: #ef4444;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 900;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 80px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  touch-action: manipulation;
  position: relative;
  z-index: 10000;
}
#map-panic-nav-stop:active { background: #fee2e2; }
.map-panic-target-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: #ef4444; border: 3px solid #fff;
  animation: panicTargetPulse 1.2s ease-out infinite;
}
@keyframes panicTargetPulse {
  0%   { box-shadow: 0 0 0 2px #ef4444, 0 0 0 4px rgba(239,68,68,0.5); }
  70%  { box-shadow: 0 0 0 2px #ef4444, 0 0 0 18px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 2px #ef4444, 0 0 0 4px rgba(239,68,68,0); }
}

#pal-map-wrap {
  position: relative; margin: 0 -4px 14px; border-radius: 8px;
  overflow: hidden; border: 2px solid #ef4444;
}
#pal-map {
  height: 190px; background: #1e1e1e;
}
#pal-map-distance {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.75); color: #fff; font-family: var(--mono);
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  pointer-events: none; white-space: nowrap;
}
.panic-alert-btns { display: flex; flex-direction: column; gap: 8px; }
.panic-nav-btn {
  padding: 12px; border-radius: var(--radius-lg);
  background: #ef4444; border: none; color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; cursor: pointer;
}
.panic-ack-btn {
  padding: 12px; border-radius: var(--radius-lg);
  background: transparent; border: 2px solid #fca5a5; color: #fca5a5;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; cursor: pointer;
}
.panic-dismiss-btn {
  padding: 8px; background: transparent; border: none; color: #fca5a5;
  font-family: var(--mono); font-size: 11px; cursor: pointer; opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN DASHBOARD
═══════════════════════════════════════════════════════════════ */

/* Nav tab override for admin */
.nav-tab[data-page="settings"].admin-mode { color: var(--amber); }

/* Admin internal tab bar */
.admin-tabbar {
  display: flex; overflow-x: auto; background: var(--surface2);
  border-bottom: 2px solid var(--amber); flex-shrink: 0;
  scrollbar-width: none;
}
.admin-tabbar::-webkit-scrollbar { display: none; }
.admin-tab {
  flex-shrink: 0; padding: 10px 14px; border: none; background: transparent;
  cursor: pointer; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-muted); white-space: nowrap;
  transition: all 0.15s; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.admin-tab.active { color: var(--amber); border-bottom-color: var(--amber); background: var(--amber-glow); }

/* Admin panel fills the page */
.admin-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0; min-height: 0; }
.admin-content.hidden { display: none !important; }

/* Admin stat cards */
.admin-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 14px 14px 0;
}
.admin-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px;
}
.asc-label { font-family: var(--mono); font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.asc-value { font-family: var(--mono); font-size: 24px; font-weight: 800; color: var(--text); }
.asc-sub   { font-family: var(--mono); font-size: 9px; color: var(--text-muted); margin-top: 2px; }

/* Admin section headers */
.admin-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.admin-section-hdr h3 {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--text); text-transform: uppercase;
}

/* Members list */
.member-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  margin: 0 14px 8px; display: flex; align-items: center; gap: 12px;
}
.member-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface3); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--amber); flex-shrink: 0;
}
.member-avatar.admin-av { background: var(--amber-glow); }
.member-avatar.inactive-av { opacity: 0.4; }
.member-info { flex: 1; min-width: 0; }
.member-name {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.member-meta { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.member-badges { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.mbadge {
  font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}
.mbadge-admin    { background: var(--amber-glow); color: var(--amber); border: 1px solid rgba(249,115,22,.3); }
.mbadge-user     { background: var(--surface3); color: var(--text-muted); border: 1px solid var(--border2); }
.mbadge-active   { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.mbadge-inactive { background: rgba(239,68,68,.1); color: #ef4444; border: 1px solid rgba(239,68,68,.3); }

.member-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mem-btn {
  width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--border2);
  background: var(--surface2); cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: all 0.15s; font-size: 14px;
}
.mem-btn:active { transform: scale(0.9); }
.mem-btn-edit   { color: var(--amber); border-color: rgba(249,115,22,.3); }
.mem-btn-toggle { color: #22c55e; }
.mem-btn-toggle.revoke { color: #ef4444; border-color: rgba(239,68,68,.3); }
.mem-btn-del    { color: #ef4444; border-color: rgba(239,68,68,.3); }

/* Patrol sessions table */
.admin-table-wrap { overflow-x: auto; padding: 0 14px 14px; }
.admin-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 10px; min-width: 480px;
}
.admin-table th {
  background: var(--surface2); color: var(--text-muted); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 8px;
  border: 1px solid var(--border); text-align: left; white-space: nowrap;
}
.admin-table td {
  padding: 7px 8px; border: 1px solid var(--border);
  color: var(--text-dim); vertical-align: top;
}
.admin-table tr:nth-child(even) td { background: var(--surface2); }
.status-pill {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.sp-active  { background: rgba(34,197,94,.12); color: #22c55e; border: 1px solid rgba(34,197,94,.3); }
.sp-ended   { background: var(--surface3); color: var(--text-muted); border: 1px solid var(--border2); }

/* Month filter bar */
.admin-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.admin-filter-bar label { font-family: var(--mono); font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.admin-filter-bar select,
.admin-filter-bar input { font-family: var(--mono); font-size: 11px; }

/* Duty sheet builder */
.duty-builder {
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.duty-preview-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.duty-preview-hdr {
  background: var(--surface2); border-bottom: 1px solid var(--border);
  padding: 10px 14px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--text); display: flex; align-items: center; justify-content: space-between;
}
.duty-rows-table {
  width: 100%; border-collapse: collapse; font-size: 10px;
  font-family: var(--mono); overflow-x: auto; display: block;
}
.duty-rows-table th {
  background: var(--surface2); color: var(--text-muted); font-size: 9px;
  padding: 5px 8px; border: 1px solid var(--border); white-space: nowrap;
}
.duty-rows-table td {
  padding: 6px 8px; border: 1px solid var(--border); color: var(--text-dim);
}

/* Member modal */
#member-modal .modal-body { padding: 16px; overflow-y: auto; max-height: 70vh; }

/* Admin pole reports */
.pole-report-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
  margin: 0 14px 8px; font-family: var(--mono); font-size: 11px;
}
.prc-street { font-weight: 700; color: var(--text); margin-bottom: 3px; }
.prc-meta   { font-size: 10px; color: var(--text-muted); }
.prc-status { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 8px; font-weight: 700; }
.prc-faulty  { background: var(--red-glow); color: var(--red); border: 1px solid rgba(239,68,68,.3); }
.prc-working { background: var(--green-glow); color: var(--green); border: 1px solid rgba(34,197,94,.3); }

/* ══════════════════════════════════════════════════════════════
   POLYGON CONFIGURATION
═══════════════════════════════════════════════════════════════ */
#map-polygon-cfg-btn {
  white-space: nowrap; font-size: 13px; padding: 4px 7px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius); cursor: pointer; color: var(--text-muted);
  transition: all 0.15s; display: none;
}
#map-polygon-cfg-btn:active { transform: scale(0.9); }
.poly-list { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.poly-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.poly-swatch { width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.12); }
.poly-info { flex: 1; min-width: 0; }
.poly-name { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); }
.poly-meta { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.poly-btns { display: flex; gap: 6px; flex-shrink: 0; }
.poly-btn {
  width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--border2);
  background: var(--surface2); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.poly-btn:active { transform: scale(0.9); }
.poly-btn-edit { color: var(--amber); border-color: rgba(249,115,22,.3); }
.poly-btn-del  { color: #ef4444; border-color: rgba(239,68,68,.3); }
#poly-editor { display: none; flex-direction: column; gap: 12px; padding: 14px; }
#poly-editor.active { display: flex; }
.color-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.color-swatch-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.color-swatch-btn.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); transform: scale(1.15); }
#poly-coords-textarea { font-family: var(--mono); font-size: 10px; line-height: 1.6; resize: vertical; min-height: 100px; }
#poly-draw-bar {
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
  background: rgba(15,23,42,0.92); backdrop-filter: blur(8px);
  border: 1px solid var(--amber); border-radius: var(--radius-lg);
  padding: 8px 14px; display: none; align-items: center; gap: 10px;
  z-index: 1100; white-space: nowrap; pointer-events: all;
}
#poly-draw-bar.active { display: flex; }
#poly-draw-count { font-family: var(--mono); font-size: 11px; color: var(--amber); font-weight: 700; min-width: 80px; }
.draw-bar-btn {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text-dim); cursor: pointer; transition: all 0.15s;
}
.draw-bar-btn:active { transform: scale(0.92); }
.draw-bar-btn.undo-btn   { color: var(--amber); border-color: rgba(249,115,22,.4); }
.draw-bar-btn.done-btn   { color: #22c55e; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1); }
.draw-bar-btn.cancel-btn { color: #ef4444; border-color: rgba(239,68,68,.3); }
#leaflet-map.draw-mode   { cursor: crosshair !important; }