/* ===== 涵婷跨境 · ERP 系统样式（纯本地 CSS，无外部 CDN） =====
   参考领星(Lingxing) ERP：深色侧边栏 + 浅色内容区，深蓝/靛蓝 + 青蓝渐变强调色 */

:root{
  --brand:#2B3A67;          /* 靛蓝主色 */
  --brand-2:#1B2A4A;        /* 深海军蓝 */
  --accent-a:#3B82F6;       /* 渐变起点 */
  --accent-b:#06B6D4;       /* 渐变终点 青蓝 */
  --accent:linear-gradient(135deg,#3B82F6 0%,#06B6D4 100%);
  --bg:#eef2f8;
  --card:#ffffff;
  --text:#1e293b;
  --muted:#64748b;
  --line:#e2e8f0;
  --red:#dc2626; --amber:#ea8a04; --green:#16a34a; --sky:#0284c7;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.06);
  --shadow-lg:0 10px 30px rgba(27,42,74,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-a); text-decoration:none}
a:hover{text-decoration:underline}

/* ===== 布局 ===== */
.layout{display:flex; min-height:100vh}
.sidebar{
  width:232px; flex:0 0 232px;
  background:linear-gradient(180deg,#1B2A4A 0%,#141f38 100%);
  color:#c7d2e3; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; box-shadow:2px 0 12px rgba(15,23,42,.12);
}
.brand{
  padding:18px 20px; font-size:17px; font-weight:800; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08); letter-spacing:.02em;
  display:flex; align-items:center; gap:9px;
}
.brand .logo{
  width:30px;height:30px;border-radius:9px;background:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;
  box-shadow:0 4px 10px rgba(6,182,212,.35); flex:0 0 auto;
}
.brand small{display:block; font-size:10.5px; color:#7c8db0; font-weight:400; margin-top:1px; letter-spacing:.03em}
.nav{padding:10px 0; flex:1; overflow:auto}
.nav a{
  display:flex; align-items:center; gap:10px; padding:10px 20px; color:#c7d2e3;
  font-size:14px; border-left:3px solid transparent; transition:all .15s;
}
.nav a:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff}
.nav a.active{
  background:linear-gradient(90deg,rgba(59,130,246,.22),rgba(6,182,212,.08));
  color:#fff; border-left-color:#3B82F6;
}
.nav .sec{padding:14px 20px 6px; font-size:10.5px; color:#5f7194; text-transform:uppercase; letter-spacing:.08em; font-weight:700}
.sidebar .foot{padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:#93a4c4}
.sidebar .foot a{color:#7dd3fc; display:block; margin-top:6px}
.badge-role{background:rgba(59,130,246,.2); color:#7dd3fc; border-radius:20px; padding:1px 9px; font-size:11px}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  height:60px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; padding:0 26px; position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:17px; margin:0; font-weight:700; letter-spacing:.01em}
.topbar .who{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px}
.content{padding:24px 26px 70px; max-width:1440px; width:100%}

/* ===== 卡片 ===== */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden;
}
.card .hd{
  padding:15px 20px; border-bottom:1px solid var(--line); font-weight:700;
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  background:linear-gradient(180deg,#fbfcfe,#f7f9fc);
}
.card .bd{padding:18px 20px}
.card .bd.tight{padding:0}

/* ===== 网格 ===== */
.grid{display:grid; gap:16px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.grid.c4,.grid.c5{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.grid.c2,.grid.c3,.grid.c4,.grid.c5{grid-template-columns:1fr}.sidebar{display:none}.content{padding:16px}}

/* ===== 统计卡 ===== */
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.stat::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent)}
.stat .n{font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.stat .l{font-size:12px; color:var(--muted); margin-top:4px}
.stat.red::before{background:linear-gradient(180deg,#ef4444,#b91c1c)} .stat.red .n{color:var(--red)}
.stat.amber::before{background:linear-gradient(180deg,#f59e0b,#d97706)} .stat.amber .n{color:var(--amber)}
.stat.green::before{background:linear-gradient(180deg,#22c55e,#16a34a)} .stat.green .n{color:var(--green)}
.stat.sky::before{background:linear-gradient(180deg,#38bdf8,#0284c7)} .stat.sky .n{color:var(--sky)}

/* ===== 表格 ===== */
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:#f8fafc; color:var(--muted); font-weight:700; font-size:11.5px; white-space:nowrap; letter-spacing:.02em; text-transform:none}
tbody tr:hover td{background:#f6f9ff}
tbody tr:last-child td{border-bottom:none}

/* ===== 标签 ===== */
.tag{display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; white-space:nowrap; line-height:1.7; font-weight:600}
.tag.p-red{background:#fee2e2; color:#b91c1c}
.tag.p-amber{background:#ffedd5; color:#b45309}
.tag.p-green{background:#ecfdf5; color:#047857}
.tag.p-gray{background:#f1f5f9; color:#64748b}
.tag.s-done{background:#dcfce7; color:#166534}
.tag.s-doing{background:#dbeafe; color:#1e40af}
.tag.s-todo{background:#f1f5f9; color:#475569}
.tag.s-blocked{background:#fee2e2; color:#b91c1c}
.tag.s-delay{background:#ffedd5; color:#9a3412}
.tag.s-review{background:#ede9fe; color:#5b21b6}
.tag.role{background:#eef2ff; color:#4338ca}
.tag.urgent{background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff}
.tag.calm{background:#f1f5f9; color:#64748b}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}

/* ===== 表单 ===== */
label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px; font-weight:700}
input[type=text],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-size:13px;
  font-family:inherit; background:#fff; color:var(--text); transition:all .15s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent-a); box-shadow:0 0 0 3px rgba(59,130,246,.14)}
textarea{resize:vertical; min-height:38px}
.field{margin-bottom:15px}
.row{display:flex; gap:14px; flex-wrap:wrap}
.row>*{flex:1; min-width:150px}

/* ===== 按钮 ===== */
.btn{
  display:inline-block; padding:9px 17px; border-radius:9px; border:1px solid transparent;
  background:var(--accent); color:#fff; font-size:13px; cursor:pointer; font-weight:700;
  text-align:center; transition:all .15s; box-shadow:0 2px 8px rgba(59,130,246,.25);
}
.btn:hover{filter:brightness(1.06); text-decoration:none; color:#fff; box-shadow:0 4px 14px rgba(59,130,246,.35)}
.btn.ghost{background:#fff; color:var(--text); border-color:var(--line); box-shadow:none}
.btn.ghost:hover{background:#f8fafc; color:var(--text); filter:none}
.btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 2px 8px rgba(220,38,38,.25)}
.btn.green{background:linear-gradient(135deg,#22c55e,#16a34a); box-shadow:0 2px 8px rgba(22,163,74,.25)}
.btn.sm{padding:5px 12px; font-size:12px}
.btn:disabled{opacity:.55; cursor:not-allowed}

/* ===== 提示 ===== */
.alert{padding:12px 16px; border-radius:10px; margin-bottom:15px; font-size:13px}
.alert.err{background:#fef2f2; color:#b91c1c; border:1px solid #fecaca}
.alert.ok{background:#f0fdf4; color:#166534; border:1px solid #bbf7d0}
.alert.info{background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe}

/* ===== 填报行 ===== */
.sop-row{border:1px solid var(--line); border-radius:11px; padding:13px 15px; margin-bottom:11px; background:#fff; transition:all .15s}
.sop-row:hover{border-color:#c7d5ea; box-shadow:0 2px 10px rgba(15,23,42,.05)}
.sop-row.blocked{border-color:#fecaca; background:#fff7f7}
.sop-row .t{font-weight:700; margin-bottom:10px; display:flex; gap:8px; align-items:flex-start}
.sop-row .t .idx{color:#94a3b8; font-weight:400}
.sop-row .controls{display:grid; grid-template-columns:150px 130px 90px 110px 1fr; gap:10px; align-items:end}
@media(max-width:900px){.sop-row .controls{grid-template-columns:1fr 1fr}}
.chk{display:flex; align-items:center; gap:6px; padding-bottom:9px}
.chk input{width:auto}

/* ===== 登录页 ===== */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 20% 10%,#24365d 0%,#1B2A4A 45%,#111c33 100%);
  position:relative; overflow:hidden;
}
.login-wrap::after{
  content:''; position:absolute; width:520px;height:520px; right:-120px; bottom:-160px;
  background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%); border-radius:50%;
}
.login-card{
  background:#fff; padding:40px 36px; border-radius:20px; width:390px; z-index:1;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.login-brand .logo{width:46px;height:46px;border-radius:13px;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 8px 20px rgba(6,182,212,.4)}
.login-brand h1{margin:0; font-size:23px; font-weight:800; letter-spacing:.02em; color:var(--brand-2)}
.login-brand h1 span{background:var(--accent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.login-card p.sub{margin:0 0 26px; color:var(--muted); font-size:13px}
.hint{font-size:12px; color:var(--muted); margin-top:18px; text-align:center; line-height:1.8}
.hint b{color:var(--brand)}

.muted{color:var(--muted)} .small{font-size:12px} .nowrap{white-space:nowrap}
.mt0{margin-top:0} .mb0{margin-bottom:0}
.flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}
.pill{background:#f1f5f9; border-radius:8px; padding:2px 9px; font-size:12px; color:#475569}
.progress{background:#eef2f7; border-radius:6px; height:7px; overflow:hidden; min-width:80px}
.progress > i{display:block; height:100%; background:var(--accent)}
.filterbar{display:flex; gap:10px; flex-wrap:wrap; align-items:end}
.filterbar .field{margin:0}

/* ===== 驾驶舱仪表盘 ===== */
.cockpit{
  background:linear-gradient(135deg,#1B2A4A 0%,#24365d 60%,#1B2A4A 100%);
  border-radius:var(--radius); padding:18px 20px; margin-bottom:18px;
  box-shadow:var(--shadow-lg); color:#fff;
}
.cockpit-head{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.cockpit-title{font-size:17px; font-weight:800; letter-spacing:.02em}
.cockpit-title .muted{color:#93a4c4}
.cockpit-filter{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cockpit-filter input,.cockpit-filter select{
  width:auto; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:6px 10px; font-size:12.5px;
}
.cockpit-filter input::placeholder{color:#c7d2e3}
.cockpit-filter select option{color:#1e293b}
.cockpit-metrics{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.metric{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:12px; padding:14px 12px; text-align:center; position:relative; overflow:hidden;
}
.metric .m-n{font-size:42px; font-weight:800; line-height:1; letter-spacing:-.03em}
.metric .m-l{font-size:12px; color:#b8c6e0; margin-top:7px; font-weight:600}
.metric.green{background:linear-gradient(160deg,rgba(34,197,94,.28),rgba(34,197,94,.06)); border-color:rgba(34,197,94,.45)} .metric.green .m-n{color:#4ade80}
.metric.sky{background:linear-gradient(160deg,rgba(56,189,248,.28),rgba(56,189,248,.06)); border-color:rgba(56,189,248,.45)} .metric.sky .m-n{color:#38bdf8}
.metric.red{background:linear-gradient(160deg,rgba(239,68,68,.28),rgba(239,68,68,.06)); border-color:rgba(239,68,68,.45)} .metric.red .m-n{color:#f87171}
.metric.amber{background:linear-gradient(160deg,rgba(245,158,11,.28),rgba(245,158,11,.06)); border-color:rgba(245,158,11,.45)} .metric.amber .m-n{color:#fbbf24}
.metric.gray{background:linear-gradient(160deg,rgba(148,163,184,.28),rgba(148,163,184,.06)); border-color:rgba(148,163,184,.45)} .metric.gray .m-n{color:#cbd5e1}
.metric.danger{background:linear-gradient(160deg,rgba(220,38,38,.55),rgba(220,38,38,.2)); border-color:#ef4444}
.metric.danger .m-n{color:#fff}
.metric.danger .m-l{color:#fecaca}
.metric.pulse{animation:pulseRed 1.8s ease-in-out infinite}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}
@media(max-width:1100px){.cockpit-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  .cockpit{padding:14px}
  .cockpit-metrics{grid-template-columns:repeat(2,1fr); gap:9px}
  .metric .m-n{font-size:34px}
  .cockpit-filter{width:100%}
}

/* ===== 员工状态一览 ===== */
.staff-table td{border-bottom:1px solid var(--line); padding:9px 14px}
.staff-table .big-num{font-size:17px}
.status-block{
  display:inline-block; min-width:46px; text-align:center; padding:3px 8px; border-radius:7px;
  font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap;
}
.status-block.green{background:#16a34a}
.status-block.amber{background:#ea8a04}
.status-block.red{background:#dc2626}
.status-block.gray{background:#94a3b8}
td > .status-block{vertical-align:middle}
.staff-table tr.row-red td:first-child{border-left:3px solid #dc2626}
.staff-table tr.row-amber td:first-child{border-left:3px solid #ea8a04}
.staff-table tr.row-gray td:first-child{border-left:3px solid #cbd5e1}
.staff-table tr.row-green td:first-child{border-left:3px solid #16a34a}
.mini-badge{display:inline-block; border-radius:6px; padding:1px 7px; font-size:11.5px; font-weight:700; margin-right:4px}
.mini-badge.red{background:#fee2e2; color:#b91c1c}
.mini-badge.amber{background:#ffedd5; color:#b45309}
.legend{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.lg{font-size:11px; color:#fff; padding:2px 9px; border-radius:20px; font-weight:600}
.lg-green{background:#16a34a} .lg-amber{background:#ea8a04} .lg-red{background:#dc2626} .lg-gray{background:#94a3b8}

/* ===== 文件归档模块 ===== */
.archive-layout{display:grid; grid-template-columns:290px 1fr; gap:16px; align-items:start}
.tree-card{position:sticky; top:74px}
.tree{padding:8px 6px; max-height:70vh; overflow:auto}
.tree-item{padding:2px 6px; line-height:1.9; display:flex; align-items:center; gap:2px}
.tree-item .tw{color:#94a3b8; width:14px; display:inline-block; text-align:center; flex:0 0 14px}
.tree-item a{display:inline; color:#334155; border-radius:7px; padding:2px 7px}
.tree-item a:hover{background:#f1f5f9; text-decoration:none}
.tree-item a.on{background:var(--accent); color:#fff; font-weight:700}
.tree-edit .tree-item{flex-wrap:wrap; border-bottom:1px dashed var(--line); padding:5px 6px}
.tree-edit .tname{font-weight:700; min-width:120px}
.tree-edit .tpath{font-family:Consolas,Monaco,monospace}
.tree-edit .tact{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.tree-edit .tact form{margin:0}
.mini-in{width:120px; padding:4px 8px; font-size:12px; display:inline-block}
@media(max-width:900px){
  .archive-layout{grid-template-columns:1fr}
  .tree-card{position:static}
  .tree{max-height:none}
  .tree-edit .tact{margin-left:0; width:100%}
  .mini-in{width:100%; max-width:180px}
}