/* Shared control rhythm, after the screen styles. Content may wrap; controls are not clipped. */
.app-shell{--control-height:38px;--control-gap:12px;--control-font:13px}
.app-shell :is(.button,.sp-action){min-height:var(--control-height);max-width:100%;min-width:0;padding:8px 14px;font-size:var(--control-font);line-height:20px;white-space:normal;overflow-wrap:normal;box-sizing:border-box;flex-shrink:1}
.app-shell :is(.button,.sp-action)>.sp-icon{flex-shrink:0;width:18px;height:18px}
.app-shell :is(.actions,.document-actions,.agenda-actions,.dialog-actions,.work-actions,.work-toolbar-actions,.payroll-actions,.capture-actions,.capture-controls,.personnel-form-actions,.record-dialog-actions,.companies-toolbar-actions,.signature-tabs,.signature-toolbar){gap:var(--control-gap);min-width:0;max-width:100%;flex-wrap:wrap}
.app-shell :is(.actions,.dialog-actions,.record-dialog-actions,.access-user-actions)>form{margin:0;min-width:0;max-width:100%}
.app-shell :is(.section-title,.my-payments-top){flex-wrap:wrap;gap:var(--control-gap)}
.app-shell .my-payments-top>div{flex-basis:200px}
/* Field rows align actions with the actual field, below the label. */
.app-shell .filters{flex-wrap:wrap;gap:var(--control-gap);align-items:flex-end;min-width:0}
.app-shell .filters:not(.finance-filters)>label{flex:1 1 160px;margin:0;min-width:0}
.app-shell :is(.work-toolbar,.payroll-toolbar,.personnel-filters){gap:var(--control-gap);align-items:end;min-width:0}
.app-shell .work-toolbar{display:flex;flex-wrap:wrap}
.app-shell .work-toolbar>label{flex:1 1 190px;max-width:440px;min-width:0;margin:0}
.app-shell .work-toolbar-actions{flex:1 1 250px;justify-content:flex-end;align-items:center;margin-left:auto}
.app-shell .work-toolbar-actions:empty{display:none}
.app-shell .work-toolbar-actions>.button{width:auto;flex:0 1 auto}
.app-shell .work-actions:has(>label){align-items:flex-end;gap:var(--control-gap)}
.app-shell .work-actions>label{margin:0;min-width:0;flex:0 1 200px}
.app-shell .work-actions>label :is(input,select){width:100%;min-width:0}
.app-shell .attendance-hours-toolbar{margin:0;gap:var(--control-gap)}
.app-shell .attendance-hours-toolbar>label{flex:0 1 200px}
.app-shell .attendance-hours-toolbar>.button{flex:0 0 auto;width:auto;align-self:flex-end}
.app-shell .access-setting>.button{min-height:var(--control-height)}
/* Calendar controls keep their own navigation behavior and the common control height. */
.app-shell .fc .fc-toolbar{flex-wrap:wrap;gap:var(--control-gap);min-width:0}
.app-shell .fc .fc-toolbar-chunk{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.app-shell .fc .fc-button{min-height:var(--control-height);padding:8px 12px;font-size:var(--control-font);line-height:20px;margin:0;white-space:normal}
.app-shell .fc .fc-button-group{gap:6px;flex-wrap:wrap}
.app-shell .fc :is(.fc-prev-button,.fc-next-button){min-width:var(--control-height);padding:8px}
@media(max-width:760px){
 .app-shell{--control-height:44px}
 .app-shell :is(.button,.sp-action){padding:11px 14px}
 .app-shell .work-toolbar>label{flex-basis:100%;max-width:none}
 .app-shell .work-toolbar-actions{flex-basis:100%;margin-left:0}
 .app-shell .work-toolbar-actions>.button{flex:1 1 145px}
 .app-shell .work-actions>label{flex:1 1 150px}
 .app-shell .attendance-hours-toolbar>label{flex:1 1 150px}
 .app-shell .attendance-hours-toolbar>.button{flex:0 0 auto;padding-inline:12px}
 .app-shell .finance-filters .filter-primary>.button{width:44px;min-width:44px;height:44px;padding:0}
 .app-shell .fc .fc-button{padding:11px 12px}
 .app-shell .fc :is(.fc-prev-button,.fc-next-button){padding:11px}
 .app-shell .signature-tabs>.button{flex:1 1 120px}
}
/* Short table actions keep an intrinsic width inside the table scroller. */
.app-shell :is(table,.table-wrap,.work-table) :is(.button,.sp-action){min-width:max-content;max-width:none;white-space:nowrap;flex-shrink:0}
.app-shell .cards>.panel .actions>.button{flex:0 1 auto}
/* Worker home: independent shortcut rows and cards with clear breathing room. */
.app-shell .employee-home{display:grid;gap:20px;min-width:0}
.app-shell .employee-home-shortcuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:var(--control-gap);align-items:stretch;min-width:0}
.app-shell .employee-home-shortcuts>.button{width:100%;margin:0;text-align:center}
.app-shell .employee-home-panels{display:grid;gap:20px;align-items:start;min-width:0}
.app-shell .employee-home-panels>.panel{margin:0;min-width:0}
.app-shell .employee-home .stat-line{flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.app-shell .employee-home .stat-line>span{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.app-shell .employee-home .stat-line>b{flex:0 1 auto;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.app-shell .employee-home .panel>p:last-child{margin-bottom:0}
@media(min-width:1100px){
 .app-shell .employee-home-panels{grid-template-columns:minmax(0,2fr) minmax(260px,1fr)}
}
@media(max-width:760px){
 .app-shell .personnel-filters>.button{padding-inline:10px;white-space:nowrap}
 .app-shell .work-toolbar-actions>.button{flex:1 1 auto}
}