/* ============================================================
   理发店连锁管理系统 · 视觉规范「暖调 · 珊瑚」
   与顾客端(mini.css)同色系:管理端更沉稳,顾客端更明快。
   所有文字/底色组合均已按 WCAG AA(小字 4.5:1)校验。
   ============================================================ */
:root {
  --brand: #CE3A55;        /* 主操作色 珊瑚红(白字 4.82:1) */
  --brand-dark: #A82A43;
  --brand-soft: #FDEDF0;
  --ink: #2C2422;          /* 导航与标题 暖调近黑 */
  --ink-2: #5C5450;
  --gold: #8F6220;         /* 会员与金额辅助 焦糖金(gold-soft 上 4.73:1) */
  --gold-soft: #FBF0DF;
  --danger: #C24A45;       /* 警示与退款 */
  --danger-soft: #FCEBEB;
  --bg: #F7F4F1;           /* 页面底色 暖白 */
  --card: #FFFFFF;
  --line: #EDE6E1;
  --muted: #6E6A66;        /* 次要文字(白底 5.36:1) */
  --radius-sm: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(60,40,35,.04), 0 8px 24px rgba(60,40,35,.06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  font-size: 14px; line-height: 1.55; color: var(--ink); background: #EFEAE6;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--brand); text-decoration: none; }

/* ---------- 通用组件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 500; transition: .15s;
}
.btn:hover { border-color: #cfcfcb; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.ghost { background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.link { border: none; background: none; color: var(--brand); padding: 0 4px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.lg { min-height: 44px; font-size: 15px; }

.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; background: var(--brand-soft); color: var(--brand-dark); }
.tag.gold { background: var(--gold-soft); color: var(--gold); }
.tag.danger { background: var(--danger-soft); color: var(--danger); }
.tag.grey { background: #F1F1EF; color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }
.money { font-weight: 600; font-variant-numeric: tabular-nums; }
.money.big { font-size: 26px; letter-spacing: -.5px; }
.row { display: flex; align-items: center; gap: 8px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: 12px; }
h1,h2,h3,h4 { margin: 0; font-weight: 600; color: var(--ink); }
.hint { font-size: 12px; color: var(--muted); }

input[type=text], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
label.field { display: block; }
label.field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background: #FAFAF9; }

/* ---------- 弹层 ---------- */
.mask { position: fixed; inset: 0; background: rgba(24,45,41,.42); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 460px; max-height: 88vh; max-height: 88dvh; overflow: auto; box-shadow: 0 24px 60px rgba(20,21,24,.22); -webkit-overflow-scrolling: touch; }
.modal-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-body { padding: 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: #FCFCFB; }

.toast { position: fixed; left: 50%; top: 24px; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; width: calc(100% - 32px); max-width: 380px; pointer-events: none; }
.toast > div { background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); animation: pop .2s ease; max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.toast > div.err { background: var(--danger); }
.toast > div.ok { background: var(--brand); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 提示条 ---------- */
.notice { border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; line-height: 1.5; }
.notice.info { background: var(--brand-soft); color: var(--brand-dark); }
.notice.warn { background: var(--gold-soft); color: #7A5220; }
.notice.danger { background: var(--danger-soft); color: var(--danger); }
.demo-flag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--gold-soft); color: var(--gold); margin-left: 6px; }

/* ---------- 顾客端(手机) ----------
   注意:真正的顾客端样式在 mini.css(只有一个 .phone 类,后者覆盖本段)。
   本段仅保留基础兜底,宽度不用 100vw —— 桌面端存在纵向滚动条时 100vw 会比可视区宽,
   把居中的手机壳整体向右挤出屏幕。 */
.phone { width: 100%; max-width: 390px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--bg); position: relative; padding-bottom: 72px; }
.phone-head { background: var(--ink); color: #fff; padding: 14px 16px 60px; }
.phone-head .bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12px; opacity: .8; }
.sheet { margin: -48px 12px 0; }
.pad { padding: 0 12px; }
.sec-title { font-size: 15px; font-weight: 600; margin: 18px 12px 8px; display: flex; align-items: center; justify-content: space-between; }
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 390px; background: #fff; border-top: 1px solid var(--line); display: flex; z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
.tabbar button { flex: 1; border: none; background: none; padding: 8px 0 10px; color: var(--muted); font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; }
.tabbar button.on { color: var(--brand); font-weight: 600; }
.tabbar .ico { font-size: 18px; line-height: 1; }

.list-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.list-item:last-child { border-bottom: none; }
.entry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 14px 6px; }
.entry { border: none; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); padding: 8px 0; min-height: 68px; }
.entry .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.svc-card { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: center; cursor: pointer; }
.svc-card:last-child { border-bottom: none; }
.thumb { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-soft), #F5DFC2); flex: 0 0 56px; display: flex; align-items: center; justify-content: center; color: var(--brand-dark); font-size: 20px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; min-height: 34px; }
.chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.slot { border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); padding: 10px 4px; text-align: center; font-size: 13px; min-height: 44px; }
.slot.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.slot:disabled { color: #C6C6C3; background: #F7F7F6; cursor: not-allowed; }
.wallet-card { background: linear-gradient(120deg, #34383F, #1E2024); color: #fff; border-radius: var(--radius-lg); padding: 18px; margin: 12px; box-shadow: var(--shadow); border-bottom: 3px solid var(--brand); }
.wallet-card .split { display: flex; gap: 20px; margin-top: 14px; }
.wallet-card .split > div { flex: 1; }
.plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.plan.on { border-color: var(--brand); background: var(--brand-soft); }
.step-dots { display: flex; gap: 6px; align-items: center; }
.step-dots i { width: 6px; height: 6px; border-radius: 50%; background: #D8D8D5; display: block; }
.step-dots i.on { background: var(--brand); width: 16px; border-radius: 3px; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 13px; }
.empty .ico { font-size: 32px; opacity: .5; display: block; margin-bottom: 8px; }

/* ---------- 管理端(桌面) ---------- */
.app { display: flex; min-height: 100vh; }
/* 侧栏刻意收窄到 184px:它是常驻的成本,收银台真正需要横向空间的是「消费明细」那张表。
   菜单项固定 44px 高 —— 收银员一天要点几十次,行高必须稳定、不能靠内容撑。 */
.side { width: 184px; flex: 0 0 184px; background: var(--ink); color: #fff; padding: 14px 0; display: flex; flex-direction: column; }
.side .logo { padding: 0 16px 14px; font-size: 15px; font-weight: 600; letter-spacing: .3px; }
.side .logo small { display: block; font-weight: 400; font-size: 11px; opacity: .55; margin-top: 4px; }
.side nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; overflow: auto; }
.side nav button { position: relative; display: flex; align-items: center; gap: 10px; border: none; background: none;
  color: rgba(255,255,255,.72); padding: 0 12px; min-height: 44px; border-radius: var(--radius-sm); font-size: 13.5px; text-align: left; }
.side nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
/* 选中态用低饱和玫红 —— 饱和的品牌色在深底上做大面积填充会晃眼,这里降下来,
   再补一条品牌色竖条做「当前位置」的强锚点(缩成图标条时竖条仍在)。 */
.side nav button.on { background: rgba(203,54,88,.22); color: #fff; font-weight: 500; }
.side nav button.on::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--brand); }
/* 侧栏底部:整块不要用 opacity —— 会把「退出登录」按钮一起做淡,看起来像被禁用。
   改为只把次要文字调暗,按钮本身保持可点的手感。 */
.side .foot { margin-top: auto; padding: 14px 12px 0; font-size: 11px; border-top: 1px solid rgba(255,255,255,.1); }
.side .foot .small { color: rgba(255,255,255,.62); }
.side .foot .btn { width: 100%; margin-top: 8px; background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
.side .foot .btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); }
.side .foot .btn .ico { display: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 顶栏:用 min-height 而不是固定 height —— 窄屏下右侧工具栏会换行成两排,
   固定高度会把第二排裁掉。 */
.topbar { min-height: 64px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; position: sticky; top: 0; z-index: 20; flex-wrap: wrap; row-gap: 6px; column-gap: 12px; }
.topbar h2 { font-size: 20px; letter-spacing: -.2px; }
.content { padding: 24px 24px 40px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi .label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi .value { font-size: 24px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.panel > header { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.panel > header h3 { font-size: 14px; }
.panel .body { padding: 16px 18px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar select, .toolbar input { width: auto; min-width: 130px; }
.cols { display: grid; gap: 16px; }
.cols.c2 { grid-template-columns: 1fr 380px; }
.badge-store { background: var(--brand-soft); color: var(--brand-dark); padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.order-line { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; margin-bottom: 10px; }
.stage-row { display: grid; grid-template-columns: 76px 1fr 110px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px dashed var(--line); }
.stage-row:first-of-type { border-top: none; }
.preview-box { background: #FAFAF9; border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 14px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }

/* 柱状图(DOM 实现,文字不做横向拉伸) */
.barchart { display: flex; align-items: flex-end; gap: 4px; width: 100%; }
.barchart .bar-col {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.barchart .bar-track { width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.barchart .bar-fill { width: 56%; max-width: 32px; min-height: 2px; border-radius: 3px 3px 2px 2px; }
.barchart .bar-val {
  font-size: 10px; line-height: 14px; color: var(--muted); white-space: nowrap;
}
.barchart .bar-lbl {
  font-size: 10px; line-height: 18px; color: var(--muted); width: 100%;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 表格横向滚动容器(由 common.js 的 wrapTables() 自动包裹)。
   做法:容器负责滚动,表格本身靠 app.css/console.css 既有的 table{width:100%}。
   不要给 table 写 min-width:100% —— 百分比 min-width 会参与外层 grid 轨道的固有尺寸计算,
   把 1fr 轨道撑到表格的 min-content 宽度,窄屏上反而整页溢出。 */
.tw { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tw::-webkit-scrollbar { height: 6px; }
.tw::-webkit-scrollbar-thumb { background: #DED7D2; border-radius: 999px; }
.tw::-webkit-scrollbar-track { background: transparent; }

/* 栅格/弹性子项统一允许收缩。
   CSS 规范里 grid/flex 子项的 min-width 默认是 auto,即「不小于内容的最小宽度」;
   表格、图表这类固有宽度大的内容会把 1fr 轨道直接顶爆,窄屏整页横向溢出。
   加 min-width:0 是这一整类问题的通用解法。 */
.cols > *, .grid > *, .kpis > *, .pos-grid > * { min-width: 0; }
.panel, .panel > .body, .main, .content, .topbar > * { min-width: 0; }
.toolbar, .toolbar > * { min-width: 0; }
.toolbar { max-width: 100%; }
.row { flex-wrap: wrap; min-width: 0; }
.row > * { min-width: 0; }

/* 项目与商品:卡片化展示关键价格/库存,避免宽表在平板上挤成一团。 */
.catalog-intro { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.catalog-intro b { color: var(--ink); font-size: 17px; }
.catalog-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.catalog-search { flex-wrap: nowrap; }
.catalog-search input { width: 220px; }
.catalog-body { padding: 16px !important; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.catalog-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
.catalog-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.catalog-card-head > div { min-width: 0; }
.catalog-card h4 { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.catalog-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.catalog-desc { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.catalog-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 14px; }
.catalog-variant { min-width: 0; display: grid; gap: 4px; padding: 10px; border-radius: var(--radius-sm); background: var(--bg); font-size: 12px; }
.catalog-variant span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-variant b { color: var(--brand-dark); font-size: 16px; font-weight: 650; }
.catalog-variant small, .catalog-card-foot { color: var(--muted); font-size: 11px; }
.catalog-card-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.catalog-card-foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-kpis { padding: 0 0 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-card.is-low { border-color: var(--gold); }
.catalog-product-price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 15px; }
.catalog-product-price span, .catalog-stock small, .catalog-product-meta { color: var(--muted); font-size: 11px; }
.catalog-product-price b { color: var(--brand-dark); font-size: 22px; }
.catalog-product-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.catalog-stock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding: 10px; border-radius: var(--radius-sm); background: var(--bg); }
.catalog-stock > div { display: grid; gap: 3px; }
.catalog-stock b { font-size: 15px; }
.product-card.is-low .catalog-stock > div:first-child b { color: var(--danger); }
.catalog-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.catalog-empty { padding: 36px 16px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--muted); text-align: center; font-size: 13px; }
.schedule-shift, .schedule-shift-read { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 2px 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); text-align: left; white-space: nowrap; }
.schedule-shift { cursor: pointer; }
.schedule-shift:hover { border-color: var(--brand); background: var(--brand-soft); }
.schedule-shift small, .schedule-shift-read small { color: var(--muted); font-size: 10px; }

/* ============================================================
   响应式断点
   设计宽度基准:侧栏 208px + 内容区自适应。
   1440+ 宽松 · 1280 标准笔记本 · 1080 小笔记本/横屏平板 ·
   820 平板竖屏(侧栏收成图标条) · 640 大屏手机 · 480 手机 · 400 小屏手机
   ============================================================ */

/* 小笔记本 / 平板横屏:双栏改单栏,指标卡最小宽度收窄 */
@media (max-width: 1280px) {
  .kpis { gap: 12px; }
}
@media (max-width: 1080px) {
  .content { padding: 20px 20px 36px; }
  .cols.c2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* 平板竖屏:侧栏收成 64px 图标条 */
@media (max-width: 820px) {
  .side { width: 64px; flex: 0 0 64px; }
  .side .logo, .side nav button span.txt { display: none; }
  .side nav button { justify-content: center; padding: 12px 0; }
  .side .foot { padding: 10px 6px 0; }
  .side .foot .small { display: none; }
  /* 图标条模式下把「退出登录」压成图标按钮 —— 之前这里整块 display:none,
     导致窄屏下根本找不到退出登录的入口(真实缺陷)。 */
  .side .foot .btn { margin-top: 0; padding: 0; min-height: 40px; font-size: 0; }
  .side .foot .btn .txt { display: none; }
  .side .foot .btn .ico { display: inline; font-size: 15px; line-height: 1; }
  .content { padding: 14px; }
  .topbar { padding: 8px 14px; }
}

/* 大屏手机:顶栏换行已由 min-height 兜住,这里收紧间距与圆角 */
@media (max-width: 640px) {
  .topbar { padding: 8px 12px; }
  .topbar h2 { font-size: 15px; }
  .content { padding: 12px 12px 32px; }
  .panel > header { padding: 12px 14px; }
  .panel .body { padding: 14px; }
  .modal-body, .modal-head { padding-left: 16px; padding-right: 16px; }
  .modal-foot { padding-left: 16px; padding-right: 16px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px; }
  .kpi .value { font-size: 21px; }
  .cols { gap: 12px; }
  .toolbar select, .toolbar input { min-width: 110px; }
  .mask { padding: 10px; }
  .money.big { font-size: 22px; }
  .catalog-intro { align-items: flex-start; flex-direction: column; gap: 3px; }
  .catalog-tools { width: 100%; justify-content: flex-start; }
  .catalog-search { flex: 1; }
  .catalog-search input { flex: 1; width: auto; }
  .catalog-card { padding: 13px; }
}

/* 手机:单列到底,弹层改为底部抽屉(拇指可达) */
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .side { width: 56px; flex: 0 0 56px; }
  .side nav button { padding: 11px 0; }
  .topbar { padding: 8px 10px; }
  .topbar .toolbar { width: 100%; }
  .content { padding: 10px 10px 28px; }
  .mask { padding: 0; align-items: flex-end; }
  .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 92dvh; }
  .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .barchart .bar-lbl { font-size: 9px; }
  .legend { gap: 10px; font-size: 11px; }
}

/* 小屏手机(≤380px):进一步压缩,避免横向溢出 */
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr; }
  .content { padding: 8px 8px 26px; }
  .panel > header, .panel .body { padding: 11px 12px; }
  .modal-body, .modal-head, .modal-foot { padding-left: 12px; padding-right: 12px; }
  .btn { padding: 0 12px; font-size: 13px; }
  .badge-store { padding: 3px 8px; font-size: 11px; }
}

/* 横屏手机(高度很小):压缩纵向留白,优先保证内容可见 */
@media (max-height: 460px) and (orientation: landscape) {
  .topbar { min-height: 48px; }
  .content { padding-top: 10px; }
  .modal { max-height: 94vh; max-height: 94dvh; }
}

/* ---------- 员工头像编辑(门店与设置 → 员工) ---------- */
/* 圆形预览位。默认头像池与上传的头像都是圆形透明 PNG,直接当 background 用最省事
   (不占 <img> 的 alt/加载态,也不会因加载失败露出破图图标)。
   必须显式声明 display:inline-block —— 否则它只是普通 inline 元素,width/height 完全不生效:
   放在 flex 容器里时子项会被自动 blockify 所以看着正常,一旦放进 <td> 就会塌成 0 尺寸、
   整列空白(而接口返回的 avatarUrl 是对的,肉眼查数据根本看不出问题)。 */
.sf-av {
  display: inline-block; vertical-align: middle;
  width: 76px; height: 76px; flex: 0 0 auto; border-radius: 50%;
  background: #EFE9E4 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(60, 40, 35, .10);
}
/* 新增员工时还没有 id,服务端要等保存后才分配默认头像,这里给一个明确的占位文案 */
.sf-av.none {
  background-image: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1.35; color: var(--muted); text-align: center; padding: 0 8px;
}
/* 列表里的小尺寸变体(员工管理、排班看板) */
.sf-av.sm { width: 34px; height: 34px; }