:root {
  --bg: #0a0e13;
  --panel: #121924;
  --panel-border: #223047;
  --text: #d7e2ee;
  --text-dim: #8ca0b3;
  --accent: #4fd1c5;
  --accent-dim: #2b6f68;
  --red: #e5484d;
  --yellow: #e5c34f;
  --green: #4fe57d;
  --white-flag: #f2f5f8;
  --black-flag: #1a1a1a;

  --flight-vfr: #3fbf5f;
  --flight-mvfr: #3f8ff2;
  --flight-ifr: #e5484d;
  --flight-lifr: #d24fe5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(circle at top left, #101823, var(--bg));
  color: var(--text);
  min-height: 100vh;
}

header.top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--panel-border);
  background: rgba(10, 14, 19, 0.9);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  flex-direction: column;
}

.brand .title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
}

.brand .subtitle {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.status-line .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  margin-right: 6px;
}

.action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.action-bar .action-btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent-dim);
  color: var(--white-flag);
  border: 1px solid var(--accent);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.action-bar .action-btn:hover { background: var(--accent); color: #06231f; }

/* Mobile header collapse (per Ian 2026-07-21) -- .action-bar-more wraps
   the less-frequently-used buttons; display:contents makes the wrapper
   invisible to layout on desktop, so those buttons sit inline exactly as
   before with zero visual change above the breakpoint. The toggle button
   only appears below the breakpoint. */
.action-bar-more { display: contents; }
.action-bar-more-toggle { display: none; }

@media (max-width: 700px) {
  .action-bar-more-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--panel-border);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .action-bar-more-toggle:hover { border-color: var(--accent); color: var(--accent); }
  .action-bar-more {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    order: 99; /* renders below the always-visible buttons/toggle, as its own block */
  }
  .action-bar-more.open { display: flex; }
  .action-bar-more .action-btn,
  .action-bar-more button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

.stat-tiles-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

/* Mobile: the six stat tiles (~200px+ of stacked rows) were eating most
   of the screen before any dashboard content showed (per Ian 2026-07-25).
   Below the breakpoint, swap the tile row for a single compact link to
   the new activity.html page (same tiles + modals, just given a whole
   page to itself). Desktop is untouched -- .stat-tiles-mobile-link stays
   hidden above the breakpoint. */
.stat-tiles-mobile-link { display: none; }
@media (max-width: 700px) {
  /* Scoped to #dashboard-screen so this doesn't also hide the tile row on
     activity.html, which reuses the same .stat-tiles-row class as the
     page it's actually meant to be usable on at mobile widths. */
  #dashboard-screen .stat-tiles-row { display: none; }
  .stat-tiles-mobile-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #0f1620;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
  }
  .stat-tiles-mobile-link:hover { border-color: var(--accent); }
}

