/* ==============================================
 * 美店轻管家 admin · Spec Tokens（按 backend-spec §5 / §7 扩展）
 *
 * 在 theme.css 的 firepos 橙体系基础上，补齐：
 *  - 三套状态机颜色（appointment / serviceOrder / customerCard）
 *  - 业绩归属（main / assistant / recommender）
 *  - 双桶钱包语义色（principal / gift）
 *  - 业务源（admin / miniapp / pos / technician / boss / system / webhook）
 *  - 间距 / 阴影 / radius 扩展令牌
 *
 * 命名约定：--st-<entity>-<status> = 主色； --st-<entity>-<status>-bg = 浅底
 * ============================================== */

:root {
  /* === Semantic（覆盖 theme.css，宝石对比版） === */
  --color-success: #1E866F;
  --color-warning: #C9862B;
  --color-danger: #BB4052;
  --color-info: #3D60D3;

  /* === Status: Appointment（预约 8 态 · 三端统一语义色，见 docs/status-color-system.md） === */
  --st-appt-pending:    #D97706;  --st-appt-pending-bg:    #FFF4E1;
  --st-appt-confirmed:  #2F6FED;  --st-appt-confirmed-bg:  #E8F0FE;
  --st-appt-arrived:    #0E9384;  --st-appt-arrived-bg:    #E0F5F2;
  --st-appt-serving:    #7A5AF8;  --st-appt-serving-bg:    #F0EBFF;
  --st-appt-suspended:  #D97706;  --st-appt-suspended-bg:  #FFF4E1;
  --st-appt-completed:  #16A34A;  --st-appt-completed-bg:  #E7F6EC;
  --st-appt-cancelled:  #667085;  --st-appt-cancelled-bg:  #F2F4F7;
  --st-appt-no_show:    #DC2626;  --st-appt-no_show-bg:    #FEE4E4;

  /* === Status: ServiceOrder（服务单 8 态，含 PRD01 挂单 held/closed） === */
  --st-so-held:                #7A5AF8;  --st-so-held-bg:                #F0EBFF;
  --st-so-unpaid:              #D97706;  --st-so-unpaid-bg:              #FFF4E1;
  --st-so-paid:                #2F6FED;  --st-so-paid-bg:                #E8F0FE;
  --st-so-settled:             #16A34A;  --st-so-settled-bg:             #E7F6EC;
  --st-so-partially_refunded:  #D97706;  --st-so-partially_refunded-bg:  #FFF4E1;
  --st-so-refunded:            #DC2626;  --st-so-refunded-bg:            #FEE4E4;
  --st-so-cancelled:           #667085;  --st-so-cancelled-bg:           #F2F4F7;
  --st-so-closed:              #667085;  --st-so-closed-bg:              #F2F4F7;

  /* === Status: CustomerCard（顾客卡项 7 态） === */
  --st-card-inactive:   #667085;  --st-card-inactive-bg:   #F2F4F7;
  --st-card-active:     #16A34A;  --st-card-active-bg:     #E7F6EC;
  --st-card-using:      #2F6FED;  --st-card-using-bg:      #E8F0FE;
  --st-card-frozen:     #0E9384;  --st-card-frozen-bg:     #E0F5F2;
  --st-card-exhausted:  #667085;  --st-card-exhausted-bg:  #F2F4F7;
  --st-card-expired:    #DC2626;  --st-card-expired-bg:    #FEE4E4;
  --st-card-refunded:   #667085;  --st-card-refunded-bg:   #F2F4F7;

  /* === Status: Refund（退款 8 态 · 统一语义色） === */
  --st-rf-pending:      #D97706;  --st-rf-pending-bg:      #FFF4E1;
  --st-rf-approved:     #2F6FED;  --st-rf-approved-bg:     #E8F0FE;
  --st-rf-rejected:     #667085;  --st-rf-rejected-bg:     #F2F4F7;
  --st-rf-refunded:     #16A34A;  --st-rf-refunded-bg:     #E7F6EC;
  --st-rf-executing:    #7A5AF8;  --st-rf-executing-bg:    #F0EBFF;
  --st-rf-succeeded:    #16A34A;  --st-rf-succeeded-bg:    #E7F6EC;
  --st-rf-failed:       #DC2626;  --st-rf-failed-bg:       #FEE4E4;
  --st-rf-compensated:  #667085;  --st-rf-compensated-bg:  #F2F4F7;

  /* === Commission attribution（业绩归属 3 类） === */
  --st-attr-main:         #FB7B10;  --st-attr-main-bg:         #FFF2E3;
  --st-attr-assistant:    #3D60D3;  --st-attr-assistant-bg:    #EAF0FF;
  --st-attr-recommender:  #1E866F;  --st-attr-recommender-bg:  #E6F6F2;

  /* === Workstation（工位 4 态） === */
  --st-ws-available:  #20774F;  --st-ws-available-bg:  #E4F4EA;
  --st-ws-occupied:   #3D60D3;  --st-ws-occupied-bg:   #EAF0FF;
  --st-ws-cleaning:   #C9862B;  --st-ws-cleaning-bg:   #FFF4E2;
  --st-ws-broken:     #B43E50;  --st-ws-broken-bg:     #FBE7EB;

  /* === Wallet（双桶语义） === */
  --st-wallet-principal:  #3D60D3;  --st-wallet-principal-bg:  #EAF0FF;
  --st-wallet-gift:       #C95B75;  --st-wallet-gift-bg:       #FFEAF0;

  /* === Source（业务源 7 值） === */
  --st-src-admin:       #FB7B10;
  --st-src-miniapp:     #1E866F;
  --st-src-pos:         #3D60D3;
  --st-src-technician:  #7A5FD4;
  --st-src-boss:        #C95B75;
  --st-src-system:      #667085;
  --st-src-webhook:     #A56A31;

  /* === 扩展间距 / radius 令牌（在 theme.css 已有 sm/md/lg 基础上补齐） === */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  --radius-pill: 999px;

  /* === 数字阶梯（与字号阶梯独立，用于经营数字） === */
  --num-kpi: 28px;
  --num-stat: 20px;
  --num-inline: 14px;
}

