.annual-panel + .annual-panel{margin-top:18px}
.payroll-calendar-toolbar{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid #d3dfef;border-radius:9px;padding:14px 18px;margin-bottom:8px}
.payroll-calendar-toolbar h1{margin:0;font-size:22px;color:#344f70}
.payroll-calendar-toolbar button{border:1px solid #d3dfef;border-radius:8px;background:#fff;color:#4d6583;padding:8px 15px;cursor:pointer;font:inherit}
#payrollCalendarRefresh{margin-left:auto;font-size:13px}
.payroll-calendar-panel{background:white;border:1px solid #d3dfef;border-radius:14px;padding:20px;margin-bottom:20px}
.payroll-calendar-legend{display:flex;justify-content:flex-end;gap:20px;color:#71839c;font-size:12px;margin-bottom:16px}
.payroll-calendar-legend span:first-child{color:#23865e}
.payroll-calendar-legend span:nth-child(2){color:#b07822}
.payroll-calendar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #e0e8f4;border-radius:10px;overflow:hidden;gap:1px;background:#e0e8f4}
.payroll-month{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;padding:16px;background:white;color:#526785;border:0;border-radius:0;cursor:pointer;font:inherit;position:relative}
.payroll-month strong{align-self:flex-start;font-size:15px}
.payroll-month-state{font-size:16px;font-weight:700}
.payroll-month small{font-size:12px;color:inherit}
.payroll-month.complete{background:#e7f5ed;color:#216d4b}
.payroll-month.progress .payroll-month-state{color:#aa711b}
.payroll-month.future{background:#f8fafe;color:#99a8bd}
.payroll-month.error{color:#ae3d3d;background:#fff8f8}
.payroll-month[aria-pressed=true]{box-shadow:inset 0 0 0 2px #78a2ed;background:#f4f8ff}
.payroll-month.complete[aria-pressed=true]{background:#e7f5ed}
.payroll-month:hover{box-shadow:inset 0 0 0 2px #78a2ed}
.payroll-month:focus-visible{outline:3px solid #2563eb;outline-offset:-4px}
#payrollCalendarStatus{font-size:12px;color:#71839c;margin:14px 0 0}
#dashboardView .dashboard-stack,#dashboardView .payroll-board,#dashboardView .payroll-board-list{max-width:none}
#dashboardView .payroll-board-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#dashboardView .payroll-board-item{grid-template-columns:28px minmax(0,1fr) 65px;min-height:72px}
#dashboardView .dashboard-panel{border-color:#d3dfef;border-radius:12px;padding:20px;box-shadow:none}
#dashboardView .dashboard-header h1{font-size:20px;color:#344f70}
@media(max-width:1050px){#dashboardView .payroll-board-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.payroll-calendar{grid-template-columns:repeat(3,minmax(0,1fr))}.payroll-month{min-height:125px;padding:12px}.payroll-calendar-panel{padding:12px}.payroll-calendar-toolbar{gap:10px;padding:12px}#dashboardView .payroll-board-list{grid-template-columns:1fr}}
/* Match the Mihan tabs without reserving an empty submenu row. */
body:has(#payrollCalendar) .sidebar .module-secondary:not(:has(.submenu.open)){display:none}

/* Payroll follows the same menu, submenu, period order as Mihan. */
html body .layout #payrollPeriodPanel.work-period-panel{margin:6px 0 0}
#payrollPeriodPanel .payroll-period-navigation{display:flex;align-items:center;gap:12px;max-width:100%}
#payrollPeriodPanel .payroll-period-navigation h2{margin:0;min-width:128px;text-align:center;color:#304762;font-size:21px;font-weight:700;line-height:1.4}
#payrollPeriodPanel .payroll-period-navigation button{display:grid;place-items:center;flex:none;width:36px;height:36px;min-width:0;margin:0;padding:0;border:1px solid #dce4ef;border-radius:8px;background:#fff;color:#506078;font-family:inherit;font-size:24px;line-height:1;cursor:pointer}
#payrollPeriodPanel .payroll-period-navigation button:hover:not(:disabled){background:#edf4ff}
#payrollPeriodPanel .payroll-period-navigation button:disabled{opacity:.35;cursor:default}