/* ============================================================
   仓驭 WMS · Base 基础层 v7.0
   ------------------------------------------------------------
   职责：Reset / 排版 / 布局壳 / 焦点与可访问性 / 滚动条 / PWA / 全局反馈
   约束：本层只引用 tokens.css 的令牌；不出现具体色值与魔法数字。
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -moz-tab-size:4; tab-size:4;
}
body{
  font-family:var(--font);
  font-size:var(--font-size-base);
  line-height:var(--lh-base);
  color:var(--color-text-primary);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow:hidden; height:100vh;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--duration-base) var(--ease-standard),
             color var(--duration-base) var(--ease-standard);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; font-size:inherit; border:none; background:none; cursor:pointer; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; background:none; }
img,svg,video{ max-width:100%; display:block; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; border-spacing:0; }
hr{ border:none; border-top:1px solid var(--color-divider); margin:var(--space-4) 0; }
[hidden]{ display:none !important; }
[disabled],[aria-disabled="true"]{ cursor:not-allowed; }
:disabled{ opacity:var(--state-disabled-opacity); }
summary::-webkit-details-marker{ display:none; }

/* ---------- 2. 排版 ---------- */
h1,h2,h3,h4,h5,h6{ font-weight:var(--font-weight-semibold); line-height:var(--lh-tight); color:var(--color-text-primary); }
h1{ font-size:var(--font-size-3xl); letter-spacing:var(--ls-tight); }
h2{ font-size:var(--font-size-2xl); letter-spacing:var(--ls-tight); }
h3{ font-size:var(--font-size-xl); }
h4{ font-size:var(--font-size-lg); }
h5{ font-size:var(--font-size-md); }
h6{ font-size:var(--font-size-base); }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
small{ font-size:var(--font-size-xs); color:var(--color-text-muted); }
strong,b{ font-weight:var(--font-weight-semibold); }
code,kbd,samp{ font-family:var(--font-mono); font-size:.92em; }
kbd{
  padding:1px var(--space-1); border:1px solid var(--color-border); border-bottom-width:2px;
  border-radius:var(--radius-xs); background:var(--color-surface-2); font-size:var(--font-size-2xs);
}
/* 数据表格/金额统一等宽数字，避免跳动 */
.num,.ta-r,.num-r,.stat-num,td.num,th.num,.money{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
::placeholder{ color:var(--input-placeholder); opacity:1; }
::selection{ background:var(--color-selected-strong); color:var(--color-selected-text); }

/* ---------- 3. 布局壳 ---------- */
.app{ display:flex; height:100vh; overflow:hidden; background:var(--color-bg); }
.main{ flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.sidebar{
  width:var(--sidebar-w); min-width:var(--sidebar-w);
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
  background:var(--sidebar-bg);
  border-right:1px solid var(--color-border-light);
  z-index:var(--z-fixed);
  transition:width var(--duration-slow) var(--ease-emphasized), min-width var(--duration-slow) var(--ease-emphasized);
}
.sidebar.collapsed{ width:var(--sidebar-w-collapsed); min-width:var(--sidebar-w-collapsed); }
.brand{ display:flex; align-items:center; gap:var(--space-2h); padding:var(--space-4) var(--space-4h); flex-shrink:0; }
.brand-logo{
  width:34px; height:34px; border-radius:var(--radius-md);
  display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg,var(--t-500),var(--t-700));
  color:#fff; font-size:var(--font-size-lg); font-weight:var(--font-weight-bold);
  box-shadow:0 2px 8px color-mix(in srgb,var(--color-primary) 24%,transparent);
}
.brand-txt{ display:flex; flex-direction:column; min-width:0; }
.brand-name,.brand-txt b{ font-size:var(--font-size-md); font-weight:var(--font-weight-bold); color:var(--color-text-primary); line-height:var(--lh-tight); }
.brand-txt small{ font-size:var(--font-size-2xs); color:var(--color-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-collapse{
  margin-left:auto; width:26px; height:26px; border-radius:var(--radius-sm);
  display:grid; place-items:center; cursor:pointer; color:var(--color-text-muted);
  transition:var(--t-colors);
}
.side-collapse:hover{ background:var(--state-hover); color:var(--color-text-primary); }

.side-nav,.nav{ flex:1; overflow-y:auto; padding:var(--space-2) var(--space-2h); }
.nav-group{
  padding:var(--space-4h) var(--space-3) var(--space-1h);
  font-size:var(--font-size-2xs); font-weight:var(--font-weight-semibold);
  color:var(--color-text-muted); letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.nav-item{
  position:relative; display:flex; align-items:center; gap:var(--space-2h);
  padding:var(--space-2h) var(--space-3); margin-bottom:var(--space-0h);
  border-radius:var(--radius-md);
  color:var(--color-text-secondary); font-size:var(--font-size-base); cursor:pointer;
  transition:var(--t-colors);
}
.nav-item .ni-ico{ width:18px; height:18px; display:grid; place-items:center; flex:none; opacity:.85; }
.nav-item .ni-ico svg{ width:17px; height:17px; }
.nav-item .ni-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item:hover{ background:var(--state-hover); color:var(--color-text-primary); }
.nav-item.active{ background:var(--color-selected); color:var(--color-primary); font-weight:var(--font-weight-semibold); }
.nav-item.active .ni-ico{ opacity:1; color:var(--color-primary); }
.nav-item.active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:var(--nav-active-bar-w); height:16px; border-radius:0 var(--radius-full) var(--radius-full) 0;
  background:var(--color-primary);
}
.sidebar.collapsed .ni-txt,.sidebar.collapsed .brand-txt,.sidebar.collapsed .nav-group{ display:none; }
.sidebar.collapsed .nav-item{ justify-content:center; padding:var(--space-2h) 0; }
.side-foot{ padding:var(--space-3) var(--space-3); flex-shrink:0; border-top:1px solid var(--color-divider); }

.topbar{
  height:var(--topbar-h); min-height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--space-3);
  padding:0 var(--page-x);
  background:var(--topbar-bg);
  border-bottom:1px solid var(--topbar-border);
  z-index:var(--z-sticky); position:relative;
}
.topbar h1{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); flex-shrink:0; letter-spacing:var(--ls-tight); }
.top-actions{ display:flex; align-items:center; gap:var(--space-2); margin-left:auto; }
.menu-btn{
  display:none; width:var(--ctl-h-md); height:var(--ctl-h-md); border-radius:var(--radius-sm);
  align-items:center; justify-content:center; cursor:pointer; color:var(--color-text-secondary);
  transition:var(--t-colors);
}
.menu-btn:hover{ background:var(--state-hover); color:var(--color-text-primary); }

.content{ flex:1; overflow-y:auto; scrollbar-gutter:stable; padding:var(--page-y) var(--page-x) var(--space-6); }
.page-title{ font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); margin-bottom:var(--space-4); letter-spacing:var(--ls-tight); }
.section-title{ font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); margin:var(--space-5) 0 var(--space-3); }

