/* Payroll refinement: shared eDS tokens, compact layout and readable operational tables. */
.payroll-ui .nom-header{align-items:flex-start;gap:1rem;margin-bottom:1rem}
.payroll-ui .nom-header>.et-hd-actions{margin-left:auto;justify-content:flex-end;gap:.5rem}
.payroll-ui .nom-header>div:first-child{flex:1;min-width:0}
.payroll-ui .nom-page{max-width:none;padding:1rem}
.payroll-ui .nom-panel{padding:1rem;margin-bottom:1rem;box-shadow:var(--et-shadow-sm)}
.payroll-ui .nom-nav{margin-bottom:1rem}
.payroll-ui .nom-nav a{padding:.75rem}
.payroll-ui .nom-filter{gap:1rem}
.payroll-ui .nom-kpi{border-top:0;padding:.75rem;border-radius:var(--et-radius)}
.payroll-ui .nom-kpi strong{margin-top:.5rem;font-size:1.25rem}
.payroll-ui .nom-kpis{gap:.75rem;margin-bottom:1rem}
.payroll-ui .nom-panel-head{margin-bottom:.5rem;flex-wrap:wrap}
.payroll-ui #payroll-review p{margin:.25rem 0 0}
.payroll-ui #report-scope{border:0;padding:0;box-shadow:none}
.payroll-ui #report-scope-totals:empty{display:none}
.payroll-ui .nom-ai{margin-bottom:1rem}
.payroll-ui .nom-ai .ia-bar-btn{width:100%;text-align:left}
.payroll-ui .nom-stages{gap:.5rem}
.payroll-ui .nom-stages a{padding:.75rem;gap:.25rem}
.payroll-ui .nom-work-dialog{border-radius:var(--et-radius);background:var(--et-surface);color:var(--et-ink);border:1px solid var(--et-line);padding:1.5rem;width:min(44rem,calc(100vw - 2rem));max-height:90dvh;overflow:auto}
.payroll-ui .nom-work-dialog::backdrop{background:rgba(var(--et-primary-rgb),.35)}
.payroll-ui .nom-work-dialog .nom-actions{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap}
.payroll-ui #review-reason{width:100%;margin:.75rem 0}
.payroll-ui #payroll-confirm p{white-space:pre-line}
.payroll-ui #toast-wrap{position:fixed;bottom:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;max-width:calc(100vw - 2rem)}
.payroll-ui .toast-item{display:flex;align-items:center;gap:.75rem;background:var(--et-surface);color:var(--et-ink);border:1px solid var(--et-line);border-radius:var(--et-radius-sm);box-shadow:var(--et-shadow);padding:.75rem}
.payroll-ui .toast-item.err{border-left:.25rem solid var(--et-danger)}
.payroll-ui .nom-toast-close{border:0;background:transparent;color:inherit;font-size:1.25rem;cursor:pointer}
.payroll-ui :focus-visible{outline:2px solid var(--et-primary);outline-offset:3px}
.payroll-ui [hidden]{display:none!important}
.payroll-ui #api-offline-banner,.payroll-ui #token-expired-banner{position:static;margin:0 0 1rem;padding:.75rem;border:1px solid var(--et-line);border-left:.25rem solid var(--et-warning);background:var(--et-surface);color:var(--et-ink)}
.payroll-ui .nom-work-dialog input,.payroll-ui .nom-work-dialog select,.payroll-ui .nom-work-dialog textarea{max-width:100%}
.payroll-ui .nom-actions{gap:.5rem}
.payroll-ui .nom-operational-table td:last-child{white-space:normal}
@media(max-width:1024px){
 .payroll-ui .nom-operational-table,.payroll-ui .nom-operational-table tbody{display:block;width:100%}
 .payroll-ui .nom-operational-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 .payroll-ui .nom-operational-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:.75rem;border-bottom:1px solid var(--et-line)}
 .payroll-ui .nom-operational-table tbody td{display:block!important;width:auto!important;min-width:0;padding:.25rem!important;border:0;text-align:left!important;white-space:normal;overflow-wrap:anywhere}
 .payroll-ui .nom-operational-table tbody td::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:600;color:var(--et-ink-soft);position:static;width:auto}
 .payroll-ui .nom-operational-table tbody td:last-child,.payroll-ui .nom-operational-table tbody td[colspan]{grid-column:1/-1}
 .payroll-ui .nom-operational-table td[colspan]::before{content:none}
 .payroll-ui .nom-operational-table td:last-child button{margin:.25rem;max-width:100%}
}
@media(max-width:600px){
 .payroll-ui .nom-header{flex-direction:column}
 .payroll-ui .nom-header>.et-hd-actions{width:100%;margin:0;justify-content:flex-start}
 .payroll-ui .nom-page{padding:.75rem}
 .payroll-ui .nom-panel{padding:.75rem}
 .payroll-ui .nom-row{flex-wrap:wrap}
 .payroll-ui .nom-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
 .payroll-ui .nom-operational-table tbody tr{grid-template-columns:1fr}
 .payroll-ui .nom-operational-table td:last-child{display:flex!important;gap:.25rem;flex-wrap:wrap;align-items:center}
 .payroll-ui .nom-operational-table td:last-child::before{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.payroll-ui *, .payroll-ui *::before,.payroll-ui *::after{animation:none!important;transition:none!important}}

body.payroll-ui .main-content.no-shell.nom-page{padding:1rem!important}
.payroll-ui .nom-row{padding:.5rem 0;font-size:.875rem}
.payroll-ui .nom-header>div:first-child{flex:1 1 22rem}
.payroll-ui .nom-header>.et-hd-actions{flex:0 1 auto}
.payroll-ui .nom-filter label,.payroll-ui .nom-filter select,.payroll-ui .nom-header>div>p:not(.nom-eyebrow){font-size:.875rem}
.payroll-ui .nom-work-dialog h2{font-size:1.125rem;color:var(--et-primary)}
@media(max-width:600px){.payroll-ui .nom-header>div:first-child{flex:auto}.payroll-ui .nom-header>.et-hd-actions{justify-content:flex-start}}

/* Legacy page headers must not reserve space for a removed shell. */
body.payroll-ui .page-header{padding:.5rem 0 1rem!important;margin:0!important;gap:.75rem;flex-wrap:wrap}
body.payroll-ui .nom-operational-table{min-width:0!important;max-width:100%}
body.payroll-ui .nom-payment-notice{font-size:.875rem;line-height:1.5}

/* Same compact filter/card vocabulary as crm_supervisor_dashboard.html. */
.payroll-ui .payroll-filters{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.75rem;padding:1rem;margin:0 0 1rem;background:var(--et-surface);border:1px solid var(--et-line);border-radius:var(--et-radius)}
.payroll-ui .payroll-filters .payroll-filter-field{display:flex;flex-direction:column;flex:0 1 12rem;gap:.3rem;margin:0;min-width:0!important}
.payroll-ui .payroll-context-filters .payroll-filter-field{flex-basis:24rem}
.payroll-ui .payroll-filters label{display:block;margin:0;font-size:.75rem;font-weight:500;color:var(--et-ink-soft)}
.payroll-ui .payroll-filters :is(input,select){width:100%!important;min-width:0!important;max-width:100%;height:2.25rem!important;margin:0;font:inherit;font-size:.875rem;border:1px solid var(--et-line);border-radius:var(--et-radius-sm);background-color:var(--et-surface);color:var(--et-ink)}
.payroll-ui .payroll-filter-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-left:auto}
.payroll-ui .payroll-filter-actions .btn{min-height:2.25rem;height:auto!important}
.payroll-ui .page-header>.et-hd-actions{align-items:center;gap:.5rem!important}
.payroll-ui .card{background:var(--et-surface);border:1px solid var(--et-line);border-radius:var(--et-radius);box-shadow:var(--et-shadow-sm);margin-bottom:1rem;min-width:0}
.payroll-ui .card-hd{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.875rem 1rem;border-bottom:1px solid var(--et-line)}
.payroll-ui .card-hd h3{margin:0;color:var(--et-primary);font-size:.875rem;font-weight:600}
.payroll-ui .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:.75rem;margin-bottom:1rem}
.payroll-ui .et-kpi{border-radius:var(--et-radius);border:1px solid var(--et-line);box-shadow:var(--et-shadow-sm);background:var(--et-surface);padding:1rem}
.payroll-ui .modal-box{background:var(--et-surface);color:var(--et-ink);border:1px solid var(--et-line);border-radius:var(--et-radius);box-shadow:var(--et-shadow-lg);max-height:90dvh;overflow:auto}
.payroll-ui .modal-hd,.payroll-ui .modal-ft{padding:1rem;border-color:var(--et-line);gap:.5rem;flex-wrap:wrap}
.payroll-ui .modal-body{padding:1rem}
.payroll-ui .modal-hd h3{font-size:1.125rem;color:var(--et-primary);margin:0}
.payroll-ui .modal-box .form-group{margin-bottom:.75rem}
.payroll-ui .modal-close{cursor:pointer}
@media(max-width:768px){.payroll-ui .payroll-filters .payroll-filter-field{flex:1 1 9rem}.payroll-ui .payroll-filter-actions{margin-left:0;width:100%}.payroll-ui .payroll-filter-actions .btn{flex:1}.payroll-ui .page-header>.et-hd-actions{width:100%;justify-content:flex-start}}
@media(max-width:420px){.payroll-ui .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-ui .et-kpi{padding:.75rem}.payroll-ui .et-kpi-val{font-size:1.125rem;overflow-wrap:anywhere}.payroll-ui .payroll-filters .payroll-filter-field{flex-basis:100%}}