/* ==============================================
 * 通用 fp-tag 派生：每个状态一条 class，复用同一组样式块
 * ============================================== */
.md-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--bg-gray-100);
  color: var(--text-regular);
}

.md-tag.is-pill { border-radius: var(--radius-pill); padding: 2px 10px; }

/* appointment */
.md-tag.appt-pending    { color: var(--st-appt-pending);    background: var(--st-appt-pending-bg); }
.md-tag.appt-confirmed  { color: var(--st-appt-confirmed);  background: var(--st-appt-confirmed-bg); }
.md-tag.appt-arrived    { color: var(--st-appt-arrived);    background: var(--st-appt-arrived-bg); }
.md-tag.appt-serving    { color: var(--st-appt-serving);    background: var(--st-appt-serving-bg); }
.md-tag.appt-suspended  { color: var(--st-appt-suspended);  background: var(--st-appt-suspended-bg); }
.md-tag.appt-completed  { color: var(--st-appt-completed);  background: var(--st-appt-completed-bg); }
.md-tag.appt-cancelled  { color: var(--st-appt-cancelled);  background: var(--st-appt-cancelled-bg); }
.md-tag.appt-no_show    { color: var(--st-appt-no_show);    background: var(--st-appt-no_show-bg); }

/* serviceOrder */
.md-tag.so-unpaid              { color: var(--st-so-unpaid);              background: var(--st-so-unpaid-bg); }
.md-tag.so-paid                { color: var(--st-so-paid);                background: var(--st-so-paid-bg); }
.md-tag.so-settled             { color: var(--st-so-settled);             background: var(--st-so-settled-bg); }
.md-tag.so-partially_refunded  { color: var(--st-so-partially_refunded);  background: var(--st-so-partially_refunded-bg); }
.md-tag.so-refunded            { color: var(--st-so-refunded);            background: var(--st-so-refunded-bg); }
.md-tag.so-cancelled           { color: var(--st-so-cancelled);           background: var(--st-so-cancelled-bg); }
.md-tag.so-held                { color: var(--st-so-held);                background: var(--st-so-held-bg); }
.md-tag.so-closed              { color: var(--st-so-closed);              background: var(--st-so-closed-bg); }

/* customerCard */
.md-tag.card-inactive   { color: var(--st-card-inactive);   background: var(--st-card-inactive-bg); }
.md-tag.card-active     { color: var(--st-card-active);     background: var(--st-card-active-bg); }
.md-tag.card-using      { color: var(--st-card-using);      background: var(--st-card-using-bg); }
.md-tag.card-frozen     { color: var(--st-card-frozen);     background: var(--st-card-frozen-bg); }
.md-tag.card-exhausted  { color: var(--st-card-exhausted);  background: var(--st-card-exhausted-bg); }
.md-tag.card-expired    { color: var(--st-card-expired);    background: var(--st-card-expired-bg); }
.md-tag.card-refunded   { color: var(--st-card-refunded);   background: var(--st-card-refunded-bg); }

