/* Screen-only polish. Print documents and PDF templates keep their existing styles. */
@media screen {
:root{--bg:#f3f6fb;--bg3:#f4f7fb;--border:#e1e8f1;--text:#172b49;--text2:#4b607b;--text3:#73839a;--accent:#285cdb;--accent2:#1f49b6;--success:#0d947d;--radius:10px;--radius-lg:16px}
#content{background:radial-gradient(ellipse at 95% 0%,#e8effb 0,transparent 42%),var(--bg)}
#app .card{border-color:var(--border);border-radius:16px;box-shadow:0 4px 18px #1b365d05}
#app .btn{border-radius:9px;font-weight:600;transition:background .15s,box-shadow .15s}
#app .btn-primary{box-shadow:0 3px 8px #285cdb1c}
#app .btn:focus-visible{outline:3px solid #729be3;outline-offset:3px}
#app #topbar{border-bottom-color:#e1e8f1}
#app thead th{color:#526783;letter-spacing:.035em}
#app input:not([type=checkbox]):not([type=radio]),#app select,#app textarea{border-radius:9px}
#page-dashboard .dashboard-welcome{background:linear-gradient(115deg,#132d50,#214d80 70%,#236c85);color:white;border:0;padding:28px 30px;position:relative;overflow:hidden}
#page-dashboard .dashboard-welcome:after{content:'';position:absolute;right:12%;top:-95px;width:280px;height:280px;border:1px solid #ffffff12;border-radius:50%;pointer-events:none}
#page-dashboard .dashboard-welcome h2{font-size:28px;letter-spacing:-.7px;color:white;margin:6px 0 8px;line-height:1.2}
#page-dashboard .dashboard-welcome p{color:#c2d5ed;max-width:680px}
#page-dashboard .dashboard-welcome .btn{background:#ffffff14;color:white;border-color:#ffffff35;position:relative;z-index:1}
.dashboard-eyebrow{font-size:10px;font-weight:750;letter-spacing:1.7px;color:#738ba9}
.dashboard-welcome .dashboard-eyebrow{color:#9fdfdf}
#page-dashboard .dashboard-kpi-card{position:relative;padding:22px 24px;border-top:3px solid #416edf;background:white}
#page-dashboard .dashboard-kpi-card:nth-child(2){border-top-color:#149b88}
#page-dashboard .dashboard-kpi-card:nth-child(3){border-top-color:#d7a141}
#page-dashboard .dashboard-kpi-card:nth-child(4){border-top-color:#8c75cc}
#page-dashboard .stat-value{font-size:34px;letter-spacing:-1.1px;font-variant-numeric:tabular-nums}
#page-dashboard .dashboard-kpi-card:nth-child(2) .stat-value{font-size:clamp(19px,1.9vw,28px);white-space:nowrap;letter-spacing:-.8px}
#page-dashboard .stat-label{font-size:10px;letter-spacing:1px}
.dashboard-visuals{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;margin-bottom:24px}
.insight-card{padding:24px;min-width:0}
.insight-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}
.insight-heading h3{font-size:17px;letter-spacing:-.3px;margin-top:5px}
.insight-tag{font-size:10px;padding:5px 9px;background:#edf2ff;color:#315dc1;border-radius:20px;white-space:nowrap;font-weight:650}
.insight-tag.teal{background:#e5f5ef;color:#117e6c}
.insight-total{font-size:25px;font-weight:750;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.insight-total small{display:block;font-size:11px;font-weight:400;color:var(--text3);letter-spacing:0;margin-top:3px}
.payroll-bar-chart{display:flex;gap:12px;height:196px;margin-top:20px;align-items:stretch}
.payroll-bar-column{min-width:0;flex:1;display:flex;align-items:center;flex-direction:column;font-size:11px}
.payroll-bar-value{font-size:10px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--text2);margin-bottom:8px}
.payroll-bar-track{height:132px;width:100%;max-width:62px;display:flex;align-items:flex-end;background:repeating-linear-gradient(to top,#edf1f7 0,#edf1f7 1px,transparent 1px,transparent 44px);border-bottom:1px solid #dfe7f0}
.payroll-bar{width:100%;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#6a95ef,#315fc6);min-height:0}
.payroll-bar-column:last-child .payroll-bar{background:linear-gradient(180deg,#46bfae,#128b79)}
.payroll-bar-column strong{margin-top:9px;color:var(--text2)}
.payroll-bar-column small{font-size:9px;color:var(--text3)}
.department-chart{max-height:275px;overflow:auto;min-height:240px;padding-right:5px}
.department-row{margin-bottom:20px}
.department-row>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:12px}
.department-track{height:7px;background:#edf3f7;border-radius:10px;overflow:hidden}
.department-track span{display:block;height:100%;background:linear-gradient(90deg,#147e88,#55bcb2);border-radius:10px}
.insight-footnote{font-size:10px;color:var(--text3);margin-top:16px;border-top:1px solid var(--border);padding-top:12px;line-height:1.6}
.insight-empty{padding:35px 15px;color:var(--text3);font-size:13px;text-align:center}
@media(max-width:900px){.dashboard-visuals{grid-template-columns:1fr}#page-dashboard .dashboard-welcome h2{font-size:23px}.department-chart{min-height:0}}
@media(max-width:550px){.insight-card{padding:18px}.payroll-bar-chart{gap:7px}.payroll-bar-value{font-size:8px}#page-dashboard .dashboard-welcome{padding:22px}}
}

@media screen {
#topbar .toolbar-company-meta select{max-width:none;width:242px;min-width:242px}
.dashboard-welcome-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;position:relative;z-index:1;max-width:40%;flex-shrink:0}
.dashboard-user-name{font-size:15px;font-weight:650;color:#fff;text-align:right;overflow-wrap:anywhere;line-height:1.4}
.dashboard-operations-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-bottom:20px;align-items:start}
#page-dashboard .dashboard-operations-grid>.card{margin-bottom:0!important;min-width:0;padding:20px}
.dashboard-operations-grid .dashboard-live-head{flex-wrap:wrap;gap:8px}
.dashboard-operations-grid .dashboard-inline-status{white-space:normal;flex-basis:100%}
.dashboard-operations-grid #dash-pending-approvals,.dashboard-operations-grid #dash-timeoff-activity,.dashboard-operations-grid #dash-remote-work-list{max-height:310px;overflow:auto;overscroll-behavior:contain;padding-right:4px}
.dashboard-operations-grid #dash-remote-work-list .remote-work-grid{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.dashboard-operations-grid summary{cursor:pointer;color:var(--text2);font-size:12px;font-weight:600;padding:10px 0}
.dashboard-operations-grid summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:1000px){.dashboard-operations-grid{grid-template-columns:1fr}.dashboard-welcome-actions{max-width:45%}}
@media(max-width:550px){.dashboard-welcome .section-head{align-items:flex-start;flex-direction:column}.dashboard-welcome-actions{max-width:100%;width:100%;flex-direction:row;justify-content:space-between;align-items:center}.dashboard-user-name{text-align:left}#topbar .toolbar-company-meta select{width:228px;min-width:228px}}
}
@media screen {
#page-dashboard #dash-stats{grid-template-columns:1.25fr 1fr 1fr}
#page-dashboard .headcount-card{padding:20px}
.headcount-layout{display:flex;align-items:center;gap:18px;margin-top:15px}
.headcount-donut{width:132px;height:132px;flex-shrink:0;border-radius:50%;background:conic-gradient(#416edf var(--active-share),#e5eaf3 0);display:grid;place-items:center}
.headcount-donut>div{width:104px;height:104px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;flex-direction:column}
.headcount-donut strong{font-size:31px;color:var(--accent);letter-spacing:-1px}
.headcount-donut span{font-size:9px;color:var(--text3)}
.headcount-legend{flex:1;min-width:0;font-size:11px}
.headcount-legend>span{display:flex;align-items:center;gap:5px;margin:6px 0;color:var(--text2)}
.headcount-legend b{margin-left:auto;color:var(--text)}
.headcount-legend i{width:7px;height:7px;background:#416edf;border-radius:50%}
.headcount-legend i.inactive{background:#d0d9e9}
.headcount-legend small{display:block;color:var(--text3);font-size:9px;border-top:1px solid var(--border);padding-top:7px;margin-top:8px}
#page-dashboard .dashboard-kpi-card:nth-child(2){border-top-color:#d7a141}
#page-dashboard .dashboard-kpi-card:nth-child(2) .stat-value{font-size:34px}
#page-dashboard .dashboard-kpi-card:nth-child(3){border-top-color:#8c75cc}
#page-dashboard .dashboard-visuals{grid-template-columns:repeat(3,minmax(0,1fr))}
.period-caption{font-size:12px;color:var(--text3);margin-top:-10px;margin-bottom:28px}
.period-bar-row{margin-bottom:25px}
.period-bar-row>div:first-child{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--text2);margin-bottom:12px}
.period-bar-row strong{font-size:23px;font-weight:750;letter-spacing:-.6px;color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.period-bar-track{height:12px;background:#eef2f8;border-radius:5px;overflow:hidden}
.period-bar-track span{display:block;height:100%;border-radius:5px}
.period-bar-track .gross{background:linear-gradient(90deg,#416edf,#7a9df0)}
.period-bar-track .tax{background:linear-gradient(90deg,#138c7a,#4fbcad)}
#page-dashboard .dashboard-visuals .department-chart{min-height:190px;max-height:240px}
@media(max-width:1100px){.headcount-layout{gap:10px}.headcount-donut{width:108px;height:108px}.headcount-donut>div{width:84px;height:84px}#page-dashboard .dashboard-visuals{grid-template-columns:repeat(2,minmax(0,1fr))}#page-dashboard .dashboard-visuals>.card:last-child{grid-column:1/-1}}
@media(max-width:850px){#page-dashboard #dash-stats{grid-template-columns:1fr}.headcount-layout{gap:24px}.headcount-legend{max-width:230px}#page-dashboard .dashboard-visuals{grid-template-columns:1fr}#page-dashboard .dashboard-visuals>.card:last-child{grid-column:auto}}
}

@media screen {
#page-dashboard .dashboard-visuals{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
#page-dashboard .dashboard-visuals>.card:last-child{grid-column:auto}
.comparison-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--text2)}
.comparison-legend span{display:flex;gap:5px;align-items:center;white-space:nowrap}
.comparison-legend i{width:8px;height:8px;border-radius:2px}
.comparison-legend .gross,.comparison-bar.gross{background:linear-gradient(180deg,#7a9df0,#416edf)}
.comparison-legend .tax,.comparison-bar.tax{background:linear-gradient(180deg,#4fbcad,#138c7a)}
.comparison-scale{font-size:10px;color:var(--text3);margin-bottom:8px}
.comparison-scale span{float:right}
.comparison-plot{display:flex;gap:22px}
.comparison-group{flex:1;min-width:0;text-align:center}
.comparison-bars{height:150px;display:flex;justify-content:center;gap:12px;align-items:flex-end;border-bottom:1px solid #dfe7f0;background:repeating-linear-gradient(to top,#edf1f7 0,#edf1f7 1px,transparent 1px,transparent 50px)}
.comparison-bar-slot{height:100%;width:32%;max-width:62px;display:flex;align-items:flex-end}
.comparison-bar{width:100%;border-radius:6px 6px 0 0}
.comparison-group h4{font-size:13px;margin:12px 0 4px}
.comparison-date{font-size:10px;color:var(--text3);min-height:30px}
.comparison-values{margin-top:10px;text-align:left}
.comparison-values>div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid var(--border);font-size:10px;flex-wrap:wrap}
.comparison-values span{color:var(--text3)}
.comparison-values strong{font-size:12px;font-variant-numeric:tabular-nums}
.comparison-note{font-size:10px;color:var(--text3);margin-top:7px}
@media(max-width:900px){#page-dashboard .dashboard-visuals{grid-template-columns:1fr}.payroll-comparison .insight-heading{flex-wrap:wrap}}
@media(max-width:450px){.comparison-plot{gap:14px}.comparison-bars{gap:8px}.comparison-values>div{flex-direction:column;gap:2px}.comparison-date{min-height:40px}}
}

@media screen {
.headcount-donut.gender-donut{background:none;position:relative}
.gender-donut svg{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg);overflow:visible}
.gender-donut circle{fill:none;stroke-width:13}
.gender-track{stroke:#e5eaf3}
.gender-male{stroke:#416edf}
.gender-female{stroke:#159d91}
.headcount-legend i.male{background:#416edf}
.headcount-legend i.female{background:#159d91}
.gender-donut>div{position:relative;z-index:1;background:transparent}
@keyframes axon-ring-build{from{stroke-dasharray:0 100}}
@keyframes axon-bar-build{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes axon-department-build{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.gender-donut .gender-male,.gender-donut .gender-female{animation:axon-ring-build .65s cubic-bezier(.22,.7,.3,1) both}
.comparison-bar{transform-origin:center bottom;animation:axon-bar-build .65s cubic-bezier(.22,.7,.3,1) both}
.department-track span{transform-origin:left center;animation:axon-department-build .65s cubic-bezier(.22,.7,.3,1) both}
@media(prefers-reduced-motion:reduce){.gender-donut circle,.comparison-bar,.department-track span{animation:none!important}}
}

@media screen {
.dashboard-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px;align-items:start}
#page-dashboard .dashboard-bottom-grid>.card{min-width:0;margin-bottom:0!important}
.dashboard-bottom-grid .dashboard-biometric-head{flex-wrap:wrap}
.device-connected-total{font-size:21px;font-weight:750;color:var(--accent);margin:12px 0 6px;letter-spacing:-.4px}
.dashboard-bottom-grid #dash-biometric-devices,.dashboard-bottom-grid #dash-alerts,.dashboard-bottom-grid #dash-profile-updates-list{max-height:370px;overflow:auto;overscroll-behavior:contain}
.dashboard-document-panels .dashboard-live-head{flex-wrap:wrap;gap:8px}
.dashboard-document-panels .dashboard-inline-status{white-space:normal;flex-basis:100%}
#page-dashboard #dash-stats{grid-template-columns:1.15fr 1.35fr 1fr}
.attendance-ring-note{font-size:10px;color:var(--text3);margin-top:14px;line-height:1.7;border-top:1px solid var(--border);padding-top:10px}
.attendance-donut .attendance-segment{animation:axon-ring-build .65s cubic-bezier(.22,.7,.3,1) both}
@media(max-width:1100px){#page-dashboard #dash-stats{grid-template-columns:repeat(2,minmax(0,1fr))}#page-dashboard #dash-stats>.dashboard-kpi-card:last-child{grid-column:1/-1}}
@media(max-width:850px){.dashboard-bottom-grid{grid-template-columns:1fr}#page-dashboard #dash-stats{grid-template-columns:1fr}#page-dashboard #dash-stats>.dashboard-kpi-card:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.attendance-donut .attendance-segment{animation:none!important}}
}

@media screen {
.workforce-charts-stack{display:grid;gap:20px;min-width:0;align-content:start}
#page-dashboard .workforce-charts-stack .department-chart{min-height:75px;max-height:180px}
.workforce-charts-stack .insight-heading{margin-bottom:16px}
.workforce-charts-stack .insight-card{padding:22px}
.workforce-charts-stack .department-row{margin-bottom:14px}
.branch-insight .department-track span{background:linear-gradient(90deg,#6472d9,#a18de5)}
.branch-empty-note{font-size:12px;color:var(--text3);margin-bottom:16px}
}

@media screen {
#page-dashboard .dashboard-visuals{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.workforce-charts-stack{display:contents}
#page-dashboard .dashboard-visuals>.card,#page-dashboard .workforce-charts-stack>.card{height:100%;min-width:0}
#page-dashboard .workforce-charts-stack .department-chart{min-height:220px;max-height:310px}
.payroll-comparison .insight-heading{flex-wrap:wrap;gap:10px}
@media(max-width:1100px){#page-dashboard .dashboard-visuals{grid-template-columns:repeat(2,minmax(0,1fr))}#page-dashboard .dashboard-visuals>.payroll-comparison{grid-column:1/-1}}
@media(max-width:700px){#page-dashboard .dashboard-visuals{grid-template-columns:1fr}#page-dashboard .dashboard-visuals>.payroll-comparison{grid-column:auto}#page-dashboard .workforce-charts-stack .department-chart{min-height:75px;max-height:220px}}
}

@media screen {
#page-employees .filter-row{display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
#page-employees #emp-search{flex:1 1 300px;min-width:0;max-width:420px!important}
#page-employees #emp-status-filter{flex:0 1 200px;width:200px;min-width:110px}
#emp-company-filter,#pr-company,#ps-company{display:none!important}
#page-payroll .form-group[hidden]{display:none!important}
}

@media screen {
#page-payroll .payroll-period-toolbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 22px}
#page-payroll .payroll-period-toolbar>.card-title{margin:0;white-space:nowrap}
#page-payroll .payroll-period-toolbar>.form-row{display:flex;gap:12px;margin:0}
#page-payroll .payroll-period-toolbar .form-group{margin:0;width:150px}
#page-payroll .payroll-period-toolbar label{margin-bottom:5px}
#page-payroll #payroll-cycle-tabs{display:flex;gap:6px;align-items:center;margin:0 0 0 auto;padding:0;flex-wrap:nowrap}
#page-payroll #payroll-cycle-tabs .btn{white-space:nowrap}
@media(max-width:700px){#page-payroll .payroll-period-toolbar{gap:12px}#page-payroll #payroll-cycle-tabs{margin-left:0;flex-wrap:wrap}#page-payroll .payroll-period-toolbar .form-group{width:130px}}
}

@media screen {#page-leaves .leave-filter-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:center}#page-leaves .leave-filter-toolbar>*{width:100%;min-width:0;margin:0}#ep-absence-history .table-wrap{max-height:260px;overflow:auto}@media(max-width:700px){#page-leaves .leave-filter-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}}}

@media screen {#page-leaves #lv-absence-total{background:#eef4ff;border:1px solid #dce6fb;border-radius:12px;padding:12px 16px;color:#244268;margin-bottom:16px}}

/* Correction preview fits the window; narrow screens use labelled day cards. */
#attendance-correction-modal .modal-body{min-width:0;padding:20px}
#attendance-correction-modal .att-correction-preview{max-height:48vh;overflow-y:auto;overflow-x:hidden}
#attendance-correction-modal .att-correction-preview table{width:100%;min-width:0;table-layout:fixed}
#attendance-correction-modal .att-correction-preview th,#attendance-correction-modal .att-correction-preview td{padding:8px 6px;white-space:normal;overflow-wrap:anywhere}
#attendance-correction-modal .att-correction-preview input,#attendance-correction-modal .att-correction-preview select{width:100%;min-width:0;padding:8px 4px;font-size:12px}
#attendance-correction-modal .att-correction-preview th:nth-child(1){width:5%}
#attendance-correction-modal .att-correction-preview th:nth-child(2){width:16%}
#attendance-correction-modal .att-correction-preview th:nth-child(3){width:11%}
#attendance-correction-modal .att-correction-preview th:nth-child(4),#attendance-correction-modal .att-correction-preview th:nth-child(5){width:13%}
#attendance-correction-modal .att-correction-preview th:nth-child(6){width:6%}
#attendance-correction-modal .att-correction-preview th:nth-child(7){width:26%}
#attendance-correction-modal .att-correction-preview th:nth-child(8){width:10%}
#attendance-correction-modal .att-correction-preview .btn{padding:6px 8px;white-space:normal}
@media(max-width:1050px){
 #attendance-correction-modal .att-correction-preview table,#attendance-correction-modal .att-correction-preview tbody{display:block}
 #attendance-correction-modal .att-correction-preview thead{display:none}
 #attendance-correction-modal .att-correction-preview tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:2px solid var(--border);padding:8px}
 #attendance-correction-modal .att-correction-preview td{display:block;min-width:0}
 #attendance-correction-modal .att-correction-preview td::before{display:block;font-size:10px;font-weight:700;color:var(--text3);margin-bottom:4px}
 #attendance-correction-modal .att-correction-preview td:nth-child(1)::before{content:'Select'}
 #attendance-correction-modal .att-correction-preview td:nth-child(2)::before{content:'Date / shift'}
 #attendance-correction-modal .att-correction-preview td:nth-child(3)::before{content:'Status'}
 #attendance-correction-modal .att-correction-preview td:nth-child(4)::before{content:'Time in'}
 #attendance-correction-modal .att-correction-preview td:nth-child(5)::before{content:'Time out'}
 #attendance-correction-modal .att-correction-preview td:nth-child(6)::before{content:'Hours'}
 #attendance-correction-modal .att-correction-preview td:nth-child(7)::before{content:'Notes / method'}
 #attendance-correction-modal .att-correction-preview td:nth-child(8)::before{content:'History'}
}