/* Professional Simulation Styles */

/* When simulation is active, collapse the sidebar to icon-only */
body.sim-active {
  --sidebar-w: 56px;
}
body.sim-active .edu-sidebar {
  width: 56px;
  min-width: 56px;
  padding: 12px 6px;
  overflow: hidden;
}
body.sim-active .edu-sidebar .brand-text,
body.sim-active .edu-sidebar .nav-text,
body.sim-active .edu-sidebar .sidebar-footer { display: none; }
body.sim-active .edu-sidebar .nav-link { justify-content: center; padding: 8px; }
body.sim-active .edu-sidebar .brand { padding: 4px 0 10px; justify-content: center; }
body.sim-active .edu-main { padding: 0; }
body.sim-active .edu-topbar { display: none; }

.sim-pro-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  gap: 0;
  background: #0a0a0a;
  overflow: hidden;
}

/* ── Toolbar ── */
.sim-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: #111;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}
.sim-env-btns {
  display: flex;
  gap: 4px;
}
.env-btn {
  padding: 4px 10px;
  font-size: 11px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #888;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.env-btn:hover { background: #222; color: #ccc; border-color: #444; }
.env-btn.active { background: #003366; color: #00ccff; border-color: #0066aa; }

.sim-control-btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.ctrl-btn {
  padding: 4px 12px;
  font-size: 11px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #aaa;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.ctrl-btn:hover { background: #222; color: #fff; }
.ctrl-btn-danger { border-color: #660000; color: #ff4444; }
.ctrl-btn-danger:hover { background: #330000; border-color: #aa0000; }

.sim-status-bar {
  font-size: 10px;
  color: #666;
  margin-left: 12px;
}

/* ── Main area ── */
.sim-main-area {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Viewport ── */
.sim-viewport {
  flex: 1;
  position: relative;
  min-width: 0;
  background: #000;
}
.sim-viewport canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.sim-fps {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 11px;
  color: #44ff88;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  background: rgba(0,0,0,0.7);
  padding: 2px 8px;
  border-radius: 3px;
  z-index: 10;
}
.sim-state-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 3px;
  z-index: 10;
  text-transform: uppercase;
  background: rgba(0,0,0,0.7);
  color: #888;
  border: 1px solid #333;
}
.state-standing { color: #00cc44; border-color: #006622; }
.state-walking, .state-trotting { color: #00ccff; border-color: #006688; }
.state-sitting, .state-lying { color: #ffaa00; border-color: #664400; }
.state-estop { color: #ff2222; border-color: #660000; background: rgba(40,0,0,0.8); }
.state-dancing { color: #cc44ff; border-color: #440066; }
.state-inspecting { color: #44ffcc; border-color: #006644; }

/* ── Right panels ── */
.sim-panels {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #111;
  border-left: 1px solid #222;
  overflow-y: auto;
}
.sim-panel-slot {
  background: #0d0d0d;
  min-height: 120px;
}

/* ── Bottom panel ── */
.sim-bottom {
  display: flex;
  gap: 1px;
  background: #111;
  border-top: 1px solid #222;
  flex-shrink: 0;
  height: 120px;
}
.sim-gait-panel, .sim-cmd-panel, .sim-scenario-panel {
  flex: 1;
  padding: 8px 12px;
  background: #0d0d0d;
}
.gait-title, .cmd-title, .scenario-title {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.gait-btns, .scenario-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.gait-btn, .pose-btn, .scenario-btn {
  padding: 4px 8px;
  font-size: 10px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #888;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.gait-btn:hover, .pose-btn:hover, .scenario-btn:hover { background: #222; color: #ccc; }
.gait-btn.active, .pose-btn.active, .scenario-btn.active {
  background: #003355;
  color: #00ccff;
  border-color: #0066aa;
}

.cmd-info {
  font-size: 10px;
  color: #555;
  margin-bottom: 6px;
}
.cmd-values {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #888;
  font-family: 'JetBrains Mono', monospace;
}
.cmd-values b { color: #00ccff; }
.speed-slider {
  width: 100%;
  margin-top: 6px;
  accent-color: #00ccff;
}

/* ── Telemetry panel ── */
.telemetry-panel { padding: 8px; }
.telem-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.telem-title {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.telem-toggle {
  background: none;
  border: 1px solid #333;
  color: #888;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.telem-section {
  margin-bottom: 8px;
}
.telem-section-title {
  font-size: 9px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.telem-canvas {
  width: 100%;
  height: 60px;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
}
.gauge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gauge-bar {
  flex: 1;
  height: 10px;
  background: #1a1a1a;
  border-radius: 5px;
  overflow: hidden;
}
.gauge-fill {
  height: 100%;
  background: #00cc44;
  transition: width 0.3s, background-color 0.3s;
  border-radius: 5px;
}
.gauge-val {
  font-size: 11px;
  color: #aaa;
  font-family: monospace;
  min-width: 36px;
}
.gauge-details {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: #666;
  margin-top: 4px;
  font-family: monospace;
}

/* ── Contact display ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-width: 120px;
}
.contact-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: #888;
  font-family: monospace;
}
.contact-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  transition: all 0.15s;
}

/* ── State machine visualizer ── */
.state-viz-panel { padding: 8px; }
.state-viz-header { margin-bottom: 6px; }
.state-viz-title {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
}
.state-viz-canvas {
  width: 100%;
  height: 160px;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
}
.state-viz-subtitle {
  font-size: 9px;
  color: #555;
  text-transform: uppercase;
  margin: 6px 0 4px;
}
.state-viz-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.state-btn {
  padding: 3px 6px;
  font-size: 9px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #888;
  border-radius: 3px;
  cursor: pointer;
}
.state-btn:hover { background: #222; color: #ccc; }
.state-btn-danger { border-color: #660000; color: #ff4444; }
.state-hist-entry {
  display: flex;
  gap: 4px;
  font-size: 9px;
  color: #666;
  padding: 1px 0;
}
.state-hist-time { color: #444; }
.state-hist-arrow { color: #444; }
.state-hist-to { color: #aaa; }

/* ── LiDAR viz ── */
.lidar-viz-panel { padding: 8px; }
.lidar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lidar-title {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
}
.lidar-info { font-size: 10px; color: #555; }
.lidar-canvas {
  width: 100%;
  height: 150px;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .sim-panels { width: 250px; }
}
@media (max-width: 700px) {
  .sim-main-area { flex-direction: column; }
  .sim-panels { width: 100%; flex-direction: row; height: 180px; border-left: none; border-top: 1px solid #222; }
  .sim-panel-slot { flex: 1; min-height: unset; overflow: hidden; }
  .sim-bottom { height: auto; flex-wrap: wrap; }
}