/* ==========================================================================
   业务模块高保真组件样式 (前台·医生·主管·系统管理员)
   字重细化：谨慎使用粗体，注释/副标题采用细体，突出主次层级
   ========================================================================== */

/* --------------------------------------------------------------------------
   通用业务栅格与卡片
   -------------------------------------------------------------------------- */
.grid-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.grid-three-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* 核心指标统计大卡片 (参考图 Stats / Visitors 风格) */
.stat-metric-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 24px 26px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  box-shadow: var(--shadow-card);
}

.stat-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.stat-metric-value {
  font-size: var(--font-hero);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

.stat-metric-value.highlight-gold {
  color: var(--accent-gold);
}

.stat-metric-value.highlight-herb {
  color: var(--herb-green);
}

.stat-metric-value.highlight-sky {
  color: var(--sky-azure);
}

.stat-metric-value.highlight-carmine {
  color: var(--carmine-red);
}

.stat-metric-subtext {
  font-size: 13px;
  font-weight: var(--weight-thin);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   前台模块组件
   -------------------------------------------------------------------------- */
.hall-stat-overview {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}

.hall-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  min-width: 90px;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}

.hall-stat-item:hover {
  background: var(--bg-card-subtle);
}

.hall-stat-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
}

.hall-stat-val {
  font-size: var(--font-xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.hall-stat-val small {
  font-size: var(--font-xs);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.hall-stat-val.text-sky { color: var(--sky-azure); }
.hall-stat-val.text-herb { color: var(--herb-green); }
.hall-stat-item.highlight .hall-stat-val { color: var(--accent-gold); }

.hall-stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.hall-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.hall-list-grid > .card-section-hero {
  min-width: 0;
}

/* 待结账单大卡片 (点击呼出右侧深色收银抽屉) */
.bill-interactive-card {
  font: inherit;
  text-align: left;
  background-color: #FFFFFF;
  border: 1.5px solid var(--accent-gold);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(245, 185, 99, 0.12);
  transition: all var(--transition-smooth);
}

.bill-interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 185, 99, 0.18);
}

.bill-info-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bill-patient-name {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  display: flex;
  align-items: center;
  gap: 10px;
}

.bill-meta-tag {
  font-size: 12px;
  background-color: var(--bg-card-subtle);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
}

.bill-item-summary {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.bill-amount-badge {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  color: var(--accent-gold);
  font-variant-numeric: tabular-nums;
}

/* 客户档案卡片 (网格流) */
.customer-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.customer-entity-card {
  font: inherit;
  text-align: left;
  background-color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 22px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-entity-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.customer-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.customer-name-bold {
  font-size: 17px;
  font-weight: var(--weight-semibold);
}

.customer-assets-summary {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

.customer-assets-summary strong {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.asset-val-gold {
  color: var(--accent-gold);
  font-weight: var(--weight-semibold);
}

.asset-val-herb {
  color: var(--herb-green);
  font-weight: var(--weight-semibold);
}

.asset-val-sky {
  color: var(--sky-azure);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   医生工作台组件
   -------------------------------------------------------------------------- */
/* 当前接诊中客户卡片 */
.consulting-patient-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-hero);
  padding: 24px 28px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.allergy-warning-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--alert-red-light);
  color: var(--alert-red);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--weight-medium);
}

/* 中医四诊大标签选择器 */
.tcm-chips-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}

.tcm-chip-btn {
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-card-subtle);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--weight-regular);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.tcm-chip-btn.active {
  background-color: var(--text-primary);
  color: #FFFFFF;
  border-color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* 双轨结算区块 */
.dual-settle-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 8px;
}

.settle-option-card {
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-xl);
  padding: 22px;
  border: 1.5px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.settle-option-card.card-highlight {
  border-color: var(--accent-gold);
  background-color: #FFFFFF;
  box-shadow: 0 4px 18px rgba(245, 185, 99, 0.1);
}

/* 预约中心：日列表、预约表单与按时间轴排列的周视图 */
.appointment-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.appointment-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.appointment-date-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 4px rgba(28, 30, 29, 0.03);
}

.appointment-date-title {
  font-size: var(--font-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  padding: 0 8px;
  min-width: 170px;
  text-align: center;
  letter-spacing: 0.2px;
}

.appointment-nav-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-smooth);
  padding: 0;
}

