.dv-list-shell{display:grid;gap:12px;max-width:100%;min-width:0}
.dv-period-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:10px;background:var(--white);border:1px solid var(--gray-border);border-radius:14px;box-shadow:var(--shadow-sm)}
.dv-period-presets{display:flex;gap:5px;align-items:center;min-width:0}
.dv-period-toolbar .filter-btn{min-height:34px;padding:7px 11px;border:1px solid var(--gray-border);border-radius:8px;background:var(--white);color:var(--text2);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;transition:var(--transition-fast)}
.dv-period-toolbar .filter-btn:hover{background:var(--gray-light);color:var(--text)}
.dv-period-toolbar .filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 2px 6px var(--shadow-color)}
.dv-list-filters{display:flex;gap:7px;align-items:flex-end;flex:0 0 auto;min-width:0}
.dv-filter-field,.dv-period-custom label{display:grid;gap:4px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3)}
.dv-filter-field .form-input{width:145px;min-height:34px;padding:6px 30px 6px 9px;font-size:12px;background:var(--white)}
.dv-period-custom{display:flex;align-items:flex-end;gap:7px;padding:10px 12px;background:var(--gray-light);border:1px solid var(--gray-border);border-radius:12px}
.dv-period-custom .form-input{width:160px;min-height:36px;background:var(--white)}
.dv-range-arrow{padding:0 2px 9px;color:var(--text3)}
.dv-period-info{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:7px 10px;border-radius:9px;background:var(--blue-light);border:1px solid var(--blue-border);color:var(--blue);font-size:12px;font-weight:650}
.dv-period-info span{color:var(--text3);font-weight:500;border-left:1px solid var(--blue-border);padding-left:10px}

.dv-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dv-summary-card{position:relative;overflow:hidden;display:grid;gap:5px;min-height:78px;padding:12px 13px;background:var(--white);border:1px solid var(--gray-border);border-radius:12px;box-shadow:var(--shadow-sm)}
.dv-summary-card:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gray)}
.dv-summary-card span{font-size:11px;font-weight:650;color:var(--text3)}
.dv-summary-card b{font-size:22px;line-height:1;color:var(--text)}
.dv-summary-arrived:before{background:var(--blue)}.dv-summary-ontime:before{background:var(--green)}.dv-summary-late:before{background:var(--amber)}.dv-summary-absent:before{background:var(--red)}.dv-summary-worked:before{background:var(--purple)}
.dv-summary-worked b{font-size:17px}

.dv-list-viewbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dv-view-switch{display:inline-flex;padding:3px;background:var(--gray-light);border:1px solid var(--gray-border);border-radius:9px}
.dv-view-switch button{padding:6px 10px;border:0;border-radius:6px;background:transparent;color:var(--text3);font:600 12px inherit;cursor:pointer}
.dv-view-switch button.active{background:var(--white);color:var(--text);box-shadow:var(--shadow-sm)}
.dv-result-count{font-size:11px;color:var(--text3)}

.dv-table-card{position:relative;background:var(--white);border:1px solid var(--gray-border);border-radius:14px;overflow:visible;box-shadow:var(--shadow-sm)}
.dv-table-scroll{max-height:620px;overflow:auto;border-radius:14px}
.dv-attendance-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;color:var(--text)}
.dv-attendance-table thead{position:sticky;top:0;z-index:4}
.dv-attendance-table th{padding:9px 10px;text-align:left;background:var(--gray-light);border-bottom:1px solid var(--gray-border);color:var(--text3);font-size:10px;font-weight:750;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
.dv-attendance-table th:first-child{border-radius:13px 0 0}.dv-attendance-table th:last-child{border-radius:0 13px 0 0}
.dv-attendance-table td{padding:8px 10px;border-bottom:1px solid var(--gray-border);vertical-align:middle}
.dv-attendance-table tr:last-child td{border-bottom:0}
.dv-attendance-table tbody tr:hover td{background:var(--surface-hover)}
.dv-attendance-table tr.dv-date-divider td{border-top:5px solid var(--bg)}
.dv-date-main{font-size:12px;font-weight:700;white-space:nowrap}.dv-date-day{margin-top:2px;font-size:10px;color:var(--text3);text-transform:capitalize}
.dv-person{display:flex;align-items:center;gap:8px;min-width:135px}.dv-avatar{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--blue-light);border:1px solid var(--blue-border);color:var(--blue);font-size:11px;font-weight:800;flex:0 0 auto}.dv-person-name{font-weight:650}
.dv-branch-pill,.dv-status-badge{display:inline-flex;align-items:center;gap:5px;width:max-content;border-radius:999px;border:1px solid var(--gray-border);padding:4px 7px;background:var(--gray-light);color:var(--text2);font-size:10px;font-weight:700;white-space:nowrap}
.dv-status-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dv-status-ontime,.dv-status-approved{color:var(--green);background:var(--green-light);border-color:var(--green-border)}
.dv-status-late{color:var(--amber);background:var(--amber-light);border-color:var(--amber-border)}
.dv-status-absent,.dv-status-rejected{color:var(--red);background:var(--red-light);border-color:var(--red-border)}
.dv-status-checkedout{color:var(--blue);background:var(--blue-light);border-color:var(--blue-border)}
.dv-status-pending,.dv-status-warning{color:var(--amber);background:var(--amber-light);border-color:var(--amber-border)}
.dv-status-dayoff{color:var(--text3)}
.dv-late-detail{display:block;margin-top:3px;color:var(--amber);font-size:10px;font-weight:700}
.dv-time{font-variant-numeric:tabular-nums;font-weight:650}.dv-muted{color:var(--text3);font-weight:500}.dv-worked{white-space:nowrap;color:var(--text2)}
.dv-actions-cell{position:relative;white-space:nowrap;text-align:right}.dv-actions-head{text-align:right!important}
.dv-approve-btn,.dv-more-btn{min-height:29px;border:1px solid var(--gray-border);border-radius:7px;background:var(--white);color:var(--text2);font:650 11px inherit;cursor:pointer}
.dv-approve-btn{padding:5px 8px;margin-right:4px;color:var(--green);border-color:var(--green-border);background:var(--green-light)}
.dv-more-btn{width:30px;font-size:17px;line-height:1}.dv-more-btn:hover{background:var(--gray-light)}
.dv-action-menu{position:absolute;right:9px;top:38px;z-index:20;display:grid;min-width:145px;padding:5px;background:var(--white);border:1px solid var(--gray-border);border-radius:10px;box-shadow:var(--shadow-lg)}
.dv-action-menu button{padding:7px 9px;border:0;border-radius:6px;background:transparent;color:var(--text2);font:550 11px inherit;text-align:left;cursor:pointer}.dv-action-menu button:hover{background:var(--gray-light);color:var(--text)}.dv-action-menu .danger{color:var(--red)}

