/* ============================================================
   theme.css — 主题 / 夜晚模式适配
   依赖 global.css 的 body[data-theme="dark"] 变量覆盖
   ============================================================ */

/* ---------- 夜间模式: 白底元素适配 ---------- */
body[data-theme="dark"] .station-card,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .kpi,
body[data-theme="dark"] .order-item,
body[data-theme="dark"] .member-row,
body[data-theme="dark"] .pkg-btn,
body[data-theme="dark"] .pay-btn,
body[data-theme="dark"] .fee-cell,
body[data-theme="dark"] .rule-card,
body[data-theme="dark"] .chip,
body[data-theme="dark"] .seg .seg-btn {
  background: var(--cream-2);
}

body[data-theme="dark"] .input,
body[data-theme="dark"] .select,
body[data-theme="dark"] .textarea {
  background: #FFFFFF14;
  color: var(--ink);
  border-color: var(--wood);
}
body[data-theme="dark"] .input::placeholder,
body[data-theme="dark"] .textarea::placeholder { color: var(--ink-faint); }

body[data-theme="dark"] .input:focus,
body[data-theme="dark"] .select:focus,
body[data-theme="dark"] .textarea:focus { border-color: var(--accent); }

body[data-theme="dark"] .nav-tab.active {
  background: var(--wood-bg);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 2px 2px 0 var(--wood-dark);
}

/* 状态卡片渐变在暗色下的微调 */
body[data-theme="dark"] .station-card[data-status="occupied"] { background: linear-gradient(160deg, var(--cream-2), color-mix(in srgb, var(--idle) 24%, var(--cream-2))); }
body[data-theme="dark"] .station-card[data-status="paused"] { background: linear-gradient(160deg, var(--cream-2), color-mix(in srgb, var(--paused) 28%, var(--cream-2))); }
body[data-theme="dark"] .station-card[data-status="overtime"] { background: linear-gradient(160deg, var(--cream-2), color-mix(in srgb, var(--overtime) 26%, var(--cream-2))); }

body[data-theme="dark"] .station-badge { background: #FFFFFF10; color: var(--ink-soft); }
body[data-theme="dark"] .station-card[data-status="idle"] .station-badge { background: color-mix(in srgb, var(--idle) 22%, transparent); color: var(--idle); }
body[data-theme="dark"] .station-card.near .station-badge { background: color-mix(in srgb, var(--timer) 22%, transparent); color: var(--timer); }

body[data-theme="dark"] .progress { background: #FFFFFF14; border-color: #FFFFFF14; }
body[data-theme="dark"] .order-clock {
  background: linear-gradient(160deg, var(--wood-bg), color-mix(in srgb, var(--wood) 45%, var(--cream-2)));
}
body[data-theme="dark"] .tbl td { border-color: #FFFFFF12; }
body[data-theme="dark"] .tbl th { color: var(--ink-soft); }

body[data-theme="dark"] .toast { background: var(--cream-2); color: var(--ink); }
body[data-theme="dark"] .modal { background-color: var(--cream-2); }
body[data-theme="dark"] .modal-mask { background: rgba(0,0,0,.55); }

body[data-theme="dark"] .extra-row .rm { background: #FF9A7618; color: var(--overtime); }
body[data-theme="dark"] .m-avatar { background: var(--accent-2); }

body[data-theme="dark"] .empty { color: var(--ink-faint); }

body[data-theme="dark"] .mg-results { background: var(--cream-2); }
body[data-theme="dark"] .mg-option:hover { background: #FFFFFF10; }
body[data-theme="dark"] .rg-item,
body[data-theme="dark"] .rc-item { background: var(--cream-2); }

/* ---------- 打印：导出报表时可打印 ---------- */
@media print {
  .topnav, .decor-beans, .toast-wrap, .voice-bar, .btn { display: none !important; }
  body { background: #fff !important; }
  .station-card, .panel, .stat-card { box-shadow: none; }
}

/* ---------- 打印电子小票：仅显示小票 ---------- */
@media print {
  body.receipt-print .main,
  body.receipt-print .topnav,
  body.receipt-print .decor-beans,
  body.receipt-print .toast-wrap,
  body.receipt-print .voice-bar { display: none !important; }
  body.receipt-print .modal-mask { position: static; background: none; padding: 0; display: block; backdrop-filter: none; color: #333; }
  body.receipt-print .modal { box-shadow: none; border: none; max-width: none; width: 100%; background: #fff; color: #333; }
  body.receipt-print .modal .modal-head,
  body.receipt-print .modal .modal-foot { display: none; }
  body.receipt-print .receipt { border: none; max-width: none; width: 100%; color: #333; }
}