/* 材料价格后台 - 公共样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  background: #f2f5f9;
  color: #243244;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- 登录页 ---------- */
body.login-body {
  background: linear-gradient(135deg, #1f4e79 0%, #2c5d8f 50%, #3a7bb0 100%);
}
.login-stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
/* 白色光晕装饰 */
.login-stage::before, .login-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.login-stage::before { width: 480px; height: 480px; top: -180px; left: -120px; filter: blur(40px); }
.login-stage::after  { width: 380px; height: 380px; bottom: -150px; right: -100px; filter: blur(40px); }
.login-card {
  width: 420px;
  max-width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 44px 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.4);
  text-align: center;
  position: relative;
  z-index: 1;
}
/* 顶部品牌色条 */
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 28px; right: 28px;
  height: 4px;
  background: linear-gradient(90deg, #1f4e79, #3a7bb0);
  border-radius: 0 0 4px 4px;
}
.brand { margin-bottom: 26px; }
.brand-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #1f4e79;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #1f4e79 0%, #3a7bb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-sub { font-size: 13px; color: #8a97a6; margin-top: 6px; letter-spacing: 0.5px; }

.qr-box {
  border: 1px dashed #d8dee6;
  background: #fafbfc;
  border-radius: 14px;
  padding: 18px;
}
.qr-area { min-height: 180px; display: flex; align-items: center; justify-content: center; }
.qr-img { width: 170px; height: 170px; display: block; }
.qr-loading { font-size: 14px; color: #8a97a6; }
.qr-err { font-size: 13px; color: #e5484d; padding: 10px; }
.qr-tip { font-size: 13px; color: #5a6b7d; margin-top: 14px; }

.state-area { padding: 14px 0 4px; }
.state-text { font-size: 15px; color: #0f6e56; font-weight: 500; margin-bottom: 14px; }

.tip-line {
  font-size: 13px;
  color: #1f4e79;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 22px;
}
.tip-foot { font-size: 12px; color: #8a97a6; margin-top: 6px; }

.btn-ghost {
  background: #eef1f5; color: #40506a; border: none;
  padding: 10px 26px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.btn-ghost:hover { background: #e2e7ee; }

/* ---------- 后台壳 ---------- */
.topbar {
  background: #1f4e79; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px;
}
.topbar .logo-mini {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; vertical-align: middle; margin-right: 10px;
}
.topbar .title { font-size: 16px; font-weight: 500; letter-spacing: 1px; }
.topbar .right { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.topbar .who { color: #e8eef5; }
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; background: #eef4fb; color: #1f4e79;
}
.badge.super { background: #fdecea; color: #d93025; }
.badge.editor { background: #eef4fb; color: #1f4e79; }
.badge.viewer { background: #f2f4f7; color: #5a6b7d; }
.topbar .link-btn {
  background: none; border: 1px solid rgba(255,255,255,.6); color: #fff;
  padding: 5px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.topbar .link-btn:hover { background: rgba(255,255,255,.12); }

/* 2026-09-19：内容区顶部不再留 20px（用户要求把 Tab 下方那条空白带整条去掉）。
   历史/会员页仍有 .pane 自带的 20px 上间距，不受影响。 */
.content { max-width: 1200px; margin: 0 auto 20px; padding: 0 16px; }
/* 价格查看页：正文（材料筛选行）紧贴 Tab 下边框，顶部不再有任何空白条 */
#pane-entry { margin-top: 0; }
.placeholder-card {
  background: #fff; border-radius: 12px; padding: 40px;
  text-align: center; color: #8a97a6; border: 1px dashed #d8dee6;
}

/* ---------- 后台功能区通用 ---------- */
.tabs {
  display: flex; align-items: stretch; gap: 6px;
  background: #fff; border-bottom: 1px solid #e3e9f0;
  padding: 0 20px;
}
/* 顶部条 / Tabs 全宽（让"价格录入"月历能贴满视口） */
.topbar .bar { max-width: none; padding: 0 20px; }
.tabs { max-width: none; padding: 0 20px; }
/* Tab 按钮组：靠右推，避开品牌区 */
.tab-list {
  display: flex; align-items: stretch; gap: 6px;
  margin-left: auto;
}
.tab {
  background: none; border: none; cursor: pointer;
  padding: 14px 22px; font-size: 15px; color: #5a6b7d;
  border-bottom: 3px solid transparent;
}
.tab:hover { color: #1f4e79; }
.tab.active { color: #1f4e79; font-weight: 600; border-bottom-color: #1f4e79; }

/* Tab 区品牌区（左固定）：LOGO + 文字标语 */
.tab-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 22px 6px 6px;
  border-bottom: 3px solid transparent;
}
/* 新 LOGO 是矩形 SF+SAFUNG 字样，不要强行圆形 */
.brand-logo-mini {
  width: 38px; height: 38px;
  object-fit: contain;
  display: block;
}
.brand-slogan {
  font-size: 15px; font-weight: 700; color: #1f4e79;
  letter-spacing: 1px; white-space: nowrap;
}
/* 月份 / 编辑 / 保存：置于品牌 LOGO 右侧，占满中间剩余空间并水平居中 */
.tabs .mc-month {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; min-width: 0;
  padding: 6px 10px;
  border-bottom: 3px solid transparent;
}

.pane { margin-top: 20px; }
.pane-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.pane-head h2 { font-size: 18px; color: #1f4e79; font-weight: 600; margin-right: auto; }
.date-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: #40506a; }

.card {
  background: #fff; border-radius: 12px; padding: 18px;
  box-shadow: 0 4px 20px rgba(31, 78, 121, 0.06);
  overflow-x: auto;
}
.btn-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

/* 输入/按钮 */
.ipt {
  border: 1px solid #d3dbe4; border-radius: 8px; padding: 8px 10px;
  font-size: 14px; color: #243244; background: #fff; outline: none;
}
.ipt:focus { border-color: #1f4e79; }
.entry-tbl .ipt.entry-input { width: 150px; }
select.ipt { min-width: 90px; }
.btn {
  background: #eef1f5; color: #1f4e79; border: 1px solid #d3dbe4;
  padding: 8px 16px; border-radius: 8px; font-size: 14px; cursor: pointer;
}
.btn:hover { background: #e2e7ee; }
.btn.primary { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.btn.primary:hover { background: #16395b; }
.btn.sm { padding: 4px 10px; font-size: 13px; border-radius: 6px; }
.btn.warn { color: #b45309; border-color: #e6c38a; background: #fdf6ec; }
.btn.ok { color: #0f6e56; border-color: #9ed6bd; background: #eefaf4; }
.btn.danger { color: #d93025; border-color: #f0b7b4; background: #fdf1f0; }

/* 表格 */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eef1f5; }
.tbl th { background: #f6f8fb; color: #40506a; font-weight: 600; white-space: nowrap; }
.tbl td.val { font-variant-numeric: tabular-nums; }
.tbl tr:hover td { background: #fafcfe; }
.mat-name { white-space: nowrap; font-weight: 500; }
.src-cell { color: #8a97a6; font-size: 13px; }
.hint { color: #8a97a6; font-size: 13px; }
.qr-err { color: #e5484d; }

/* 会员 */
.mem-toolbar { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.lv-sel { padding: 4px 6px; }
.lv-super { color: #d93025; font-weight: 600; }
.st-active { color: #0f6e56; font-weight: 600; }
.st-banned { color: #e5484d; font-weight: 600; }
.row-banned td { opacity: .65; }
.hist-summary { margin-bottom: 12px; color: #40506a; font-size: 14px; }

/* ===================== 价格录入 · 整月横排月历 ===================== */
.pane-head .mc-month { display: flex; align-items: center; gap: 8px; }
.mc-btn {
  background: #fff; color: #111; border: 1px solid #ccd5df;
  border-radius: 7px; padding: 5px 12px; font-size: 14px; cursor: pointer;
}
.mc-btn:hover { background: #f2f5f9; }
/* 上月/下月 到达本人可见范围边界时置灰不可点（代替原来的文字提示） */
.mc-btn:disabled { opacity: .35; cursor: not-allowed; }
.mc-btn:disabled:hover { background: #fff; }
.mc-title {
  background: #1f4e79; color: #fff; border: none; border-radius: 7px;
  padding: 5px 16px; font-size: 14px; font-weight: 600; min-width: 112px;
  cursor: default;
}
.mc-lock { color: #b45309; font-size: 13px; }

.mc-filter {
  background: #fff; border-radius: 10px; padding: 8px 12px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 12px;
}
.mc-f { font-weight: 700; color: #111; margin-right: 2px; }
.mc-sel {
  font-size: 12.5px; padding: 2px 11px; border-radius: 999px;
  border: 1px solid #adb6c1; background: #fff; color: #111; cursor: pointer;
  margin-right: 4px;
}
.mc-sel.on { background: #1f4e79; color: #fff; border-color: #1f4e79; }
/* 材料标签容器：按分类分组（组名 + 该组材料标签）；与小程序 4 大类一致 */
.mc-tags { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.mc-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-right: 12px; border-right: 1px dashed #d5dde7; }
.mc-group:last-of-type { border-right: 0; padding-right: 0; }
.mc-group-name { font-size: 12px; font-weight: 600; color: #8b98a8; letter-spacing: .5px; white-space: nowrap; }
.mc-tag {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: 999px; font-size: 13px; border: 1px solid #ccd5df;
  background: #fff; color: #222; cursor: pointer; user-select: none;
}
.mc-tag.on { background: #dce6f1; border-color: #8ea9c6; color: #111; font-weight: 700; }
.mc-cnt { margin-left: auto; color: #6a7787; font-size: 12px; }
/* 2026-09-19：.mc-stat / .mc-stat-ok / .mc-stat-err / .mc-stat-empty 已删除
   —— 对应的提示 pill（#mcStat）不再存在于页面中，提示只写控制台 */

.mc-card { padding: 0; overflow: hidden; }
/* 价格录入页：筛选条与月历卡片破 .content 容器，横向贴满视口 */
#pane-entry .mc-filter, #pane-entry .mc-card {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
#pane-entry .mc-filter { padding: 7px 14px; border: 1px solid #e3e9f0; border-bottom: none; border-radius: 16px 16px 0 0 !important; background: #fafbfc; }
/* 整张月历表格作为一个大圆角面板 */
#pane-entry .mc-card { border: 1px solid #e3e9f0; border-top: none; border-radius: 0 0 16px 16px !important; margin-bottom: 14px; background: #fff; box-shadow: 0 6px 20px rgba(31,78,121,.06); }
#pane-entry .mc-card .mc-scroll { border-radius: 0 0 16px 16px; }
/* 防止 100vw 引起横向滚动 */
html, body { overflow-x: hidden; }
/* 冻结表头（2026-09-19 用户要求：「上面至材料名称、日期这一行都锁定，材料多了上下移动上面不动」）
   页面顶部（顶栏 / 品牌行含月份条 / 材料筛选条）本来就在滚动容器之外，天然不动；
   这里再把 .mc-scroll 变成唯一滚动容器并限高，配合下面 thead 的 position:sticky，
   于是材料多到一屏放不下时，只有数据行在表格内部上下滚，表头一行钉住不跟着走。
   高度用 JS 按视口实测写入 --mc-scroll-h（见 admin.js _fitScroll）；这里的 62vh 只是兜底 */
.mc-scroll { overflow: auto; max-height: var(--mc-scroll-h, 62vh); overscroll-behavior: contain; }
.mc-tbl { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
/* 表头：浅灰底统一，圆角面板上沿；不再单独给 mcol 加胶囊 */
.mc-tbl thead th {
  position: sticky; top: 0; z-index: 4; background: #f4f7fb; color: #111;
  font-weight: 700; padding: 4px 0; text-align: center;
  border-bottom: 1px solid #aab5c4;
  line-height: 1.2; height: 45px; vertical-align: middle;
}
.mc-tbl thead th .mc-dd { display: block; font-size: 12px; font-weight: 700; color: #111; }
.mc-tbl thead th .mc-wk { display: block; font-size: 9.5px; color: #6a7787; font-weight: 400; margin-top: 1px; }
.mc-tbl thead th.mc-we { background: #f4f7fb; }
.mc-tbl thead th.mc-sun .mc-wk { color: #d93025; font-weight: 700; }
.mc-tbl thead th.mc-today { background: #ffe9c7; }
.mc-tbl thead th.mc-today .mc-dd { color: #7a4e00; }
.mc-tbl thead th.mc-today .mc-wk { color: #a06b18; }
.mc-tbl thead th.mc-mcol { background: #eaf1f9; color: #1f4e79; font-size: 13px; border-right: 1px solid #c8d1dc; border-radius: 0; padding: 0 8px; }
.mc-tbl thead th.mc-avgth { background: #e5ecf4; color: #0b3d66; border-left: 1px solid #aab5c4; }
/* 材料名称列横向钉住（表头格 + 数据格都用 .mc-sticky） */
.mc-tbl .mc-sticky { position: sticky; left: 0; z-index: 3; }
/* 表头左上角「材料名称」格同时要 top:0（钉住顶部）+ left:0（钉住左侧），
   层级必须高过其余表头格，否则横向滚动时会被日期格盖住 */
.mc-tbl thead th.mc-sticky { z-index: 6; }

/* 数据单元格：去掉独立胶囊，圆角由 .mc-card 整体承担；用极淡 zebra + 淡列分隔区分 */
.mc-tbl tbody td {
  text-align: center; background: #fff; overflow: hidden;
  white-space: nowrap; height: 45px; padding: 0 3px; vertical-align: middle;
  font-variant-numeric: tabular-nums; font-size: 13px; color: #111; font-weight: 600;
  border-right: 1px solid #c8d1dc; border-bottom: 1px solid #c8d1dc;
}
/* 材料名称数据列 */
.mc-tbl tbody td.mc-mcol {
  background: #eaf1f9; color: #1f4e79; font-weight: 700; text-align: center;
  font-size: 13px; border-radius: 0; padding: 0 8px;
  border-right: 1px solid #c8d1dc;
}
.mc-tbl tbody td.mc-today { background: #fff3d8; }
/* 页头「保存」主按钮 */
.mc-btn.primary { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.mc-btn.primary:hover { background: #16395b; }
/* 待保存（已改但未点「保存」）的格子 */
.mc-tbl tbody td.mc-dirty { background: #fff8e6 !important; box-shadow: inset 0 0 0 2px #e6a23c; font-weight: 700; }
.mc-tbl tbody td.mc-avgcell { background: #eef3f9; border-left: 1px solid #aab5c4; }
.mc-tbl tbody tr.mc-avgrow td { background: #f3f6fa; }
.mc-price { font-weight: 600; color: #111; cursor: pointer; }
.mc-price:hover { background: #e3ebf5; border-radius: 3px; }
.mc-empty { color: #c3ccd6; cursor: pointer; }
.mc-empty:hover { background: #f2f5f9; border-radius: 3px; }
.mc-blank { color: #d8dde3; }
.mc-avg { font-weight: 700; color: #0b4e8f; }

/* 单元格内直接输入（2026-09-19 取代原「行内快捷录入条」）——
   点格子 → 该格原地变输入框；方向键/回车/Tab 提交并移到相邻格；
   改动先记入「待保存」(td.mc-dirty)，点页头「保存」统一提交 */
.mc-tbl tbody td.mc-editing {
  padding: 0 !important;
  box-shadow: inset 0 0 0 2px #1f4e79;
  background: #fff !important;
  overflow: visible;
}
.mc-in {
  width: 100%; height: 100%; min-height: 43px;
  border: 0; outline: 0; background: transparent;
  text-align: center; color: #111;
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 0 2px; box-sizing: border-box;
}
.mc-in-err { color: #d93025; }
td.mc-err { box-shadow: inset 0 0 0 2px #d93025 !important; }

/* ============ 以下为 2026-09-19 恢复：走势图 / 涨跌列 / 会员头像 ============ */
/* 历史查看：涨跌列（红涨绿跌，符合国内市场习惯；持平用默认文字色） */
.hist-chg-up   { color: #d93025; font-weight: 600; }
.hist-chg-down { color: #0f8a4a; font-weight: 600; }

/* 历史查看表：日期列左对齐、三个数值列右对齐（逐行上下比对涨跌）；列宽固定不跳动；
   整表限宽，避免宽屏下被拉伸得过于松散 */
/* 四列等宽（各 25%）并统一居中：视觉上就是清清楚楚的 4 等分；
   若首列左对齐、其余右对齐，会让「日期」与「价格」之间空出一整列，看着像 5 等分 */
.hist-tbl { table-layout: fixed; }
.hist-tbl th, .hist-tbl td {
  text-align: center; padding: 7px 18px;      /* 行高收一点 */
  font-size: 16px;                            /* 字号加大，把行填满 */
  line-height: 1.35;
  font-variant-numeric: tabular-nums; width: 25%;
}
.hist-tbl thead th {
  padding-top: 8px; padding-bottom: 8px;
  font-size: 15px; font-weight: 600; color: #3b4a5f; letter-spacing: .3px;
  border-bottom: 1px solid #dde5ee;
}
.hist-tbl td:first-child { color: #40506a; }
.hist-tbl td:nth-child(2) { font-weight: 600; color: #1f2d3d; }
.hist-tbl tbody tr:nth-child(even) td { background: #fafcff; }

/* —— 走势图形态切换按钮（柱状图 / 曲线图） —— */
.chart-switch { display: flex; gap: 8px; margin: 0 0 10px; }
.cs-btn {
  padding: 6px 16px; border-radius: 7px; cursor: pointer;
  border: 1px solid #ccd5df; background: #fff; font-size: 13px; color: #40506a;
}
.cs-btn:hover { background: #f4f7fb; }
.cs-btn.on { background: #1f4e79; border-color: #1f4e79; color: #fff; }

/* —— 走势图（轻量手绘 SVG，无外部依赖） —— */
.hist-chart {
  position: relative; margin: 2px 0 16px; padding: 12px 12px 4px;
  border: 1px solid #e8eef5; border-radius: 10px; background: #fff;
}
.hist-chart.hc-empty {
  padding: 26px; text-align: center; color: #9aa7b6; font-size: 13px; background: #fbfcfe;
}
.hc-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 10px; }
.hc-title { font-size: 14px; font-weight: 600; color: #1f2d3d; }
.hc-title .hc-sub { margin-left: 8px; font-size: 13px; font-weight: 500; color: #6a7787; }
.hc-range { font-size: 12.5px; color: #8a97a6; }
.hist-chart svg { display: block; width: 100%; height: auto; }
.hc-tip {
  position: absolute; display: none; pointer-events: none; z-index: 5;
  min-width: 124px; padding: 8px 11px; border-radius: 9px;
  background: rgba(31, 45, 61, .95); color: #fff; font-size: 12px; line-height: 1.6;
  box-shadow: 0 8px 22px rgba(20, 40, 70, .22);
}
.hc-tip .t-d { color: #b9c6d4; }
.hc-tip .t-p { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-tip .t-p .t-u { font-size: 11px; font-weight: 400; color: #b9c6d4; }
.hc-tip .t-c { font-variant-numeric: tabular-nums; }
.hc-tip .t-c.up { color: #ff9186; }
.hc-tip .t-c.down { color: #6fd39a; }
.hint { color: #8a97a6; font-size: 13px; }
.qr-err { color: #e5484d; }

/* 会员 */
.mem-toolbar { margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.lv-sel { padding: 4px 6px; }
.lv-super { color: #d93025; font-weight: 600; }
.st-active { color: #0f6e56; font-weight: 600; }
.st-banned { color: #e5484d; font-weight: 600; }
.row-banned td { opacity: .65; }
.hist-summary { margin-bottom: 12px; color: #40506a; font-size: 14px; }

/* 会员列表：圆形头像 + 姓名 + 公司/职务 */
.mem-tbl td { vertical-align: middle; }
.mem-user { display: flex; align-items: center; gap: 10px; }
.mem-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: #eef1f5; border: 1px solid #dbe3ec;
}
.mem-avatar.ph {
  display: flex; align-items: center; justify-content: center;
  color: #5b6b7f; font-size: 15px; font-weight: 600;
}
.mem-name { font-weight: 600; color: #111; }
.mem-company { color: #111; }
.mem-title { color: #6a7787; font-size: 12px; margin-top: 2px; }
.mem-login { white-space: nowrap; color: #6a7787; }
/* 历史表已去掉「来源」列：日期/价格/涨跌值/涨跌幅 四列等宽居中，末列不再单独左对齐 */
.hist-blank { color: #d8dde3; }
.mem-user-txt { min-width: 0; }
.mem-tbl td { vertical-align: middle; }