/* ============================================================
   三人行 OA · 手机端适配叠加层（mobile.css）
   策略：叠加于 oa.css / theme.css 之上，零改动原文件，可一键回退
   回退方式：从 index.html / login.html 摘掉 <link rel="stylesheet" href="/mobile.css">
   断点：≤768px 视为手机，侧边栏改为抽屉 + 顶栏汉堡按钮
   ============================================================ */

/* 汉堡按钮 & 遮罩：桌面端默认隐藏（确保不影响 PC 端） */
.topbar-hamburger { display: none; }
.sidebar-backdrop { display: none; }
.sidebar-user { display: none; }
.sidebar-backdrop.show { display: none; }

/* 手机端隐藏（电脑专属元素）：审批中心「发起申请」按钮 + 「审批管理」入口 */
.hide-mobile { display: none !important; }

/* 抽屉打开时锁定背景滚动，避免穿透到下方内容 */
body.sb-open { overflow: hidden; }

@media (max-width: 768px) {
  /* 工作台：欢迎词 + 天气同一行，天气靠右 */
  .page-head > div:first-child { flex: 1; min-width: 0; }
  .wb-head-line { justify-content: space-between; gap: 8px; }
  .wb-head-line .desc { flex: 1; min-width: 0; }

  /* ---------- 顶栏 ---------- */
  .topbar-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border: 0; background: transparent; cursor: pointer;
    border-radius: 10px; color: var(--text-2);
    margin-right: 2px;
  }
  .topbar-hamburger svg { width: 22px; height: 22px; stroke: currentColor; }
  .topbar-hamburger:active { background: var(--primary-soft); }

  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-search { display: none; }   /* 手机隐藏全局搜索框（桌面端已开发，窄屏空间有限） */
  .topbar-user .name { display: none; }

  /* ---------- 侧边栏变抽屉 ---------- */
  .sidebar {
    position: fixed; top: 0; left: 0;
    width: 248px; max-width: 82vw;
    height: 100vh; z-index: 95;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 8px 0 30px rgba(15, 23, 42, .20);
    will-change: transform;
  }
  .sidebar.open { transform: translateX(0); }

  /* 覆盖 oa.css ≤900px 窄条规则：抽屉内恢复完整「文字」导航 */
  .sidebar-logo { justify-content: flex-start; padding: 20px; }
  .sidebar-brand { display: block; max-width: 196px; }
  .nav-group-title { display: flex; }
  .nav-item { justify-content: flex-start; padding: 11px 14px; min-height: 46px; }
  .nav-item .nav-badge {
    position: static; margin-left: auto;
    min-width: 19px; height: 19px; font-size: 12px; padding: 0 6px;
  }
  .nav-item.active::before { left: -12px; width: 4px; }
  .sidebar-footer { display: flex; }

  /* 手机端：登录人信息已上移至固定顶栏（面包屑处），抽屉内不再重复显示 */
  .sidebar-user { display: none; }
  .sidebar-logo { cursor: pointer; }

  .sidebar-backdrop.show { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, .42); z-index: 90; cursor: pointer; -webkit-tap-highlight-color: transparent; }

  /* ---------- 内容区全宽、内边距收窄 ---------- */
  .main { width: 100%; }
  .content { padding: 14px; }

  /* ---------- 工作台首页四宫格：手机端 2×2，顺序 今日上班→待办→我提交→公告 ---------- */
  .wb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
  .stat-card {
    flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 12px 8px;
  }
  .stat-card.nav { cursor: pointer; transition: transform .08s ease, box-shadow .15s ease; }
  .stat-card.nav:active { transform: scale(.98); box-shadow: 0 4px 14px rgba(15, 23, 42, .12); }
  .stat-icon { width: 34px; height: 34px; border-radius: 10px; aspect-ratio: 1/1; }
  .stat-icon svg { width: 17px; height: 17px; aspect-ratio: 1/1; }
  .stat-value { font-size: 19px; }
  .stat-label { font-size: 11px; margin-top: 0; }

  /* ---------- 标题行竖排、主操作按钮全宽 ---------- */
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head h2 { font-size: 19px; }
  .page-head > div:last-child,
  .page-head .btn { width: 100%; justify-content: center; }

  /* ---------- 内联多列网格统一单列（覆盖 app.js 行内 style）---------- */
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:260px 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ---------- 卡片 ---------- */
  .card { margin-bottom: 14px; }
  .card-body { padding: 16px; }
  .card-head { padding: 14px 16px; }
  .card-head h3 { font-size: 15px; }

  /* ---------- 表单单列 ---------- */
  .form-grid { grid-template-columns: 1fr; }

  /* ---------- 筛选栏纵向紧凑 ---------- */
  .filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 12px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .filter-bar select, .filter-bar input {
    flex: 1 1 calc(50% - 8px);
    width: auto;
    min-width: 0;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  .filter-bar .btn {
    flex: 1 1 100%;
    width: 100%;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* ---------- 其它表格横向滚动（oa.css 已有 overflow-x，这里确保顺滑）---------- */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding: 11px 12px; }

  /* ---------- 审批列表手机端卡片化（紧凑两列网格，消除右侧留白）---------- */
  /* 仅作用于：首页「待我审批」表 与 审批中心「#approveTable」，不影响其它表 */
  .card-body.flush .table,
  #approveTable {
    display: block; width: 100%;
    border: 0; background: transparent;
  }
  .card-body.flush .table thead,
  #approveTable thead { display: none; }
  .card-body.flush .table tbody,
  #approveTable tbody { display: block; width: 100%; }
  .card-body.flush .table tr,
  #approveTable tr {
    display: grid;
    grid-template-columns: auto 1fr;       /* 两列：左标签区 / 右值区 */
    gap: 4px 10px;
    background: var(--card);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px !important; margin-bottom: 8px;
    align-items: center;
  }
  .card-body.flush .table tr:last-child,
  #approveTable tr:last-child { margin-bottom: 0; }

  /* 编号：独占整行，小字灰 */
  .card-body.flush .table td[data-label="编号"],
  #approveTable td[data-label="编号"] {
    grid-column: 1 / -1;                  /* 跨两列 */
    font-size: 12px; color: var(--text-2);
    padding: 0 0 2px !important; border-bottom: 1px solid var(--border, rgba(0,0,0,.06));
    margin-bottom: 4px;
  }

  /* 类型标签 + 标题：类型在左列小标签，标题在右列填满 */
  .card-body.flush .table td[data-label="类型"],
  #approveTable td[data-label="类型"] {
    align-self: start; padding-top: 6px !important;
  }
  .card-body.flush .table td[data-label="标题"],
  #approveTable td[data-label="标题"] {
    font-weight: 600; font-size: 14px; line-height: 1.5;
    align-self: start; padding-top: 6px !important;
  }

  /* 申请人 + 时间 */
  .card-body.flush .table td[data-label="申请人"],
  #approveTable td[data-label="申请人"] { font-size: 13px; }
  .card-body.flush .table td[data-label="提交时间"],
  #approveTable td[data-label="提交时间"] {
    font-size: 12px; color: var(--text-2); justify-content: flex-end;
  }

  /* 状态 + 操作：跨整行，横排两端对齐 */
  .card-body.flush .table td[data-label="状态"],
  #approveTable td[data-label="状态"] {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-start; gap: 8px;
    padding: 6px 0 2px !important;
  }
  .card-body.flush .table td[data-label="操作"],
  #approveTable td[data-label="操作"] {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; padding: 2px 0 0 !important;
  }

  /* 通用 td 基础样式 */
  .card-body.flush .table td,
  #approveTable td {
    display: flex; align-items: center;
    min-width: 0; padding: 3px 0 !important; border: 0;
    font-size: 13px; line-height: 1.4;
  }
  /* 隐藏 data-label 伪元素（网格自带位置） */
  .card-body.flush .table td::before,
  #approveTable td::before {
    display: none !important;
  }

  /* ---------- 通讯录手机端卡片化（联系人表专属，避免被通用 flush 表样式误伤）---------- */
  #contactsTable { display: block; width: 100%; border: 0; background: transparent; }
  #contactsTable thead { display: none; }
  #contactsTable tbody { display: block; width: 100%; }
  #contactsTable tr {
    display: block; background: var(--card);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 14px !important; margin-bottom: 10px;
  }
  #contactsTable tr:last-child { margin-bottom: 0; }
  #contactsTable td {
    display: block; border: 0; padding: 2px 0; font-size: 13px; line-height: 1.5;
    min-width: 0; width: 100%;
  }
  /* 姓名 + 角色徽章：主行加粗 */
  #contactsTable td:nth-child(1) { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
  #contactsTable td:nth-child(1) .role-badge { font-size: 11px; font-weight: 500; margin-left: 4px; padding: 1px 6px; vertical-align: middle; }
  /* 部门 + 职位：并排成一行，用「·」分隔 */
  #contactsTable td:nth-child(2),
  #contactsTable td:nth-child(3) { display: inline; font-size: 12px; color: var(--text-2); }
  #contactsTable td:nth-child(2)::after { content: ' · '; }
  /* 单位：灰字小字 */
  #contactsTable td:nth-child(4) { font-size: 12px; color: var(--text-2); }
  /* 手机号：强调，可点击拨号 */
  #contactsTable td:nth-child(5) { font-size: 14px; font-weight: 500; margin: 4px 0 2px; }
  #contactsTable td:nth-child(5) a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--primary, #3B82F6); }
  #contactsTable td:nth-child(5) .text-muted { font-size: 12px; font-weight: 400; color: var(--text-2); }
  #contactsTable td:nth-child(5) .text-muted a { border-bottom: none; }
  /* 来源徽章：小字一行 */
  #contactsTable td:nth-child(6) { margin: 2px 0 0; }
  /* 操作按钮：顶部分割线 + 两端对齐，各占一半宽 */
  #contactsTable td:nth-child(7) {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 8px; padding-top: 8px !important;
    border-top: 1px solid var(--border, rgba(0,0,0,.06));
  }
  #contactsTable td:nth-child(7) .btn { flex: 1; }

  /* ---------- 弹窗：近满屏 + 覆盖行内 560/620px 宽度，避免窄屏溢出 ---------- */
  .modal-card { width: auto !important; max-width: 100% !important; border-radius: 14px; }
  .modal-overlay { padding: 12px; }
  /* 弹窗内「说明 + 按钮」横排改竖排、按钮全宽，避免挤压 */
  .modal-card .flex-between { flex-direction: column; align-items: stretch; gap: 10px; }
  .modal-card .flex-between .btn { width: 100%; justify-content: center; }

  /* ---------- 页面内标签页横向滚动 ---------- */
  .page-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 触摸目标加大，避免误触 ---------- */
  .btn { min-height: 42px; }
  .ptab { white-space: nowrap; }
  /* 审批详情「同意/驳回/退回」三个按钮：手机端堆叠全宽，避免挤一行 */
  #viewRoot .card .flex > .btn { flex: 1 1 100%; margin: 0; }
  /* 审批详情：手机端单列后收紧卡片与网格间距，消除上下文留空 */
  #viewRoot .card { margin-bottom: 12px; }
  [style*="grid-template-columns:2fr 1fr"] { gap: 12px !important; }
  .appr-detail-grid { grid-template-columns: 1fr; gap: 12px; }
  .appr-detail-head { padding: 12px 14px; }
  .appr-detail-title { font-size: 15.5px; }
  .appr-detail-body { padding: 12px 14px; }
  .appr-form { gap: 10px 14px; }
  .appr-content { margin-top: 12px; padding: 12px 14px; }
  .appr-content-text { font-size: 13.5px; line-height: 1.7; }
  .appr-ops { flex-direction: row; gap: 8px; }
  .appr-ops .btn { flex: 1; width: auto; justify-content: center; min-height: 42px; font-size: 13.5px; padding: 6px 8px; }
  .appr-ops .back-btn { flex: 0 0 auto; min-height: 42px; padding: 6px 12px; }

  /* ---------- 退出登录菜单宽度 ---------- */
  .user-menu { min-width: 140px; }
}

