:root{--brand:#2563eb;--brand-dark:#1d4ed8;--sidebar-w:230px;--bg:#f5f7fb}
body{background:var(--bg);font-size:14px}
.sidebar{width:var(--sidebar-w);height:100vh;position:fixed;top:0;left:0;z-index:1000;transition:margin-left .25s ease-out;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.sidebar .nav-link{padding:.65rem 1.25rem;border-left:3px solid transparent;font-size:14px}
.sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff!important}
.sidebar .nav-link.active{border-left-color:#fff;background:var(--brand)!important;color:#fff!important}
#page-content-wrapper{margin-left:var(--sidebar-w);transition:margin-left .25s ease-out;min-height:100vh}
#wrapper.toggled .sidebar{margin-left:calc(var(--sidebar-w) * -1)}
#wrapper.toggled #page-content-wrapper{margin-left:0}
.avatar-circle{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}
.card{border:none;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card-header{background:#fff;border-bottom:1px solid #eef0f4;font-weight:600;border-radius:10px 10px 0 0!important}
.stat-card{border-left:4px solid var(--brand);transition:transform .2s}
.stat-card:hover{transform:translateY(-2px)}
.stat-card .stat-icon{font-size:2rem;opacity:.25;position:absolute;right:16px;top:14px}
.badge{font-weight:500;padding:.4em .65em}
.table th{font-weight:600;color:#6b7280;font-size:12px;text-transform:uppercase;letter-spacing:.03em;border-bottom-width:1px}
.table td{vertical-align:middle}
.btn{font-size:14px}
.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:10px;top:5px;bottom:5px;width:2px;background:#e5e7eb}
.timeline-item{position:relative;padding-bottom:18px}
.timeline-item::before{content:'';position:absolute;left:-24px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--brand);border:2px solid #fff;box-shadow:0 0 0 2px var(--brand)}
.timeline-item .text-muted{font-size:12px}
.auth-bg{background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 50%,#3b82f6 100%);min-height:100vh}
.auth-logo{width:64px;height:64px;background:#fff;border:1px solid #e7e9f0;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;margin:0 auto;overflow:hidden;padding:6px}
.auth-logo img{width:100%;height:100%;object-fit:contain;display:block}
.sidebar-logo{height:34px;width:auto;border-radius:6px;background:#fff;padding:3px 5px;flex-shrink:0}
.priority-high{border-left:3px solid #dc3545}
.priority-medium{border-left:3px solid #ffc107}
.empty-state{text-align:center;padding:48px 20px;color:#9ca3af}
.empty-state i{font-size:48px;margin-bottom:12px}

/* 图片灯箱 */
.lightbox{cursor:zoom-in;transition:transform .2s}
.lightbox:hover{transform:scale(1.03)}
#lightboxModal .modal-body{padding:0;background:#000;text-align:center}
#lightboxModal img{max-width:100%;max-height:85vh}
.portal-bg{background:linear-gradient(180deg,#2563eb 0%,#3b82f6 120px,#f5f7fb 120px,#f5f7fb 100%);min-height:100vh}
@media(max-width:768px){
  .sidebar{margin-left:calc(var(--sidebar-w) * -1)}
  #wrapper.toggled .sidebar{margin-left:0}
  #page-content-wrapper{margin-left:0}
}

/* ===== 员工弹窗：内容较高（21 个菜单勾选），保证短屏/手机 WebView 下
   头部与底部 取消/保存 始终固定可点，仅中间区域滚动。
   <form> 夹在 .modal-content 与 header/body/footer 之间，用 display:contents
   让其透明参与 flex 列布局，重建 Bootstrap scrollable 弹窗的完整 flex 链。 ===== */
#staffModal .modal-dialog {
  max-width: 900px;
  margin: 0.5rem auto;
}
#staffModal .modal-content {
  max-height: calc(100dvh - 1rem);
  display: flex;
  flex-direction: column;
}
#staffModal .modal-content > form {
  display: contents;
}
#staffModal .modal-header,
#staffModal .modal-footer {
  flex: 0 0 auto;
}
#staffModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 菜单勾选区再限一层高，避免小屏滚动区过长 */
#staffModal #permBox {
  max-height: min(40vh, 340px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}