@charset "UTF-8";
/* ==========================================================================
   子俊甄选供货系统 —— 唯一全局样式表 (app.css)

   使用对象：做土特产生意的老板，40-55 岁，非技术人员。
   设备优先级：手机（收摊/车上/市场里随手记账）> 店里 Windows Chrome。
   设计目标：字大、金额醒目、按钮好点、对比够，一天点几十次也不累眼。

   ── 设计规范 ────────────────────────────────────────────────────────────

   1) 配色（品牌绿，取自子俊甄选 logo 和门头实拍，不是随手挑的）
      主色      logo 那个绿 --brand #2CA434，用于点缀、选中、进度条
      主按钮    --brand-dark #186321 —— 比主色深两档。
                ★ 为什么按钮不用亮绿：亮绿 #2CA434 上压白字对比度只有 3.25，
                  达不到 4.5 的可读标准，字会发飘。深绿上白字 7.38，一眼看清。
      浅底      --brand-soft 淡绿，用于选中项、头像、弱高亮
      品牌深绿  --brand-ink #145C3C，取 logo 文字色，用于品牌名、标题
      语义色    欠款/警告 = 红 #C62828（5.62）；已结清 = 绿 #2E7D32（5.13）；
                部分付/待处理 = 琥珀 #9A5C00（5.38）；信息 = 青 #0C6E6E（6.05）
      背景      页面 #F3F7F3（带一点绿调的浅灰，不是死白），卡片纯白 #fff
      描边      #DFE6DF；正文 #1F241F；次要文字 #5F6B60
      ★「红=欠款 / 绿=已结清」的语义在深色模式下保持不变，只调明度。
      ★ 上面括号里的数字都是白底/浅底上的实际对比度，改色时请重新验一遍。

   2) 间距刻度（4px 基数，只用下列档位，禁止随手写 7px、13px）
      --sp-1 4px 紧贴元素 · --sp-2 8px 同组间隔 · --sp-3 12px 表单项内边距
      --sp-4 16px 卡片内边距/页面留白 · --sp-5 20px 卡片之间 · --sp-6 24px 大留白
      --sp-8 32px 桌面页面内边距；圆角 小8 / 中12 / 大16 / 胶囊999

   3) 字号刻度（正文 17px 起步 —— 参考 Ant Design / Apple HIG / Material
      这三家的正文都是 14~17px、触摸目标 44~48px，我们统一往上取一档：
      因为看这个系统的人里有供货商和门店老人，14px 的次要文字他们看着吃力。
      宁可一屏少看两行，也不要他们眯着眼认字。
      --fs-xs 15px 辅助说明（★ 比常见的 12px 大两档，老人也读得清）
      --fs-sm 16px 次要文字 / 输入框（★ iOS 上输入框低于 16px 聚焦会放大整页）
      --fs-md 17px 正文
      --fs-lg 19px 列表主标题
      --fs-xl 21px 卡片标题
      --fs-2xl 25px 统计数字 .stat-value
      --fs-3xl 32px 大金额 .money-lg（一屏里最想让他看清的就是这个数）
      ★ 金额一律 tabular-nums 等宽数字、右对齐，小数点上下对齐才好核对。
      ★ 改字号时记得连着看「写死的那些尺寸」（--tap / 行高 / 图标），
        它们不在这个表里，但字号一大就会挤在一起。

   4) 触摸与可读性硬指标（这是本系统的底线，不为了好看让步）
      可点元素最小高度 48px（--tap），手机上列表行 ≥ 64px；
      正文对比度 ≥ 7:1；关键数字字重 700~800 拉开层级。
      ★ 手指点不准是老年人最常见的挫败感来源，按钮和行只许做大，不许做小。

   5) 布局策略（移动端优先）
      默认：单列 + 顶部 .topbar + 底部固定 .tabbar（含 iPhone 安全区），.sidebar 隐藏。
      ≥900px（@media (min-width: 900px)）：左侧固定 .sidebar + 右侧 .main 双栏，
      .tabbar 隐藏，抽屉由「底部滑出」变为「右侧滑出」。

   6) 无障碍 / 打印
      prefers-reduced-motion 关动画、prefers-color-scheme: dark 只覆盖变量、
      :focus-visible 焦点环、@media print 白底黑字出对账单。

   7) 实现约束
      纯 CSS 零外部依赖：无 @import、无 CDN、无框架；仅系统字体栈。
      `!important` 全文件仅 3 处，且全部集中在 @media print。
   ========================================================================== */

