/* Mobile responsive fixes for all learner guide simulations */
/* Injected via <link> — does NOT affect desktop layout */

@media (max-width: 768px) {
  /* Warning banner — smaller, tighter */
  #hri-safety-warning,
  [class*="warning-card"],
  [class*="safety-warning"],
  [style*="TRAINING SIMULATION"] {
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
    line-height: 1.3 !important;
  }

  /* Sidebar/content panel — full width below 3D viewport */
  #sidebar,
  #infoPanel,
  [class*="sidebar"],
  [class*="info-panel"] {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-width: unset !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    overflow-y: visible !important;
    font-size: 0.85rem !important;
  }

  /* 3D viewer — taller on mobile, full width */
  #viewer,
  #viewerCanvas,
  #threeCanvas,
  #viewport,
  [class*="viewer"],
  canvas {
    width: 100% !important;
    min-height: 50vh !important;
    max-height: 60vh !important;
  }

  /* Main app container — stack vertically */
  #app,
  [class*="app-layout"],
  [class*="main-layout"] {
    flex-direction: column !important;
    display: flex !important;
  }

  /* Viewer wrapper — full width */
  #viewerWrap,
  [class*="viewer-wrap"] {
    width: 100% !important;
    flex: none !important;
  }

  /* Phase buttons — smaller, wrap */
  .phase-btn,
  [class*="phase-btn"] {
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
  }

  /* Phase list — horizontal scroll on mobile */
  #phaseList,
  [class*="phase-list"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Control buttons — smaller */
  .ctrl-btn,
  [class*="ctrl-btn"] {
    font-size: 0.8rem !important;
    padding: 6px 10px !important;
  }

  /* Section headings — smaller */
  .section h3,
  .section h2,
  #sidebar h3,
  #sidebar h2,
  #infoPanel h3 {
    font-size: 1rem !important;
  }

  /* Info cards — full width */
  .info-card,
  [class*="info-card"] {
    margin: 4px 0 !important;
    padding: 8px !important;
    font-size: 0.8rem !important;
  }

  /* Controls bar — compact */
  #controls,
  #controlBar,
  [class*="control-bar"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  /* Sliders — full width */
  input[type="range"] {
    width: 100% !important;
  }

  /* Timeline — full width */
  #timeline-bar,
  [class*="timeline"] {
    width: 100% !important;
  }

  /* Parts list — horizontal scroll */
  #partsList,
  [class*="parts-list"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-height: 100px !important;
    overflow-y: auto !important;
  }

  /* Equipment grid — 2 columns on mobile */
  #catGrid,
  [class*="cat-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* HUD elements — smaller */
  #hud,
  [class*="hud"] {
    font-size: 0.75rem !important;
  }

  /* Data values display — compact */
  [id^="dv-"],
  [class*="data-val"] {
    font-size: 0.8rem !important;
  }

  /* Toggle sidebar button — always visible on mobile */
  #toggle-sidebar {
    display: block !important;
  }

  /* Force/velocity bars — thinner */
  #forceBar, #velBar,
  [class*="force-bar"], [class*="vel-bar"] {
    height: 12px !important;
  }

  /* Step lists in prestart sims — compact */
  #stepList,
  [class*="step-list"] {
    font-size: 0.8rem !important;
    max-height: 30vh !important;
    overflow-y: auto !important;
  }

  /* Dashboard panels in prestart sims */
  #dashboard,
  [class*="dashboard"] {
    flex-direction: column !important;
  }

  /* Overlay/popup — full width on mobile */
  #overlay,
  [class*="overlay-box"],
  [class*="popup"] {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px auto !important;
  }

  /* Header bar — compact */
  #header,
  [class*="sim-header"] {
    flex-wrap: wrap !important;
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
  }

  /* Score/timer displays — smaller */
  #scoreDisplay, #errorCount, #timer,
  [class*="score"], [class*="timer"] {
    font-size: 0.85rem !important;
  }

  /* Minimap — smaller on mobile */
  #minimap {
    width: 60px !important;
    height: 60px !important;
  }

  /* D-pad (maze game) — position properly */
  #dpad {
    bottom: 10px !important;
    right: 10px !important;
    transform: scale(0.8) !important;
  }
}

/* Even smaller screens (phones in portrait) */
@media (max-width: 480px) {
  #hri-safety-warning,
  [class*="warning-card"],
  [class*="safety-warning"] {
    font-size: 0.6rem !important;
    padding: 4px 8px !important;
  }

  #viewer,
  #viewerCanvas,
  #threeCanvas,
  #viewport,
  canvas {
    min-height: 40vh !important;
  }

  #sidebar,
  #infoPanel {
    font-size: 0.8rem !important;
    padding: 8px !important;
  }

  /* Equipment grid — single column on very small */
  #catGrid,
  [class*="cat-grid"] {
    grid-template-columns: 1fr !important;
  }
}