/* Explicit card rows keep labels, symbols and amounts apart. */
.pm-dashboard .pm-pay-cards .pm-net-card{display:grid;grid-template-columns:minmax(0,1fr) 42px;grid-template-rows:42px minmax(16px,1fr) auto auto auto;gap:9px;min-height:220px;padding:18px;align-items:start}
.pm-dashboard .pm-net-card .pm-pay-watermark{position:static;inset:auto;grid-row:1;grid-column:1;justify-self:end;align-self:center;font:700 clamp(27px,7vw,43px)/42px Arial,sans-serif;letter-spacing:-1px;opacity:.25}
.pm-dashboard .pm-net-card .pm-pay-icon{grid-row:1;grid-column:2;width:42px;height:42px}
.pm-dashboard .pm-net-card .pm-net-title{grid-row:3;grid-column:1/-1;margin:0;font-size:14px;line-height:1.6}
.pm-dashboard .pm-net-card .pm-net-value{grid-row:4;grid-column:1/-1;margin:0;gap:6px;line-height:1.4}
.pm-dashboard .pm-net-card .pm-net-caption{grid-row:5;grid-column:1/-1;font-size:10px;line-height:1.7;margin-top:4px}
.pm-dashboard .pm-net-card .pm-net-value strong{font-size:clamp(19px,4.7vw,31px)}
.pm-topbar .pm-logo{mix-blend-mode:multiply}:root[data-theme=dark] .pm-topbar .pm-logo{filter:grayscale(1) invert(1) brightness(1.7);mix-blend-mode:screen;background:transparent}
#main .analysis-report .report-metrics.analysis-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#main .analysis-report .analysis-metrics .kpi{min-height:130px;padding:18px;border-radius:24px}
#main .analysis-report .analysis-metrics .kpi:first-child{background:#35373D;color:#fff}
#main .analysis-report .chk{border:1px solid #36454f12;border-radius:23px;background:#ffffffc9;overflow:hidden;margin:12px 0;box-shadow:none}
#main .analysis-report summary.chh{cursor:pointer;list-style:none;padding:17px;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:3px 10px;align-items:center}
#main .analysis-report summary.chh::-webkit-details-marker{display:none}
#main .analysis-report .chh b{font-size:14px;line-height:1.6}#main .analysis-report .chh small{grid-column:2;font-size:11px}#main .analysis-report .report-check-count{grid-column:3;grid-row:1/3;border-radius:12px;padding:5px 10px;background:#edf4f5}#main .analysis-report .chi{padding:15px 17px;gap:7px 10px;border-top:1px solid #36454f0e}#main .analysis-report .chi .en{font-size:13px}#main .analysis-report .chi .cd{font-size:12px;line-height:1.8}#main .analysis-report .report-months{border-radius:18px;margin-bottom:12px}#main .analysis-report .tablebox{overflow-x:auto}
.deductions-total{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--soft,#eef5f6);padding:18px;border-radius:19px;margin:15px 0}.deductions-total>bdi{font-size:24px;font-weight:600}.deductions-total small{font-size:11px}.deduction-group{border:1px solid #9baab233;border-radius:17px;margin:9px 0;overflow:hidden}.deduction-group summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:14px;list-style:none}.deduction-group summary>span{flex:1;font-size:13px;font-weight:600}.deduction-group summary small{display:block;font-size:10px;font-weight:400;color:#7a898f}.deduction-group summary>bdi{font-size:13px}.deduction-row{width:100%;display:flex;align-items:center;gap:8px;text-align:right;padding:14px;border:0;border-top:1px solid #9baab222;background:transparent;color:inherit;font:inherit}.deduction-row>span{flex:1}.deduction-row b{font-size:13px}.deduction-row small{display:block;color:#7a898f;font-size:11px;line-height:1.8}.deduction-row>bdi{font-size:13px}
:root[data-theme=dark] #main .analysis-report .chk{background:#25343b;border-color:#ffffff15}:root[data-theme=dark] #main .analysis-report .report-check-count{background:#364951;color:#edf5f7}:root[data-theme=dark] .deductions-total{background:#293c44}
@media(max-width:600px){#main .analysis-report .report-metrics.analysis-metrics{grid-template-columns:1fr 1fr}#main .analysis-report .analysis-metrics .kpi:first-child{grid-column:1/-1;min-height:100px}#main .analysis-report .analysis-metrics .kpi{min-height:130px;padding:15px}#main .analysis-report .analysis-metrics .kv{font-size:25px}#main .analysis-report{padding-bottom:30px}}
/* Monthly home must fit the visible phone viewport, including its navigation. */
@media screen and (max-width:720px){
 body.payhub-view{padding:0;min-height:0;height:100dvh;overflow-x:hidden}
 body.payhub-view>main.wrap{padding:0!important;margin:0!important;max-width:none!important}
 body.payhub-view #main>.pm-dashboard{height:100dvh;min-height:0;width:100%;max-width:100%;margin:0;padding:10px 12px max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "heading" "kpis" "status" "pay" "insights" "sync" "bottom";grid-template-rows:auto auto auto auto minmax(110px,1.05fr) minmax(100px,.95fr) auto auto;gap:8px;align-content:stretch;overflow:auto;border:0;border-radius:0}
 .pm-dashboard>.pm-topbar{grid-area:top;min-height:48px;padding:7px 10px;gap:6px;box-shadow:none}.pm-dashboard .pm-logo{height:25px;max-width:88px}.pm-dashboard .pm-clock{font-size:8px}.pm-dashboard .pm-top-actions{gap:4px}.pm-dashboard .pm-icon-button{width:31px;height:31px;border-radius:11px}.pm-dashboard .pm-icon-button svg{width:17px;height:17px}
 .pm-dashboard>.pm-heading{grid-area:heading;margin:0;gap:8px;min-height:31px}.pm-dashboard .pm-heading h2{font-size:22px;line-height:1.3}.pm-dashboard .pm-notes-pill{min-height:28px;padding:5px 12px;font-size:10px;box-shadow:none}
 .pm-dashboard>.pm-kpis{grid-area:kpis;margin:0;gap:5px;grid-template-columns:1.7fr 1fr .7fr}.pm-dashboard .pm-kpi strong{font-size:clamp(22px,6.5vw,30px);font-weight:400;line-height:1.1}.pm-dashboard .pm-kpi span{font-size:9px;margin-top:4px;line-height:1.5}
 .pm-dashboard>.pm-status{grid-area:status;margin:0;gap:5px;grid-template-columns:44px 43px minmax(60px,1fr) minmax(105px,1.1fr)}.pm-dashboard .pm-status-item{gap:3px}.pm-dashboard .pm-status-item label{font-size:9px;line-height:1.4}.pm-dashboard .pm-status-item b,.pm-dashboard .pm-status-item.month .pm-month{min-height:31px;height:31px;padding:4px;font-size:10px}.pm-dashboard .pm-month svg{width:12px;height:12px}
 .pm-dashboard>.pm-pay-cards{grid-area:pay;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0;min-height:0;height:100%}
 .pm-dashboard .pm-pay-cards .pm-net-card{height:100%;min-height:0;grid-template-columns:minmax(0,1fr) 31px;grid-template-rows:31px minmax(2px,1fr) auto auto auto;padding:12px;gap:4px;border-radius:25px}
 .pm-dashboard .pm-net-card .pm-pay-watermark{font-size:clamp(23px,6.8vw,31px);line-height:31px}.pm-dashboard .pm-net-card .pm-pay-icon{width:31px;height:31px}.pm-dashboard .pm-net-card .pm-pay-icon svg{width:19px;height:19px}.pm-dashboard .pm-net-card .pm-net-title{font-size:11px;line-height:1.5}.pm-dashboard .pm-net-card .pm-net-value{gap:4px}.pm-dashboard .pm-net-card .pm-net-value strong{font-size:clamp(16px,4.6vw,23px);line-height:1.3}.pm-dashboard .pm-net-card .pm-net-value small{font-size:8px}.pm-dashboard .pm-net-card .pm-net-caption{font-size:8px;line-height:1.5;margin-top:2px}
 .pm-dashboard>.pm-insights{grid-area:insights;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-height:0;height:100%;margin:0}.pm-dashboard .pm-panel{height:100%;min-height:0;padding:10px;border-radius:24px}.pm-dashboard .pm-panel-head{font-size:10px;line-height:1.5;gap:4px}.pm-dashboard .pm-open{width:25px;height:25px;flex:none}.pm-dashboard .pm-open svg{width:16px;height:16px}
 .pm-dashboard .pm-distribution{display:flex;flex-direction:column;overflow:hidden}.pm-dashboard .pm-donut{width:auto;height:auto;flex:1;min-height:0;max-height:135px;max-width:100%;aspect-ratio:1;margin:3px auto 0;box-shadow:inset 0 0 0 9px #edf4f5}.pm-dashboard .pm-donut:after{inset:18px}.pm-dashboard .pm-donut strong{font-size:27px;line-height:1.1}.pm-dashboard .pm-donut span{font-size:9px}
 .pm-dashboard .pm-tools{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px;padding:0;background:transparent}.pm-dashboard .pm-tool{min-width:0;padding:6px;gap:4px;font-size:9px;line-height:1.4;border-radius:20px}.pm-dashboard .pm-tool svg{width:20px;height:20px}.pm-dashboard .pm-badge{top:6px;inset-inline-end:6px;min-width:15px;height:15px;font-size:8px}
 .pm-dashboard>.pm-sync{grid-area:sync;min-height:32px;margin:0;padding:5px 8px;gap:7px;font-size:8px;line-height:1.5;border-radius:18px}.pm-dashboard .pm-sync-icon{width:25px;height:25px}.pm-dashboard .pm-sync-icon svg{width:16px;height:16px}
 .pm-dashboard>.pm-bottom{grid-area:bottom;position:static;inset:auto;transform:none;width:100%;margin:0;display:block}.pm-dashboard .pm-nav.payroll-shortcuts{width:100%;padding:6px 4px;border:0;border-radius:24px;box-shadow:none;grid-template-columns:repeat(5,minmax(0,1fr))}.pm-dashboard .pm-nav.payroll-shortcuts button{min-height:37px;padding:3px 1px;font-size:8px;gap:3px;line-height:1.3;border-radius:15px}.pm-dashboard .pm-nav.payroll-shortcuts svg{width:19px;height:19px}
 :root[data-theme=dark] .pm-dashboard .pm-donut{box-shadow:inset 0 0 0 9px #243136}
}
@media screen and (max-width:720px) and (max-height:650px){
 body.payhub-view #main>.pm-dashboard{gap:5px;padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom));grid-template-rows:auto auto auto auto minmax(105px,1.05fr) minmax(95px,.95fr) auto auto}
 .pm-dashboard>.pm-topbar{min-height:43px;padding-block:5px}.pm-dashboard .pm-logo{height:23px}.pm-dashboard .pm-icon-button{width:28px;height:28px}.pm-dashboard .pm-heading h2{font-size:20px}.pm-dashboard>.pm-heading{min-height:27px}.pm-dashboard .pm-kpi strong{font-size:23px}.pm-dashboard .pm-kpi span{font-size:8px;margin-top:2px}.pm-dashboard .pm-status-item b,.pm-dashboard .pm-status-item.month .pm-month{height:27px;min-height:27px}.pm-dashboard .pm-net-card .pm-pay-icon{width:27px;height:27px}.pm-dashboard .pm-pay-cards .pm-net-card{grid-template-columns:minmax(0,1fr) 27px;grid-template-rows:27px minmax(1px,1fr) auto auto auto;padding:10px;gap:3px}.pm-dashboard .pm-net-card .pm-pay-watermark{line-height:27px;font-size:25px}.pm-dashboard .pm-net-card .pm-net-caption{font-size:7px}.pm-dashboard .pm-panel-head{font-size:9px}.pm-dashboard .pm-donut strong{font-size:23px}.pm-dashboard .pm-tool{font-size:8px;padding:5px}.pm-dashboard .pm-nav.payroll-shortcuts button{min-height:32px}.pm-dashboard>.pm-sync{font-size:7px;min-height:29px}
}
/* Decorative words sit behind the information, never in a separate headline row. */
.pm-dashboard .pm-pay-cards .pm-net-card{grid-template-columns:minmax(0,1fr) 42px;grid-template-rows:42px minmax(4px,.4fr) auto auto minmax(4px,.6fr) auto;gap:8px}
.pm-dashboard .pm-net-card .pm-pay-icon{grid-column:2;grid-row:1;justify-self:end}
.pm-dashboard .pm-net-card .pm-pay-watermark{position:absolute;inset:auto;left:12px;top:50%;transform:translateY(-50%);grid-area:auto;z-index:0;font:700 clamp(46px,12vw,80px)/1 Arial,sans-serif;letter-spacing:-2px;opacity:.055!important;pointer-events:none;user-select:none;white-space:nowrap}
.pm-dashboard .pm-net-card .pm-net-title{grid-row:3;grid-column:1/-1;z-index:1}.pm-dashboard .pm-net-card .pm-net-value{grid-row:4;grid-column:1/-1;z-index:1}.pm-dashboard .pm-net-card .pm-net-caption{grid-row:6;grid-column:1/-1;z-index:1}
.pm-dashboard .pm-donut{background:none!important;box-shadow:none!important;position:relative;overflow:visible}.pm-dashboard .pm-donut:after{display:none}.pm-dashboard .pm-reference-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;fill:none}.pm-reference-track{stroke:#a8b3b9;stroke-width:.9;stroke-dasharray:1 4;stroke-linecap:round}.pm-reference-arc{stroke:#58cfdd;stroke-width:9;stroke-linecap:round}.pm-dashboard .pm-donut div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.pm-dashboard .pm-donut strong{font-weight:600}.pm-dashboard .pm-donut span{color:#7c8990;margin-top:3px}
:root[data-theme=dark] .pm-reference-track{stroke:#80969f}:root[data-theme=dark] .pm-dashboard .pm-donut span{color:#afc0c7}
@media screen and (max-width:720px){.pm-dashboard .pm-pay-cards .pm-net-card{grid-template-columns:minmax(0,1fr) 31px;grid-template-rows:31px minmax(2px,.4fr) auto auto minmax(2px,.6fr) auto;gap:4px}.pm-dashboard .pm-net-card .pm-pay-watermark{left:8px;font-size:clamp(43px,12vw,65px)}}
@media screen and (max-width:720px) and (max-height:650px){.pm-dashboard .pm-pay-cards .pm-net-card{grid-template-columns:minmax(0,1fr) 27px;grid-template-rows:27px minmax(1px,.4fr) auto auto minmax(1px,.6fr) auto;gap:3px}}
/* Keep phone cards square; available screen height must not stretch them. */
@media screen and (max-width:720px){
 body.payhub-view #main>.pm-dashboard{grid-template-rows:repeat(8,max-content);align-content:start;overflow-y:auto}
 .pm-dashboard>.pm-heading{margin-top:9px;margin-bottom:4px}
 .pm-dashboard>.pm-pay-cards{height:auto;align-self:start;align-items:start}
 .pm-dashboard .pm-pay-cards .pm-net-card{height:auto;min-height:0;aspect-ratio:1;width:100%;align-self:start}
 .pm-dashboard>.pm-insights{height:auto;align-self:start;align-items:stretch}
 .pm-dashboard .pm-panel{height:auto;min-height:0;aspect-ratio:1}
 .pm-dashboard .pm-tools{grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(2,minmax(0,1fr));align-content:stretch}
 .pm-dashboard .pm-tool{height:auto;min-height:0;aspect-ratio:1;padding:5px}
 .pm-dashboard .pm-distribution{height:auto;min-height:0;aspect-ratio:1}
 .pm-dashboard .pm-donut{width:100%;height:auto;min-height:0;max-height:none;max-width:100%;aspect-ratio:1;flex:1}
 .pm-dashboard>.pm-bottom{align-self:start}
}

/* Match the approved reference: four clean square actions beside a dotted progress card. */
@media screen and (max-width:720px){
 .pm-dashboard>.pm-insights{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;direction:rtl}
 .pm-dashboard .pm-panel.pm-tools{direction:rtl;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible}
 .pm-dashboard .pm-panel.pm-tools .pm-tool{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1;border-radius:20px;padding:5px;box-shadow:none}
 .pm-dashboard .pm-panel.pm-distribution{direction:rtl;display:flex;flex-direction:column;padding:10px;background:#ffffffa8;overflow:hidden}
 .pm-dashboard .pm-distribution .pm-panel-head{min-height:25px;flex:0 0 auto}
 .pm-dashboard .pm-distribution .pm-donut{position:relative;flex:1 1 auto;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;margin:0;background:transparent!important;box-shadow:none!important;border-radius:0;overflow:visible}
 .pm-dashboard .pm-distribution .pm-donut:after{display:none!important}
 .pm-dashboard .pm-reference-ring{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);transform:rotate(-90deg);overflow:visible;fill:none}
 .pm-dashboard .pm-reference-track{fill:none;stroke:#a7b0b6;stroke-width:1;stroke-dasharray:1.2 4.2;stroke-linecap:round}
 .pm-dashboard .pm-reference-arc{fill:none;stroke:#58cfdd;stroke-width:9;stroke-linecap:round}
 .pm-dashboard .pm-distribution .pm-donut>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
 .pm-dashboard .pm-distribution .pm-donut strong{font-size:27px;font-weight:650;line-height:1}
 .pm-dashboard .pm-distribution .pm-donut span{font-size:9px;color:#7c8990;margin-top:5px}
}

/* Fit the monthly overview to the available phone viewport. The navigation
   participates in layout, so it cannot cover cards when Safari changes height. */
@media screen and (max-width:720px){
 body.payhub-view{height:auto;min-height:100dvh;overflow-y:auto}
 body.payhub-view #main>.pm-dashboard{height:100dvh;min-height:0;padding:10px 12px max(8px,env(safe-area-inset-bottom));grid-template-rows:auto auto auto auto minmax(136px,1.05fr) minmax(136px,.95fr) auto auto;gap:8px;align-content:stretch;overflow:auto}
 .pm-dashboard>:is(.pm-heading,.pm-kpis,.pm-status,.pm-pay-cards,.pm-insights,.pm-sync){margin:0;min-width:0}
 .pm-dashboard>.pm-heading{min-height:35px}.pm-dashboard .pm-heading h2{font-size:23px}.pm-dashboard .pm-welcome{font-size:10px}
 .pm-dashboard>.pm-pay-cards,.pm-dashboard>.pm-insights{height:100%;min-height:0;align-self:stretch;align-items:stretch}
 .pm-dashboard .pm-pay-cards .pm-net-card{height:100%;min-height:0;aspect-ratio:auto;padding:12px;gap:4px;border-radius:25px}
 .pm-dashboard .pm-panel,.pm-dashboard .pm-panel.pm-distribution{height:100%;min-height:0;aspect-ratio:auto;border-radius:24px}
 .pm-dashboard .pm-panel.pm-tools .pm-tool{height:100%;min-height:0;aspect-ratio:auto;font-size:10px}
 .pm-dashboard .pm-distribution .pm-donut{height:100%;min-height:0;aspect-ratio:auto;max-height:none}
 .pm-dashboard>.pm-sync{min-height:38px;font-size:8.5px;padding:5px 8px}.pm-dashboard .pm-brain-soon{width:32px;min-height:32px;border-radius:11px}
 .pm-dashboard>.pm-bottom{position:static;inset:auto;transform:none;width:100%;align-self:end;margin:0;z-index:20}
 .pm-dashboard .pm-nav.payroll-shortcuts{padding:5px 4px;border-radius:24px;box-shadow:none}
 .pm-dashboard .pm-nav.payroll-shortcuts button{min-height:42px;font-size:8.5px;gap:3px}
}
@media screen and (max-width:720px) and (max-height:650px){
 body.payhub-view #main>.pm-dashboard{gap:5px;padding-top:6px;grid-template-rows:auto auto auto auto minmax(118px,1.05fr) minmax(112px,.95fr) auto auto}
 .pm-dashboard>.pm-heading{min-height:29px}.pm-dashboard .pm-heading h2{font-size:21px}
 .pm-dashboard .pm-pay-cards .pm-net-card{padding:10px;gap:3px}
 .pm-dashboard .pm-nav.payroll-shortcuts button{min-height:37px}
}

/* Dashboard actions share the approval surface; the ratio shares CASH. */
.pm-dashboard .pm-panel.pm-distribution{background:#f6fbfc!important;color:#293b43}
:root[data-theme="dark"] .pm-dashboard .pm-panel.pm-distribution{background:#35373D!important;color:#eff7f8}
/* The approval tile tilts within its existing grid space, matching the reference. */
.pm-dashboard .pm-tools .pm-tool[data-v="transfer"]{transform:rotate(-16deg) scale(.82);transform-origin:center;z-index:1}

/* Every statement column links to the monthly correction workspace. */
.payroll-column-link{font:inherit;color:inherit;border:0;background:transparent;padding:0;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
.payroll-column-review{margin:20px 0;padding:18px;border:1px solid #ffffffa0;border-radius:24px;background:#ffffff80;min-width:0}
.review-filters{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;margin:16px 0}.review-filters label{display:grid;gap:5px;font-size:12px}.review-filters :is(input,select){width:100%;min-width:0;min-height:42px;border:1px solid #bdcbd1;border-radius:12px;padding:8px;background:#fff;color:inherit;font:inherit}
.payroll-column-review .tablebox{max-width:100%;overflow:auto}.payroll-column-review table{min-width:650px}.payroll-column-review small{display:block}.payroll-column-review .paynote{padding:12px}.attendance-review-evidence{padding:16px;margin:16px 0;border:1px solid #c5d9dd;border-radius:18px;background:#edf7f8;font-size:12px;line-height:1.9}
:root[data-theme=dark] .payroll-column-review{background:#25343b;border-color:#ffffff20}:root[data-theme=dark] .review-filters :is(input,select){background:#35373D;color:#f5f7f8}:root[data-theme=dark] .attendance-review-evidence{background:#25343b;border-color:#52646b}
@media(max-width:720px){.review-filters{grid-template-columns:1fr 1fr}.review-filters label:last-child{grid-column:1/-1}.payroll-column-review{padding:12px}}
@media print{.payroll-column-link{text-decoration:none}}