/* ==========================================================================
   一、主题变量
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* 主色与品牌（子俊甄选绿）—— 三种用法，别混用
     ★ 亮绿 --brand 只能做「装饰」：边框、进度条、图表、选中底色。
       它当文字用（白底 3.25）或压白字（3.25）都不达标，老人看不清。
       要写字的绿色，一律用 --brand-ink 或 --brand-link。 */
  --brand: #2CA434;                              /* 装饰亮绿：边框、进度、图表 */
  --brand-dark: #186321;                         /* 按钮底：白字 7.38 */
  --brand-ink: #145C3C;                          /* 品牌文字绿：卡片标题、店名 8.00 */
  --brand-link: #24822B;                         /* 链接/可点文字：白底 4.88 */
  --brand-soft: #E8F3E9;                         /* 淡绿底：选中项、头像 */
  --brand-ring: rgba(44, 164, 52, 0.30);
  --brand-tint: #F3F7F3;                         /* 页面底：带一点绿调 */

  /* 语义色（括号里是实测对比度；改了要重跑 tools/check-contrast.py） */
  --ok: #2A712D;      --ok-soft: #E8F3E9;        /* 已结清 5.27 */
  --warn: #9A5C00;    --warn-soft: #FBF1DC;      /* 待处理 4.79 */
  --danger: #C62828;  --danger-dark: #A81E1E;  --danger-soft: #FBE7E6;  /* 欠款 5.62 */
  --info: #0C6E6E;    --info-soft: #E4F1F1;      /* 信息 5.23 */
  /* 危险按钮上的字色。浅色模式是白字压在深红上；
     深色模式反过来（浅红底 + 深字），所以这里做成变量 */
  --danger-ink: #FFFFFF;

  /* 中性色 */
  --bg: #F3F7F3;
  --card: #ffffff;
  --border: #DFE6DF;
  --border-strong: #C6D2C7;
  --text: #1F241F;
  --text-2: #5F6B60;
  --text-3: #657063;
  --track: #EAF0EA;

  /* 阴影（带一点绿调，不用纯黑，免得发灰） */
  --shadow-sm: 0 1px 2px rgba(23, 40, 25, 0.06), 0 1px 3px rgba(23, 40, 25, 0.05);
  --shadow: 0 2px 10px rgba(23, 40, 25, 0.09);
  --shadow-lg: 0 12px 34px rgba(23, 40, 25, 0.2);

  /* 间距刻度 */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;

  /* 字号刻度 */
  --fs-xs: 15px;  --fs-sm: 16px;  --fs-md: 17px;  --fs-lg: 19px;
  --fs-xl: 21px;  --fs-2xl: 25px; --fs-3xl: 32px;

  /* 行高：正文放宽到 1.65，中文在这个行高下最不费眼 */
  --lh-tight: 1.35;   --lh-body: 1.65;

  /* 圆角 / 触摸 / 层级 */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;  --r-pill: 999px;
  --tap: 48px;                 /* 可点元素最小高度（大公司规范 44~48，取上限） */
  --tap-lg: 52px;              /* 主按钮更高一点，手机上更好按 */
  --z-backdrop: 90;  --z-drawer: 100;  --z-modal: 110;  --z-toast: 200;
  --topbar-h: 60px;  --tabbar-h: 64px;

  /* 字体栈：仅系统字体，离线可用 */
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
}