/* Keep calendar wrappers inside the field; only outer fields participate in layout. */
.payroll-ui .payroll-filters>.filter-field{flex:1 1 10rem;min-width:0;align-self:auto}
.payroll-ui .payroll-filters>.payroll-filter-actions{flex:0 0 auto;min-height:0;margin:0;align-self:flex-end}
.payroll-ui .payroll-filters label{text-transform:none;letter-spacing:normal}
.payroll-ui .payroll-filters .et-native-date-wrap,.payroll-ui .payroll-filters .et-date-wrap{width:100%;min-width:0}

/* Dashboard: reuse the supervisor CRM KPI anatomy and shared eDS typography. */
body.payroll-ui.nom-workspace .nom-page{padding:12px!important}
.nom-workspace .nom-header{margin-bottom:18px;align-items:center}
.nom-workspace .nom-header h1{position:relative;padding-left:12px;font-size:23px;margin:0 0 8px}
.nom-workspace .nom-header h1::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:3px;background:linear-gradient(var(--et-primary),var(--et-accent))}
.nom-workspace .nom-nav{gap:4px;margin-bottom:18px}
.nom-workspace .nom-nav a{font-size:13px;padding:10px 14px}
.nom-workspace .nom-filter{padding:14px 16px;gap:16px}
.nom-workspace .nom-filter label{font-size:12px;font-weight:600;color:var(--et-ink-soft)}
.nom-workspace .nom-filter select,.nom-workspace .nom-filter strong{font-size:13px}
.nom-workspace .nom-kpis{gap:18px;margin-bottom:28px}
.nom-workspace #workspace-kpis .et-kpi{display:block;min-width:0;min-height:174px;height:100%;padding:16px 18px;border-top:3px solid var(--et-primary);text-decoration:none}
.nom-workspace #workspace-kpis .et-kpi-info{border-top-color:var(--et-info);background:linear-gradient(160deg,rgba(59,130,196,.05),var(--et-surface) 55%)}
.nom-workspace #workspace-kpis .et-kpi-accent{border-top-color:var(--et-accent);background:linear-gradient(160deg,rgba(255,95,0,.045),var(--et-surface) 55%)}
.nom-workspace #workspace-kpis .et-kpi-success{border-top-color:var(--et-success);background:linear-gradient(160deg,rgba(15,169,104,.05),var(--et-surface) 55%)}
.nom-workspace #workspace-kpis .et-kpi-warning{border-top-color:var(--et-warning);background:linear-gradient(160deg,rgba(232,163,61,.06),var(--et-surface) 55%)}
.nom-workspace #workspace-kpis .et-kpi-danger{border-top-color:var(--et-danger);background:linear-gradient(160deg,rgba(224,68,91,.05),var(--et-surface) 55%)}
.nom-workspace #workspace-kpis .et-kpi-hd{align-items:flex-start;flex-wrap:wrap;min-height:62px}
.nom-workspace #workspace-kpis .et-kpi-val{font-size:clamp(20px,1.8vw,28px);overflow-wrap:anywhere}
.nom-workspace #workspace-kpis .et-kpi-success .et-kpi-val{color:var(--et-success)}
.nom-workspace #workspace-kpis .et-kpi-warning .et-kpi-val{color:var(--et-warning)}
.nom-workspace .nom-ai{margin-bottom:28px}
.nom-workspace .ia-bar-btn{font-size:13px;gap:12px}
.nom-workspace .ia-bar-t{font-size:13px;font-weight:700}
.nom-workspace .ia-bar-s{font-size:12px;color:var(--et-ink-muted)}
.nom-workspace .nom-panel{padding:16px;border-radius:var(--et-radius);box-shadow:var(--et-shadow-sm)}
.nom-workspace .nom-panel h2{font-size:13px}
.nom-workspace .nom-panel-head>a,.nom-workspace .nom-row,.nom-workspace .nom-row a,.nom-workspace .nom-panel>p{font-size:13px;line-height:1.5}
@media(max-width:600px){.nom-workspace .nom-kpis{gap:12px}.nom-workspace #workspace-kpis .et-kpi{padding:14px;min-height:170px}.nom-workspace .nom-header{align-items:flex-start}.nom-workspace .ia-bar-s{display:block}.nom-workspace .nom-filter>div:first-child{min-width:0;flex-basis:100%}}

/* Approved supervisor vocabulary applies to every Payroll screen. */
body.payroll-ui{font-size:13px}
body.payroll-ui .main-content.no-shell,body.payroll-ui>.nom-page{padding:12px!important}
.payroll-ui .page-header .main-content-title{font-size:23px}
.payroll-ui .page-header .breadcrumb{font-size:13px}
.payroll-ui .payroll-filters{padding:14px 16px;gap:12px;margin-bottom:18px}
.payroll-ui .payroll-filters label{font-size:12px;font-weight:600}
.payroll-ui .payroll-filters :is(input,select){font-size:13px;height:38px!important}
.payroll-ui .card-hd,.payroll-ui .modal-hd,.payroll-ui .modal-ft,.payroll-ui .modal-body{padding:16px}
.payroll-ui .card-hd h3,.payroll-ui .modal-body,.payroll-ui .modal-body label,.payroll-ui .nom-field label{font-size:13px}
.payroll-ui .modal-hd h3{font-size:18px}
.payroll-ui .modal-body :is(input:not([type=checkbox]):not([type=radio]),select,textarea),.payroll-ui .nom-field :is(input,select,textarea){font:inherit;font-size:13px;width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--et-line);border-radius:var(--et-radius-sm);padding:8px 10px;color:var(--et-ink);background:var(--et-surface)}
.payroll-ui .modal-box{width:min(760px,calc(100vw - 32px));max-width:calc(100vw - 32px)}
.payroll-ui .modal-body :is(.form-grid2,.form-grid3){gap:14px}
.payroll-ui .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:18px;margin-bottom:24px}
.payroll-ui .et-kpi{height:100%;padding:16px 18px;border-top:3px solid var(--et-primary);text-decoration:none}
.payroll-ui .et-kpi-info{border-top-color:var(--et-info);background:linear-gradient(160deg,rgba(59,130,196,.05),var(--et-surface) 55%)}
.payroll-ui .et-kpi-accent{border-top-color:var(--et-accent);background:linear-gradient(160deg,rgba(255,95,0,.045),var(--et-surface) 55%)}
.payroll-ui .et-kpi-success{border-top-color:var(--et-success);background:linear-gradient(160deg,rgba(15,169,104,.05),var(--et-surface) 55%)}
.payroll-ui .et-kpi-warning{border-top-color:var(--et-warning);background:linear-gradient(160deg,rgba(232,163,61,.06),var(--et-surface) 55%)}
.payroll-ui .et-kpi-danger{border-top-color:var(--et-danger);background:linear-gradient(160deg,rgba(224,68,91,.05),var(--et-surface) 55%)}
.payroll-ui .et-kpi-hd{flex-wrap:wrap;min-height:44px}
.payroll-ui .et-kpi-lbl{font-size:11px;line-height:1.4}
.payroll-ui .et-kpi-val{font-size:26px;overflow-wrap:anywhere}
.payroll-ui .et-kpi-success .et-kpi-val{color:var(--et-success)}
.payroll-ui .et-kpi-warning .et-kpi-val{color:var(--et-warning)}
.payroll-ui .et-kpi-sub{font-size:12px}
.payroll-ui #employee-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.payroll-ui .nom-kpi.et-kpi strong{font-size:26px;margin:0}
.payroll-ui .nom-kpi.et-kpi span.et-kpi-lbl{font-size:11px;color:var(--et-ink-muted)}
.payroll-ui .nom-kpi.et-kpi .et-kpi-ico{font-size:14px}
.payroll-ui .nom-parameters .nom-info,.payroll-ui .nom-parameters :is(input,select,button),.payroll-ui #employee-content{font-size:13px}
.payroll-ui .nom-table table,.payroll-ui .table{font-size:13px}
.payroll-ui .et-pager-wrap{padding:12px 16px;font-size:12px}
@media(max-width:600px){
 .payroll-ui .kpi-grid,.payroll-ui #employee-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .payroll-ui .et-kpi{padding:14px;min-width:0}
 .payroll-ui .et-kpi-val,.payroll-ui .nom-kpi.et-kpi strong{font-size:20px}
 .payroll-ui .modal-body :is(.form-grid2,.form-grid3){display:grid;grid-template-columns:minmax(0,1fr)}
 .payroll-ui .modal-ft{justify-content:flex-end}
}

.payroll-ui .main-content.no-shell>.container-fluid{padding-left:0;padding-right:0}