/* ============================================================
   console.css —— 管理类界面（后台 / 供货端）共用的壳层与页面骨架
   前台不用这个文件；三端共用的颜色与控件在 tokens.css / ui.css。
   ============================================================ */

/* ================= 壳层 ================= */
.c-shell { display: flex; min-height: 100vh; }

.c-side {
  width: var(--side-w); flex: 0 0 var(--side-w);
  background: var(--brand-ink-2); color: #c2cbe2;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 50;
}
.c-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.c-brand__mark {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
  background: linear-gradient(135deg, #5c78ff, #2b45d8);
  display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 700;
}
.c-brand b { display: block; color: #fff; font-size: 15px; line-height: 1.35; }
.c-brand span { font-size: 11.5px; color: #8b96b5; }

.c-nav { flex: 1; overflow-y: auto; padding: 8px 10px 18px; }
.c-nav__label {
  display: block; padding: 13px 8px 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #6f7b9c;
}
.c-nav__item {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 10px; margin-bottom: 2px; border-radius: 9px;
  color: #c2cbe2; font-size: 13.5px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-nav__item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.c-nav__item.is-active { background: rgba(92, 120, 255, .22); color: #fff; font-weight: 500; }
.c-nav__item.is-active::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: #5c78ff;
}
.c-nav__item .ic { width: 17px; height: 17px; opacity: .92; }
.c-nav__badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.c-nav__soon {
  margin-left: auto; padding: 1px 5px; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .18); font-size: 10.5px; color: #8b96b5;
}
.c-side__foot {
  padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 11.5px; color: #6f7b9c;
}

.c-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-top {
  position: sticky; top: 0; z-index: 30; height: 58px;
  display: flex; align-items: center; gap: 12px; padding: 0 18px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.c-top .search { width: 268px; }
.c-crumb { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--text-3); }
.c-crumb b { color: var(--text); font-weight: 600; }
.c-spacer { flex: 1; }
.c-user {
  display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
  border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  font-size: 13px;
}
.c-user:hover { background: var(--bg-2); }
.c-user small { display: block; color: var(--text-3); font-size: 11.5px; line-height: 1.3; }
.c-hamb { display: none; }

.c-content { width: 100%; max-width: var(--page-max); padding: 18px; }

/* ================= 页头 ================= */
.page-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.page-hd h1 { font-size: 19px; font-weight: 600; }
.page-hd__sub { margin-top: 3px; font-size: 13px; color: var(--text-3); }
.page-hd__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ================= 筛选栏 =================
   12 栅格：第一行 3 个下拉(各 2 列) + 关键词(6 列)，第二行 时间(6 列) + 按钮(6 列，右对齐) */
.filters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.filters .fld { grid-column: span 3; }   /* 一行 4 个字段，刚好铺满 12 栅格 */
.filters .fld--w3 { grid-column: span 3; }   /* 12 栅格下 4 个一行；窄屏由媒体查询降列 */
.filters .fld--w6 { grid-column: span 6; }   /* 长文本字段可占两格 */
.filters .fld--kw { grid-column: span 6; }
.filters .fld--date { grid-column: span 12; }   /* 日期范围独占一行，两个日期平分宽度 */
.filters .fld--date .u-row { display: flex; }
.filters .fld--date .input { flex: 1 1 240px; min-width: 0; }
/* 查询/重置紧跟最后一个输入框（照参考站：搜索按钮就在输入行第 4 格） */
.filters .fld--btns { grid-column: span 3; flex-direction: row; justify-content: flex-start; gap: 8px; }

/* ================= 统计卡 ================= */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 15px 16px; box-shadow: var(--shadow-xs);
}
.stat__lb { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; }
.stat__v {
  margin-top: 8px; font-size: 24px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.stat__v small { font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 3px; }
.stat__ft { margin-top: 8px; font-size: 12.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }

/* ================= 分类树表格（后台 → 商品分类） ================= */
.tree-btn {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-3); cursor: pointer;
}
.tree-btn:hover { background: var(--bg-2); color: var(--brand); }
.tree-lv1 .tree-name { font-size: 14px; margin-right: 8px; }
/* 二级行：浅底 + 缩进，一眼看出从属关系（不靠画连接线） */
.tree-lv2 > td { background: var(--surface-2); }
.tree-lv2 .tree-name { padding-left: 26px; color: var(--text-2); }
/* 分类描述：窄列允许折行，空值显示占位符 */
.tbl--tree .td-desc { color: var(--text-2); font-size: 13px; line-height: 1.5; }

/* ================= 列表 / 详情小卡（供货端工单、发货单等） ================= */
.rows { display: flex; flex-direction: column; }
.row-i {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.row-i:last-child { border-bottom: 0; }
.row-i__main { flex: 1 1 260px; min-width: 0; }
.row-i__t { font-weight: 500; }
.row-i__s { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

/* ================= 响应式 ================= */
@media (max-width: 1280px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .c-side {
    position: fixed; left: 0; top: 0; transform: translateX(-100%);
    transition: transform .2s var(--ease); box-shadow: var(--shadow-lg);
  }
  .c-shell.is-nav .c-side { transform: none; }
  .c-shell.is-nav .c-nav-mask {
    position: fixed; inset: 0; z-index: 45; background: rgba(21, 29, 60, .4);
  }
  .c-hamb { display: inline-flex; }
  .c-top { gap: 8px; padding: 0 12px; }
  .c-top .search { width: 180px; }
  .c-content { padding: 14px; }
  /* 侧栏收起后内容变窄，筛选栏从 12 栅格降成两列，避免字段被挤成一条 */
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .fld { grid-column: span 1; }
  .filters .fld--w3 { grid-column: span 1; }
  .filters .fld--kw, .filters .fld--date, .filters .fld--btns, .filters .fld--w6 { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .c-top .search { display: none; }
  .c-crumb { white-space: nowrap; overflow: hidden; }
  .c-crumb span { display: none; }   /* 窄屏只留当前页名，避免「后台 / 订单管理」被挤成两行 */
  .c-content { padding: 12px; }
  .filters { grid-template-columns: minmax(0, 1fr); }
  .filters .fld, .filters .fld--kw, .filters .fld--date, .filters .fld--btns, .filters .fld--w6 { grid-column: 1 / -1; }
  .filters .fld--btns .btn { flex: 1; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .page-hd__actions { width: 100%; }
  .page-hd__actions .btn { flex: 1 1 auto; }
}

/* 参考站里「状态 / 对接状态」文字本身可点（采集 §35–§37）：给个手型提示 */
.js-click { cursor: pointer; }
.js-click:hover { filter: brightness(.96); }