/* ===================================================================
   主题.css — kmb-dt 统一设计令牌（S1 地基）
   门户 public/index.html 用 <link> 引入；网页版 /ue-web 由 tools/ue网页版构建.js 内联。
   唯一真源是本文件：门户与网页版都从这里取同一套值（探针会断言两站取到的 --brand 相等）。

   注意：本文件必须排在页面原有 <style> 之后加载，否则会被模板自己的 :root 覆盖。
   只做加法：不改结构、不动功能类名的语义。
   =================================================================== */

/* ---------- 1) 品牌与中性色基线（门户值，网页版模板原本是钉钉蓝，在这里被覆盖） ---------- */
:root {
  --brand: #ff6200;                 /* 淘宝闪购官方橙 */
  --brand-hover: #e85600;
  --brand-border: #ffc9a3;
  --brand-bg: rgba(255, 98, 0, .07);
  --navy: #1c1c1e;
  --label: #3a3a3c;
  --body: #6e6e73;
  --border: #e8e8ea;
  --bg-soft: #f7f7f8;
  --ok: #15be53; --ok-text: #108c3d;
  --danger: #e6392e;
  --warn: #9b6829;
  --dark-navy: #111114;

  /* 别名层：让看板模板的变量名吃上面的门户值 */
  --ink: var(--navy);
  --card: #fff;
  --line: var(--border);
  --sub: var(--body);
  --hl: var(--brand-bg);
  --pos: var(--ok-text);
  --neg: var(--danger);
  --blk: var(--bg-soft);

  /* 表面与交互色 —— 一律走令牌，选择器里不许再写 rgba() */
  --row-alt: rgba(28, 28, 30, .022);
  --row-hover: rgba(255, 98, 0, .045);
  --row-hover-strong: rgba(255, 98, 0, .08);
  --scroll-thumb: rgba(28, 28, 30, .16);
  --scroll-thumb-hover: rgba(28, 28, 30, .3);
  --shadow-lift: rgba(23, 23, 23, .06) 0 3px 6px;
  --shadow-amb: rgba(23, 23, 23, .08) 0 15px 35px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;
}

/* ---------- 2) 密度令牌：紧凑（默认）/ 宽松 ---------- */
:root, :root[data-density="compact"] {
  --gap: 12px;
  --pad-card: 12px 14px;
  --cell-pad: 3px 9px;
  --kpi-v: 26px;          /* .kpi 卡片的大数值 */
  --kpi-row-v: 15px;      /* .kpi-row 紧凑行的数值（默认页那一屏就是这个，别按卡片放大） */
  --kpi-k: 12px;
  --fs-num: 13px;
  --ctl-h: 30px;
}
:root[data-density="cozy"] {
  --gap: 18px;
  --pad-card: 18px 20px;
  --cell-pad: 7px 12px;
  --kpi-v: 34px;
  --kpi-row-v: 17px;
  --kpi-k: 13px;
  --fs-num: 14px;
  --ctl-h: 36px;
}

/* ---------- 3) 通用排版：数字必须等宽，竖排才不抖 ---------- */
.tbl-wrap td, .tbl-wrap th, .kpi .v, .kpi .d, .num, .mom {
  font-variant-numeric: tabular-nums;
}
/* 主表格的数字格没有专属类名（模板是 el('td', null, …)），所以只加等宽、不改对齐，
   避免把 .lbl 文本列也右对齐。要右对齐得先给数字列加类，那属于改结构，本步不做。 */

.kpi .v { font-size: var(--kpi-v); letter-spacing: -.4px; }
.kpi .k { font-size: var(--kpi-k); }
/* 默认页那一屏 KPI 是 .kpi-row（模板 15px 紧凑行），不写这条密度对它无效 */
.kpi-row .v { font-size: var(--kpi-row-v); }
.kpi-row .k { font-size: var(--kpi-k); }
.kpi-row { padding: var(--cell-pad); }