/* 深色模式：只覆盖变量，下面所有组件规则一行都不用改 */
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #5FC96B;                              /* 深色底上的亮绿（装饰） */
    --brand-dark: #3FA24C;                         /* 按钮底，配深字 */
    --brand-ink: #8FE09A;
    --brand-link: #7AD488;                         /* 链接：深底上 7.72 */
    --brand-soft: #17301B;
    --brand-ring: rgba(95, 201, 107, 0.35);
    --brand-tint: #14161a;

    --ok: #62C97E;      --ok-soft: #16301F;
    --warn: #E0AC4D;    --warn-soft: #362A13;
    --danger: #F17F76;  --danger-dark: #F79C94;  --danger-soft: #3C1F1D;
    --info: #6FC7C7;    --info-soft: #142C2C;
    /* 深色模式下危险按钮反过来：浅红底 + 深字（白字压浅红只有 2.61，看不清） */
    --danger-ink: #2A1210;

    --bg: #14171A;         --card: #1D2220;
    --border: #2D3532;     --border-strong: #414B47;
    --text: #EDF3EE;       --text-2: #AFBBB1;
    --text-3: #8B9790;     --track: #262E2B;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.7);
  }
}

/* ==========================================================================
   二、基础重置与全局
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* 中文没有词间空格，遇到长串数字/单号要能断行，不然手机上会整页横着滚 */
p, li, td, th, .hint, .list-item-sub { word-break: break-word; }

h1, h2, h3, h4, p, dl, dd, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--brand-link); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

/* 键盘和触屏都看得见的焦点环 */
:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }

/* 系统开了「减弱动态效果」就全部关掉动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   三、布局骨架（移动端优先）
   ========================================================================== */

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* 手机上没有侧栏，桌面端才出现 */
.sidebar { display: none; }

.main {
  flex: 1 1 auto;
  min-width: 0;
  /* 底部给固定 tabbar 让位：导航高度 + iPhone 安全区 + 余量 */
  padding: var(--sp-4) var(--sp-4) calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-8));
}

/* 移动端顶部条：标题 + 关键按钮，滚动时吸顶 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-height: var(--topbar-h);
  padding: calc(var(--sp-2) + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-2);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.topbar h1, .topbar .topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.3;
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.page > h1, .page-title { font-size: var(--fs-xl); font-weight: 700; }

/* 手机底部导航：固定 + iPhone 安全区 */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: var(--sp-1);
  min-height: var(--tabbar-h);
  padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(23, 40, 25, 0.07);
}

.tabbar-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--tap);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--sp-1);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.tabbar-item.active { color: var(--brand-ink); background: var(--brand-soft); }
.tabbar-item:active { background: var(--track); }

/* ==========================================================================
   四、通用容器：卡片 / 统计 / 网格
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.2px;
}

.card-body { padding: var(--sp-4); }
.card-body > .card-body { padding: 0; }

.card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  /* 老浏览器不认 color-mix 就用 --bg 兜底，认了再取两者混色 */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.card-head .spacer, .card-foot .spacer { flex: 1 1 auto; }

/* 统计卡：手机上两列，桌面自动铺开 */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.stat-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.stat-sub { font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums; line-height: 1.5; }

/* 统计数字：全屏最该先看到的几个数，字号和字重都往死里加 */
.stat-value {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* 响应式网格：手机一列，桌面再分栏（见末尾 900px 段） */
.grid-2, .grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }

/* ==========================================================================
   五、按钮与可点控件
   硬指标：可点元素最小高度 48px（--tap），主按钮 52px。
   供货商和门店里都有上了年纪的人，手指点不准是最常见的挫败感来源，
   所以这里的尺寸只许往上，不许往下调。
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-tight);
  text-align: center;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(24, 99, 33, 0.24);
}

.btn-primary:active { background: #14501B; }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn-ghost:active { background: var(--track); }

/* 花钱的动作一眼认出来。字色用 --danger-ink：
   浅色模式是白字压深红（5.62）；深色模式反过来是深字压浅红（5.72），
   两种模式都达得到 4.5，见 tools/check-contrast.py */
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--danger-ink); font-weight: 700; }
.btn-danger:active { background: var(--danger-dark); }

/* 次要按钮：字别小于 16px，不然老人看不清 */
.btn-sm {
  min-height: 42px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}

/* 主操作在手机上占满整行，好点 */
.btn-block { display: flex; width: 100%; min-height: var(--tap-lg); font-size: var(--fs-lg); }

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: grayscale(0.25);
}

/* 胶囊分段控件（今天 / 本周 / 本月 这种期间切换） */
.pill-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: 100%;
  padding: 3px;
  background: var(--track);
  border-radius: var(--r-pill);
  overflow-x: auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.pill.active {
  background: var(--card);
  color: var(--brand-dark);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* 快捷选品标签 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* 选中的可点标签：底色是淡绿，所以文字要用最深的那个绿（7.02），
   --brand-link 压在这个底上只有 4.28，不够 */
.chip.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }

