/* ============================================
   十香厨自助烤肉订货平台 - 公共样式
   © 立鹏科技 (LiPeng Technology)
   设计语言：白底淡蓝 / 线条图标 / 毛玻璃弹窗 / 紧凑布局
   ============================================ */
:root {
  --primary: #2e7ce6;
  --primary-weak: #e8f1fd;
  --primary-hover: #1f6ad4;
  --bg: #f4f7fc;
  --card: #ffffff;
  --border: #dfe8f2;
  --text: #22313f;
  --text-sub: #6b7c90;
  --text-faint: #9aa9ba;
  --danger: #e5484d;
  --danger-weak: #fdebec;
  --success: #30a46c;
  --success-weak: #e7f6ee;
  --warning: #f5a524;
  --warning-weak: #fdf3e0;
  --purple: #8e6fd8;
  --purple-weak: #f0eafb;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(23, 43, 77, .06), 0 4px 16px rgba(23, 43, 77, .06);
  --sidebar-w: 208px;
  --topbar-h: 50px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c8d5e3; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 图标 ---------- */
.ic { flex: none; vertical-align: -3px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-size: 13px; cursor: pointer;
  transition: all .15s; white-space: nowrap; line-height: 1;
  user-select: none;
}
.btn:hover { border-color: var(--primary); color: var(--primary); background: #fafcff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-danger { background: #fff; border-color: #f3c2c4; color: var(--danger); }
.btn-danger:hover { background: var(--danger-weak); border-color: var(--danger); color: var(--danger); }
.btn-success { background: #fff; border-color: #bfe3d0; color: var(--success); }
.btn-success:hover { background: var(--success-weak); border-color: var(--success); color: var(--success); }
.btn-sm { padding: 4px 9px; font-size: 12px; border-radius: 6px; }
.btn-block { width: 100%; padding: 10px; font-size: 14px; }
.btn-link { border: none; background: none; color: var(--primary); padding: 2px 4px; }
.btn-link:hover { background: var(--primary-weak); }

/* ---------- 表单 ---------- */
.input, .select, .textarea {
  width: 100%; padding: 7px 10px; font-size: 13px; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
  outline: none; transition: border .15s, box-shadow .15s;
  font-family: inherit;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46, 124, 230, .12);
}
.textarea { resize: vertical; min-height: 64px; }
.form-item { margin-bottom: 13px; }
.form-item label {
  display: block; font-size: 12.5px; color: var(--text-sub); margin-bottom: 5px; font-weight: 500;
}
.form-item label .req { color: var(--danger); margin-left: 2px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-item { flex: 1; }
.form-help { font-size: 12px; color: var(--text-faint); margin-top: 4px; }

/* ---------- 卡片 / 表格 ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
}
.card-head .sub { font-size: 12px; color: var(--text-faint); font-weight: 400; margin-left: 2px; }
.card-body { padding: 14px; }

.table-wrap { overflow: auto; border-radius: 0 0 var(--radius) var(--radius); }
table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
.tb th {
  text-align: left; font-weight: 600; color: var(--text-sub); font-size: 12.5px;
  background: #f8fafd; padding: 8px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tb td { padding: 8px 12px; border-bottom: 1px solid #eef3f8; vertical-align: middle; }
.tb tr:last-child td { border-bottom: none; }
.tb tbody tr:hover { background: #f7fafe; }
.tb .num { font-variant-numeric: tabular-nums; }
.tb-empty { padding: 40px 0; text-align: center; color: var(--text-faint); font-size: 13px; }
.tb-empty .ic { opacity: .4; }

/* ---------- 状态标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 500;
  line-height: 1.5; white-space: nowrap;
}
.tag-blue   { background: var(--primary-weak); color: var(--primary); }
.tag-green  { background: var(--success-weak); color: var(--success); }
.tag-orange { background: var(--warning-weak); color: #d07c0a; }
.tag-red    { background: var(--danger-weak); color: var(--danger); }
.tag-gray   { background: #eef1f5; color: var(--text-sub); }
.tag-purple { background: var(--purple-weak); color: var(--purple); }

/* ---------- 工具类 ---------- */
.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb12 { margin-bottom: 12px; }
.sub { color: var(--text-sub); font-size: 12.5px; }
.faint { color: var(--text-faint); }
.money { color: #d0560a; font-weight: 600; font-variant-numeric: tabular-nums; }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
.mono { font-family: Consolas, monospace; font-variant-numeric: tabular-nums; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 筛选栏 ---------- */
.filter-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.filter-bar .input, .filter-bar .select { width: auto; }
.filter-bar .input { width: 200px; }

/* ---------- 分页 ---------- */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 12px; }
.pager .info { font-size: 12.5px; color: var(--text-faint); margin-right: auto; }

/* ---------- 毛玻璃弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(34, 49, 63, .32);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .18s ease;
}
.modal {
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(23, 43, 77, .18);
  width: 460px; max-width: 100%; max-height: calc(100vh - 60px);
  display: flex; flex-direction: column;
  animation: popIn .18s ease;
}
.modal-lg { width: 640px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 0; font-size: 15px; font-weight: 600;
}
.modal-head .x { cursor: pointer; color: var(--text-faint); padding: 4px; border-radius: 6px; }
.modal-head .x:hover { background: #eef1f5; color: var(--text); }
.modal-body { padding: 14px 18px; overflow: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 18px 16px;
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(8px); } }

/* ---------- Toast ---------- */
.toast-wrap {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 16px; font-size: 13px; box-shadow: var(--shadow);
  animation: slideDown .25s ease;
}
.toast-ok { color: var(--success); }
.toast-err { color: var(--danger); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } }

/* ---------- 步骤器 ---------- */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.stepper button {
  width: 28px; height: 28px; border: none; background: #f6f9fd; cursor: pointer;
  color: var(--primary); font-size: 15px; line-height: 1;
}
.stepper button:disabled { color: #c3cedb; cursor: not-allowed; }
.stepper .val { min-width: 44px; text-align: center; font-size: 13px; font-weight: 600; }