/* ============================================================================
   neumorph.css —— 拟态（neumorphism）材质层

   单独一个文件、**只覆盖材质**（背景 / 阴影 / 圆角 / 边框 / 按压反馈），
   不碰任何布局、尺寸、字号与颜色语义。这样：
     · 想退回平面风格，把这个文件从 index.html 摘掉即可；
     · 业务页自己的样式（layout.css / *-mobile.css）不会被这里的选择器意外盖掉，
       因为这里的选择器**都带 .neu 前缀作用域或只改材质属性**。

   为什么是「软拟态」而不是教科书式拟态：
   纯拟态要求元素与底板**同色**、只靠阴影区分。本项目要在浅色/深色两套主题下
   都成立，而深色下同色 + 阴影会让卡片边缘完全消失（低对比屏上糊成一片）。
   所以这里保留一层极淡的描边（--jxc-neu-border）把边界勾出来，
   体量仍由一对反向阴影给 —— 视觉上是拟态，可读性上是软 UI。

   三条硬规矩（拟态最容易翻车的地方）：
     1. **文字永远不参与**：不给文字加 text-shadow，数字与标签必须实心清晰。
     2. **可点元素必须有两种状态**（凸 / 凹），否则用户不知道点没点到。
     3. **表格行、列表项不做凸起**：几十行都浮起来会变成一堆小方块，
        只给容器做凹陷（"内容装在槽里"），行本身保持平的。
   ========================================================================= */

/* ---------- 一、底板与容器 ---------- */

/* 页面底板：极淡的对角渐变，让"光从左上打过来"这件事有依据。
   纯平色 + 左上高光会让阴影方向显得没有来源。 */
