/* Demo-inspired visual polish for Staff Attendance and Per Job Salary. */
body[data-view="attendance"] #content,
body[data-view="payroll"] #content{--people-ink:#111a2d;--people-line:#dbe4ef}

body[data-view="attendance"] #content .tabs,
body[data-view="payroll"] #content .tabs{padding:4px;background:#f1f5f9;border:1px solid var(--people-line);border-radius:7px;width:max-content;max-width:100%;gap:4px}
body[data-view="attendance"] #content .tab,
body[data-view="payroll"] #content .tab{border:0;border-radius:5px;padding:9px 13px}
body[data-view="attendance"] #content .tab.active,
body[data-view="payroll"] #content .tab.active{background:#2563eb;color:#fff;box-shadow:0 2px 7px #1d4ed82b}
body[data-view="attendance"] #content .notice,
body[data-view="payroll"] #content .notice{border-radius:6px;box-shadow:0 2px 8px #0f172a06}
body[data-view="attendance"] #content .tablewrap,
body[data-view="payroll"] #content .tablewrap{border:1px solid var(--people-line);border-radius:7px;box-shadow:0 3px 12px #0f172a0a;scrollbar-color:#94a3b8 #e9eef5}
body[data-view="attendance"] #content .tablewrap th,
body[data-view="payroll"] #content .tablewrap th{background:var(--people-ink);color:#f8fafc;border-bottom-color:var(--people-ink)}
body[data-view="attendance"] #content .tablewrap td,
body[data-view="payroll"] #content .tablewrap td{border-bottom-color:#edf1f6}
body[data-view="attendance"] #content .tablewrap tbody tr:nth-child(even) td,
body[data-view="payroll"] #content .tablewrap tbody tr:nth-child(even) td{background:#fbfcfe}
body[data-view="attendance"] #content .tablewrap tbody tr:hover td,
body[data-view="payroll"] #content .tablewrap tbody tr:hover td{background:#eff6ff}
body[data-view="attendance"] #content select,
body[data-view="attendance"] #content input:not([type="checkbox"]){min-height:34px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;padding:6px 9px;color:#26364e}
body[data-view="attendance"] #content select:focus,
body[data-view="attendance"] #content input:focus{outline:0;border-color:#93b4f8;box-shadow:0 0 0 2px #dbeafe}
body[data-view="attendance"] #content .attendanceEditButton{border-radius:5px;box-shadow:0 2px 6px #2563eb29}
body[data-view="payroll"] #content .summary{gap:10px;margin-bottom:13px}
body[data-view="payroll"] #content .summaryitem{min-height:68px;padding:11px 14px;border-radius:6px;box-shadow:0 3px 10px #0f172a0a}
body[data-view="payroll"] #content .summaryitem strong{font-size:20px;margin-top:4px}
body[data-view="payroll"] #content>.toolbar{padding:9px;background:#fff;border:1px solid var(--people-line);border-radius:7px;margin-bottom:12px}

@media(max-width:700px){
  body[data-view="attendance"] #content .tabs,
  body[data-view="payroll"] #content .tabs{width:100%}
  body[data-view="attendance"] #content .tab,
  body[data-view="payroll"] #content .tab{flex:1;padding:8px 7px;font-size:11px}
  body[data-view="payroll"] #content .summaryitem{min-height:58px;padding:9px}
  body[data-view="payroll"] #content .summaryitem strong{font-size:17px}
}