/* 员工人工成本管理系统 - 主样式 (Ant Design 风格, 依据用户UI稿) */
:root{
  --primary:#1677FF; --primary-hover:#4096FF; --primary-active:#0958D9; --primary-bg:#E6F4FF;
  --bg:#F5F7FA; --card:#FFFFFF; --text:#1F2329; --text-2:#4B5563; --text-3:#8C8C8C;
  --text-4:#C0C4CC; --border:#E5E7EB; --border-2:#F0F0F0;
  --success:#52C41A; --success-bg:#F6FFED; --warn:#FAAD14; --warn-bg:#FFFBE6;
  --error:#FF4D4F; --error-bg:#FFF1F0; --neutral:#86909C; --neutral-bg:#F2F3F5;
  --thead:#1F2A44; --hover:#F5F9FF; --zebra:#F7F9FC;
  --radius-card:8px; --radius-btn:6px; --radius-tag:999px;
  --shadow:0 1px 2px rgba(0,0,0,.03), 0 2px 8px rgba(0,0,0,.04);
  --sidebar:220px; --header:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei","HarmonyOS Sans",sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.5}
a{color:var(--primary);text-decoration:none}
.num{font-variant-numeric:tabular-nums}

/* ===== 布局 ===== */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);background:var(--card);border-right:1px solid var(--border-2);
  position:fixed;top:0;bottom:0;left:0;display:flex;flex-direction:column;z-index:10}
.logo{height:64px;display:flex;align-items:center;gap:10px;padding:0 18px;
  border-bottom:1px solid var(--border-2);flex-shrink:0}
