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

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

@media (max-width: 768px) {
  /* ---------- 顶栏 ---------- */
  .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: block; }
  .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; }

  /* ---------- 内容区全宽、内边距收窄 ---------- */
  .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; }
  .stat-icon svg { width: 17px; height: 17px; }
  .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: column; align-items: stretch;
    padding: 10px 14px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .filter-bar select, .filter-bar input, .filter-bar .btn {
    width: 100%;
    padding: 7px 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; }

  /* ---------- 退出登录菜单宽度 ---------- */
  .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 { font-size: 10px; color: var(--text-2); line-height: 1.3; margin-top: 2px; }

/* ============================================================
   系统管理：列表式（手风琴）
   ============================================================ */
.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 { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 16px; }
.set-item.open .set-item-body { max-height: 4000px; padding: 4px 16px 16px; }