/* ============================================================================
 * KeepMe 电脑宽屏层（L1）— pc.css
 * 2026-10-18 R548 / R549（L2+L3）
 *
 * 设计约束（必读，改之前先看）：
 *  1. 全部规则包在 @media (min-width:1024px) 内 —— 手机、微信内置浏览器零影响。
 *     移动端一切照旧，不需要回归；出问题只需在 server.js 删掉注入的那一行。
 *  2. 只改「容器宽度 / 栅格列数 / 弹层宽度 / 表格呈现」，不碰任何业务 DOM 与逻辑。
 *  3. 页面里大量 inline style（flex:0 0 calc(50% - 4px) 之类），
 *     覆盖必须用 !important，否则压不住行内样式。
 *  4. 新增页面若用了新的容器类名，把它加到下面「容器铺满」那一组即可。
 * ========================================================================== */

@media (min-width:1024px){

  :root{ --km-pc-max:1180px; --km-nav-w:216px; }

  /* ── 1. 容器铺满 1180px ───────────────────────────────────────────── */
  .wrap{ max-width:var(--km-pc-max) !important; }
  main{ max-width:var(--km-pc-max) !important; }

  /* payroll.html（月度业绩）不用 .wrap，各区块各自写死 760/980 */
  .h-top,
  .progress-wrap,
  .month-bar,
  .chips,
  .f-inner,
  .ov-stats,
  .ov-table-wrap,
  .mp-box,
  .sp-box,
  .arch-wrap{ max-width:var(--km-pc-max) !important; }

  /* ── 2. 首页模块卡：横向铺开，不再固定 3 列正方块 ──────────────────── */
  .mini-grid{
    grid-template-columns:repeat(auto-fill,minmax(172px,1fr)) !important;
  }
  .mini-card{
    aspect-ratio:auto !important;
    min-height:128px;
  }

  /* 首页底部工具条：两列 → 四列 */
  #toolsRowA > div,
  #toolsRowC > div{
    flex:1 1 calc(25% - 6px) !important;
  }
  #shfwRow > *{
    flex:1 1 calc(50% - 4px) !important;
  }

  /* payroll 归档查询入口（行内写死 760） */
  #archEntryWiz{ max-width:var(--km-pc-max) !important; }

  /* 财务管理中心门户：1 列长条 → 2 列（压过行内 grid-template-columns:1fr） */
  .sub-grid{ grid-template-columns:repeat(2,1fr) !important; }

  /* 绩效打分页部门门禁卡：不整行拉满 */
  .gate-card{
    max-width:880px;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* ── 3. 弹层 / 抽屉：跟着内容变宽，不再是一条 680 的窄条 ─────────────── */
  .cp-sheet{ max-width:920px !important; }

  /* ── 4. 大屏留白收紧，一屏能看到更多 ──────────────────────────────── */
  body{ padding-top:24px; }

  /* 表格容器：宽屏允许横向滚动而不撑破页面 */
  .tbl-wrap, .table-wrap, .ov-table-wrap{ overflow-x:auto; }
}

/* ============================================================================
 * L2（R549）：电脑端常驻导航外壳 —— 只在 ≥1280px 挂载
 * 由 pc-shell.js 动态创建 DOM；未登录、窄屏、手机端一律不出现。
 * 内容区靠 body 的 margin-left 让位，fixed 元素（底部操作条等）压在导航之下。
 * ========================================================================== */
