* { box-sizing: border-box; }
body { font-family: "Microsoft YaHei", system-ui, sans-serif; margin: 0; background: #f5f6f8; color: #222; }
/* ================= 顶条 + 左侧功能栏（2026-10-10 · 深色侧栏 + 手机抽屉） ============
   老板拍板：深色 #1a202c 系、当前页 3px 主色竖条、<768px 汉堡 + 抽屉。
   颜色一律走下面的 token；tests/test_nav_look.py 按 WCAG 逐条核对对比度（都 ≥ 4.5:1）。
   菜单表只有 app/nav.py 那一份出处；这里只管长相。 */
:root {
  --side-w: 232px;                 /* 桌面端侧栏宽（全高固定） */
  --bar-h: 45px;                   /* 顶条高：侧栏从顶条下沿往下的全高 */
  --c-rail: #1a202c;               /* 侧栏底 / 顶条底 */
  --c-rail-line: #2a3547;          /* 侧栏右侧 1px 分隔线 */
  --c-text: #e2e8f0;               /* 子项文字      对底 13.24:1 */
  --c-text-dim: #94a3b8;           /* 分组标题      对底  6.36:1 */
  --c-text-dim2: #7f8ea3;          /* 计数小字      对底  4.90:1 */
  --c-accent: #3b82f6;             /* 主色：当前页竖条 / 分组箭头 */
  --c-hover-bg: rgba(255, 255, 255, .07);
  --c-active-bg: rgba(59, 130, 246, .18);
  --r-item: 6px;
  --t-fold: .2s;
}
/* 版心：232 侧栏 + 1080 内容当一整块居中 —— 侧栏贴着内容左边，不贴屏幕边 */
.wrap { max-width: calc(var(--side-w) + 1080px); margin: 0 auto; }
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; align-items: start; }
header.appbar { position: sticky; top: 0; z-index: 60; background: var(--c-rail); color: #fff;
  min-height: var(--bar-h); padding: 6px 20px; display: flex;
  align-items: center; gap: 12px; flex-wrap: wrap; }
header.appbar h1 { margin: 0; font-size: 17px; }
header.appbar .crumb { color: var(--c-text-dim); font-size: 14px; }
header.appbar .crumb b { color: #fff; }
.burger { display: none; background: transparent; border: 0; color: #fff; font-size: 20px;
  line-height: 1; padding: 2px 6px; border-radius: var(--r-item); cursor: pointer; }
.burger:hover { background: var(--c-hover-bg); }
.col { min-width: 0; }

/* 侧栏本体：随页钉在版心左边（顶条以下全高）、右侧 1px 分隔线 */
.side { position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h));
  width: var(--side-w); z-index: 50;
  background: var(--c-rail); border-right: 1px solid var(--c-rail-line); overflow-y: auto;
  transform: translateX(0); transition: transform var(--t-fold) ease; }
