/* repairos-pro PC管理后台样式 —— 精斗云风格主题(深蓝侧边栏+蓝主色) */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f2f4f8; color: #303133; font-size: 14px; }

/* ---------- 全局文本光标管控: 只允许输入框出现 I 型光标/文字选中, 其他位置一律禁止 ---------- */
body { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
input, textarea, [contenteditable]:not([contenteditable="false"]) { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

/* ---------- 布局(软件端式: 整页锁定, 内容区内部滚动) ---------- */
html, body { height: 100%; overflow: hidden; }
.layout { display: flex; height: 100vh; }
.sidebar { width: 168px; background: linear-gradient(180deg, #133c63 0%, #103253 60%, #0e2c4a 100%);
  color: #b7c8da; flex-shrink: 0; overflow: visible;
  display: flex; flex-direction: column; transition: width .25s ease; }
.sidebar .logo { height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 1px;
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.sidebar .logo .logo-badge { font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #3a7afe, #6aa1ff);
  border-radius: 8px; padding: 1px 7px; letter-spacing: .5px; box-shadow: 0 2px 8px rgba(58,122,254,.4); }
.sidebar a { display: flex; align-items: center; gap: 10px; padding: 13px 17px; color: #b7c8da;
  text-decoration: none; font-size: 14px; position: relative;
  transition: background .2s, color .2s, padding-left .2s; }
.sidebar a svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; transition: transform .2s; }
.sidebar a:hover svg { transform: scale(1.12); }
.sidebar > a:hover, .nav-item > a:hover { background: rgba(255,255,255,.07); color: #fff; }
.layout:not(.collapsed) .sidebar > a:hover:not(.active),
.layout:not(.collapsed) .nav-item > a:hover:not(.active) { padding-left: 22px; }
.sidebar a.active { background: linear-gradient(90deg, #3a7afe 0%, #2e63d6 100%); color: #fff;
  box-shadow: 0 4px 14px rgba(58,122,254,.35); }
.sidebar a.active::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 2px 2px 0; background: #fff; }
.sidebar a.sub { padding: 10px 16px 10px 36px; font-size: 13px; color: #8ba3bd; }
.sidebar a.sub.logout { color: #d98b8b; }
.sidebar a.sub.logout:hover { background: #0e2d4c; color: #f56c6c; }
.sidebar .sidebar-ft { margin-top: auto; padding: 10px 12px 12px; display: flex; flex-direction: column;
  align-items: center; gap: 6px; flex-shrink: 0; }
.sidebar-ft .sb-toggle { width: 100%; height: 30px; border: none; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.08); color: #8ba3bd; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; }
.sidebar-ft .sb-toggle:hover { background: #3a7afe; color: #fff; }
.sidebar-ft .sb-toggle svg { width: 16px; height: 16px; stroke: currentColor; transition: transform .2s; }
.layout.collapsed .sidebar-ft .sb-toggle svg { transform: rotate(180deg); }
.sidebar-ft .sb-ver { font-size: 11px; color: #56789b; white-space: nowrap; }

/* ---------- 分组菜单 hover 弹出子菜单(flyout: 毛玻璃+滑入动画) ---------- */
.nav-item { position: relative; }
.nav-item > a .arrow { width: 12px; height: 12px; margin-left: auto; opacity: .55; transition: transform .25s, opacity .2s; }
.nav-item:hover > a .arrow { transform: rotate(90deg); opacity: 1; }
.flyout { display: none; position: absolute; left: calc(100% - 8px); top: 0; min-width: 170px;
  background: linear-gradient(180deg, rgba(19,58,94,.94), rgba(13,42,70,.94));
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 7px; z-index: 90;
  box-shadow: 0 16px 40px rgba(2,16,34,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.nav-item:hover .flyout { display: block; animation: flyIn .24s cubic-bezier(.21, .8, .35, 1); }
@keyframes flyIn { from { opacity: 0; transform: translateX(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.flyout::after { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 10px; }  /* 悬停桥, 防止移向子菜单时中断 */
.flyout a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; color: #c3d2e2;
  font-size: 13px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: background .18s, color .18s, padding-left .18s; }
.flyout a:hover { background: rgba(255,255,255,.1); color: #fff; padding-left: 18px; }
.flyout a.active { background: linear-gradient(90deg, rgba(58,122,254,.42), rgba(58,122,254,.16));
  color: #fff; font-weight: 600; }
.flyout a.active::after { content: "•"; margin-left: auto; color: #8ab2ff; }

/* ---------- 侧边栏收起(只留图标) ---------- */
.layout.collapsed .sidebar { width: 60px; }
.layout.collapsed .sidebar .logo { font-size: 0; gap: 0; }
.layout.collapsed .sidebar .logo .logo-badge { font-size: 10px; }
.layout.collapsed .sidebar > a, .layout.collapsed .nav-item > a { justify-content: center; padding: 14px 0; gap: 0; }
.layout.collapsed .sidebar > a span, .layout.collapsed .nav-item > a span,
.layout.collapsed .nav-item > a .arrow, .layout.collapsed .sidebar-ft .sb-ver { display: none; }
.layout.collapsed .sidebar-ft .sb-toggle { width: 34px; }

/* ---------- 收缩模式: flyout 顶部小字显示一级菜单名 ---------- */
.flyout::before { content: none; }
.layout.collapsed .flyout::before { content: attr(data-group); display: block; margin-bottom: 4px;
  padding: 7px 12px 8px; font-size: 11px; letter-spacing: 1px; color: #7f96b0; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,.1); }

.topbar { height: 40px; background: #fff; border-bottom: 1px solid #e6eaf2; flex-shrink: 0;
  display: flex; align-items: center; padding: 0 20px; gap: 16px; }
.tb-title { font-size: 14px; font-weight: 600; color: #243247; }
.tb-search { position: relative; margin-left: auto; width: 300px; }
.tb-search input { height: 28px; border-radius: 14px; background: #f4f6fa; border: 1px solid transparent;
  padding: 0 14px 0 32px; font-size: 12px; transition: background .15s, border-color .15s, background .15s; }
.tb-search input:focus { background: #fff; border-color: #3a7afe; }
.tb-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: #98a4b5; pointer-events: none; }
.tb-search-drop { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(255,255,255,.9); backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.65); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(8,30,60,.18), 0 2px 8px rgba(8,30,60,.08);
  overflow: hidden; z-index: 80; animation: dropIn .2s cubic-bezier(.21, .8, .35, 1); }
@keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.tb-search-drop a { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-size: 13px; color: #303133; text-decoration: none; transition: background .15s, color .15s, padding-left .15s; }
.tb-search-drop a:hover { background: rgba(58,122,254,.1); color: #3a7afe; padding-left: 18px; }
.tb-user { position: relative; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px; user-select: none; }
.tb-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #3a7afe, #6aa1ff);
  color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.tb-name { font-size: 12px; color: #243247; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-user:hover .tb-name { color: #3a7afe; }
.tb-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; width: 156px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.65); border-radius: 10px; padding: 6px;
  box-shadow: 0 14px 36px rgba(8,30,60,.18), 0 2px 8px rgba(8,30,60,.08);
  overflow: hidden; z-index: 80; }
.tb-user:hover .tb-menu { display: block; animation: dropIn .2s cubic-bezier(.21, .8, .35, 1); }
.tb-menu a { display: flex; align-items: center; gap: 6px; padding: 9px 13px; font-size: 13px; color: #303133;
  text-decoration: none; border-radius: 7px; transition: background .15s, color .15s; }
.tb-menu a:hover { background: rgba(58,122,254,.1); color: #3a7afe; }
.tb-menu a.danger { color: #f56c6c; }
.tb-menu a.danger:hover { background: rgba(245,108,108,.1); color: #f56c6c; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.content { padding: 16px 20px; flex: 1; overflow-y: auto; }

/* ---------- 卡片/统计 ---------- */
.card { background: #fff; border-radius: 8px; padding: 18px; border: 1px solid #e9edf4;
  box-shadow: 0 1px 2px rgba(16,42,100,.04); margin-bottom: 16px; }
.card h3 { font-size: 15px; margin-bottom: 12px; border-left: 3px solid #3a7afe; padding-left: 8px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat { background: #fff; border-radius: 8px; padding: 16px; border: 1px solid #e9edf4; box-shadow: 0 1px 2px rgba(16,42,100,.04); }
.stat .num { font-size: 26px; font-weight: bold; color: #3a7afe; }
.stat .num.warn { color: #e6a23c; } .stat .num.danger { color: #f56c6c; } .stat .num.ok { color: #22b07d; }
.stat .label { color: #909399; margin-top: 4px; font-size: 13px; }

/* ---------- 表格 ---------- */
table.grid { width: 100%; border-collapse: collapse; background: #fff; }
table.grid th, table.grid td { padding: 10px 12px; border-bottom: 1px solid #ebeef5; text-align: left; font-size: 13px; }
table.grid th { background: #fafafa; color: #606266; font-weight: 500; }
table.grid tr:hover td { background: #f5f7fa; }

/* ---------- 内容区线条图标(与侧边栏同风格: stroke线性图标) ---------- */
svg.ic { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; flex-shrink: 0; }
.subnav-item { display: inline-flex; align-items: center; gap: 6px; }
.flyout a svg.ic { width: 15px; height: 15px; }
/* 内容区图标着色(与首页快捷操作同色系): 默认主题蓝, 语义色覆盖 */
.content svg.ic { color: #3a7afe; }
.content svg.ic:where(:has(use[href="#i-alert"])) { color: #f08c2e; }
.content svg.ic:where(:has(use[href="#i-check"])) { color: #22b07d; }
.content svg.ic:where(:has(use[href="#i-x"])) { color: #f56c6c; }
/* 实色按钮/激活页签/红标等深色或自带色的场景保持继承色 */
.content .btn.primary svg.ic, .content .btn-primary svg.ic, .content .btn.danger svg.ic,
.content .btn.success svg.ic, .content .btn.warn svg.ic, .content .btn.tab.active svg.ic,
.content .qa-btn svg.ic, .content .lowtag svg.ic { color: currentColor; }

/* ---------- 表单/按钮 ---------- */
.btn { display: inline-block; padding: 7px 16px; border: 1px solid #dcdfe6; border-radius: 4px; background: #fff; color: #606266; cursor: pointer; font-size: 13px; text-decoration: none; }
.btn:hover { color: #3a7afe; border-color: #3a7afe; }
.btn.primary { background: #3a7afe; border-color: #3a7afe; color: #fff; }
.btn.primary:hover { background: #5c90ff; }
.btn.danger { background: #f56c6c; border-color: #f56c6c; color: #fff; }
.btn.success { background: #22b07d; border-color: #22b07d; color: #fff; }
.btn.warn { background: #e6a23c; border-color: #e6a23c; color: #fff; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { padding: 7px 10px; border: 1px solid #dcdfe6; border-radius: 4px; font-size: 13px; outline: none; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: #3a7afe; }
.form-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.form-item { flex: 1; min-width: 160px; }
.form-item label { display: block; margin-bottom: 5px; color: #606266; font-size: 13px; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.toolbar input, .toolbar select { width: auto; }

/* ---------- 状态标签 ---------- */
.tag { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; }
.tag.s10 { background: #fdf6ec; color: #e6a23c; }  /* 待确认 */
.tag.s20 { background: #ecf5ff; color: #409eff; }  /* 已派工 */
.tag.s30 { background: #f0f9eb; color: #67c23a; }  /* 维修中 */
.tag.s40 { background: #fef0f0; color: #f56c6c; }  /* 待质检 */
.tag.s50 { background: #ecf5ff; color: #409eff; }  /* 质检通过 */
.tag.s60 { background: #f4f4f5; color: #909399; }  /* 已结算 */
.tag.s70 { background: #f4f4f5; color: #909399; }  /* 已归档 */
.tag.rev { background: #fef0f0; color: #f56c6c; text-decoration: line-through; }

/* ---------- 弹窗/提示 ---------- */
.modal-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; align-items: flex-start; justify-content: center; overflow: auto; padding: 60px 20px; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 8px; width: 520px; max-width: 100%; padding: 22px; }
.modal h3 { margin-bottom: 16px; font-size: 16px; }
.modal .actions { text-align: right; margin-top: 18px; }
#toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 22px; border-radius: 6px; z-index: 999; display: none; max-width: 80%; }
#toast.err { background: #f56c6c; } #toast.ok { background: #67c23a; }
.pager { margin-top: 14px; text-align: right; color: #909399; }
.pager button { margin: 0 4px; }
.money { font-weight: bold; color: #f56c6c; }
.muted { color: #909399; font-size: 12px; }

/* ---- 合并导航组页内切换条 ---- */
.subnav { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 2px solid #eef0f5; padding-bottom: 10px; }
.subnav-item { padding: 6px 18px; border-radius: 18px; color: #555; text-decoration: none; font-size: 14px; background: #f4f5f9; cursor: pointer; }
.subnav-item:hover { background: #e6eeff; }
.subnav-item.active { background: #3a7afe; color: #fff; font-weight: 600; }

/* 客户列表-关联车辆徽章 */
.veh-badge { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 10px; border-radius: 12px;
  background: #ecf2ff; color: #3a7afe; font-size: 12.5px; font-weight: 600; text-decoration: none; }
a.veh-badge:hover { background: #3a7afe; color: #fff; }

/* 领料配件搜索下拉 + 快捷新增入库 */
.pt-drop { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid #dcdfe6; border-radius: 4px; max-height: 240px; overflow: auto; z-index: 60; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.pt-item { padding: 8px 10px; font-size: 13px; cursor: pointer; border-bottom: 1px solid #f0f2f5; }
.pt-item:hover { background: #f5f7fa; }

/* ---- 申领配件: 库存/工单 模式切换(与小程序端一致) ---- */
.mode-tabs { display: flex; gap: 6px; background: #f4f6fa; padding: 4px; border-radius: 8px; margin-bottom: 14px; }
.mode-tab { flex: 1; text-align: center; padding: 7px 0; border-radius: 6px; font-size: 13px;
  color: #606266; cursor: pointer; user-select: none; }
.mode-tab:hover { color: #3a7afe; }
.mode-tab.on { background: #fff; color: #3a7afe; font-weight: 600; box-shadow: 0 1px 4px rgba(2,16,34,.1); }

/* 候选卡片: 三行信息(名称+售价 / 编码·规格·品牌 / 品质·OE·单位·用过N次) */
.pt-item.pt-card { padding: 9px 11px; }
.pt-line { display: flex; align-items: center; gap: 8px; }
.pt-name { font-size: 13px; color: #243247; font-weight: 500; }
.pt-price { margin-left: auto; color: #f56c6c; font-weight: 600; font-size: 13px; white-space: nowrap; }
.pt-sub { font-size: 11.5px; color: #909399; margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pt-empty { padding: 10px 11px; font-size: 12.5px; color: #909399; }

/* 品质小标(原厂/品牌/副厂/未指定) */
.q-tag { display: inline-block; padding: 0 7px; border-radius: 9px; font-size: 11px; line-height: 18px; }
.q-tag.oem { background: #eaf3ff; color: #2f7bd9; }
.q-tag.brandq { background: #f0f9eb; color: #4a9c2c; }
.q-tag.after { background: #fdf6ec; color: #c8811a; }
.q-tag.none { background: #f4f4f5; color: #a4a8ae; }

/* 折叠「更多信息」入口 */
.more-toggle { margin: 8px 0 12px; font-size: 12.5px; color: #3a7afe; cursor: pointer; user-select: none; }
.more-toggle:hover { text-decoration: underline; }

/* 页内轻量切换条(库存查询/工单配件/出入库流水) */
.tabs-inline { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid #eef0f5; }
.tabs-inline a { padding: 9px 16px; font-size: 13.5px; color: #606266; text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs-inline a:hover { color: #3a7afe; }
.tabs-inline a.on { color: #3a7afe; font-weight: 600; border-bottom-color: #3a7afe; }
.pt-new { color: #1f6ba8; font-weight: 600; }
.qa-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.qa-grid .form-item { flex: 1 1 140px; min-width: 130px; }

/* ---------- 多页签: C2 Chrome精修 · 彩图标连体(灰底连体页签, 选中白底上浮+外翻圆角接入内容区) ---------- */
.page-tabs { position: relative; display: flex; align-items: stretch; background: #eef1f6;
  padding: 0 10px; gap: 0; overflow-x: hidden; overflow-y: hidden; flex-shrink: 0; scrollbar-width: thin; }
.ptab { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 16px; height: 38px;
  font-size: 13px; color: #5a6a7e; cursor: pointer; white-space: nowrap; user-select: none;
  border-radius: 10px 10px 0 0; transition: background .15s ease, color .15s ease; }
.ptab a { color: inherit; text-decoration: none; }
.ptab:hover { color: #33475e; background: #e4e9f2; }
.ptab.active { background: #fff; color: #243247;
  box-shadow: 0 -1px 4px rgba(20,40,80,.05); }
/* 彩图标: 选中页签图标变主题蓝, 文字保持深色 */
.ptab.active > svg.ic { color: #3a7afe; }
/* 外翻圆角: 选中页签底部两侧反弧, 与下方白色内容区连体 */
.ptab .cn { display: none; }
.ptab.active .cn { display: block; position: absolute; bottom: 0; width: 10px; height: 10px; }
.ptab.active .cn.l { left: -10px; background: radial-gradient(circle at 0 0, transparent 9.5px, #fff 10px); }
.ptab.active .cn.r { right: -10px; background: radial-gradient(circle at 100% 0, transparent 9.5px, #fff 10px); }
.pt-x { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 13px; line-height: 1; color: #a8b3c4; flex-shrink: 0;
  visibility: hidden; }  /* 恒占位: 选中/未选中页签同宽, ×仅悬停或选中时显现 */
.ptab:hover .pt-x, .ptab.active .pt-x { visibility: visible; }
.pt-x:hover { background: #e3eaf3; color: #f56c6c; }
.ptab[draggable="true"] { cursor: grab; }
/* 拖动中: 页签本体提起跟随鼠标(白底+投影), 空槽由其余页签回填 */
.ptab.dragging { background: #fff; box-shadow: 0 6px 18px rgba(20,40,80,.22); opacity: 1; cursor: grabbing; }
/* ---------- 页签动效 ---------- */
/* 拖动中的页签不播入场动画: 动画的transform会覆盖拖动位移, 导致选中页签拖动时跳回最左+闪烁 */
.ptab.active:not(.dragging) { animation: tabIn .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes tabIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ptab.closing { overflow: hidden; opacity: 0; white-space: nowrap;
  transition: width .16s ease, padding .16s ease, margin .16s ease, opacity .16s ease; }
.content { animation: contentIn .2s ease; }
@keyframes contentIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ptab.active, .content { animation: none; } }
.ptab > svg.ic { width: 14px; height: 14px; opacity: .8; }
.ptab:hover > svg.ic, .ptab.active > svg.ic { opacity: 1; }
/* ---------- 防切换跳动: 滚动条槽位恒定; 灰底页签栏与白色内容区直接靠色差分隔 ---------- */
.content { scrollbar-gutter: stable; background: #fff; }
/* ---------- 页签宽度: 按标题内容自适应, 超出整体压缩 ---------- */
.ptab { flex: 0 1 auto; min-width: 46px; max-width: 220px; overflow: hidden; }
/* 选中页签与其他页签同宽同尺寸, 仅高亮(白底+蓝图标)区分 */
/* 简称模式: 2字名太短, 稍放宽内边距与间距避免文字和×堆叠(不过度留白; tight/xtight档仍可覆盖) */
.page-tabs.short .ptab { padding: 0 19px; gap: 10px; }
/* 简称紧凑档: 宽松档放不下时的过渡档, 收窄间距但保留图标, 避免直接跳到tight过度收缩 */
.page-tabs.short.compact .ptab { padding: 0 12px; gap: 5px; }
.ptab a { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptab > svg.ic, .ptab .pt-x { flex-shrink: 0; }
/* ---------- 修复: 实色底元素图标被全局着色规则吞掉(蓝底蓝图标隐形) ---------- */
/* 激活页内导航改浅蓝底+蓝字, 图标跟随文字颜色 */
.subnav-item.active { background: #e6eeff; color: #3a7afe; font-weight: 600; }
.content .subnav-item svg.ic, .content .veh-badge svg.ic { color: currentColor; }

/* ---------- 空间不足时收紧页签保名字完整: 先藏图标/减内边距(tight), 再缩字号(xtight) ---------- */
.page-tabs.tight .ptab { padding: 0 8px; gap: 0; }
.page-tabs.tight .ptab > svg.ic { display: none; }
.page-tabs.xtight .ptab { padding: 0 5px; font-size: 12px; min-width: 34px; }
.page-tabs.xtight .ptab a { max-width: none; }
.page-tabs.tight .ptab .pt-x { width: 14px; }
/* tight/xtight 档: × 悬停浮出, 不挤压文字 */
.page-tabs.tight .ptab:hover .pt-x, .page-tabs.tight .ptab.active .pt-x {
  position: absolute; right: 1px; top: 50%; transform: translateY(-50%);
  background: #eef1f6; box-shadow: -6px 0 6px -4px #eef1f6; }
.page-tabs.tight .ptab.active .pt-x { background: #fff; box-shadow: -6px 0 6px -4px #fff; }

/* ---------- 页签悬停 tooltip: 立即显示全名(标题被截断/简称模式时看全称) ---------- */
.ptab-tip { position: fixed; z-index: 9999; display: none; pointer-events: none;
  background: #1f2733; color: #fff; font-size: 12px; line-height: 1; padding: 7px 10px;
  border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 14px rgba(15,23,42,.28);
  animation: tipIn .12s ease; }
@keyframes tipIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ================= 移动端/窄屏适配 (<=820px) ================= */
@media (max-width: 820px) {
  /* 顶栏: 隐藏搜索框与用户名, 标题占满并截断 */
  .topbar { padding: 0 10px; gap: 10px; height: 44px; }
  .tb-search, .tb-name { display: none; }
  .tb-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

  /* 侧边栏 → 抽屉(默认滑出屏幕外, 呼出时盖在内容上) */
  .sidebar, .layout.collapsed .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 130;
    width: 230px !important; transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.2,.8,.3,1);
    box-shadow: 12px 0 40px rgba(2,16,34,.35); }
  .layout.mobile-open .sidebar { transform: none; }
  .mobile-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 120; }
  .mobile-mask.show { display: block; }
  /* 抽屉内忽略收起模式, 始终完整菜单 */
  .layout.collapsed .sidebar .logo { font-size: 16px; gap: 8px; }
  .layout.collapsed .sidebar > a, .layout.collapsed .nav-item > a { justify-content: flex-start; padding: 13px 17px; gap: 10px; }
  .layout.collapsed .sidebar > a span, .layout.collapsed .nav-item > a span,
  .layout.collapsed .nav-item > a .arrow, .layout.collapsed .sidebar-ft .sb-ver { display: revert; }
  .sidebar-ft { flex-direction: row; justify-content: space-between; padding: 10px 16px; }

  /* 触屏无 hover: 子菜单改为手风琴(点击一级菜单展开, 纯CSS类驱动) */
  .nav-item:hover > a .arrow { transform: none; }
  .flyout { position: static; display: none; min-width: 0; padding: 0 0 4px 34px;
    background: transparent; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-item:hover .flyout { display: none; }
  .nav-item.open .flyout { display: block; animation: flyIn .2s cubic-bezier(.21,.8,.35,1); }
  .flyout::before, .flyout::after { content: none !important; }
  .flyout a { padding: 10px 14px; }
  .nav-item.open > a .arrow { transform: rotate(90deg); opacity: 1; }

  /* 内容区: 收窄留白, 页签栏可滑动 */
  .content { padding: 12px; }
  .page-tabs { padding: 0 8px; }
  .card { padding: 14px 12px; }
  .subnav { flex-wrap: wrap; }

  /* 宽表格横向滚动防挤压 */
  .card { overflow-x: auto; }
  table.grid { min-width: 560px; }

  /* 统计卡两列 */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* 弹窗贴边 */
  .modal { width: 100%; padding: 16px; }
  .modal-mask { padding: 20px 10px; }
}

/* 汉堡按钮默认隐藏(桌面), 窄屏显示 */
.tb-burger { display: none; background: none; border: none; padding: 4px; cursor: pointer;
  color: #243247; align-items: center; justify-content: center; border-radius: 6px; }
.tb-burger svg { width: 20px; height: 20px; stroke: currentColor; }
.tb-burger:hover { background: #f0f3f8; }
@media (max-width: 820px) { .tb-burger { display: inline-flex; } }

/* ---------- 大架号(VIN)录入: 车辆档案新建/编辑弹层 ---------- */
.vin-line { display: flex; gap: 8px; align-items: center; }
.vin-line input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, "Courier New", monospace;
  letter-spacing: .6px; text-transform: uppercase; }
.vin-line .btn { flex: 0 0 auto; white-space: nowrap; }
.vin-hint { margin-top: 5px; line-height: 1.5; }
.vin-preview { background: #f5f7fa; border: 1px solid #ebeef5; border-radius: 6px;
  padding: 10px 12px; font-size: 13px; color: #606266; line-height: 2; }
.vin-preview .vp-item { display: inline-block; min-width: 210px; margin-right: 10px; }
.vin-preview b { color: #303133; font-weight: 500; }
.mono { font-family: ui-monospace, Consolas, "Courier New", monospace; letter-spacing: .3px; }

/* ---------- 施工反馈弹窗(工单详情) ---------- */
.fb-bar, .fb-custom { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.fb-list { max-height: 360px; overflow-y: auto; border: 1px solid #ebeef5;
  border-radius: 6px; padding: 2px 10px 10px; }
.fb-g { font-size: 12px; color: #909399; padding: 10px 2px 4px; }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px;
  border-radius: 6px; cursor: pointer; font-size: 13px; }
.fb-row:hover { background: #f5f7fa; }
.fb-row.on { background: #e8f2fb; }
.fb-row .fb-name { flex: 1; color: #303133; }
.fb-row .fb-box { flex: none; width: 22px; height: 22px; line-height: 20px; text-align: center;
  border-radius: 50%; border: 1px solid #c9d8fb; color: #3a7afe; font-size: 13px; }
.fb-row.on .fb-box { background: #3a7afe; border-color: #3a7afe; color: #fff; }