/* HR, payroll and finance controls. Document print windows use app.js docCss(). */
#app :is(#hrStaffForm,#hrPayrollForm,#hrOfferForm,#hrFinanceForm,#hrPolicyForm){min-width:0}
#app :is(#hrStaffForm,#hrPayrollForm,#hrOfferForm,#hrFinanceForm,#hrPolicyForm) .field{min-width:0}
#app :is(#hrStaffForm,#hrPayrollForm,#hrOfferForm,#hrFinanceForm,#hrPolicyForm) :is(input,select,textarea):disabled{background:#f2f5f7;color:#637b8a;cursor:not-allowed}
#app :is(#hrStaffForm,#hrPayrollForm,#hrOfferForm,#hrFinanceForm,#hrPolicyForm) :is(input,select,textarea):focus-visible,
#app .hr-review:focus-within,
#app .hr-checks label:focus-within{outline:2px solid #1688aa;outline-offset:2px}

/* Staff roles and Finance review should read as distinct decisions. */
#app .hr-checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px;padding:17px;border:1px solid #d6e8ef;border-radius:12px;background:#f5fbfd}
#app .hr-checks>b{grid-column:1/-1;color:var(--navy);font-size:14px}
#app .hr-checks label{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid #dceaf0;border-radius:8px;background:#fff;color:#33566b;font-size:13px;line-height:1.4;cursor:pointer}
#app .hr-checks input,#app .hr-review input{accent-color:var(--teal);width:17px;height:17px;flex:none;margin:1px 0 0}
#app .hr-review{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border:1px solid #bedfdc;border-radius:11px;background:#eff9f6;color:#245d57;font-size:13px;font-weight:700;line-height:1.55;cursor:pointer}
#app :is(#hrPayrollForm,#hrOfferForm,#hrPolicyForm) h3{font-size:15px;line-height:1.4;color:var(--navy);margin:24px 0 13px;padding:0 0 8px;border-bottom:1px solid #dce9ee}
#app :is(#hrStaffForm,#hrOfferForm)>.field{margin-top:14px}
#app #hrStaffForm>.field textarea{min-height:92px}
#app #hrOfferForm>.field textarea{min-height:88px;line-height:1.55}
#app #hrOfferForm>.field:has([name="jobScope"]) textarea,
#app #hrOfferForm>.field:has([name="kpi"]) textarea,
#app #hrOfferForm>.field:has([name="otherTerms"]) textarea{min-height:118px}
#app #hrPayrollForm>.field textarea{min-height:86px}
#app #hrPayrollForm+.help-card{margin-top:19px;border-left:4px solid var(--green);font-weight:700}

/* Two rate columns stay aligned with each role at every screen width. */
#app .hr-rate-grid{display:grid;grid-template-columns:minmax(145px,1.15fr) repeat(2,minmax(130px,1fr));gap:10px 14px;align-items:end;min-width:0}
#app .hr-rate-grid>div:first-child{min-height:1px}
#app .hr-rate-grid>b{align-self:stretch;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 8px;border-radius:8px;background:#e8f4f8;color:#155d79;font-size:12px}
#app .hr-rate-grid>span{align-self:center;color:#284d61;font-size:13px;font-weight:800;line-height:1.3}
#app .hr-rate-grid>.field{margin:0}
#app .hr-rate-grid>.field>span{font-size:11px}
#app .hr-rate-grid>.field input{text-align:right;font-variant-numeric:tabular-nums}
#app #hrPolicyForm>.form-grid:first-child{max-width:390px}

