/* ============================================================================
   V18 统一 UI 规范 —— 可执行载体（R3）
   规范文档：docs/architecture/UI_DESIGN_SYSTEM_V18_R3.md
   引入顺序：nav.css -> ui.css -> 页面自有 <style>
   约束：本文件只定义 token / 基样式 / 通用组件类，
        不改任何业务语义 class，不删除任何既有功能入口。
   ========================================================================== */

:root{
  /* ---- 品牌主色（唯一强调色） ---- */
  --navy:#133e5b;
  --navy-strong:#0d3048;
  --navy-soft:#eef4f7;

  /* ---- 中性 ---- */
  --bg:#f5f7fa;
  --card:#ffffff;
  --line:#dfe6ec;
  --line-soft:#edf1f4;
  --soft:#f7fafc;
  --text:#152333;
  --text-2:#526a7b;
  --muted:#708292;
  --input:#fff;

  /* ---- 语义色（状态/风险/优先级专用） ---- */
  --ok:#277348;      --ok-bg:#eaf7ee;     --ok-line:#b9dfc7;
  --warn:#8a6212;    --warn-bg:#fff5de;   --warn-line:#e7c88a;
  --danger:#c21420;  --danger-bg:#fff0f1; --danger-line:#ed7f85;
  --info:#33576d;    --info-bg:#eef4f7;   --info-line:#c6d8e4;
  --neutral:#687781; --neutral-bg:#eef1f3;--neutral-line:#d3dadd;

  /* ---- 字号（6 级，禁止新增） ---- */
  --fs-display:22px;
  --fs-title:16px;
  --fs-body-lg:14px;
  --fs-body:13px;
  --fs-cap:12px;
  --fs-micro:11px;

  /* ---- 字体 ---- */
  --font:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,Arial,sans-serif;
  --font-num:Consolas,"SF Mono",monospace;

  /* ---- 圆角（4 级） ---- */
  --r-lg:12px;
  --r-md:8px;
  --r-sm:6px;
  --r-pill:999px;

  /* ---- 间距 ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* ---- 阴影（仅浮层） ---- */
  --sh-pop:0 22px 60px rgba(15,30,45,.32);
  --sh-menu:0 8px 22px rgba(30,65,88,.12);
}

/* ============================ 布局 ============================ */
/* 主内容容器（UAT-ALL-01 A 统一公式）：
   全站内容区统一为「物流工作台同款」宽度公式 —— 宽屏上限 2180px，窄屏左右留
   clamp(32px,6vw,112px) 边距，超宽屏左右留白随视口自然增长。与 nav.css 的导航
   padding 公式配套：在任一宽度下，导航 brand 与页面内容左/右边缘保持同一条线
   （切换模块内容不左右跳动），同时解决 1920 / 2560 屏两侧大片空白问题。 */
.app-main{
  width:min(2180px,calc(100vw - clamp(32px,6vw,112px)));
  max-width:none;margin:0 auto;
  padding:18px 0 48px;
}

/* 页面头 */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.page-head h1{margin:0;font-size:var(--fs-display);font-weight:700;color:var(--text);text-wrap:balance}
.page-sub{margin:4px 0 0;font-size:var(--fs-cap);color:var(--muted);line-height:1.55;text-wrap:pretty}
.page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* 二级导航（一级导航见 nav.css，禁止页内覆盖） */
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.subnav button{
  min-height:36px;padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;color:var(--text-2);font-size:var(--fs-body);font-weight:700;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.subnav button:hover{background:var(--soft)}
.subnav button.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* ============================ 基样式 ============================ */
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--fs-body-lg);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1{font-size:var(--fs-display);font-weight:700;margin:0;text-wrap:balance}
h2{font-size:18px;font-weight:700;margin:0 0 12px}
h3{font-size:var(--fs-title);font-weight:700;margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted);font-size:var(--fs-cap);line-height:1.55}
.mono{font-family:var(--font-num)}
.hidden{display:none!important}

/* ============================ 卡片 ============================ */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4);margin-bottom:var(--sp-3);
}
.card>h3+.card-body{margin-top:var(--sp-3)}

/* 详情：主区 + 侧栏 */
.detail-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:14px;align-items:start}
.detail-layout>*{min-width:0}
@media(max-width:900px){ .detail-layout{grid-template-columns:1fr} }