.sidemenu { padding: 10px 0 16px; }
.side details.grp > summary { list-style: none; cursor: pointer; margin: 0 8px;
  padding: 6px 12px; border-radius: var(--r-item); color: var(--c-text-dim);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.side details.grp > summary::-webkit-details-marker { display: none; }
.side details.grp > summary:hover { background: var(--c-hover-bg); color: var(--c-text); }
.side details.grp > summary .cnt { margin-left: auto; color: var(--c-text-dim2);
  font-weight: 400; }
.side details.grp > summary .arrow { flex: 0 0 auto; width: 0; height: 0;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transform: rotate(0deg); transition: transform var(--t-fold) ease; }
.side details.grp[open] > summary .arrow { transform: rotate(90deg); }
.side a.item { display: block; margin: 0 8px 2px 20px; padding: 8px 12px;
  border-radius: var(--r-item); color: var(--c-text); text-decoration: none; font-size: 14px; }
.side a.item:hover { background: var(--c-hover-bg); }
.side a.item.on { background: var(--c-active-bg); color: #fff; font-weight: 700;
  box-shadow: inset 3px 0 0 0 var(--c-accent); }

/* 手机抽屉的遮罩：桌面上永远不出现 */
.scrim { display: none; }
nav.tabs a { margin-right: 16px; }   /* 明细页快捷页签的间距：原来靠上面那条全局规则撑开，改版后只留这一处 */

main { max-width: 1080px; margin: 24px auto; padding: 0 16px; }
h2 { margin-top: 0; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card { background: #fff; border-radius: 8px; padding: 14px; border-top: 4px solid #999; }
.card.bad { border-top-color: #d64541; }
.card.ok { border-top-color: #2e8b57; }
.card.good { border-top-color: #e6a23c; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 4px 0; font-size: 14px; }
.status { font-weight: 700; }
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; }
.totals .box { background: #fff; border-radius: 8px; padding: 12px; }
.warn { background: #fff7e6; border: 1px solid #e6a23c; border-radius: 6px; padding: 10px 14px; margin: 12px 0; }
.err { background: #fdecea; border: 1px solid #d64541; border-radius: 6px; padding: 10px 14px; margin: 12px 0; }
.okmsg { background: #e8f7ee; border: 1px solid #2e8b57; border-radius: 6px; padding: 10px 14px; margin: 12px 0; }
form { background: #fff; border-radius: 8px; padding: 16px; display: grid; gap: 10px; max-width: 640px; }
label { font-weight: 600; display: block; }
input, select, textarea { padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; width: 100%; }
input[type="checkbox"] { width: auto; }
button { padding: 8px 18px; background: #1f2430; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
button:hover { background: #37405a; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { border: 1px solid #e3e6ea; padding: 6px 10px; text-align: left; font-size: 14px; }
.grid9 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.grid9 button { background: #eef1f6; color: #222; }
.grid9 button:hover { background: #dde4f0; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 13px; }
.tag.a { background: #e8f0fe; color: #1a56db; }
.tag.b { background: #fef3e2; color: #b25e09; }
.hint { color: #777; font-size: 13px; }
input[type="range"] { width: 100%; }

.filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 12px 0;
  max-width: none; }
.filters label { font-weight: 400; font-size: 13px; white-space: nowrap; }
.filters input, .filters select { padding: 4px 6px; }
.filters select, .filters input[type="date"] { width: auto; }
.filters a.reset { padding: 5px 12px; font-size: 13px; background: #eef1f6; color: #1f2430;
  border-radius: 4px; text-decoration: none; }
.filters a.reset:hover { background: #dde4f0; }

/* 快捷页签与筛选小计（2026-09-24 流水明细多维筛选） */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.tabs a.tab { padding: 5px 12px; border: 1px solid #d5dae3; border-radius: 14px; background: #fff;
  color: #1f2430; text-decoration: none; font-size: 13px; }
.tabs a.tab:hover { background: #eef1f6; }
.tabs a.tab.on { background: #1f2430; border-color: #1f2430; color: #fff; }
p.strip { background: #eef1f6; border: 1px solid #d5dae3; border-radius: 6px;
  padding: 8px 12px; margin: 10px 0; font-size: 14px; }
tr.voided td { color: #999; text-decoration: line-through; }
.warn ul { margin: 6px 0 0 18px; }

/* 「操作」列：编辑 / 作废原因 / 作废 并排，且不被全局 form、input 样式撑开 */
th.actions, td.actions { width: 1%; white-space: nowrap; vertical-align: middle; }
td.actions a.edit { display: inline-block; padding: 4px 10px; margin-right: 8px; font-size: 13px;
  background: #eef1f6; color: #1f2430; border-radius: 4px; text-decoration: none; }
td.actions a.edit:hover { background: #dde4f0; }
form.voidform { display: inline-flex; align-items: center; gap: 6px; width: auto;
  max-width: none; padding: 0; margin: 0; background: transparent; }
form.voidform input { width: 108px; padding: 4px 6px; }
form.voidform button { padding: 4px 12px; font-size: 13px; }

/* 2026-10-25 步骤42 顾客存酒：取酒 / 续期 / 处置三个行内小表单（跟 voidform 同一个坑：
   不加这几条会被全局 form 的 padding / background / max-width 撑成一整块白底大表单）。 */
form.lockerform { display: inline-flex; align-items: center; gap: 6px; width: auto;
  max-width: none; padding: 0; margin: 0 8px 0 0; background: transparent; }
form.lockerform input { width: 96px; padding: 4px 6px; }
form.lockerform input[name="note"] { width: 140px; }
form.lockerform button { padding: 4px 10px; font-size: 13px; }

/* 页脚身份牌：代码指纹 + 进程启动时刻（与启动黑窗口里那两行比对用） */
footer.build { max-width: 1080px; margin: 0 auto 30px; padding: 10px 16px; color: #777;
  font-size: 12px; display: flex; gap: 14px; flex-wrap: wrap; border-top: 1px solid #e3e6ea; }
footer.build span.plain { font-size: 12px; }


/* 备注栏的「前面用过的写法」提示（2026-09-24） */
.notehint ul { list-style: none; margin: 6px 0 0; padding: 0; }
.notehint li { margin-bottom: 4px; }
button.fillnote { background: #fff; color: #1f2430; border: 1px solid #d5dae3; border-radius: 4px;
  padding: 3px 8px; font-size: 13px; cursor: pointer; }
button.fillnote:hover { background: #eef1f6; }

/* 今日报数：2026-09-25 第4步是「业态 × 收款方式」的格子单；2026-10-12 步骤31 改成一桌一行
   （台位 + 五个收款格 + 这一桌小计 + 订台人），下面两张表共用这套排版。 */
.dailygrid input { width: 80px; text-align: right; }
.dailygrid select { max-width: 170px; }
.dailygrid th, .dailygrid td.sub { white-space: nowrap; }
.dailygrid td.sub { color: #555; background: #fafbfc; }

/* 2026-10-25 步骤40：十列排不进一行 —— 六个钱列收窄，把地方还给台位与订台人 */
.dailygrid th, .dailygrid td { padding: 4px 5px; }
.dailygrid select[data-slot],
.dailygrid select[name$="_marketer"] { min-width: 136px; max-width: none; }
.dailygrid th:last-child, .dailygrid td:last-child { width: 1%; white-space: nowrap; }
.dailygrid td:last-child button { padding: 3px 6px; }

.err-hint { color: #d64541; font-size: 13px; }
/* 2026-10-26 口径改：亏损月份只标红提醒、不拦分红 —— 可分配页与分红页共用这一块。
   配色照 .err 那套浅底深红走（正文对底 6.3:1），只求「一眼看得出是红的」。 */
.loss-flag { border: 1px solid #c0392b; background: #fdecea; color: #a5281f;
  padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.loss-flag ul { margin: 6px 0 0 18px; }
/* 手机（<768px）：侧栏收成抽屉、顶条左边露汉堡。
   768–1023px 仍用固定侧栏（老板 2026-10-10 拍板：上一版「只管电脑」作废）。 */
@media (max-width: 767px) {
  header.appbar { padding: 6px 14px; }
  .burger { display: inline-flex; align-items: center; }
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; top: 0; left: 0; bottom: 0; height: auto;
    transform: translateX(-100%); box-shadow: 0 0 24px rgba(0, 0, 0, .35); }
  .side.drawer { transform: translateX(0); }
  .scrim:not([hidden]) { display: block; position: fixed; inset: 0;
    background: rgba(15, 18, 26, .45); z-index: 40; }
}