/* ============================================================
   mobile_fix.css — 手机端布局合规修复（2026-10-19）
   范围：全部规则包在 @media (max-width:768px) 内，桌面端零影响
   约束：不触碰深色模式锁值 CSS 变量；只做尺寸/字号/触控达标
   对应整改：B1 总表行触控 / B2 芯片 44px / B3 字号下限 12px / B4 顶栏按钮 44px
   ============================================================ */

/* 评语页板块间隙（2026-10-19：电脑端+手机端通用，用户要求两端都有） */
.chub + .chub { margin-top: 16px; }

/* 座位页 hero 瓷砖：可点击的两块（今日长假 / 学生总表）→ 荧光绿 CTA（2026-10-19，两端通用） */
.todo-hero-tiles .todo-dash-card.todo-dash-cta {
  background: var(--skin-cta) !important;
  border-color: var(--skin-cta) !important;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 内容上下居中 */
  text-decoration: none;
}
.todo-hero-tiles .todo-dash-card.todo-dash-cta:hover {
  background: var(--skin-cta-hover) !important;
  border-color: var(--skin-cta-hover) !important;
}
.todo-hero-tiles .todo-dash-card.todo-dash-cta .todo-dash-count { color: var(--skin-primary) !important; }
.todo-hero-tiles .todo-dash-card.todo-dash-cta .todo-dash-label { color: color-mix(in srgb, var(--skin-primary) 85%, transparent) !important; }
/* 学生总表入口：字体与另外三块区分 */
.todo-hero-tiles .todo-dash-card.todo-dash-cta .todo-dash-cta-label {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .5px;
  color: var(--skin-primary, #17402F) !important;
  margin: 0;
}

/* 批量登记座位图底板：白底+描边，解决与页面背景对比度过低（2026-10-19，深色模式不动） */
:root:not([data-theme="dark"]) .ba-seat-area .seat-map {
  background: #FFFFFF !important;
  border: 1px solid #D8E2D3 !important;
  box-shadow: 0 1px 4px rgba(23, 64, 47, 0.06) !important;
}

/* 座位悬停禁用缩放：点击重渲染后悬停 scale(1.05) 重放，造成「缩小放大」闪烁（2026-10-19） */
.seat:hover, .seat-occupied:hover, .seat-available:hover, .seat-leave:hover { transform: none !important; }

/* 学生总表行悬停修复：原行 hover 深绿背景带 0.15s 过渡，单元格底色却是瞬时切换，
   鼠标移出旧行时绿色残余可见再消失（用户反馈「先出现深绿色再快速消失」）。
   去掉行级绿色背景与过渡，仅保留单元格底色的即时悬停反馈。 */
.student-table tbody tr.row-clickable { transition: none !important; }
.student-table tbody tr.row-clickable:hover { background: transparent !important; }

@media (max-width: 768px) {

  /* ---- B1 学生总表行：整行触控 ≥48px ---- */
  .ov-card { padding: 12px 12px; }
  .ovc-top { min-height: 44px; display: flex; align-items: center; }
  .stu-ava { width: 32px; height: 32px; }

  /* ---- B2 行展开芯片（作品/待办/请假/巡班）：44px 高 2×2 网格 ---- */
  .data-badge {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12.5px;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .data-cell .data-badge {
    width: calc(50% - 4px);
    justify-content: center;
    font-size: 12.5px;
    padding: 8px 6px;
  }

  /* ---- B3 字号下限：手机端正文与标签不低于 12px（px+important 终结历史规则打架）---- */
  .status-badge { font-size: 12px !important; padding: 4px 10px; }
  .overview-stat-label { font-size: 12px !important; }
  .tab { font-size: 12.5px !important; padding: 10px 12px; }

  /* ---- B4 首页/座位页操作按钮：44px 触控高度 ---- */
  .todo-hero-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }

  /* ============================================================
     UI-1 座位图首屏（2026-10-19 下午）：四胶囊一排 + 字号缩小
     ============================================================ */
  .todo-hero-btns { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .todo-hero-btns .todo-hero-btn {
    min-height: 42px !important;
    padding: 8px 2px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
  /* 四个方形按钮数字加粗 */
  .todo-dash-count { font-weight: 800 !important; }
  /* 短假仍在校：左对齐（文案位置由 seats.js 模板上移） */
  .seat-hero-sub { text-align: left !important; }

  /* ============================================================
     UI-2 待办关联学生名单：超长换行 + 两端对齐
     ============================================================ */
  .todo-own-tag {
    white-space: normal !important;
    text-align: justify;
    flex: 1 1 auto !important;
  }
  .todo-event-title .todo-own-tag { flex: 1 1 auto !important; }

  /* ============================================================
     UI 第二轮（2026-10-19 11:00）
     ============================================================ */

  /* 评语页板块间隙（全局规则，见文件顶部） */

  /* 总表学生卡片配色：暖白底 + 工作台风格描边（仅浅色模式；深色模式保持原样） */
  html:not([data-theme="dark"]) .ov-card {
    background: #fff !important;
    border: 1px solid #D8DECC !important;
    box-shadow: 0 1px 2px rgba(45, 65, 40, .07) !important;
  }

  /* 筛选行：搜索框与「全部教室」一排；筛选按钮独立成行 + 加深对比（仅浅色模式） */
  .filter-bar { row-gap: 8px; }
  .filter-bar .form-select { order: 1; flex: 0 0 42% !important; }
  .filter-bar .overview-search { order: 2; flex: 1 1 auto !important; width: auto !important; min-width: 0; }
  html:not([data-theme="dark"]) .filter-bar .filter-chip {
    order: 3;
    background: #fff;
    border: 1px solid #93A08C;
    color: #36402F;
    box-shadow: none;
  }
  html:not([data-theme="dark"]) .filter-bar .filter-chip.active {
    background: var(--skin-primary, #1E4D38);
    border-color: var(--skin-primary, #1E4D38);
    color: #fff;
  }

  /* ============================================================
     OVPILL_V1（2026-10-19 晚）：学生总表胶囊化
     用户点名：教室下拉 / 搜索框 / 学生列表卡 全改成「仅看重复」同款两端全圆胶囊；
     学生卡高度压到比头像圆（32px）大一点点；统计框与「在校/转班」标记不动。
     ============================================================ */
  .filter-bar .form-select,
  .filter-bar .overview-search {
    border-radius: 999px !important;
    min-height: 40px;
    box-sizing: border-box;
  }
  .filter-bar .overview-search { box-shadow: none !important; }
  html:not([data-theme="dark"]) .filter-bar .form-select,
  html:not([data-theme="dark"]) .filter-bar .overview-search {
    background: #fff;
    border: 1px solid #93A08C;
    color: #36402F;
    box-shadow: none;
  }
  /* 学生卡：两端全圆胶囊 + 压低高度（32px 头像 + 上下各 5px ≈ 42px 总高） */
  .ov-card { border-radius: 999px !important; padding: 5px 14px 5px 8px !important; gap: 6px; }
  .ovc-top { min-height: 32px; }
  /* 展开态（数据徽章区可见）：胶囊无法容纳多行，退回大圆角 */
  .ov-card.open { border-radius: 22px !important; }

  /* ============================================================
     OVPILL_V2（2026-10-19 晚）：展开区四个数据徽章——胶囊 + 四等分固定宽
     ============================================================ */
  .ovc-badges { grid-template-columns: repeat(4, 1fr) !important; }
  .ovc-badges .data-badge {
    border-radius: 999px !important;
    width: 100% !important;
    min-height: 38px;
    padding: 6px 4px !important;
    font-size: 12px !important;
    box-sizing: border-box;
  }

  /* ============================================================
     OVPIN_V2（2026-10-19 深夜）：吸顶条推倒重做。
     之前 sticky 叠加方案在 iOS 真机上失效且锁死滚动（p5~p8 三连翻车）。
     现在：独立吸顶条 #ov-pinbar 挂在 body 直下（fixed 定位，无 transform
     祖先劫持问题），pinned 时显示：左「←座位图」+ 正中央「学生总表」。
     页面内原生返回按钮/标题保持不动，滚走即可。
     ============================================================ */
  #ov-pinbar {
    display: none;
    position: fixed; top: 6px; left: 10px; right: 10px; z-index: 900;
    align-items: center;
    min-height: 46px;
    padding: 6px 12px;
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(45, 65, 40, .12);
    box-sizing: border-box;
  }
  body.ov-pinned #ov-pinbar { display: flex; }
  #ov-pinbar .ovpin-title {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-size: 14.5px; font-weight: 700;
    color: var(--text);
    white-space: nowrap;
  }

  /* ============================================================
     CHUBGRID_V1（2026-10-19 深夜）：评价中心页 + 录音分类页宫格统一
     「一排四个正方形、不满四个空着、emoji 隐藏只留文字」
     （用户点名，规格同座位页 hero 四格；任务中心 #/tasks 页不在此范围）
     ============================================================ */
  .chub:not(.taskhub) .chub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; max-width: 100%; }
  .chub:not(.taskhub) .chub-btn {
    aspect-ratio: 1 / 1 !important;
    min-width: 0 !important;
    overflow: hidden;
    padding: 4px 2px !important;
    justify-content: center;
    font-size: 12px !important;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .chub:not(.taskhub) .chub-ico { display: block !important; width: 34px; height: 34px; }
  .chub:not(.taskhub) .chub-ico svg { width: 100%; height: 100%; display: block; }
  .rec-hero .cat-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
  .rec-hero .cat-card {
    aspect-ratio: 1 / 1 !important;
    padding: 8px 4px !important;
  }
  .rec-hero .cat-card .ic { display: none !important; }
  .rec-hero .cat-card .nm { font-size: 12.5px !important; margin-top: 4px !important; }
  .rec-hero .cat-card .ct { font-size: 11px !important; margin-top: 2px !important; }

  /* ============================================================
     OVPILL_V5（2026-10-19 深夜）：筛选区排版终稿
     三个胶囊由 overview.js 包进独立 .chip-row 容器（简单 flex 行内
     三等分，脱离外层 flex-wrap 的换行干扰——wrap 环境下均分在
     iOS/无头浏览器均实测异常）。
     行1：全部教室(34%) + 搜索框(占满)；行2：三胶囊等分。
     ============================================================ */
  .filter-bar { flex-wrap: wrap !important; align-items: center !important; }
  .filter-bar .form-select {
    flex: 0 0 34% !important;
    min-width: 0 !important;
    text-align: center;
    text-align-last: center;
  }
  /* basis 必须为 0：auto 会按内容宽挤到换行（p10 两排问题的根因） */
  .filter-bar .overview-search { flex: 1 1 0 !important; min-width: 0 !important; }
  .filter-bar .chip-row {
    display: flex !important;
    flex: 0 0 100% !important;  /* 不 grow 不 shrink：basis 满宽且不可压缩，wrap 必然独占一行 */
    gap: 8px;
    order: 3;
    min-width: 0 !important;
  }
  .chip-row .filter-chip {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    border-radius: 999px !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 0 4px !important;
    font-size: 12px !important;
    box-sizing: border-box;
  }
}

/* ============================================================
   RECSAFE_V1（2026-10-19 深夜）：录音 iframe 手机端顶部安全区
   修复「页面顶到最上面」：fixed iframe top=0 被 iOS 状态栏/刘海遮挡。
   顶部用 env(safe-area-inset-top) + 6px；底部贴底栏上沿；高度由 top/bottom 撑出。
   ============================================================ */
@media (max-width: 820px) {
  .recordings-embed-frame:not(.rec-parked) {
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
    /* dvh=动态视口高：显式高度，避免 bottom 拉伸对 iframe（replaced 元素）不生效导致底内容被裁 */
    height: calc(100dvh - 150px) !important;
    bottom: auto !important;
  }
}

/* SKIN_ENGINE_V1 深色锁值（2026-10-21） */
html[data-theme="dark"] .todo-hero-tiles .todo-dash-card.todo-dash-cta .todo-dash-cta-label { color: #17402F !important; }