/* ---------- 4) 密度落到真实组件（不是只定义不使用） ---------- */
.kpi, .cards .card, .pcard { padding: var(--pad-card); }
.tbl-wrap th, .tbl-wrap td { padding: var(--cell-pad); }
.bar, .bar-row, .bi-bar { gap: var(--gap); }
.chips, .msel-opts { gap: 6px; }
.btn, .msel-btn { min-height: var(--ctl-h); }

/* ---------- 5) 交互态：斑马纹、hover、焦点环、滚动条 ---------- */
.tbl-wrap tbody tr:nth-child(even) td { background: var(--row-alt); }
.tbl-wrap tbody tr:hover td { background: var(--row-hover); }
.tbl-wrap tbody tr:hover td.stick { background: var(--row-hover-strong); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ---------- 6) 顶栏与工具条 ---------- */
#densityToggle {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--label); cursor: pointer;
  /* 手机上顶栏一排放不下时，这个按钮会被 flex 压到 33px 宽、"紧凑"竖着排成两行（10-19 实测）。
     不给它收缩，也不允许换行，宁可让有省略号的地方去让位。 */
  white-space: nowrap; flex: 0 0 auto; min-height: 34px;
}
#densityToggle:hover { border-color: var(--brand-border); color: var(--brand); }

/* 数据新鲜度条（S4）：常驻顶栏下方，缺数时变黄 */
#ue-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 20px; font-size: 12px; color: var(--body);
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
#ue-meta b { color: var(--label); font-weight: 600; }
#ue-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
#ue-meta > .mrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
#ue-meta.warn { background: #fff8e9; color: var(--warn); border-bottom-color: #f2dfb0; }
#ue-meta.warn .dot { background: var(--warn); }
#ue-meta .scope { margin-left: auto; }
#ue-copy {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: #fff; color: var(--label);
}
#ue-copy:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 6b) 构建脚本注入的手机端配件：桌面一律不显示 ----------
   .mrow.fstrip（筛选摘要条）/ #ue-fhead（抽屉标题栏）/ #ue-slide-hint（表格横滑提示）
   都是 tools/ue网页版构建.js 往现成 DOM 里插的元素，桌面版靠这几条隐藏，
   所以必须写在 @media 之外；选择器要多带一层 #ue-meta >，否则会被上面
   `#ue-meta > .mrow{display:flex}` 同权重压住、在桌面上漏出来。 */
#ue-meta > .mrow.fstrip, #ue-fhead, #ue-slide-hint { display: none; }
#ue-slide-hint { font-size: 11.5px; color: var(--brand); background: var(--brand-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* ---------- 7) 手机端专门设计（S5 重做） ----------
   2026-10-19 实测 390×844：顶栏+信任条+页签吃掉 272px，筛选面板再吃掉 388px，
   第一个数字出现在 y=915 —— 一屏之内全是壳子和表单，一个数都看不到；A/B 双栏仍是 2 列，
   每栏 168px 宽，"A 组" 自己折成两行。所以这一轮的原则只有一条：**数据优先，筛选进抽屉**。

   作用域必须收在 body[data-page="ue"]：门户与网页版共用本文件，而 .top / .tabs / .tab / .bar /
   .card / .chip / .wrap / .foot / .grid2 / .btn 这些类名两边都有（10-19 比对出的冲突清单），
   不限定就会互相污染。data-page 由 tools/ue网页版构建.js 在构建时打到 <body> 上。 */

