/* ============================================================================
   紧凑模式（老板端）+ 大字模式（供货商端）
   ============================================================================

   ★★★ 这一段是补的，起因是老板说「界面有点丑」，并明确了一句关键的话：

       「我说这个系统使用者有年龄大的，那是**只有供货商**，
         其他人使用起来，没必要都是这个老年人的页面。
         仅仅针对供货商把页面做的适合他们就可以了。」

   ★ 问题出在哪：
     这套样式从一开始是照「老年人也能用」定的硬指标 ——
       正文 17px、卡片标题 21px、统计数字 25px、
       可点元素最小 48px（--tap）、主按钮 52px、
       圆角 10/14/18px、页面留白 16~32px。
     **这些数字在手机上是优点**（手指粗、眼睛花、在院子里点）。
     但老板是在**电脑大屏**上看的 —— 同一套尺寸在大屏上就变成
     "又大又散、一行放不下几个字、右边空一大块"。

   ★ 所以正确的做法不是"整体调小"，而是**分成两种密度**：
       · 老板端（index.html / app.php）：紧凑 —— 一屏能看更多，数字更密
       · 供货商端（supplier.html）：大字 —— 保持原来那套老年友好尺寸
     用 `data-density` 属性切换，同一个 app.css 服务两边。

   ★ 为什么写在文件末尾、而不是改上面的变量定义：
     上面那些定义是**整套设计的地基**（间距、字号、圆角、触摸尺寸都被引用）。
     直接改会让所有页面一起变，包括供货商端 —— 而供货商端恰恰不该变。
     追加在末尾靠**层叠覆盖**，改错了一眼能看出来，也好回退。

   ★ 另一件顺手修的事：
     第 337 行的注释写着「统计卡：手机上两列，**桌面自动铺开**」——
     但那个规则里**根本没有媒体查询**，永远只有 2 列。
     所以宽屏上 4 个数字挤成 2×2、右边空一大块（老板截图里就是这样）。
     ⇒ 「注释里承诺了、代码里没做」这种事**看不出来**，只能靠对比截图发现。
   ============================================================================ */

/* ---- 统计卡：按宽度自动铺开（这一条两个密度都要）---- */
@media (min-width: 700px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 紧凑模式：老板端 ---- */
[data-density="compact"] {
  /* 字号整体收一档：正文 15px（原来是 17px） */
  --fs-xs: 12.5px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;

  /* 间距收一档：卡片之间 20→14，卡片内边距 16→13 */
  --sp-1: 3px;   --sp-2: 6px;   --sp-3: 10px;  --sp-4: 13px;
  --sp-5: 14px;  --sp-6: 18px;  --sp-8: 22px;

  /* 圆角小一点，看着利落 */
  --r-sm: 7px;   --r-md: 9px;   --r-lg: 11px;

  /* ★ 触摸尺寸也要收 —— 但它有下限：
     鼠标点击 32px 够用，可这套系统**店里的人也用手机开**，
     所以不跟着字号一路缩到 28px，停在 38/42。 */
  --tap: 38px;
  --tap-lg: 42px;

  --topbar-h: 52px;
  --tabbar-h: 56px;
}

/* 紧凑模式下的细节：行高、卡片影子、列表行高 */
[data-density="compact"] .list-item { min-height: 46px; }
[data-density="compact"] .card { border-radius: var(--r-lg); }
[data-density="compact"] .stat { padding: var(--sp-4) var(--sp-4); }
[data-density="compact"] .stat-value { line-height: 1.25; }
[data-density="compact"] .hint { line-height: 1.55; }
[data-density="compact"] .page { max-width: 1180px; }
[data-density="compact"] .btn { padding: 0 var(--sp-4); }
[data-density="compact"] .field-label { margin-bottom: 3px; }

/* 紧凑模式下侧边栏也收一点（宽屏才有侧边栏） */
@media (min-width: 900px) {
  [data-density="compact"] .nav a { padding-top: 9px; padding-bottom: 9px; }
  [data-density="compact"] .sidebar { width: 208px; }
}

/* ---- 大字模式：供货商端（明确写出来，免得以后被"统一"掉）---- */
/*   ★ 这里的值 = 原来那套老年友好尺寸。写出来是为了：
     ① 说明"这些尺寸是有意保留的，不是漏改"
     ② 万一哪天有人把地基改小了，供货商端还能靠这里守住 */
[data-density="large"] {
  --fs-xs: 15px;
  --fs-sm: 16px;
  --fs-md: 17px;
  --fs-lg: 19px;
  --fs-xl: 21px;
  --fs-2xl: 25px;
  --fs-3xl: 32px;
  --tap: 48px;
  --tap-lg: 52px;
  --lh-body: 1.7;              /* 行距再松一点，长句子好读 */
}
[data-density="large"] .list-item { min-height: 64px; }
[data-density="large"] .btn { font-size: var(--fs-lg); }
[data-density="large"] .stat-value { font-size: var(--fs-3xl); }

/* ---- 深色模式下紧凑模式的卡片影子要更轻 ---- */
@media (prefers-color-scheme: dark) {
  [data-density="compact"] .card { box-shadow: none; }
}

/* ============================================================================
   考勤格子里"还没到的日子"
   ============================================================================
   ★ 老板说：「今天 2026年10月9，就已经能画10月13的考勤了。」

   未来的日子现在**不画成可点的格子**，而是画成这种"空位"：
     · 虚线边框（而不是实线）—— 一眼看出"这里不是能点的格子"
     · 极淡的背景 —— 不抢注意力
     · 鼠标移上去显示"还没到，记不了"
     · `disabled` 属性让浏览器自己挡住点击

   ★ 为什么要一眼看出"不是格子"：
     如果画得跟别的空格子一样、只是点不动，用户会以为是**坏了**，
     然后反复点、或者来问我。**"看起来不一样"比"点了没反应"好得多。**
   ============================================================================ */
.att-cell.is-future,
.att-cell:disabled {
  border-style: dashed;
  border-color: var(--border);
  background: transparent;
  color: var(--text-3);
  opacity: .45;
  cursor: not-allowed;
}


/* ============================================================================
   「该注意的事」—— 看板顶部那几行待办
   ============================================================================
   ★ 设计意图：这一块要**一眼看出哪件最急**，所以：
     · 左边一个大数字（几件 / 几家）—— 不用读文字就知道有多少
     · 红条 = 会出事的（负库存、账拖太久、有人提异议）
       黄条 = 该处理的（货压着、单子等着核）
     · 整行可点，右边一个 › 提示"点进去能处理"
   ★ 左侧那条色边是最关键的一个细节：
     光靠背景色深浅区分"急/不急"在小屏上几乎看不出来，
     一条 4px 的色边则一眼就能扫出来。
   ============================================================================ */
.todo-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--r-md);
  background: var(--card);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.todo-item:hover { background: var(--brand-tint); }
