/* ===================================================================
   移动端适配层 v1 —— 论文评审系统（管理端 + 前台用户端）
   策略：@media (max-width: 768px) 下覆盖各页面 scoped 样式
   （scoped 样式带 data-v- 哈希，但类名本身全局可匹配，无需精确哈希）
   =================================================================== */

/* ---------- 0. 全局基准（桌面隐藏汉堡按钮，仅移动端显示） ---------- */
.m-nav-toggle { display: none; }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }

  /* Element Plus 弹窗/抽屉铺满移动端 */
  .el-dialog { width: 94vw !important; max-width: 94vw; margin: 4vh auto !important; }
  .el-dialog.is-fullscreen { width: 100vw !important; margin: 0 !important; }
  .el-drawer.rtl, .el-drawer.ltr { width: 86vw !important; max-width: 86vw; }
  .el-message-box { width: 90vw !important; max-width: 90vw; }
  .el-message { max-width: 90vw; }
  .el-picker-panel__body-wrapper,
  .el-date-editor--daterange { max-width: 92vw; }

  /* 表格在移动端横向滚动（Element Plus 表格根节点） */
  .el-table { width: 100%; }

  /* 分页器换行 */
  .el-pagination { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
  .el-pagination .el-pagination__sizes { display: none; }
  .el-pagination .btn-prev, .el-pagination .btn-next { min-width: 28px; }

  /* 表单标签上置（竖排） */
  .el-form--inline .el-form-item { display: block; margin-right: 0; }
  .el-form--inline .el-form-item__label { display: block; text-align: left; }

  /* 消息提示安全区 */
  .el-notification { width: calc(100vw - 32px) !important; }

  /* 按钮组不溢出 */
  .el-button + .el-button { margin-left: 6px; }
  .el-button--small { padding: 5px 10px; }
}

/* ---------- 1. 登录页 ---------- */
@media (max-width: 768px) {
  .login-page {
    padding: 16px;
    align-items: flex-start;
    padding-top: 8vh;
  }
  .login-container { width: 100% !important; max-width: 400px; padding: 28px 20px; }
}