/* 860px 以下：平板 / 小笔记本，先收密度 */
@media (max-width: 860px) {
  :root, :root[data-density="compact"] { --kpi-v: 22px; --pad-card: 10px 12px; --gap: 10px; }
  #ue-meta { padding: 6px 12px; }
  #ue-meta .scope { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 640px) {
  :root, :root[data-density="compact"] { --kpi-v: 20px; --cell-pad: 6px 8px; --fs-num: 12.5px; }

  /* ===== 7.1 顶栏：150px → 46px 单行，标题可省略号，导出退成图标 ===== */
  body[data-page="ue"] .top { height: 46px; min-height: 46px; flex-wrap: nowrap; padding: 0 10px; gap: 8px; overflow: hidden; }
  /* 标题必须 nowrap：只给 overflow:hidden 不给 nowrap，"云途 · 商流UE 看板"会折成两行塞在 46px 里
     （10-19 截图就是这样），看起来像顶栏变高了两倍。 */
  body[data-page="ue"] .top h1 { font-size: 14.5px; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-page="ue"] .top .tag, body[data-page="ue"] .top .meta { display: none; }
  #ue-back { order: -1; flex: 0 0 auto; padding: 4px 9px; font-size: 12px; min-height: 0; }
  #ue-badge { display: none; }   /* 手机上把宽度让给标题；构建号改放 <body data-rev>，探针和我照旧能验新旧 */
  #densityToggle { flex: 0 0 auto; white-space: nowrap; min-height: 30px; padding: 4px 9px; }
  #btn-csv { font-size: 0; padding: 4px 10px; min-height: 30px; gap: 0; flex: 0 0 auto; }
  #btn-csv::before { content: '⤓'; font-size: 15px; }

  /* ===== 7.2 信任条 + 筛选摘要条：合并成一块两行（行高写死，不许换行长高） ===== */
  #ue-meta { flex-direction: column; align-items: stretch; gap: 3px; padding: 5px 10px; line-height: 1.4; font-size: 11.5px; flex-wrap: nowrap; overflow: hidden; }
  #ue-meta > .mrow { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
  #ue-meta > .mrow.info { height: 16px; flex: 0 0 16px; }
  #ue-meta > .mrow.info > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #ue-meta > .mrow.info .dot { width: 7px; height: 7px; flex: 0 0 7px; }
  #ue-meta .ver { display: none; }              /* 34 字符版本串换行是这次截图里最难看的一处 */
  #ue-meta .scope { display: none; }            /* 范围并进摘要条的文字里，不在第二行重复占位 */
  #ue-copy { display: none; }                   /* 分享链接是桌面动作，手机上先让位给数据 */
  /* 摘要条（.mrow.fstrip 由构建脚本注入到 #ue-meta 里） */
  #ue-meta > .mrow.fstrip { display: flex; align-items: center; gap: 6px; width: 100%; flex: 0 0 32px; flex-wrap: nowrap; }
  #ue-fbtn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    min-height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--brand-border); background: var(--brand-bg); color: var(--brand);
    font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  #ue-fbtn .n { font-size: 11px; opacity: .8; font-weight: 400; }
  #ue-fsum { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ue-qbtn {
    flex: 0 0 auto; min-height: 32px; padding: 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--border); background: #fff; color: var(--label); font-size: 12.5px;
  }
  .ue-qbtn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-bg); }

  /* ===== 7.3 页签：横滑 + 吸在视口顶（顶栏与信任条随滚动让位，只有页签常驻） ===== */
  body[data-page="ue"] .tabs { position: sticky; top: 0; z-index: 45; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding: 0 6px; scrollbar-width: none; }
  body[data-page="ue"] .tabs::-webkit-scrollbar { display: none; }
  body[data-page="ue"] .tabs .tab { flex: none; white-space: nowrap; padding: 9px 12px; font-size: 13px; min-height: 38px; }

  /* ===== 7.4 筛选面板 → 全屏抽屉（关闭时彻底不占版面，这是"首屏没数据"的根因） =====
     用 left 位移而不是 transform：transform 会替子树的 position:fixed 建立包含块，
     抽屉里的多选下拉（下面改成底部弹层）就会跟着屏幕一起滑走。 */
  body[data-page="ue"] .bar {
    position: fixed; top: 0; left: -100%; right: 0; bottom: 0; z-index: 130;
    width: auto; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
    overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 0 12px 40px; visibility: hidden; transition: left .24s ease, visibility .24s;
  }
  body.ue-fopen { overflow: hidden; }
  body[data-page="ue"].ue-fopen .bar { left: 0; visibility: visible; }
  /* 抽屉自己的标题栏（#ue-fhead 由构建脚本注入到 .bar 首位） */
  #ue-fhead {
    position: sticky; top: 0; z-index: 5; margin: 0 -12px 12px; padding: 12px;
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }
  #ue-fhead b { font-size: 15px; flex: 1 1 auto; }
  #ue-fdone { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
  /* 抽屉内的表单：一行一项、拉满宽度、热区够大 */
  body[data-page="ue"] .bar-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  body[data-page="ue"] .bar-row > .lbl.lbl-dup { display: none; }  /* 只砍"区县名称 + 按钮里又一个区县"这种重复标签；
                                                                       人资/小账率的标签只在外面有一份，一刀切隐藏会
                                                                       留下两个没名字的输入框（10-19 截图翻车点） */
  body[data-page="ue"] .bar-row > div[id^="f-"], body[data-page="ue"] .bar-row > .dt { width: 100%; }
  body[data-page="ue"] .bar-row > div[id^="f-"] > .msel { width: 100%; }
  body[data-page="ue"] .dt { display: flex; align-items: center; gap: 6px; }
  body[data-page="ue"] .dt > .lbl { flex: 0 0 auto; font-size: 13px; }
  body[data-page="ue"] select.dt-in { flex: 1 1 0; min-width: 0; max-width: none; min-height: 40px; font-size: 16px; }  /* 16px：iOS 对 <16px 的输入框会强制放大整页 */
  #quick { display: flex; flex-wrap: wrap; gap: 8px; }
  /* 上游把快捷档的 padding/font-size 写成行内样式，只能 !important 抬热区（不改模板） */
  #quick button { min-height: 34px; padding: 4px 12px !important; font-size: 13px !important; margin-left: 0 !important; border-radius: 999px !important; }
  body[data-page="ue"] .bar-row > .spacer { display: none; }    /* 行内 flex:1 在竖排里会把按钮顶到最底下 */
  body[data-page="ue"] .switch { min-height: 34px; font-size: 13px; }
  body[data-page="ue"] .switch input { width: 20px; height: 20px; }
  #p-labor, #p-small { width: 100% !important; max-width: 150px; min-height: 40px; font-size: 16px; }  /* !important 是对模板里的行内 width 让步 */
  #btn-reset { min-height: 40px; width: 100%; }
  #chip-rows { align-self: flex-start; }

  /* 多选下拉在手机上改成底部弹层：绝对定位会被抽屉裁掉，也算不准锚点在哪 */
  body[data-page="ue"] .msel-btn { width: 100%; min-height: 40px; font-size: 14px; justify-content: space-between; }
  body[data-page="ue"] .msel-panel {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: 8px; width: auto;
    max-height: 62vh; z-index: 140; border-radius: 14px;
    box-shadow: 0 -12px 40px rgba(16, 24, 40, .26);
  }
  body[data-page="ue"] .msel-opts { max-height: 44vh; }
  body[data-page="ue"] .opt { min-height: 40px; font-size: 14px; }
  body[data-page="ue"] .opt input { width: 18px; height: 18px; }

  /* ===== 7.5 A/B 双栏改单列（原来是 2 列，每栏 168px，"A 组"自己折行） ===== */
  body[data-page="ue"] .ab { grid-template-columns: 1fr; gap: 12px; }
  body[data-page="ue"] .ab-panel { padding: 10px 12px; }
  body[data-page="ue"] .ab-head { gap: 6px; margin-bottom: 6px; }
  body[data-page="ue"] .ab-head b { flex: 0 0 auto; }
  /* A/B 各自的四个独立筛选：单列竖排会把第一屏全部吃掉（实测把首个数字推到 y=320 以上），
     收成两列两行、并稍微压一档高度，数字才能回到首屏。 */
  body[data-page="ue"] .ab .ab-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; }
  body[data-page="ue"] .ab .ab-bar .msel-btn { min-height: 36px; font-size: 13px; }
  /* KPI 仍是"一屏两列"= 容器分两列，行内保持标签左、数值右 */
  .kpi-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; align-items: start; }
  .kpi-col .kpi-row { padding: 6px 8px; min-width: 0; }
  .kpi { min-width: 0; }
  .kpi-row .k { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .kpi-row .v { font-size: 15px; }

  /* ===== 7.6 版心与表格：横滑要能看出来，表头三行不许叠字 ===== */
  body[data-page="ue"] .wrap { padding: 10px 10px 48px; }        /* 390px 屏上左右各 20px 太奢侈，内容宽从 350 抬到 370 */
  body[data-page="ue"] .tbl-bar { gap: 6px; padding: 9px 10px; }
  body[data-page="ue"] .tbl-bar b { font-size: 13.5px; }
  body[data-page="ue"] .tbl-bar .note { display: none; }         /* 长说明挪到"口径与差异说明"页签里 */
  body[data-page="ue"] .tbl-wrap { -webkit-overflow-scrolling: touch; max-height: calc(100vh - 200px); }
  #ue-slide-hint { display: inline-block; }
  /* 模板把吸顶偏移写死成 28/53px（按桌面行高算），手机上行高一变就是三行表头互相盖住 */
  body[data-page="ue"] #ue thead tr:nth-child(1) th { top: 0; height: 24px; line-height: 23px; padding-top: 0; padding-bottom: 0; font-size: 11px; }
  body[data-page="ue"] #ue thead tr:nth-child(2) th { top: 24px; height: 22px; line-height: 21px; padding-top: 0; padding-bottom: 0; font-size: 10.5px; }
  body[data-page="ue"] #ue thead tr:nth-child(3) th { top: 46px; height: 26px; line-height: 25px; padding-top: 0; padding-bottom: 0; font-size: 11.5px; }
  body[data-page="ue"] #ue th, body[data-page="ue"] #ue td { padding: 5px 7px; }
  body[data-page="ue"] .s1 { width: 76px; }
  body[data-page="ue"] .s2 { left: 76px; width: 70px; }
  body[data-page="ue"] td.stick.s1, body[data-page="ue"] th.stick.s1 { font-size: 11.5px; }

  /* ===== 7.7 图表 / 自由分析 / 参数设置 ===== */
  body[data-page="ue"] .ab-bar { gap: 6px; }
  body[data-page="ue"] .ab-bar .btn { min-height: 38px; font-size: 13px; }
  body[data-page="ue"] .grid2 { gap: 12px; }
  body[data-page="ue"] .card { padding: 12px; }
  body[data-page="ue"] .card h3 { flex-wrap: wrap; }
  body[data-page="ue"] .chart { height: 268px; }
  body[data-page="ue"] .bi-side { height: auto; max-height: none; }
  body[data-page="ue"] .bi-list { max-height: 32vh; }
  body[data-page="ue"] .bi-item { min-height: 36px; font-size: 13px; }
  body[data-page="ue"] .bi-bar { padding: 8px; gap: 8px; }
  body[data-page="ue"] .bi-sel { min-height: 38px; font-size: 16px; }
  body[data-page="ue"] .bi-search { min-height: 38px; font-size: 16px; }
  body[data-page="ue"] .pgrid { grid-template-columns: 1fr 1fr; }
  body[data-page="ue"] .pcard table input { width: 100% !important; min-height: 38px; font-size: 16px; }
  body[data-page="ue"] .drawer { width: 100%; max-width: 100%; right: -100%; }
  body[data-page="ue"] .drawer.open { right: 0; }
  body[data-page="ue"] .mini { grid-template-columns: 1fr; }
}