/* 状态标签：绿=结清 / 红=欠款 / 琥珀=部分付 / 青=信息
   字比说明文字再大一点，因为「已付 / 未付」是扫一眼就要认出来的 */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--track);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.tag-green { background: var(--ok-soft); color: var(--ok); }
.tag-red { background: var(--danger-soft); color: var(--danger); }
.tag-amber { background: var(--warn-soft); color: var(--warn); }
.tag-blue { background: var(--info-soft); color: var(--info); }
.tag-gray { background: var(--track); color: var(--text-2); }

/* ==========================================================================
   六、表单
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.req { color: var(--danger); font-weight: 700; margin-inline-start: 2px; }
.hint { font-size: var(--fs-xs); color: var(--text-2); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--card);
  /* ★ 不低于 16px：否则 iOS 聚焦输入框会自动放大整页。
     这里用 17px（--fs-md），比门槛还高一档，老人看着也轻松 */
  font-size: var(--fs-md);
  line-height: 1.45;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.textarea { min-height: 108px; padding: var(--sp-3); resize: vertical; }

.select {
  padding-inline-end: var(--sp-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% + 2px),
    calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring);
}

.input::placeholder, .textarea::placeholder { color: var(--text-3); }

.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--track);
  color: var(--text-3);
  cursor: not-allowed;
}

/* 金额输入：等宽数字 + 右对齐，输完一眼能核对 */
.input.num, .input[type="number"], .input[inputmode="decimal"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}

/* 勾选框放大到手指点得准（比常见的 18px 再大一圈） */
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--brand-dark); }

/* ==========================================================================
   七、布局小工具：row / stack / kv / divider / avatar
   ========================================================================== */

.row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.row-wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-lg { gap: var(--sp-5); }
.divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-3) 0; }

/* 侧栏底部：登录人与退出按钮 */
.sidebar-foot {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}

/* 供货商首字头像 */
.avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

/* 键值对（对账单、供货商详情） */
.kv {
  display: grid;
  grid-template-columns: minmax(92px, auto) 1fr;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
}

.kv dt { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.kv dd { font-size: var(--fs-md); font-weight: 600; min-width: 0; }
.kv dd.num { text-align: right; }

/* ==========================================================================
   八、表格（手机横向滚动 + 表头吸顶）
   ========================================================================== */

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  /* 右侧留一点渐变，暗示还能往右划 */
  background: linear-gradient(to left, var(--card) 30%, rgba(255, 255, 255, 0)) right / 24px 100% no-repeat;
}

.table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  /* ★ 表格字不再比正文小：老人对着密密麻麻的小字最容易串行 */
  font-size: var(--fs-sm);
}

.table th, .table td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  border-bottom: 1px solid var(--border-strong);
}

/* 手机上每行给足高度，手指点得准、看得清 */
.table tbody td { height: 64px; }
.table tbody tr:active { background: var(--track); }
.table tbody tr:last-child td { border-bottom: 0; }

.table tfoot td {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
  font-weight: 700;
  border-top: 1px solid var(--border-strong);
}

/* 紧凑表格用在明细弹层里，行高留 48px（仍然是能点准的高度） */
.table-sm { font-size: var(--fs-sm); }
.table-sm th, .table-sm td { padding: var(--sp-2) var(--sp-3); }
.table-sm tbody td { height: 48px; }

/* 金额列：等宽数字右对齐，小数点自然对齐 */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.table tbody .num { font-weight: 600; }

/* ==========================================================================
   九、列表 / 空状态 / 骨架屏
   ========================================================================== */

.list { display: flex; flex-direction: column; }

.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 68px;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  -webkit-tap-highlight-color: transparent;
}

.list-item:last-child { border-bottom: 0; }
.list-item:active { background: var(--track); }

.list-item-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* 名字太长就省略，别把金额挤下去 */
.list-item-main > span, .list-item-main > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 副标题（单号 / 日期 / 门店）：15px，比常见的 12px 大两档 */
.list-item-sub {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.list-item-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-md);
}