.stat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.stat-tile:hover { border-color: var(--accent); background: #131c28; }

.stat-tile-count {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.stat-tile-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3px;
}

.stat-tile-flights-active {
  border-color: var(--green);
  background: rgba(79, 229, 125, 0.08);
}
.stat-tile-flights-active .stat-tile-count { color: var(--green); }

button {
  background: var(--accent-dim);
  color: var(--white-flag);
  border: 1px solid var(--accent);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

button:hover { background: var(--accent); color: #06231f; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

main {
  padding: 20px 24px 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 16px 18px;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel.wide { grid-column: 1 / -1; }

.arcgis-map-container {
  position: relative;
  height: 70vh;
  min-height: 480px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
}

/* Full-page map.html version -- Ian's ask (2026-07-20) to pull the map
   out to its own page so it can open up larger than the 70vh it was
   limited to inside the dashboard's panel grid. */
.arcgis-map-container-full {
  height: calc(100vh - 170px);
  min-height: 600px;
}

.map-layer-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  background: rgba(20, 22, 26, 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
  color: #fff;
}
.map-layer-toggle-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
}
.map-layer-toggle-caret {
  font-size: 0.7rem;
  color: var(--text-dim, #9aa);
}
.map-layer-toggle-body {
  margin-top: 6px;
}
.map-layer-toggle.collapsed .map-layer-toggle-body { display: none; }
.map-layer-toggle.collapsed .map-layer-toggle-title { margin-bottom: 0; }
.map-layer-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.map-layer-toggle label:last-child { margin-bottom: 0; }

/* Added 2026-07-19 with the 20 SBR/WVDHSEM GIS layers: the panel was
   designed for ~7 short one-word labels with no wrapping; titles like
   "Summit IDF/ATT Pole Range" need to wrap instead of stretching the panel
   edge-to-edge, and the now much taller checkbox list needs its own
   scroll region so it doesn't run off the bottom of the map. */
.map-layer-toggle {
  max-width: 270px;
}
.map-layer-toggle-body {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}
.map-layer-toggle label {
  white-space: normal;
}
.map-layer-toggle-subhead {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  color: var(--text-dim, #9aa);
  margin-top: 10px;
  margin-bottom: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
}
.map-layer-toggle-subhead:first-of-type {
  border-top: none;
  padding-top: 0;
}

.map-legend-toggle {
  left: 12px;
  right: auto;
  max-width: 260px;
}
.map-legend-toggle .map-layer-toggle-body {
  max-height: min(60vh, 480px);
}
/* Esri's Legend widget ships its own light-on-transparent styling that
   already matches the dark theme CSS we load (themes/dark/main.css) --
   just constrain width so long uniqueValue labels (Tent Layout has ~15)
   wrap instead of overflowing the panel. */
.map-legend-toggle .esri-legend {
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
}


.alert-banner {
  background: rgba(229, 72, 77, 0.15);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.alert-banner .event { font-weight: 700; color: var(--red); }

.aq-current-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 8px;
}

.aq-current-card .aq-badge {
  min-width: 110px;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  font-weight: 700;
}

.aq-current-card .aq-badge .aqi-num { font-size: 1.8rem; line-height: 1.1; }
.aq-current-card .aq-precaution { flex: 1; min-width: 220px; }
.aq-current-card .aq-precaution .aq-precaution-label { font-weight: 700; margin-bottom: 4px; }

.feedback-item {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.feedback-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.feedback-item-msg { white-space: pre-wrap; }
.feedback-cat {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.feedback-cat-bug { color: var(--red); }
.feedback-cat-data { color: var(--yellow); }
.feedback-cat-feature { color: var(--green); }
.feedback-cat-other { color: var(--text-dim); }

.forecast-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.forecast-card {
  min-width: 120px;
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  flex: 0 0 auto;
}

.forecast-card .name { font-size: 0.75rem; color: var(--text-dim); }
.forecast-card .temp { font-size: 1.3rem; font-weight: 700; margin: 4px 0; }
.forecast-card .short { font-size: 0.75rem; color: var(--text-dim); }

/* Heat Category card in the top current-conditions strip is wider than its
   siblings -- it carries the full Easy/Moderate/Hard work/rest/water
   breakdown (not just a headline number), so it needs room to not wrap
   every line awkwardly. Per Ian, 2026-07-18. */
.forecast-card.heat-card {
  min-width: 260px;
  text-align: left;
}
.forecast-card.heat-card .name,
.forecast-card.heat-card .temp,
.forecast-card.heat-card .short {
  text-align: left;
}

.heat-flag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1rem;
}

.heat-flag .swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.3);
}

.cat-0 { background: rgba(255,255,255,0.05); } .cat-0 .swatch { background: transparent; border-color: var(--text-dim); }
.cat-1 { background: rgba(242,245,248,0.08); } .cat-1 .swatch { background: var(--white-flag); }
.cat-2 { background: rgba(79,229,125,0.12); } .cat-2 .swatch { background: var(--green); }
.cat-3 { background: rgba(229,195,79,0.12); } .cat-3 .swatch { background: var(--yellow); }
.cat-4 { background: rgba(229,72,77,0.12); } .cat-4 .swatch { background: var(--red); }
.cat-5 { background: rgba(0,0,0,0.4); } .cat-5 .swatch { background: var(--black-flag); border-color: var(--red); }

.subtle { color: var(--text-dim); font-size: 0.8rem; }
.subtle-live { color: var(--green, #4caf50); font-weight: 600; }

.wbgt-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.wbgt-row input {
  width: 90px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: #0f1620;
  color: var(--text);
}

.field-reading-banner {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: rgba(79, 209, 197, 0.1);
  font-size: 0.8rem;
}

/* Same pattern as .avboard-wrap below: the table's natural content width
   (7 columns of real text, no fixed layout) can exceed the panel's width
   on any viewport narrower than ~1450px even though the panel itself is
   "wide" -- being full-grid-width doesn't stop the table inside it from
   overflowing that width. Scope the scroll to the table, not the page, so
   it degrades to a horizontal swipe/scroll instead of visually breaking
   out of the panel. Per Ian, 2026-07-18. */
.table-scroll {
  overflow-x: auto;
}

.hourly-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 12px;
}
.hourly-table th, .hourly-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.hourly-table th { color: var(--text-dim); font-weight: 600; }

.flight-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #06231f;
}
.flight-VFR { background: var(--flight-vfr); }
.flight-MVFR { background: var(--flight-mvfr); color: #06152f; }
.flight-IFR { background: var(--flight-ifr); color: #2f0608; }
.flight-LIFR { background: var(--flight-lifr); color: #2f062a; }
.flight-UNKNOWN { background: var(--text-dim); }

pre.raw {
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-dim);
}

.osint-item {
  border-bottom: 1px solid var(--panel-border);
  padding: 10px 0;
}
.osint-item:last-child { border-bottom: none; }

.source-badge {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
}
.source-news { background: #2b4f8f; }
.source-reddit { background: #a13c1f; }
.source-x { background: #333; }

.osint-item a { color: var(--text); text-decoration: none; }
.osint-item a:hover { color: var(--accent); }

.keyword-chip {
  display: inline-block;
  font-size: 0.68rem;
  background: rgba(229, 72, 77, 0.15);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 1px 7px;
  margin: 4px 4px 0 0;
}

.error-panel {
  border-color: var(--yellow);
}
.error-panel li { color: var(--yellow); font-size: 0.8rem; }

footer {
  padding: 16px 24px 30px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.75rem;
}

.disclaimer {
  max-width: 800px;
  margin: 0 auto 14px;
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.empty-state { color: var(--text-dim); font-size: 0.85rem; font-style: italic; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 10, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}

.modal-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-box h2 {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 1.2rem;
}

.modal-box label {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.modal-box textarea {
  width: 100%;
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

button.secondary {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
}
button.secondary:hover { background: #0f1620; color: var(--text); }

/* --- Weather systems map panel --- */
.wxmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.wxmap-col { display: flex; flex-direction: column; gap: 6px; }
.wxmap-img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #0f1620;
}

.weatherstory-img {
  width: 100%;
  max-width: 900px;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #0f1620;
}

/* --- Modal section headers + plain inputs (manual WBGT modal etc.) --- */
.modal-box h3.modal-section {
  margin: 18px 0 4px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
}
.modal-box h3.modal-section:first-of-type { border-top: none; padding-top: 0; }

.modal-box input[type="number"],
.modal-box input[type="text"],
.modal-box select {
  width: 100%;
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
}

/* --- UAS Contact Log page (uas-contacts.html) --- */
a.view-tab { text-decoration: none; display: inline-block; }

.uas-coord-mode-toggle { display: flex; gap: 6px; margin-bottom: 6px; }
.uas-coord-mode-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 6px;
}
.uas-coord-mode-btn:hover { color: var(--text); }
.uas-coord-mode-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}

.uas-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 32px;
}
.uas-form-col label,
.modal-box label {
  display: block;
  margin: 14px 0 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.uas-form-col h3.modal-section {
  margin: 18px 0 4px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
}
.uas-form-col h3.modal-section:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.uas-form-col input[type="number"],
.uas-form-col input[type="text"],
.uas-form-col select,
.uas-form-col textarea {
  width: 100%;
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.uas-agl-preview {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  background: #0f1620;
  color: var(--text-dim);
  font-size: 0.85rem;
}
.uas-agl-preview-ok { color: var(--green); border-color: var(--accent-dim); }
.uas-agl-preview-error { color: var(--red); }

.uas-contacts-summary-btn {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8rem;
  cursor: pointer;
}
.uas-contacts-summary-btn:hover { color: var(--text); background: #0f1620; }
.uas-contacts-summary-btn .uas-contacts-count { color: var(--accent); font-weight: 700; }

.uas-contact-item {
  border: 1px solid var(--panel-border);
  border-left: 4px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  transition: border-left-color 0.15s ease, background 0.15s ease;
}
/* Per Ian 2026-07-21: color the whole tile (not just the status dropdown)
   red/yellow/green so a scan down the tracker list reads the threat
   picture at a glance. Test isn't part of that traffic-light scheme (it's
   not an operational reading) so it gets a neutral accent instead. */
.uas-contact-tile-unknown { border-left-color: var(--yellow); background: rgba(229, 195, 79, 0.06); }
.uas-contact-tile-confirmed-friendly { border-left-color: var(--green); background: rgba(79, 229, 125, 0.06); }
.uas-contact-tile-confirmed-hostile { border-left-color: var(--red); background: rgba(229, 72, 77, 0.08); }
.uas-contact-tile-test { border-left-color: var(--accent); background: rgba(79, 209, 197, 0.05); }

/* Drone identity/classification line -- boxed off from the rest of the
   card (rather than plain "subtle" gray text) specifically so it doesn't
   blend in and get missed, per Ian 2026-07-21. Always rendered, even with
   no Remote ID, so it's obvious the feature exists either way. */
.uas-contact-classification {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #0f1620;
  border: 1px solid var(--panel-border);
  font-size: 0.8rem;
  color: var(--text-dim);
}
.uas-contact-classification b { color: var(--text); }

.flight-auth-tile {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.flight-auth-tile:last-child { margin-bottom: 0; }
.flight-auth-none {
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
}
.flight-auth-active {
  border: 1px solid var(--green);
  border-left: 4px solid var(--green);
  background: rgba(79, 229, 125, 0.08);
}
.flight-auth-headline { font-weight: 700; color: var(--green); margin-bottom: 4px; }
.uas-contact-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.uas-contact-behavior {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
}
.uas-contact-behavior-straight { color: var(--text-dim); }
.uas-contact-behavior-abnormal { color: var(--red); border-color: var(--red); }
.uas-contact-behavior-pattern { color: var(--yellow, #e5c74f); border-color: var(--yellow, #e5c74f); }
/* Category + resolved type badge on the collapsed Aerial Contact summary
   line -- per Ian 2026-07-31: "UAS -- DJI Mavic 3" / "Airplane -- C130"
   visible before expanding, not just in the details. Same pill treatment
   as .uas-contact-behavior, colored per category for quick scanning. */
.uas-contact-category-badge {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--panel-border);
}
.uas-contact-category-uas { color: var(--accent); border-color: var(--accent-dim); }
.uas-contact-category-helicopter { color: var(--yellow); border-color: var(--yellow); }
.uas-contact-category-airplane { color: var(--flight-mvfr); border-color: var(--flight-mvfr); }
.uas-contact-category-unknown { color: var(--text-dim); }

/* Aerial Contact alert pause toggle -- per Ian 2026-07-31. Deliberately
   loud when paused (solid red, not just an outline) so it's not the kind
   of thing that quietly stays off after the drone show ends. */
.alert-pause-btn {
  border: 1px solid var(--panel-border);
  background: transparent;
  color: var(--text-dim);
}
.alert-pause-btn-active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white-flag);
  font-weight: 700;
}
.uas-contact-item-notes { white-space: pre-wrap; color: var(--text-dim); margin-top: 4px; }

/* Expand/collapse for clickable list items (Intel Reports, Known Drones)
   -- per Ian 2026-07-22: click a report/known-drone to expand full
   details and add follow-up notes over time. Collapsed by default;
   .expanded is toggled by app.js via event delegation on the modal list
   container. */
.expandable-item-head { cursor: pointer; }
.expandable-item-head:hover .expandable-item-caret { color: var(--accent); }
.expandable-item-caret {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}
.expandable-item.expanded .expandable-item-caret { transform: rotate(180deg); }
.expandable-item-details {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
}
.expandable-item.expanded .expandable-item-details { display: block; }

.additional-notes-list { margin-top: 8px; }
.additional-note {
  padding: 6px 0;
  border-top: 1px dashed var(--panel-border);
  font-size: 0.82rem;
  white-space: pre-wrap;
}
.additional-note:first-child { border-top: none; }
.additional-note-meta { color: var(--text-dim); font-size: 0.75rem; margin-bottom: 2px; }

.add-note-form { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.add-note-form textarea,
.add-note-form input[type="text"] {
  width: 100%;
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.85rem;
}
.add-note-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-note-status { font-size: 0.78rem; }

.uas-contact-status-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.uas-contact-status-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.uas-contact-status-select:disabled { opacity: 0.6; cursor: wait; }
.uas-status-unknown { color: var(--yellow); border-color: var(--yellow); }
.uas-status-test { color: var(--accent); border-color: var(--accent); }
.uas-status-confirmed-friendly { color: var(--green); border-color: var(--green); }
.uas-status-confirmed-hostile { color: var(--red); border-color: var(--red); }
.uas-contact-status-saving { font-size: 0.75rem; }

/* Editable Category select (2026-07-30) -- same base look as the Status
   select, no color-coding since category isn't a threat-assessment field. */
.uas-contact-category-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.uas-contact-category-select:disabled { opacity: 0.6; cursor: wait; }
.uas-contact-category-saving { font-size: 0.75rem; }

/* --- Planned flight approval status + overall risk badge (2026-07-23) --- */
.pf-approval-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.pf-approval-select:disabled { opacity: 0.6; cursor: wait; }
.pf-approval-pending { color: var(--yellow); border-color: var(--yellow); }
.pf-approval-approved { color: var(--green); border-color: var(--green); }
.pf-approval-not-approved { color: var(--red); border-color: var(--red); }
.pf-approval-saving { font-size: 0.75rem; }

.pf-risk-badge {
  display: inline-block;
  border: 1px solid;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pf-risk-low { color: var(--green); border-color: var(--green); }
.pf-risk-medium { color: var(--yellow); border-color: var(--yellow); }
.pf-risk-high { color: var(--red); border-color: var(--red); }

/* --- UAS contact Range/Payload follow-up mini-form (2026-07-23) --- */
.uas-followup-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}
.uas-followup-current { font-size: 0.85rem; margin-bottom: 6px; }
.uas-followup-form-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.uas-followup-form-row input[type="number"],
.uas-followup-form-row input[type="text"] {
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.85rem;
  max-width: 160px;
}
.range-map-btn { white-space: nowrap; }

/* --- Planned Flight "Edit Details" sub-form (2026-07-25) --- */
.pf-edit-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--panel-border);
}
.pf-edit-form { margin-top: 10px; }
.pf-edit-form .uas-form-grid { gap: 0 24px; }
.pf-edit-form .uas-form-col label {
  margin: 10px 0 4px;
  font-size: 0.8rem;
}
.pf-edit-form textarea { resize: vertical; }

/* --- Ticket status (New/Investigating/Closed) -- UAS Contacts + Intel
   Reports (2026-07-24). Independent of UAS's own friend/foe
   classification status and Planned Flight's approval status above --
   this is purely "have we finished working this entry." --- */
.ticket-status-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.ticket-status-select:disabled { opacity: 0.6; cursor: wait; }
.ticket-status-new { color: var(--accent); border-color: var(--accent); }
.ticket-status-investigating { color: var(--yellow); border-color: var(--yellow); }
.ticket-status-closed { color: var(--text-dim); border-color: var(--text-dim); }
.ticket-status-saving { font-size: 0.75rem; }
.ticket-status-row {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Account Request review status (Open/Working/Approved - Created/Denied,
   2026-07-26) -- reuses .ticket-status-select/-row/-saving above for the
   box/layout styling, just adds its own color set. */
.account-request-status-open { color: var(--accent); border-color: var(--accent); }
.account-request-status-working { color: var(--yellow); border-color: var(--yellow); }
.account-request-status-approved-created { color: var(--green); border-color: var(--green); }
.account-request-status-denied { color: var(--red); border-color: var(--red); }


.uas-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.uas-status-filter-btn {
  background: var(--panel);
  color: var(--text-dim);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.uas-status-filter-btn:hover { color: var(--text); }
.uas-status-filter-btn.active {
  color: var(--bg);
  background: var(--text-dim);
  border-color: var(--text-dim);
}
.uas-status-filter-btn.active.uas-status-filter-unknown { background: var(--yellow); border-color: var(--yellow); }
.uas-status-filter-btn.active.uas-status-filter-test { background: var(--accent); border-color: var(--accent); }
.uas-status-filter-btn.active.uas-status-filter-confirmed-friendly { background: var(--green); border-color: var(--green); }
.uas-status-filter-btn.active.uas-status-filter-confirmed-hostile { background: var(--red); border-color: var(--red); }

/* tracker.html counts-by-filter-value summary (Ian 2026-07-30) */
.tracker-counts {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tracker-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 0.8rem;
}
.tracker-count-chip {
  color: var(--text-dim);
}
.tracker-count-chip b {
  color: var(--text);
}
.tracker-count-total {
  border-top: 1px solid var(--panel-border);
  padding-top: 6px;
  font-size: 0.85rem;
}

.bluf-note {
  background: rgba(79, 209, 197, 0.08);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.8rem;
}

/* --- Air Quality Index flag colors (US AQI categories) --- */
.aqi-0 { background: rgba(0, 228, 0, 0.12); } .aqi-0 .swatch { background: #00e400; }
.aqi-1 { background: rgba(255, 255, 0, 0.12); } .aqi-1 .swatch { background: #ffff00; }
.aqi-2 { background: rgba(255, 126, 0, 0.14); } .aqi-2 .swatch { background: #ff7e00; }
.aqi-3 { background: rgba(255, 0, 0, 0.14); } .aqi-3 .swatch { background: #ff0000; }
.aqi-4 { background: rgba(143, 63, 151, 0.16); } .aqi-4 .swatch { background: #8f3f97; }
.aqi-5 { background: rgba(126, 0, 35, 0.2); } .aqi-5 .swatch { background: #7e0023; border-color: #ff8080; }

/* --------------------------------------------------------------------- */
/* Landing / entrance screen                                             */
/* --------------------------------------------------------------------- */

#landing-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  gap: 10px;
}

.landing-logo {
  width: 140px;
  height: 140px;
  margin-bottom: 8px;
}

#landing-screen h1 {
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  margin: 0;
}

.landing-subtitle {
  color: var(--text-dim);
  font-size: 1rem;
}

.landing-cadence {
  color: var(--text-dim);
  font-size: 0.85rem;
  max-width: 480px;
  margin: 4px 0 20px;
}

.landing-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.landing-nav-btn {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  color: var(--text);
  padding: 14px 32px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
}

.landing-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
a.landing-nav-btn { text-decoration: none; display: inline-block; }

/* --------------------------------------------------------------------- */
/* Header logo + in-dashboard view tabs                                  */
/* --------------------------------------------------------------------- */

.brand {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  width: 42px;
  height: 42px;
}

.view-tabs {
  display: flex;
  gap: 6px;
}

.view-tab {
  background: transparent;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  padding: 6px 14px;
  font-size: 0.8rem;
  border-radius: 6px;
}

.view-tab:hover {
  color: var(--text);
}

.view-tab.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}

.view-hidden {
  display: none !important;
}

.stale-banner {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--yellow);
  background: rgba(229, 195, 79, 0.1);
  font-size: 0.8rem;
}

.cub-weather-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}

.cub-weather-table {
  border-collapse: collapse;
  font-size: 0.8rem;
  min-width: 640px;
  width: 100%;
}

.cub-weather-table th, .cub-weather-table td {
  text-align: left;
  padding: 6px 10px;
  border: 1px solid var(--panel-border);
  white-space: nowrap;
}

.cub-weather-table th {
  color: var(--text-dim);
  font-weight: 600;
  background: rgba(79, 209, 197, 0.06);
}

.cub-weather-table td:first-child,
.cub-weather-table th:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  color: var(--text-dim);
  font-weight: 600;
  z-index: 1;
}

/* Air Quality row in the CUB table reuses the .aqi-0..aqi-5 background
   tints already defined above for the current-conditions AQI card, so no
   separate color rule is needed here -- just the class-per-cell assignment
   in renderCubWeatherTable(). */

/* --------------------------------------------------------------------- */
/* TF Aviation 5-Day Forecast board                                      */
/* --------------------------------------------------------------------- */

.cub-simple-table-details {
  margin-top: 14px;
  border-top: 1px solid var(--panel-border);
  padding-top: 10px;
}
.cub-simple-table-details summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
}
.cub-simple-table-details summary:hover { color: var(--accent); }

.avboard-wrap {
  overflow-x: auto;
  margin-top: 10px;
  border-radius: 8px;
}

.avboard-table {
  border-collapse: collapse;
  font-size: 0.78rem;
  min-width: 1100px;
  width: 100%;
}

.avboard-table th,
.avboard-table td {
  border: 1px solid var(--panel-border);
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

.avboard-table td:first-child,
.avboard-table th:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--panel);
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
  z-index: 1;
  min-width: 150px;
}

.avboard-day-row th {
  background: rgba(79, 209, 197, 0.1);
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.75rem;
}
.avboard-day-row th:first-child { background: var(--panel); }

.avboard-period-row th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.72rem;
}

.av-icon {
  width: 26px;
  height: 26px;
  color: var(--accent);
  display: block;
  margin: 0 auto;
}

.av-pop {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.av-temp {
  font-size: 0.95rem;
  font-weight: 700;
}

.av-wind-arrow {
  width: 18px;
  height: 18px;
  color: var(--accent);
  display: block;
  margin: 0 auto 2px;
}

.av-skytext {
  min-width: 130px;
}
.av-skytext .subtle {
  white-space: normal;
  font-size: 0.68rem;
}

.avboard-day-span-row td {
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: left;
  min-width: 220px;
}

.avboard-status-row td:first-child {
  color: var(--text-dim);
}

.av-status {
  font-weight: 700;
  font-size: 0.75rem;
}
.av-status.av-go { background: rgba(79, 229, 125, 0.14); color: var(--green); }
.av-status.av-caution { background: rgba(229, 195, 79, 0.14); color: var(--yellow); }
.av-status.av-nogo { background: rgba(229, 72, 77, 0.16); color: var(--red); }
.av-status-reasons {
  font-weight: 600;
  font-size: 0.68rem;
  opacity: 0.85;
}

.aqi-cat-0 { color: #6bdc6b; }
.aqi-cat-1 { color: #e8e85a; }
.aqi-cat-2 { color: #ff9d4d; }
.aqi-cat-3 { color: #ff6b6b; }
.aqi-cat-4 { color: #c47ad1; }
.aqi-cat-5 { color: #ff8080; }

.avboard-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.avboard-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.avboard-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.avboard-go { background: var(--green); }
.avboard-caution { background: var(--yellow); }
.avboard-nogo { background: var(--red); }
.avboard-legend-codes { color: var(--text-dim); }

/* Illumination timeline bar (dark / daylight / moon-up windows across a
   local 00:00-24:00 axis for that day) */
.illum-bar {
  position: relative;
  height: 14px;
  background: #05070a;
  border: 1px solid var(--panel-border);
  border-radius: 3px;
  overflow: hidden;
}
.illum-dark,
.illum-light,
.illum-moon {
  position: absolute;
  top: 0;
  height: 100%;
}
.illum-dark { background: #05070a; }
.illum-light { background: #3a4a5a; }
.illum-moon {
  height: 5px;
  top: 8px;
  background: #f5d76e;
  border-radius: 2px;
}
.illum-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* --------------------------------------------------------------------- */
/* Waterborne parasite surveillance tile                                 */
/* --------------------------------------------------------------------- */

.parasite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 6px;
}

.parasite-card {
  background: #0f1620;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 12px 14px;
}

.parasite-name {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.parasite-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.parasite-badge.parasite-up { background: rgba(229, 195, 79, 0.15); color: var(--yellow); }
.parasite-badge.parasite-down { background: rgba(79, 229, 125, 0.15); color: var(--green); }
.parasite-badge.parasite-flat { background: rgba(140, 160, 179, 0.15); color: var(--text-dim); }
.parasite-badge.parasite-outbreak { background: rgba(229, 72, 77, 0.15); color: var(--red); }

.parasite-spark-wrap {
  color: var(--accent);
  margin: 4px 0 8px;
}

.parasite-spark {
  width: 100%;
  height: 34px;
  display: block;
}

.parasite-stat-row {
  display: flex;
  gap: 24px;
  margin: 6px 0 8px;
}

.parasite-stat-num {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.parasite-stat-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.onsite-station-card {
  grid-column: 1 / -1;
}

.onsite-station-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

.onsite-station-stats .parasite-stat {
  min-width: 110px;
}

.onsite-station-stats .parasite-stat.onsite-stale .parasite-stat-num {
  color: var(--yellow);
}

.onsite-station-stats .parasite-stat.onsite-stale .parasite-stat-label {
  color: var(--yellow);
}

/* Photo/screenshot attachments -- initial-submission uploads (entries.html/
   log.html/known-drones.html) and follow-up-note uploads (dashboard
   expand/add-note UI in app.js), added 2026-07-22 per Ian. */
.attachment-preview {
  margin-top: 8px;
}

.record-attachment-thumb {
  max-width: 240px;
  max-height: 240px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  display: block;
  cursor: zoom-in;
}

.note-attachment-thumb {
  max-width: 160px;
  max-height: 160px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
  display: block;
  margin-top: 6px;
  cursor: zoom-in;
}

.attachment-preview-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.attachment-preview-box img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 6px;
  border: 1px solid var(--panel-border);
}

.attachment-remove-btn {
  font-size: 0.78rem;
  padding: 4px 10px;
}

.add-note-attachment-label {
  font-size: 0.78rem;
  white-space: nowrap;
}

.add-note-attachment {
  max-width: 200px;
  font-size: 0.78rem;
}

/* --- CMP new-UAS alert banner (map.html only, per Ian 2026-07-30) ------- */
.cmp-uas-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  text-align: center;
  animation: cmp-uas-banner-flash 1s ease-in-out 3;
}
.cmp-uas-banner-red { background: #c0392b; }
.cmp-uas-banner-green { background: #219150; }
.cmp-uas-banner-grey { background: #6b7078; }
.cmp-uas-banner-dismiss {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  border-radius: 4px;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.cmp-uas-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.15);
}
@keyframes cmp-uas-banner-flash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.uas-add-known-drone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.uas-add-known-drone-btn {
  font-size: 0.78rem;
  padding: 4px 10px;
  white-space: nowrap;
}

.uas-add-known-drone-status {
  font-size: 0.78rem;
}