.dv-state{display:grid;place-items:center;gap:8px;min-height:220px;padding:28px;text-align:center;color:var(--text3)}
.dv-state-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--gray-light);border:1px solid var(--gray-border);font-size:20px}.dv-state b{color:var(--text);font-size:14px}.dv-state p{max-width:360px;font-size:12px;line-height:1.55}.dv-state .btn{margin-top:3px}
.dv-skeleton-row td{padding:11px 10px}.dv-skeleton{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--gray-light),var(--gray-border),var(--gray-light));background-size:220% 100%;animation:dv-shimmer 1.2s linear infinite}.dv-skeleton.wide{width:88%}.dv-skeleton.medium{width:64%}.dv-skeleton.short{width:42%}
@keyframes dv-shimmer{to{background-position:-220% 0}}
.dv-mobile-list{display:none}
.dv-employee-stat-name{display:flex;align-items:center;gap:8px}.dv-stat-number{font-size:13px;font-weight:750}.dv-stat-late{color:var(--amber)}.dv-stat-absent{color:var(--red)}

@media(max-width:1100px){.dv-period-toolbar{align-items:stretch;flex-direction:column}.dv-period-presets{overflow-x:auto;padding-bottom:2px}.dv-list-filters{justify-content:flex-end}.dv-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
  #dv-tab-list{max-width:100%;overflow-x:hidden}.dv-list-shell{gap:10px}.dv-period-toolbar{padding:8px;gap:8px;min-width:0}.dv-period-presets{margin:0 -1px;max-width:100%}.dv-period-toolbar .filter-btn{min-height:32px;padding:6px 9px}
  .dv-list-filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%}.dv-list-filters>*{min-width:0}.dv-filter-field .form-input{width:100%;min-width:0}
  .dv-period-custom{display:grid;grid-template-columns:1fr 1fr;align-items:end}.dv-period-custom .form-input{width:100%}.dv-period-custom .btn{grid-column:1/-1}.dv-range-arrow{display:none}
  .dv-period-info{width:100%;justify-content:space-between}.dv-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.dv-summary-card{min-height:68px;padding:10px}.dv-summary-card b{font-size:19px}.dv-summary-worked{grid-column:1/-1}.dv-summary-worked b{font-size:16px}
  .dv-list-viewbar{align-items:flex-end}.dv-view-switch{overflow-x:auto}.dv-view-switch button{white-space:nowrap;padding:6px 8px}.dv-result-count{white-space:nowrap}
  .dv-table-scroll{display:none}.dv-mobile-list{display:grid;gap:8px;padding:8px;background:var(--bg);border-radius:13px}.dv-table-card{background:var(--bg);border:0;box-shadow:none}
  .dv-mobile-card{display:grid;gap:9px;padding:12px;background:var(--white);border:1px solid var(--gray-border);border-radius:12px;box-shadow:var(--shadow-sm)}.dv-mobile-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dv-mobile-date{font-size:10px;color:var(--text3);text-align:right}.dv-mobile-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;padding-top:8px;border-top:1px solid var(--gray-border)}.dv-mobile-meta div{display:flex;justify-content:space-between;gap:8px;font-size:11px}.dv-mobile-meta span{color:var(--text3)}.dv-mobile-actions{display:flex;justify-content:flex-end;position:relative;padding-top:1px}.dv-mobile-actions .dv-action-menu{top:34px;right:0}
  .dv-mobile-date-group{padding:7px 4px 1px;color:var(--text3);font-size:10px;font-weight:750;letter-spacing:.055em;text-transform:uppercase}
  .dv-mobile-employee-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.dv-mobile-employee-stats div{padding:7px;background:var(--gray-light);border-radius:8px;text-align:center}.dv-mobile-employee-stats span{display:block;color:var(--text3);font-size:9px}.dv-mobile-employee-stats b{font-size:12px}
}