.payroll-section-nav{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:-4px 0 16px}
.payroll-section-nav button{border:0;border-bottom:3px solid transparent;background:transparent;padding:11px 3px;color:var(--muted)}
.payroll-section-nav button.active{border-bottom-color:var(--green);color:var(--ink);font-weight:750}
.cost-metrics{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}
.cost-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:16px}
.cost-dashboard-grid .workspace-section{margin:0}
.cost-bars{display:grid;gap:14px}
.cost-bars>div{display:grid;grid-template-columns:90px minmax(120px,1fr) 110px;align-items:center;gap:12px}
.cost-bars i{height:10px;background:#e7ece9;border-radius:5px;overflow:hidden}
.cost-bars em{display:block;height:100%;background:#2777af}
.cost-bars>div:nth-child(2) em{background:#d28b2d}
.cost-bars>div:nth-child(3) em{background:#398d64}
.cost-bars>div:nth-child(4) em{background:#ca6857}
.cost-bars b{text-align:right}
.cost-composition footer{display:flex;gap:25px;flex-wrap:wrap;margin-top:18px;padding-top:13px;border-top:1px solid #edf0ee;color:var(--muted);font-size:12px}
.cost-source-list{display:grid}
.cost-source-list>div{padding:12px 0;border-bottom:1px solid #edf0ee;display:grid;grid-template-columns:1fr auto;gap:3px 10px}
.cost-source-list>div:last-child{border-bottom:0}
.cost-source-list span{grid-column:1;color:var(--muted);font-size:12px}
.cost-source-list strong{grid-column:2;grid-row:1/3;align-self:center}
.cost-input-form{grid-template-columns:repeat(4,1fr)}
.cost-auto-field{padding:11px 12px;background:#f4f7f5;border:1px solid var(--line)}
.cost-auto-field span,.cost-auto-field b,.cost-auto-field small{display:block}
.cost-auto-field span,.cost-auto-field small{color:var(--muted);font-size:12px}
.cost-auto-field b{font-size:20px;margin:3px 0}
.cost-sync-toggle{display:flex!important;align-items:center;gap:9px;align-self:stretch;padding:11px 12px;border:1px solid var(--line);background:#f7faf8}.cost-sync-toggle input{width:18px;height:18px;margin:0}.cost-sync-toggle small{display:block;flex:1;color:var(--muted)}
.warehouse-cost-page-head>div:first-child{flex:1;min-width:200px}.warehouse-cost-page-head .actions{flex:0 0 auto;flex-wrap:nowrap;overflow-x:auto;padding-bottom:1px}.warehouse-cost-page-head .actions>input:not([type=file]),.warehouse-cost-page-head .actions>select,.warehouse-cost-page-head .actions>.button{width:100px;min-width:100px;height:42px;flex:0 0 100px;margin:0;padding:9px 6px;font-size:13px;white-space:nowrap}.warehouse-cost-page-head .actions>.settings-button{width:100px!important;min-width:100px!important;height:42px!important;padding:9px 6px!important}.page-head #warehouseCostMonth,.page-head #warehouseCostGroup{min-width:100px}.cost-coverage-warning{display:flex;align-items:center;gap:14px}.cost-coverage-warning b{white-space:nowrap}.cost-coverage-warning span{color:#74401e}.cost-group-analysis .section-heading>div h3,.cost-group-analysis .section-heading>div span{display:block;margin:0}.cost-group-analysis .section-heading>div span{margin-top:3px;color:var(--muted);font-size:12px}.cost-settings-dialog{width:min(920px,calc(100vw - 28px))}.cost-settings-dialog .cost-input-form{grid-template-columns:repeat(4,minmax(0,1fr))}.cost-settings-dialog .cost-auto-field{min-height:82px}.cost-settings-dialog .dialog-actions{align-items:center}
@media(max-width:1100px){.cost-dashboard-grid{grid-template-columns:1fr}.cost-input-form{grid-template-columns:repeat(2,1fr)}.warehouse-cost-page-head{align-items:stretch}.warehouse-cost-page-head .actions{width:100%}}
@media(max-width:700px){.cost-metrics{grid-template-columns:1fr 1fr}.cost-input-form,.cost-settings-dialog .cost-input-form{grid-template-columns:1fr}.cost-bars>div{grid-template-columns:76px minmax(80px,1fr) 90px;gap:7px}.payroll-section-nav{overflow:auto}.payroll-section-nav button{white-space:nowrap}.cost-coverage-warning{align-items:flex-start;flex-direction:column;gap:4px}.cost-group-analysis .section-heading{align-items:flex-start;flex-direction:column}}

@media(min-width:769px){
  .warehouse-cost-page-head .actions>input:not([type=file]),.warehouse-cost-page-head .actions>select,.warehouse-cost-page-head .actions>.button,.warehouse-cost-page-head .actions>.settings-button{font-size:14px!important}
  .cost-composition footer,.cost-source-list span,.cost-auto-field span,.cost-auto-field small,.cost-group-analysis .section-heading>div span{font-size:13px;line-height:1.5}
}