/* 超小屏（≤480px）：登录页留白收紧，避免过窄 */
@media (max-width: 480px) {
  .login-card { padding: 30px 20px 26px; border-radius: 16px; }
  .login-h1 { font-size: 20px; }
  .login-logo { max-width: 200px; margin-bottom: 18px; }
  .login-card .login-btn { letter-spacing: 4px; }
}

/* ============================================================
   工作台四宫格（今日上班 / 待办审批 / 我提交的审批 / 公告）
   —— 基础样式放在媒体查询外，桌面端同样生效，保持一致性 ——
   ============================================================ */
.wb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.stat-card.nav { cursor: pointer; transition: transform .08s ease, box-shadow .15s ease; }
.stat-card.nav:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .10); }
.stat-card.nav:active { transform: scale(.98); }
/* 打卡按钮底色与其余三张工作台卡片保持一致（白底 .stat-card），仅保留打卡中禁用态视觉 */
#clockBtn.loading { opacity: .6; pointer-events: none; }

/* 打卡位置标签：范围内(绿)/外勤(琥珀)/未定位(灰) */
.badge-green { background: rgba(16, 185, 129, .12); color: #059669; }
.stat-icon.blue { background: var(--primary-soft); color: var(--primary); }

/* 轻量 toast 提示（全端通用） */
.toast-box {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 999; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; width: max-content; max-width: 88vw;
}
.toast {
  background: rgba(17, 24, 39, .92); color: #fff; font-size: 13.5px;
  padding: 10px 18px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-err { background: rgba(185, 28, 28, .94); }

@media (max-width: 768px) {
  /* 统一缩小工作台图标（移动端更紧凑、视觉一致） */
  .stat-icon { width: 30px; height: 30px; border-radius: 9px; }
  .stat-icon svg { width: 16px; height: 16px; }
  .stat-value { font-size: 18px; }
}

/* ============================================================
   打卡日历（我的考勤）
   ============================================================ */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-title { font-weight: 600; font-size: 15px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.cal-week span { padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { border: 1px solid var(--border); border-radius: 8px; min-height: 50px; padding: 5px 6px; font-size: 13px; background: #fff; position: relative; }
.cal-cell.empty { background: transparent; border: none; }
.cal-cell.today { border-color: var(--primary, #3B82F6); box-shadow: 0 0 0 2px rgba(59, 130, 246, .15); }
.cal-cell.have { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .5); }
.cal-cell.half { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .5); }
.cal-d { font-weight: 600; }
/* 手机端打卡标记：圆点+短时间，紧凑排列 */
.cal-mark { display: flex; flex-wrap: wrap; gap: 1px 4px; margin-top: 2px; }
.cal-mark .mk { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cal-mark .mk i { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cal-mark .mk.in i { background: #16A34A; }
.cal-mark .mk.out i { background: #2563EB; }
.cal-mark .mk-st { font-size: 9px; font-weight: 600; color: var(--primary, #2563EB); }
.cal-cell.miss .cal-mark .mk-st { color: #DC2626; }
.cal-cell.late .cal-mark .mk-st { color: #D97706; }
.cal-cell.no-rec .cal-d::after { content: '缺'; display: inline-block; margin-left: 3px; font-size: 9px; color: #D97706; background: rgba(217,119,6,.12); border-radius: 3px; padding: 0 3px; font-weight: 500; }
.cal-cell.no-rec { background: #FFF7ED; border-color: rgba(217,119,6,.25); }

/* ============================================================
   系统管理：列表式（手风琴）
   ============================================================ */
.set-list { display: flex; flex-direction: column; gap: 12px; }
.set-item { border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.set-item-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }
.set-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-soft, rgba(59, 130, 246, .1)); display: flex; align-items: center; justify-content: center; color: var(--primary, #3B82F6); flex-shrink: 0; }
.set-ico svg { width: 20px; height: 20px; display: block; }
.set-meta { flex: 1; min-width: 0; }
.set-title { font-weight: 600; font-size: 14px; }
.set-desc { font-size: 12px; color: var(--text-2); }
.set-arrow { width: 18px; height: 18px; color: var(--text-2); transition: transform .2s; flex-shrink: 0; }
.set-item.open .set-arrow { transform: rotate(180deg); }
.set-item-body { overflow: hidden; transition: max-height .25s ease; padding: 0 16px; }
.set-item:not(.open) .set-item-body { max-height: 0; }
.set-item.open .set-item-body { padding: 4px 16px 16px; }

/* ============================================================
   通用表格卡片化（手机端）
   作用：考勤记录 / 组织架构员工 / 档案管理 / 人事 / 项目台账 / 系统设置 等
        所有 .table-wrap 内的数据表，自动转为「字段名 : 值」两列卡片。
   排除：#approveTable（审批中心，已有专属两列网格）、#contactsTable（通讯录，已有专属卡片）。
   依赖：app.js 的 autoLabelTables() 已从表头注入 data-label。
   ============================================================ */
@media (max-width: 768px) {
  .table-wrap .table:not(#approveTable):not(#contactsTable) {
    display: block; width: 100%; border: 0; background: transparent;
  }
  .table-wrap .table:not(#approveTable):not(#contactsTable) thead { display: none; }
  .table-wrap .table:not(#approveTable):not(#contactsTable) tbody { display: block; width: 100%; }

  .table-wrap .table:not(#approveTable):not(#contactsTable) tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    padding: 2px 14px;
    margin-bottom: 10px;
  }
  .table-wrap .table:not(#approveTable):not(#contactsTable) tr:last-child { margin-bottom: 0; }

  .table-wrap .table:not(#approveTable):not(#contactsTable) td {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 10px 0 !important;
    border: 0; border-bottom: 1px solid var(--border, rgba(15, 23, 42, .06));
    font-size: 13px; line-height: 1.5; min-width: 0;
    text-align: right;
  }
  .table-wrap .table:not(#approveTable):not(#contactsTable) tbody tr td:last-child { border-bottom: 0; }

  /* 左：字段名（静音、固定宽度不挤压）  右：值（可换行） */
  .table-wrap .table:not(#approveTable):not(#contactsTable) td::before {
    content: attr(data-label);
    flex-shrink: 0; text-align: left;
    color: var(--text-2); font-size: 12px; font-weight: 500;
    margin-right: auto;
  }
  .table-wrap .table:not(#approveTable):not(#contactsTable) td > * { min-width: 0; max-width: 100%; }

  /* 操作列（含按钮）：去掉字段名、按钮靠右铺满，形成独立操作区 */
  .table-wrap .table:not(#approveTable):not(#contactsTable) td:has(button),
  .table-wrap .table:not(#approveTable):not(#contactsTable) td:has(.btn) {
    justify-content: flex-end; padding-top: 12px !important; margin-top: 2px;
    border-top: 1px dashed var(--border, rgba(15, 23, 42, .1));
  }
  .table-wrap .table:not(#approveTable):not(#contactsTable) td:has(button)::before,
  .table-wrap .table:not(#approveTable):not(#contactsTable) td:has(.btn)::before { content: none; }
  .table-wrap .table:not(#approveTable):not(#contactsTable) td:has(button) .btn,
  .table-wrap .table:not(#approveTable):not(#contactsTable) td:has(.btn) .btn { flex: 0 0 auto; }
}

/* ============================================================
   文字排列逻辑 & 可视化效果（手机端基础打磨）
   ============================================================ */
@media (max-width: 768px) {
  /* ---- 空状态：图标圆底 + 更透气，避免一片灰字 ---- */
  .empty { padding: 44px 18px; color: var(--muted); }
  #viewRoot > .empty.loading { padding: 64px 18px; }
  .empty svg {
    width: 46px; height: 46px;
    padding: 12px; box-sizing: content-box;
    border-radius: 50%;
    background: var(--primary-soft, #EFF4FF);
    stroke: var(--primary, #2563EB);
    opacity: .9; margin-bottom: 14px;
  }

  /* ---- 页面标题：与主内容留白更克制、描述更小 ---- */
  .page-head { margin-bottom: 16px; gap: 10px; }
  .page-head h2 { font-size: 18px; line-height: 1.35; }
  .page-head .desc { font-size: 12px; }

  /* ---- 卡片：圆角统一、阴影更轻，卡片间距一致 ---- */
  .card { border-radius: 14px; box-shadow: var(--shadow-sm); }
  .card-head { padding: 13px 16px; }
  .card-head h3 { font-size: 14.5px; }
  .card-body { padding: 16px; }

  /* ---- 统计卡（工作台四宫格）数值与标签层级更清晰 ---- */
  .stat-card { gap: 10px; padding: 14px 12px; }
  .stat-value { font-size: 20px; }
  .stat-label { font-size: 11.5px; margin-top: 1px; }

  /* ---- 站内消息：卡片内行间距更舒展，未读更醒目 ---- */
  .msg-item { padding: 14px 15px; border-radius: 12px; }
  .msg-peer { font-size: 14.5px; }
  .msg-content { font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
  .msg-time { font-size: 11.5px; }

  /* ---- 审批详情信息区：字段行对齐、标签静音 ---- */
  #viewRoot .field > label,
  #viewRoot .form-grid .field > label { font-size: 12px; margin-bottom: 6px; }
  #viewRoot .card .detail-row { display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--border, rgba(15,23,42,.06)); font-size: 13px; }
  #viewRoot .card .detail-row:last-child { border-bottom: 0; }
  #viewRoot .card .detail-row .k { color: var(--text-2); flex-shrink: 0; }
  #viewRoot .card .detail-row .v { text-align: right; font-weight: 500; }

  /* ---- 弹窗标题与正文间距收拢，避免顶部悬空 ---- */
  .modal-card .card-head { padding: 15px 18px; }
  .modal-card .card-body { padding: 16px 18px; }

  /* ---- 登录页：整体更聚焦、输入框更高更易点 ---- */
  .login-card .field input[type=text],
  .login-card .field input[type=password] { padding: 12px 14px; font-size: 15px; }
}

/* 超小屏（≤420px）：进一步收紧，避免挤 ---- */
@media (max-width: 420px) {
  .content { padding: 12px; }
  .card-body { padding: 14px; }
  .stat-value { font-size: 18px; }
  .page-head h2 { font-size: 17px; }
}

/* ============ 工资表审批（手机端） ============ */
.salary-form-grid { grid-template-columns: 1fr; gap: 8px; }
.salary-upload { padding: 16px 12px; }
.salary-upload-text { font-size: 13px; }

/* ============ 考勤增强（手机端） ============ */
/* 工作台待办列表手机端：行更紧凑、标题单行截断 */
.todo-item { padding: 11px 12px; }
.todo-title { font-size: 13.5px; }
.todo-sub { font-size: 11.5px; margin-top: 2px; }
/* 审批中心列表手机端 */
.appr-item { padding: 11px 12px; }
.appr-title { font-size: 13.5px; }
.appr-sub { font-size: 11.5px; margin-top: 2px; }
.appr-meta { margin-top: 5px; }
.appr-meta .btn { padding: 5px 12px; font-size: 12.5px; }
.stat-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(37,99,235,.1); color: #2563EB; }
.stat-chip.ok { background: rgba(22,163,74,.12); color: #16A34A; }
.stat-chip.warn { background: rgba(217,119,6,.14); color: #D97706; }
.stat-chip.rest { background: rgba(107,114,128,.12); color: #6B7280; }
@media (max-width: 768px) {
  .cal-cell { min-height: 42px; padding: 3px 4px; }
  .cal-mark { font-size: 9px; }
  .cal-grid { gap: 4px; }
  .att-summary-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-chip { font-size: 10px; padding: 1px 6px; }
}

/* ---------- 审批中心 v2 手机端适配 ---------- */
@media (max-width: 768px) {
  /* 手机隐藏电脑专属：发起申请按钮 / 审批管理入口（app.js 已加 hide-mobile） */
  .approve-tabs { padding: 0 8px; min-height: 44px; }
  .approve-tabs .atab { padding: 12px 10px; font-size: 13px; flex: 1; text-align: center; }
  .approve-tabs .atab .atab-count { min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; margin-left: 3px; }
  .approve-tabs .atab-manage { padding: 4px 8px; font-size: 12px; }
  /* 工具栏手机版：只保留批量操作，隐藏发起时间筛选 + 搜索（老板 2026-08-18 定） */
  .approve-toolbar { display: block; padding: 8px 12px; }
  .approve-toolbar .atb-left select { width: 100%; min-height: 40px; font-size: 14px; }
  .approve-toolbar .atb-right { display: none !important; }
  .approve-status { padding: 8px 12px; font-size: 12px; flex-wrap: wrap; gap: 10px; }
  .approve-status .as-cond { display: none; } /* 手机端隐藏「当前查询条件」 */
  /* 表格行：摘要跨整行 + 操作右对齐 */
  #approveTable td[data-label="摘要"] { grid-column: 1 / -1; padding-top: 2px !important; }
  #approveTable td[data-label="摘要"] .ellipsis { max-width: 100%; }
  #approveTable td[data-label="操作"] { justify-content: flex-end; }
  #approveTable td[data-label="操作"] .tag { margin-right: 8px; }
}

/* ---------- 发起审批（常用审批卡片）手机端 ---------- */
@media (max-width: 768px) {
  .appr-new-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .appr-new-card { padding: 16px 14px; gap: 6px; }
  .appr-new-card .anc-icon { width: 40px; height: 40px; border-radius: 10px; }
  .appr-new-card .anc-icon svg { width: 19px; height: 19px; }
  .appr-new-card .anc-name { font-size: 14px; }
  .appr-new-card .anc-desc { font-size: 11px; }
  .appr-new-card .anc-arrow { top: 14px; right: 10px; }
}

/* ---------- 日期范围选择器手机端 ---------- */
@media (max-width: 768px) {
  .atb-drp { min-width: 0; flex: 1 1 100%; }
  .drp-popover { width: auto !important; max-width: calc(100vw - 16px) !important; left: 8px !important; right: 8px; }
  .drp-main { flex-direction: column; gap: 4px; }
  .drp-cal { min-width: 0; }
  .drp-qbtn { padding: 4px 8px; font-size: 11px; }
}

/* ---------- 审批详情：上一条/下一条/返回 手机端紧凑 ---------- */
@media (max-width: 768px) {
  .page-head.appr-detail-head-row { gap: 8px; }
  .page-head.appr-detail-head-row .appr-nav-group { width: 100%; justify-content: flex-end; gap: 6px; }
  .page-head.appr-detail-head-row .appr-nav-group .back-btn { padding: 5px 10px; font-size: 12px; }
}

/* ---------- 审批详情小窗 手机端 ---------- */
@media (max-width: 768px) {
  .appr-modal { max-width: 96vw; max-height: 90vh; }
  .appr-modal-body .form-grid { grid-template-columns: 1fr 1fr; }
  .appr-modal-body .appr-ops .btn { flex: 1; min-width: 0; }
}

/* ---------- 打卡弹窗 手机端 ---------- */
@media (max-width: 768px) {
  .clock-modal { width: 96vw; max-width: 96vw; }
  .clock-modal .card-head { padding: 12px 16px; }
  .clock-modal .card-head h3 { font-size: 15px; line-height: 1; }
  .clock-modal .card-body { padding: 14px 16px 18px; }
  .clock-hero { padding: 12px 10px 10px; }
  .clock-hero-time { font-size: 30px; }
  .clock-hero-date { font-size: 11px; }
  .clock-group { padding: 9px 11px; }
  .clock-today-cell { padding: 8px 10px; }
  .ctc-time { font-size: 16px; }
  .clock-state { padding: 14px 12px; gap: 6px; }
  .clock-state-ic { width: 44px; height: 44px; }
  .clock-state-ic svg { width: 20px; height: 20px; }
  .clock-state-t { font-size: 14px; }
  .clock-state-d { font-size: 12px; line-height: 1.6; padding: 0 6px; }
  .clock-field-lbl { font-size: 12px; }
  .clock-remark { font-size: 16px; padding: 10px 11px; } /* 16px 防 iOS 自动放大 */
  .clock-main-btn { min-height: 46px; font-size: 15px; }
  .clock-loading { padding: 22px 0; }
}

/* ---------- 弹窗输入控件防 iOS 自动放大（font-size ≥16px 才不缩放） ---------- */
@media (max-width: 768px) {
  .modal-card input, .modal-card textarea, .modal-card select,
  .modal input, .modal textarea, .modal select,
  #oaModal input, #oaModal textarea, #oaModal select {
    font-size: 16px !important;
  }
}

/* ---------- 审批中心手机端卡片定制（整齐化：类型+标题 / 摘要 / 发起人+时间 / 编号+状态） ---------- */
@media (max-width: 768px) {
  #approveTable thead { display: none; }
  #approveTable tbody { display: block; width: 100%; }
  #approveTable tr.appr-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "type title"
      "sum  sum"
      "who  when"
      "ser  act";
    gap: 8px 12px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border, #E5EAF2);
    border-radius: 12px;
    padding: 12px 14px !important;
    margin-bottom: 8px;
    cursor: pointer;
  }
  #approveTable tr.appr-row:last-child { margin-bottom: 0; }
  #approveTable tr.appr-row td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    min-width: 0; padding: 0 !important; border: 0;
    font-size: 13px; line-height: 1.45;
  }
  #approveTable tr.appr-row td::before {
    content: attr(data-label);
    display: block; font-size: 11px; color: var(--muted, #8A93A6); font-weight: 400; line-height: 1.2;
  }
  #approveTable td[data-label="审批名称"] { grid-area: type; }
  #approveTable td[data-label="审批名称"]::before { content: none; }
  #approveTable td[data-label="标题"] { grid-area: title; }
  #approveTable td[data-label="标题"]::before { content: none; }
  #approveTable td[data-label="标题"] .cell-name { font-size: 15px; font-weight: 600; color: var(--text, #0F172A); line-height: 1.4; }
  #approveTable td[data-label="摘要"] { grid-area: sum; }
  #approveTable td[data-label="摘要"] .ellipsis { max-width: 100%; }
  #approveTable td[data-label="发起人"] { grid-area: who; }
  #approveTable td[data-label="发起时间"] { grid-area: when; }
  #approveTable td[data-label="审批编号"] { grid-area: ser; }
  #approveTable td[data-label="操作"] { grid-area: act; align-items: flex-end; }
  #approveTable td[data-label="操作"]::before { content: none; }
  #approveTable td[data-label="操作"] .tag { margin: 0; }
}

/* ---------- 培训管理表格：排除卡片化（保持普通表格+横向滚动，修复手机端布局混乱；用 !important 兜底防强缓存错乱） ---------- */
@media (max-width: 768px) {
  .card-body.flush .table.tr-plain { display: table !important; width: 100% !important; border: 0 !important; background: transparent !important; border-collapse: collapse !important; table-layout: auto !important; }
  .card-body.flush .table.tr-plain thead { display: table-header-group !important; }
  .card-body.flush .table.tr-plain thead th { display: table-cell !important; padding: 8px 8px !important; background: #F0F3F9; color: #5A6478; font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
  .card-body.flush .table.tr-plain tbody { display: table-row-group !important; }
  .card-body.flush .table.tr-plain tr { display: table-row !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; background: transparent !important; }
  .card-body.flush .table.tr-plain td, .card-body.flush .table.tr-plain th { display: table-cell !important; padding: 8px 8px !important; white-space: nowrap !important; font-size: 12px; border-bottom: 1px solid var(--border); }
  .card-body.flush .table.tr-plain .row-actions { white-space: nowrap; }
  .card-body.flush .table.tr-plain .row-actions .btn { padding: 3px 6px !important; font-size: 11px !important; }
  #resultsBox .table tr td, #resultsBox .table tr th { padding: 8px 8px !important; font-size: 12px; }
  #myTestsPageBox .btn, #myTestsBox .btn { white-space: nowrap; }
  /* 多 tab 横向滚动（培训管理 4 tab / 其它多 tab 页） */
  .page-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .page-tabs .ptab { flex-shrink: 0; white-space: nowrap; padding: 9px 12px; font-size: 13px; }
}

/* ---------- 课程详情弹窗手机端：单列紧凑 ---------- */
@media (max-width: 768px) {
  .pol-modal { width: 100% !important; max-width: 100% !important; max-height: 92vh; }
  .info-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 10px 12px !important; }
  .info-key { font-size: 12px !important; }
  .info-val { font-size: 14px !important; }
  .pol-block-body { font-size: 14px !important; line-height: 1.9 !important; }
  .pol-doc .pol-ch { font-size: 16px !important; }
  .pol-doc .pol-art { font-size: 14px !important; }
}

/* ---------- 手机端：课程名称左对齐 + 完整显示（允许换行，不截断） ---------- */
@media (max-width: 768px) {
  .card-body.flush .table.tr-plain td,
  .card-body.flush .table.tr-plain th { text-align: left !important; }
  .card-body.flush .table.tr-plain td:first-child { white-space: normal !important; min-width: 140px; font-weight: 600; }
  .card-body.flush .table.tr-plain td:first-child a { display: block; white-space: normal; }
}

/* ---------- 手机端：测评记录页恢复普通表格（保留表头 + 左对齐 + 横向滑动，与培训列表一致） ---------- */
@media (max-width: 768px) {
  #resultsBox .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #resultsBox .table { display: table !important; width: 100% !important; border: 0 !important; border-collapse: collapse !important; background: transparent !important; }
  #resultsBox .table thead { display: table-header-group !important; }
  #resultsBox .table thead th { display: table-cell !important; padding: 8px 8px !important; background: #F0F3F9; color: #5A6478; font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: left !important; }
  #resultsBox .table tbody { display: table-row-group !important; }
  #resultsBox .table tr { display: table-row !important; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; background: transparent !important; }
  #resultsBox .table td { display: table-cell !important; padding: 8px 8px !important; white-space: nowrap !important; font-size: 12px; border-bottom: 1px solid var(--border); text-align: left !important; }
  #resultsBox .table th:first-child,
  #resultsBox .table td:first-child { white-space: normal !important; min-width: 150px; line-height: 1.5; }
}

/* ---------- 手机端：培训管理操作按钮隐藏（新建按钮 + 表格行内 详情/编辑/删除；管理操作留在电脑端） ---------- */
@media (max-width: 768px) {
  #trNewBtn, #trNewBtn svg { display: none !important; }
  .card-body.flush .table.tr-plain th:last-child,
  .card-body.flush .table.tr-plain td.row-actions { display: none !important; }
}

/* ---------- 答题卡：未作答提示条 + 未答题红框 ---------- */
.answer-warn {
  background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA;
  border-radius: 8px; padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  margin-bottom: 12px;
}
.tr-q.unanswered { border: 1.5px solid #F87171 !important; box-shadow: 0 0 0 1px rgba(248, 113, 113, .35); }

/* ---------- 手机端：课程库行距优化（课时列已在渲染层按手机端移除，见 app.js isMobileView） ---------- */
@media (max-width: 768px) {
  .card-body.flush .table.tr-plain.tr-courses td { line-height: 1.6; padding-top: 12px !important; padding-bottom: 12px !important; }
  .card-body.flush .table.tr-plain.tr-courses th:first-child,
  .card-body.flush .table.tr-plain.tr-courses td:first-child { line-height: 1.7; min-width: 150px; }
  .card-body.flush .table.tr-plain.tr-courses th { padding-top: 10px !important; padding-bottom: 10px !important; }
}