/* ============================================================
   码栈少儿编程 · 教务管理系统 —— 移动端专用样式
   ============================================================
   断点约定：
     >= 1201px  桌面宽屏（保持 PC 完整体验）
     993~1200   小笔记本
     769~992    平板竖屏（侧栏折叠、表格可横滑）
     <= 768px   手机（卡片化列表、底部弹层、抽屉贴底）
     <= 400px   小屏手机（单列、进一步压缩）

   本文件在 app.css 之后加载，仅做「增强 / 覆盖」，不改动 PC 端观感。
   ============================================================ */

:root {
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --m-page-pad: 10px;
  --m-radius: 12px;
}

/* 移动端基础：禁止双击缩放导致的字号跳动、去掉点击蓝块 */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* 工具类：仅移动端显示 / 移动端隐藏（PC 端由 app.css 的 min-width:769 规则处理） */
.only-mobile { display: none; }

/* ============================================================
   一、平板（769 ~ 992）
   ============================================================ */
@media (max-width: 992px) and (min-width: 769px) {
  .page { padding: 12px; }
  .card { padding: 14px; }
  .filter-bar { gap: 8px; }
  .chart-box { height: 260px; }
  .stat-card .value { font-size: 24px; }
  /* 平板上表格允许横向滑动，避免挤成一团 */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   二、手机（<= 768px）
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 0. 工具类 ---------- */
  .only-mobile { display: block; }
  .only-mobile.flex, .only-mobile.is-flex { display: flex; }
  .hide-mobile { display: none !important; }

  /* ---------- 1. 登录页：单列流式 ---------- */
  .login-page {
    flex-direction: column; padding: 0; overflow-x: hidden;
    min-height: 100vh; min-height: 100dvh;
    padding-top: var(--safe-t);
  }
  .login-page .blob { display: none; }
  .login-left { padding: 26px 20px 6px; flex: none; }
  .login-brand { margin-bottom: 18px; gap: 11px; }
  .login-brand .mark { width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
  .login-brand h1 { font-size: 19px; }
  .login-brand p { font-size: 12px; }
  .login-title { font-size: 24px; margin-bottom: 10px; }
  .login-desc { font-size: 13px; line-height: 1.85; margin-bottom: 0; }
  .login-tags { display: none; }
  .login-right { width: 100%; padding: 18px 16px 20px; flex: none; }
  .login-card { padding: 22px 18px; border-radius: 18px; box-shadow: 0 10px 30px rgba(31, 43, 69, .1); }
  .login-card h2 { font-size: 19px; }
  .captcha-img { width: 104px; }
  /* 登录页备案信息回到文档流末尾 */
  .login-page .app-footer, footer.login-footer.app-footer {
    position: static; margin-top: auto; border-top: none; height: auto;
    padding: 12px 8px calc(12px + var(--safe-b)); background: transparent;
    flex-wrap: wrap; gap: 4px 10px; font-size: 11px;
  }

  /* 报表页：左右分栏在手机上改为上下堆叠 */
  .report-layout { flex-direction: column !important; }
  .report-layout > div:first-child { width: 100% !important; flex: none !important; }
  .report-menu { max-height: 220px; overflow-y: auto; }

  /* ---------- 2. 主框架：侧栏抽屉 + 紧凑顶栏 ---------- */
  .sidebar {
    width: 78%; max-width: 300px;
    box-shadow: 0 0 40px rgba(20, 28, 48, .22);
  }
  .sidebar .side-menu { padding: 8px 0 16px; }
  .side-logo { height: 54px; padding: 0 14px; }
  .mask-mobile { background: rgba(20, 28, 48, .45); backdrop-filter: blur(1px); }

  .header {
    height: 52px; padding: 0 10px; gap: 6px;
    padding-top: var(--safe-t); height: calc(52px + var(--safe-t));
  }
  .header .fold { font-size: 21px; }
  .header .crumb { font-size: 15px; font-weight: 700; }
  .header .crumb small { display: none; }
  .header .u-name { display: none; }
  .header .h-btn { width: 32px; height: 32px; font-size: 16px; }

  .page { padding: var(--m-page-pad) var(--m-page-pad) calc(14px + var(--safe-b)); }

  .app-footer {
    height: 34px; font-size: 11px; gap: 10px;
    padding: 0 8px var(--safe-b);
  }
  .app-footer .cp, .app-footer .beian { white-space: nowrap; }

  /* ---------- 3. 页面标题栏（PageHeader 组件） ---------- */
  .page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
  }
  .page-header .ph-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .page-header .ph-icon {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    background: var(--brand-grad); color: #fff; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
  }
  .page-header .ph-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; }
  .page-header .ph-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
  .page-header .ph-actions { flex: none; display: flex; gap: 6px; }
  /* 移动端标题栏里的 tab 切换组铺满并等分 */
  .page-header .ph-actions .el-radio-group { display: flex; flex-wrap: wrap; }
  .page-header .ph-actions .el-radio-button { flex: 1; }
  .page-header .ph-actions .el-radio-button .el-radio-button__inner {
    width: 100%; padding: 7px 10px; font-size: 12px;
  }

  /* ---------- 4. 卡片 / 工具条 / 筛选栏 ---------- */
  .card { padding: 12px; border-radius: var(--m-radius); margin-bottom: 10px; }
  .card.pad0 { padding: 0; }
  .card-hd { margin-bottom: 10px; gap: 8px; }
  .card-hd h3 { font-size: 14px; }
  .card-hd .sub { width: 100%; }

  /* 筛选栏：两列网格，控件全宽；隐藏纯占位元素 */
  .filter-bar,
  .tool-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center;
  }
  .filter-bar > *, .tool-bar > * { min-width: 0; }
  .filter-bar .el-input,
  .filter-bar .el-select,
  .filter-bar .el-date-editor,
  .filter-bar .el-input-number,
  .filter-bar .el-cascader,
  .filter-bar .w110, .filter-bar .w120, .filter-bar .w130,
  .filter-bar .w140, .filter-bar .w150, .filter-bar .w160,
  .filter-bar .w170, .filter-bar .w180, .filter-bar .w240 {
    width: 100% !important; max-width: 100% !important;
  }
  /* 占位 spacer、日期区间波浪号、纯文本分隔符不占格 */
  .filter-bar > .spacer,
  .tool-bar > .spacer { display: none !important; }
  .filter-bar > span:not(.spacer):not(.el-radio-group),
  .tool-bar > span:not(.spacer) { display: none !important; }
  .filter-bar .el-button, .tool-bar .el-button { width: 100%; }
  .filter-bar .el-radio-group, .tool-bar .el-radio-group { grid-column: span 2; display: flex; }
  .filter-bar .el-radio-group .el-radio-button { flex: 1; }
  .filter-bar .el-radio-group .el-radio-button__inner { width: 100%; padding: 7px 8px; font-size: 12px; }
  .filter-bar .fb-full, .tool-bar .fb-full { grid-column: span 2; }
  .filter-bar .fb-btns, .tool-bar .fb-btns { grid-column: span 2; display: flex; gap: 8px; }
  .filter-bar .fb-btns .el-button, .tool-bar .fb-btns .el-button { flex: 1; }

  /* ---------- 5. 数据卡片 / 图表 ---------- */
  .stat-card { padding: 13px 14px; border-radius: var(--m-radius); }
  .stat-card .ico { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; right: 12px; top: 12px; }
  .stat-card .label { font-size: 12px; margin-bottom: 6px; }
  .stat-card .value { font-size: 21px; }
  .stat-card .foot { gap: 10px; font-size: 11.5px; }
  .mini-stat { padding: 11px 8px; border-radius: 10px; }
  .mini-stat .v { font-size: 18px; }
  .mini-stat .l { font-size: 11px; margin-top: 3px; }
  .chart-box { height: 220px; }
  .chart-box.sm { height: 200px; }

  /* el-row / el-col 在手机上留出行间距 */
  .el-row { margin-left: 0 !important; margin-right: 0 !important; }
  .el-col { padding-left: 5px !important; padding-right: 5px !important; margin-bottom: 8px; }

  /* ---------- 6. 表格兜底（未改造的表格统一包横向滚动容器） ---------- */
  .table-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -2px; padding: 0 2px;
  }
  .el-table { font-size: 12px; }
  .el-table .cell { padding: 0 6px; }
  .el-table .el-table__cell { padding: 7px 0 !important; }
  .el-table th.el-table__cell { font-size: 12px; }
  /* 固定列阴影在移动端去掉，避免视觉干扰 */
  .el-table__fixed-right::before, .el-table__fixed::before { display: none; }

  /* ---------- 7. 弹窗：改造成底部弹出 sheet ---------- */
  .el-overlay-dialog {
    display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  }
  .el-dialog {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; top: auto !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 88vh; max-height: 88dvh;
    display: flex !important; flex-direction: column; overflow: hidden;
    animation: m-sheet-up .22s ease;
  }
  @keyframes m-sheet-up { from { transform: translateY(24px); opacity: .6 } to { transform: none; opacity: 1 } }
  .el-dialog__header {
    padding: 13px 16px 11px !important; margin-right: 0 !important;
    border-bottom: 1px solid var(--line); text-align: left;
  }
  .el-dialog__title { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
  .el-dialog__headerbtn { top: 10px; right: 10px; width: 26px; height: 26px; }
  .el-dialog__body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(14px + var(--safe-b)) !important;
  }
  .el-dialog__footer {
    padding: 10px 14px calc(10px + var(--safe-b)) !important;
    border-top: 1px solid var(--line);
    display: flex; gap: 10px;
  }
  .el-dialog__footer .el-button { flex: 1; margin: 0 !important; }

  /* ---------- 8. 抽屉：贴底 + 圆角 ---------- */
  .el-drawer.rtl, .el-drawer.ltr {
    width: 100% !important; max-width: 100% !important;
    height: 90vh !important; height: 90dvh !important;
    top: auto !important; bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .el-drawer.btt {
    width: 100% !important; max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .el-drawer__header {
    padding: 13px 16px !important; margin-bottom: 0 !important;
    border-bottom: 1px solid var(--line);
  }
  .el-drawer__title { font-size: 15.5px; font-weight: 700; }
  .el-drawer__close-btn { padding-right: 0; }
  .el-drawer__body {
    padding: 14px 14px calc(18px + var(--safe-b)) !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }

  /* ---------- 9. 消息盒 / 轻提示 ---------- */
  .el-message-box { width: 88% !important; max-width: 88% !important; }
  .el-message { min-width: auto; width: calc(100vw - 40px); }
  .el-message__content { font-size: 13px; }

  /* ---------- 10. 表单：label 置顶、控件全宽 ---------- */
  .el-form-item { display: block !important; margin-bottom: 12px !important; }
  .el-form-item__label {
    display: block !important; float: none !important;
    width: auto !important; text-align: left !important;
    padding: 0 0 5px !important; line-height: 1.4 !important;
    font-size: 12px !important; color: var(--text-3) !important;
  }
  .el-form-item__content {
    margin-left: 0 !important; width: 100%;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  }
  .el-form-item__content > * { min-width: 0; }
  .el-form--inline .el-form-item { margin-right: 0 !important; }
  /* 各类固定宽度工具类 → 全宽 */
  .el-form-item__content .el-input,
  .el-form-item__content .el-select,
  .el-form-item__content .el-date-editor,
  .el-form-item__content .el-input-number,
  .el-form-item__content .w100, .el-form-item__content .w110,
  .el-form-item__content .w120, .el-form-item__content .w130,
  .el-form-item__content .w140, .el-form-item__content .w150,
  .el-form-item__content .w160, .el-form-item__content .w170,
  .el-form-item__content .w180, .el-form-item__content .w240,
  .el-form-item__content .w300, .el-form-item__content .w400 {
    width: 100% !important; max-width: 100% !important; flex: 1 1 100%;
  }
  /* 表单内的并列控件（两个 input / 数字框）拆成两行或等分 */
  .el-form-item__content .ml8, .el-form-item__content .mr8 {
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .el-form-item__content > .el-input + .el-input,
  .el-form-item__content > .el-select + .el-select,
  .el-form-item__content > .el-input-number + .el-input-number {
    flex: 1 1 45%;
  }
  .el-form-item__content .el-radio-group { flex-wrap: wrap; gap: 6px 10px; }
  .el-form-item__content .el-input-number { width: 100% !important; }
  .el-form-item__content .el-input-number .el-input__inner { text-align: left; }
  .el-textarea__inner { font-size: 14px; }
  /* 上传控件 */
  .el-upload, .el-upload-dragger { width: 100%; }

  /* ---------- 11. 描述列表：单列紧凑 ---------- */
  .el-descriptions__body { font-size: 13px; }
  .el-descriptions__label {
    width: 92px !important; min-width: 92px !important;
    font-size: 12px !important; color: var(--text-3) !important;
  }
  .el-descriptions__content { font-size: 13px !important; word-break: break-all; }
  .el-descriptions-row > td { padding: 8px 10px !important; }

  /* ---------- 12. Tabs 横向滚动 ---------- */
  .el-tabs__nav-wrap::after { height: 1px; }
  .el-tabs__item { font-size: 13px; padding: 0 12px; }
  .el-tabs__header { margin-bottom: 12px; }

  /* ---------- 13. 分页：居中紧凑 ---------- */
  .pager { justify-content: center; padding: 10px 0 2px; }
  .el-pagination .el-pagination__total,
  .el-pagination .el-pagination__jump,
  .el-pagination .el-pagination__sizes { display: none !important; }
  .el-pagination .btn-prev, .el-pagination .btn-next,
  .el-pagination .el-pager li {
    min-width: 28px !important; height: 28px; line-height: 28px; font-size: 12.5px;
  }

  /* ---------- 14. 日历（月历 / 周历） ---------- */
  .cal-month .day { min-height: 50px; padding: 3px; }
  .cal-month .head { padding: 7px 2px; font-size: 12px; }
  .cal-month .day .dnum { font-size: 11px; margin-bottom: 2px; }
  .cal-month .day.today .dnum { width: 20px; height: 20px; }
  .lesson-chip { padding: 2px 4px; margin-bottom: 2px; border-radius: 5px; }
  .lesson-chip:hover { transform: none; }
  .lesson-chip b { font-size: 10px; font-weight: 600; }
  .cal-week { grid-template-columns: 42px repeat(7, minmax(84px, 1fr)); }
  .cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legend { gap: 8px 12px; font-size: 11.5px; }

  /* ---------- 15. 其他小组件 ---------- */
  .todo-item { padding: 10px; }
  .timeline-log .row { flex-wrap: wrap; gap: 4px 8px; }
  .timeline-log .t { width: 100%; }
  .detail-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .perm-group .pg-bd { gap: 8px 14px; }
  .perm-group .pg-hd { padding: 9px 11px; font-size: 13px; }
  .empty-box { padding: 26px 0; font-size: 12.5px; }
  .empty-hint { padding: 26px 0; text-align: center; color: var(--text-3); font-size: 13px; }
  .empty-hint .eh-icon { font-size: 30px; opacity: .35; display: block; margin-bottom: 8px; }
  .el-alert { font-size: 12.5px; }
  .el-alert__title { font-size: 12.5px; }
  /* 通用 flex 容器在窄屏允许换行 */
  .flex, .flex-between { flex-wrap: wrap; }
  /* 段落标题 */
  h4 { font-size: 13.5px; }
}

/* ============================================================
   三、小屏手机（<= 400px）
   ============================================================ */
@media (max-width: 400px) {
  .page { padding: 8px 8px calc(14px + var(--safe-b)); }
  .card { padding: 10px; }
  .filter-bar, .tool-bar { grid-template-columns: 1fr; }
  .login-card { padding: 18px 15px; }
  .login-title { font-size: 21px; }
  .stat-card .value { font-size: 19px; }
  .chart-box { height: 200px; }
  .el-dialog__footer { flex-direction: column-reverse; }
  .el-dialog__footer .el-button { width: 100%; }
  .m-card { padding: 10px; }
}

/* ============================================================
   四、移动端卡片列表组件（MList）—— 与断点无关，仅在移动端渲染
   ============================================================ */
.m-list { display: block; }

.m-list .m-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--m-radius);
  padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow);
  transition: background .15s, transform .12s;
}
.m-list .m-card:active { background: #fafbff; transform: scale(.995); }

.m-card .m-hd { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; }
.m-card .m-avatar { flex: none; }
.m-card .m-tt { flex: 1; min-width: 0; }
.m-card .m-title {
  font-weight: 700; font-size: 14.5px; color: var(--text-1);
  line-height: 1.35; word-break: break-all;
}
.m-card .m-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }
.m-card .m-tag { flex: none; display: flex; align-items: center; gap: 4px; max-width: 40%; }

