.attendance-intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:20px;
}
.attendance-intro p { color:#426680; font-size:12px; line-height:1.9; }
.attendance-upload { display:grid; grid-template-columns:minmax(230px, .9fr) minmax(310px, 1.4fr); gap:28px; padding:26px; margin-bottom:22px; }
.attendance-upload h2 { font-size:17px; color:#1e3d57; }
.attendance-upload p { color:#60768a; font-size:12px; line-height:1.9; margin-top:12px; }
.attendance-upload .el-upload, .attendance-upload .el-upload-dragger { width:100%; }
.attendance-upload .el-upload-dragger { padding:21px 20px; background:#f9fbfc; border-color:#bdc8d0; }
.attendance-upload-icon { display:block; font-size:23px; color:#60768a; margin-bottom:8px; }
.attendance-upload-main { color:#1e3d57; font-size:13px; }
.attendance-upload-hint { color:#60768a; font-size:11px; margin-top:7px; }
.attendance-upload-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; }
.attendance-upload-actions > span { min-width:0; color:#426680; font-size:12px; word-break:break-all; }
.attendance-layout { display:grid; grid-template-columns:300px minmax(0, 1fr); align-items:start; gap:22px; }
.attendance-history .panel-heading { padding:19px 20px; }
.attendance-history .panel-heading h2 { font-size:15px; }
.attendance-batches { padding:9px 10px; max-height:670px; overflow-y:auto; }
.attendance-batch {
  display:block;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  border-radius:9px;
  padding:15px 13px;
  margin-bottom:7px;
  background:#fff;
  cursor:pointer;
  font-family:inherit;
}
.attendance-batch:hover { background:#f6f8fa; }
.attendance-batch:focus-visible { outline:2px solid #6a8599; outline-offset:2px; }
.attendance-batch.active { background:#eff3f6; border-color:#c5d0d8; }
.attendance-batch strong { display:block; color:#1e3d57; font-size:12px; line-height:1.65; overflow-wrap:anywhere; font-weight:600; }
.attendance-batch span { display:block; color:#60768a; font-size:10px; margin-top:6px; }
.attendance-batch p { display:flex; gap:12px; flex-wrap:wrap; color:#426680; font-size:11px; margin-top:9px; }
.attendance-detail { min-width:0; }
.attendance-detail-title { padding:21px 23px; display:flex; justify-content:space-between; gap:15px; align-items:start; }
.attendance-detail-title h2 { font-size:15px; color:#1e3d57; line-height:1.6; overflow-wrap:anywhere; }
.attendance-detail-title p { color:#60768a; font-size:11px; line-height:1.8; margin-top:7px; }
.attendance-downloads { display:flex; align-items:center; flex-wrap:wrap; justify-content:end; gap:8px; flex-shrink:0; }
.attendance-downloads .el-button + .el-button { margin-left:0; }
.attendance-kpis { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; padding:0 23px 22px; }
.attendance-kpis > div { border:1px solid #e7ebee; border-radius:10px; background:#f9fafb; padding:16px 14px; }
.attendance-kpis span { display:block; font-size:11px; color:#60768a; line-height:1.5; }
.attendance-kpis strong { display:block; font-size:24px; font-weight:550; color:#1e3d57; margin:10px 0 5px; letter-spacing:-.5px; }
.attendance-kpis small { font-size:10px; color:#60768a; line-height:1.6; }
.attendance-summary-note { padding:0 23px 19px; color:#60768a; font-size:11px; line-height:1.9; }
.attendance-results { margin-top:20px; padding:0 22px 20px; }
.attendance-results > .el-tabs > .el-tabs__header { margin-bottom:17px; padding-top:10px; }
.attendance-filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:4px 0 18px; }
.attendance-filters .el-input { flex:1; min-width:180px; }
.attendance-filters .el-select { width:180px; }
.attendance-filters .el-date-editor { width:150px; }
.attendance-metric-missing { color:#60768a; font-size:11px; }
.attendance-preserved-note { color:#426680; background:#f6f8f9; border-radius:7px; padding:12px 14px; font-size:11px; line-height:1.8; margin:15px 0 4px; }
.attendance-raw-value { white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; line-height:1.7; }
.attendance-empty { padding:30px 20px; }
.attendance-warning { margin:0 23px 17px; }
@media(max-width:1200px) {
  .attendance-layout { grid-template-columns:255px minmax(0, 1fr); gap:17px; }
  .attendance-detail-title { flex-direction:column; }
  .attendance-downloads { justify-content:start; }
  .attendance-kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:850px) {
  .attendance-upload, .attendance-layout { grid-template-columns:1fr; }
  .attendance-upload { padding:22px; gap:18px; }
  .attendance-batches { max-height:240px; }
  .attendance-intro { align-items:start; }
}
@media(max-width:500px) {
  .attendance-intro { flex-direction:column; }
  .attendance-kpis { padding:0 15px 17px; gap:8px; }
  .attendance-kpis > div { padding:13px 10px; }
  .attendance-kpis strong { font-size:20px; }
  .attendance-results { padding:0 12px 15px; }
  .attendance-filters { align-items:stretch; }
  .attendance-filters .el-input, .attendance-filters .el-select, .attendance-filters .el-date-editor { width:100%; flex:auto; }
  .attendance-upload-actions { align-items:stretch; flex-direction:column; }
}