/* XQ 门店管理后台 · Stitch A 端设计语言 */

/* Material Symbols 本地图标字体（离线可用） */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('/material-symbols-outlined.woff2') format('woff2');
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased;
}

:root {
  --xprimary: #1769FF;
  --xprimary-dark: #014AD7;
  --xbg: #f9f9ff;
  --xcard: #ffffff;
  --xtext: #111c2d;
  --xmuted: #555e74;
  --xfaint: #737687;
  --xborder: #e3e8f5;
  --xsidebar: #111c2d;
  --xsidebar-2: #1a2540;
  --xgreen: #006a3a;
  --xgreen-bg: #e6f7ed;
  --xred: #ba1a1a;
  --xred-bg: #ffdad6;
  --xamber: #8a5a00;
  --xamber-bg: #fff4d6;
  --xblue-bg: #e8eeff;
  --xradius: 12px;
  --xshadow: 0 2px 12px rgba(23, 32, 51, 0.07);
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--xbg); color: var(--xtext); font-size: 14px;
}
a { color: var(--xprimary); text-decoration: none; }
code.code, .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.muted { color: var(--xmuted); }
.small { font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; }
.pos { color: var(--xgreen); font-weight: 600; }
.neg { color: var(--xred); font-weight: 600; }
.link { color: var(--xprimary); font-weight: 500; }
.material-symbols-outlined { font-size: 20px; vertical-align: middle; }