/* Larger Finance tables scroll within their card, without widening the page. */
#app:has(#hrFinanceForm) .table-wrap .table{min-width:1050px}
#app .hr-finance-new-category{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;padding:12px;border:1px solid #cce4ed;border-radius:10px;background:#f4fafc}
#app .hr-finance-new-category[hidden]{display:none}
#app .hr-finance-new-category>.field{flex:1}
#app .hr-finance-new-category>.btn{flex:none}
#app .hr-finance-commitment{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid #cce4ed;border-radius:10px;background:#f4fafc}
#app .hr-finance-commitment[hidden],#app #hrFinanceNewCommitment[hidden]{display:none}
#app .hr-finance-part-fields,#app .hr-finance-proof{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;border:1px solid #cce4ed;border-radius:10px;background:#f4fafc}
#app .hr-finance-part-fields[hidden],#app #hrFinanceNewPart[hidden]{display:none}
#app .hr-finance-part-fields .hint,#app .hr-finance-proof .hint,#app .hr-finance-proof .field-label{grid-column:1/-1;margin:0}
#app .hr-finance-proof .form-grid{grid-column:1/-1}
#app #hrFinanceNewCommitment{display:contents}
#app:has(#hrOfferForm) .table-wrap .table{min-width:690px}
#app:has(#hrPayrollStaff) .table-wrap .table{min-width:700px}
#app:has(#hrStaffForm) .table-wrap .table{min-width:820px}
#app :is(#hrPayrollForm,#hrOfferForm) .form-actions{padding-top:3px}
#app :is(#hrPayrollForm,#hrOfferForm) .form-actions .btn{min-height:40px}
#app:has(#hrStaffForm) .table td,
#app:has(#hrFinanceForm) .table td{line-height:1.5}

#app .hr-letter-entry .card-body p{margin:0;color:#527185;font-size:13px;line-height:1.6}
#app .hr-letter-fields[hidden]{display:none}
#app .hr-letter-fields>.field{margin-top:14px}
#app .hr-letter-fields .hint{margin:0 0 15px}
#app #hrLetterForm>.form-actions{padding-top:4px}

@media (max-width:600px){#app .hr-finance-new-category{flex-direction:column;align-items:stretch}#app .hr-finance-commitment,#app .hr-finance-part-fields,#app .hr-finance-proof{grid-template-columns:1fr}#app #hrFinanceNewCommitment{display:grid;gap:12px}}
@media (max-width:600px){#app .hr-letter-entry .form-actions .btn{flex:1 1 100%;white-space:normal;text-align:center}#app #hrLetterForm .form-grid{grid-template-columns:1fr}}

@media (min-width:1100px){
  #app:has(#hrStaffForm) .grid.stats,
  #app:has(#hrPayrollStaff) .grid.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:790px){
  #app .hr-rate-grid{grid-template-columns:minmax(104px,1fr) repeat(2,minmax(105px,1fr));gap:8px}
  #app .hr-rate-grid>b{font-size:11px}
  #app .hr-rate-grid>span{font-size:12px}
  #app .hr-checks{grid-template-columns:repeat(2,minmax(0,1fr));padding:13px}
}
@media (max-width:530px){
  #app .hr-checks{grid-template-columns:1fr}
  #app .hr-rate-grid{display:grid;grid-template-columns:minmax(70px,1fr) repeat(2,minmax(70px,1fr));gap:6px}
  #app .hr-rate-grid>b{padding:8px 4px;font-size:10px;line-height:1.25}
  #app .hr-rate-grid>span{font-size:11px;overflow-wrap:anywhere}
  #app .hr-rate-grid>.field>span{font-size:10px;letter-spacing:0}
  #app .hr-rate-grid>.field input{padding:8px 5px;font-size:13px;min-height:37px}
  #app .hr-review{padding:12px;font-size:12px}
  #app :is(#hrPayrollForm,#hrOfferForm) .form-actions .btn{white-space:normal;text-align:center;flex:1 1 150px}
}

/* Direct browser print remains legible; payslip and offer popups carry their own A4 CSS. */
@media print{
  .sidebar,.topbar,.toast,#app .form-actions,#app .btn{display:none!important}
  .app-shell,.main-shell{display:block!important;min-height:0!important}
  #app .page{max-width:none;padding:0!important}
  #app .card{box-shadow:none;break-inside:avoid;border-color:#b9cbd5}
  #app .table-wrap{overflow:visible}
  #app .table{min-width:0!important}
  #app .hr-checks,#app .hr-review{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}