/* ============================================================
   瑞幸 HRMS · UI 主题 (theme.css)
   在 bootstrap.min.css 之后引入，覆盖默认样式。
   设计：蓝色主色 + 克制金色点缀；系统中文字体；信息密度适中。
   ============================================================ */

:root{
  --navy:#16223d;
  --navy-2:#1b2a4d;
  --blue:#2b59c3;
  --blue-d:#21489f;
  --blue-l:#3f6fd8;
  --gold:#b08a45;
  --gold-l:#cba35a;
  --ink:#1c2535;
  --ink-2:#3a4456;
  --muted:#6b7488;
  --faint:#9aa3b4;
  --bg:#eef1f6;
  --surface:#ffffff;
  --border:#e6eaf1;
  --line:#eef1f6;
  --ok:#1f7a4d;     --ok-bg:#e7f5ed;
  --warn:#a8741a;   --warn-bg:#fbf2de;
  --bad:#a33b4c;    --bad-bg:#fbe9ec;
  --info:#2150a8;   --info-bg:#e8eefb;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{font-size:15px}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(43,89,195,.18)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cfd6e4;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#b9c2d4}
::-webkit-scrollbar-track{background:transparent}

h1,h2,h3,h4,h5,h6{font-weight:600;color:var(--ink);letter-spacing:.2px}
h3{font-size:1.18rem;margin-bottom:.9rem}
h5{font-size:1rem}
h6{font-size:.9rem}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
.text-muted{color:var(--muted)!important}
.small,small{font-size:.82rem}
strong{font-weight:600;color:var(--ink-2)}
code,.font-monospace{font-family:var(--mono)!important;letter-spacing:.01em}

/* ============================================================
   应用外壳：左侧侧边栏 + 顶栏
   ============================================================ */
.app-shell{display:flex;min-height:100vh}

.sidebar{
  width:240px;flex:none;background:var(--navy);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  z-index:30;
}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:22px 20px 18px}
.sidebar .brand-mark{
  width:38px;height:38px;border-radius:9px;background:#fff;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25);
  border:1.5px solid var(--gold);
}
.sidebar .brand-mark img{width:90%;height:90%;object-fit:contain}
.sidebar .brand-name{font-size:.95rem;font-weight:600;color:#fff;letter-spacing:1.5px;line-height:1.2}
.sidebar .brand-sub{font-size:.66rem;color:#7d8db0;letter-spacing:2px;margin-top:1px}
.sidebar .brand-divider{height:1px;background:rgba(255,255,255,.08);margin:0 16px 12px}

.sidebar .side-nav{flex:1;padding:0 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.sidebar .side-group{font-size:.66rem;letter-spacing:2px;color:#5f6f92;padding:16px 14px 7px;text-transform:uppercase}
.sidebar .side-link{
  display:flex;align-items:center;gap:12px;padding:10px 12px 10px 13px;border-radius:9px;
  font-size:.86rem;font-weight:500;color:#aeb9d2;position:relative;
  transition:background .15s,color .15s;cursor:pointer;
}
.sidebar .side-link:hover{background:rgba(255,255,255,.06);color:#dfe6f2}
.sidebar .side-link svg{flex:none;width:18px;height:18px}
.sidebar .side-link.active{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.sidebar .side-link.active::before{
  content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:2px;background:var(--gold-l);
}
.sidebar .side-foot{padding:14px 16px 18px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar .side-user{display:flex;align-items:center;gap:11px;padding:6px 8px}
.avatar{
  width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));color:#fff;font-size:.8rem;font-weight:600;
}
.sidebar .side-user .nm{font-size:.82rem;color:#e7ecf5;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .side-user .rl{font-size:.7rem;color:#7d8db0}
.sidebar .side-foot form{margin:8px 0 0}
.sidebar .side-foot .btn-logout{
  width:100%;height:34px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#aeb9d2;
  border-radius:8px;font-size:.78rem;cursor:pointer;transition:all .15s;
}
.sidebar .side-foot .btn-logout:hover{border-color:rgba(255,255,255,.3);color:#fff}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.topbar{
  position:sticky;top:0;z-index:20;height:62px;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);-webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid #e1e6ee;display:flex;align-items:center;justify-content:space-between;padding:0 30px;
}
.topbar .tb-period{font-size:.82rem;color:var(--faint)}
.topbar .tb-period b{color:var(--ink);font-weight:500;margin-left:4px}
.topbar .tb-right{display:flex;align-items:center;gap:14px}
.topbar .tb-sep{width:1px;height:22px;background:#e1e6ee}
.topbar .tb-user{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--ink-2);font-weight:500}
.app-content{padding:26px 30px 60px;max-width:1320px;width:100%}

/* ============================================================
   Bootstrap 组件覆盖
   ============================================================ */

/* cards */
.card{
  border:1px solid var(--border);border-radius:13px;background:var(--surface);
  box-shadow:0 1px 2px rgba(20,33,61,.04);
}
.card-body{padding:18px 20px}
.card h6{font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:.85rem}
.card .fs-3{font-size:1.9rem!important;font-weight:600;color:var(--navy);
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.15}

/* buttons */
.btn{border-radius:9px;font-weight:500;font-size:.86rem;padding:.45rem .9rem;letter-spacing:.02em}
.btn-lg{padding:.6rem 1.4rem;font-size:.98rem;border-radius:10px}
.btn-sm{padding:.3rem .65rem;font-size:.78rem;border-radius:7px}
.btn-primary,.btn-brand{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 2px 8px rgba(43,89,195,.18)}
.btn-primary:hover,.btn-brand:hover,.btn-primary:focus,.btn-brand:focus{
  background:var(--blue-d);border-color:var(--blue-d);color:#fff}
.btn-outline-primary{color:var(--blue);border-color:#cdd8ee}
.btn-outline-primary:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-secondary{background:#fff;border-color:#d9dfea;color:var(--ink-2)}
.btn-secondary:hover{background:#f4f6fa;border-color:#c2cad9;color:var(--ink)}
.btn-success{background:#fff;border-color:#bfe0cc;color:var(--ok)}
.btn-success:hover{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-outline-light{border-color:rgba(255,255,255,.4)}

/* forms */
.form-control,.form-select{
  border:1px solid #d9dfea;border-radius:9px;color:var(--ink);background:#fff;
  font-size:.88rem;padding:.5rem .8rem;
}
.form-control::placeholder{color:#aab2c2}
.form-control:focus,.form-select:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,89,195,.14);
}
.form-label{font-size:.8rem;font-weight:500;color:#5a6478;margin-bottom:.4rem}

/* tables */
.table{
  --bs-table-bg:transparent;color:var(--ink);font-size:.84rem;
  font-variant-numeric:tabular-nums;margin-bottom:0;
}
.table thead th{
  background:#fafbfd;color:#8b94a6;font-weight:600;font-size:.74rem;letter-spacing:.04em;
  border-bottom:1px solid var(--border);border-top:none;padding:.7rem .9rem;white-space:nowrap;
}
.table thead.table-light th{background:#fafbfd}
.table tbody td{
  border-color:var(--line);padding:.7rem .9rem;vertical-align:middle;color:var(--ink-2);
}
.table tbody tr:last-child td{border-bottom:none}
.table-hover tbody tr:hover{background:#f8fafc}
.table tbody td:first-child{color:var(--ink);font-weight:500}
/* 让数值列右对齐更整齐：在模板里给数值单元格加 .num */
.table .num,.table td.text-end{text-align:right;font-variant-numeric:tabular-nums}

/* 表格容器卡片化 */
.table-responsive{border:1px solid var(--border);border-radius:13px;background:#fff;
  box-shadow:0 1px 2px rgba(20,33,61,.04);overflow:auto}
.table-responsive>.table{margin:0}

/* badges：柔和胶囊 */
.badge{font-weight:500;font-size:.72rem;padding:.32em .7em;border-radius:20px;letter-spacing:.02em}
.badge.bg-secondary{background:#eef2f8!important;color:#5a6478!important}
.badge.bg-success{background:var(--ok-bg)!important;color:var(--ok)!important}
.badge.bg-danger{background:var(--bad-bg)!important;color:var(--bad)!important}
.badge.bg-warning{background:var(--warn-bg)!important;color:var(--warn)!important}
.badge.bg-primary{background:var(--info-bg)!important;color:var(--info)!important}
.badge.bg-info{background:var(--info-bg)!important;color:var(--info)!important}

/* details / summary（多处用于折叠区块） */
summary{cursor:pointer;list-style:none;font-weight:600;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary:hover{opacity:.85}
summary.h5,summary.h6{display:flex;align-items:center;gap:.5rem}
summary>.badge{vertical-align:middle}
details>summary::before{
  content:"▸";display:inline-block;color:var(--faint);font-size:.7em;margin-right:.4rem;transition:transform .15s;
}
details[open]>summary::before{transform:rotate(90deg)}

/* alerts */
.alert{border-radius:10px;border:1px solid transparent;font-size:.86rem}
.alert-danger{background:var(--bad-bg);border-color:#f3cdd4;color:var(--bad)}
.alert-success{background:var(--ok-bg);border-color:#c7e7d3;color:var(--ok)}

/* 强调色文本 */
.text-danger{color:var(--bad)!important}
.text-success{color:var(--ok)!important}

/* 区块小标题前的竖条（可选：给 h5 加 .section-title） */
.section-title{display:flex;align-items:center;gap:10px}
.section-title::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--blue);display:inline-block}

/* 响应式：窄屏收起侧边栏为顶部条 */
@media (max-width:860px){
  .app-shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto}
  .sidebar .brand{padding:12px 16px}
  .sidebar .brand-divider,.sidebar .side-group{display:none}
  .sidebar .side-nav{flex-direction:row;padding:0 8px;gap:4px}
  .sidebar .side-link{white-space:nowrap;padding:8px 10px}
  .sidebar .side-link.active::before{display:none}
  .sidebar .side-foot{border-top:none;border-left:1px solid rgba(255,255,255,.08);padding:8px 12px}
  .app-content{padding:18px 16px 48px}
}