/* ---------- 登录 ---------- */
.adm-login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #172033 0%, #1c273e 60%, #253352 100%);
}
.adm-login-card {
  width: 380px; max-width: 92vw; background: #fff; border-radius: 16px;
  padding: 36px 32px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.adm-login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.adm-login-logo {
  width: 52px; height: 52px; border-radius: 14px; background: var(--xprimary);
  color: #fff; font-weight: 800; font-size: 22px; display: flex;
  align-items: center; justify-content: center;
}
.adm-login-brand h1 { margin: 0; font-size: 20px; }
.adm-login-brand p { margin: 4px 0 0; color: var(--xfaint); font-size: 12px; }
.adm-login-hint { color: var(--xfaint); font-size: 12px; margin-top: 16px; line-height: 1.7; }
.adm-login-err { color: var(--xred); font-size: 13px; min-height: 20px; }

/* ---------- 布局 ---------- */
.adm-shell { display: flex; min-height: 100vh; }
.adm-sidebar {
  width: 248px; flex-shrink: 0; background: var(--xsidebar); color: #c9d4ee;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.adm-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.adm-brand-logo {
  width: 40px; height: 40px; border-radius: 10px; background: var(--xprimary);
  color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.adm-brand strong { display: block; color: #fff; font-size: 15px; }
.adm-brand small { color: #8b98bd; font-size: 11px; }
.adm-nav { flex: 1; overflow-y: auto; padding: 12px 10px; }
.adm-nav-group { font-size: 11px; color: #8b98bd; padding: 14px 12px 6px; letter-spacing: 1px; }
.adm-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 8px; color: #c9d4ee; font-size: 14px; margin-bottom: 2px;
}
.adm-nav-item:hover { background: var(--xsidebar-2); color: #fff; }
.adm-nav-item.active { background: var(--xprimary); color: #fff; }
.adm-side-foot { padding: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.adm-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.adm-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #2a3a5e; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.adm-user strong { display: block; color: #fff; font-size: 13px; }
.adm-user small { color: #8b98bd; font-size: 11px; }

.adm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; background: #fff; border-bottom: 1px solid var(--xborder);
  position: sticky; top: 0; z-index: 10;
}
.adm-topbar h2 { margin: 0; font-size: 18px; }
.adm-top-actions { display: flex; align-items: center; gap: 10px; }
.adm-env {
  font-size: 11px; color: var(--xamber); background: var(--xamber-bg);
  padding: 4px 10px; border-radius: 999px; font-weight: 600;
}
.adm-content { padding: 24px 28px 48px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- 通用组件 ---------- */
.adm-btn {
  border: none; border-radius: 8px; padding: 9px 18px; font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
}
.adm-btn-primary { background: var(--xprimary); color: #fff; }
.adm-btn-primary:hover { background: var(--xprimary-dark); }
.adm-btn-ghost { background: #eef2fb; color: var(--xtext); }
.adm-btn-ghost:hover { background: #e0e8f8; }
.adm-btn-danger { background: var(--xred-bg); color: var(--xred); }
.adm-btn-sm { padding: 6px 12px; font-size: 12px; }
.adm-btn-block { width: 100%; justify-content: center; padding: 12px; }
.adm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.adm-icon-btn { background: none; border: none; cursor: pointer; color: var(--xfaint); font-size: 16px; }

.adm-input, .adm-field input, .adm-field select, .adm-field textarea {
  border: 1px solid var(--xborder); border-radius: 8px; padding: 9px 12px;
  font-size: 14px; width: 100%; background: #fff; color: var(--xtext);
}
.adm-input:focus, .adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus {
  outline: 2px solid rgba(23, 105, 255, 0.25); border-color: var(--xprimary);
}
.adm-field { display: block; margin-bottom: 14px; }
.adm-field > span { display: block; font-size: 13px; color: var(--xmuted); margin-bottom: 6px; font-weight: 500; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-right: 16px; }
.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-row { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.st-ok { background: var(--xgreen-bg); color: var(--xgreen); }
.st-warn { background: var(--xamber-bg); color: var(--xamber); }
.st-info { background: var(--xblue-bg); color: var(--xprimary-dark); }
.st-primary { background: var(--xblue-bg); color: var(--xprimary); }
.st-accent { background: #e6f0ff; color: #014AD7; }
.st-muted { background: #eef0f6; color: var(--xfaint); }

.panel { background: var(--xcard); border-radius: var(--xradius); box-shadow: var(--xshadow); padding: 20px; margin-bottom: 20px; }
.panel h3 { margin: 0 0 14px; font-size: 15px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-head h3 { margin: 0; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--xfaint); font-weight: 600; font-size: 12px; padding: 10px 12px; border-bottom: 2px solid var(--xborder); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--xborder); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #fafbff; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  border: none; background: none; padding: 9px 16px; border-radius: 8px;
  font-size: 14px; color: var(--xmuted); cursor: pointer; font-weight: 500;
}
.tab:hover { background: #eef2fb; }
.tab.on { background: var(--xblue-bg); color: var(--xprimary-dark); font-weight: 700; }

.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.toolbar-right { display: flex; gap: 10px; align-items: center; }
.toolbar-right .adm-input { width: 260px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0 4px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--xcard); border-radius: var(--xradius); box-shadow: var(--xshadow); padding: 18px 20px; }
.kpi-label { font-size: 12px; color: var(--xfaint); margin-bottom: 8px; }
.kpi-value { font-size: 26px; font-weight: 800; color: var(--xtext); }
.kpi-sub { font-size: 12px; color: var(--xmuted); margin-top: 6px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sec-title { font-size: 15px; margin: 24px 0 14px; }
.welcome { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.welcome h2 { margin: 0 0 6px; font-size: 22px; }
.welcome p { margin: 0; }
.welcome-actions { display: flex; gap: 10px; flex-shrink: 0; }

.todo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--xborder); cursor: pointer;
}
.todo-row:last-child { border-bottom: none; }
.todo-row:hover strong { color: var(--xprimary); }
.todo-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.progress { width: 90px; height: 6px; background: #eef0f6; border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; }
.progress i { display: block; height: 100%; background: var(--xprimary); border-radius: 3px; }

.funnel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.funnel-label { width: 150px; flex-shrink: 0; font-size: 13px; }
.funnel-bar { flex: 1; height: 22px; background: #eef0f6; border-radius: 6px; overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--xprimary), #5b93ff); border-radius: 6px; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.chart-bar { width: 70%; max-width: 34px; background: linear-gradient(180deg, #5b93ff, var(--xprimary)); border-radius: 4px 4px 0 0; min-height: 3px; }
.chart-col span { font-size: 10px; color: var(--xfaint); }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--xborder); font-size: 13px; }
.kv span { color: var(--xfaint); }
.kv strong { font-weight: 600; text-align: right; }

.hist-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--xborder); font-size: 13px; }
.hist-row:last-child { border-bottom: none; }

.rule-list { margin: 0; padding-left: 18px; color: var(--xmuted); font-size: 13px; line-height: 2; }
.crumb { margin-bottom: 12px; }

.adm-empty { text-align: center; padding: 72px 24px; color: var(--xmuted); }
.adm-empty h3 { color: var(--xtext); }
.adm-empty.small { padding: 24px; }

/* ---------- toast & dialog ---------- */
#toast { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
.adm-toast {
  background: #1a2540; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 14px;
  opacity: 0; transform: translateY(-8px); transition: all 0.25s; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  max-width: 360px;
}
.adm-toast.show { opacity: 1; transform: none; }
.adm-toast-ok { background: var(--xgreen); }
.adm-toast-err { background: var(--xred); }

dialog#dialog { border: none; border-radius: 16px; padding: 0; width: 520px; max-width: 94vw; }
dialog#dialog::backdrop { background: rgba(17, 28, 45, 0.5); }
.adm-modal-card { padding: 0; }
.adm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--xborder); }
.adm-modal-head h3 { margin: 0; font-size: 16px; }
.adm-modal-body { padding: 20px 22px; max-height: 64vh; overflow-y: auto; }
.adm-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--xborder); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .adm-sidebar { width: 64px; }
  .adm-sidebar .adm-brand div, .adm-nav-group, .adm-nav-item span:last-child, .adm-side-foot .adm-user div { display: none; }
  .adm-nav-item { justify-content: center; }
  .adm-content { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
}