/* ==========================================================================
   智能流程管理系统 SFMS — 设计系统 v1.2
   ========================================================================== */

:root {
  --brand-50:  #e9f2ff;  --brand-100: #c5daff;  --brand-200: #9bc2ff;
  --brand-500: #1668dc;  --brand-600: #1257bb;  --brand-700: #0d4595;  --brand-900: #16233a;
  --n-0:   #ffffff;  --n-50:  #f7f9fc;  --n-100: #f2f4f7;  --n-200: #e8ebf0;
  --n-300: #d9dee6;  --n-400: #b0b8c4;  --n-500: #8a94a1;  --n-600: #6b7480;
  --n-700: #45505f;  --n-800: #313b48;  --n-900: #1b2430;
  --ok-text:#1f7a47;  --ok-bg:#e8f6ee;   --ok-border:#c3e6d1;
  --wa-text:#8a6d00;  --wa-bg:#fdf6d8;   --wa-border:#efe0a2;
  --dn-text:#c62828;  --dn-bg:#fdeaea;   --dn-border:#f3c4c4;
  --in-text:#0b58c8;  --in-bg:#e9f2ff;   --in-border:#c5daff;
  --pu-text:#2f4a8a;  --pu-bg:#e8eefc;   --pu-border:#e8eefc;
  --te-text:#0b7d72;  --te-bg:#e6f7f5;   --te-border:#b9e6e1;
  --or-text:#b95c00;  --or-bg:#fdeddb;   --or-border:#f6d3ad;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;
  --shadow-1: 0 1px 2px rgba(15,23,42,.05);
  --shadow-2: 0 2px 6px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-3: 0 6px 18px rgba(15,23,42,.08);
  --font-sans: "Segoe UI","Microsoft YaHei",-apple-system,"PingFang SC","Hiragino Sans GB",Arial,sans-serif;
  --font-mono: Consolas,"JetBrains Mono","Courier New",monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--n-100);
  color: var(--n-900);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand-500); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-600); text-decoration: underline; }
img, svg { max-width: 100%; }

h1, h2, h3, h4 { color: var(--n-900); font-weight: 600; line-height: 1.4; margin: .5em 0 .3em; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; } h4 { font-size: 13px; color: var(--n-700); }
code, pre, .mono { font-family: var(--font-mono); font-size: 13px; }

