/* drawer.css — 右侧抽屉：新建 / 编辑 / 详情共用（依赖 base/layout/components 之后引入） */
#drawer-host{position:fixed;inset:0;z-index:7000;pointer-events:none}
#drawer-host:empty{display:none}
.drawer-mask{position:absolute;inset:0;background:rgba(20,36,58,.42);pointer-events:auto;animation:dw-fade .18s ease-out}
.drawer{position:absolute;right:0;top:0;bottom:0;background:var(--bg);border-left:1px solid var(--line);
  box-shadow:-10px 0 34px rgba(14,40,80,.16);display:flex;flex-direction:column;pointer-events:auto;
  animation:dw-in .22s cubic-bezier(.2,.8,.3,1)}
.drawer-md{width:920px;max-width:94vw}
.drawer-wide{width:min(88vw,1360px)}
.drawer-full{width:calc(100vw - 40px)}
@keyframes dw-fade{from{opacity:0}to{opacity:1}}
@keyframes dw-in{from{transform:translateX(38px);opacity:.55}to{transform:none;opacity:1}}

/* ---------- 头部 ---------- */
.drawer-h{flex:none;background:#fff;border-bottom:1px solid var(--line);padding:10px 16px 9px}
.dh-top{display:flex;align-items:center;gap:9px;min-height:30px;flex-wrap:wrap}
.dh-top .sq{width:10px;height:10px;background:var(--blue);border-radius:2px;flex:none}
.dh-top b{font-size:var(--fs-lg);font-weight:600;color:var(--t1);white-space:nowrap}
.dh-top .code{font-size:var(--fs-md);font-weight:600;color:var(--t1);font-variant-numeric:tabular-nums}
.dh-top .dh-sub{font-size:var(--fs-sm);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-top .sp{flex:1;min-width:8px}
.dh-top .dh-close{padding:4px 7px;color:var(--t2)}
.dh-top .dh-close:hover{color:var(--warn);border-color:#F3C9B8}
.dh-acts{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line-2)}
.dh-acts:empty{display:none}
.dh-acts .sep{width:1px;height:16px;background:var(--line);flex:none}

/* ---------- 主体 ---------- */
.drawer-b{flex:1;min-height:0;overflow:auto;padding:14px 16px 30px}
.drawer-b .h1{display:none}                    /* 标题已在抽屉头部 */
.drawer-b>*:first-child{margin-top:0}
.drawer-f{flex:none;background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:8px}
.drawer-f .sp{flex:1}

/* 抽屉内三栏：按抽屉自身宽度排布，不受视口 media 影响 */
.drawer .triple{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr) 190px;gap:12px}
.drawer[data-size="md"] .triple,.drawer[data-size="compact"] .triple{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.drawer[data-size="md"] .triple>.log,.drawer[data-size="compact"] .triple>.log{grid-column:1/-1}
@media(max-width:1100px){
  .drawer .triple{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .drawer .triple>.log{grid-column:1/-1}
}

/* ---------- 详情 / 编辑切换 ---------- */
.dw-tabs{display:flex;align-items:center;gap:3px;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:3px;margin-bottom:11px}
.dw-tabs .tb{padding:6px 15px;font-size:var(--fs-sm);color:var(--t2);border-radius:3px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;user-select:none}
.dw-tabs .tb:hover{color:var(--blue-d);background:var(--blue-xl)}
.dw-tabs .tb.on{background:var(--blue-l);color:var(--blue-d);font-weight:500}
.dw-tabs .tb .i{width:12px;height:12px}
.dw-tabs .tip{margin-left:auto;font-size:var(--fs-sm);color:var(--t3);padding-right:9px}

/* 整单编辑态：表单占满抽屉宽度，区块字段放宽 */
.dw-edit{max-width:1180px}
.dw-edit .editbox{margin-bottom:11px}
.dw-edit .editbox .field-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dw-savebar{position:sticky;bottom:-30px;display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--blue-b);border-radius:4px;padding:10px 13px;margin-top:12px;
  box-shadow:0 -4px 14px rgba(14,63,140,.07)}
.dw-savebar .hint{font-size:var(--fs-sm);color:var(--t2)}
.dw-savebar .sp{flex:1}

/* 抽屉内表单两列区块在窄抽屉里改单列 */
.drawer[data-size="md"] .dw-edit .field-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){
  .drawer-md,.drawer-wide{width:100vw;max-width:100vw}
  .drawer-full{width:100vw}
  .drawer-b{padding:12px 11px 24px}
  .drawer .triple{grid-template-columns:1fr}
  .drawer .triple>.log{grid-column:auto}
  .dw-edit .field-grid.c3,.dw-edit .field-grid.c2{grid-template-columns:1fr}
}

/* 新建/编辑表单骨架：整页两列；中等抽屉内改单列，保证箱封明细表格列宽 */
.form-cols{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:start}
.drawer[data-size="md"] .form-cols{grid-template-columns:1fr}
@media(max-width:760px){.form-cols{grid-template-columns:1fr}}

/* 抽屉内提交条：改为实底贴底操作条，避免半透明渐变浮在表单中间 */
.drawer-b .form-foot{position:sticky;bottom:-30px;z-index:3;margin:14px -16px -30px;
  padding:11px 16px;background:#fff;border-top:1px solid var(--line);border-radius:0}

/* 抽屉打开时锁定底层页面滚动 */
body.drawer-open .content{overflow:hidden}

/* ---------- 档案新增 / 编辑表单：按抽屉实际宽度自适应列数 ---------- */
/* 抽屉宽度有三档（wide / 全宽 / 窄屏 100vw），且用户可手动切全宽，
   所以用容器查询跟随「抽屉内容区」真实宽度，而不是视口断点 */
.arch-form{container-type:inline-size}
/* 默认（不支持容器查询时的兜底）：三列，比原来的两列省空间 */
.arch-form .field-grid.c2{grid-template-columns:repeat(3,minmax(0,1fr))}
.arch-form .field-grid.cert-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 备注 / 关联车辆等宽字段始终占满整行 */
.arch-form .field-grid>.fwide{grid-column:1/-1}
/* 内联新建面板（新建车队 / 车辆）字段少且是嵌入卡片，固定两列，避免输入框被拉得过长 */
.arch-form .inline-box .field-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:1080px){
  .arch-form .field-grid.c2{grid-template-columns:repeat(4,minmax(0,1fr))}
  .arch-form .field-grid.cert-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container (max-width:839px){
  .arch-form .field-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arch-form .field-grid.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:560px){
  .arch-form .field-grid.c2,
  .arch-form .field-grid.cert-grid,
  .arch-form .inline-box .field-grid.c2{grid-template-columns:1fr}
}

/* 客户表单左右栏：左栏自成容器，固定 2 列，
   不再受弹框整体宽度影响被顶成 4 列（右栏占位后左栏空间有限） */
.cust-l{container-type:inline-size}
.cust-l .field-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}