@charset "utf-8";
/* =====================================================================
   华亭建设资质管理系统 · 后台样式
   令牌与《后台UI稿》保持一致：品牌色 #0F3C86 / 点缀金 #C8862B / 预警红 #B3261E
   布局规则：内容区铺满可用宽度（只留左右安全留白），仅在超宽屏才居中封顶；
             背景与分隔线始终通铺全宽，只有内容收敛。
   ===================================================================== */

:root{
  --navy:#0F3C86;
  --navy-d:#0B2C63;
  --navy-l:#1A4E9E;
  --gold:#C8862B;
  --red:#B3261E;
  --green:#2E7D4F;
  --amber:#B98110;

  --ink:#1B2333;
  --ink2:#4A5567;
  --ink3:#8A94A6;
  --line:#E3E8F0;
  --line2:#EDF1F7;
  --bg:#F2F5FA;
  --card:#FFFFFF;
  --soft:#F7F9FC;

  /* ── 内容区宽度 ──
     早前定过 1280px 居中收敛，但在 1920 的屏上会左右各空 200 多像素，
     人员档案/证书这类十列宽表被挤到横向滚动里、右侧"操作"列看不到。
     现改为：默认铺满可用宽度，只留左右安全留白；只有超宽屏（可用宽度
     超过 2048px）才居中封顶，避免行长失控、表格被拉得过散。 */
  --content-w:min(2048px, 100%);
  --gutter:clamp(16px, 1.4vw, 32px);
  --radius:10px;
  --shadow:0 2px 10px rgba(15,60,134,.06);
  --shadow2:0 6px 26px rgba(15,60,134,.12);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Segoe UI",Arial,sans-serif;
  font-size:13.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--navy-l);}
h1,h2,h3,h4{margin:0;font-weight:700;}
em{font-style:normal;}
table{border-collapse:collapse;width:100%;}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit;}

/* ───────── 外壳 ───────── */
.app{display:flex;min-height:100vh;}
.side{
  width:216px;flex:none;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-d) 100%);
  color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 16px;}
.brand .lgm{
  width:34px;height:34px;flex:none;background-size:contain;
  background-repeat:no-repeat;background-position:center;
  background-image:url(../img/logo_w.png);
}
.brand span{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.brand b{font-size:15px;letter-spacing:.5px;}
.brand em{font-size:9px;letter-spacing:1.1px;opacity:.62;}
.nav{flex:1;overflow-y:auto;padding:4px 0 18px;}
.nav::-webkit-scrollbar{width:6px;}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
.nav .gp{padding:14px 16px 6px;font-size:10.5px;letter-spacing:1.2px;color:rgba(255,255,255,.42);text-transform:uppercase;}
.nav a{
  display:flex;align-items:center;gap:8px;padding:9px 16px;color:rgba(255,255,255,.82);
  font-size:13px;border-left:3px solid transparent;transition:.15s;
}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav a.on{background:rgba(255,255,255,.13);color:#fff;border-left-color:var(--gold);font-weight:700;}
.nav a .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);flex:none;}
.nav a.on .dot{background:var(--gold);}
.nav a .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10.5px;padding:1px 6px;border-radius:9px;font-weight:700;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.top{
  height:52px;flex:none;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 var(--gutter);position:sticky;top:0;z-index:30;
}
.crumb{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:7px;}
.crumb b{color:var(--ink);font-size:14px;}
.crumb .sep{color:var(--ink3);}
.top .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink2);}
.top .right .who{display:flex;align-items:center;gap:7px;}
.avt{
  width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:none;
}
.top .right a{color:var(--ink2);}
.top .right a:hover{color:var(--red);}

.body{flex:1;padding:16px var(--gutter) 40px;min-width:0;}
.wrap{max-width:var(--content-w);margin:0 auto;}

/* ───────── 卡片 ───────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;}
.card>.hd{
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2);
}
.card>.hd h3{font-size:14.5px;}
.card>.hd .sub{font-size:12px;color:var(--ink3);}
.card>.hd .act{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;}
.card>.bd{padding:14px 16px;}
.card>.bd.tight{padding:0;}
.card.nb{margin-bottom:0;}

/* ───────── KPI ───────── */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:14px;}
.kpis.c4{grid-template-columns:repeat(4,1fr);}
.kpis.c5{grid-template-columns:repeat(5,1fr);}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;box-shadow:var(--shadow);position:relative;overflow:hidden;}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--navy);}
.kpi.g:before{background:var(--gold);}
.kpi.r:before{background:var(--red);}
.kpi.k:before{background:var(--green);}
.kpi .lb{font-size:11.5px;color:var(--ink3);letter-spacing:.3px;}
.kpi .vl{font-size:25px;font-weight:700;line-height:1.25;margin-top:2px;font-variant-numeric:tabular-nums;}
.kpi .vl small{font-size:12px;font-weight:400;color:var(--ink3);margin-left:3px;}
.kpi .ft{font-size:11.5px;color:var(--ink3);margin-top:2px;}
.kpi .ft b{color:var(--red);}
.kpi .ft b.g{color:var(--green);}