.appointment-nav-btn:hover {
  background: var(--bg-menu-hover);
  color: var(--text-primary);
}

.appointment-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.appointment-page-header {
  display: block;
  height: auto;
  min-height: var(--title-bar-height);
}

.appointment-page-subtitle {
  color: var(--text-muted);
  font-size: var(--font-sm);
  margin: 6px 0 0;
}

.appointment-create-btn {
  white-space: nowrap;
}

.appointment-toolbar .seg-group,
.appointment-toolbar .btn-sm,
.appointment-toolbar .field-date,
.appointment-toolbar .field-select,
.appointment-toolbar .appointment-create-btn {
  flex: 0 0 auto;
}

.appointment-toolbar .field-select {
  width: 124px;
  padding-left: 12px;
  padding-right: 28px;
}

.appointment-toolbar .field-date {
  width: 136px;
}

/* 快速状态筛选胶囊条 */
.appointment-stat-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.appointment-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  font-size: var(--font-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.appointment-stat-pill:hover,
.appointment-stat-pill.active {
  background: var(--accent-gold-light);
  border-color: var(--accent-gold);
  color: #6B4310;
  font-weight: var(--weight-medium);
}

.appointment-stat-pill .count {
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.05);
  font-size: 11px;
  font-weight: var(--weight-semibold);
}

.appointment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.appointment-table-head {
  display: grid;
  grid-template-columns: 110px 1.5fr 1fr 1fr 110px 160px;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}

.appointment-row {
  display: grid;
  grid-template-columns: 110px 1.5fr 1fr 1fr 110px 160px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card-subtle);
  border: 1px solid transparent;
  transition: var(--transition-smooth);
}

.appointment-row:hover {
  background: #FFFFFF;
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.appointment-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card-subtle);
}

.appointment-cust-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.appointment-cust-phone {
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-family: inherit;
}

.appointment-danger-btn {
  color: var(--carmine-red);
  border: 1px solid transparent;
  background: transparent;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.appointment-danger-btn:hover {
  background: var(--carmine-red-light);
  border-color: var(--carmine-red-border);
}

@media (max-width: 1100px) {
  .hall-list-grid {
    gap: 14px;
  }

  .hall-list-grid .bill-interactive-card {
    padding: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hall-list-grid .bill-interactive-card > .bill-info-left {
    width: 100%;
  }

  .hall-list-grid .bill-interactive-card > .row-inline {
    width: 100%;
    justify-content: space-between;
  }

  .hall-list-grid .appointment-summary-row {
    padding: 12px;
  }

  .appointment-toolbar {
    gap: 12px;
  }

  .appointment-toolbar-left,
  .appointment-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  .appointment-table-head,
  .appointment-row {
    grid-template-columns: 95px 1.4fr 1fr 1fr 95px 145px;
    gap: 10px;
    padding: 12px 14px;
  }
}

@media (max-width: 768px) {
  .appointment-table-head {
    display: none;
  }

  .appointment-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
  }

  .appointment-row > .appointment-actions {
    justify-content: flex-start;
    margin-top: 6px;
  }

  .appointment-date-title {
    min-width: 140px;
    font-size: var(--font-sm);
  }
}

@media (max-width: 680px) {
  .hall-list-grid {
    grid-template-columns: 1fr;
  }
}

.appointment-time {
  font-size: 20px;
  font-weight: var(--weight-semibold);
}

.appointment-time small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: var(--weight-regular);
}

.appointment-note {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 13px;
}

.appointment-note-banner {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  max-width: 760px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-gold-light);
  color: var(--drawer-accent);
  font-size: 13px;
}

.appointment-actions {
  justify-content: flex-end;
}

.appointment-calendar {
  overflow: auto;
  padding: 18px;
}

.appointment-calendar > .section-head {
  display: none;
}

.week-calendar-grid {
  display: grid;
  grid-template-columns: 66px repeat(7, minmax(118px, 1fr));
  grid-template-rows: 52px 702px;
  min-width: 900px;
  overflow: visible;
}

@media (max-width: 900px) {
  .appointment-create-btn { margin-left: 0; }
}