.logo-icon{width:32px;height:32px;border-radius:8px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700}
.logo-text{font-size:15px;font-weight:600;white-space:nowrap}
.nav{flex:1;overflow-y:auto;padding:8px 10px}
.nav-group{margin-top:10px}
.nav-group-title{font-size:11.5px;color:var(--text-3);padding:6px 10px;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.nav-group-title .arw{font-size:9px;transition:transform .2s}
.nav-group.collapsed .nav-group-title .arw{transform:rotate(-90deg)}
.nav-group.collapsed .nav-item{display:none}
.nav-item{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;border-radius:8px;
  color:var(--text-2);font-size:13.5px;cursor:pointer;margin:2px 0;transition:.15s}
.nav-item:hover{background:var(--hover);color:var(--primary)}
.nav-item.active{background:var(--primary-bg);color:var(--primary);font-weight:500}
.nav-item .ic{width:16px;text-align:center;font-size:14px;opacity:.85}
.sidebar-foot{padding:10px;border-top:1px solid var(--border-2);flex-shrink:0}
.user-chip{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  background:var(--bg);font-size:13px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}

.main{margin-left:var(--sidebar);flex:1;min-width:0;display:flex;flex-direction:column}
.header{height:var(--header);background:var(--card);border-bottom:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px;
  position:sticky;top:0;z-index:9}
.crumb{font-size:13px;color:var(--text-3)}
.crumb b{color:var(--text);font-weight:600}
.header-right{display:flex;align-items:center;gap:16px}
.search-box{width:260px;height:32px;border:1px solid var(--border);border-radius:var(--radius-btn);
  padding:0 12px;font-size:13px;background:#fff;outline:none}
.search-box:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(22,119,255,.1)}
.bell{position:relative;font-size:17px;cursor:pointer;color:var(--text-2)}
.bell .dot{position:absolute;top:-2px;right:-3px;width:7px;height:7px;border-radius:50%;
  background:var(--error);border:1.5px solid #fff}
.content{padding:20px 24px;flex:1}

/* ===== 卡片 ===== */
.card{background:var(--card);border:1px solid var(--border-2);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-t{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-t .ic{color:var(--primary)}
.card-sub{font-size:12px;color:var(--text-3);font-weight:400}

/* ===== KPI 卡 ===== */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:16px}
.kpi-row.c3{grid-template-columns:repeat(3,1fr)}
.kpi-row.c4{grid-template-columns:repeat(4,1fr)}
.kpi{background:#fff;border:1px solid var(--border-2);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:16px 18px;position:relative;overflow:hidden}
.kpi-label{font-size:13px;color:var(--text-3);display:flex;align-items:center;justify-content:space-between}
.kpi-val{font-size:28px;font-weight:600;margin-top:6px;color:var(--text);line-height:1.2}
.kpi-val.sm{font-size:22px}
.kpi-foot{font-size:12px;color:var(--text-3);margin-top:5px}
.kpi-val.up{color:var(--success)} .kpi-val.down{color:var(--error)}
.kpi-bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.kpi-bar.g{background:var(--success)} .kpi-bar.r{background:var(--error)} .kpi-bar.y{background:var(--warn)}

/* ===== 标签 ===== */
.tag{display:inline-flex;align-items:center;padding:1px 9px;border-radius:var(--radius-tag);
  font-size:12px;line-height:20px;white-space:nowrap}
.tag-blue{background:var(--primary-bg);color:var(--primary)}
.tag-green{background:var(--success-bg);color:var(--success)}
.tag-yellow{background:var(--warn-bg);color:#D48806}
.tag-red{background:var(--error-bg);color:var(--error)}
.tag-gray{background:var(--neutral-bg);color:var(--neutral)}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;
  padding:0 16px;border-radius:var(--radius-btn);font-size:13px;cursor:pointer;border:1px solid transparent;
  transition:.15s;white-space:nowrap;font-family:inherit}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover)}
.btn-default{background:#fff;border-color:var(--border);color:var(--text-2)}
.btn-default:hover{border-color:var(--primary);color:var(--primary)}
.btn-sm{height:28px;padding:0 12px;font-size:12.5px}
.btn-danger{background:var(--error);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-link{background:none;border:none;color:var(--primary);cursor:pointer;font-size:13px;padding:0 6px;font-family:inherit}

/* ===== 筛选区 ===== */
.filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.filter label{font-size:13px;color:var(--text-3)}
.sel,.inp{height:32px;border:1px solid var(--border);border-radius:var(--radius-btn);padding:0 10px;
  font-size:13px;background:#fff;color:var(--text);outline:none;font-family:inherit}
.sel:focus,.inp:focus{border-color:var(--primary)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-btn);overflow:hidden;background:#fff}
.seg button{border:none;background:#fff;padding:0 14px;height:30px;font-size:13px;cursor:pointer;
  color:var(--text-2);font-family:inherit}
.seg button.on{background:var(--primary);color:#fff}
.seg button:not(:last-child){border-right:1px solid var(--border)}

/* ===== 表格 ===== */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius-card);border:1px solid var(--border-2)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.tbl thead th{background:var(--thead);color:#fff;font-weight:500;text-align:left;
  padding:11px 12px;white-space:nowrap;font-size:12.5px}
table.tbl thead.light th{background:#FAFAFA;color:var(--text-3);border-bottom:1px solid var(--border-2)}
table.tbl tbody td{padding:11px 12px;border-bottom:1px solid var(--border-2);color:var(--text);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover td{background:var(--hover)}
table.tbl tbody tr.zebra td{background:var(--zebra)}
table.tbl tbody tr.zebra:hover td{background:var(--hover)}
table.tbl .r{text-align:right} table.tbl .c{text-align:center}
.who{display:flex;align-items:center;gap:9px}
.who .avatar{width:28px;height:28px;font-size:12px}
.who .nm{font-weight:500}
.who .sub{font-size:11px;color:var(--text-3)}
.empty{text-align:center;color:var(--text-3);padding:52px 0;font-size:13.5px}
.empty .ico{font-size:38px;opacity:.35;display:block;margin-bottom:12px}

/* ===== 分页 ===== */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:14px;font-size:13px;color:var(--text-3)}
.pager button{min-width:28px;height:28px;border:1px solid var(--border);background:#fff;border-radius:6px;
  cursor:pointer;font-size:12.5px;color:var(--text-2);font-family:inherit}
.pager button.on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ===== 表单 ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.form-item{display:flex;flex-direction:column;gap:6px}
.form-item label{font-size:13px;color:var(--text-2)}
.form-item label .req{color:var(--error);margin-left:2px}
.form-item .inp,.form-item .sel{width:100%}
.form-item .full{grid-column:1/-1}
textarea.inp{height:auto;padding:8px 10px;resize:vertical;min-height:64px;font-family:inherit}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-2);margin-bottom:18px}
.tabs button{border:none;background:none;padding:9px 16px;font-size:14px;cursor:pointer;color:var(--text-2);
  border-bottom:2px solid transparent;font-family:inherit}
.tabs button.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}

/* ===== 图表 ===== */
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chart-box{height:260px;width:100%}
.bars{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.bar-item{display:flex;align-items:center;gap:12px;font-size:13px}
.bar-item .lbl{width:90px;color:var(--text-2);flex-shrink:0}
.bar-track{flex:1;height:20px;background:var(--bg);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--primary);border-radius:4px;transition:width .4s}
.bar-item .val{width:88px;text-align:right;color:var(--text);flex-shrink:0;font-variant-numeric:tabular-nums}

/* ===== 列表(提醒) ===== */
.alist{display:flex;flex-direction:column}
.aitem{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--border-2)}
.aitem:last-child{border-bottom:none}
.aitem .no{width:26px;height:26px;border-radius:7px;background:var(--primary-bg);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;flex-shrink:0}
.aitem .txt{flex:1;min-width:0}
.aitem .txt .t1{font-size:13.5px}
.aitem .txt .t2{font-size:12px;color:var(--text-3);margin-top:2px}

/* ===== 登录页 ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0B2B5C 0%,#1677FF 100%)}
.login-card{width:400px;background:#fff;border-radius:12px;padding:40px 40px 32px;
  box-shadow:0 12px 40px rgba(0,0,0,.18)}
.login-card h1{font-size:21px;font-weight:600;text-align:center;margin-bottom:6px}
.login-card .sub{font-size:13px;color:var(--text-3);text-align:center;margin-bottom:28px}
.login-card .form-item{margin-bottom:16px}
.login-card .btn{width:100%;height:40px;margin-top:8px}
.err-msg{background:var(--error-bg);color:var(--error);font-size:13px;padding:9px 12px;
  border-radius:6px;margin-bottom:16px}

/* ===== 提示 ===== */
.toast{position:fixed;top:20px;right:20px;background:#fff;border-left:3px solid var(--success);
  box-shadow:0 6px 24px rgba(0,0,0,.14);border-radius:8px;padding:13px 20px;font-size:13.5px;z-index:999;
  animation:slideIn .25s}
.toast.err{border-left-color:var(--error)}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.tip{background:var(--primary-bg);border:1px solid #BAE0FF;border-radius:6px;padding:10px 14px;
  font-size:12.5px;color:#0958D9;display:flex;gap:8px;align-items:flex-start;margin-top:14px}
.stat-mini{display:flex;gap:28px;flex-wrap:wrap}
.stat-mini .s{display:flex;flex-direction:column;gap:2px}
.stat-mini .s .v{font-size:20px;font-weight:600}
.stat-mini .s .l{font-size:12px;color:var(--text-3)}
.ylw{background:var(--warn-bg)}

@media(max-width:1180px){
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .chart-row{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-100%)}
  .main{margin-left:0}
  .kpi-row,.kpi-row.c4,.kpi-row.c3{grid-template-columns:repeat(2,1fr)}
  .content{padding:14px}
}