/* ============================================================
 * HARCHOY OEM Bespoke - Theme: 黑白商务极简
 * 参考站: http://boya.xn--xcr8zy7am6o.cn:801 (合裁系统)
 * 作用：覆盖 main.css 的紫色 SaaS 风格，统一为参考站的黑白商务风
 * 后置覆盖层，必须在 main.css 之后引入
 * ============================================================ */

/* ── 设计令牌 ── */
:root {
  --color-primary:       #333333;
  --color-primary-hover: #000000;
  --color-bg-page:       #F5F7FA;
  --color-bg-card:       #FFFFFF;
  --color-bg-header:     #FAFAFB;
  --color-border:        #E2E2E2;
  --color-border-strong: #BFBFBF;
  --color-text-main:     #333333;
  --color-text-secondary:#666666;
  --color-text-muted:    #999999;
  --color-link:          #1E6FFF;
  --color-success:       #16A34A;
  --color-warning:       #D97706;
  --color-danger:        #DC2626;
  --color-info:          #0EA5E9;

  --radius-btn:    2px;
  --radius-card:   4px;
  --radius-input:  2px;

  --font-main: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", "Hiragino Sans GB", Tahoma, Arial, sans-serif;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.04);
}

/* ── 全局字体与背景 ── */
html, body {
  font-family: var(--font-main) !important;
  background: var(--color-bg-page) !important;
  color: var(--color-text-main) !important;
}

/* ── 顶部导航：商务深灰 ── */
.topbar {
  background: var(--color-primary) !important;
  border-bottom: 1px solid #000;
}
.topbar a.logout-btn {
  border-radius: var(--radius-btn) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

/* ── 侧边栏（admin）：黑色高亮 ── */
.sidebar a:hover, .sidebar a.active {
  color: var(--color-primary) !important;
  background: #EFEFEF !important;
  border-left-color: var(--color-primary) !important;
}

/* ── 卡片：直角 + 极简边框 ── */
.card, .stat-card {
  border-radius: var(--radius-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-card);
}
.stat-card .value { color: var(--color-text-main) !important; }
.stat-card.accent { border-left-color: var(--color-primary) !important; }

/* ── 表格：参考站 Layui 风 ── */
thead tr { background: var(--color-bg-header) !important; }
th {
  color: var(--color-text-main) !important;
  border-bottom: 1px solid var(--color-border-strong) !important;
  font-weight: 600;
}
td { border-bottom: 1px solid var(--color-border) !important; }
tr:hover td { background: #F0F2F5 !important; }

/* ── 表单控件：直角 + 黑色 focus ── */
.form-control {
  border-radius: var(--radius-input) !important;
  border-color: var(--color-border-strong) !important;
}
.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(51,51,51,0.12) !important;
}

/* ── 按钮：黑底白字 直角 ── */
.btn {
  border-radius: var(--radius-btn) !important;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.btn-primary {
  background: var(--color-primary) !important;
  color: #fff !important;
  border: 1px solid var(--color-primary) !important;
}
.btn-primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}
.btn-secondary {
  background: #fff !important;
  color: var(--color-text-main) !important;
  border: 1px solid var(--color-border-strong) !important;
}
.btn-secondary:hover {
  background: #F0F0F0 !important;
}
.btn-success {
  background: var(--color-success) !important;
  border: 1px solid var(--color-success) !important;
}
.btn-danger {
  background: #fff !important;
  color: var(--color-danger) !important;
  border: 1px solid var(--color-danger) !important;
}
.btn-danger:hover {
  background: #FEF2F2 !important;
}

/* ── 状态标签 badge 改为方形/淡色商务版 ── */
.badge {
  border-radius: 2px !important;
  padding: 3px 8px !important;
  font-weight: 500;
}

/* ── 分页 ── */
.pagination button {
  border-radius: var(--radius-btn) !important;
  border-color: var(--color-border-strong) !important;
}
.pagination button.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.pagination button:hover:not(.active) {
  background: #EFEFEF !important;
}

/* ── 模态框 ── */
.modal {
  border-radius: var(--radius-card) !important;
}

/* ── 登录页：替换紫色渐变为商务深灰 ── */
.login-page {
  background: linear-gradient(135deg, #1A1A1A 0%, #333333 50%, #555555 100%) !important;
}
.login-box {
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--color-border) !important;
}
.login-logo .brand { color: var(--color-primary) !important; }

/* ── toast ── */
#toast { border-radius: var(--radius-btn) !important; background: var(--color-primary) !important; }

/* ============================================================
 * order-spa.html / account.html 用的 inline 类名（非 main.css）
 * 也尝试覆盖一波，没用 !important 因为 inline style 优先级最高
 * ============================================================ */

/* 通用容器 */
.wrap, .container, .page-wrap { background: var(--color-bg-page); }

/* 通用按钮（多种命名） */
button.primary, button.is-primary, button[data-action="primary"] {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--radius-btn) !important;
  border: 1px solid var(--color-primary) !important;
}
button.secondary, button.is-secondary {
  background: #fff !important;
  border: 1px solid var(--color-border-strong) !important;
  border-radius: var(--radius-btn) !important;
}

/* 通用 input/select/textarea */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], select, textarea {
  font-family: var(--font-main);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 0;
}

/* ── 打印样式（订单打印用） ── */
@media print {
  .topbar, .sidebar, .btn, button, .no-print { display: none !important; }
  body { background: #fff !important; }
  .card, .stat-card { box-shadow: none !important; border: 1px solid #000 !important; }
}