/* ============================================================
   心元餐饮OS · 运营后台（PC 为主）设计系统  ops.css
   令牌全部取自 /static/shared/demo-ui.css，禁私造颜色。
   铁律：卡片=1px 金线圆角16px；禁虚线；标题加粗；行距留呼吸；
        大数字=衬线 Georgia,"Songti SC" + tabular-nums；
        表格可横向滚动，但**整个页面不许横向滚动**。
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;              /* 页面级禁横向滚动 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--paper, #f6efe0);
  color: var(--ink, #232c44);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.75;               /* 行距留呼吸（不可为 0） */
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--gold-deep, #6f5317); text-decoration: none; }

/* ---------- 顶栏 + 主导航 ---------- */
.ops-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 239, 224, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-line, rgba(165,131,47,.28));
  padding: 10px clamp(14px, 3vw, 28px);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ops-brand { font-size: 18px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.ops-brand small { font-size: 13px; font-weight: 600; color: var(--ink-3, #6a7284); margin-left: 6px; }
.ops-user { margin-left: auto; font-size: 13px; color: var(--ink-2, #5c6478); white-space: nowrap; }
/* 【2026-09-16 抗挤压收口】320px 窄屏：身份行 331px 放不进 292px 内容区 → 冲出屏幕 25px。
   与顶栏同一行放不下时省略号收尾（宽屏恒定不变）。 */
.ops-topbar .ops-user { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.ops-nav {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 8px clamp(14px, 3vw, 28px) 0;
}
.ops-nav a {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--ink-2, #5c6478); border: 1px solid transparent; white-space: nowrap;
}
.ops-nav a:hover { border-color: var(--gold-line, rgba(165,131,47,.28)); }
.ops-nav a.on {
  color: #fffdf6; background: var(--ink, #232c44);
  border-color: rgba(201,165,90,.6);
}

/* ---------- 内容容器 ---------- */
.ops-wrap {
  max-width: 1320px; margin: 0 auto;
  padding: 18px clamp(14px, 3vw, 28px) 64px;
  display: flex; flex-direction: column; gap: 18px;
}
.ops-head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ops-head h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.ops-head .sub { font-size: 14px; color: var(--ink-2, #5c6478); }
.ops-eyebrow {
  font-size: 13px; font-weight: 700; color: #8a6d2f; letter-spacing: 1.5px;
  display: flex; align-items: center; gap: 8px;
}
.ops-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--gold, #b08d3e); }

/* ---------- 卡片 ---------- */
.ops-card {
  background: var(--card, #fffdf6);
  border: 1px solid var(--gold-line, rgba(165,131,47,.28));
  border-radius: 16px;
  padding: 18px 20px;
}
.ops-card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.ops-card .hint { font-size: 13px; color: var(--ink-3, #6a7284); margin-bottom: 12px; line-height: 1.7; }
.ops-card .hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ops-card .hd h2 { margin: 0; }
.ops-card .hd .sp { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* 【2026-09-17 出界收口 · 320 档】帮助抽屉把卡片头右侧控件块 .sp（月份筛选 + 查看）包进
   #xyHelpGrp；共享组件里该组是 flex:none（按内容定宽、不收缩）⇒ 320px 下整组 319px、
   右沿 348 → 顶出画布 28px。这里按页开收缩：整组可收缩、组内 .sp 让位换行（.sp 自身
   flex-wrap:wrap，换行不挤字）。同一规则对 7 个 ops 页（都带 #ops-app/.ops-card）都安全：
   只有在「空间不够」时才会触发收缩。 */
.ops-card .hd #xyHelpGrp { flex: 0 1 auto; min-width: 0; }
.ops-card .hd #xyHelpGrp > * { min-width: 0; }

/* ---------- KPI 大数字 ---------- */
.ops-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.ops-kpi {
  background: var(--card, #fffdf6);
  border: 1px solid var(--gold-line, rgba(165,131,47,.28));
  border-radius: 16px; padding: 16px 18px;
}
.ops-kpi .lab { font-size: 13px; color: var(--ink-3, #6a7284); letter-spacing: .5px; line-height: 1.6; }
.ops-kpi .val {
  font-family: Georgia, "Songti SC", "Times New Roman", serif;
  font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.2;
  margin: 6px 0 2px; letter-spacing: .5px;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.ops-kpi .val.unit { font-size: .5em; color: var(--ink-3, #6a7284); font-family: inherit; margin-left: 4px; }
.ops-kpi .sub { font-size: 13px; color: var(--ink-2, #5c6478); line-height: 1.6; }
.ops-kpi.good .val { color: var(--bud, #1d7a4f); }
.ops-kpi.warn .val { color: #a9853c; }
.ops-kpi.bad .val { color: var(--red, #c0392b); }

/* ---------- 表格（外包裹横滚，页面本身不横滚）---------- */
.ops-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ops-tbl {
  width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px;
}
/* 中文/单号不在字中间断行：列宽不够时让卡片内横向滚动，而不是把店名挤成竖排 */
table.ops-tbl td, table.ops-tbl th { word-break: keep-all; }
table.ops-tbl th {
  text-align: left; font-size: 13px; font-weight: 700; color: var(--ink-3, #6a7284);
  padding: 10px 12px; border-bottom: 2px solid var(--gold-line, rgba(165,131,47,.28));
  white-space: nowrap; background: transparent;
}
table.ops-tbl td {
  padding: 12px; border-bottom: 1px solid var(--line, #e7dcc2);
  vertical-align: top; line-height: 1.7;
}
table.ops-tbl tbody tr:hover { background: rgba(201,165,90,.07); }
table.ops-tbl td.num, table.ops-tbl th.num { text-align: right; white-space: nowrap; }
.num-serif {
  font-family: Georgia, "Songti SC", serif; font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.muted { color: var(--ink-3, #6a7284); font-size: 13px; }

/* ---------- 状态胶囊（禁虚线）---------- */
.ops-chip {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; white-space: nowrap; line-height: 1.6;
}
.ops-chip.ok   { background: var(--bud-soft, #e8f3ec); color: var(--bud, #1d7a4f); }
.ops-chip.wait { background: #fbf3dd; color: #8a6d24; }
.ops-chip.warn { background: #fdf1e3; color: #b4622a; }
.ops-chip.bad  { background: var(--red-soft, #fdecec); color: var(--red, #c0392b); }
.ops-chip.gray { background: #efeadb; color: var(--ink-2, #5c6478); }

/* ---------- 按钮 ---------- */
.ops-btn {
  min-height: 40px; padding: 8px 16px; border-radius: 12px;
  border: 1px solid var(--gold-line, rgba(165,131,47,.28));
  background: var(--card, #fffdf6); color: var(--ink, #232c44);
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: transform .12s ease, filter .12s ease;
}
.ops-btn:active { transform: translateY(1px) scale(.99); filter: brightness(.97); }
.ops-btn.primary { background: var(--bud, #1d7a4f); color: #fff; border-color: transparent; }
.ops-btn.gold { background: var(--gold-deep, #6f5317); color: #fffdf6; border-color: transparent; }
.ops-btn.danger { background: var(--red-soft, #fdecec); color: var(--red, #c0392b); }
.ops-btn.small { min-height: 32px; padding: 5px 11px; font-size: 13px; border-radius: 10px; }
.ops-btn:disabled { opacity: .45; cursor: not-allowed; }
button { min-height: 40px; }          /* 压掉 demo-ui.css 的 button{min-height:32px} */

/* ---------- 表单 ---------- */
.ops-field { display: flex; flex-direction: column; gap: 5px; }
.ops-field label { font-size: 13px; font-weight: 700; color: var(--ink-2, #5c6478); }
.ops-input, .ops-select {
  width: 100%; min-height: 42px; padding: 8px 12px; font-size: 15px; font-family: inherit;
  color: var(--ink, #232c44); background: var(--card, #fffdf6);
  border: 1px solid var(--gold-line, rgba(165,131,47,.28)); border-radius: 12px;
}
.ops-input:focus, .ops-select:focus {
  outline: none; border-color: var(--gold-deep, #6f5317);
  box-shadow: 0 0 0 3px rgba(169,133,60,.15);
}
.ops-grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ops-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ops-toolbar .ops-field { min-width: 150px; flex: 0 1 190px; }

/* ---------- 弹层（明细下钻）---------- */
.ops-mask {
  position: fixed; inset: 0; z-index: 90; background: rgba(35,44,68,.42);
  display: none; align-items: flex-start; justify-content: center;
  padding: 5vh 16px; overflow-y: auto;
}
.ops-mask.on { display: flex; }
.ops-modal {
  width: min(880px, 100%); background: var(--paper, #f6efe0);
  border: 1px solid var(--gold-line, rgba(165,131,47,.28));
  border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(154,110,44,.3);
}
.ops-modal .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ops-modal .hd h2 { margin: 0; font-size: 18px; font-weight: 800; }
.ops-modal .hd .sp { margin-left: auto; }

/* ---------- 提示 / 空态 ---------- */
.ops-empty { text-align: center; color: var(--ink-3, #6a7284); font-size: 14px; padding: 28px 12px; line-height: 1.8; }
.ops-alert {
  display: flex; gap: 10px; align-items: flex-start; min-height: 46px;
  padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.7;
}
.ops-alert.red { background: var(--red-soft, #fdecec); color: #a93226; }
.ops-alert.yellow { background: #fbf3dd; color: #8a6d24; }
.ops-alert.green { background: var(--bud-soft, #e8f3ec); color: var(--bud, #1d7a4f); }

#ops-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 120; background: var(--gold-deep, #6f5317); color: #fffdf6;
  border-radius: 14px; padding: 12px 20px; font-size: 15px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(154,110,44,.4); display: none; max-width: 90vw;
}
#ops-toast.on { display: block; }
#ops-toast.bad { background: var(--red, #c0392b); }

/* ---------- 详情展开区 ---------- */
.ops-detail { background: var(--paper, #f6efe0); border-radius: 12px; padding: 14px 16px; line-height: 1.9; }
.ops-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 20px; }
.ops-kv .k { color: var(--ink-3, #6a7284); font-size: 13px; }
.ops-kv .v { font-weight: 700; }
.ops-bar { height: 8px; border-radius: 999px; background: #efeadb; overflow: hidden; min-width: 70px; }
.ops-bar i { display: block; height: 100%; background: var(--bud, #1d7a4f); }
.ops-bar i.mid { background: #c9a75c; }
.ops-bar i.low { background: var(--red, #c0392b); }

/* ---------- 登录门 ---------- */
.ops-gate { display: none; }
.ops-gate.on { display: flex; }
.ops-gate .inner {
  margin: 8vh auto; width: min(420px, 100%);
  background: var(--card, #fffdf6); border: 1px solid var(--gold-line, rgba(165,131,47,.28));
  border-radius: 16px; padding: 24px;
}
.ops-gate h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.ops-gate .tip { font-size: 13px; color: var(--ink-3, #6a7284); margin-bottom: 16px; line-height: 1.7; }
.ops-gate .ops-field { margin-bottom: 12px; }
.ops-gate .ops-btn { width: 100%; min-height: 46px; justify-content: center; }

@media (max-width: 640px) {
  .ops-head h1 { font-size: 20px; }
  .ops-card { padding: 15px 14px; }
  .ops-kpi .val { font-size: 26px; }
}

/* ---------- 【2026-09-16 抗挤压收口】表格单元格一律单行 ----------
   病灶：卡片内容区 358px 里放 6~13 列表格，td 被平均分到 54~80px，
   「门店号 9001」「2026-09-19 15:12」「PROFIT-202609-0002」被折成 2~3 行。
   治法：单元格不折行（宁可整表在 .ops-tblwrap 里横滚，也绝不折两行）；
   短字段列现在按内容取宽，整表宽度由内容决定、由外层横滚壳消化。 */
.ops-tblwrap table.ops-tbl td { white-space: nowrap; }