.empty::before {
  content: "空";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--track);
  color: var(--text-3);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  color: var(--text-2);
  font-size: var(--fs-sm);
}

.loading::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  display: block;
  min-height: 1em;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--track) 25%, var(--card) 37%, var(--track) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  color: transparent;
}

@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ==========================================================================
   十、金额（本系统最重要的数字）
   ========================================================================== */

.money {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--fs-lg);
  font-weight: 700;
  white-space: nowrap;
}

.money-lg {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* 欠款：暖红；预付 / 对方欠我：沉稳绿 */
.money-pos { color: var(--danger); }
.money-neg { color: var(--ok); }

/* ==========================================================================
   十一、提示条与 Toast
   ========================================================================== */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--text-3);
  border-radius: var(--r-md);
  background: var(--card);
  /* 提示条里的话都要读得清，不能比正文小 */
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.banner-warn {
  background: var(--warn-soft);
  /* 三行 border-color：老浏览器用第二行，新浏览器用第三行的混色 */
  border-color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  border-inline-start-color: var(--warn);
  color: var(--text);
}

.banner-info {
  background: var(--info-soft);
  border-color: var(--info);
  border-color: color-mix(in srgb, var(--info) 35%, var(--border));
  border-inline-start-color: var(--info);
  color: var(--text);
}

/* 右上角弹出的提示：手机上贴顶，桌面上靠右 */
.toast-wrap {
  position: fixed;
  top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
  right: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: #1B211C;
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.18s ease;
}

.toast-ok { background: var(--ok); color: #fff; }
.toast-err { background: var(--danger); color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   十二、遮罩 / 抽屉 / 弹窗
   ========================================================================== */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: rgba(20, 32, 22, 0.48);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.backdrop.open { opacity: 1; pointer-events: auto; }

/* 抽屉：手机从底部滑出（92% 高、顶部圆角、带抓手） */
.drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  height: 92vh;
  height: 92dvh;
  max-height: 92vh;
  background: var(--card);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(101%);
  transition: transform 0.26s ease;
  will-change: transform;
  /* 关闭时藏起来：避免用 Tab 键跑到看不见的抽屉里 */
  visibility: hidden;
}

.drawer.open { transform: translateY(0); visibility: visible; }

.drawer-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 68px;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xl);
  font-weight: 700;
}

/* 顶部一条抓手，提示可以下拉关闭 */
.drawer-head::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
}

.drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.drawer-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--card);
}

/* 弹窗：flex 居中，卡片最高 90vh 且内部可滚动 */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(20, 32, 22, 0.48);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal.open { opacity: 1; visibility: visible; }

.modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  max-height: 90dvh;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: scale(0.97);
  transition: transform 0.2s ease;
}

.modal.open .modal-card { transform: scale(1); }

.modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}

.drawer-foot .btn, .modal-foot .btn { flex: 1 1 auto; }

/* ==========================================================================
   十二点五、门店切换器 / 收货核对 / 库存
   ========================================================================== */

/* 顶栏上的门店小按钮：一眼看出「现在看的是哪家店」 */
.branch-chip {
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 4px 12px;
}

.branch-chip::before {
  content: '⌂ ';
  opacity: 0.7;
}

/* 「全部门店」是汇总视角，跟具体某家店区分开 */
.branch-chip-all {
  background: var(--track);
  color: var(--text-2);
}

@media (max-width: 480px) {
  .branch-chip { max-width: 30vw; font-size: var(--fs-xs); }
}

/* 两个并排的统计块（申报 vs 核定） */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* 表格里能点进去的行 */
.row-click { cursor: pointer; }
.row-click:active { background: var(--track); }

/* 「同时入库」这类勾选项，整行都能点，手机上点得准 */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--track);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
  cursor: pointer;
}

.check input { flex: 0 0 auto; margin-top: 1px; }

/* 核对表格里的数量输入框：窄一点、右对齐、数字等宽
   ★ 这是「过磅核对」时最常点的框，别为了紧凑把它做小 ——
     高度保持 44px，宽度留到 104px，两位小数也放得下 */
.input-sm {
  padding: 8px var(--sp-3);
  font-size: var(--fs-md);
  min-height: 44px;
}

.num-in { width: 104px; }