.calendar-corner,
.calendar-day-head {
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  padding: 10px 6px;
  text-align: center;
  background: var(--bg-card);
}

.calendar-day-head strong,
.calendar-day-head small {
  display: block;
}

.calendar-day-head strong {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.calendar-day-head small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--font-xs);
}

/* 优雅的今日高亮：温润东方雅致，杜绝死黑 */
.calendar-day-head.today {
  background: var(--accent-gold-light);
  border-bottom-color: var(--accent-gold-border);
}

.calendar-day-head.today strong {
  color: var(--drawer-accent);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.calendar-day-head.today strong::after {
  content: '今';
  display: inline-block;
  font-size: 11px;
  line-height: 15px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--accent-gold);
  color: #FFFFFF;
  font-weight: var(--weight-medium);
}

.calendar-day-head.today small {
  color: var(--drawer-accent);
  font-weight: var(--weight-medium);
}

.calendar-time-axis {
  position: relative;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-card-subtle);
}

.calendar-time-axis span {
  position: absolute;
  right: 8px;
  transform: translateY(-8px);
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.calendar-time-axis .calendar-end-time {
  top: 701px;
}

.calendar-day-column {
  position: relative;
  border-right: 1px solid var(--border-subtle);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 26px, rgba(234, 229, 219, 0.45) 27px, transparent 28px, transparent 53px, var(--border-subtle) 54px);
}

.calendar-now-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--carmine-red);
  z-index: 8;
  pointer-events: none;
}

.calendar-now-indicator::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--carmine-red);
  box-shadow: 0 0 0 2px #FFFFFF;
}

/* 预约块：精致圆角矩形卡片 */
.appointment-block {
  position: absolute;
  overflow: hidden;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  border-left-width: 3.5px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(28, 30, 29, 0.05);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.appointment-block:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(28, 30, 29, 0.12);
  z-index: 10;
}