@media (min-width:1280px){

  :root{ --km-pc-max:1340px; }

  /* 内容让位：宽度自动收窄，页面内部 max-width 依旧居中 */
  html.kmpc-on body{ margin-left:var(--km-nav-w) !important; }
  html.kmpc-on.kmpc-collapsed body{ margin-left:0 !important; }

  #kmPcNav{
    position:fixed; left:0; top:0; bottom:0; width:var(--km-nav-w);
    z-index:9990;
    display:flex; flex-direction:column; gap:2px;
    padding:16px 11px 12px;
    background:linear-gradient(180deg,#2C2421 0%,#371E1E 52%,#241C1A 100%);
    color:#E8E3DA;
    box-shadow:2px 0 28px rgba(55,30,30,.22);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    transform:translateX(0); transition:transform .24s ease;
    overflow:hidden;
  }
  html.kmpc-collapsed #kmPcNav{ transform:translateX(-100%); }

  #kmPcNav .kmpc-logo{
    display:flex; flex-direction:column; gap:2px;
    padding:2px 8px 14px; margin-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  #kmPcNav .kmpc-logo b{
    font-size:18px; letter-spacing:.14em; font-weight:700; color:#fff;
  }
  #kmPcNav .kmpc-logo span{
    font-size:10.5px; letter-spacing:.08em; color:rgba(232,227,218,.52);
  }

  #kmPcNav .kmpc-search{
    display:flex; align-items:center; gap:6px;
    margin:0 4px 10px; padding:7px 10px;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
    border-radius:9px;
  }
  #kmPcNav .kmpc-search input{
    flex:1; min-width:0; border:0; outline:0; background:transparent;
    color:#F2EEE7; font-size:12.5px; font-family:inherit;
  }
  #kmPcNav .kmpc-search input::placeholder{ color:rgba(232,227,218,.40); }
  #kmPcNav .kmpc-search svg{ width:13px; height:13px; opacity:.5; flex:none; }

  #kmPcNav nav{
    flex:1; overflow-y:auto; overflow-x:hidden;
    display:flex; flex-direction:column; gap:2px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent;
  }
  #kmPcNav nav::-webkit-scrollbar{ width:5px; }
  #kmPcNav nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:3px; }

  #kmPcNav .kmpc-item{
    display:flex; align-items:center; gap:9px;
    padding:8px 10px; border-radius:9px;
    color:#D6D0C6; text-decoration:none; font-size:13.5px; line-height:1.2;
    border:0; background:transparent; cursor:pointer; text-align:left; width:100%;
    font-family:inherit;
    transition:background .15s ease,color .15s ease;
    white-space:nowrap;
  }
  #kmPcNav .kmpc-item:hover{ background:rgba(255,255,255,.09); color:#fff; }
  #kmPcNav .kmpc-item.on{
    background:#EFEBE4; color:#371E1E; font-weight:700;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
  }
  #kmPcNav .kmpc-item .ic{
    flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
    border-radius:6px; background:rgba(255,255,255,.08);
    font-size:11.5px; font-weight:700; letter-spacing:0;
  }
  #kmPcNav .kmpc-item.on .ic{ background:rgba(55,30,30,.10); }
  #kmPcNav .kmpc-item .tx{ overflow:hidden; text-overflow:ellipsis; }
  #kmPcNav .kmpc-sep{
    height:1px; margin:8px 10px; background:rgba(255,255,255,.09);
  }
  #kmPcNav .kmpc-cap{
    padding:8px 10px 4px; font-size:10px; letter-spacing:.14em;
    color:rgba(232,227,218,.38); text-transform:uppercase;
  }

  #kmPcNav .kmpc-user{
    margin-top:8px; padding:10px 8px 4px;
    border-top:1px solid rgba(255,255,255,.10);
    display:flex; align-items:center; gap:8px;
  }
  #kmPcNav .kmpc-avatar{
    flex:none; width:28px; height:28px; border-radius:50%;
    background:#EFEBE4; color:#371E1E;
    display:flex; align-items:center; justify-content:center;
    font-size:12.5px; font-weight:700;
  }
  #kmPcNav .kmpc-uname{ flex:1; min-width:0; }
  #kmPcNav .kmpc-uname b{ display:block; font-size:12.5px; color:#F2EEE7; font-weight:600; }
  #kmPcNav .kmpc-uname em{ display:block; font-style:normal; font-size:10px; color:rgba(232,227,218,.45); }
  #kmPcNav .kmpc-out{
    flex:none; border:1px solid rgba(255,255,255,.16); background:transparent;
    color:rgba(232,227,218,.72); font-size:11px; padding:4px 8px;
    border-radius:6px; cursor:pointer; font-family:inherit;
  }
  #kmPcNav .kmpc-out:hover{ background:rgba(255,255,255,.10); color:#fff; }

  /* 收起 / 展开把手：贴在导航右缘 */
  #kmPcToggle{
    position:fixed; top:18px; left:var(--km-nav-w); z-index:9991;
    width:20px; height:40px; border-radius:0 8px 8px 0;
    border:0; background:#371E1E; color:#EFEBE4;
    font-size:10px; cursor:pointer; padding:0;
    box-shadow:2px 0 10px rgba(55,30,30,.20);
    transition:left .24s ease,background .15s;
    font-family:inherit;
  }
  #kmPcToggle:hover{ background:#4A2929; }
  html.kmpc-collapsed #kmPcToggle{ left:0; }

  /* 首页品牌卡在宽屏下给导航让出视觉重心 */
  html.kmpc-on .wrap{ margin-left:auto; margin-right:auto; }
}

/* ============================================================================
 * L3（R549）：宽表增强 —— 首列冻结 + 表头吸顶 + 紧凑行高 + 全屏查看
 * 覆盖 payroll（19 列）/ score（11 列）/ archive / reim 的全部宽表。
 * ========================================================================== */