/* ---------- 4. 可访问性：焦点 / 动效 ---------- */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--color-focus-ring-color);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}
/* 表单控件用内嵌焦点环，视觉更贴合控件形状 */
input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable="true"]:focus-visible{
  outline:none; box-shadow:var(--input-ring);
  border-color:var(--color-primary) !important;
}
.skip-link{
  position:absolute; left:var(--space-3); top:-48px; z-index:var(--z-max);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  background:var(--color-surface); color:var(--color-primary); font-size:var(--font-size-sm);
  box-shadow:var(--elev-3); transition:top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus{ top:var(--space-3); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media (prefers-contrast:more){
  :root{ --color-border:var(--n-400); --color-text-secondary:var(--n-700); }
}

/* ---------- 5. 滚动条 ---------- */
.content,.table-wrap,.sidebar,.nav,.modal-body,.pop-body,textarea,.code-box,.cmd-list,.chat-msgs{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--color-text-muted) 40%,transparent) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--color-text-muted) 38%,transparent);
  border-radius:var(--radius-full); border:2px solid transparent; background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--color-text-muted) 62%,transparent); background-clip:content-box; }
::-webkit-scrollbar-corner{ background:transparent; }

/* ---------- 6. PWA / 安全区 ---------- */
@supports (padding:max(0px)){
  .topbar{ padding-top:max(env(safe-area-inset-top),0px); }
  .content{ padding-bottom:max(var(--space-6),env(safe-area-inset-bottom)); }
  .sidebar{ padding-top:max(env(safe-area-inset-top),0px); }
  .side-foot{ padding-bottom:max(var(--space-3),env(safe-area-inset-bottom)); }
}

