/* CyberHive Fleet Map — sits within CyberHive_Styles.css */
/* Uses orange (#ff6b35), blue (#00d4ff), gold (#f7931e) on dark bg */

:root {
  --hive-orange: #ff6b35;
  --hive-blue: #00d4ff;
  --hive-gold: #f7931e;
  --hive-panel: rgba(17,17,24,0.85);
  --hive-card: rgba(22,22,31,0.9);
  --hive-border: #2a2a3a;
  --hive-text: #e8e6e3;
  --hive-muted: #888;
  --hive-green: #22c55e;
  --hive-red: #ef4444;
  --hive-yellow: #eab308;
}

/* Tagline */
h2.hive-tagline {
  font-size: 14px !important; color: var(--hive-muted) !important;
  margin: 0 0 20px !important; letter-spacing: 0.5px;
  text-shadow: none !important; font-weight: 400 !important;
}

/* Extra spacing below header */
[data-page="CyberHive"] .content { padding-top: 200px; padding-bottom: 200px; }

/* Connection status bar */
.hive-status-bar {
  display: flex; align-items: center; gap: 8px;
  justify-content: center; margin-bottom: 20px;
  font-size: 13px; color: var(--hive-muted);
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.online { background: var(--hive-green); box-shadow: 0 0 8px var(--hive-green); }
.status-dot.offline { background: var(--hive-red); }
.status-dot.connecting { background: var(--hive-yellow); animation: hive-pulse 1s infinite; }
@keyframes hive-pulse { 0%,100% { opacity:1 } 50% { opacity:0.4 } }

/* Fleet Summary */
.fleet-summary {
  display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
  justify-content: center;
}
.summary-card {
  flex: 1; min-width: 110px; max-width: 160px;
  background: var(--hive-card); border: 1px solid var(--hive-border);
  border-radius: 10px; padding: 12px; text-align: center;
  transition: border-color 0.3s;
}
.summary-card:hover { border-color: var(--hive-orange); }
.summary-icon { font-size: 20px; margin-bottom: 4px; }
.summary-value { font-size: 18px; font-weight: 700; color: var(--hive-blue); }
.summary-label { font-size: 10px; color: var(--hive-muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* ===== MAP LAYOUT — map dominates ===== */
.map-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
  margin-bottom: 20px;
}

.map-main {
  background: var(--hive-panel); border: 1px solid var(--hive-border);
  border-radius: 12px; padding: 20px;
  min-height: 500px;
}
.norway-map-container {
  position: relative; width: 100%;
}

/* ===== REGION LIST (vertical, uniform) ===== */
.region-list {
  display: flex; flex-direction: column; gap: 10px; width: 100%;
}
.region-box {
  border-radius: 10px; padding: 16px 20px;
  border: 1px solid; border-left: 4px solid;
  transition: all 0.3s; cursor: default;
}
.region-box:hover { transform: translateX(4px); }
.region-box.has-miners { box-shadow: 0 0 20px rgba(255,255,255,0.05); }

.region-header {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.region-id { font-size: 18px; font-weight: 800; letter-spacing: 2px; }
.region-name { font-size: 13px; font-weight: 600; color: var(--hive-text); }
.region-areas { font-size: 11px; color: var(--hive-muted); margin-left: auto; }

.region-data {
  display: flex; gap: 24px; flex-wrap: wrap;
}
.region-stat { display: flex; align-items: center; gap: 4px; }
.region-stat-icon { font-size: 14px; }
.region-stat-val { font-size: 16px; font-weight: 700; color: var(--hive-text); }
.region-stat-lbl { font-size: 10px; color: var(--hive-muted); text-transform: uppercase; }

.region-dots {
  display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap;
}
.region-dot {
  width: 8px; height: 8px; border-radius: 50%;
  animation: hive-pulse 2s ease-in-out infinite;
}

/* Region legend */
.region-legend { display: flex; gap: 14px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-label { color: var(--hive-muted); }
.legend-count { font-weight: 700; color: var(--hive-text); }

/* Worker sidebar */
.worker-sidebar {
  background: var(--hive-panel); border: 1px solid var(--hive-border);
  border-radius: 12px; padding: 14px; overflow-y: auto;
  max-height: 600px;
}
.sidebar-title { margin: 0 0 10px; font-size: 14px; color: var(--hive-orange); }
.worker-list { display: flex; flex-direction: column; gap: 8px; }

.worker-card {
  background: var(--hive-card); border: 1px solid var(--hive-border);
  border-radius: 8px; padding: 10px; font-size: 11px;
  transition: border-color 0.3s;
}
.worker-card:hover { border-color: var(--hive-blue); }
.worker-card.warning { border-left: 3px solid var(--hive-yellow); }
.worker-card.critical { border-left: 3px solid var(--hive-red); }
.worker-name { font-weight: 700; font-size: 12px; color: #e8e6e3; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.worker-name .status-dot { width: 7px; height: 7px; }
.worker-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; color: var(--hive-muted); }
.worker-stat-val { color: var(--hive-text); font-weight: 600; text-align: right; }

.no-miners { text-align: center; padding: 40px 10px; }
.no-miners-icon { font-size: 36px; margin-bottom: 8px; }
.no-miners-text { font-size: 13px; color: var(--hive-muted); }

/* Log — CyberHive colors */
.log-section { margin-top: 0; }
.fleet-section { margin-bottom: 16px; }
.section-header {
  font-size: 14px; font-weight: 700; color: var(--hive-orange);
  padding-bottom: 8px; border-bottom: 1px solid var(--hive-border);
  margin-bottom: 10px;
}
.event-log {
  background: var(--hive-card); border: 1px solid var(--hive-border);
  border-radius: 10px; max-height: 160px; overflow-y: auto;
  font-family: 'Courier New', monospace; font-size: 11px; padding: 10px;
}
.log-entry { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.log-entry .log-time { color: var(--hive-gold); margin-right: 8px; }
.log-entry.system { color: var(--hive-blue); }
.log-entry.connect { color: var(--hive-green); }
.log-entry.disconnect { color: var(--hive-red); }
.log-entry.command { color: var(--hive-orange); }

/* Responsive */
@media (max-width: 768px) {
  .fleet-summary { flex-direction: column; align-items: center; }
  .summary-card { min-width: 140px; max-width: 100%; }
  .map-layout { grid-template-columns: 1fr; }
  .worker-sidebar { max-height: 300px; }
  .region-grid { grid-template-columns: 1fr; }
  .region-box.no4 { grid-column: 1; }
}

/* Region filter active state */
.region-box.region-active { box-shadow: 0 0 15px rgba(0,212,255,0.3); transform: scale(1.02); }
.legend-item.active { background: rgba(0,212,255,0.1); border-radius: 6px; }
.legend-item:hover { background: rgba(255,255,255,0.05); border-radius: 6px; }