/* refund */
.md-tag.rf-pending      { color: var(--st-rf-pending);      background: var(--st-rf-pending-bg); }
.md-tag.rf-approved     { color: var(--st-rf-approved);     background: var(--st-rf-approved-bg); }
.md-tag.rf-rejected     { color: var(--st-rf-rejected);     background: var(--st-rf-rejected-bg); }
.md-tag.rf-refunded     { color: var(--st-rf-refunded);     background: var(--st-rf-refunded-bg); }
.md-tag.rf-executing    { color: var(--st-rf-executing);    background: var(--st-rf-executing-bg); }
.md-tag.rf-succeeded    { color: var(--st-rf-succeeded);    background: var(--st-rf-succeeded-bg); }
.md-tag.rf-failed       { color: var(--st-rf-failed);       background: var(--st-rf-failed-bg); }
.md-tag.rf-compensated  { color: var(--st-rf-compensated);  background: var(--st-rf-compensated-bg); }

/* attribution */
.md-tag.attr-main         { color: var(--st-attr-main);         background: var(--st-attr-main-bg); }
.md-tag.attr-assistant    { color: var(--st-attr-assistant);    background: var(--st-attr-assistant-bg); }
.md-tag.attr-recommender  { color: var(--st-attr-recommender);  background: var(--st-attr-recommender-bg); }

/* workstation */
.md-tag.ws-available  { color: var(--st-ws-available);  background: var(--st-ws-available-bg); }
.md-tag.ws-occupied   { color: var(--st-ws-occupied);   background: var(--st-ws-occupied-bg); }
.md-tag.ws-cleaning   { color: var(--st-ws-cleaning);   background: var(--st-ws-cleaning-bg); }
.md-tag.ws-broken     { color: var(--st-ws-broken);     background: var(--st-ws-broken-bg); }

/* aiAction（AI 执行记录，W4 收敛页面手写映射；tone 复用统一语义色：琥珀=待定 蓝=进行 绿=终态好 红=终态坏 灰=取消） */
.md-tag.aiact-proposed  { color: var(--st-appt-pending);    background: var(--st-appt-pending-bg); }
.md-tag.aiact-executed  { color: var(--st-appt-completed);  background: var(--st-appt-completed-bg); }
.md-tag.aiact-failed    { color: var(--st-appt-no_show);    background: var(--st-appt-no_show-bg); }
.md-tag.aiact-rejected  { color: var(--st-appt-cancelled);  background: var(--st-appt-cancelled-bg); }
.md-tag.aiact-blocked   { color: var(--st-appt-no_show);    background: var(--st-appt-no_show-bg); }

/* commissionStatement（提成对账单 4 态） */
.md-tag.cst-pending    { color: var(--st-appt-pending);    background: var(--st-appt-pending-bg); }
.md-tag.cst-confirmed  { color: var(--st-appt-confirmed);  background: var(--st-appt-confirmed-bg); }
.md-tag.cst-paid       { color: var(--st-so-settled);      background: var(--st-so-settled-bg); }
.md-tag.cst-disputed   { color: var(--st-so-refunded);     background: var(--st-so-refunded-bg); }

/* segment（客群 draft/active/archived） */
.md-tag.seg-draft     { color: var(--st-appt-pending);    background: var(--st-appt-pending-bg); }
.md-tag.seg-active    { color: var(--st-appt-completed);  background: var(--st-appt-completed-bg); }
.md-tag.seg-archived  { color: var(--st-appt-cancelled);  background: var(--st-appt-cancelled-bg); }

/* settlementBill（W3 门店结算单 5 态；语义对齐 docs/status-color-system.md：
   待确认=琥珀 / 已确认待打款=蓝 / 已结清=绿 / 已驳回=红 / 已撤销=灰） */
.md-tag.sb-applied    { color: var(--st-appt-pending);    background: var(--st-appt-pending-bg); }
.md-tag.sb-confirmed  { color: var(--st-appt-confirmed);  background: var(--st-appt-confirmed-bg); }
.md-tag.sb-paid       { color: var(--st-so-settled);      background: var(--st-so-settled-bg); }
.md-tag.sb-rejected   { color: var(--st-so-refunded);     background: var(--st-so-refunded-bg); }
.md-tag.sb-cancelled  { color: var(--st-appt-cancelled);  background: var(--st-appt-cancelled-bg); }