@media (min-width:1280px){

  /* 由 pc-shell.js 给「含表格的滚动容器」加 .kmpc-tbl */
  .kmpc-tbl{
    position:relative;
    overflow:auto !important;
    max-height:calc(100vh - 190px);
    border-radius:10px;
    scrollbar-width:thin;
    scrollbar-color:rgba(55,30,30,.24) transparent;
  }
  .kmpc-tbl::-webkit-scrollbar{ width:9px; height:9px; }
  .kmpc-tbl::-webkit-scrollbar-thumb{
    background:rgba(55,30,30,.22); border-radius:6px;
    border:2px solid transparent; background-clip:padding-box;
  }
  .kmpc-tbl::-webkit-scrollbar-thumb:hover{ background:rgba(55,30,30,.36); background-clip:padding-box; }

  .kmpc-tbl table{ border-collapse:separate !important; border-spacing:0 !important; }

  /* 表头吸顶 */
  .kmpc-tbl thead th{
    position:sticky; top:0; z-index:3;
    background:#F3EFE8 !important;
    box-shadow:inset 0 -1px 0 rgba(55,30,30,.13);
  }
  /* 没有 thead 的表（archive/reim 用 tr>th） */
  .kmpc-tbl > table > tbody > tr:first-child > th,
  .kmpc-tbl > table > tr:first-child > th{
    position:sticky; top:0; z-index:3;
    background:#F3EFE8 !important;
    box-shadow:inset 0 -1px 0 rgba(55,30,30,.13);
  }

  /* 首列冻结（姓名/部门），横向滚动时不丢人 */
  .kmpc-tbl thead th:first-child,
  .kmpc-tbl > table > tbody > tr > td:first-child,
  .kmpc-tbl > table > tr > td:first-child,
  .kmpc-tbl > table > tbody > tr > th:first-child,
  .kmpc-tbl > table > tr > th:first-child{
    position:sticky; left:0; z-index:2;
    background:#fff;
  }
  .kmpc-tbl thead th:first-child,
  .kmpc-tbl > table > tbody > tr:first-child > th:first-child,
  .kmpc-tbl > table > tr:first-child > th:first-child{ z-index:4; }

  /* 首列右侧阴影，制造"压住"的层次 */
  .kmpc-tbl thead th:first-child,
  .kmpc-tbl > table > tbody > tr > td:first-child{
    box-shadow:1px 0 0 rgba(55,30,30,.10), 6px 0 10px -8px rgba(55,30,30,.35);
  }

  /* 紧凑行高：19 列 × 21 人一屏看得完 */
  .kmpc-tbl table th,
  .kmpc-tbl table td{ padding-top:7px !important; padding-bottom:7px !important; }
  .kmpc-tbl table tbody tr:hover td{ background:#FBF8F3; }
  .kmpc-tbl table tbody tr:hover td:first-child{ background:#FBF8F3; }

  /* 数字列等宽，便于竖着比 */
  .kmpc-tbl table td.num,
  .kmpc-tbl table th.num{ font-variant-numeric:tabular-nums; }

  /* 容器的全屏查看按钮 */
  .kmpc-fs-btn{
    position:absolute; right:8px; top:6px; z-index:6;
    display:none; align-items:center; gap:4px;
    padding:3px 8px; border-radius:6px;
    border:1px solid rgba(55,30,30,.16); background:rgba(255,255,255,.94);
    color:#371E1E; font-size:11px; cursor:pointer; font-family:inherit;
    box-shadow:0 1px 4px rgba(55,30,30,.10);
  }
  .kmpc-tbl:hover .kmpc-fs-btn{ display:inline-flex; }
  .kmpc-fs-btn:hover{ background:#fff; border-color:rgba(55,30,30,.34); }

  /* 全屏态 */
  .kmpc-tbl.kmpc-fs{
    position:fixed !important; inset:0 !important;
    max-height:none !important; height:100vh !important;
    z-index:9995; background:#fff; border-radius:0;
    padding:0;
  }
  .kmpc-tbl.kmpc-fs .kmpc-fs-btn{
    display:inline-flex !important; position:fixed; right:16px; top:12px;
    z-index:9997; padding:6px 12px; font-size:12px;
  }
  html.kmpc-fs-open{ overflow:hidden; }

  /* 归档页：绩效表 + 工资表 并排对照（原来上下堆） */
  .kmpc-wide .wrap,
  .kmpc-wide main{ max-width:1600px !important; }
}