/* Phase 72: admin-only in-game debug panel. Bottom-left, above the
   footer. Dark chrome to match the HUD; amber accent matches admin
   surfaces. Visible only when the user is admin AND a game is loaded
   (the JS toggles display). */

.apex-admin-debug {
  position: fixed;
  left: 12px;
  bottom: 72px;
  z-index: 85;
  background: rgba(20, 22, 30, 0.92);
  border: 1px solid #f59e0b;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: #e8eaf0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  min-width: 220px;
}

.apex-admin-debug-head {
  font-size: 10px;
  font-weight: 700;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  cursor: grab;
  user-select: none;
  /* Subtle dashed underline as a drag affordance hint. */
  border-bottom: 1px dashed rgba(245, 158, 11, 0.3);
  padding-bottom: 4px;
}
.apex-admin-debug.is-dragging .apex-admin-debug-head,
.apex-admin-debug-head:active {
  cursor: grabbing;
}
.apex-admin-debug.is-dragging {
  /* While dragging, dim slightly + remove the box-shadow so the user
     can see what's under the cursor more easily. */
  opacity: 0.85;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.apex-admin-debug-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.apex-admin-debug-row button {
  appearance: none;
  background: #1f2330;
  color: #e8eaf0;
  border: 1px solid #3a4050;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
}
.apex-admin-debug-row button:hover {
  background: #2a3040;
  border-color: #f59e0b;
}
.apex-admin-debug-row button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.apex-admin-debug-hint {
  margin-top: 6px;
  font-size: 10px;
  color: #8a93a6;
}

.apex-admin-debug-status {
  margin-top: 4px;
  font-size: 10px;
  min-height: 12px;
  color: #b8bcc8;
}
.apex-admin-debug-status.is-info { color: #93c5fd; }
.apex-admin-debug-status.is-ok   { color: #86efac; }
.apex-admin-debug-status.is-err  { color: #fca5a5; }