/**
 * 十四寸笔记本 / 小屏桌面全站适配
 * 视口约 1280×720 ~ 1366×768（含 Windows 125%～150% 缩放后宽度 <1200）
 * 加载顺序：app.css → mobile.css → laptop.css（覆盖前两者的桌面大号样式）
 */

/* ========== 1. 全局：字号、间距、防遮挡 ========== */
@media (max-width: 1366px), (max-height: 820px) {
  html {
    font-size: 93.75%;
  }

  .main-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1rem;
  }

  .footer-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .modern-footer {
    margin-top: 2rem;
    padding: 1.25rem 0;
  }

  .page-content {
    min-height: auto;
  }

  .flash-container {
    top: calc(var(--navbar-height, 56px) + 0.5rem);
    right: 1rem;
    max-width: min(360px, calc(100vw - 2rem));
  }

  h1, .h1 { font-size: 1.45rem !important; }
  h2, .h2 { font-size: 1.3rem !important; }
  h3, .h3 { font-size: 1.15rem !important; }
  h4, .h4 { font-size: 1.05rem !important; }

  .card {
    margin-bottom: 0.85rem;
  }

  .card-body {
    padding: 0.85rem 1rem !important;
  }

  .card-header {
    padding: 0.65rem 1rem !important;
    font-size: 0.95rem;
  }

  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.9375rem;
  }

  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* 多列栅格：笔记本上两列更易读，避免挤成一团 */
  .row.g-3 > .col-md-4,
  .row.g-3 > .col-md-3,
  .row.g-4 > .col-md-3,
  .row > .col-md-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row.g-3 > .col-md-6,
  .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-dialog {
    max-width: min(520px, calc(100vw - 2rem));
    margin: 1rem auto;
  }

  .modal-content {
    max-height: min(85vh, calc(100dvh - 2rem));
    overflow-y: auto;
  }

  /* 下拉 / 滑层：矮屏限高，避免冲出视口 */
  .user-dropdown .user-menu {
    max-height: min(70vh, calc(100dvh - 140px)) !important;
    overflow-y: auto !important;
  }

  .nav-admin-menu:not(.nav-ic-practice-menu) {
    max-height: min(62vh, calc(100dvh - 120px)) !important;
    overflow-y: auto !important;
  }

  .notification-slide-panel .notification-panel-inner {
    max-height: 100dvh;
    box-sizing: border-box;
  }
}

/* 顶栏单行（1200–1366） */
@media (min-width: 1200px) and (max-width: 1366px) {
  .nav-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 0.5rem !important;
  }

  .brand-text {
    font-size: 1.28rem !important;
    letter-spacing: 0.08em !important;
  }

  .nav-shortcuts {
    gap: 14px !important;
  }

  .nav-shortcuts > a,
  .nav-shortcuts .nav-shortcuts-link-btn {
    font-size: 0.875rem !important;
  }

  .nav-notification-label,
  .nav-admin-label {
    display: none !important;
  }

  .notification-toggle,
  .nav-admin-btn {
    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0.35rem !important;
  }

  .user-name {
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-toggle {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.875rem !important;
  }

  .main-container {
    padding-top: calc(var(--navbar-height, 56px) + 0.75rem) !important;
  }
}

/* 矮屏纵向压缩 */
@media (max-height: 820px) and (min-width: 769px) {
  .main-container {
    padding-top: calc(var(--navbar-height, 56px) + 0.65rem) !important;
  }

  .practice-section,
  .info-card,
  .admin-main-card {
    margin-bottom: 1rem;
  }

  body.admin-page .admin-main-card {
    padding: 1rem 1.15rem !important;
  }

  body.practice-page,
  body.answer-result-page,
  body.soc3-page,
  body.ic-practice-hub-page {
    min-height: auto !important;
  }
}