/* ---------- 2. 管理端 Layout（侧边栏 → 抽屉） ---------- */
@media (max-width: 768px) {
  .admin-layout { display: block !important; }
  .admin-sidebar {
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 232px !important;
    z-index: 2100;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: none;
  }
  .admin-sidebar.m-open { transform: translateX(0); box-shadow: 0 0 24px rgba(0,0,0,.25); }
  /* 遮罩由 mobile-nav.js 注入 .m-nav-mask 到 body（z-index/显隐在 JS 内联样式中） */
  .admin-main { width: 100%; }
  .admin-header {
    padding: 0 10px !important;
    position: sticky; top: 0; z-index: 10;
  }
  .header-right { gap: 2px !important; }
  .breadcrumb-area { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .admin-content { padding: 12px !important; }
}

/* ---------- 3. 前台公共头部（FrontHeader / 各页自带 header） ---------- */
@media (max-width: 768px) {
  .header-inner { padding: 0 12px !important; }
  .header-inner .logo { font-size: 17px !important; max-width: 46vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* 顶部导航折叠为下拉 */
  .header-inner .nav-links {
    position: absolute;
    top: 60px; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid #e4e7ed;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0;
    z-index: 1500;
    display: none;
  }
  .header-inner .nav-links.m-open { display: flex; }
  .header-inner .nav-links a { margin: 0 !important; padding: 12px 20px; font-size: 15px; }
  .header-inner .nav-links a.active { background: #e8f6f4; }
  /* 汉堡按钮（由 mobile-nav.js 注入） */
  .m-nav-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 8px;
    border: none; background: none; cursor: pointer;
    order: 9;
  }
  .m-nav-toggle span {
    display: block; width: 100%; height: 2px; border-radius: 2px;
    background: #606266; transition: transform .2s, opacity .2s;
  }
  .m-nav-toggle.m-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-nav-toggle.m-active span:nth-child(2) { opacity: 0; }
  .m-nav-toggle.m-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- 4. 前台首页 HomeView ---------- */
@media (max-width: 768px) {
  .home-page { padding: 0 12px 20px !important; }
  .search-bar { max-width: 100% !important; }
  .tabs-row { gap: 8px !important; flex-wrap: wrap; margin-bottom: 16px !important; }
  .tabs { gap: 4px !important; flex-wrap: wrap; }
  .tab { padding: 6px 10px !important; font-size: 14px !important; }
  .type-tabs { flex-wrap: wrap; }
  /* 时间轴卡片 → 纵向 */
  .year-group { padding-left: 0 !important; margin-bottom: 28px !important; }
  .year-group::before { display: none !important; }
  .year-label { position: static !important; font-size: 22px !important; margin-bottom: 4px; }
  .year-count { position: static !important; margin-bottom: 12px; }
  .activity-card { flex-direction: column !important; }
  .card-cover { width: 100% !important; min-height: 120px !important; max-height: 180px; }
  .card-body { padding: 14px !important; }
  .card-title { font-size: 16px !important; }
  .front-footer { border-radius: 8px; font-size: 13px; }
}

/* ---------- 5. 活动详情页 ---------- */
@media (max-width: 768px) {
  .breadcrumb { padding: 0 12px !important; margin-bottom: 10px !important; }
  .content-area { padding: 20px 16px !important; }
  .activity-title { font-size: 20px !important; letter-spacing: 0 !important; }
  .activity-content { font-size: 15px !important; }
  .activity-content table { font-size: 13px !important; display: block; overflow-x: auto; }
  .action-buttons { flex-direction: column !important; align-items: stretch !important; }
  .action-buttons .el-button { width: 100%; margin: 0 0 10px 0 !important; }
  .action-buttons .el-button:last-child { margin-bottom: 0 !important; }
}

/* ---------- 6. 我的提交（MyWorks + DynamicForm 上传） ---------- */
@media (max-width: 768px) {
  .my-works-page, .page-container, .main-content { padding: 0 12px 24px !important; }
  .page-title { font-size: 16px !important; }
  .progress-wrap .el-progress { max-width: 100% !important; }
  .el-upload-dragger { padding: 16px 12px !important; }
  .el-upload-dragger .el-icon--large { font-size: 40px !important; }
}

/* ---------- 7. 管理端各列表页（通用工具栏+表格） ---------- */
@media (max-width: 768px) {
  .toolbar { padding: 12px !important; }
  .toolbar .el-form--inline .el-form-item { margin-bottom: 8px; }
  .action-buttons { gap: 4px !important; }
  /* 权限矩阵横向滚动 */
  .perm-matrix { overflow-x: auto; }
  .perm-row { min-width: 640px; }
  /* 表格内操作按钮紧凑 */
  .el-table .el-button--small { padding: 4px 8px; }
  .el-table .el-button + .el-button { margin-left: 4px; }
  .el-table td.el-table__cell .cell { padding: 0 6px; }
  .el-table .cell { font-size: 13px; }

  /* 预览布局（PaperList 预览抽屉 / PaperPreview 页）纵向堆叠 */
  .preview-layout { flex-direction: column !important; gap: 12px !important; }
  .preview-sidebar { width: 100% !important; max-height: none !important; }
  .preview-main { min-height: 60vh !important; }

  /* PaperList 阶段 tabs */
  .stage-tabs { flex-wrap: wrap; }
  .subject-assign-row { margin-left: 0 !important; margin-left: 12px !important; }

  /* 活动管理编辑对话框内部布局 */
  .activity-edit-dialog .el-dialog__body { padding: 12px 16px; }
}

/* ---------- 8. 专家端（ExpertPaperList / ExpertReviewPage） ---------- */
@media (max-width: 768px) {
  .expert-header-inner { padding: 0 12px !important; }
  .review-header { flex-wrap: wrap; }
  .review-layout { flex-direction: column !important; height: auto !important; min-height: 0 !important; }
  .preview-section { min-width: 0; }
  .pdf-container { min-height: 62vh !important; }
  .score-section { width: 100% !important; overflow: visible !important; }
  .att-row { flex-wrap: wrap; }
}

/* ---------- 9. 独立页（viewer.html / showcase.html）由各自内联处理 ---------- */

/* ---------- 10. 全局表格兜底：所有页面容器允许横向滚动 ---------- */
@media (max-width: 768px) {
  .admin-content > div, .toolbar, .el-table { min-width: 0; }
  .el-table.el-table--fit { width: 100%; }
}