/* Readable popup workspace; scoped to HR only. */
.hr-att-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:18px 0}.hr-att-summary article{border:1px solid #e2e8f0;border-radius:12px;padding:16px;background:#f8fafc}.hr-att-summary span,.hr-att-summary strong{display:block}.hr-att-summary span{color:#475569;font-size:14px}.hr-att-summary strong{font-size:19px;margin-top:8px}.hr-att-status{display:inline-block;border-radius:20px;background:#f1f5f9;padding:5px 10px;white-space:nowrap;font-weight:800}.hr-att-row-absent .hr-att-status,.hr-att-row-missing_checkout .hr-att-status{background:#ffe4e6;color:#9f1239}.hr-att-row-late .hr-att-status{background:#fef3c7;color:#92400e}.hr-att-row-complete .hr-att-status{background:#dcfce7;color:#166534}.hr-att-row-leave .hr-att-status{background:#e0e7ff;color:#3730a3}.hr-att-row-working .hr-att-status{background:#cffafe;color:#155e75}
@media print{.hr-print-slip{break-after:page}.hr-print-slip:last-child{break-after:auto}}
.hr-payroll-header{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.hr-payroll-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hr-payroll-summary article{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:18px}
.hr-payroll-summary span,.hr-payroll-summary strong{display:block}.hr-payroll-summary strong{font-size:22px;margin-top:8px}.hr-payroll-summary span{color:#475569;font-weight:700}
.hr-payroll-summary .hr-net-card{background:#f0fdf4;border-color:#bbf7d0;color:#14532d}
.hr-payroll-steps{list-style:none;padding:0;display:flex;gap:12px;margin:20px 0}.hr-payroll-steps li{flex:1;padding:12px;background:#f1f5f9;color:#475569;border-radius:10px;font-weight:800}.hr-payroll-steps .is-current{background:#fff1f2;color:#9f1239;box-shadow:inset 0 0 0 1px #fecdd3}
.hr-payroll-alert{padding:14px;border-radius:12px;border:1px solid #fcd34d;background:#fffbeb;color:#92400e;font-weight:800}.hr-payroll-incomplete{background:#fffbeb}.hr-workspace .hr-table small.hr-warning{color:#be123c}
.hr-posted-banner{display:flex;gap:16px;justify-content:space-between;background:#f0fdf4;color:#14532d;border:1px solid #bbf7d0;padding:16px;border-radius:12px;margin:16px 0}
.hr-payroll-policy{margin-top:18px;color:#475569;padding:12px;background:#f8fafc;border-radius:12px}.hr-payroll-policy summary{font-weight:800;cursor:pointer}
@media(max-width:760px){.hr-payroll-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-payroll-summary strong{font-size:18px}.hr-payroll-steps{flex-direction:column}.hr-posted-banner{flex-direction:column}}
.hr-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;border-bottom:1px solid #e2e8f0;padding-bottom:12px}
.hr-tabs .is-selected{background:#be123c;color:white;border-color:#be123c}
.hr-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hr-summary article{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px}
.hr-summary span,.hr-summary strong{display:block}.hr-summary span{color:#475569}.hr-summary strong{font-size:19px}
.hr-warning{color:#be123c}.hr-result-count{color:#475569;font-weight:800}
.hr-filters>label{flex:1;min-width:180px}.hr-workspace [hidden]{display:none!important}
.hr-form-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid #e2e8f0;padding:12px 0;z-index:2}
@media(max-width:600px){.hr-summary{grid-template-columns:1fr}.hr-tabs .hr-button{flex:1}}
html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace){align-items:center!important;padding:20px!important}
html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .detail-modal-card{min-height:0!important;height:auto!important;max-height:88vh!important;width:min(1180px,94vw)!important;max-width:94vw!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:20px!important}
html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .detail-modal-body{min-height:0!important;height:auto!important;max-height:calc(88vh - 100px)!important;overflow:auto!important;flex:0 1 auto!important}
html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .erp-detail-frame,html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .erp-detail-content{min-height:0!important;height:auto!important;overflow:visible!important}
.hr-workspace{width:min(1100px,86vw);max-width:100%;color:#0f172a;line-height:1.65}
.hr-workspace .hr-table{max-height:55vh;border-radius:14px}
.hr-workspace .hr-table th{background:#f1f5f9;color:#1e293b}
.hr-workspace .hr-table td{font-size:14px}
.hr-workspace .hr-table small{display:block;color:#64748b;font-size:12px}
.hr-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0}
.hr-button{border:1px solid #dbe3ee;border-radius:10px;background:#fff;color:#0f172a;padding:9px 15px;cursor:pointer;font:inherit;font-weight:800;white-space:nowrap}
.hr-button.primary-button{background:#be123c;color:white;border-color:#be123c}
.hr-button:disabled{opacity:.5;cursor:wait}
.hr-workspace label{display:grid;gap:6px;font-weight:800;font-size:14px}
.hr-workspace input:not([type=checkbox]),.hr-workspace select{width:100%;min-width:0;box-sizing:border-box;background:#fff;color:#0f172a;border:1px solid #cbd5e1;border-radius:10px;padding:10px;font:inherit}
.hr-workspace input:focus,.hr-workspace select:focus{outline:2px solid #fecdd3;border-color:#be123c}
.hr-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hr-section-heading{font-size:18px;font-weight:900;margin:20px 0 12px;padding-bottom:8px;border-bottom:1px solid #e2e8f0}
.hr-checkbox{display:flex!important;align-items:center;gap:8px!important;cursor:pointer}
.hr-checkbox input{width:18px;height:18px;accent-color:#be123c}
.hr-days{display:flex;gap:16px;flex-wrap:wrap}
.hr-help{color:#475569;font-size:14px;padding:12px 14px;background:#f8fafc;border-radius:12px;margin:12px 0}
.hr-total{font-size:21px;font-weight:900;background:#f0fdf4;color:#14532d;border-radius:12px;padding:16px;margin-top:16px}
.hr-status{background:#eef2ff;color:#3730a3;padding:8px 14px;border-radius:30px;font-weight:800}
.hr-empty{text-align:center!important;color:#64748b;padding:32px!important}
html body #hrPage .hr-hub-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:16px!important}
html body #hrPage .hr-hub-grid .app-card{background:#fff!important;color:#0f172a!important;border:1px solid #dbe3ee!important;border-top:4px solid #be123c!important;min-height:140px!important;padding:28px 18px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;box-shadow:0 8px 24px #0f172a0a!important;cursor:pointer}
html body #hrPage .hr-hub-grid .app-card h2{color:#0f172a!important;font-size:21px!important;font-weight:900!important;text-shadow:none!important;width:100%!important;padding:0!important;margin:0 0 8px!important;white-space:normal!important;text-align:center!important;line-height:1.5!important}
html body #hrPage .hr-hub-grid .app-card p{color:#475569!important;padding:0!important;text-shadow:none!important;text-align:center!important;font-size:14px!important}
html body #hrPage .hr-hub-grid .app-card h2::before,html body #hrPage .hr-hub-grid .app-card h2::after,html body #hrPage .hr-hub-grid .app-card .app-image,html body #hrPage .hr-hub-grid .app-card .app-icon{display:none!important}
@media(max-width:760px){.hr-workspace{width:88vw}.hr-form-grid{grid-template-columns:1fr}.hr-workspace .hr-table th,.hr-workspace .hr-table td{min-width:90px;padding:10px}}
@media print{body:has(#hrPrintArea) *{visibility:hidden!important}body:has(#hrPrintArea) #hrPrintArea,body:has(#hrPrintArea) #hrPrintArea *{visibility:visible!important}#hrPrintArea{position:absolute!important;inset:0!important;width:100%!important;background:white!important;color:black!important}#hrPrintArea .hr-table{overflow:visible!important;max-height:none!important}#hrPrintArea th{position:static!important}.hr-no-print{display:none!important}}
@media print{
  body:has(#hrPrintArea)>:not(#detailModal){display:none!important}
  body:has(#hrPrintArea) #detailModal,body:has(#hrPrintArea) #detailModal .detail-modal-card,body:has(#hrPrintArea) #detailModal .detail-modal-body,body:has(#hrPrintArea) #detailModal .erp-detail-frame,body:has(#hrPrintArea) #detailModal .erp-detail-content,body:has(#hrPrintArea) #detailModal .hr-workspace{position:static!important;display:block!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;padding:0!important;margin:0!important;transform:none!important;border:0!important;box-shadow:none!important;background:white!important}
  body:has(#hrPrintArea) #detailModal .section-title-row{display:none!important}
  body:has(#hrPrintArea) #hrPrintArea{position:static!important}
  #hrPrintArea table{break-inside:auto}#hrPrintArea tr{break-inside:avoid}
}

/* All HR dialogs fill the viewport; print layouts retain their own sizing. */
@media screen {
 html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) {
  position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;display:flex!important;align-items:stretch!important;justify-content:stretch!important;overflow:hidden!important;
 }
 html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .detail-modal-card {
  width:100%!important;max-width:none!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;padding:20px!important;overflow:hidden!important;
 }
 html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .section-title-row {flex:0 0 auto!important;}
 html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .detail-modal-body {
  flex:1 1 auto!important;width:100%!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:auto!important;box-sizing:border-box!important;
 }
 html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .hr-workspace {width:100%!important;max-width:none!important;box-sizing:border-box!important;}
 html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .hr-table {max-height:none!important;}
 @media(max-width:760px) {html body #detailModal.detail-modal[role="dialog"]:not(.is-hidden):has(.hr-workspace) .detail-modal-card{padding:10px!important;}}
}

/* Search and quick navigation stay scoped to the HR workspace. */
#hrPage .hr-hub-tools{margin:20px 0;padding:18px;border:1px solid #dbe4ef;background:#fff;border-radius:16px;display:flex;align-items:center;flex-wrap:wrap;gap:14px}
#hrPage .hr-hub-tools label{display:flex;flex-direction:column;gap:6px;min-width:240px;font-weight:800;color:#172033}
#hrPage .hr-hub-tools input{padding:10px 12px;border:1px solid #dbe4ef;border-radius:10px;background:#f8fafc;color:#172033;font:inherit}
#hrPage .hr-hub-categories{display:flex;flex-wrap:wrap;gap:8px;flex:1}
#hrPage .hr-hub-count{display:flex;align-items:center;gap:12px;width:100%;font-size:14px;color:#475569}
#hrPage .hr-hub-tools .hr-button{padding:9px 13px;cursor:pointer;border:1px solid #dbe4ef;border-radius:10px;color:#172033;background:#fff;font:inherit;font-weight:800}
#hrPage .hr-hub-tools .is-selected{background:#fff1f2;border-color:#be123c;color:#9f1239}
#hrPage .hr-hub-grid [data-hr-app][hidden]{display:none!important}
.hr-workspace .hr-quick-nav{position:sticky;top:0;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 12px;margin:0 0 18px;border:1px solid #dbe4ef;border-radius:12px;background:#fff;box-shadow:0 3px 12px #0f172a08}
.hr-workspace .hr-quick-nav label{display:flex;align-items:center;gap:8px;font-weight:800;color:#172033}
.hr-workspace .hr-quick-nav select{min-width:190px;max-width:100%;padding:8px;border:1px solid #dbe4ef;border-radius:8px;background:#f8fafc;color:#172033;font:inherit}
.hr-workspace .hr-quick-month{font-size:13px;color:#475569;margin-inline-start:auto}
@media(max-width:600px){#hrPage .hr-hub-tools label{width:100%;min-width:0}.hr-workspace .hr-quick-nav label{width:100%}.hr-workspace .hr-quick-nav select{flex:1;min-width:0}.hr-workspace .hr-quick-month{margin-inline-start:0}}