:root{
  --bg:#0c1016; --panel:#121825; --muted:#8ea0b4; --text:#e9eef5;
  --line:#223049; --accent:#6fb2ff; --accent-hover:#5a9de8; --accent2:#5dd39e; --chip:#93a8c5;
  --surface-color:#121825; --border-color:#223049; --accent-color:#6fb2ff; 
  --text-color:#e9eef5; --background-color:#0c1016; --primary-color:#6fb2ff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.45 system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif}

.app-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);background:#0e1420}
.app-header .title h1{font-size:18px;margin:0}
.app-header .subtitle{color:var(--muted);font-size:12px;margin-top:2px}

.layers{display:flex;gap:12px;align-items:center}
.layer-toggle{display:flex;gap:6px;align-items:center;background:#0f1522;border:1px solid var(--line);padding:6px 10px;border-radius:10px}
.layer-toggle input{accent-color:#69a7ff}

.app-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;max-width:1200px;margin:14px auto;padding:0 14px}
.map-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.map-wrap{position:relative;display:inline-block;max-width:100%}
#baseMap{display:block;max-width:100%;height:auto;border-radius:8px}
#overlay{position:absolute;inset:0;pointer-events:auto;border-radius:8px}
#overlay.interactive{cursor:pointer}

.legend{margin-top:10px;color:var(--muted);font-size:12px;display:flex;gap:16px;flex-wrap:wrap}
.key{display:flex;align-items:center;gap:8px}
.chip{display:inline-block;width:16px;height:8px;border-radius:4px;border:1px solid var(--line);background:var(--chip)}
.chip-muni{background:#c7b79a}
.chip-water{background:#8fb3c8}
.chip-river{background:#78a0b4}
.chip-creek{background:#8caabc}
.chip-interstate{background:#f0f5fa}
.chip-hwy{background:#dce6f0}
.chip-road{background:#9aa3b2}

.hover-banner{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.info-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.info-panel h2{margin:2px 0 8px}
.info-panel p{color:var(--muted)}
.stats{display:flex;gap:12px;margin:10px 0;flex-wrap:wrap}
.stat{background:#0f1522;border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:120px;text-align:center}
.stat span{display:block;font-size:20px;font-weight:700}
.stat label{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.divider{height:1px;background:var(--line);margin:12px 0}

.card{background:#0f1522;border:1px solid var(--line);border-radius:10px;padding:10px}
.card h3{margin:0 0 6px}
.row{display:flex;justify-content:space-between;margin:6px 0}
.row label{color:var(--muted)}
.hint{color:var(--muted);font-size:12px;margin-top:8px}

.tooltip{
  position:fixed;background:#0d1320;color:var(--text);
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;pointer-events:none;
  box-shadow:0 6px 14px rgba(0,0,0,.35);white-space:nowrap;z-index:1000;
}

.app-footer{padding:10px 18px;color:var(--muted);border-top:1px solid var(--line);text-align:center}
.test-links{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.test-links a{color:var(--accent);text-decoration:none;font-size:11px}
.test-links a:hover{color:var(--accent2);text-decoration:underline}

/* Home page styles */
.home-main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 120px);padding:20px}
.home-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:30px;max-width:600px;width:100%;text-align:center}
.intro-text p{color:var(--muted);margin:0 0 30px 0;line-height:1.6}
.home-nav{display:flex;flex-direction:column;gap:16px}
.nav-button{display:block;padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);transition:all 0.2s ease}
.nav-button strong{display:block;font-size:16px;margin-bottom:4px}
.nav-button span{display:block;font-size:12px;color:var(--muted)}
.nav-button.primary{border-color:var(--accent);background:rgba(111,178,255,0.1)}
.nav-button.primary:hover{background:rgba(111,178,255,0.2);border-color:var(--accent)}
.nav-button:not(.disabled):hover{background:#0f1522;border-color:var(--accent2)}
.nav-button.disabled{opacity:0.6;cursor:not-allowed}
.nav-button.disabled:hover{background:var(--panel);border-color:var(--line)}

/* Enhanced Info Panel Styles */
.county-summary{margin-bottom:16px}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.details-grid .row{margin:4px 0}
.description{margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
.description label{color:var(--muted);font-size:12px;font-weight:600}
.description p{margin:4px 0 0;color:var(--text);font-size:13px;line-height:1.4}

.feature-sections{max-height:60vh;overflow-y:auto;margin-top:16px}
.section{margin-bottom:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.section-header{
  background:#0f1522;margin:0;padding:10px 12px;font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);
}
.section-icon{font-size:16px;min-width:20px}
.count{color:var(--muted);font-size:12px;font-weight:normal;margin-left:auto}

.feature-list{max-height:200px;overflow-y:auto}
.loading{color:var(--muted);font-size:12px;text-align:center;padding:12px}
.feature-item{
  background:var(--panel);border-bottom:1px solid var(--line);padding:8px 12px;
  cursor:pointer;transition:background 0.2s;
}
.feature-item:hover{background:#0f1522}
.feature-item:last-child{border-bottom:none}
.feature-item.selected{background:rgba(111,178,255,0.15);border-color:var(--accent)}

.item-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.item-name{font-weight:500;flex:1}
.item-type{
  background:var(--line);color:var(--text);padding:2px 6px;border-radius:4px;
  font-size:10px;font-weight:600;text-transform:uppercase;
}
.item-type.city{background:#4a90e2}
.item-type.town{background:#7ed321}
.item-type.village{background:#bd10e0}
.item-type.park{background:#50e3c2}
.item-type.lake{background:#4a90e2}
.item-type.pond{background:#5ac8fa}
.item-type.river{background:#007aff}
.item-type.creek{background:#34aadc}
.item-type.interstate{background:#ff3b30}
.item-type.highway{background:#ff9500}
.item-type.road{background:#8e8e93}
.item-type.law_enforcement{background:#4a90e2}
.item-type.fire{background:#e74c3c}
.item-type.ems{background:#2ecc71}

.item-details{color:var(--muted);font-size:11px;line-height:1.3}
.item-stats{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap}
.item-stat{display:flex;align-items:center;gap:4px}
.item-stat-value{color:var(--text);font-weight:500}

.road-class-group{margin-bottom:8px}
.road-class-header{
  background:var(--line);color:var(--text);padding:4px 8px;font-size:11px;
  font-weight:600;text-transform:uppercase;margin-bottom:4px;
}

.agency-type-group{margin-bottom:8px}
.agency-type-header{
  background:var(--line);color:var(--text);padding:4px 8px;font-size:11px;
  font-weight:600;text-transform:uppercase;margin-bottom:4px;
}

.agency-item .station-list{
  margin-top:8px;padding-left:12px;border-left:2px solid var(--line);
}
.station-item{
  background:#0a0e14;border:1px solid var(--line);border-radius:4px;
  padding:6px 8px;margin:4px 0;cursor:pointer;transition:background 0.2s;
  display:flex;justify-content:space-between;align-items:center;
}
.station-item:hover{background:#0f1522}
.station-item.no-location{opacity:0.6;border-color:#8b5a2b}
.station-name{font-size:12px;font-weight:500}
.station-status{font-size:10px;color:var(--muted)}

/* Orientation Intro Styles */
.orientation-intro{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  margin:14px auto;max-width:1200px;padding:0;overflow:hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.intro-header{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  padding:14px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  transition:background 0.2s;
}
.supervisor-badge{
  display: flex;align-items: center;gap: 0.75rem;
  color: var(--text);font-weight: 600;font-size: 1.1rem;
}
.badge-icon{
  font-size: 1.3rem;filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.badge-text{
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.audio-indicator{
  margin-left: 0.5rem;font-size: 1.2rem;animation: pulse 2s infinite;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.intro-toggle{
  background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;color: var(--text);cursor: pointer;padding: 0.5rem;
  transition: all 0.2s ease;min-width: 2.5rem;height: 2.5rem;
  display: flex;align-items: center;justify-content: center;
}
.intro-toggle:hover{
  background: rgba(255, 255, 255, 0.2);transform: scale(1.05);
}
.intro-toggle:active{transform: scale(0.95)}
.toggle-icon{font-size: 1.2rem;font-weight: bold;line-height: 1}
.intro-content{
  padding:18px;line-height:1.6;transition: all 0.3s ease;
}
.intro-content h2{
  color:var(--accent);margin:0 0 1.5rem 0;font-size:1.5rem;text-align:center;
  border-bottom:2px solid var(--accent2);padding-bottom:0.5rem;
}
.supervisor-intro{
  display: flex;gap: 1.5rem;align-items: flex-start;margin-bottom: 1rem;
}
.supervisor-photo{
  width: 120px;height: 120px;border-radius: 50%;object-fit: cover;
  border: 3px solid var(--accent);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.intro-text{
  flex: 1;
}
.intro-content p{margin:16px 0;color:var(--text)}
.intro-content p:last-child{margin-bottom:0}
.intro-content strong{color:var(--accent)}
.intro-content em{color:var(--accent2);font-style:normal;font-weight:500}

#hoverBanner {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #ecf0f1;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border: 1px solid #4a6741;
  white-space: nowrap;
  min-width: 200px;
  text-align: center;
  margin-bottom: 10px;
}

.station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.units-list {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}

.units-header {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.unit-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 11px;
  line-height: 1.3;
}

.unit-emoji {
  width: 16px;
  text-align: center;
}

.unit-callsign {
  font-weight: 600;
  color: var(--accent);
  min-width: 60px;
}

.unit-type {
  color: var(--text);
  text-transform: capitalize;
  min-width: 80px;
}

.unit-range {
  color: var(--muted);
  font-size: 10px;
}