/* shipment（物流三态；语义对齐 docs/status-color-system.md：
   待发货=琥珀待处理 / 已发货=蓝进行中 / 已收货=绿完成） */
.md-tag.ship-pending_ship  { color: var(--st-appt-pending);    background: var(--st-appt-pending-bg); }
.md-tag.ship-shipped       { color: var(--st-so-paid);         background: var(--st-so-paid-bg); }
.md-tag.ship-received      { color: var(--st-so-settled);      background: var(--st-so-settled-bg); }

/* source（小圆点） */
.md-source-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.md-source-dot.admin       { background: var(--st-src-admin); }
.md-source-dot.miniapp     { background: var(--st-src-miniapp); }
.md-source-dot.pos         { background: var(--st-src-pos); }
.md-source-dot.technician  { background: var(--st-src-technician); }
.md-source-dot.boss        { background: var(--st-src-boss); }
.md-source-dot.system      { background: var(--st-src-system); }
.md-source-dot.webhook     { background: var(--st-src-webhook); }

/* ==============================================
 * KPI 卡 / Section Bar / Wallet 等可复用组件基础样式
 * ============================================== */

.md-kpi-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  border: 1px solid var(--border-lighter);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.md-kpi-card .md-kpi-label {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* KPI 图标：承载 ElementPlusIconsVue SVG 组件（icon="UserFilled"），禁 emoji */
.md-kpi-card .md-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--brand-primary);
  flex: none;
}
.md-kpi-card .md-kpi-icon svg { width: 100%; height: 100%; }
.md-kpi-card .md-kpi-value {
  font-size: var(--num-kpi);
  font-weight: 800;
  color: var(--text-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.md-kpi-card .md-kpi-delta {
  font-size: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.md-kpi-card .md-kpi-delta.up   { color: var(--st-appt-completed); }
.md-kpi-card .md-kpi-delta.down { color: var(--st-appt-no_show); }
.md-kpi-card .md-kpi-foot {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.md-section-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-ink);
}
.md-section-bar::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--brand-primary);
  border-radius: 2px;
}
.md-section-bar .md-section-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* 双桶钱包 */
.md-wallet {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius-lg);
}
.md-wallet-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.md-wallet-total .md-wallet-total-label { font-size: 13px; color: var(--text-secondary); }
.md-wallet-total .md-wallet-total-value { font-size: 24px; font-weight: 800; color: var(--text-ink); font-variant-numeric: tabular-nums; }
.md-wallet-bar {
  position: relative;
  height: 14px;
  background: var(--bg-gray-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: flex;
}
.md-wallet-bar .md-wallet-bar-principal {
  background: var(--st-wallet-principal);
  height: 100%;
}
.md-wallet-bar .md-wallet-bar-gift {
  background: var(--st-wallet-gift);
  height: 100%;
}
.md-wallet-legend {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-secondary);
}
.md-wallet-legend .md-wallet-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.md-wallet-legend .md-wallet-legend-dot.principal { background: var(--st-wallet-principal); }
.md-wallet-legend .md-wallet-legend-dot.gift      { background: var(--st-wallet-gift); }
.md-wallet-legend .md-wallet-legend-value {
  color: var(--text-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 状态机流转图 */
.md-state-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius-lg);
  font-size: 13px;
}
.md-state-flow .md-state-arrow {
  color: var(--text-placeholder);
  font-size: 16px;
  font-weight: 400;
  margin: 0 2px;
}
.md-state-flow .md-state-side {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px dashed var(--border-base);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Token swatch（设计规范页用） */
.md-swatch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-lighter);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 12px;
}
.md-swatch-chip {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.04);
}
.md-swatch-name { color: var(--text-ink); font-weight: 600; }
.md-swatch-hex  { color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* 金额格子 */
.md-money {
  font-variant-numeric: tabular-nums;
  color: var(--text-ink);
  font-weight: 700;
}
.md-money .md-money-prefix { color: var(--text-secondary); font-weight: 500; margin-right: 2px; }
.md-money.is-strike { color: var(--text-placeholder); text-decoration: line-through; font-weight: 400; }
.md-money.is-large { font-size: 24px; }
.md-money.is-inline { font-size: 14px; }