/* 有差异但还没写说明时，把输入框标黄提醒一下（不拦着不让存） */
.input-warn {
  border-color: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

/* 一切正常的提示条（跟 banner-info 区分开：info 是说明，ok 是「已经办好了」） */
.banner-ok {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
}

.banner-ok strong { color: var(--ok); }

/* ==========================================================================
   十三、桌面端增强：≥900px 变两栏
   ========================================================================== */

@media (min-width: 900px) {
  .app { flex-direction: row; }

  /* 左侧导航 */
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    /* 侧栏宽度跟着字号走：原来 232px 装不下 19px 的「员工账号与权限」 */
    flex: 0 0 256px;
    width: 256px;
    position: sticky;
    top: 0;
    height: 100vh;
    padding: var(--sp-5) var(--sp-3);
    background: var(--card);
    border-inline-end: 1px solid var(--border);
    overflow-y: auto;
  }

  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-3) var(--sp-4);
    line-height: 1.3;
  }

  .nav { display: flex; flex-direction: column; gap: 2px; }

  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--tap);
    padding: 0 var(--sp-3);
    border-radius: var(--r-md);
    color: var(--text-2);
    font-size: var(--fs-lg);
    font-weight: 600;
    text-align: left;
  }

  .nav-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
  .nav-item:hover:not(.active) { background: var(--track); }

  .main { flex: 1 1 auto; min-width: 0; padding: var(--sp-6) var(--sp-8) var(--sp-8); }

  /* 桌面不需要底部导航，顶部条也不吸顶了 */
  .tabbar { display: none; }

  .topbar {
    position: static;
    min-height: 0;
    padding: 0 0 var(--sp-5);
    background: none;
    border-bottom: 0;
  }

  .topbar h1, .topbar .topbar-title { font-size: var(--fs-xl); }

  /* 统计卡与网格放开了排 */
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .stat-value { font-size: var(--fs-3xl); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .card-head, .card-foot { padding: var(--sp-3) var(--sp-5); }
  .card-body { padding: var(--sp-5); }

  /* 桌面端行高不再压小：鼠标虽然比手指准，但看的人还是同一批人 */
  .table { min-width: 0; font-size: var(--fs-md); }
  .table tbody td { height: 56px; }
  .list-item { min-height: 64px; }

  /* 抽屉改为右侧滑出。宽度跟着字号一起加，否则一列放不下「品名 + 数量 + 金额」 */
  .drawer {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: 520px;
    height: 100vh;
    max-height: none;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    transform: translateX(101%);
  }

  .drawer.open { transform: translateX(0); }
  .drawer-head::before { display: none; }
  .drawer-body { padding: var(--sp-5); }
  .drawer-foot { padding: var(--sp-4) var(--sp-5); }
  .drawer-foot .btn, .modal-foot .btn { flex: 0 0 auto; }
  /* 桌面按钮不必撑满一行，跟其它按钮并排更整齐 */
  .btn-block { display: inline-flex; width: auto; }

  .toast-wrap { left: auto; min-width: 300px; max-width: 420px; }
  .toast { animation: none; }
}

/* 超宽屏：内容别拉太长，眼睛扫不过来 */
@media (min-width: 1400px) {
  .page { max-width: 1360px; }
}

/* ==========================================================================
   十三点六、营业额分渠道录入
   --------------------------------------------------------------------------
   老板要按微信/支付宝/抖音核销/小程序核销分开填，月底跟平台对账。
   格子不能太小 —— 店里是拿手机填的，手指粗，而且供货商里有上了年纪的。
   ========================================================================== */

.chan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* 窄屏（手机）就一列，别挤成两列看不清 */
@media (max-width: 560px) {
  .chan-grid { grid-template-columns: 1fr; }
}

/* 合计条：填的时候实时变，所以要显眼 —— 老板靠它确认总数对不对 */
.sale-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  font-size: var(--fs-lg);
}

.sale-total strong {
  font-size: var(--fs-xl);
  color: var(--brand-ink);
}