/* ===================== 顶栏 ===================== */
.topbar {
  height: 56px;
  background: linear-gradient(90deg, #16233a, #1f3557);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  box-shadow: var(--shadow-2);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: .5px; }
.brand .logo { font-size: 20px; }
.brand em { font-style: normal; font-size: 11px; opacity: .65; background: rgba(255,255,255,.12); padding: 1px 7px; border-radius: 999px; letter-spacing: 0; }
.who { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.who .tag { background: var(--brand-500); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.who .uname { font-weight: 600; }
.who .role { opacity: .7; font-size: 12px; }
.who .lnk { color: #cfe0f5; }
.who .out { color: #ffb3b3; }

.lang-switch2 {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 2px 10px; font-size: 12px;
}
.lang-switch2 a { color: rgba(255,255,255,.75); text-decoration: none; font-weight: 600; transition: color .15s ease; }
.lang-switch2 a.on { color: #fff; }
.lang-switch2 a:hover { color: #fff; }
.lang-switch2 .sep { color: rgba(255,255,255,.5); margin: 0 1px; }

/* ===================== 布局 ===================== */
.shell { display: flex; min-height: calc(100vh - 56px); align-items: stretch; }
.side {
  width: 188px; background: #fff; border-right: 1px solid var(--n-200);
  padding: 14px 0; flex: 0 0 188px;
  display: flex; flex-direction: column;
}
.nv {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; color: var(--n-700);
  border-left: 3px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  font-size: 13.5px;
}
.nv:hover { background: var(--brand-50); color: var(--brand-700); text-decoration: none; }
.nv.on { background: var(--brand-50); color: var(--brand-700); border-left-color: var(--brand-500); font-weight: 600; }
.nv i { font-style: normal; width: 20px; text-align: center; }
.side-foot { margin-top: auto; padding: 14px 16px; font-size: 11px; color: var(--n-500); border-top: 1px dashed var(--n-200); line-height: 1.7; }

/* 侧栏嵌套（v1.4 局部嵌套：仅「合同台账」带子项） */
.nv-group { position: relative; }
.nv-parent .lbl { flex: 1; }
.nv-sub { list-style: none; margin: 0; padding: 0; }
.nv-child {
  padding-left: 30px !important;
  font-size: 13px !important;
  color: var(--n-600);
  position: relative;
}
.nv-child::before {
  content: ''; position: absolute; left: 18px; top: 50%; width: 5px; height: 5px;
  background: var(--n-400); border-radius: 50%;
  transform: translateY(-50%); transition: background .12s ease;
}
.nv-child:hover { background: var(--brand-50); color: var(--brand-700); }
.nv-child:hover::before { background: var(--brand-500); }
.nv-child.on { background: var(--brand-50); color: var(--brand-700); font-weight: 600; border-left-color: var(--brand-500); }
.nv-child.on::before { background: var(--brand-500); }

/* 父级 caret 切换按钮 + 收起/展开动画 */
.nv-group { position: relative; }
.nv-parent { padding-right: 30px; }
.nv-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--n-500); border-radius: var(--r-sm);
  transition: background .12s ease, color .12s ease;
  z-index: 1;
}
.nv-toggle:hover { background: rgba(22,104,220,.1); color: var(--brand-700); }
.nv-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(22,104,220,.3); }
.nv-toggle .caret { font-size: 11px; line-height: 1; transition: transform .2s ease; display: inline-block; }
.nv-toggle.collapsed .caret { transform: rotate(-90deg); }
.nv-sub { transition: max-height .25s ease; max-height: 1000px; overflow: hidden; }
.nv-group.collapsed .nv-sub { max-height: 0; }

/* 侧栏（v1.3.1 起回归扁平结构：不再分组，所有 admin 配置走 settings.php） */

.main { flex: 1; padding: 20px 24px 56px; min-width: 0; }
.ph { font-size: 20px; margin: 0 0 14px; font-weight: 600; color: var(--n-900); display: flex; align-items: center; gap: 10px; }

/* ===================== 卡片 ===================== */
.card {
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}
.card > h3 {
  margin: -2px 0 14px;
  font-size: 15px;
  color: var(--n-900);
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
}
.card > h3 .sub { font-weight: 400; font-size: 12px; color: var(--n-500); margin-left: 4px; }

/* 系统设置·子模块速览卡片 */
.sub-mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.sub-mod-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  text-decoration: none; color: var(--n-900);
  background: var(--n-0);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.sub-mod-card:hover {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  transform: translateY(-1px);
}
.sub-mod-card .icon { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.sub-mod-card .name { font-weight: 600; font-size: 14px; color: var(--n-900); }
.sub-mod-card .meta { font-size: 12px; color: var(--brand-600); margin-top: 2px; font-weight: 500; }
.sub-mod-card .hint2 { font-size: 11.5px; color: var(--n-500); margin-top: 4px; line-height: 1.4; }
.card > h4 { margin: 18px 0 8px; font-size: 13px; color: var(--n-700); font-weight: 600; }

/* ===================== 统计块 ===================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat {
  background: #fff;
  border: 1px solid var(--n-200);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  min-height: 96px;
  display: flex; flex-direction: column;
  transition: box-shadow .15s ease;
}
.stat:hover { box-shadow: var(--shadow-2); }
.stat .k  { font-size: 12px; color: var(--n-500); font-weight: 500; }
.stat .v  { font-size: 24px; font-weight: 700; margin-top: 2px; color: var(--brand-900); line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat .x  { font-size: 11.5px; color: var(--n-500); margin-top: auto; line-height: 1.4; padding-top: 4px; }
.stat.red    { border-left-color: var(--dn-text); } .stat.red .v { color: var(--dn-text); }
.stat.orange { border-left-color: var(--or-text); } .stat.orange .v { color: var(--or-text); }
.stat.green  { border-left-color: var(--ok-text); } .stat.green .v  { color: var(--ok-text); }
.stat.gray   { border-left-color: var(--n-400);  } .stat.gray .v   { color: var(--n-700); }

/* ===================== 表格 ===================== */
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
table.grid {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; font-size: 13px;
  table-layout: auto;
}
table.grid th, table.grid td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--n-200);
  text-align: left;
  vertical-align: middle;
  line-height: 1.45;
}
table.grid th { min-width: 64px; } /* 防止窄表头被挤换行 */
table.grid thead th {
  background: var(--n-50);
  color: var(--n-700);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 2px solid var(--n-300);
  /* v2.5.1 移除 thead sticky 以修复「表头遮挡首行」布局故障
     原因：.tbl-wrap{overflow-x:auto} 按 CSS 规范会强制 overflow-y 计算为 auto，
     使 .tbl-wrap 成为滚动容器；此时 thead th 上的 position:sticky; top:56px
     会以滚动容器为参照进行偏移，导致 thead 与 tbody 第一行重叠并遮盖
     「L1 部门负责人」等首行内容（oa_approval_setup.php 截图复现）。
     处理：表头随内容自然滚动，仅保留背景/字重/下边框以保持视觉清晰。
     横向溢出滚动由 .tbl-wrap 继续提供，不影响窄屏体验。 */
}
table.grid thead th:first-child { border-top-left-radius: var(--r-lg); }
table.grid thead th:last-child  { border-top-right-radius: var(--r-lg); }
table.grid tbody tr:hover { background: var(--brand-50); }
table.grid tbody tr:last-child td { border-bottom: 0; }

table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid td.mid, table.grid th.mid { text-align: center; }
table.grid td.wrap, table.grid th.wrap { white-space: normal; }
table.grid td.trunc, table.grid th.trunc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

tr.lv-red    td { background: #fff5f5; } tr.lv-red:hover    td { background: #ffecec; }
tr.lv-orange td { background: #fffaf2; }
tr.lv-yellow td { background: #fffdf0; }
tr.lv-gone   td { background: #f6f7f9; color: var(--n-500); }

table.grid tfoot td { background: var(--n-50); font-weight: 600; }

.empty { padding: 38px; text-align: center; color: var(--n-500); background: #fff; font-size: 13px; }

/* ===================== 徽标 ===================== */
.badge {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; white-space: nowrap; border: 1px solid transparent;
  font-weight: 500; line-height: 1.6;
}
.b-green  { background: var(--ok-bg);  color: var(--ok-text);  border-color: var(--ok-border); }
.b-blue   { background: var(--in-bg);  color: var(--in-text);  border-color: var(--in-border); }
.b-yellow { background: var(--wa-bg);  color: var(--wa-text);  border-color: var(--wa-border); }
.b-orange { background: var(--or-bg);  color: var(--or-text);  border-color: var(--or-border); }
.b-red    { background: var(--dn-bg);  color: var(--dn-text);  border-color: var(--dn-border); }
.b-gray   { background: var(--n-100); color: var(--n-600);     border-color: var(--n-200); }
.b-dark   { background: var(--n-200); color: var(--n-800);     border-color: var(--n-300); }
.b-purple { background: var(--pu-bg);  color: var(--pu-text);  border-color: var(--pu-border); }
.b-teal   { background: var(--te-bg);  color: var(--te-text);  border-color: var(--te-border); }

/* ===================== 表单 ===================== */
.form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 16px;
}
.fl { display: block; font-size: 12px; color: var(--n-600); margin-bottom: 5px; font-weight: 500; }
.fl b { color: var(--dn-text); font-weight: 600; }

input[type=text], input[type=password], input[type=date], input[type=number], input[type=file], input[type=email], select, textarea {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--n-300);
  border-radius: var(--r-md);
  font-size: 13px; font-family: inherit;
  background: #fff; color: var(--n-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=checkbox], input[type=radio] { cursor: pointer; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(22,104,220,.14);
}
input::placeholder, textarea::placeholder { color: var(--n-400); }
input:disabled, select:disabled, textarea:disabled { background: var(--n-50); color: var(--n-500); cursor: not-allowed; }
textarea { min-height: 72px; resize: vertical; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--n-500) 50%), linear-gradient(135deg, var(--n-500) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  appearance: none; padding-right: 26px;
}

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .fi { min-width: 130px; }
.filters .fi.wide { min-width: 260px; }
.filters .fi label.fl { margin-bottom: 4px; }

input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--dn-text); box-shadow: 0 0 0 3px rgba(198,40,40,.12); }

/* ===================== 按钮 ===================== */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--r-md);
  border: 1px solid var(--n-300); background: #fff; color: var(--n-800);
  cursor: pointer; font-size: 13px; font-family: inherit;
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
  user-select: none; line-height: 1.4;
}
.btn:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22,104,220,.2); }