.todo-item:active { background: var(--brand-soft); }

.todo-bad { border-left-color: var(--danger); }
.todo-warn { border-left-color: var(--warn); }

.todo-num {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  font: 700 var(--fs-2xl)/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.todo-bad .todo-num { color: var(--danger); }
.todo-warn .todo-num { color: var(--warn); }

/* 手机上数字小一档，免得把文字挤到换行 */
@media (max-width: 560px) {
  .todo-num { min-width: 36px; font-size: var(--fs-xl); }
}

/* ============================================================================
   选中的"药丸"按钮（本月 / 上月 / 今年 / 全部 这种）
   ============================================================================
   ★★★ 为什么改这一段（老板的原话：「选择本月，没有选中状态」）：

     原来的定义是（app.css 第 463 行）：
         .pill.active { background: var(--card);      /* #ffffff 白 */
                        color: var(--brand-dark);     /* 深绿字 */
                        border-color: var(--border); }
     放在 pill-group 的底上（--track: #EAF0EA 浅灰）。

     **白 (#fff) 和浅灰 (#EAF0EA) 的对比太低** —— 屏幕上就是两团浅色，
     分不出哪一个是选中的。老板报的正是这个。

     而且它还有第二层问题：付款记录页把「全部」**写死成 active**，
     而默认筛的其实是「本月」—— 高亮和实际筛的东西对不上。
     （那个已经改成按当前区间算了，见 payments.js。）

   ⇒ 这里把"选中"做得**一眼能看出来**，用品牌绿实底 + 白字：
       对比度：白字 (#fff) 在 #186321 上是 7.38 —— 远超 WCAG AA 的 4.5
       而且**实色块**在浅灰底上极其醒目，不用凑近看
     未选中的保持透明（灰字），两者的差别是"有色块 / 无色块"，
     比"白 / 浅灰"这种微弱差别可靠得多。

   ★ 为什么写在 density.css 而不是直接改 app.css：
     这样"改了什么、为什么改"集中在一处，也能整体回退。
     （density.css 在 app.css 之后加载，靠层叠覆盖。）
   ============================================================================ */
.pill-group .pill.active {
  background: var(--brand-dark);
  color: #fff;
  border-color: var(--brand-dark);
  box-shadow: none;
}
/* 悬停时给一点反馈（未选中的才需要 —— 选中的已经是实心了） */
.pill-group .pill:not(.active):hover {
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* 深色模式下换一档绿，免得实心块太扎眼 */
@media (prefers-color-scheme: dark) {
  .pill-group .pill.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #0b1a0c;
  }
}