/* ───────── 表格 ───────── */
.tbl{width:100%;font-size:12.8px;}
.tbl th{
  background:var(--soft);text-align:left;font-weight:700;color:var(--ink2);
  padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:12.2px;
}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle;}
.tbl tbody tr:hover{background:#FBFCFE;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl .nm{font-weight:700;color:var(--ink);}
.tbl .mut{color:var(--ink3);}
.tbl .num{font-variant-numeric:tabular-nums;text-align:right;}
.tbl .ctr{text-align:center;}
.tbl .op{white-space:nowrap;}
.tbl .op a{margin-right:9px;font-size:12.5px;}
.tbl .op a.dg{color:var(--red);}
.tbl-hd{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line2);}
.tbl-hd h3{font-size:14.5px;}
.tbl-hd .act{margin-left:auto;display:flex;gap:8px;}
.scroll{overflow-x:auto;}

/* ───────── 标签 ───────── */
.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11.5px;line-height:1.7;white-space:nowrap;}
.tag.ok{background:#E8F3EC;color:var(--green);}
.tag.warn{background:#FDF3E2;color:var(--amber);}
.tag.danger{background:#FBEAE8;color:var(--red);}
.tag.info{background:#EAF1FB;color:var(--navy);}
.tag.idle{background:#F0F2F6;color:var(--ink3);}
.tag.gold{background:#FAF0DF;color:var(--gold);}
.tag.plain{background:transparent;color:var(--ink3);padding-left:0;}

/* ───────── 按钮 ───────── */
.btn{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 13px;border-radius:6px;
  border:1px solid var(--line);background:#fff;color:var(--ink2);cursor:pointer;font-size:12.8px;
  transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:#C9D4E6;color:var(--navy);}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700;}
.btn.pri:hover{background:var(--navy-l);border-color:var(--navy-l);color:#fff;}
.btn.dg{color:var(--red);border-color:#EFCFCB;}
.btn.dg:hover{background:var(--red);border-color:var(--red);color:#fff;}
.btn.sm{height:26px;padding:0 9px;font-size:12px;}
.btn.lg{height:36px;padding:0 20px;font-size:13.5px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ───────── 表单 ───────── */
.frm{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;}
.frm.c3{grid-template-columns:repeat(3,1fr);}
.frm .f{display:flex;flex-direction:column;gap:5px;}
.frm .f.full{grid-column:1 / -1;}
.frm label{font-size:12.2px;color:var(--ink2);font-weight:700;}
.frm label i{color:var(--red);font-weight:400;}
.frm input[type=text],.frm input[type=password],.frm input[type=date],.frm input[type=number],
.frm input[type=tel],.frm select,.frm textarea{
  height:32px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:#fff;
  outline:none;transition:.15s;width:100%;
}
.frm textarea{height:auto;padding:8px 10px;min-height:64px;resize:vertical;line-height:1.7;}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,60,134,.08);}
.frm .hint{font-size:11.5px;color:var(--ink3);}
.form-foot{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line2);background:var(--soft);}
.form-foot .l{margin-left:auto;display:flex;gap:10px;}

/* 筛选行 */
.filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line2);background:#fff;}
.filters .fi{display:flex;flex-direction:column;gap:4px;}
.filters .fi label{font-size:11.5px;color:var(--ink3);}
.filters .fi input,.filters .fi select{height:30px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:#fff;outline:none;min-width:120px;}
.filters .fi input:focus,.filters .fi select:focus{border-color:var(--navy);}
.filters .fi.wide input{min-width:180px;}
.filters .fb{margin-left:auto;display:flex;gap:8px;}

/* 勾选组（多选数据范围 / 权限） */
.chks{display:flex;flex-wrap:wrap;gap:8px 18px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;background:#FCFDFF;}
.chks .chk{display:inline-flex;align-items:center;gap:6px;font-size:12.8px;color:var(--ink2);cursor:pointer;font-weight:400;}
.chks .chk input[type=checkbox]{width:auto;height:auto;margin:0;flex:none;cursor:pointer;}
.chks .chk:hover{color:var(--navy);}

/* 芯片 */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);
  border-radius:20px;background:#fff;font-size:12.5px;color:var(--ink2);
}
.chip:hover{border-color:var(--navy);color:var(--navy);}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700;}
.chip b{font-variant-numeric:tabular-nums;}
.chip .n{color:var(--ink3);font-size:11.5px;}
.chip.on .n{color:rgba(255,255,255,.7);}

/* ───────── 条形图 ───────── */
.bars{display:flex;flex-direction:column;gap:9px;}
.bar{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.bar .nm{width:110px;flex:none;color:var(--ink2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar .tr{flex:1;height:16px;background:var(--soft);border-radius:4px;overflow:hidden;display:flex;}
.bar .tr i{display:block;height:100%;}
.bar .tr i.v{background:var(--navy);}
.bar .tr i.s{background:var(--gold);}
.bar .tr i.e{background:var(--red);}
.bar .tr i.n{background:#C8D0DE;}
.bar .vl{width:78px;flex:none;color:var(--ink3);font-size:12px;font-variant-numeric:tabular-nums;}
.bar .vl b{color:var(--ink);}

/* ───────── 提示条 ───────── */
.alert{display:flex;gap:9px;align-items:flex-start;padding:10px 13px;border-radius:8px;font-size:12.8px;margin-bottom:12px;border:1px solid;}
.alert.ok{background:#EEF7F1;border-color:#CFE7D8;color:#215F3E;}
.alert.err{background:#FDECEA;border-color:#F3D2CE;color:#8E1F19;}
.alert.warn{background:#FEF7E9;border-color:#F0E0BE;color:#8A6212;}
.alert.info{background:#EDF2FB;border-color:#D3E0F4;color:#183F83;}
.alert b{font-weight:700;}

/* ───────── 分页 ───────── */
.pager{display:flex;align-items:center;gap:6px;padding:11px 16px;border-top:1px solid var(--line2);font-size:12.5px;}
.pager .pg-total{color:var(--ink3);margin-right:auto;}
.pager .pg{padding:3px 9px;border:1px solid var(--line);border-radius:5px;color:var(--ink2);}
.pager .pg:hover{border-color:var(--navy);color:var(--navy);}
.pager .pg.is-cur{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700;}

/* ───────── 空态 ───────── */
.empty{padding:40px 16px;text-align:center;color:var(--ink3);font-size:13px;}
.empty .big{font-size:26px;opacity:.35;display:block;margin-bottom:8px;}

/* ───────── 人员卡 ───────── */
.pcard{display:flex;gap:16px;align-items:flex-start;padding:16px;}
.pcard .ava{
  width:64px;height:64px;border-radius:12px;flex:none;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
}
.pcard .info{flex:1;min-width:0;}
.pcard .info .n{font-size:19px;font-weight:700;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.pcard .info .m{color:var(--ink2);font-size:12.8px;margin-top:5px;display:flex;flex-wrap:wrap;gap:6px 18px;}
.pcard .info .m span{white-space:nowrap;}
.pcard .info .m b{color:var(--ink);}

/* 描述列表 */
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line2);}
.dl.c2{grid-template-columns:repeat(2,1fr);}
.dl .it{padding:10px 16px;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);}
.dl .it .k{font-size:11.5px;color:var(--ink3);}
.dl .it .v{font-size:13.2px;margin-top:2px;word-break:break-all;}
.dl .it .v b{font-weight:700;}

/* 分栏 */
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start;}
.cols.eq{grid-template-columns:1fr 1fr;}
.cols.rt{grid-template-columns:1fr 1.55fr;}

/* 时间线 */
.tl{position:relative;padding-left:18px;}
.tl:before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:1px;background:var(--line);}
.tl .ev{position:relative;padding:0 0 12px 4px;}
.tl .ev:before{content:"";position:absolute;left:-17px;top:5px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--navy);}
.tl .ev.gold:before{border-color:var(--gold);}
.tl .ev .t{font-size:12.8px;font-weight:700;}
.tl .ev .d{font-size:11.8px;color:var(--ink3);}

/* ───────── 弹层 ───────── */
.mask{
  position:fixed;inset:0;background:rgba(16,26,44,.5);z-index:100;display:none;
  align-items:flex-start;justify-content:center;padding:60px 16px;overflow-y:auto;
}
.mask.on{display:flex;}
.dlg{background:#fff;border-radius:12px;box-shadow:var(--shadow2);width:100%;max-width:620px;overflow:hidden;}
.dlg.wide{max-width:880px;}
.dlg .hd{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line2);}
.dlg .hd h3{font-size:15px;}
.dlg .hd .x{margin-left:auto;color:var(--ink3);cursor:pointer;font-size:18px;line-height:1;background:none;border:0;}
.dlg .bd{padding:16px 18px;max-height:62vh;overflow-y:auto;}
.dlg .ft{display:flex;gap:10px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line2);background:var(--soft);}
.dlg .ft .l{margin-right:auto;color:var(--ink3);font-size:12.5px;}

/* ───────── 登录页 ───────── */
.login-wrap{display:flex;min-height:100vh;background:linear-gradient(135deg,#0B2C63 0%,#0F3C86 55%,#1A4E9E 100%);}
.login{
  margin:auto;width:100%;max-width:1040px;display:flex;background:#fff;border-radius:14px;
  overflow:hidden;box-shadow:0 18px 60px rgba(4,18,45,.4);
}
.login .lt{
  flex:1;background:linear-gradient(160deg,#0F3C86 0%,#0B2C63 100%);color:#fff;
  padding:44px 40px;display:flex;flex-direction:column;
}
.login .lt .lg{width:56px;height:56px;background-size:contain;background-repeat:no-repeat;background-position:center;background-image:url(../img/logo_w.png);}
.login .lt h2{font-size:21px;margin-top:18px;line-height:1.4;}
.login .lt .en{font-size:10.5px;letter-spacing:2px;opacity:.55;margin-top:6px;}
.login .lt ul{list-style:none;padding:0;margin:26px 0 0;font-size:12.8px;color:rgba(255,255,255,.86);}
.login .lt ul li{padding:5px 0 5px 16px;position:relative;}
.login .lt ul li:before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;background:var(--gold);}
.login .lt .cr{margin-top:auto;font-size:11.5px;color:rgba(255,255,255,.5);line-height:1.8;}
.login .rt{width:392px;flex:none;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;}
.login .rt h3{font-size:19px;margin-bottom:4px;}
.login .rt .st{font-size:12.8px;color:var(--ink3);margin-bottom:22px;}
.login .rt .f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.login .rt .f label{font-size:12.5px;color:var(--ink2);font-weight:700;}
.login .rt .f input{height:40px;padding:0 12px;border:1px solid var(--line);border-radius:7px;outline:none;background:#fff;}
.login .rt .f input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(15,60,134,.09);}
.login .rt .btn{height:42px;justify-content:center;font-size:14.5px;margin-top:6px;}
.login .rt .tip{margin-top:16px;font-size:11.8px;color:var(--ink3);line-height:1.9;}

/* ───────── 纯信息页 ───────── */
.plain{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px;}
.plain .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:34px 40px;max-width:520px;text-align:center;box-shadow:var(--shadow);}
.plain .box .cd{font-size:38px;font-weight:700;color:var(--navy);line-height:1;}
.plain .box h3{font-size:17px;margin:12px 0 8px;}
.plain .box p{color:var(--ink2);font-size:13px;margin:0 0 18px;}

/* 工具 */
.mt0{margin-top:0;}
.mt8{margin-top:8px;}
.mt14{margin-top:14px;}
.mb0{margin-bottom:0;}
.mb14{margin-bottom:14px;}
.tc{text-align:center;}
.tr{text-align:right;}
.mut{color:var(--ink3);}
.small{font-size:12px;}
.fw{font-weight:700;}
.nowrap{white-space:nowrap;}
.hide{display:none !important;}

/* 响应式：窄屏侧栏收起、栅格降列 */
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(3,1fr);}
  .kpis.c5,.kpis.c4{grid-template-columns:repeat(2,1fr);}
  .cols,.cols.eq,.cols.rt{grid-template-columns:1fr;}
  .dl{grid-template-columns:repeat(2,1fr);}
  .frm,.frm.c3{grid-template-columns:repeat(2,1fr);}
  .login .lt{display:none;}
  .login{max-width:420px;}
  .login .rt{width:100%;}
}
@media (max-width:760px){
  .side{position:fixed;left:-230px;transition:.2s;z-index:60;}
  .side.on{left:0;}
  .kpis,.kpis.c5,.kpis.c4{grid-template-columns:repeat(2,1fr);}
  .dl{grid-template-columns:1fr;}
  .frm,.frm.c3{grid-template-columns:1fr;}
  .body{padding:12px 12px 30px;}
  .top{padding:0 12px;}
}