/**
 * 全站移动端适配 - 避免样式错乱、提升可读性与触控体验
 * 断点：576px 小屏手机，768px 手机/小平板，992px 平板
 */

/* ========== 全局防错乱 ========== */
@media (max-width: 991px) {
  html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  body {
    overflow-x: hidden;
    min-width: 0;
  }
  .page-content,
  .main-container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 768px) {
  .main-container {
    padding: 1rem !important;
    padding-top: 88px !important;
  }
  .page-content {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  /* 避免长单词/URL 撑破布局 */
  .page-content p,
  .page-content li,
  .card-body,
  .alert,
  .form-label {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  /* 图片不溢出 */
  .page-content img,
  .card-body img,
  .content-display img,
  .rich-content img {
    max-width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 576px) {
  .main-container {
    padding: 0.75rem !important;
  }
  .page-content {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ========== 表格移动端：横向滚动，可读性 ========== */
@media (max-width: 991px) {
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .table-responsive .table {
    min-width: 600px;
    font-size: 0.9rem;
  }
  .table-responsive .table th,
  .table-responsive .table td {
    padding: 0.6rem 0.5rem;
    white-space: nowrap;
  }
  .table-responsive .table th:nth-child(n+4),
  .table-responsive .table td:nth-child(n+4) {
    white-space: normal;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 576px) {
  .table-responsive .table {
    font-size: 0.85rem;
  }
  .table-responsive .table th,
  .table-responsive .table td {
    padding: 0.5rem 0.35rem;
  }
}

/* ========== 表单与按钮：触控友好、可读 ========== */
@media (max-width: 768px) {
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea {
    font-size: 16px !important; /* 避免 iOS 输入框聚焦时自动放大 */
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }
  textarea.form-control {
    min-height: 100px;
  }
  .btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
  }
  .btn-sm {
    min-height: 38px;
    padding: 0.35rem 0.75rem;
  }
  .form-label {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
  }
  .form-row .col,
  .row .col-md-6,
  .row .col-md-4,
  .row .col-md-8 {
    margin-bottom: 0.75rem;
  }
}

/* ========== 卡片与区块 ========== */
@media (max-width: 768px) {
  .card {
    border-radius: 8px;
    margin-bottom: 1rem;
  }
  .card-body {
    padding: 1rem !important;
  }
  .card-header {
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem;
  }
  .list-group-item {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
  .alert {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }
  h1, .h1 { font-size: 1.5rem !important; }
  h2, .h2 { font-size: 1.35rem !important; }
  h3, .h3 { font-size: 1.2rem !important; }
  h4, .h4 { font-size: 1.1rem !important; }
}

/* ========== 管理后台移动端 ========== */
@media (max-width: 991px) {
  body.admin-page .admin-container,
  body.admin-page .admin-main-card,
  body.admin-page .admin-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  body.admin-page .users-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.admin-page .users-table .table {
    min-width: 560px;
  }
  body.admin-page .admin-main-card {
    padding: 1rem !important;
  }
  body.admin-page .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  body.admin-page .header-actions,
  body.admin-page .detail-header-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  body.admin-page .header-actions .btn,
  body.admin-page .detail-header-actions .btn {
    min-height: 42px;
  }
}

@media (max-width: 768px) {
  body.admin-page .admin-container {
    padding: 0.75rem !important;
  }
  body.admin-page .admin-main-card {
    padding: 1rem !important;
    border-radius: 8px;
  }
  body.admin-page .admin-header h1 {
    font-size: 1.25rem !important;
  }
  body.admin-page .stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  body.admin-page .stat-card {
    padding: 0.75rem;
  }
  body.admin-page .stat-number {
    font-size: 1.25rem;
  }
  body.admin-page .filter-form .form-select,
  body.admin-page .filter-form .form-control {
    width: 100% !important;
    max-width: none;
  }
  body.admin-page .filter-row-inline {
    flex-direction: column;
    align-items: stretch;
  }
  body.admin-page .filter-buttons {
    margin-top: 0.5rem;
  }
}

@media (max-width: 576px) {
  body.admin-page .stats-cards {
    grid-template-columns: 1fr;
  }
  body.admin-page .submission-tabs {
    flex-direction: column;
  }
  body.admin-page .submission-tab {
    width: 100%;
    text-align: center;
  }
}

/* ========== 题目审核页 / 详情页 ========== */
@media (max-width: 768px) {
  .question-submissions-container .admin-header {
    flex-direction: column;
    align-items: stretch;
  }
  .question-submissions-container .header-actions {
    flex-wrap: wrap;
  }
  .question-submissions-container .header-actions .btn,
  .question-submissions-container .header-actions a.btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
  .ai-review-reason-box .ai-review-reason-text {
    max-height: 10em;
    font-size: 0.9rem;
  }
  .detail-container .admin-header {
    flex-direction: column;
    align-items: stretch;
  }
  .detail-container .detail-header-actions {
    flex-wrap: wrap;
  }
  .detail-container .detail-main-card .form-section {
    padding: 0.75rem 1rem;
  }
}

/* ========== 练习/答题页 ========== */
@media (max-width: 768px) {
  .practice-container,
  .practice-session-container {
    padding: 0.75rem !important;
  }
  .question-content-display,
  .content-display {
    padding: 0.75rem !important;
    font-size: 0.95rem;
  }
  .options-display .option-item,
  .option-item-display {
    padding: 0.75rem !important;
  }
}

/* ========== 通用工具类 ========== */
@media (max-width: 768px) {
  .d-none-mobile {
    display: none !important;
  }
  .w-100-mobile {
    width: 100% !important;
    max-width: 100% !important;
  }
  .text-center-mobile {
    text-align: center !important;
  }
}