/* ========== 智慧考勤系统 全局样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  background: #f0f3fa;
  color: #2b3550;
  min-height: 100vh;
}

/* ---------- 顶部导航 ---------- */
.topbar {
  background: linear-gradient(135deg, #4a6cf7 0%, #6a4df6 55%, #8b3df0 100%);
  color: #fff;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  box-shadow: 0 4px 18px rgba(74, 108, 247, .35);
  position: sticky; top: 0; z-index: 100;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.topbar .brand .logo {
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  backdrop-filter: blur(6px);
}
.topbar .user { font-size: 14px; display: flex; align-items: center; gap: 14px; }
.topbar .user a { color: #fff; text-decoration: none; background: rgba(255,255,255,.18); padding: 6px 14px; border-radius: 20px; font-size: 13px; }
.topbar .user a:hover { background: rgba(255,255,255,.32); }

/* ---------- 菜单 ---------- */
.menu {
  background: #fff;
  padding: 0 32px;
  display: flex; gap: 4px;
  box-shadow: 0 2px 8px rgba(30, 45, 90, .06);
}
.menu a {
  display: block; padding: 14px 20px; color: #5a6685; text-decoration: none;
  font-size: 15px; border-bottom: 3px solid transparent; transition: all .2s;
}
.menu a:hover { color: #4a6cf7; }
.menu a.active { color: #4a6cf7; font-weight: 700; border-bottom-color: #4a6cf7; }

/* ---------- 主体 ---------- */
.container { max-width: 1180px; margin: 28px auto; padding: 0 24px; }
.page-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.page-desc { color: #7a86a5; font-size: 14px; margin-bottom: 20px; }

/* ---------- 卡片 ---------- */
.card {
  background: #fff; border-radius: 16px; padding: 24px;
  box-shadow: 0 6px 24px rgba(35, 55, 110, .08);
  margin-bottom: 22px;
}
.card h3 { font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.card h3::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg,#4a6cf7,#8b3df0); }

/* ---------- 统计卡片 ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.stat-card {
  border-radius: 16px; padding: 20px 22px; color: #fff; position: relative; overflow: hidden;
  box-shadow: 0 8px 20px rgba(40, 60, 130, .16);
}
.stat-card .num { font-size: 32px; font-weight: 800; margin-top: 6px; }
.stat-card .label { font-size: 14px; opacity: .9; }
.stat-card .icon { position: absolute; right: 14px; top: 14px; font-size: 34px; opacity: .35; }
.stat-blue   { background: linear-gradient(135deg, #4a8cf7, #3f6de8); }
.stat-green  { background: linear-gradient(135deg, #2fc98a, #17a96f); }
.stat-orange { background: linear-gradient(135deg, #f7a94a, #ef8a2c); }
.stat-red    { background: linear-gradient(135deg, #f76a6a, #e84d5b); }

/* ---------- 表格 ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th {
  text-align: left; padding: 12px 14px; background: #f4f7ff; color: #4a5a80;
  font-weight: 700; border-bottom: 2px solid #e4eaf8; white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid #eef2fa; }
table.data tr:hover td { background: #f8faff; }

/* ---------- 状态徽章 ---------- */
.badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.badge-ok    { background: #e2f8ee; color: #149a67; }
.badge-late  { background: #fff3dd; color: #dd8a1d; }
.badge-leave { background: #e3ecff; color: #4a6cf7; }
.badge-abs   { background: #ffe5e7; color: #e0455a; }

/* ---------- 表单 ---------- */
.form-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 13px; color: #5a6685; font-weight: 700; }
input[type=text], input[type=password], input[type=date], input[type=number], select {
  padding: 10px 14px; border: 1.5px solid #dbe3f4; border-radius: 10px; font-size: 14px;
  outline: none; transition: border .2s; background: #fbfcff; min-width: 170px;
}
input:focus, select:focus { border-color: #4a6cf7; background: #fff; }
.btn {
  display: inline-block; border: none; cursor: pointer; font-size: 14px; font-weight: 700;
  padding: 10px 22px; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, #4a6cf7, #6a4df6);
  box-shadow: 0 4px 12px rgba(74, 108, 247, .35); transition: transform .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-plain { background: #eef2fb; color: #4a5a80; box-shadow: none; }

/* ---------- 消息提示 ---------- */
.msg { padding: 12px 18px; border-radius: 10px; font-size: 14px; margin-bottom: 18px; }
.msg-ok  { background: #e2f8ee; color: #149a67; border: 1px solid #b8ecd6; }
.msg-err { background: #ffe5e7; color: #e0455a; border: 1px solid #ffc9cf; }

/* ---------- 出勤率进度条 ---------- */
.rate-bar { width: 140px; height: 10px; border-radius: 6px; background: #edf1fa; overflow: hidden; display: inline-block; vertical-align: middle; }
.rate-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2fc98a, #4a8cf7); }
tr.danger td { background: #fff5f5 !important; }
tr.danger .rate-num { color: #e0455a; font-weight: 800; }

/* ---------- CSS柱状图 ---------- */
.chart { display: flex; align-items: flex-end; gap: 26px; height: 200px; padding: 10px 6px 0; }
.chart .bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart .bar { width: 46px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #6a8ffb, #4a6cf7); box-shadow: 0 4px 10px rgba(74,108,247,.3); position: relative; }
.chart .bar .v { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #4a6cf7; white-space: nowrap; }
.chart .bar-label { font-size: 12px; color: #7a86a5; }

/* ---------- 登录页 ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4a6cf7 0%, #6a4df6 50%, #8b3df0 100%);
}
.login-box {
  width: 400px; background: rgba(255,255,255,.96); border-radius: 22px; padding: 44px 42px;
  box-shadow: 0 24px 60px rgba(20, 30, 80, .35);
}

/* ---------- 登录页居中 ---------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a6cf7 0%, #6a4df6 50%, #8b3df0 100%);
}

.login-box .logo-big { font-size: 46px; text-align: center; }
.login-box h2 { text-align: center; margin: 10px 0 4px; font-size: 24px; }
.login-box .sub { text-align: center; color: #7a86a5; font-size: 13px; margin-bottom: 28px; }
.login-box .form-group { margin-bottom: 18px; }
.login-box input { width: 100%; }
.login-box .btn { width: 100%; padding: 12px; font-size: 16px; border-radius: 12px; }
.login-tip { margin-top: 18px; background: #f4f7ff; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #7a86a5; text-align: center; }

/* ---------- 两栏布局 ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.footer-note { text-align: center; color: #9aa5c0; font-size: 12px; padding: 26px 0 34px; }