/* ============================ 按钮 ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:9px 15px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;color:var(--text);font-family:inherit;font-size:var(--fs-body-lg);
  font-weight:700;line-height:1.2;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.btn:hover{background:var(--soft);border-color:#c3d2dc}
.btn:active{transform:scale(.96)}
.btn:focus-visible{outline:2px solid var(--info-line);outline-offset:2px}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--navy-strong);border-color:var(--navy-strong)}
.btn.danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.btn.danger:hover{background:#fbe2e3}
.btn.small{min-height:34px;padding:7px 11px;font-size:var(--fs-body)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ============================ 表单 ============================ */
input,select,textarea{
  min-height:40px;padding:9px 12px;border:1px solid #cad7df;border-radius:var(--r-md);
  background:var(--input);font-family:inherit;font-size:var(--fs-body-lg);color:var(--text);
}
textarea{min-height:82px;line-height:1.5;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--info-line);outline-offset:1px;border-color:var(--info-line);
}
input[readonly]{background:#f2f5f7}
.is-auto{background:#f2f5f7;color:#334155}
label{display:block;font-size:var(--fs-cap);color:#607586;margin-bottom:5px}

/* ============================ 状态标签 ============================ */
.tag{
  display:inline-block;font-size:var(--fs-cap);line-height:1.4;
  border-radius:var(--r-pill);padding:3px 9px;border:1px solid transparent;white-space:nowrap;
}
.tag.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.tag.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.tag.danger{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-line)}
.tag.info{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.tag.neutral{color:var(--neutral);background:var(--neutral-bg);border-color:var(--neutral-line)}

/* ============================ 表格 ============================ */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-body);vertical-align:top}
th{background:var(--soft);color:var(--text-2);font-weight:700;white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:#f8fbfd}
.table-wrap{overflow-x:auto}

/* 分页 */
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px;
  font-size:var(--fs-body);color:var(--muted)}

/* ============================ 折叠面板 ============================ */
.fold{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
.fold+.fold{margin-top:8px}
.fold>summary{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  min-height:40px;padding:9px 13px;font-size:var(--fs-body-lg);font-weight:700;
  cursor:pointer;list-style:none;background:#fff;color:var(--text);
}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary:hover{background:var(--soft)}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold-body{padding:12px 13px;background:#fbfdfe}

/* ============================ 弹窗 ============================ */
.modal-mask{
  position:fixed;inset:0;background:rgba(18,32,45,.42);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;padding:64px 16px;overflow:auto;
}
.modal{
  width:min(560px,100%);background:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sh-pop);padding:var(--sp-4);
}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.modal-head h3{font-size:var(--fs-title)}
.modal.danger .modal-head h3{color:var(--danger)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;flex-wrap:wrap}

/* ============================ 状态区（加载/空/错误/成功） ============================ */
.loading{padding:18px;text-align:center;color:var(--muted);font-size:var(--fs-body)}
.empty{
  padding:18px;text-align:center;color:var(--muted);font-size:var(--fs-body);
  border:1px dashed var(--line);border-radius:var(--r-md);margin-top:10px;background:#fbfdfe;
}
.empty .empty-actions{margin-top:10px}
.alert{
  border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
  font-size:var(--fs-body);line-height:1.6;margin-top:10px;
}
.alert.error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.alert.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.alert.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info)}
.alert .alert-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}

/* ============================ 指标块 ============================ */
.metric-grid{display:grid;gap:10px}
.metric-grid .metric{
  border:1px solid var(--line);background:#fafcfd;border-radius:var(--r-md);padding:11px;
}
.metric .k{font-size:var(--fs-cap);color:#617687}
.metric .v{font-size:18px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}
.metric .sub{font-size:var(--fs-micro);color:#8293a1;margin-top:3px}

/* ============================================================================
   UI-REFRESH-01 · 全站统一操作规范（在 R3/R4 基础上补齐，不推翻既有设计）
   只新增可复用类与轻量交互助手样式；不改任何业务语义 class，
   不删除任何既有功能入口。各模块可主动 opt-in，未 opt-in 的页面不受影响。
   ========================================================================== */

/* ---- 1) 返回原位置条（统一 return_to / return_label 契约的可见载体） ----
   在已有 return-banner 基础上提供更强可见性：图标 + 加粗标签 + 明确按钮。
   放在导航下方、页面主体之上，滚动时始终最先看到。 */
.return-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;margin:0 0 12px;
  background:var(--info-bg);border:1px solid var(--info-line);border-radius:var(--r-md);
  font-size:var(--fs-body);color:var(--info);
}
.return-bar .return-back{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:6px 13px;border:1px solid var(--info-line);border-radius:var(--r-md);
  background:#fff;color:var(--info);font-weight:700;text-decoration:none;white-space:nowrap;
}
.return-bar .return-back:hover{background:var(--info-bg);text-decoration:none}
.return-bar .return-context{color:var(--text-2)}
.return-bar .return-context b{color:var(--text)}

/* ---- 2) 详情高位操作条（把常用操作放到详情顶部，次要操作折叠） ---- */
.detail-quickbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;margin:0 0 10px;
  background:var(--soft);border:1px solid var(--line-soft);border-radius:var(--r-md);
}
.detail-quickbar .qb-label{
  font-size:var(--fs-cap);color:var(--muted);font-weight:700;margin-right:2px;
}
.detail-quickbar .qb-spacer{flex:1}

