/* ============================================================================
 * 安修宝 · 后台换皮样式（admin-skin.css）
 * ---------------------------------------------------------------------------
 * 定位：把 **现有** 后台（server/admin/index.html）的外观换成新设计，
 *       全程 **只加样式、不动一行 DOM 结构、不动任何 id / 接口 / 业务逻辑**。
 *       这样做的好处：现有 4 个测试套件（272 条断言）全部继续有效。
 *
 * 引入方式：加在 index.html 的 <style> **之后**（靠后的样式表优先级更高）
 *   <link rel="stylesheet" href="/admin/assets/admin-skin.css">
 *
 * 覆盖对象：现有类名 —— header / nav button / main / .panel / table / .btn /
 *           .tag / .cards / .card / .form-row / .bar / .empty / .modal / .toast
 * 新增外观：顶部横排菜单 → 左侧竖排栏（与阿土哥确认的样板一致）
 *
 * 【v1 · 2026-09-13】
 * ============================================================================ */

/* ---------- 1. 令牌重定义：改这一组，全站配色立刻统一 -------------------- */
:root{
  /* 主色：低饱和商务蓝（原 #1F4E79 偏艳，换 #2C5C8F） */
  --pri:  #2C5C8F;     /* 现有 CSS 全站都用 var(--pri)，改它即全站生效 */
  --pri2: #244E7A;
  --bg:   #F4F6F9;
  /* 语义色：低饱和版（原来 #e74c3c/#27ae60/#f39c12 偏荧光） */
  --red:    #B3453C;
  --green:  #2E7D5B;
  --orange: #B7791F;
  /* 新增令牌 */
  --sk-border:   #E5EAF0;
  --sk-border-s: #CFD6DF;
  --sk-text:     #1F2937;
  --sk-text-sub: #6B7480;
  --sk-text-mute:#9AA3AE;
  --sk-surface:  #FFFFFF;
  --sk-head-bg:  #F7F9FC;
  --sk-weak-pri: #EAF1F8;
  --sk-weak-red: #FBEDEC;
  --sk-weak-grn: #E8F3EE;
  --sk-weak-org: #FBF3E4;
  --sk-weak-neu: #F1F3F6;
  --sk-radius: 10px;
  --sk-radius-s: 6px;
  --sk-shadow: 0 1px 2px rgba(31,41,55,.05);
  --sk-shadow-lg: 0 12px 32px rgba(31,41,55,.18);
  /* 20260913 阿土哥：侧栏收窄一点（216→194），与放大的菜单字号比例更协调 */
  --sk-nav-w: 194px;
  --sk-nav-top: 64px;
}

