/* ==============================================
 * 美店轻管家 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 态） === */
  --st-appt-pending:    #C9862B;  --st-appt-pending-bg:    #FFF4E2;
  --st-appt-confirmed:  #3D60D3;  --st-appt-confirmed-bg:  #EAF0FF;
  --st-appt-arrived:    #274FB8;  --st-appt-arrived-bg:    #E2E9FF;
  --st-appt-serving:    #1E866F;  --st-appt-serving-bg:    #E6F6F2;
  --st-appt-suspended:  #A96B1F;  --st-appt-suspended-bg:  #FFECCF;
  --st-appt-completed:  #20774F;  --st-appt-completed-bg:  #E4F4EA;
  --st-appt-cancelled:  #667085;  --st-appt-cancelled-bg:  #EEF1F5;
  --st-appt-no_show:    #B43E50;  --st-appt-no_show-bg:    #FBE7EB;

  /* === Status: ServiceOrder（服务单 8 态，含 PRD01 挂单 held/closed） === */
  --st-so-held:                #7A5AF8;  --st-so-held-bg:                #F0EBFF;
  --st-so-unpaid:              #C9862B;  --st-so-unpaid-bg:              #FFF4E2;
  --st-so-paid:                #2F69D6;  --st-so-paid-bg:                #EAF0FF;
  --st-so-settled:             #20774F;  --st-so-settled-bg:             #E4F4EA;
  --st-so-partially_refunded:  #B97828;  --st-so-partially_refunded-bg:  #FFF0D9;
  --st-so-refunded:            #B43E50;  --st-so-refunded-bg:            #FBE7EB;
  --st-so-cancelled:           #667085;  --st-so-cancelled-bg:           #EEF1F5;
  --st-so-closed:              #98A2B3;  --st-so-closed-bg:              #F2F4F7;

  /* === Status: CustomerCard（顾客卡项 7 态） === */
  --st-card-inactive:   #667085;  --st-card-inactive-bg:   #EEF1F5;
  --st-card-active:     #C95B75;  --st-card-active-bg:     #FFEAF0;
  --st-card-using:      #FB7B10;  --st-card-using-bg:      #FFF2E3;
  --st-card-frozen:     #C9862B;  --st-card-frozen-bg:     #FFF4E2;
  --st-card-exhausted:  #667085;  --st-card-exhausted-bg:  #EEF1F5;
  --st-card-expired:    #B43E50;  --st-card-expired-bg:    #FBE7EB;
  --st-card-refunded:   #8C8C8C;  --st-card-refunded-bg:   #F1F2F5;

  /* === Status: Refund（退款 8 态） === */
  --st-rf-pending:      #C9862B;  --st-rf-pending-bg:      #FFF4E2;
  --st-rf-approved:     #2F69D6;  --st-rf-approved-bg:     #EAF0FF;
  --st-rf-rejected:     #667085;  --st-rf-rejected-bg:     #EEF1F5;
  --st-rf-refunded:     #20774F;  --st-rf-refunded-bg:     #E4F4EA;
  --st-rf-executing:    #7A5AF8;  --st-rf-executing-bg:    #F0EBFF;
  --st-rf-succeeded:    #20774F;  --st-rf-succeeded-bg:    #E4F4EA;
  --st-rf-failed:       #B43E50;  --st-rf-failed-bg:       #FBE7EB;
  --st-rf-compensated:  #8C8C8C;  --st-rf-compensated-bg:  #F1F2F5;

  /* === 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); }

/* 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;
}
.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; }