/* 折叠后仍能一眼看到数量的胶囊入口（关联事项 / 关联产品） */
.entry-chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;color:var(--text-2);font-size:var(--fs-body);font-weight:700;cursor:pointer;
  text-decoration:none;
}
.entry-chip:hover{background:var(--soft);text-decoration:none;border-color:#c3d2dc}
.entry-chip .entry-chip-count{
  display:inline-block;min-width:20px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--navy);color:#fff;font-size:var(--fs-micro);text-align:center;
}
.entry-chip.is-empty .entry-chip-count{background:var(--neutral)}

/* ---- 3) 统一空结果 / 异常五态提示 ----
   state 五态严格区分，语义与标题一一对应；不把"身份缺失"伪装成"功能正常"。 */
.state-block{
  padding:18px;text-align:center;border-radius:var(--r-md);margin-top:10px;
  border:1px dashed var(--line);background:#fbfdfe;
}
.state-block .state-title{font-size:var(--fs-body-lg);font-weight:700;color:var(--text-2)}
.state-block .state-desc{margin-top:6px;font-size:var(--fs-cap);color:var(--muted);line-height:1.6}
.state-block .state-actions{margin-top:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
/* empty      = 真正无记录（中性） */
.state-block[data-state="empty"]{border-color:var(--line)}
/* unlinked   = 有记录但未正式关联（信息态，提示可人工确认） */
.state-block[data-state="unlinked"]{border-color:var(--info-line);background:var(--info-bg)}
.state-block[data-state="unlinked"] .state-title{color:var(--info)}
/* source-down = 数据源不可用（警告态，明确"不是没有，是读不到"） */
.state-block[data-state="source-down"]{border-color:var(--warn-line);background:var(--warn-bg)}
.state-block[data-state="source-down"] .state-title{color:var(--warn)}
/* identity   = 权限 / 身份不确定（危险态，禁止伪装成正常命中） */
.state-block[data-state="identity"]{border-color:var(--danger-line);background:var(--danger-bg)}
.state-block[data-state="identity"] .state-title{color:var(--danger)}
/* filtered   = 筛选导致没有结果（给出清除筛选入口） */
.state-block[data-state="filtered"]{border-color:var(--neutral-line);background:var(--neutral-bg)}
.state-block[data-state="filtered"] .state-title{color:var(--neutral)}

/* ---- 4) 统一保存反馈（就地反馈，不关闭当前对象） ---- */
.save-feedback{
  display:none;align-items:center;gap:6px;margin-top:8px;
  padding:8px 11px;border-radius:var(--r-sm);font-size:var(--fs-body);font-weight:700;
}
.save-feedback.show{display:flex}
.save-feedback.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.save-feedback.err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger)}
.save-feedback.pending{background:var(--info-bg);border:1px solid var(--info-line);color:var(--info)}

/* ---- 5) 折叠头部统一样式（折叠与展开操作规范） ---- */
.fold-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;
  user-select:none;
}
.fold-head .fold-caret{
  display:inline-block;transition:transform .15s ease;color:var(--muted);font-size:12px;
}
.fold-head[aria-expanded="true"] .fold-caret{transform:rotate(90deg)}

/* ---- 6) 搜索与筛选交互规范 ---- */
.search-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.search-row input{min-width:240px;flex:1;max-width:520px}
.search-hint{font-size:var(--fs-micro);color:var(--muted)}

/* ---- 7) 状态语义图例（统一颜色与含义） ---- */
.state-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:var(--fs-cap);color:var(--text-2)}
.state-legend .lg{display:inline-flex;align-items:center;gap:6px}
.state-legend .lg::before{content:"";width:10px;height:10px;border-radius:3px;display:inline-block}
.state-legend .lg.ok::before{background:var(--ok)}
.state-legend .lg.warn::before{background:var(--warn)}
.state-legend .lg.danger::before{background:var(--danger)}
.state-legend .lg.info::before{background:var(--info)}
.state-legend .lg.neutral::before{background:var(--neutral)}

/* ---- 8) 窄屏兼容：详情高位操作条与返回条自动换行 ---- */
@media(max-width:760px){
  .detail-quickbar{padding:8px 10px}
  .detail-quickbar .qb-spacer{display:none}
  .return-bar{padding:8px 11px}
  .search-row input{min-width:0;width:100%;max-width:none}
}