.m-card .m-bd { display: block; }
.m-card .m-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 3px 0; font-size: 12.5px;
}
.m-card .m-row .k { color: var(--text-3); flex: none; }
.m-card .m-row .v { color: var(--text-1); text-align: right; word-break: break-all; }
.m-card .m-row .v.bold { font-weight: 700; }
.m-card .m-row .v.money { font-weight: 700; color: #e8543f; }

.m-card .m-ft {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.m-card .m-ft .el-button { flex: 1 1 auto; min-width: 72px; margin: 0; }

.m-list .m-empty { padding: 30px 0; text-align: center; color: var(--text-3); font-size: 13px; }
.m-list .m-empty .mi { font-size: 30px; opacity: .35; display: block; margin-bottom: 6px; }

/* 移动端卡片内嵌表单（如考勤逐人录入） */
.m-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line);
}
.m-form-grid .m-fi { min-width: 0; }
.m-form-grid .m-fi-full { grid-column: span 2; }
.m-form-grid .m-fi label {
  display: block; font-size: 11.5px; color: var(--text-3);
  margin-bottom: 4px; line-height: 1.3;
}
.m-form-grid .m-fi .el-select,
.m-form-grid .m-fi .el-input,
.m-form-grid .m-fi .el-input-number { width: 100% !important; }
.m-form-grid .m-fi-switch {
  display: flex; align-items: center; justify-content: space-between;
}
.m-form-grid .m-fi-switch label { margin-bottom: 0; }

/* 月历「还有 N 节」提示 */
.cal-more {
  font-size: 10px; color: var(--brand); text-align: center;
  line-height: 1.3; padding: 1px 2px; cursor: pointer;
  background: #eef3ff; border-radius: 4px;
}

/* 移动端「加载更多 / 分页条」 */
.m-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 2px 2px; font-size: 12px; color: var(--text-3);
}
.m-pager .el-button { flex: none; }

/* 移动端筛选：可折叠的高级筛选面板 */
.m-filter-toggle { width: 100%; }
.m-filter-panel {
  background: #fafbff; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; margin-bottom: 10px;
}

/* 移动端底部操作栏（悬浮） */
.m-action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  background: #fff; border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + var(--safe-b));
  display: flex; gap: 10px; box-shadow: 0 -2px 12px rgba(31, 43, 69, .06);
}
.m-action-bar .el-button { flex: 1; }