.btn.pri { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.btn.pri:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.btn.dan { background: var(--dn-text); border-color: var(--dn-text); color: #fff; }
.btn.dan:hover { background: #ad2222; border-color: #ad2222; color: #fff; }

.btn.ok { background: var(--ok-text); border-color: var(--ok-text); color: #fff; }
.btn.ok:hover { background: #196a3c; border-color: #196a3c; color: #fff; }

.btn.sub { background: var(--n-100); border-color: var(--n-200); color: var(--n-700); }
.btn.sub:hover { background: var(--n-50); border-color: var(--n-300); }

.btn.sm { padding: 4px 9px; font-size: 12px; border-radius: 4px; }
.btn.lg { padding: 9px 18px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.bar { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 13px; }
.bar .spacer { flex: 1; }

/* ===================== 提示 ===================== */
.alert {
  padding: 11px 14px; border-radius: var(--r-md);
  margin-bottom: 14px; font-size: 13px; border: 1px solid;
  line-height: 1.5;
}
.alert.ok   { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.alert.err  { background: var(--dn-bg); border-color: var(--dn-border); color: var(--dn-text); }
.alert.warn { background: var(--wa-bg); border-color: var(--wa-border); color: var(--wa-text); }
.alert.info { background: var(--in-bg); border-color: var(--in-border); color: var(--in-text); }
.alert b { font-weight: 700; }

/* ===================== 详情 ===================== */
.kv { display: grid; grid-template-columns: 124px 1fr; gap: 10px 16px; font-size: 13px; }
.kv dt { color: var(--n-500); font-weight: 500; }
.kv dd { margin: 0; color: var(--n-900); word-break: break-word; }

.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--n-200); font-size: 13px; }
.files li:last-child { border-bottom: 0; }
.files li .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files li .meta { color: var(--n-500); font-size: 12px; white-space: nowrap; }

/* ===================== 分页 ===================== */
.pager { display: flex; gap: 6px; align-items: center; padding: 14px 2px; flex-wrap: wrap; }
.pager .pi { color: var(--n-500); font-size: 12px; margin-right: 6px; }
.pager .pg { padding: 5px 11px; border: 1px solid var(--n-300); border-radius: var(--r-md); background: #fff; color: var(--n-700); font-size: 13px; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.pager .pg:hover { background: var(--n-50); border-color: var(--n-400); }
.pager .pg.on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* ===================== 登录 ===================== */
.login-wrap {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16233a 0%, #24406b 55%, #2f5c96 100%);
  padding: 20px;
}
.login-box {
  width: 380px; max-width: 100%;
  background: #fff; border-radius: var(--r-xl);
  padding: 32px 32px 24px;
  box-shadow: var(--shadow-3);
}
.login-title { margin: 0 0 4px; text-align: center; font-size: 24px; color: var(--brand-900); font-weight: 700; letter-spacing: .5px; }
.login-box .sub { text-align: center; color: var(--n-500); font-size: 12px; margin-bottom: 22px; }
.login-box .fld { margin-bottom: 14px; }
.login-box .btn { width: 100%; justify-content: center; padding: 10px; font-size: 15px; }
.login-foot { text-align: center; margin-top: 18px; color: var(--n-500); font-size: 11px; line-height: 1.7; }

/* 登录页 WF 圆形 LOGO（右上角） */
.login-wf-logo {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; letter-spacing: .5px;
  -webkit-user-select: none; user-select: none;
}
/* 登录品牌块：●SFMS● + 副标题（居中两行） */
.login-brand { text-align: center; margin: 4px 0 22px; }
.login-sfms { font-size: 30px; font-weight: 800; color: var(--brand-900); letter-spacing: 1px; line-height: 1.25; }
.login-sfms-sub { font-size: 15px; color: var(--n-600); margin-top: 6px; letter-spacing: .3px; }

.lang-switch {
  position: absolute; top: 18px; left: 22px; right: auto;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32);
  padding: 5px 12px; border-radius: 999px; font-size: 13px;
}
.lang-switch a { color: rgba(255,255,255,.8); text-decoration: none; font-weight: 600; padding: 0 2px; }
.lang-switch a.on { color: #fff; }
.lang-switch a:hover { color: #fff; }
.lang-switch .sep { color: rgba(255,255,255,.5); margin: 0 1px; }

/* ===================== 开发者选项 ===================== */
.dev-card { max-width: 600px; margin: 0 auto; }
.dev-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--n-200); }
.dev-wf-logo {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 22px; letter-spacing: .5px;
}
.dev-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--brand-900); }
.dev-sub { color: var(--n-500); font-size: 13px; margin-top: 4px; }
.dev-body p { color: var(--n-700); line-height: 1.75; margin: 0 0 4px; }
.dev-copy {
  margin-top: 14px; padding: 14px 16px; background: var(--n-50);
  border-left: 3px solid var(--brand-500); border-radius: var(--r-sm);
  color: var(--n-700); line-height: 1.75; font-size: 14px;
}
.dev-copy-en { display: block; margin-top: 4px; color: var(--n-500); font-size: 12.5px; }
.dev-contact { margin-top: 14px; color: var(--n-700); font-size: 14px; }
.dev-contact a { color: var(--brand-600); font-weight: 600; }

/* ===================== 工具类 ===================== */
.mono    { font-family: var(--font-mono); font-size: 13px; }
.muted   { color: var(--n-500); }
.muted-2 { color: var(--n-600); }
.nowrap  { white-space: nowrap; }
.wrap    { white-space: normal; word-break: break-word; }
.trunc   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-center{ text-align: center; }
.v-center{ vertical-align: middle; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.flex    { display: flex; } .flex-1 { flex: 1; }
.col     { display: flex; flex-direction: column; }
.center  { display: flex; align-items: center; justify-content: center; }
.between { display: flex; align-items: center; justify-content: space-between; }

.hint { font-size: 12px; color: var(--n-500); margin-top: 6px; line-height: 1.6; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--n-200); margin-bottom: 14px; overflow-x: auto; }
.tabs a { padding: 8px 14px; color: var(--n-600); border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; margin-bottom: -2px; white-space: nowrap; transition: color .12s ease, background .12s ease; }
.tabs a:hover { color: var(--brand-700); background: var(--n-50); text-decoration: none; }
.tabs a.on { background: #fff; border-color: var(--n-200); border-bottom: 2px solid #fff; color: var(--brand-700); font-weight: 600; }

/* ===================== OA 审批 ===================== */
.nav-badge { background: var(--dn-text); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 6px; font-weight: 600; min-width: 18px; text-align: center; }

.apr-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.apr-head .kv { grid-template-columns: 96px 1fr; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { padding: 12px 0; border-bottom: 1px dashed var(--n-200); }
.steps > li:last-child { border-bottom: 0; }
.steps .lv-h { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; font-size: 13.5px; }
.steps .lv-h .no { background: var(--brand-900); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.steps .appr { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 30px; }
.steps .appr .who { background: var(--n-50); border: 1px solid var(--n-200); border-radius: 6px; padding: 5px 10px; font-size: 12px; display: flex; gap: 6px; align-items: center; }
.steps .appr .who .st { font-size: 11px; padding: 0 6px; border-radius: 999px; }
.st-approved { background: var(--ok-bg);  color: var(--ok-text); }
.st-rejected { background: var(--dn-bg);  color: var(--dn-text); }
.st-skipped  { background: var(--n-100); color: var(--n-600); }
.st-waiting  { background: var(--wa-bg);  color: var(--wa-text); }
.st-pending  { background: var(--in-bg);  color: var(--in-text); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 9px 0 9px 26px; border-left: 2px solid var(--n-200); margin-left: 6px; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); box-shadow: 0 0 0 3px #fff; }
.timeline .act { font-weight: 600; }
.timeline .t   { color: var(--n-500); font-size: 12px; }
.timeline .c   { color: var(--n-700); font-size: 13px; margin-top: 2px; word-break: break-word; }

.todo-row td { background: var(--wa-bg); }

.form .lv-block { border: 1px solid var(--n-200); border-radius: var(--r-lg); padding: 14px; background: var(--n-50); margin-bottom: 10px; }
.form .lv-block h4 { margin: 0 0 10px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.form .appr-row { display: flex; gap: 8px; align-items: center; margin: 5px 0; }

/* ===================== 滚动条 ===================== */
.tbl-wrap::-webkit-scrollbar { height: 8px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 999px; }
.tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--n-400); }

/* ===================== 响应式 ===================== */
@media (max-width: 1280px) {
  .side { width: 168px; flex: 0 0 168px; }
  .main { padding: 18px 18px 48px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
}
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .side {
    width: 100%; flex: none; display: flex; overflow-x: auto;
    padding: 6px 0; border-right: none; border-bottom: 1px solid var(--n-200);
  }
  .nv { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; padding: 8px 14px; }
  .nv.on { border-left: none; border-bottom-color: var(--brand-500); background: var(--brand-50); }
  .nv-group { display: inline-flex; align-items: center; }
  .nv-toggle { display: none; }
  .nv-sub { display: inline-flex !important; padding: 0; margin: 0; max-height: none !important; }
  .nv-sub li { display: inline-flex; }
  .nv-child { padding-left: 14px !important; border-left: 1px dashed var(--n-300); margin-left: 4px; padding-right: 14px !important; }
  .nv-child::before { display: none; }
  .nv-child.on { border-left-color: var(--brand-500); }
  .side-foot { display: none; }
  .main { padding: 16px 14px 48px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .stat { min-height: 84px; padding: 10px 14px; }
  .stat .v { font-size: 21px; }
  .ph { font-size: 18px; }
  .card { padding: 14px 16px; }
}
@media (max-width: 560px) {
  .topbar { padding: 0 12px; height: 52px; }
  .brand { font-size: 15px; }
  .who { gap: 8px; font-size: 12px; }
  .who .tag, .who .role { display: none; }
  .who .uname { font-weight: 600; font-size: 13px; }
  .main { padding: 12px 10px 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat { min-height: 72px; padding: 9px 12px; }
  .stat .k { font-size: 11px; }
  .stat .v { font-size: 18px; }
  .stat .x { font-size: 10.5px; }
  .card { padding: 12px 12px; margin-bottom: 12px; }
  .card > h3 { font-size: 14px; }
  .login-box { padding: 24px 22px 20px; }
  .login-title { font-size: 21px; }
  .form { grid-template-columns: 1fr; }
  .filters .fi { min-width: 100%; }
  .ph { font-size: 16px; margin-bottom: 10px; }
}

/* ===================== 打印 ===================== */
@media print {
  .topbar, .side, .bar, .pager, .btn, .lang-switch, .lang-switch2, .nav-badge { display: none !important; }
  .main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  body { background: #fff; font-size: 11px; }
  a { color: var(--n-900); text-decoration: none; }
}
/* ===================== 工作台 Workspace v1.9 ===================== */
.ws-group { margin: 0 0 18px; }
.ws-group-head { display:flex; align-items:center; gap:8px; padding: 4px 2px 8px; border-bottom: 1px solid var(--n-200); margin-bottom: 12px; }
.ws-group-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--n-700); }
.ws-add-to-group { background:transparent; border:1px dashed var(--n-300); border-radius:50%; width:24px; height:24px; cursor:pointer; color:var(--n-500); font-size:14px; line-height:1; }
.ws-add-to-group:hover { color:var(--brand-700); border-color:var(--brand-500); }
.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  min-height: 76px;
  padding: 4px;
  border-radius: var(--r-lg);
  transition: background .12s ease;
}
.ws-grid.ws-drop-target { background: var(--brand-50); outline: 1px dashed var(--brand-500); outline-offset: -2px; }
.ws-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 14px 8px 10px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--n-900);
  min-height: 80px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ws-card:hover { border-color: var(--brand-500); box-shadow: var(--shadow-2); transform: translateY(-1px); text-decoration: none; color: var(--brand-700); }
.ws-card .ws-icon { font-size: 26px; line-height: 1; }
.ws-card .ws-name { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.3; }
.ws-card.ws-editable { cursor: grab; }
.ws-card.ws-editable:active { cursor: grabbing; }
.ws-card.ws-dragging { opacity: 0.4; }
.ws-card .ws-x, .ws-card .ws-drag { position:absolute; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.5); color:#fff; font-size: 12px; line-height:1; opacity:0; transition: opacity .12s; pointer-events: auto; }
.ws-card .ws-x { top: 2px; right: 2px; cursor: pointer; }
.ws-card .ws-drag { top: 2px; left: 2px; cursor: grab; letter-spacing: -2px; }
.ws-card:hover .ws-x, .ws-card:hover .ws-drag { opacity: 1; }
/* v2.7.0：流程分组末尾的「＋ 新增模板」（仅 admin 渲染，跳 oa_flows.php?act=new&group=xxx）
   与 .ws-card 同尺寸，用虚线边框区分「这是新增位」而非已有模板 */
.ws-add-flow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 14px 8px 10px;
  background: var(--n-50, #fafafa);
  border: 1px dashed var(--n-300);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--n-500);
  min-height: 80px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.ws-add-flow:hover { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-50); box-shadow: var(--shadow-2); transform: translateY(-1px); text-decoration: none; }
.ws-add-flow .ws-icon { font-size: 26px; line-height: 1; font-weight: 300; }
.ws-add-flow .ws-name { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.3; }
.ws-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-pick {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px dashed var(--n-300);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  color: var(--n-700);
  font-size: 13px;
}
.ws-pick:hover { border-color: var(--brand-500); color: var(--brand-700); }
.ws-pick-icon { font-size: 18px; }

/* v2.9.0 多附件上传组件（lib/view.php multi_file_field）
   交互：首行文件框 + 底部「＋ 添加其他附件」动态追加行，每行可单独移除。
   所有 file input 同名 files[]，后端循环处理，无需改动。 */
.mf { display: block; }
.mf-rows { display: flex; flex-direction: column; gap: 8px; }
.mf-row { display: flex; align-items: center; gap: 8px; }
.mf-row input[type=file].mf-input { /* v2.9.5 隐藏原生 file input（按钮触发，状态文本显示已选文件名） */
  position: absolute; opacity: 0; width: 0; height: 0; overflow: hidden; pointer-events: none;
}
.mf-row .mf-pick { flex: 0 0 auto; }
.mf-row .mf-status { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-del {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--n-300); border-radius: var(--r-sm);
  background: #fff; color: var(--n-600);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.mf-del:hover { border-color: var(--dn-text); color: var(--dn-text); background: var(--dn-bg); }
.mf-add { margin-top: 8px; }

/* v2.9.6 单条合同录入表单（import.php 主页）
   布局：.ct-form 纵向分组，每组 .ct-row 内字段横向 flex 排布，窄屏自动换行。 */
.ct-form { display: flex; flex-direction: column; gap: 14px; }
.ct-form .ct-row { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.ct-field { flex: 1 1 220px; min-width: 0; }
.ct-field.ct-f-wide  { flex: 2 1 320px; }
.ct-field.ct-f-small { flex: 0 1 110px; }
.ct-field.ct-f-full  { flex: 1 1 100%; }
.ct-field input[type=text], .ct-field input[type=date], .ct-field select, .ct-field textarea { width: 100%; }
.ct-period-inputs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ct-period-inputs input[type=text], .ct-period-inputs input[type=date] { width: 150px; flex: 0 0 auto; }
.ct-tilde { color: var(--n-400); font-size: 14px; }
.ct-perpetual, .ct-checkbox {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--n-700); white-space: nowrap; cursor: pointer;
  padding: 4px 8px; border: 1px solid var(--n-200); border-radius: var(--r-sm); background: var(--n-50);
}
.ct-perpetual:hover, .ct-checkbox:hover { border-color: var(--brand-500); color: var(--brand-700); }
.ct-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--n-200); }
@media (max-width: 560px) {
  .ct-field { flex: 1 1 100%; }
  .ct-field.ct-f-small { flex: 1 1 100%; }
  .ct-period-inputs input[type=text], .ct-period-inputs input[type=date] { width: 100%; flex: 1 1 100%; }
}