/* ============================================================
   志愿通宝 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;
  }
}

/* ===== 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;
  }
}

/* ===== 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. 底部导航安全区 ===== */
@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;
  }
}