/* 管理端(商家 / 平台)专用样式,叠加在 app.css 之上 */

/* ============================================================
   设计令牌(覆盖 app.css 的 :root)
   本文件只被 admin.html / platform.html 引用:index.html(顾客端)是 app.css + mini.css、
   login.html 只引 app.css —— 所以在这里改色不会波及顾客端与登录页。
   对比度(白底):--muted #78716C = 4.80:1,--brand #CB3658 上白字 = 4.99:1,均过 AA。
   ============================================================ */
:root {
  --brand: #CB3658;
  --brand-dark: #A82A43;
  --ink: #292524;
  --muted: #78716C;
  --bg: #F6F5F3;
  --line: #E9E5E2;
  --shadow: 0 1px 2px rgba(41, 37, 36, .04);   /* 层次靠边框和留白,不靠阴影 */
}
/* 页面底色只在后台生效 —— 登录页保持 app.css 里原来的底色 */
body { background: var(--bg); }

/* ---------- 侧栏图标:统一线性 SVG,不再是 emoji ---------- */
.nav-ico { width: 18px; height: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; }
.nav-ico svg { width: 18px; height: 18px; display: block; }

/* ---------- 顶栏:左侧标题,右侧门店 / 日期 / 通知 / 账户 ---------- */
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-store { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-store select { width: auto; min-width: 116px; height: 36px; padding: 0 8px; }
.tb-store .store-name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right #pickDate { width: 152px; min-width: 0; height: 36px; }
.bell {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 36px; height: 36px; flex: 0 0 36px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink-2);
}
.bell:hover { border-color: #D8D3CE; color: var(--ink); }
.bell svg { width: 18px; height: 18px; display: block; }
.bell .dotbadge { position: absolute; top: -5px; right: -5px; background: var(--danger); color: #fff; border-radius: 999px; font-size: 10px; padding: 0 5px; line-height: 15px; }
.userbox { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* ============================================================
   开单收银
   判据是「收银员一天要点几十次」:主操作区(明细)吃掉剩余宽度,
   结算台固定 400px 并吸附在右侧 —— 收银时鼠标在右、单手可够。
   ============================================================ */
.pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.pos-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* 结算台随页面滚动保持可见。top = 顶栏 64 + 间距 20;max-height 再扣掉上下留白,
   于是「开单并收款」在 1440×900 这一档也能落在首屏里(实测结算台整块约 798px)。 */
.pos-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; }
.pos-side::-webkit-scrollbar { width: 8px; }
.pos-side::-webkit-scrollbar-thumb { background: #DED7D2; border-radius: 999px; }

/* 面板标题行:标题与右侧操作同行,不再为一行字占一整块竖向空间 */
.pos-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pos-head h3 { font-size: 15px; }
.panel .body.tight { padding: 20px; }

/* 顾客:主入口是搜索框;选中后换成一条信息条,并给出「更换」 */
.pos-search input { height: 40px; font-size: 14px; }
/* 顾客搜索行:输入框吃掉剩余宽度,「散客开单」固定宽度不换行 —— 与「添加项目」同一套分配规则 */
.pos-search { display: flex; align-items: center; gap: 10px; }
.pos-search > input { flex: 1 1 auto; min-width: 0; }
.pos-search > .btn { flex: 0 0 auto; height: 40px; white-space: nowrap; }
/* 表单控件的禁用态:基础层只给了 `.btn:disabled`,select/input 没有,
   不补就会出现「看着能改、其实改不动」的控件(散客态的次卡/券就踩在这个上)。 */
select:disabled, input:disabled, textarea:disabled { background: #F5F3F1; color: var(--muted); cursor: not-allowed; }
.pos-cust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #FBFAF9; }
.pos-cust .bd { min-width: 0; }
/* 按钮不参与收缩,文字也不换行 —— 窄屏上它会被挤成「更 / 换」两行,很难看也很难点 */
.pos-cust > .btn { flex: 0 0 auto; white-space: nowrap; }
.pos-cust .nm { font-size: 14px; font-weight: 500; color: var(--ink); }
.pos-cust .meta { font-size: 12px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
/* 散客态:这不是错误,不用警示色;只把底色压下来一点,让「这单没有会员」一眼可辨 */
.pos-cust.walkin { background: #F3F1EE; }
.pos-cust.walkin .nm { font-weight: 400; }
.pos-hint { font-size: 12px; color: var(--muted); margin-top: 10px; }
.pos-alt { margin-top: 10px; }
.pos-alt summary { font-size: 12px; color: var(--muted); cursor: pointer; list-style: none; }
.pos-alt summary::-webkit-details-marker { display: none; }
.pos-alt summary::before { content: '＋ '; }
.pos-alt[open] summary::before { content: '－ '; }
.pos-alt .inner { margin-top: 8px; }
.pos-alt select { height: 40px; }

/* 添加项目 / 商品:两个标签页共用一行控件。
   选择框吃掉剩余宽度,数量固定窄宽,按钮固定宽度 —— 不让所有控件平均分宽。 */
.pos-tabs { display: inline-flex; gap: 4px; padding: 3px; background: #F1EFEC; border-radius: var(--radius-sm); }
.pos-tab { border: none; background: none; min-height: 34px; padding: 0 18px; border-radius: 6px; font-size: 13px; color: var(--muted); }
.pos-tab.on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(41, 37, 36, .06); }
.pos-add { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pos-add > select { flex: 1 1 auto; min-width: 0; height: 40px; }
.pos-add > input.pos-num { flex: 0 0 72px; width: 72px; height: 40px; text-align: center; padding: 0 6px; }
.pos-add > .btn { flex: 0 0 auto; min-width: 92px; height: 40px; }

/* 消费明细:本体是一张表 —— 名称左、金额右,扫一眼就能核对。
   必须用 table-layout:fixed:表格是 auto 布局时,「阶段与提成归属」那一行(colspan=6,
   里面还有 select)会把整张表的固有宽度顶大,列宽被重新分配 —— 宽屏上表现为
   前面几列挤在一起、后面几列跑到面板外。fixed 之后列宽只认表头声明。 */
.pos-table-wrap { overflow-x: auto; }
.pos-table { table-layout: fixed; min-width: 700px; width: 100%; }
/* 列宽由表头声明,不留 auto 列 —— 留一个 auto 列它会独吞剩余宽度。
   但「项目 / 商品」是唯一的 auto 列:名称长度差异最大,只能让它吃剩余空间。 */
.pos-table .c-var { width: 132px; }
.pos-table .c-unit { width: 104px; }
.pos-table .c-qty { width: 92px; }
.pos-table .c-sum { width: 112px; }
.pos-table .c-op { width: 72px; }
/* 收银台仍有右侧结算栏，不能按整个窗口宽度扩大固定列，挤掉项目名称。 */
.pos-table th { padding: 10px 12px; white-space: nowrap; }
.pos-table th.r, .pos-table td.r { text-align: right; }
.pos-table td { padding: 15px 12px; }
.pos-table .nm { font-weight: 500; }
.pos-table .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.pos-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-table .op { text-align: right; white-space: nowrap; }
/* 删除是次要操作:常态用弱色,悬停才提示危险,别让每行都挂一个抢眼的红按钮 */
.pos-table .op .btn.link { color: var(--muted); }
.pos-table .op .btn.link:hover { color: var(--danger); }
.pos-table tr.assign > td { padding: 4px 12px 12px; background: #FCFBFA; }
.pos-table tbody tr:hover { background: #FCFBFA; }
.pos-num-input { width: 64px; height: 34px; text-align: center; padding: 0 6px; }

.pos-empty { min-height: 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font-size: 13px; padding: 20px; }
.pos-empty svg { width: 34px; height: 34px; opacity: .4; }

/* 当日订单:属于查询与补收款,移到左侧明细下方;订单多了只让这块滚,不撑长整页 */
.pos-orders { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.pos-orders table td { padding: 11px 12px; }

/* ---------- 结算台(结算 + 收款合并成一张卡,靠留白与细分隔线分组) ---------- */
/* 结算台整块要能在 1440×900 的首屏里放完(含最下面的收款按钮),
   所以这里每一项都按「够看、不浪费」收紧,而不是靠滚动兜底。 */
.st-rows { display: flex; flex-direction: column; }
.st-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 13px; }
.st-row > span { color: var(--muted); }
.st-row > b { font-weight: 500; font-variant-numeric: tabular-nums; }
.st-sec { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-grid2 label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.st-grid2 select, .st-grid2 input { width: 100%; height: 40px; }
/* 人工优惠与「试算金额」同行:试算是次要动作,不必独占一整行 */
.st-manual { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.st-manual .fm { flex: 1 1 auto; min-width: 0; }
.st-manual label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.st-manual input { width: 100%; height: 40px; }
.st-manual .btn { flex: 0 0 auto; height: 40px; }
.st-tip { font-size: 12px; color: var(--muted); margin-top: 6px; }
.st-disabled { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* 应收金额:整个结算区最突出的信息 */
.st-pay { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.st-pay .lb { font-size: 12px; color: var(--muted); }
.st-pay .val { font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -1px;
  font-variant-numeric: tabular-nums; color: var(--ink); }
.st-pay .val.pending { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--muted); }

/* 收款方式:整齐两列网格,选项等高 —— 不用大小不一的胶囊 */
.paychannel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.paychannel .chip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; min-height: 38px; padding: 0 10px; border-radius: var(--radius-sm);
  background: #fff; font-size: 13px; text-align: center;
}
.paychannel .chip:hover { border-color: #D8D3CE; }
/* 禁用态必须自己画:`.chip` 是 button 而不是 `.btn`,吃不到 `.btn:disabled` 那条规则,
   不补的话「会员余额」在散客态下看上去仍然可点,点了却没反应 —— 最糟的一种交互。 */
.paychannel .chip:disabled { opacity: .42; cursor: not-allowed; background: #FAF9F7; }
.paychannel .chip:disabled:hover { border-color: var(--line); }
.paychannel .chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 500; }
/* 勾选用 CSS 画,不依赖字体里有没有那个字形 */
.paychannel .chip.on::after { content: ''; width: 5px; height: 9px; border: solid var(--brand); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -2px); }

.settle .btn-pay { width: 100%; height: 48px; min-height: 48px; font-size: 15px; margin-top: 12px; }
.settle .btn-draft { width: 100%; height: 42px; min-height: 42px; margin-top: 6px; background: #fff; }
.settle .st-note { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* ---------- 服务人员指派(收银台明细行 + 服务中列表) ---------- */
/* 未指派的阶段不计提成,必须一眼能看见 —— 用品牌色描边而不是只靠文字提示 */
.assign-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; margin-bottom: 6px; align-items: center; }
.assign-row select { height: 36px; }
select.need { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.tag-miss { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px;
  border-radius: 999px; font-size: 11px; background: var(--danger-soft); color: var(--danger); }
.tag-done { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px;
  border-radius: 999px; font-size: 11px; background: #EAF6EE; color: #2F7A4A; }

/* ---------- 收银台顾客搜索(手机尾号) ---------- */
.cust-list { display: flex; flex-direction: column; gap: 6px; }
.cust-item { display: grid; grid-template-columns: auto auto; gap: 2px 10px; justify-content: start;
  width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.cust-item:hover { border-color: var(--brand); background: #FFFDFB; }
.cust-item.on { border-color: var(--brand); background: var(--brand-soft); }
.cust-item .nm { font-size: 14px; font-weight: 600; }
.cust-item .ph { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; align-self: center; }
.cust-item .meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.cust-item mark { background: var(--gold-soft); color: inherit; padding: 0 1px; border-radius: 3px; font-weight: 600; }
/* 窄屏上姓名与手机号分两行,避免长姓名把手机号挤出去 */
@media (max-width: 480px) { .cust-item { grid-template-columns: 1fr; } }

/* ---------- 「服务中」列表:窄屏改竖排卡片 ---------- */
/* 这是「操作密集型」页面 —— 全部意义就在于点「开始服务 / 录入服务人员 / 收款」。
   若沿用管理端通用的「表格塞进 .tw 横向滚」兜底,窄屏下最该点的那两列正好在滚动区外,
   得先横向拖动才能操作。所以这里破一次例:不滚动,改成一行一张竖排卡片。
   表格本身仍被 .tw 包裹(结构断言与其它页保持一致),只是内容不再溢出、滚动无事可做。 */
@media (max-width: 640px) {
  .svc-table thead { display: none; }
  .svc-table tbody tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .svc-table tbody tr:hover { background: transparent; }
  .svc-table td { display: block; padding: 1px 0; border: none; }
  .svc-table td[data-l]::before {
    content: attr(data-l) ' '; display: inline-block; min-width: 52px;
    color: var(--muted); font-size: 12px;
  }
  .svc-table td.ops { margin-top: 7px; }
  .svc-table td.money { font-size: 15px; }
}

.drawer-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.drawer-tabs .chip { cursor: pointer; }
.grid.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.grid.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .grid.g2, .grid.g3 { grid-template-columns: 1fr; } }
.field { margin-bottom: 8px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
/* 上面那条规则本意是让文本框撑满一行,但它会连复选框/单选框一起命中,
   把它们撑成 100% 宽 + 40px 高的色块 —— 在「所属门店」「适用项目」这类多选行里,
   还会因为 .row 允许换行而把旁边的文字挤到下一行。这里把勾选类控件还原成固定小尺寸。 */
.field input[type="checkbox"], .field input[type="radio"] {
  width: 16px; height: 16px; min-height: 0; flex: 0 0 auto;
  padding: 0; margin: 0; accent-color: var(--brand); cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.field input[readonly] { background: #F5F5F4; color: var(--muted); }
.sec-title { font-size: 13px; font-weight: 600; margin: 10px 0 6px; }
table { width: 100%; border-collapse: collapse; }
table th, table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table th { font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; }
table tbody tr:hover { background: #FCFCFB; }
.login-card .quick .chip { cursor: pointer; }

/* ---------- 管理端响应式补充 ---------- */
@media (max-width: 820px) {
  /* 顶栏在图标条模式下不再有空间放「姓名 · 角色」,只留头像 */
  .userbox > .small { display: none; }
}
/* 收银台两列的临界宽度:侧栏 184 + 内容内边距 48 + 左列最小 700 + 间距 20 + 右列 400 = 1352。
   低于它就改上下布局,不硬挤两列。 */
@media (max-width: 1360px) {
  .pos-grid { grid-template-columns: 1fr; }
  .pos-side { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
  .assign-row { grid-template-columns: 1fr; gap: 4px; }
  .drawer-tabs { gap: 5px; }
  .pos-add { flex-wrap: wrap; }
  .pos-add > select { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .paychannel { grid-template-columns: 1fr; }
  .pos-grid { gap: 14px; }
  .pos-col { gap: 14px; }
  .st-grid2 { grid-template-columns: 1fr; }
  .st-pay .val { font-size: 28px; }
}

/* ---------- 员工头像编辑(门店与设置 → 员工) ---------- */
/* 圆形预览位。默认头像池与上传的头像都是圆形透明 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; }

/* 员工功能授权：宽屏两列，平板窄屏单列。 */
.account-permissions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 20px}
.account-permissions section {background:var(--bg,#faf8f5);border-radius:12px;padding:16px;min-width:0}
.account-permissions section>div {display:grid;gap:10px;margin-top:12px}
.account-permissions label {display:flex;align-items:flex-start;gap:8px;font-size:13px;cursor:pointer}
.account-permissions input {flex:none;width:16px;height:16px;margin:2px 0;accent-color:var(--primary,#ff8800)}
@media(max-width:640px){.account-permissions{grid-template-columns:1fr}}

/* 状态标签保持完整；概览订单在空间不足时于表格内部横向滚动。 */
.tag {white-space:nowrap;flex-shrink:0;min-height:22px;height:auto;line-height:22px}
.overview-orders {min-width:520px;table-layout:auto}
.overview-orders th,.overview-orders td {white-space:nowrap;padding:12px}
.overview-orders td:nth-child(2) {font-variant-numeric:tabular-nums}

.cols.c2.overview-detail-grid {grid-template-columns:minmax(260px,0.85fr) minmax(520px,1.15fr)}
@media(max-width:1180px){.cols.c2.overview-detail-grid{grid-template-columns:minmax(0,1fr)}}

/* 排班姓名列固定宽度，横向查看日期时保留员工身份。 */
.schedule-board {width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}
.schedule-board th,.schedule-board td {min-width:144px;white-space:nowrap;padding:12px}
.schedule-board th:first-child,.schedule-board td:first-child {position:sticky;left:0;z-index:2;min-width:120px;width:120px;background:#fff;box-sizing:border-box;box-shadow:1px 0 0 var(--line)}
.schedule-board td:first-child {font-weight:500}
.schedule-board td:first-child .small {margin-top:5px;font-weight:400}
.schedule-board tbody tr:hover td:first-child {background:#fcfcfb}