/* ============================================================
   志愿通宝 H5全域自适应修复 CSS (Global Override)
   覆盖打包后各Vue组件缺失的响应式断点/safe-area/dvh
   v2026-07-14
   ============================================================ */

/* ===== 1. safe-area (刘海屏/挖孔屏/小白条) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .el-container,
  .el-main,
  .footer-inner,
  .bottom-inner,
  .compliance-inner {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }
  .footer-main .footer-inner {
    padding-left: calc(24px + env(safe-area-inset-left)) !important;
    padding-right: calc(24px + env(safe-area-inset-right)) !important;
  }
  .el-dialog {
    margin-left: env(safe-area-inset-left) !important;
    margin-right: env(safe-area-inset-right) !important;
  }
}

/* ===== 2. dvh 兜底 (移动端工具栏遮挡) ===== */
body, #app, .login-page, .load-container {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* ===== 3. Element Plus 固定宽度输入框溢出修补 ===== */
@media (max-width: 600px) {
  .el-form--inline .el-form-item {
    display: flex !important;
    width: 100% !important;
    margin-right: 0 !important;
    flex-wrap: wrap;
  }
  .el-form--inline .el-form-item__content {
    flex: 1 !important;
    width: 100% !important;
  }
  .el-form--inline .el-form-item__label {
    width: auto !important;
    min-width: 60px;
    white-space: nowrap;
  }
  .el-input,
  .el-select,
  .el-input-number,
  .el-autocomplete {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .el-select {
    max-width: 100% !important;
  }
  .el-radio-group {
    flex-wrap: wrap;
    gap: 4px;
  }
  .el-radio {
    margin-right: 0 !important;
    margin-bottom: 4px;
  }
  .el-radio-button {
    margin-bottom: 4px;
  }
  /* 2026-08-04: §3 豁免 —— 三池导航栏(推荐页"默认排序"模块) select 恢复内联宽度。
     §3 裸 .el-select{width:100%!important} 误伤导航内 select(内联130px被拉成整行全宽),
     radio-group 4按钮 378px>可用366px 畸形换行堆叠 → 每个控件顶满整行, 视觉明显超宽。 */
  .three-pool-nav .el-select {
    width: 130px !important;
    max-width: 130px !important;
    flex: 0 0 auto;
  }
  .three-pool-nav .el-radio-group .el-radio-button {
    flex: 1 1 46%;
    min-width: 0;
  }
  .three-pool-nav .el-radio-group .el-radio-button__inner {
    width: 100%;
    box-sizing: border-box;
  }
  .three-pool-nav .risk-ratio-bar { flex-wrap: wrap; }
  /* 组模式工具栏 select 同样豁免 §3 误伤（专业组推荐页） */
  .group-toolbar .el-select {
    width: 120px !important;
    max-width: 120px !important;
    flex: 0 0 auto;
  }
}

/* ===== 4. 通用表单/卡片溢出控制 ===== */
@media (max-width: 480px) {
  .el-card {
    overflow: hidden;
  }
  .el-card__body {
    padding: 12px !important;
  }
  .el-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .el-table__body-wrapper {
    overflow-x: auto;
  }
  .el-breadcrumb {
    font-size: 12px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
  }
  .el-form-item {
    flex-wrap: wrap;
  }
}

/* ===== 5. 极窄屏 (<375px) 字体缩小 ===== */
@media (max-width: 374px) {
  html {
    font-size: 14px;
  }
  body, .el-main, .el-card__body, .filter-card, .result-card {
    font-size: 13px;
  }
  .el-button {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
  .el-tag {
    font-size: 10px !important;
    height: 20px;
    line-height: 18px;
  }
  .el-table th, .el-table td {
    font-size: 11px;
    padding: 4px !important;
  }
  .el-table .cell {
    padding: 0 2px;
  }
  .el-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .el-pagination button, .el-pager li {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

/* ===== 5b. 分页器窄屏换行（≤600px：页数多时防止横向溢出，2026-08-02） ===== */
@media (max-width: 600px) {
  .el-pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .el-pagination .el-pager {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }
  .el-pagination__jump {
    margin-left: 0 !important;
  }
  .el-pagination__total,
  .el-pagination__sizes {
    display: none;
  }
}

/* ===== 6. 弹窗/对话框窄屏适配 ===== */
@media (max-width: 480px) {
  .el-dialog {
    width: 94% !important;
    max-width: 94% !important;
    margin: 8px auto !important;
  }
  .el-dialog__body {
    padding: 12px !important;
  }
  .el-dialog__header {
    padding: 12px 12px 0 !important;
  }
  .el-dialog__footer {
    padding: 8px 12px !important;
  }
  .el-dialog .el-tabs__item {
    font-size: 12px;
    padding: 0 8px;
  }
}

/* ===== 7. 纯数字统计卡片窄屏适配 ===== */
@media (max-width: 374px) {
  .stat-card .stat-value {
    font-size: 18px !important;
  }
  .stat-card .stat-label {
    font-size: 11px !important;
  }
  .wizard-entry .el-button {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
}

/* ===== 8. 表格操作列固定宽度保护 ===== */
@media (max-width: 480px) {
  .el-table .el-button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  .el-table-column--selection .cell {
    padding: 0 2px;
  }
}

/* ===== 9. 标签切换(radio-tabs)窄屏溢出 ===== */
@media (max-width: 480px) {
  .el-radio-group[size="large"] .el-radio-button__inner {
    font-size: 12px;
    padding: 6px 10px;
  }
  .el-tabs__item {
    font-size: 12px;
    padding: 0 8px;
  }
}

/* ===== 10. 搜索区域窄屏适配 ===== */
@media (max-width: 480px) {
  .search-header {
    height: auto !important;
    min-height: 40px;
    padding: 8px !important;
    flex-direction: column;
  }
  .search-box {
    width: 100% !important;
    display: flex;
    gap: 4px;
  }
  .search-box .handle-input,
  .search-box .el-input {
    flex: 1;
    width: auto !important;
  }
  .search-box .el-button {
    flex-shrink: 0;
    border-radius: 4px !important;
  }
}

/* ===== 11. 面包屑 + 页面标题窄屏适配 ===== */
@media (max-width: 480px) {
  .page-container {
    padding: 8px !important;
  }
  .page-header {
    margin-bottom: 12px;
  }
  .page-title {
    font-size: 16px !important;
  }
  .page-desc {
    font-size: 12px !important;
  }
}

/* ===== 12. 推荐页 (RecommendView) 特别修复 ===== */
@media (max-width: 600px) {
  .recommend-container .filter-card .card-row {
    flex-direction: column;
    gap: 8px;
  }
  .recommend-container .filter-group {
    width: 100%;
  }
  .recommend-container .filter-group .el-select,
  .recommend-container .filter-group .el-input {
    width: 100% !important;
  }
  .recommend-container .filter-group .el-radio-group {
    flex-wrap: wrap;
  }
  .recommend-container .filter-group .inline-radio .el-radio {
    margin-bottom: 4px;
  }
}

/* ===== 13. 学校详情页 (SchoolDetail) 特别修复 ===== */
@media (max-width: 480px) {
  .school-detail-container .el-tabs__item {
    font-size: 11px;
    padding: 0 6px;
  }
  .school-detail-container .el-descriptions__cell,
  .school-detail-container .el-descriptions__label {
    font-size: 12px;
  }
}

/* ===== 14. 志愿表编辑器窄屏适配 ===== */
@media (max-width: 480px) {
  .voluntary-editor-container .el-table {
    font-size: 11px;
  }
  .voluntary-editor-container .el-table .el-button {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }
}

/* ===== 15. 头部导航安全区精修 ===== */
@media (max-width: 480px) {
  .nav-row-primary {
    padding: 0 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-row-secondary {
    padding: 0 4px !important;
  }
  .secondary-menu .el-sub-menu .el-sub-menu__title {
    font-size: 12px !important;
    padding: 0 8px !important;
  }
}

/* ===== 16. 弹窗/对话框平板适配（480-768px宽屏平板 + 未覆盖对话框兜底） ===== */
@media (max-width: 768px) {
  .el-dialog {
    width: 92% !important;
    max-width: 92vw !important;
  }
}

/* ===== 17. 学校详情页Tabs水平滚动（移动端避免标签截断） ===== */
@media (max-width: 600px) {
  .tabs-wrap .el-tabs__header {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .tabs-wrap .el-tabs__nav {
    flex-wrap: nowrap !important;
  }
}

/* ===== 18. 通用文本溢出保护（兜底，防止任意 nowrap 溢出容器） ===== */
@media (max-width: 480px) {
  .filter-label, .dimension-tag, .progress-info span, .count-text, .limit-warn,
  .prob-stat-label, .prob-stat-item, .stat-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .user-input-row label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important;
  }
}

/* ===== 19. 底部导航安全区 ===== */
@media (max-width: 480px) {
  .gkvr-footer .footer-inner {
    padding: 24px 16px !important;
  }
  .gkvr-footer .bottom-inner {
    padding: 10px 16px !important;
  }
  .gkvr-footer .compliance-inner {
    padding: 8px 16px 14px !important;
  }
}

/* ===== 20. 触摸目标保护 — 移动端按钮最小44px ===== */
@media (max-width: 768px) {
  .el-button {
    min-height: var(--touch-target-min, 44px) !important;
  }
  .el-tabs__item {
    font-size: 13px !important;
    padding: 0 10px !important;
  }
}

/* ===== 21. 移动端最小字号保护（禁止10px/11px） ===== */
@media (max-width: 480px) {
  .feature-tag, .goal-desc, .s-desc, .summary-label,
  .filter-label, .tag-text, .badge-text,
  .el-tag, .el-table .cell,
  .prob-stat-item, .stat-mini-label {
    font-size: 12px !important;
  }
  .el-button {
    font-size: 13px !important;
  }
}

/* ===== 22. SchoolView 移动端适配（零断点视图） ===== */
@media (max-width: 768px) {
  .search-header {
    flex-direction: column !important;
    height: auto !important;
    gap: 8px;
    padding: 0 12px;
  }
  .search-box {
    width: 100% !important;
  }
  .handle-input {
    width: 60% !important;
  }
  .content {
    flex-direction: column !important;
  }
  .heat-rank {
    margin-left: 0 !important;
    margin-top: 12px !important;
  }
  .schoolCard {
    height: auto !important;
    min-height: 120px;
    margin: 12px auto !important;
  }
  .school-detail {
    padding: 0 8px;
  }
  .logo-placeholder {
    width: 70px !important;
    height: 70px !important;
    font-size: 24px !important;
  }
}
@media (max-width: 480px) {
  .search-header {
    padding: 0 8px;
  }
  .search-box {
    flex-direction: column;
    gap: 6px;
  }
  .handle-input {
    width: 100% !important;
  }
  .schoolCard {
    min-height: 100px;
    margin: 8px auto !important;
  }
  .school-info {
    flex-direction: column;
    align-items: center;
  }
}

/* ===== 23. ProfileWizardView 移动端适配（零断点视图） ===== */
@media (max-width: 768px) {
  .profile-wizard {
    padding: 20px 12px !important;
  }
  .wizard-header h1 {
    font-size: 22px !important;
  }
  .wizard-body {
    padding: 20px !important;
  }
  .goal-card {
    width: calc(50% - 8px) !important;
    height: 80px !important;
  }
  .strategy-card {
    min-width: calc(50% - 6px) !important;
    height: 70px !important;
  }
}
@media (max-width: 480px) {
  .profile-wizard {
    padding: 12px 8px !important;
  }
  .wizard-header h1 {
    font-size: 18px !important;
  }
  .wizard-body {
    padding: 12px !important;
  }
  .goal-card {
    width: 100% !important;
    height: 72px !important;
  }
  .strategy-card {
    min-width: 100% !important;
    height: 60px !important;
  }
  .step-content h3 {
    font-size: 16px !important;
  }
  .wizard-footer {
    flex-direction: column !important;
    gap: 8px;
  }
  .wizard-footer .el-button {
    width: 100%;
  }
}

/* ===== 24. RecommendView 表格溢出保护 ===== */
@media (max-width: 768px) {
  .fav-plan-dialog .el-table {
    overflow-x: auto;
    display: block;
  }
  .recommend-container .el-table {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== 25. 字号clamp全局兜底 ===== */
@media (max-width: 480px) {
  body, .el-main, .el-card__body, .filter-card, .result-card {
    font-size: clamp(12px, 3.5vw, 14px);
  }
}

/* ===== 26. P0字号安全 — 全站禁止10px/11px（Phase 5） ===== */
/* 覆盖所有已知的10px/11px选择器，利用!important压制scoped样式 */
@media (max-width: 480px) {
  /* 10px 选择器全覆盖 */
  .s-desc, .badge, .ai-badge, .major-badge, .degree-tag,
  .school-badge, .school-badge-low, .school-badge-high,
  .el-tag, .el-tag--mini, .el-tag--small,
  .el-table .cell, .el-table .el-button, .el-table th, .el-table td,
  .countdown-text, .time-label, .mini-label,
  .card-index, .info-item, .feature-tag,
  .rank-detail-tip, .util-label, .util-status,
  .util-waste-text, .card-reason,
  .gold-rank-trend, .gold-rank-detail, .gold-rank-interpretation,
  .metric-label, .metric-desc,
  .msg-intent, .msg-text-small,
  .footer-text, .tip-text-small,
  .summary-label, .filter-label, .tag-text, .badge-text,
  .prob-stat-item, .stat-mini-label,
  .school-tag, .tag-mini, .stat-label,
  .pdf-tag, .exam-tag, .card-tag {
    font-size: 12px !important;
  }
  /* el-tabs__item 全站统一 12px */
  .el-tabs__item {
    font-size: 12px !important;
    padding: 0 8px !important;
  }
  /* 按钮最小字号 */
  .el-button, .el-button--mini, .el-button--small {
    font-size: 12px !important;
  }
  /* 进度条标签 */
  .el-progress__text {
    font-size: 12px !important;
  }
}

/* ===== 27. 600px断点强化 — 填补中屏空白（Phase 5） ===== */
@media (max-width: 600px) {
  .el-dialog {
    --el-dialog-width: 94% !important;
  }
  .el-table {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }
  .filter-card, .result-card, .el-card {
    padding: 12px !important;
  }
  .el-form-item {
    flex-wrap: wrap !important;
  }
  .el-form-item__label {
    width: 100% !important;
    text-align: left !important;
    padding-bottom: 4px;
  }
  .step-container, .wizard-body {
    padding: 16px !important;
  }
  .el-tabs__header {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .el-tabs__nav-wrap {
    overflow-x: auto;
  }
  /* 卡片两列变一列 */
  .card-grid, .card-list {
    grid-template-columns: 1fr !important;
  }
}

/* ===== 28. Mobile间距统一（Phase 5 P2美观度） ===== */
@media (max-width: 480px) {
  .el-card, .filter-card, .result-card, .info-card,
  .recommend-card, .school-card, .plan-card {
    border-radius: var(--card-radius, 8px) !important;
    margin-bottom: var(--h5-gap, 8px) !important;
  }
  .el-dialog__body {
    padding: 16px 12px !important;
  }
  /* 卡片阴影柔和 */
  .el-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  }
}

/* ===== 29. 零断点视图基础保护 — ArticleDetailView/HelpView/DataHealthDashboard（Phase 5） ===== */
@media (max-width: 768px) {
  .article-detail, .help-container, .data-health {
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }
  .article-content, .help-content, .dashboard-content {
    padding: 12px !important;
  }
}
@media (max-width: 480px) {
  .article-detail, .help-container, .data-health {
    padding: 0 8px !important;
  }
  .article-content, .help-content, .dashboard-content {
    padding: 8px !important;
  }
}

/* ===== 30. 关键零断点组件保护（Phase 5） ===== */
@media (max-width: 768px) {
  .diagnosis-panel, .reco-result,
  .same-score-panel, .user-profile-panel,
  .trend-chart, .enrollment-plan, .major-score-table {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto;
  }
  /* AI 助手是 fixed 悬浮容器：必须收缩到内容宽度（width:100% 会把 fab/提示语挤出视口） */
  .ai-assistant {
    width: auto !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .ai-assistant, .diagnosis-panel, .reco-result,
  .same-score-panel, .user-profile-panel {
    padding: 12px !important;
  }
}

/* ===== 触控目标补丁（WCAG 2.5.5 AAA 44×44）=====
   免登结果区合规链接 30px→44px；移动端顶栏圆形按钮 32px→44px 宽。
   放在本文件（非组件内 CSS）是刻意的：组件改动会改 bundle 哈希 →
   触发全量预渲染快照失效（3309 页 / 45min）。此处改完只需换 ?v= 版本号。
   下次 bundle 大版本发版时可将本段并入组件样式后删除。 */
@media (max-width: 767px) {
  .mobile-header .el-button.is-circle { min-width: 44px; min-height: 44px; }
}
.sp-compliance a { display: inline-flex; align-items: center; min-height: 44px; }