/* 列表里每条记录下面挂的渠道标签 */
.chan-chip {
  display: inline-block;
  margin: 2px 6px 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* 看板上「今天各渠道收了多少」那一排：
   名字和金额分开，金额用等宽数字，竖着看能对齐 */
.chan-name {
  color: var(--text-2);
  margin-right: 6px;
}
.chan-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   十三点七、费用「一次性 / 每天分摊」
   --------------------------------------------------------------------------
   这是个要动脑子选的选项，所以做成整块可点的大卡片，
   不是那种小小的单选圆点 —— 供货商里有上了年纪的，点不准。
   ========================================================================== */

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  min-height: var(--tap-lg);
}

.radio-card:hover { border-color: var(--brand); }

/* 选中的那张要一眼看出来（不只靠边框颜色 —— 还有底色和加粗） */
.radio-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.radio-card input[type='radio'] {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--brand);
}

.radio-card > span {
  display: block;
  min-width: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.radio-card strong { display: block; }

/* 分摊预览：老板填的时候实时告诉他一共多少天、每天多少钱 */
.alloc-preview:not(:empty) {
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--brand-tint);
  border: 1px dashed var(--brand);
  font-size: var(--fs-md);
}

.alloc-line { margin-bottom: 4px; }

/* ==========================================================================
   十三点八、分红池 / 发展金预留比例
   ========================================================================== */

/* 每家店一行：店名 + 比例输入 + 保存。手机上要能换行不挤 */
.reserve-row {
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.reserve-row .input { text-align: right; font-variant-numeric: tabular-nums; }

/* 池子余额是老板最常看的数，给个大一点的字号 */
.stat-value.money-pos { color: var(--brand-ink); }

/* 台账里的勾稽检查：对得上就淡淡的，对不上要跳出来 */
.check-line {
  font-size: var(--fs-sm);
  color: var(--text-2);
  padding: 3px 0;
}

.check-line.check-bad {
  color: var(--danger);
  font-weight: 700;
  background: #FDECEC;
  border-radius: 6px;
  padding: 6px 10px;
}

/* 对账表最后一行（池子里的钱）要压得住 */
.table tr.row-total td {
  border-top: 2px solid var(--line);
  font-size: var(--fs-md);
}

/* 作废的记录：划掉但看得见 —— 不能删，就是让别人看见「发过又撤了」 */
.table tr.row-voided td {
  color: var(--text-3);
  background: #FAFAF8;
}

.table tr.row-voided s { text-decoration-thickness: 2px; }

/* ==========================================================================
   十三点五、品牌标识（logo 是真图片，不要拿文字凑）
   ========================================================================== */

/* 侧栏左上角：logo 跟头像同高（44px），一排看过去齐整 */
.sidebar-brand .brand-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: contain;
}

.sidebar-brand .brand-text { min-width: 0; }

.sidebar-brand .brand-text strong {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.2px;
}

.sidebar-brand .brand-text .hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 登录页：logo 摆在最上面，配上门头上的那句话 */
.login-brand {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--brand-tint);
  text-align: center;
}

.login-brand img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.login-brand .name {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: 1px;
}

.login-brand .slogan {
  font-size: var(--fs-xs);
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: var(--r-pill);
  padding: 3px 12px;
  font-weight: 600;
}