.app-main,
.app-wrapper {
  background-image: linear-gradient(145deg,
    color-mix(in srgb, var(--jxc-bg) 92%, #fff) 0%,
    var(--jxc-bg) 45%,
    color-mix(in srgb, var(--jxc-bg) 94%, #000) 100%);
  background-attachment: fixed;
}
/* color-mix 不被支持时退回纯色（老 Safari / 老 Edge）—— 不写这行的话
   background-image 整条失效，页面会变成透明底。 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .app-main,
  .app-wrapper { background-image: none; }
}

/* 卡片 / 面板 / 指标卡：凸起 */
.panel,
.stat,
.pm-card,
.wh-card,
.pm-selbar,
.dashboard-bar,
.dock,
.pm-seg,
.pm-subseg,
.pm-toolbar,
.table-wrap,
.imgfield__preview {
  background: var(--jxc-surface);
  border-color: var(--jxc-neu-border);
  box-shadow: var(--jxc-neu-out);
}
.panel,
.stat,
.wh-card,
.pm-selbar,
.dashboard-bar {
  border-width: 1px;
  border-style: solid;
}

/* 更大的容器用更厚的层：navbar / 侧边栏 / 弹窗不跟卡片用同一档阴影，
   同一档会让"谁在上面"失去层次。 */
.navbar { box-shadow: var(--jxc-neu-out-sm); }
.modal {
  border: 1px solid var(--jxc-neu-border);
  box-shadow: var(--jxc-neu-out-lg);
}
.modal__head,
.modal__foot {
  border-color: var(--jxc-neu-border);
}

/* ---------- 二、凹陷：输入框 / 下拉 / 搜索 / 分段器槽 ---------- */

.input,
.pm-search__box,
.pm-chip,
.filter-bar__field .input,
.period-bar__filters .input,
.pm-stockbar .pm-search__box,
.pm-pager__info,
.ret-item,
.pm-specbox {
  background: var(--jxc-surface);
  border-color: var(--jxc-neu-border);
  /* 凹陷用内阴影。原来 .input 就是靠 inset 描边做的，这里把它换成真正的内阴影，
     描边降为一丝 outline（聚焦时仍然由 .input:focus 覆盖成主色）。 */
  box-shadow: var(--jxc-neu-in), 0 0 0 1px var(--jxc-border-lighter);
}
.input:focus {
  box-shadow: var(--jxc-neu-in), 0 0 0 2px var(--current-color);
}

/* ---------- 三、按钮：默认凸起，按下凹进去 ----------

   ⚠⚠ 这一节**必须用 :where() 把权重压到 0**，否则会盖掉按钮变体的配色。
   踩过的坑：原来直接写 `.btn { background: var(--jxc-surface) }`，
   而本文件排在 layout.css **之后**、权重又相同 —— 于是
   `.btn--primary` 的 `background: var(--current-color)` 被换成 surface 色，
   主色按钮变成"和页面底色一样的方块"：用户看到的就是
   「创建发货批次这个按键因为亮色背景看不见」。
   （主色按钮本该是 #0053cf 蓝底白字，对比 6.69:1。）

   `:where(...)` 的权重恒为 0，于是：
     · 盒子类属性（box-shadow / transition）本文件不设，正常生效；
     · 配色类属性（background / border-color）由 layout.css 的变体规则胜出，
       主色 / 危险按钮保持自己的语义色 —— 拟态只加体积，不改颜色。
   这条规矩对**所有**并列变体（.btn--sm 等）都成立，不只是主色按钮。 */
:where(.btn) {
  background: var(--jxc-surface);
  border-color: var(--jxc-neu-border);
  box-shadow: var(--jxc-neu-out-sm);
  transition: box-shadow .16s, transform .16s, background .16s;
}
:where(.btn):hover:not(:disabled) {
  box-shadow: var(--jxc-neu-out);
}
:where(.btn):active:not(:disabled) {
  /* 按下 = 真的"按进去"，而不只是换个背景色 */
  box-shadow: var(--jxc-neu-press);
  transform: translateY(1px);
}
:where(.btn):disabled {
  box-shadow: none;
  opacity: .55;
}

/* 实心按钮（主色 / 危险）不参与拟态的体积：它们靠颜色表意，
   再叠一层投影会让白字发糊。只留一点落影表示"可点"。
   ⚠ 别加 .btn--success / .btn--warning：这两个类在 JS 里根本没被用过
   （组件库只有默认 / primary / danger 三种），写了就是死规则。
   校验办法见 tools/check-css-selectors.mjs。 */
.btn--primary,
.btn--danger {
  box-shadow: 0 1px 3px color-mix(in srgb, var(--current-color) 28%, transparent);
}
.btn--primary:active:not(:disabled),
.btn--danger:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }

/* ---------- 四、分段器 / chip 的选中态 ---------- */

.pm-seg__btn.is-active,
.pm-subseg__btn.is-active,
.pm-chip.is-active,
.carrier-chip--btn.is-active {
  /* 选中的分段 = 被按下去的那一格（凹陷），而不是换成一个亮块。
     这样"选中"和"按下"是同一套语言，不用额外记。 */
  box-shadow: var(--jxc-neu-in-sm);
}
.pm-seg__btn.is-active {
  /* 例外：一级分段器选中项原来是整块主色，它承担"当前大模块"的强提示，
     改成凹陷会削弱它，所以这里只补一层内描边。 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .12);
}

/* 底部 tab / 侧面菜单选中：凹陷 + 左侧主色条 */
.menu-item.is-active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.dock__item.is-active {
  box-shadow: var(--jxc-neu-in-sm);
}

/* ---------- 五、表格：容器凹、行保持平 ---------- */

.table-wrap { border-radius: var(--jxc-card-radius); }
.table thead th {
  background: var(--jxc-fill);
  /* 表头做一点点下压，和表体区分开；行本身绝不加阴影 */
  box-shadow: inset 0 -1px 0 var(--jxc-table-border);
}
.table tbody tr { transition: background .14s; }

/* ---------- 六、弹层 / 浮层 ---------- */

.modal-mask {
  background: color-mix(in srgb, var(--jxc-text-primary) 26%, transparent);
  backdrop-filter: blur(2px);
}
@supports not (backdrop-filter: blur(2px)) {
  .modal-mask { background: rgba(0, 0, 0, .32); }
}
/* 下拉筛选面板 / 弹层：抬起来（比卡片高一档）。
   ⚠ 采购页那个展开面板的类名是 .pm-drop（不是 .pm-droppanel）——
   写错类名不会有任何报错，只是这条规则永远不生效。 */
.pm-drop {
  border: 1px solid var(--jxc-neu-border);
  box-shadow: var(--jxc-neu-out-lg);
}

/* ---------- 七、空态 / 拖拽等小件 ---------- */

/* 空态是一块"凹槽"，暗示"这里本该有东西"。
   类名是 .pm-empty（采购/退回/退回明细用）与 .pm-empty__title / __sub。 */
.pm-empty {
  background: var(--jxc-fill-light);
  border-radius: var(--jxc-card-radius);
  box-shadow: var(--jxc-neu-in-sm);
}
.imgfield.is-drag .imgfield__preview {
  box-shadow: var(--jxc-neu-in), 0 0 0 2px var(--current-color);
}
.ret-item__thumb,
.cell-img img,
.pimg {
  box-shadow: var(--jxc-neu-out-sm);
}

/* ---------- 八、动效收敛 ----------
   拟态元素多、阴影重，动画一多就晕。这里统一把时长压到 0.16s，
   并且**尊重系统的"减少动态效果"**（前庭失调用户会被位移与缩放影响）。 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn:active:not(:disabled),
  .table tbody tr,
  .input { transition: none !important; transform: none !important; }
}

/* 手机端：阴影半径按比例收小，否则 400px 宽的屏上到处是 9px 的暗角，
   看起来像屏幕脏了。 */
@media (max-width: 820px) {
  .panel,
  .stat,
  .pm-card,
  .wh-card,
  .pm-selbar,
  .dashboard-bar,
  .pm-seg,
  .pm-subseg,
  .pm-toolbar { box-shadow: var(--jxc-neu-out-sm); }
  .modal { box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
}