/* ---------- 7. 全局反馈：加载 / Toast / 图片查看 / 展示层 ---------- */
.global-loader{
  position:fixed; inset:0; z-index:var(--z-loading);
  display:flex; align-items:center; justify-content:center;
  background:var(--color-mask);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.gl-box{
  padding:var(--space-6) var(--space-10); border-radius:var(--radius-xl);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  background:var(--color-surface); box-shadow:var(--elev-5);
}
.gl-spin{
  width:30px; height:30px; border-radius:50%;
  border:3px solid var(--color-border); border-top-color:var(--color-primary);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

#toast{
  position:fixed; bottom:calc(var(--space-16) + env(safe-area-inset-bottom)); left:50%;
  transform:translate(-50%,8px); z-index:var(--z-toast);
  padding:var(--space-2h) var(--space-4h); border-radius:var(--radius-full);
  font-size:var(--font-size-base); font-weight:var(--font-weight-medium);
  background:var(--color-text-primary); color:var(--color-text-inverse);
  box-shadow:var(--elev-4);
  pointer-events:none; opacity:0;
  transition:opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-emphasized);
  max-width:min(80vw,520px);
}
#toast.show{ opacity:1; transform:translate(-50%,0); }
#toast.ok{ background:var(--color-success); color:#fff; }
#toast.err{ background:var(--color-danger); color:#fff; }
#toast.warn{ background:var(--color-warning); color:#3a2a00; }

.img-viewer{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:flex; align-items:center; justify-content:center;
  background:var(--color-mask); cursor:zoom-out;
}
.img-viewer img{ max-width:92vw; max-height:92vh; border-radius:var(--radius-lg); box-shadow:var(--elev-5); }
.showcase-layer{ position:fixed; inset:0; z-index:var(--z-modal-backdrop); background:var(--color-mask); }

/* 背景光斑（保留钩子；默认性能档不显示） */
.bg-orbs{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.5; }
.o1{ width:620px; height:620px; left:-160px; top:-150px; background:radial-gradient(circle, color-mix(in srgb,var(--color-primary) 35%,transparent), transparent 70%); }
.o2{ width:560px; height:560px; right:-130px; top:8%; background:radial-gradient(circle, color-mix(in srgb,var(--mod-zones) 30%,transparent), transparent 70%); }
.o3{ width:580px; height:580px; left:22%; bottom:-180px; background:radial-gradient(circle, color-mix(in srgb,var(--color-success) 25%,transparent), transparent 70%); }
.cursor-light{
  position:fixed; left:0; top:0; width:480px; height:480px; border-radius:50%;
  pointer-events:none; z-index:0; opacity:0; transition:opacity var(--duration-slower) var(--ease-standard);
  background:radial-gradient(circle, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 35%, transparent 65%);
  mix-blend-mode:screen; will-change:transform;
}

/* ---------- 8. 打印（页面直印兜底，单据走独立 iframe） ---------- */
@media print{
  .sidebar,.side-mask,.topbar,.toast,#globalLoader,#cyPrintFrame,#modalMask,.pop-mask,.skip-link{ display:none !important; }
  body,.app,.main,.content{ display:block !important; height:auto !important; overflow:visible !important; background:#fff !important; }
  .content{ padding:0 !important; }
  a{ color:#000 !important; text-decoration:none !important; }
}