/* 顶栏折行时（≤1199）管理页 gutter */
@media (max-width: 1199px) {
  body.admin-page .main-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ========== 2. 刷题 / 答题结果 / 提交题目 ========== */
@media (max-width: 1366px), (max-height: 820px) {
  body.practice-page .question-title {
    font-size: 1.45rem !important;
  }

  body.practice-page .question-category {
    font-size: 1.1rem !important;
  }

  body.practice-page .question-text,
  body.practice-page .question-text *,
  body.practice-page .rich-content,
  body.practice-page .rich-content p,
  body.practice-page .rich-content li,
  body.practice-page .rich-content div,
  body.practice-page .rich-content span,
  body.practice-page .rich-content td,
  body.practice-page .rich-content th,
  body.practice-page .rich-content blockquote {
    font-size: 1.08rem !important;
    line-height: 1.65 !important;
  }

  body.practice-page .form-check-label,
  body.practice-page .option-item .form-check-label,
  body.practice-page .option-item .option-label {
    font-size: 0.9375rem !important;
  }

  body.practice-page .form-check.option-item {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.5rem !important;
    min-height: 42px !important;
  }

  body.practice-page .options-container {
    margin: 1rem 0 !important;
  }

  body.answer-result-page .question-title {
    font-size: 1.35rem !important;
  }

  body.answer-result-page .question-text,
  body.answer-result-page .question-text *,
  body.answer-result-page .rich-content,
  body.answer-result-page .rich-content p,
  body.answer-result-page .rich-content li,
  body.answer-result-page .rich-content div,
  body.answer-result-page .rich-content span {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }

  .practice-container,
  .practice-session-container {
    padding: 0.85rem 1rem !important;
  }

  .question-content-display,
  .content-display {
    padding: 0.85rem 1rem !important;
  }

  body.submit-question-page .main-container {
    padding-top: calc(var(--navbar-height, 56px) + 0.75rem) !important;
  }
}

/* ========== 3. 题库首页 / 落地页（landing_leetcode） ========== */
@media (max-width: 1366px), (max-height: 820px) {
  :root {
    --lc-section-spacing: 48px;
  }

  body.home-landing-leetcode .leetcode-hero {
    padding: clamp(72px, 12vh, 100px) 20px clamp(36px, 6vh, 48px);
    min-height: 28vh;
  }

  body.home-landing-leetcode .leetcode-hero-title {
    font-size: clamp(1.5rem, 3.5vw, 2.15rem) !important;
    margin-bottom: 20px !important;
  }

  body.home-landing-leetcode .leetcode-hero-sub {
    font-size: 0.98rem !important;
    margin-bottom: 20px !important;
  }

  body.home-landing-leetcode .leetcode-features {
    padding: 24px 16px var(--lc-section-spacing);
  }

  body.home-landing-leetcode .leetcode-features-title {
    font-size: 1.28rem !important;
  }

  body.home-landing-leetcode .leetcode-features-grid,
  body.home-landing-leetcode .leetcode-features-grid-three,
  body.home-landing-leetcode .leetcode-features-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body.home-landing-leetcode .leetcode-card {
    padding: 18px 16px !important;
  }

  body.home-landing-leetcode .leetcode-content,
  body.home-landing-leetcode .leetcode-why-section,
  body.home-landing-leetcode .leetcode-contact {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.practice-simple-index .main-container {
    padding-top: calc(env(safe-area-inset-top, 0px) + 128px) !important;
  }
}

@media (max-width: 900px) {
  body.home-landing-leetcode .leetcode-features-grid,
  body.home-landing-leetcode .leetcode-features-grid-three,
  body.home-landing-leetcode .leetcode-features-grid-four {
    grid-template-columns: 1fr !important;
  }
}

/* 首页弹窗：笔记本限高，避免挡住正文 */
@media (max-width: 1366px), (max-height: 820px) {
  .home-info-modal-card {
    max-height: min(78dvh, calc(100dvh - 4rem)) !important;
    overflow-y: auto !important;
  }

  .home-info-starshot {
    max-width: min(220px, 50vw) !important;
    max-height: min(20vh, 160px) !important;
  }
}

/* ========== 4. IC 实践枢纽 / SOC3 ========== */
@media (max-width: 1366px), (max-height: 820px) {
  body.ic-practice-hub-page .ic-hub-wrap,
  .ic-hub-wrap {
    padding: 20px 16px 36px;
  }

  body.ic-practice-hub-page .ic-hub-hero,
  .ic-hub-hero {
    padding: 22px 18px;
    margin-bottom: 18px;
  }

  body.ic-practice-hub-page .ic-hub-hero h1,
  .ic-hub-hero h1 {
    font-size: 1.38rem !important;
  }

  body.ic-practice-hub-page .ic-hub-section,
  .ic-hub-section {
    padding: 18px 16px !important;
    margin-bottom: 16px !important;
  }

  body.soc3-page .soc3-wrap {
    padding: 1.25rem 1rem 2rem;
  }

  body.soc3-page .soc3-intro {
    padding: 1.5rem 0 1.25rem;
    margin-bottom: 1.25rem;
  }

  body.soc3-page .soc3-intro h1 {
    font-size: 1.45rem !important;
  }
}

/* ========== 5. 管理后台 ========== */
@media (max-width: 1366px), (max-height: 820px) {
  body.admin-page .main-container {
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  body.admin-page .admin-main-card {
    padding: 1.1rem 1.2rem !important;
  }

  body.admin-page .admin-header {
    padding: 0.85rem 0 !important;
    margin-bottom: 1rem !important;
  }

  body.admin-page .admin-header h1 {
    font-size: 1.35rem !important;
  }

  body.admin-page .stats-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.65rem !important;
  }

  body.admin-page .users-header {
    padding: 1rem !important;
  }

  body.admin-page .users-table .table {
    font-size: 0.9rem;
  }

  body.admin-page .user-detail-container .user-header {
    padding: 1.25rem !important;
  }

  body.admin-page .practice-section {
    padding: 1rem !important;
  }

  body.admin-page .practice-section h4 {
    font-size: 1.1rem !important;
  }

  body.admin-page .permission-card {
    padding: 0.65rem 0 !important;
  }

  body.admin-page .question-submissions-container .admin-header,
  body.admin-page .detail-container .admin-header {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  body.admin-page .header-actions,
  body.admin-page .detail-header-actions {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  body.admin-page .ai-usage-page .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1199px) {
  body.admin-page .admin-container {
    padding-left: 0 !important;
    padding-right: 0 !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 .stats-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.admin-page .admin-index-page .row.g-3 > [class*="col-md-4"],
  body.admin-page .admin-index-page .row.g-3 > [class*="col-md-3"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ========== 6. 登录注册 / 个人资料 / AI 用量 ========== */
@media (max-width: 1366px), (max-height: 820px) {
  body.auth-page .main-container {
    padding-top: calc(var(--navbar-height, 56px) + 1rem) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body.auth-page .auth-card,
  body.auth-page .login-card,
  body.auth-page .register-card {
    max-width: min(420px, calc(100vw - 2rem));
    padding: 1.5rem 1.25rem !important;
  }

  body.profile-page .main-container {
    padding-top: calc(var(--navbar-height, 56px) + 0.75rem) !important;
  }

  body.profile-page .card {
    margin-bottom: 0.85rem;
  }

  .usage-page {
    padding-top: 0.5rem !important;
    padding-bottom: 1.25rem !important;
  }

  .usage-head {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .usage-card {
    padding: 0.85rem 1rem !important;
  }
}

/* ========== 7. 题目审核 / 提交 / RAG 等宽内容页 ========== */
@media (max-width: 1366px), (max-height: 820px) {
  .question-submissions-container,
  .detail-container,
  .full-width-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .question-submissions-container .header-actions .btn,
  .detail-container .detail-header-actions .btn {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
  }

  .ai-review-reason-box .ai-review-reason-text {
    max-height: 12em;
    font-size: 0.9rem;
  }

  /* CodeMirror / 宽编辑器：横向滚动 */
  .CodeMirror,
  .cm-editor {
    max-width: 100%;
  }
}

/* ========== 8. 固定底栏 / 悬浮按钮（刷题、解析） ========== */
@media (max-width: 1366px), (max-height: 820px) {
  .practice-action-bar,
  .quiz-footer,
  .answer-footer,
  .fixed-bottom-bar,
  [class*="bottom-bar"] {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
  }

  body.practice-page .main-container,
  body.answer-result-page .main-container {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}