/* 后台新界面 · 第 1 层：设计变量、基础样式、外壳（侧栏 + 顶栏）。
   后台不再加载 tabler.min.css / admin.css / admin-polish.css / portal-theme.css，只用 admin-ui-*.css 三个文件 + 图标字体。
   旧 css 文件仍在磁盘上（商城前台还在用 tabler / portal-theme），回退把 layouts/admin.html 换回旧版即可。 */

:root {
  --sb-w: 244px;
  --sb-rail: 68px;
  --top-h: 60px;
  --content-max: 1600px;
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #fafafb;
  --panel-3: #f2f3f5;
  --line: #e6e7eb;
  --line-2: #d4d6dc;
  --ink: #17181c;
  --text: #3d3f47;
  --muted: #6b6e78;
  --primary: #4f46e5;
  --primary-solid: #4f46e5;
  --primary-hover: #4338ca;
  --primary-soft: #eef0ff;
  --primary-ink: #3730a3;
  --success: #047857;
  --success-soft: #e9f8f1;
  --warning: #b45309;
  --warning-soft: #fff6e5;
  --danger: #c4231d;
  --danger-solid: #dc2626;
  --danger-soft: #fdeeee;
  --info: #0369a1;
  --info-soft: #eaf5fc;
  --violet: #6d28d9;
  --violet-soft: #f3eefe;
  --r-lg: 14px;
  --r: 10px;
  --r-sm: 8px;
  --shadow-1: 0 1px 2px rgba(17, 19, 26, .05);
  --shadow-2: 0 10px 30px -12px rgba(17, 19, 26, .18);
  --shadow-3: 0 24px 60px -16px rgba(17, 19, 26, .35);
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* 老页面脚本里直接引用的变量（订单详情倒计时用 --color-danger） */
  --color-danger: var(--danger);
  --color-success: var(--success);
  --color-text-muted: var(--muted);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0c0c0f;
  --panel: #151519;
  --panel-2: #1a1a1f;
  --panel-3: #222228;
  --line: #2a2a31;
  --line-2: #3b3b44;
  --ink: #f4f4f6;
  --text: #d0d0d6;
  --muted: #9d9da8;
  --primary: #8b93fb;
  --primary-solid: #4f46e5;
  --primary-hover: #5b54ee;
  --primary-soft: rgba(129, 140, 248, .14);
  --primary-ink: #c7cdfe;
  --success: #3ccf98;
  --success-soft: rgba(52, 211, 153, .12);
  --warning: #f5b544;
  --warning-soft: rgba(251, 191, 36, .12);
  --danger: #f87171;
  --danger-solid: #dc2626;
  --danger-soft: rgba(248, 113, 113, .13);
  --info: #4cc0f5;
  --info-soft: rgba(56, 189, 248, .12);
  --violet: #b99cf8;
  --violet-soft: rgba(167, 139, 250, .14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 12px 32px -12px rgba(0, 0, 0, .6);
  --shadow-3: 0 24px 60px -16px rgba(0, 0, 0, .75);
  color-scheme: dark;
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 12px); }
body.admin-body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14px/1.55 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, figure, ul, ol, pre, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 650; line-height: 1.3; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
:root[data-theme="dark"] a:hover { color: var(--primary-ink); }
b, strong { font-weight: 650; color: var(--ink); }
code, pre, kbd { font-family: var(--mono); font-size: .86em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tone-success { color: var(--success); } .tone-warning { color: var(--warning); } .tone-danger { color: var(--danger); } .tone-primary { color: var(--primary); }
::selection { background: color-mix(in srgb, var(--primary) 26%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* ---------- 侧栏 ---------- */
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; display: flex; width: var(--sb-w); flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); transition: width .22s var(--ease), transform .22s var(--ease); }
.admin-brand { display: flex; height: var(--top-h); flex: none; align-items: center; gap: 11px; padding: 0 18px; color: var(--ink); overflow: hidden; white-space: nowrap; }
.admin-brand:hover { color: var(--ink); }
.admin-brand-mark { display: inline-flex; width: 34px; height: 34px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 19px; box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .7); }
.admin-brand strong, .admin-brand small { display: block; }
.admin-brand strong { font-size: 15px; letter-spacing: -.01em; }
.admin-brand small { color: var(--muted); font-size: 11.5px; font-weight: 500; }
.admin-nav { display: flex; flex: 1; flex-direction: column; gap: 2px; padding: 6px 12px 12px; overflow-x: hidden; overflow-y: auto; }
.admin-nav-label { padding: 16px 10px 6px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.admin-nav a, .admin-sidebar-footer a, .admin-sidebar-footer button { position: relative; display: flex; width: 100%; min-height: 38px; align-items: center; gap: 11px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 13.5px; font-weight: 520; text-align: left; white-space: nowrap; transition: background .15s, color .15s; }
.admin-nav a i, .admin-sidebar-footer a i, .admin-sidebar-footer button i { width: 20px; flex: none; color: var(--muted); font-size: 19px; text-align: center; transition: color .15s, transform .22s var(--ease); }
.admin-nav a:hover, .admin-sidebar-footer a:hover, .admin-sidebar-footer button:hover { background: var(--panel-3); color: var(--ink); }
.admin-nav a:hover i { color: var(--ink); }
.admin-nav a.active { background: var(--primary-soft); color: var(--primary-ink); font-weight: 620; }
.admin-nav a.active i { color: var(--primary); }
.admin-nav a.active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; padding: 0 6px; border-radius: 10px; background: var(--danger-solid); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav-badge.soft { background: var(--warning-soft); color: var(--warning); }
.admin-sidebar-footer { display: grid; gap: 2px; padding: 10px 12px 14px; border-top: 1px solid var(--line); }

/* 收起成图标栏（只在桌面）：文字隐藏，悬停出提示 */
@media (min-width: 961px) {
  .sb-collapsed .admin-sidebar { width: var(--sb-rail); }
  .sb-collapsed .admin-stage { margin-left: var(--sb-rail); }
  .sb-collapsed .admin-brand { padding: 0 17px; }
  .sb-collapsed .admin-brand > span:not(.admin-brand-mark), .sb-collapsed .nav-text, .sb-collapsed .admin-nav-label { display: none; }
  .sb-collapsed .admin-nav { padding-top: 10px; }
  .sb-collapsed .admin-nav-label + a { margin-top: 10px; }
  .sb-collapsed .admin-nav a, .sb-collapsed .admin-sidebar-footer a, .sb-collapsed .admin-sidebar-footer button { justify-content: center; padding: 0; }
  .sb-collapsed .nav-badge { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
  .sb-collapsed .sb-collapse i { transform: rotate(180deg); }
  .sb-collapsed [data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; z-index: 5; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: var(--panel); font-size: 12px; font-weight: 550; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-2); transform: translateY(-50%); }
}

/* ---------- 主区 + 顶栏 ---------- */
.admin-stage { min-height: 100vh; margin-left: var(--sb-w); transition: margin-left .22s var(--ease); }
.admin-topbar { position: sticky; top: 0; z-index: 1020; display: flex; height: var(--top-h); align-items: center; gap: 14px; padding: 0 28px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.admin-menu-button { display: none; width: 38px; height: 38px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font-size: 19px; }
.admin-breadcrumb { display: flex; min-width: 0; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.admin-breadcrumb i { font-size: 13px; opacity: .7; }
.admin-breadcrumb strong { overflow: hidden; color: var(--ink); font-size: 13.5px; text-overflow: ellipsis; }
.admin-search { position: relative; display: flex; width: min(380px, 34vw); margin-left: auto; align-items: center; }
.admin-search i { position: absolute; left: 11px; color: var(--muted); font-size: 16px; pointer-events: none; }
.admin-body .admin-search input { width: 100%; height: 36px; min-height: 36px; padding: 0 44px 0 34px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font-size: 13px; transition: border-color .15s, box-shadow .15s; }
.admin-search input:focus { border-color: var(--primary); outline: 0; box-shadow: var(--ring); }
.admin-search kbd { position: absolute; right: 8px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--panel-2); color: var(--muted); font-size: 11px; }
.admin-top-actions { display: flex; flex: none; align-items: center; gap: 6px; }
.icon-btn { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 18px; transition: background .15s, color .15s, border-color .15s; }
.icon-btn:hover { background: var(--panel-3); color: var(--ink); }
.icon-btn.bordered { border-color: var(--line); background: var(--panel); }
.admin-avatar { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 13px; font-weight: 700; }
.admin-main { width: min(calc(100% - 56px), var(--content-max)); margin: 0 auto; padding: 26px 0 64px; }
.admin-flash-stack { position: fixed; top: calc(var(--top-h) + 12px); right: 20px; z-index: 6000; display: grid; width: min(420px, calc(100vw - 32px)); gap: 8px; }
.admin-overlay { position: fixed; inset: 0; z-index: 1030; background: rgba(9, 9, 12, .45); backdrop-filter: blur(2px); }

@media (max-width: 960px) {
  body.admin-nav-open { overflow: hidden; }
  .admin-sidebar { width: min(284px, 86vw); transform: translateX(-100%); }
  /* 阴影只在展开时加：收起时它会从屏幕左边缘透出一条灰影 */
  .admin-sidebar.open { transform: none; box-shadow: var(--shadow-3); }
  .admin-stage { margin-left: 0; }
  .admin-menu-button { display: inline-flex; }
  .admin-topbar { gap: 10px; padding: 0 16px; }
  .admin-main { width: min(calc(100% - 32px), var(--content-max)); padding-top: 20px; }
  .sb-collapse { display: none !important; }
  .admin-search { width: auto; max-width: 360px; flex: 1; }
  .admin-search kbd { display: none; }
}
@media (max-width: 600px) {
  .admin-breadcrumb, .hide-sm { display: none !important; }
  .admin-main { width: calc(100% - 24px); padding-top: 16px; }
  .admin-body .admin-search input { padding-right: 10px; }
}
.sb-logout-form { margin: 0; }