/* ---------- 2. 全局基础 ------------------------------------------------- */
body{
  background: var(--bg); color: var(--sk-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* 数字等宽：金额列上下对齐 */
.card .num, table td, .stat-x__value { font-variant-numeric: tabular-nums; }

/* ---------- 3. 骨架：顶部 header + 横排 nav → 左侧栏 + 右侧内容 ---------- */
/* header 变窄栏顶部品牌区 */
header{
  position: fixed; left: 0; top: 0; width: var(--sk-nav-w); height: var(--sk-nav-top);
  padding: 0 16px; z-index: 60;
  background: linear-gradient(180deg,#1F3B57 0%,#1A3149 100%) !important;
  color: #fff; display: flex; align-items: center; justify-content: flex-start;
  border-bottom: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
/* 品牌名：216px 窄栏里必须强制单行，否则会被挤成 7 行撑破品牌区
   ⚠ 坑：.logo 本身也是 <div>，所以"header > div"会连它一起选中 →
     必须用 :last-child 精确只选用户区，否则品牌名会被挪到侧栏底部 */
header .logo{
  position: static !important;
  font-size: 14px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  display: flex; align-items: center; gap: 8px;   /* 20260913 阿土哥：Logo 放在文字前面 */
}
/* 20260913 阿土哥：品牌区加 Logo（放在「安修宝-后台管理」前面） */
header .logo img{
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  display: block; background: #fff;
}
/* 用户区 + 注销：从品牌区挪到侧栏最底部，正好填住菜单下方那片空白 */
header > div:last-child{
  position: fixed; left: 0; bottom: 0; width: var(--sk-nav-w);
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  /* 20260913 阿土哥：底部用户条改成浅底 + 深蓝文字
     （深蓝字放深蓝底上会看不见，所以底色同步改成浅蓝） */
  background: #E7EEF6 !important;
  border-top: 1px solid #C9DAEA !important;
  margin-left: 0 !important;
}
header .user{
  font-size: 12px; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0;
  color: var(--pri) !important; opacity: 1 !important; font-weight: 600;
}
/* 注销按钮：行内样式是白字，这里用 !important 覆盖成「白底 + 深蓝字」 */
header button{
  background: #fff !important; color: var(--pri) !important;
  border: 1px solid var(--pri) !important; border-radius: 6px !important; font-weight: 600;
}
header button:hover{ background: #DCE8F5 !important; }
header button{ flex: 0 0 auto; white-space: nowrap; }

/* nav 变左侧竖排菜单：46px 高 + 4px 间距（原来顶部横排、上下挤） */
nav{
  position: fixed; left: 0; top: var(--sk-nav-top); bottom: 0; width: var(--sk-nav-w);
  z-index: 55; padding: 12px 10px 12px; overflow-y: auto; overflow-x: hidden;
  /* 底边停在用户条之上：否则最后几个菜单会被用户条压住 */
  bottom: 46px !important;
  background: linear-gradient(180deg,#1F3B57 0%,#1A3149 100%);
  display: flex; flex-direction: column; gap: 4px;
  /* ⚠ 关键修复：原样式里留有 flex-wrap:wrap（老版顶部横排菜单换行用的），
     改成竖排后它会让菜单"折到第二列"，被 overflow 藏起来 —— 窗口一矮，
     后面几个主菜单和子菜单就整个消失（阿土哥遇到的正是这个）。
     竖排栏必须 nowrap。 */
  flex-wrap: nowrap !important;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
}
/* 侧栏滚动条做细做明显：菜单超过窗口高度时能看出还能往下滚 */
nav::-webkit-scrollbar{ width: 8px; }
nav::-webkit-scrollbar-track{ background: transparent; }
nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.26); border-radius: 4px; }
nav::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.4); }
/* 菜单项一律不收缩、不换行 */
nav > button, nav > .nav-sub-group{ flex: 0 0 auto !important; }
/* 注销按钮：底部用户条里的样式 */
header button:hover{ background: rgba(255,255,255,.22) !important; }
nav button{
  display: flex !important; align-items: center; gap: 10px; width: 100%;
  height: 46px !important; padding: 0 12px !important; margin: 0;
  font-size: 16px !important; color: #B9C9D9 !important;   /* 20260913 阿土哥：菜单字号加大 */
  background: none !important; border: 0 !important; border-radius: 8px !important;
  cursor: pointer; text-align: left; flex: 0 0 auto;
  transition: background .15s, color .15s;
}
nav button:hover{ background: rgba(255,255,255,.07) !important; color: #fff !important; }
nav button.on{
  background: #2A4A69 !important; color: #fff !important; font-weight: 600 !important;
  box-shadow: inset 3px 0 0 0 #6FA8DC;
}
/* 菜单图标：单色线性 SVG（用 mask 让图标跟随文字颜色） */
nav button::before{
  content: ""; flex: 0 0 18px; width: 18px; height: 18px;
  background-color: currentColor; opacity: .85;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
}
nav button.on::before{ opacity: 1; }
nav button[data-tab="dash"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.5'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.5'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.5'/%3E%3C/svg%3E"); }
nav button[data-tab="orders"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Ccircle cx='3.5' cy='6' r='1.3'/%3E%3Ccircle cx='3.5' cy='12' r='1.3'/%3E%3Ccircle cx='3.5' cy='18' r='1.3'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Ccircle cx='3.5' cy='6' r='1.3'/%3E%3Ccircle cx='3.5' cy='12' r='1.3'/%3E%3Ccircle cx='3.5' cy='18' r='1.3'/%3E%3C/svg%3E"); }
nav button[data-tab="mtm"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13l2 2 4-4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13l2 2 4-4'/%3E%3C/svg%3E"); }
nav button[data-tab="parts"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
nav button[data-tab="fin2"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9v6M18 9v6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9v6M18 9v6'/%3E%3C/svg%3E"); }
nav button[data-tab="staff"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
nav button[data-tab="customers"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15'/%3E%3Cpath d='M16 10h3a2 2 0 0 1 2 2v9M8 8h4M8 12h4M2 21h20'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15'/%3E%3Cpath d='M16 10h3a2 2 0 0 1 2 2v9M8 8h4M8 12h4M2 21h20'/%3E%3C/svg%3E"); }
nav button[data-tab="pwreset"]::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 15v2'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 15v2'/%3E%3C/svg%3E"); }

/* main 右移，给左侧栏让位 */
/* ★20260922 阿土哥报「侧栏挡住内容、左侧显示不全」—— 真凶与修复：
   ⚠ 原写法只给 `main` 加 margin-left，但实测（F12 Elements）显示页面内容块
   （section#tab-staff / #tab-customers 以及 #f2-* 等）是 <div id="mainView"> 的【直接子元素】，
   并不在 <main> 里面 → 那条让位规则对这些内容块【根本不生效】→ 内容从 x=0 开始 → 被侧栏盖住。
   修法：不再依赖包裹结构，直接按【内容块自身】让位；main 的让位取消，避免嵌套时出现双重左边距
   （两种情况都正确：内容在 main 内 → main 0 + 内容块 194 = 194；不在 main 内 → 内容块 194）。 */
main{ margin-left: var(--sk-nav-w, 194px) !important; padding: 24px; max-width: none; }
/* ★★20260922 真凶（F12 Elements 实测确认）：
   「员工管理」section#tab-staff、「客户管理」section#tab-customers 以及财务管理子块 #f2-*
   被误放在了 </main> 之后（直接挂在 <body> 下），而让位规则只挂在 main 上 → 管不到它们
   → 这些页面内容从 x=0 开始 → 被左侧固定栏盖住（阿土哥报的「左侧有部分内容无法显示」）。
   修法：按【实际 DOM 位置】补让位 —— 结构零改动、风险最低，所有散落块一次覆盖。
   （同时保留 main 的让位，覆盖 tab-dash 等正常在 main 内的页面。） */
body > section.tab,
body > div[id^="f2-"],
body > div#mainView > main{ margin-left: var(--sk-nav-w, 194px) !important; }

/* ---------- 4. 面板 = 卡片 ------------------------------------------------- */
.panel{
  background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow); padding: 20px; margin-bottom: 20px;
}
.panel h3{
  font-size: 15px; font-weight: 600; color: var(--sk-text); border-left: 3px solid var(--pri);
  padding-left: 10px; margin-bottom: 16px; line-height: 1.4;
}
.panel h3 span{ font-weight: 400; }

/* 数据卡：数字基线统一 + 语义色左边框 */
.cards{ gap: 20px !important; margin-bottom: 20px !important; }
.card{
  background: var(--sk-surface); border: 1px solid var(--sk-border); border-left: 3px solid var(--pri);
  border-radius: var(--sk-radius); box-shadow: var(--sk-shadow); padding: 18px 20px !important;
  transition: box-shadow .18s, transform .18s;
}
.card:hover{ box-shadow: 0 2px 10px rgba(31,41,55,.07); transform: translateY(-1px); }
.card .num{ font-size: 28px !important; font-weight: 700; line-height: 38px; letter-spacing: -.5px; }
.card .num.red   { color: var(--red); }
.card .num.green { color: var(--green); }
.card .num.orange{ color: var(--orange); }
.card .lbl{ color: var(--sk-text-sub); font-size: 13px; margin-top: 6px; }

/* ---------- 5. 表格：吸顶表头 + 单元格居中 + 长文本折行 + 末行不画线 -------- */
.panel table{ width: 100%; border-collapse: separate; border-spacing: 0; }
.panel table th{
  background: var(--sk-head-bg); color: var(--sk-text-sub); font-weight: 600; font-size: 13px;
  text-align: center; padding: 9px 9px; border-bottom: 1px solid var(--sk-border);
  white-space: nowrap; position: sticky; top: 0; z-index: 1; letter-spacing: .2px;
}
.panel table td{
  padding: 9px 9px; border-bottom: 1px solid var(--sk-border);
  text-align: center; vertical-align: middle; word-break: break-word; font-size: 13.5px;
}
.panel table tbody tr:last-child td,
.panel table tr:last-child td{ border-bottom: 0; }
.panel table tbody tr:hover,
.panel table tr:hover{ background: var(--sk-weak-pri); }
/* ⚠ 已撤掉「操作列吸附冻结」：阿土哥反馈冻结列会挡住其它列（视觉上像坏了）。
   改为：表格更紧凑 + 横向滚动条做明显，需要看右边时正常滚动即可。 */
.panel::-webkit-scrollbar{ height: 10px; }
.panel::-webkit-scrollbar-track{ background: var(--sk-head-bg); border-radius: 5px; }
.panel::-webkit-scrollbar-thumb{ background: #B9C4D0; border-radius: 5px; }
.panel::-webkit-scrollbar-thumb:hover{ background: #96A3B2; }

/* ---------- 6. 按钮：确认(蓝)/成功(绿)/危险(红)/普通(灰) 四档 ---------------- */
.btn{
  border: 1px solid var(--pri) !important; border-radius: var(--sk-radius-s) !important;
  padding: 8px 14px !important; font-size: 14px !important; background: var(--pri) !important;
  color: #fff !important; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn:hover{ background: var(--pri2) !important; border-color: var(--pri2) !important; }
.btn.gray { background: var(--sk-surface) !important; color: var(--sk-text) !important; border-color: var(--sk-border-s) !important; }
.btn.gray:hover{ background: #F3F6FA !important; border-color: var(--pri) !important; }
.btn.red  { background: var(--sk-surface) !important; color: var(--red) !important; border-color: #DCB6B2 !important; }
.btn.red:hover{ background: var(--sk-weak-red) !important; }
.btn.green{ background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.btn.green:hover{ filter: brightness(.94); }
.btn.sm{ padding: 5px 11px !important; font-size: 13px !important; }

/* ---------- 7. 状态标签：5 色统一口径 ------------------------------------- */
.tag{
  display: inline-flex !important; align-items: center; gap: 4px; padding: 3px 10px !important;
  border-radius: 999px !important; font-size: 13px !important; line-height: 1.6;
  white-space: nowrap; border: 1px solid transparent;
}
.tag.s-red   { color: var(--red)    !important; background: var(--sk-weak-red) !important; border-color: #EBC9C6 !important; }
.tag.s-green { color: var(--green)  !important; background: var(--sk-weak-grn) !important; border-color: #C7E2D6 !important; }
.tag.s-orange{ color: var(--orange) !important; background: var(--sk-weak-org) !important; border-color: #EBD8B0 !important; }
.tag.s-blue  { color: var(--pri)    !important; background: var(--sk-weak-pri) !important; border-color: #C9DAEA !important; }
.tag.s-gray  { color: var(--sk-text-sub) !important; background: var(--sk-weak-neu) !important; border-color: #DCE1E7 !important; }

/* ---------- 8. 筛选条 / 表单 --------------------------------------------- */
/* 筛选条统一：控件等高、间距一致、和下方表格有分隔线（原来靠元素自身样式，各页不齐） */
.bar{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 0 14px; margin-bottom: 16px; border-bottom: 1px solid var(--sk-border);
}
.bar > label{ font-size: 13px; color: var(--sk-text-sub); margin: 0; white-space: nowrap; }
.bar input, .bar select{ height: 34px; }
.bar .btn{ height: 34px; padding: 0 14px !important; }
.bar .btn.sm{ height: 30px; }
.bar .muted{ font-size: 12px; }
/* 面板标题里的小字说明 */
.panel h3 span{ font-weight: 400; color: var(--sk-text-mute); }
/* 数字与金额：等宽对齐（列里上下能对齐） */
.panel table td .num, .panel table td b{ font-variant-numeric: tabular-nums; }
input, select, textarea{
  border: 1px solid var(--sk-border-s) !important; border-radius: var(--sk-radius-s) !important;
  padding: 8px 11px !important; font-size: 14px !important; color: var(--sk-text);
  background: #fff; font-family: inherit; outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--pri) !important; box-shadow: 0 0 0 3px rgba(44,92,143,.12);
}
.form-row{ margin-bottom: 16px; }
.form-row label{ font-size: 13px !important; color: var(--sk-text-sub) !important; margin-bottom: 6px !important; }

/* ---------- 9. 弹窗 / 提示 / 空态 --------------------------------------- */
.modal-bg{ background: rgba(24,32,44,.45) !important; }
.modal{
  background: var(--sk-surface) !important; border-radius: 12px !important;
  box-shadow: var(--sk-shadow-lg) !important; padding: 22px 24px !important;
  /* ⚠ 两个坑一起修（阿土哥报「内容框间距太大 + 不能滚动看下面的内容」）：
     ① 换皮层原先写了 overflow:hidden，把原样式的 overflow:auto 覆盖掉了 → 弹窗再也滚不动；
     ② 原先写了 padding:0，把弹窗内边距也去掉了。
     现在：保留滚动 + 恢复内边距 + 限高。
     ⚠ overflow-x 也必须 auto（只写 hidden 会让宽表格右侧被切掉、还滚不动）。 */
  overflow: auto !important;
  max-height: 88vh !important;
  overscroll-behavior: contain;
}
/* 含表格的弹窗自动加宽（原样式默认 460px，设备明细/付款方式这类多列表格必被切）
   —— 用 :has(table) 自动识别，不改任何 HTML；已声明 .wide / 打印单的保持原样 */
.modal:has(table):not(.wide):not(.doc-a4){
  width: min(1120px, 94vw) !important;
}
/* 弹窗里的表格自适应容器宽度，列多时由外层滚动 */
.modal table{ width: 100%; }
/* 设备明细/付款方式这类"单元格里塞输入框"的表格：
   输入框没设宽度时会用浏览器默认尺寸（约 186px），10 列就能撑到 1092px → 窄弹窗必被切。
   改成 100% 自适应 + 表格按容器算宽，列多时表格自身再横向滚动（给个 720px 下限保证可用）。 */
.modal .ms-items{ table-layout: auto; width: 100%; min-width: 720px; }
.modal .ms-items input,
.modal .ms-items select,
.modal .ms-items textarea{ width: 100% !important; box-sizing: border-box; min-width: 0; }
.modal .ms-items th{ white-space: nowrap; }
/* 滚动条明显一点，让人知道下面还有内容 */
.modal::-webkit-scrollbar{ width: 8px; }
.modal::-webkit-scrollbar-thumb{ background: rgba(31,41,55,.22); border-radius: 4px; }
.modal::-webkit-scrollbar-thumb:hover{ background: rgba(31,41,55,.34); }
.modal h3{
  font-size: 16px !important; font-weight: 600; color: var(--sk-text) !important;
  padding: 0 0 14px !important; margin: 0 0 16px !important;
  border-bottom: 1px solid var(--sk-border); background: var(--sk-surface);
}
.modal .btn{ margin-top: 4px; }
/* 表单行：控件改块级，消掉 inline-block 被行高撑出的多余空白（每行曾多出 40px） */
.form-row{ margin-bottom: 14px; }
.form-row label{ font-size: 13px !important; color: var(--sk-text-sub) !important; margin-bottom: 6px !important; display: block; }
.form-row > input:not([type="checkbox"]):not([type="radio"]),
.form-row > select,
.form-row > textarea,
.form-row > div > input:not([type="checkbox"]):not([type="radio"]),
.form-row > div > select{
  display: block !important; width: 100% !important; margin: 0 !important;
}
.toast{
  background: #24313F !important; color: #fff !important; border-radius: var(--sk-radius-s) !important;
  padding: 10px 18px !important; font-size: 14px !important; box-shadow: var(--sk-shadow-lg) !important;
}
.empty{ color: var(--sk-text-mute) !important; padding: 44px 0 !important; font-size: 14px; }

/* ---------- 10. 登录页 --------------------------------------------------- */
#loginView{ background: linear-gradient(135deg,#1F3B57 0%,#2C5C8F 100%) !important; }
.login-box{ border-radius: 12px !important; box-shadow: 0 16px 40px rgba(0,0,0,.25) !important; }
.login-box h1{ font-size: 20px; font-weight: 600; color: var(--pri); }

/* ---------- 12. 内联颜色归色（重要）---------------------------------------
 * 现有页面里散落 153 处内联 style 颜色（101 种写法），其中大量是旧主色 #1F4E79、
 * 亮红 #E64340、亮绿 #27AE60 等，与新配色不搭。
 * 又不能改 HTML（会动到结构/断言），所以用**属性选择器 + !important** 批量归色：
 *   [style*="#xxx"] 精准命中写了该颜色的元素，只改 CSS 一个文件即可全站统一。
 * 用 i 标志忽略大小写，覆盖 #e64340 / #E64340 两种写法。
 * ---------------------------------------------------------------------- */
/* 旧主色 → 新主色 */
[style*="#1f4e79" i]{ color: var(--pri) !important; }
[style*="#2d6da3" i]{ color: var(--pri2) !important; }
[style*="#5a5a7a" i]{ color: var(--pri) !important; }
[style*="#eaf2fb" i], [style*="#f6f9fc" i], [style*="#f5f8fc" i],
[style*="#f6f9fd" i], [style*="#f7f7fb" i]{ background: var(--sk-weak-pri) !important; }
/* 亮红 → 低饱和红（含各种写法） */
[style*="#e64340" i], [style*="#e64330" i], [style*="#e74c3c" i],
[style*="#c0392b" i], [style*="#c99" i]{ color: var(--red) !important; }
[style*="#fdecea" i], [style*="#fff7f6" i]{ background: var(--sk-weak-red) !important; }
/* 亮绿 → 低饱和绿 */
[style*="#27ae60" i], [style*="#1e7a3c" i]{ color: var(--green) !important; }
[style*="#f4fbf6" i]{ background: var(--sk-weak-grn) !important; }
/* 亮橙 → 低饱和橙 */
[style*="#d98b00" i], [style*="#f39c12" i]{ color: var(--orange) !important; }
[style*="#fff3cd" i]{ background: var(--sk-weak-org) !important; }
/* 各种灰 → 统一到次要/弱化文字色 */
[style*="#555" i], [style*="#666" i], [style*="#888" i]{ color: var(--sk-text-sub) !important; }
[style*="#999" i], [style*="#bbb" i], [style*="#9bb" i], [style*="#aab" i]{ color: var(--sk-text-mute) !important; }
/* 浅灰底/虚线边 → 统一到卡片底色与分隔色 */
[style*="#eee" i], [style*="#f5f5f5" i]{ background: var(--sk-head-bg) !important; }
[style*="#ccc" i], [style*="#ddd" i]{ border-color: var(--sk-border) !important; }

/* ---------- 14. 左侧栏父子菜单（子菜单展开在主菜单下方）-----------------
 * 阿土哥要求：主菜单点开后，子菜单以父子形式显示在它下方。
 * 实现：由 JS 动态注入 .nav-sub 按钮（源码里不加 data-tab，避免与既有断言冲突），
 *       这里只负责外观：缩进、字号、连接线、选中态、父项箭头。
 * ---------------------------------------------------------------------- */
nav .nav-sub{
  display: flex !important; align-items: center; width: 100%;
  height: 34px !important; margin: 0 0 2px !important; padding: 0 10px 0 40px !important;
  font-size: 13.5px !important; color: #9FB4C7 !important;
  background: none !important; border: 0 !important; border-radius: 6px !important;
  cursor: pointer; text-align: left; position: relative; flex: 0 0 auto;
  transition: background .15s, color .15s;
}
nav .nav-sub::before{
  content: "" !important; position: absolute; left: 22px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 2px; background: currentColor; opacity: .45;
  -webkit-mask-image: none !important; mask-image: none !important;
}
nav .nav-sub:hover{ background: rgba(255,255,255,.07) !important; color: #fff !important; }
nav .nav-sub.on{
  background: rgba(255,255,255,.12) !important; color: #fff !important; font-weight: 600 !important;
}
nav .nav-sub.on::before{ background: #6FA8DC; opacity: 1; }
/* 子菜单左侧连接线 */
nav .nav-sub-group{ position: relative; margin: 0 0 4px 22px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
/* 有子菜单的主菜单右侧箭头 */
nav button[data-has-sub]::after{
  content: "▾"; margin-left: auto; font-size: 10px; opacity: .55;
  transition: transform .18s; display: inline-block;
}
nav button[data-has-sub].is-collapsed::after{ transform: rotate(-90deg); }

/* ---------- 15. 矮窗口紧凑模式（阿土哥浏览器窗口高度只有 400 多 px）---------
 * 观察：他的浏览器视口约 1000×430，竖直空间很小，
 *       8 个主菜单 + 展开的 9 个子菜单会超出 → 必须整体压缩 + 允许滚动。
 * ---------------------------------------------------------------------- */
@media (max-height: 760px){
  :root{ --sk-nav-top: 52px; }
  header{ height: 52px; padding: 0 14px; }
  header .logo{ font-size: 13px; }
  nav{ padding: 8px 8px 8px; gap: 2px; bottom: 40px !important; }
  nav button{ height: 38px !important; font-size: 14.5px !important; padding: 0 11px !important; }
  nav .nav-sub{ height: 28px !important; font-size: 12.5px !important; padding: 0 8px 0 32px !important; margin-bottom: 1px !important; }
  nav .nav-sub-group{ margin: 0 0 2px 14px; padding-left: 8px; }
  header > div:last-child{ padding: 7px 12px; }
  main{ padding: 16px; }
}
/* 极矮窗口（≤560px）：先把主菜单全部装下，子菜单靠滚动 + 自动滚入视区 */
@media (max-height: 560px){
  nav button{ height: 34px !important; font-size: 14px !important; }
  nav .nav-sub{ height: 26px !important; font-size: 12px !important; }
}

/* ---------- 16. 页内子页签行隐藏（子菜单已搬到左侧栏）---------------------
 * 阿土哥要求：子菜单已在主菜单下方展开，工作区上方就不要重复显示一排子页签了。
 * 做法：用 :has() 精确隐藏承载行（DOM 保留，qa 里对 f2b-ov / mtb-dev / pt-btn-list
 *       这些 id 的断言不受影响）。
 *   tab-fin2 / tab-parts：按钮行就是 section 的直接子 div
 *   tab-mtm            ：按钮行外面还套了一个 .panel（只装这排按钮），要连空面板一起隐藏
 * ⚠ 写注释时千万别出现星号加斜杠那种组合（例如写 id 通配），会提前闭合 CSS 注释，
 *   后面的规则会被整段吞掉 —— 这个坑排查了半小时才定位。
 * ---------------------------------------------------------------------- */
section#tab-fin2 > div:has(> #f2b-ov),
section#tab-parts > div:has(> #pt-btn-list),
section#tab-mtm > .panel:has(#mtb-dev){ display: none !important; }

/* ---------- 17. 移动端适配（手机 / 平板）---------------------------------
 * 20260913 阿土哥要求：所有后台页面在手机、平板自适应，按屏宽自动调整排版。
 * 三档断点：
 *   ≤900px  平板竖屏 / 手机横屏 —— 侧栏变「抽屉」（汉堡按钮开关），内容吃满宽度
 *   ≤600px  手机竖屏       —— 筛选控件整行、弹窗近全屏、按钮加大好点
 *   ≤420px  超窄屏         —— 数据卡单列
 * 原理：桌面仍是「固定左侧栏 + 右侧内容」；窄屏把侧栏 transform 移出屏幕，
 *       用 body.nav-open 控制滑入，配遮罩，避免原来"横排换行吃掉半屏"的毛病。
 * ---------------------------------------------------------------------- */
/* 汉堡按钮：桌面隐藏，窄屏显示（样式在主规则里定义，避免窄屏才加载） */
.nav-burger{ display: none; }
.nav-mask{ display: none; }

@media (max-width: 900px){
  /* ① 顶栏固定在最上，左侧放汉堡 */
  header{
    position: fixed; left: 0; right: 0; top: 0; width: auto; height: 56px;
    padding: 0 12px; z-index: 70; display: flex; align-items: center; gap: 10px;
  }
  header .logo{ max-width: none; font-size: 15px; flex: 1 1 auto; }
  header .logo img{ width: 24px; height: 24px; flex: 0 0 24px; }
  .nav-burger{
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; margin: 0;
    background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.32) !important;
    border-radius: 8px; color: #fff !important; font-size: 18px; line-height: 1; cursor: pointer;
  }
  .nav-burger:hover{ background: rgba(255,255,255,.22) !important; }

  /* ② 菜单变抽屉：默认移出屏幕，nav-open 时滑入 */
  nav{
    position: fixed; left: 0; top: 0; bottom: 0; width: 252px; max-width: 82vw;
    height: auto; flex-direction: column; flex-wrap: nowrap !important; gap: 2px;
    padding: 14px 10px 74px; overflow-y: auto; z-index: 80;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 6px 0 24px rgba(0,0,0,.28);
  }
  body.nav-open nav{ transform: none; }
  body.nav-open{ overflow: hidden; }              /* 抽屉打开时锁住页面滚动 */
  .nav-mask{
    display: block; position: fixed; inset: 0; z-index: 75;
    background: rgba(15,23,32,.45); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open .nav-mask{ opacity: 1; pointer-events: auto; }
  nav button{ height: 46px !important; width: 100%; padding: 0 12px !important; font-size: 15px !important; text-align: left; }
  nav .nav-sub{ height: 38px !important; font-size: 13.5px !important; }
  nav .nav-sub-group{ margin: 0 0 4px 16px; }

  /* ③ 底部用户条：跟抽屉一起滑入滑出（它是 nav 的兄弟节点，必须各自加 transform） */
  header > div:last-child{
    position: fixed; left: 0; bottom: 0; width: 252px; max-width: 82vw; z-index: 81;
    transform: translateX(-100%); transition: transform .22s ease;
  }
  body.nav-open header > div:last-child{ transform: none; }

  /* ④ 内容区：吃满宽度，顶部让出 56px 顶栏 */
  main{ margin-left: 0 !important; margin-top: 56px; padding: 14px !important; max-width: none; }
  /* ★20260922 同步归零：新增的散落内容块让位规则，在抽屉模式下也必须取消，否则手机端白留左侧空白 */
  body > section.tab, body > div[id^="f2-"]{ margin-left: 0 !important; }
  /* ★20260924 阿土哥报：工单调度台/维保单管理等页手机端左侧留 194px 空白
     （桌面规则 body > div#mainView > main 带 !important 且更具体，把下面
       main{margin-left:0} 压住了 → 手机端没归零）。这里用同等优先级覆盖。
     ★只作用于 ≤900px，桌面端不受任何影响。 */
  body > div#mainView > main,
  #mainView > main,
  main,
  #mainView { margin-left: 0 !important; }
  body > section.tab, main > section.tab, #mainView section.tab,
  main > div[id^="f2-"], #mainView div[id^="f2-"],
  body > div[id^="f2-"] { margin-left: 0 !important; }
  /* ★20260924 修正：上一版多写了 padding-left:0，把卡片左内边距也清掉了
     → 内容贴屏幕边、看不到卡片边界。这里明确恢复卡片/页签自身的左右内边距。 */
  body > section.tab, main > section.tab, #mainView section.tab,
  main > div[id^="f2-"], #mainView div[id^="f2-"],
  body > div[id^="f2-"] { padding-left: 14px !important; padding-right: 14px !important; }
  /* ★20260924 阿土哥报：故障码列表「操作」列内容与其他列重叠
     该列桌面端是"冻结列"(position:sticky)，在窄屏上会浮在其它内容上面。
     手机端改为普通列（与打印样式同一处理方式）。 */
  .panel table tr > *:last-child{ position: static !important; box-shadow: none !important; }
  /* ★20260924 阿土哥报：故障码列表「操作」列与内容重叠 + 表格横向溢出左边看不到边界
     真因：全局 th,td{white-space:nowrap} + table{min-width:640px}
     → 长文本（建议处理方案）不换行，把表格撑得远超屏幕，文字冲进「操作」列。
     手机端处理：长文本允许换行、表格随屏幕自适应；只有「操作」列保持不换行。 */
  .panel table{ min-width: max-content !important; width: auto !important; }   /* ★20260924 阿土哥：不换行，左右滑动查看 */
  .panel table td, .panel table th{ white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; }
  .panel table td:last-child, .panel table th:last-child{ white-space: nowrap !important; }
  .panel{ overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* 手指左右滑动 */
  .panel table td .btn, .panel table td button{ white-space: nowrap; margin: 2px 0; }

  /* ⑤ 卡片 / 两栏布局 / 面板 */
  .cards{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .card{ padding: 14px !important; }
  .card .num{ font-size: 24px !important; line-height: 32px; }
  .row-2, .row-2--even{ grid-template-columns: 1fr !important; }
  .stat-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .panel{ padding: 14px !important; margin-bottom: 14px !important; }
  .panel h3{ font-size: 15px; }

  /* ⑥ 筛选条：控件可换行且能伸长，别挤成一坨 */
  .bar{ gap: 8px; }
  .bar input, .bar select, .bar button{ flex: 1 1 140px; min-width: 0; }

  /* ⑦ 表格：容器内横向滚动（手机上无法把 10~14 列压进一屏） */
  .panel table{ min-width: 640px; }
  .panel table th, .panel table td{ padding: 8px 8px; font-size: 13px; }

  /* ⑧ 弹窗：近全屏，按钮好点 */
  .modal{ width: 96vw !important; max-height: 92vh !important; padding: 16px !important; border-radius: 10px !important; }
  .modal.wide, .modal:has(table):not(.doc-a4){ width: 96vw !important; }
  .modal.doc-a4{ width: auto !important; max-width: 96vw !important; padding: 12px !important; }
  .modal .btn{ min-height: 38px; }

  /* ⑨ 触控友好 */
  .btn{ min-height: 34px; }
  .btn.sm{ min-height: 30px; }

  /* ★20260924 阿土哥反馈（第2次）：「编辑/删除」按钮还是被左边文字压住
     真因（已用真实浏览器 390px 宽 + 3 行数据复现，非目测）：
       ① index.html 全局 th,td{white-space:nowrap} → 单元格文字一律不换行
       ② 故障码表格自带内联 max-width:150px/260px → 盒子被限死，文字溢出盒子直接画到「操作」列
          （实测：方案文字右边缘 842px vs 操作列左边缘 643px → 压过去 199px、盖住按钮 192px）
       ③ 故障码列表容器 #fcListWrap 不在 .panel 里 → 上一版只写 .panel table，根本没命中
       ④ 本页有 body{overflow-x:hidden} → 超出的部分不是能滑动，而是被直接切掉
     修法（只作用 ≤900px，电脑端一行不动）：
       A. 全局兜底：手机上任何表格的文字都允许换行 + 取消内联 max-width 硬顶；
          只有最右「操作」列保持 nowrap（按钮不折行）
       B. 列多且文字长的表格（加 .tbl-cards 类）改「一张卡一条」：左侧标签 + 右侧文字自动换行，
          编辑/删除按钮排在卡片右下角 → 不用左右拖、也不会再压住文字
     实测结果：压住像素 199px → 0px；按钮左边缘 650(不可见) → 217(屏内);桌面 1440px 仍是原表格（行高 49px 不变） */
  section.tab table th, section.tab table td,
  .panel table th, .panel table td{
    white-space: normal !important; word-break: break-word; overflow-wrap: anywhere;
  }
  section.tab table td[style*="max-width"], section.tab table th[style*="max-width"],
  .panel table td[style*="max-width"], .panel table th[style*="max-width"]{ max-width: none !important; }
  section.tab table td:last-child, section.tab table th:last-child,
  .panel table td:last-child, .panel table th:last-child{ white-space: nowrap !important; }

  /* B. 手机端卡片模式（表头隐藏，每个字段组成「标签 + 值」一行） */
  table.tbl-cards{ display: block !important; min-width: 0 !important; width: 100% !important; }
  table.tbl-cards thead{ display: none !important; }
  table.tbl-cards tbody{ display: block !important; }
  table.tbl-cards tr{ display: block !important; background: #fff; border: 1px solid #E4EBF2;
    border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
  table.tbl-cards tr:hover td{ background: transparent !important; }
  table.tbl-cards td{ display: flex !important; gap: 10px; width: auto !important; max-width: none !important;
    padding: 2px 0 !important; border: 0 !important; font-size: 13px; line-height: 1.5;
    white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; }
  table.tbl-cards td::before{ content: attr(data-label); flex: 0 0 80px; white-space: nowrap;
    color: #8A97A6; font-size: 12px; line-height: 1.65; }
  table.tbl-cards td[data-label="建议处理方案"]{ color: #555; }
  table.tbl-cards td[data-label="操作"]{ justify-content: flex-end; gap: 8px; margin-top: 8px;
    padding-top: 9px !important; border-top: 1px dashed #EDF1F6 !important; }
  table.tbl-cards td[data-label="操作"]::before{ display: none; }
  table.tbl-cards td[data-label="操作"] .btn{ flex: 0 0 auto; min-width: 64px; }

  /* ⑩ 登录页 */
  .login-box{ width: min(92vw, 360px) !important; padding: 24px 18px !important; }

  /* ⑪ 兜底：不让内联固定宽度撑破手机 */
  input, select, textarea{ max-width: 100% !important; }
  .panel [style*="width"]{ max-width: 100% !important; }
  body{ overflow-x: hidden; }

  /* ⑫ 财务总览等「内联写死列数的网格」在窄屏重排（内联样式优先级高，必须 !important）
        —— 实测手机上月毛利/本月支出两块文字会撑破格子，溢出 300+px */
  .panel > div[style*="repeat(4"]{ grid-template-columns: repeat(2, 1fr) !important; }
  .panel > div[style*="repeat(3"]{ grid-template-columns: repeat(2, 1fr) !important; }
  /* KPI 大数字略缩小，避免撑破小格 */
  .panel [style*="font-size:24px"], .panel [style*="font-size: 24px"]{ font-size: 20px !important; }
  .panel [style*="font-size:26px"], .panel [style*="font-size: 26px"]{ font-size: 21px !important; }
  .panel [style*="font-size:22px"]{ font-size: 19px !important; }
}

/* 手机竖屏 */
@media (max-width: 600px){
  main{ padding: 10px !important; }
  .cards{ gap: 8px !important; }
  .card{ padding: 12px !important; }
  .card .num{ font-size: 22px !important; line-height: 30px; }
  .stat-grid{ grid-template-columns: 1fr !important; }
  .panel h3, h3{ font-size: 15px !important; }
  /* 筛选控件整行铺开，手机上单手好点 */
  .bar input, .bar select, .bar button{ flex: 1 1 100%; }
  /* 弹窗底部按钮：铺满更易点 */
  .modal .btn{ flex: 1 1 auto; }
  .modal .btn + .btn{ margin-left: 0; }
  th, td{ font-size: 12.5px !important; }
}

/* 超窄屏 */
@media (max-width: 420px){
  /* 数据卡保持 2 列（手机上 1 列要滚很久），靠缩小数字保住可读性 */
  .cards{ grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .card{ padding: 11px !important; }
  .card .num{ font-size: 19px !important; line-height: 26px; }
  .card .lbl{ font-size: 12px; }
  header .logo{ font-size: 14px; }
  header{ padding: 0 10px; }
  .panel{ padding: 12px !important; }
}
/* 打印：侧栏必须彻底让位，否则 A4 单据左边会空 216px */
@media print{
  header, nav{ display: none !important; }
  main{ margin-left: 0 !important; padding: 0 !important; }
  .panel{ box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  /* 打印时取消吸附列，避免单据统计错位 */
  .panel table tr > *:last-child{ position: static !important; box-shadow: none !important; }
}
body.printing main{ margin-left: 0 !important; }
body.printing body > section.tab, body.printing body > div[id^="f2-"]{ margin-left: 0 !important; }
body.printing .panel table tr > *:last-child{ position: static !important; box-shadow: none !important; }