/* ── Mentai Mobile Responsive Overrides ─────────────────────────────────── *
 * Breakpoint: 640px (sm) for most, 480px (xs) for aggressive stacking.     *
 * Uses !important only where inline styles must be overridden.              */


/* ── Techie Background ───────────────────────────────────────────────────── *
 * Layered CSS background — no JS, no images, no performance cost.           *
 * Dark: subtle circuit-grid + accent glow. Light: faint dot-grid only.     */

/* Body background handled by canvas — see base.html #tech-bg-canvas */

/* ── 1. Two-column grids → single column on mobile ─────────────────────── */
@media (max-width: 640px) {
  .two-col-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 2. Flash messages — stay within screen bounds ─────────────────────── */
@media (max-width: 640px) {
  #flash-container {
    left: 0.75rem;
    right: 0.75rem;
  }
  #flash-container .flash-message {
    max-width: 100% !important;
    width: 100%;
  }
}

/* ── 3. Page containers — reduce horizontal/vertical padding on mobile ───── */
@media (max-width: 640px) {
  .page-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Tighter panel padding on small screens */
  .page-container .modal-panel {
    padding: 14px 14px !important;
  }
}

/* ── 4. Question / answer header rows — wrap instead of overflow ─────────── */
@media (max-width: 640px) {
  .header-row-wrap {
    flex-wrap: wrap !important;
  }

  /* Title takes full width, action button drops to next line */
  .header-row-wrap h1 {
    flex: 1 1 100%;
  }
}

/* ── 5. Question list meta row — allow wrapping ─────────────────────────── */
@media (max-width: 480px) {
  .question-meta-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    row-gap: 4px !important;
  }
}

/* ── 6. Sort tabs — wrap on very small screens ──────────────────────────── */
@media (max-width: 400px) {
  .sort-tabs {
    flex-wrap: wrap !important;
  }
}

/* ── 7. Code blocks — horizontal scroll, never overflow ─────────────────── */
pre.code-block,
.answer-explanation pre,
.CodeMirror-scroll {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 640px) {
  /* CodeMirror slightly shorter on mobile */
  .CodeMirror {
    height: 140px !important;
  }

  /* Code block font size slightly smaller */
  pre.code-block,
  .answer-explanation pre {
    font-size: 12px !important;
  }
}

/* ── 8. Answer card — tighter vote + content gap on mobile ──────────────── */
@media (max-width: 480px) {
  .answer-body-row {
    gap: 8px !important;
  }
}

/* ── 9. Form action rows — stack buttons on very small screens ──────────── */
@media (max-width: 400px) {
  .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .form-actions .btn,
  .form-actions a.btn {
    text-align: center;
    justify-content: center;
  }
}

/* ── 10. Question detail panel — tighter padding on mobile ──────────────── */
@media (max-width: 640px) {
  .question-detail-panel {
    padding: 16px !important;
  }
}

/* ── 11. Navbar mobile menu search — shown inside mobile drawer ─────────── */
.mobile-search-wrap {
  padding: 8px 0 4px;
}
.mobile-search-wrap input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-overlay);
  color: var(--color-text-primary);
  font-size: 13px;
  outline: none;
}
.mobile-search-wrap .mobile-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ── 12. Staff pages — reduce excessive top/bottom padding ──────────────── */
@media (max-width: 640px) {
  .staff-container {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ── 13. Tai review panel — stack text and button on mobile ─────────────── */
@media (max-width: 480px) {
  .tai-review-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .tai-review-header button {
    align-self: flex-start;
  }
}