.appointment-block strong {
  display: block;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  line-height: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-block small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 4 种状态的优雅配色 */
/* 1. 预约中 APPOINTED - 暖姜杏金 */
.appointment-block.status-appointed {
  border-color: var(--accent-gold-border);
  border-left-color: var(--accent-gold);
  background: var(--accent-gold-light);
  color: #5C3806;
}
.appointment-block.status-appointed strong { color: #4F3003; }
.appointment-block.status-appointed small { color: #78531A; }

/* 2. 到店候诊中 WAITING - 宋式天青霁蓝 */
.appointment-block.status-waiting {
  border-color: var(--sky-azure-border);
  border-left-color: var(--sky-azure);
  background: var(--sky-azure-light);
  color: #17455B;
}
.appointment-block.status-waiting strong { color: #17455B; }
.appointment-block.status-waiting small { color: #326B88; }

/* 3. 看诊中 IN_PROGRESS - 草本青黛墨绿 */
.appointment-block.status-in-progress {
  border-color: var(--herb-green-border);
  border-left-color: var(--herb-green);
  background: var(--herb-green-light);
  color: #134539;
}
.appointment-block.status-in-progress strong { color: #134539; }
.appointment-block.status-in-progress small { color: #2A6B5B; }

/* 4. 已完成 COMPLETED - 中性墨灰 */
.appointment-block.status-completed {
  border-color: var(--border-subtle);
  border-left-color: var(--text-muted);
  background: var(--bg-card-subtle);
  color: var(--text-muted);
  opacity: 0.85;
}
.appointment-block.status-completed strong { color: var(--text-secondary); }
.appointment-block.status-completed small { color: var(--text-muted); }

/* 状态图例 */
.calendar-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 12px 16px 4px;
  font-size: var(--font-xs);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  margin-top: 14px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-badge {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border-left: 3px solid;
}
.legend-badge.appointed { border-color: var(--accent-gold); background: var(--accent-gold-light); }
.legend-badge.waiting { border-color: var(--sky-azure); background: var(--sky-azure-light); }
.legend-badge.in-progress { border-color: var(--herb-green); background: var(--herb-green-light); }
.legend-badge.completed { border-color: var(--text-muted); background: var(--bg-card-subtle); }

.appointment-drawer {
  background: var(--drawer-bg);
}

.appointment-drawer-form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.appointment-drawer-form .drawer-scroll-body {
  flex: 1;
  min-height: 0;
}

.settle-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--weight-semibold);
  font-size: 15px;
}

/* 项目多选标签 */
.item-chip-select {
  border: 1px solid var(--border-subtle);
  background: #FFFFFF;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--weight-regular);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-smooth);
}

.item-chip-select.selected {
  border-color: var(--text-primary);
  background-color: var(--bg-menu-active);
  font-weight: var(--weight-medium);
}

/* --------------------------------------------------------------------------
   主管/系统管理员宽表与配置
   -------------------------------------------------------------------------- */
.data-table-hero {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table-hero th {
  text-align: left;
  padding: 12px 16px;
  color: var(--text-muted);
  font-weight: var(--weight-thin);
  border-bottom: 1px solid var(--border-subtle);
}

.data-table-hero td {
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: var(--weight-regular);
}

.data-table-hero tr:hover td {
  background-color: var(--bg-card-subtle);
}

/* --------------------------------------------------------------------------
   分区 3：右侧详情面板内专属组件样式
   -------------------------------------------------------------------------- */
.drawer-pay-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.drawer-pay-card {
  background-color: var(--panel-control-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--transition-smooth);
}

.drawer-pay-card:hover {
  border-color: var(--text-muted);
}

/* 米棕面板上暖金描边几乎不可辨 (1.0:1)，选中态改墨黑实底，与左侧轨道激活态同一语言 */
.drawer-pay-card.active {
  border-color: var(--text-primary);
  background-color: var(--text-primary);
}

.drawer-pay-card.active .drawer-pay-label {
  color: #FFFFFF;
}

.customer-combobox { position: relative; }
.customer-combobox-input { width: 100%; padding-right: 42px; }
.customer-combobox-button { position: absolute; right: 10px; top: 8px; border: 0; background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.customer-combobox-options { position: absolute; z-index: 240; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow: auto; padding: 6px; list-style: none; background: #DDBF9A; border-radius: 12px; border: 1px solid var(--panel-line); }
.customer-combobox-option { padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--drawer-text-strong); }
.customer-combobox-option.active, .customer-combobox-option.selected { background: #FFEFD1; }
.customer-combobox-empty { padding: 12px; color: var(--drawer-text-muted); font-size: 13px; }

.drawer-pay-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-pay-label {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: var(--drawer-text-strong);
}

.drawer-bill-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--panel-line);
  font-size: 14px;
  font-weight: var(--weight-regular);
}

.drawer-bill-line:last-child {
  border-bottom: none;
}

/* ==========================================================================
   通用工具类：替代视图内散落的行内样式，统一字阶、间距与状态色
   ========================================================================== */
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack-sm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.row-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.section-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.badge-count {
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  background: var(--accent-gold-light);
  color: var(--accent-gold-hover);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.empty-state {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-base);
  font-weight: var(--weight-thin);
  grid-column: 1 / -1;
}

.empty-state-title {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: 6px;
}

.empty-state-actions {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 顶栏右侧身份胶囊 */
.identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
}

/* 状态胶囊：所有列表与看板共用同一套语义色 */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pill-gold {
  background: var(--accent-gold-light);
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold-border);
}

.pill-blue,
.pill-sky {
  background: var(--sky-azure-light);
  color: var(--sky-azure);
  border: 1px solid var(--sky-azure-border);
}

.pill-green,
.pill-herb {
  background: var(--herb-green-light);
  color: var(--herb-green);
  border: 1px solid var(--herb-green-border);
}

.pill-red,
.pill-carmine {
  background: var(--carmine-red-light);
  color: var(--carmine-red);
  border: 1px solid var(--carmine-red-border);
}

.pill-muted {
  background: var(--bg-card-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* 侧边栏菜单红点徽标（前台待结账提醒） */
.menu-badge {
  display: none;
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  padding: 0 5px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: var(--font-2xs);
  font-weight: var(--weight-semibold);
  color: #fff;
  background: var(--alert-red);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 2px var(--bg-panel);
}

.menu-badge.visible {
  display: inline-block;
}

.toast-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 米色副卡片：队列行、结算说明块等 */
.info-tile {
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.info-cell-label {
  font-size: var(--font-xs);
  font-weight: var(--weight-thin);
  color: var(--text-muted);
}

.info-cell-value {
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.metric-strong {
  font-size: var(--font-lg);
  font-weight: var(--weight-semibold);
  color: var(--accent-gold);
}

.metric-inline {
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 宽表在 PAD 竖屏下横向滚动，避免挤压 */
.table-scroll-x {
  width: 100%;
  overflow-x: auto;
}

.code-chip {
  background: var(--bg-card-subtle);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* 主体区（浅色）表单控件 */
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  height: var(--btn-height-md);
  font-size: var(--font-md);
  font-weight: var(--weight-regular);
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: #FFFFFF;
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-smooth);
}

.field-textarea {
  height: 84px;
  padding: 12px 16px;
  resize: vertical;
  line-height: 1.6;
}

.field-input::placeholder,
.field-textarea::placeholder {
  font-weight: var(--weight-thin);
  color: var(--text-muted);
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  border-color: var(--text-primary);
}

.qty-input {
  width: 74px;
  height: var(--btn-height-sm);
  padding: 0 10px;
  box-sizing: border-box;
  font-size: var(--font-base);
  font-family: inherit;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  color: var(--text-primary);
  outline: none;
}

/* 面板内信息条已是暖米底，数量输入框保留白底并加深描边才认得出是可编辑项 */
.right-detail-drawer .qty-input {
  border-color: var(--panel-line);
}

/* 按钮尺寸与变体 */
.btn-sm {
  height: var(--btn-height-sm);
  padding: 0 16px;
  font-size: var(--font-sm);
}

.btn-mini {
  height: 32px;
  padding: 0 12px;
  font-size: var(--font-xs);
}

.btn-block {
  width: 100%;
  height: var(--btn-height-md);
}

.btn-dark {
  background: var(--text-primary);
  color: #FFFFFF;
  box-shadow: none;
}

.btn-dark:hover {
  background: #333835;
}

.action-btn-gold:disabled,
.action-btn-outline:disabled,
.btn-dark:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* 周期切换分段控件 */
.seg-group {
  display: inline-flex;
  gap: 4px;
  background: #FFFFFF;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.seg-btn {
  height: 34px;
  padding: 0 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.seg-btn:hover {
  background: var(--bg-menu-hover);
}

.seg-btn.active {
  background: var(--bg-menu-active);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

/* 近 7 日走势柱图 */
.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 150px;
  padding: 8px 0;
}

.trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}

.trend-cap {
  font-size: var(--font-2xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.trend-bar {
  width: 100%;
  min-height: 4px;
  background: var(--sky-azure-light);
  border: 1px solid var(--sky-azure-border);
  border-radius: 8px;
  transition: height var(--transition-smooth);
}

.trend-bar.is-today {
  background: var(--herb-green);
  border-color: var(--herb-green);
}

.trend-foot {
  font-size: var(--font-2xs);
  font-weight: var(--weight-thin);
  color: var(--text-muted);
}

/* 构成占比进度条：三种不同色相清晰区分多维收入 */
.bar-track {
  height: 8px;
  background: var(--bg-card-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--transition-smooth);
}

.bar-herb { background: var(--herb-green); }
.bar-gold { background: var(--accent-gold); }
.bar-blue { background: var(--sky-azure); }

/* 队列行与排队号 */
.queue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}

.queue-no {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.queue-name {
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* 已选项目行（自费开单） */
.selected-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
}

/* ==========================================================================
   右侧详情面板内的统一表单与信息控件
   ========================================================================== */
.drawer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-label {
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--panel-text-muted);
}

.drawer-input,
.drawer-select,
.drawer-textarea {
  width: 100%;
  box-sizing: border-box;
  height: var(--btn-height-md);
  padding: 0 14px;
  font-size: var(--font-md);
  font-family: inherit;
  font-weight: var(--weight-regular);
  color: var(--drawer-text-strong);
  background: var(--panel-control-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  outline: none;
  transition: all var(--transition-smooth);
}

.drawer-input::placeholder {
  color: var(--panel-text-muted);
  font-weight: var(--weight-thin);
}

.drawer-input:focus,
.drawer-select:focus,
.drawer-textarea:focus {
  border-color: var(--drawer-accent);
  background: var(--bg-card);
}

.drawer-textarea {
  min-height: 112px;
  padding: 12px 14px;
  resize: vertical;
}

.drawer-textarea::placeholder {
  color: var(--panel-text-muted);
  font-weight: var(--weight-thin);
}

.drawer-input:disabled {
  opacity: 0.55;
  color: var(--panel-text-muted);
}

.drawer-hero-amount {
  font-size: var(--font-2xl);
  font-weight: var(--weight-semibold);
  color: var(--drawer-accent);
}

.drawer-note {
  font-size: var(--font-xs);
  font-weight: var(--weight-thin);
  color: var(--panel-text-muted);
}

.drawer-text {
  font-size: var(--font-sm);
  color: var(--drawer-text-strong);
  font-weight: var(--weight-regular);
}

.drawer-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--alert-red-light);
  border: 1px solid var(--alert-red);
  color: var(--alert-red-deep);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
}

.drawer-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 6px;
  border-top: 1px solid var(--panel-line);
}

.drawer-sub-card {
  background: var(--panel-control-bg);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.drawer-sub-title {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: var(--drawer-text-strong);
}

.drawer-card-value {
  font-size: var(--font-xl);
  font-weight: var(--weight-semibold);
  color: var(--drawer-accent);
}

.drawer-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 自定义日期区间输入：与分段切换按钮同排，不占满整行 */
.field-date {
  width: 152px;
}

/* ==========================================================================
   既往病历抽屉：卡片化就诊列表、分页与时间轴边界组件
   ========================================================================== */

/* 顶部概览与分页导航条 */
.history-drawer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(201, 167, 127, 0.45);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  gap: 10px;
}

.history-summary-text {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.history-pagination-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.history-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(201, 167, 127, 0.5);
  background: #FFFFFF;
  color: var(--text-primary);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-smooth);
}

.history-page-btn:hover:not(:disabled) {
  background: var(--text-primary);
  color: #FFFFFF;
  border-color: var(--text-primary);
}

.history-page-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background: transparent;
}

.history-page-indicator {
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--panel-text-muted);
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}

/* 病历卡片列表容器：平滑纵向连续滚动 */
.history-cards-scroll-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 单张就诊病历卡片：纯白温润宣纸笺、圆角、阴影、明确边界 */
.history-record-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201, 167, 127, 0.4);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 3px 12px rgba(78, 64, 48, 0.05);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.history-record-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(78, 64, 48, 0.08);
}

/* 左边缘类型微色标 (医师开方为天青蓝，理疗执行为草本绿) */
.history-record-card.type-medical {
  border-left: 4px solid var(--sky-azure);
}

.history-record-card.type-service {
  border-left: 4px solid var(--herb-green);
}

/* 卡片头部：就诊序号、时间、类型与接诊人 */
.record-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.record-date-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.record-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  background: var(--bg-card-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
}

.record-type-and-doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 主诉区域：微金色浅底重点呼出 */
.record-complaint-box {
  background-color: var(--bg-card-subtle);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary);
}

.record-complaint-label {
  font-weight: var(--weight-medium);
  color: var(--accent-gold);
  margin-right: 4px;
}

/* 舌苔脉象与调理项目小标签条 */
.record-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.record-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.record-chip.chip-tcm {
  background: var(--herb-green-light);
  color: var(--herb-green);
  border: 1px solid var(--herb-green-border);
}

.record-chip.chip-item {
  background: var(--sky-azure-light);
  color: var(--sky-azure);
  border: 1px solid var(--sky-azure-border);
}

/* 调理开方与方剂笺 */
.record-prescription-box {
  border-left: 3px solid var(--sky-azure-border);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  background: #FCFBF9;
  padding: 8px 12px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.record-prescription-box strong {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* 卡片底边：核销结算方式与费用 */
.record-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px dashed rgba(201, 167, 127, 0.4);
  padding-top: 8px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--drawer-accent);
}

.record-settle-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--weight-medium);
}

/* 底部触底提示 */
.history-bottom-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px 0;
}

.history-end-hint {
  font-size: 12px;
  color: var(--panel-text-muted);
  text-align: center;
  font-weight: var(--weight-thin);
}