.login-brand .sys {
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* 供货商手机页顶部 */
.sup-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sup-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

.sup-brand .nm {
  font-weight: 700;
  color: var(--brand-ink);
  font-size: var(--fs-lg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 首页/说明页上的门头照 */
.store-shot {
  width: 100%;
  border-radius: var(--r-md);
  display: block;
}

/* 单据照片缩略图（收货详情里的送货单 / 交货照片）。
   点开看大图，所以做成块状可点，触摸目标 ≥ --tap。 */
.shot-thumb {
  display: block;
  width: 120px;
  height: 120px;
  min-width: var(--tap);
  min-height: var(--tap);
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
}

/* ==========================================================================
   十三·2、看板上的「近几天营业额」小柱状图
   ----------------------------------------------------------
   为什么不复用页面里那个 barChart：
   那个是横向长条（一行一天，带文字标签），适合十几天的进货走势；
   这里是「一眼看出哪天做得好」，要的是**能对比高矮**的柱子。
   共用一套只会两边都不好用。
   ========================================================================== */
.rev-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 2px 0;
  overflow-x: auto;
}
.rev-bar-col {
  flex: 1 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.rev-bar {
  width: 100%;
  max-width: 46px;
  border-radius: var(--r-sm) var(--r-sm) 2px 2px;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-bottom: none;
  /* 没数据的那天也留一条细底线，不然看起来像"那天不存在" */
  min-height: 2px;
}
.rev-bar.is-today {
  background: var(--brand);
}
.rev-bar-day {
  font-size: var(--fs-xs);
  color: var(--text-3);
  line-height: 1.2;
}
.rev-bar-val {
  font-size: var(--fs-xs);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

/* ==========================================================================
   十三·3、员工绩效：阶梯编辑器 + 出勤格子
   --------------------------------------------------------------------------
   阶梯那里是「一行一档」，每行两个输入框加一个删。
   出勤是一张「人 × 天」的格子表 —— 本来就是给人扫一眼看的，
   所以格子做小、状态用颜色区分，不用文字。
   ========================================================================== */
.radio-card-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio-card-main {
  min-width: 0;
}

/* 阶梯的一行：金额 + 比例 + 删 */
.tier-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.tier-upto, .tier-bp {
  min-width: 0;
}
.tier-del {
  flex: 0 0 auto;
  margin-top: 2px;
}

/* 出勤格子表：人 × 天，格子小、能横滑 */
.att-table {
  font-size: var(--fs-xs);
}
.att-table th, .att-table td {
  padding: 2px 3px;
  white-space: nowrap;
}
.att-cell {
  min-width: 34px;
  min-height: 34px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-3);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.att-cell.is-present {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
}
.att-cell.is-half {
  background: #FDF3E3;
  border-color: var(--warn);
  color: var(--warn);
}
.att-cell.is-leave {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--info);
}
.att-cell.is-absent {
  background: #FCEBEB;
  border-color: var(--danger);
  color: var(--danger);
}

/* 按人设比例那几个输入框，别太长 */
.share-input {
  max-width: 220px;
}

/* ==========================================================================
   十四、打印：出对账单／欠款明细，白底黑字，A4 友好
   ＝＝ 全文件仅此 3 处 !important ＝＝
   ========================================================================== */

@media print {
  :root {
    --bg: #fff;
    --card: #fff;
    --text: #000;
    --text-2: #333;
    --border: #999;
    --border-strong: #666;
    --shadow: none;
    --shadow-sm: none;
    --shadow-lg: none;
  }

  /* 屏幕上的导航、按钮、遮罩一律不出现在纸上 */
  .sidebar,
  .topbar,
  .tabbar,
  .no-print,
  .drawer,
  .modal,
  .backdrop,
  .toast-wrap,
  .btn { display: none !important; }

  /* 纸上的字号是跟着 A4 走的，不是跟着屏幕的标尺走。
     12pt ≈ 16px，比屏幕正文还大一档 —— 供货商签字的对账单必须看得清 */
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.5; }
  .app { display: block; }

  /* 纸张本身就是容器，去掉屏幕布局的内外边距 */
  .main { padding: 0 !important; margin: 0 !important; width: auto; border: 0; }

  .page { max-width: none; margin: 0; gap: 10pt; }

  .card, .stat {
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  .card-head, .card-foot { background: #fff; color: #000; }

  /* 表格铺满纸面，表头每页重复，别横向滚动 */
  .table-wrap { overflow: visible; background: none; }
  .table { min-width: 0; width: 100%; font-size: 10.5pt; }

  .table th, .table td {
    padding: 4pt 6pt;
    height: auto;
    color: #000;
    border-bottom: 1px solid #bbb;
    white-space: normal;
  }

  .table th { position: static; background: #fff; border-bottom: 1px solid #000; }
  .table thead { display: table-header-group; }
  .table tr { break-inside: avoid; }

  /* 打印常被省掉颜色，语义改由字重/字形表达，信息不能丢 */
  .money, .money-lg, .stat-value { color: #000; font-size: 13pt; }
  .money-pos { font-weight: 800; }
  .money-neg { font-style: italic; }

  .tag { border: 1px solid #666; background: #fff; color: #000; }
  .print-only { display: block; }
  .empty, .loading, .skeleton { display: none; }
  a { color: #000; text-decoration: underline; }

  @page { margin: 12mm; }
}