/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand · redesign: full · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, existing module geometry and wiring retained */
/* v5.39: payroll-only native date contrast and responsive layout. */
html body #pg-payroll .pr-card{grid-template-columns:minmax(140px,180px) minmax(0,1fr) minmax(145px,auto)!important;gap:20px!important}
html body #pg-payroll .pr-card-mid{display:flex!important;flex-wrap:wrap!important;gap:var(--space-sm)!important;min-width:0!important;align-items:flex-start!important}
html body #pg-payroll .pr-inp-wrap{flex:1 1 88px;min-width:0;gap:var(--space-xs)}
html body #pg-payroll .pr-inp-wrap:has(input[type="date"]){flex:1 1 174px}
html body #pg-payroll .pr-inp-wrap .s-lbl{font-size:12px!important;line-height:1.4!important}
html body #pg-payroll .pr-inp{width:100%!important;min-height:42px!important;box-sizing:border-box!important}
html body #pg-payroll .pr-inp[type="date"]{
  color-scheme:light!important;
  background:var(--color-surface)!important;color:var(--color-ink)!important;-webkit-text-fill-color:currentColor!important;
  border:1px solid var(--color-rule)!important;opacity:1!important;
  width:100%!important;min-width:174px!important;max-width:100%!important;min-height:44px!important;
  padding:var(--space-xs) var(--space-sm)!important;font-size:14px!important;font-weight:700!important;
  text-align:left!important;letter-spacing:normal!important;border-radius:9px!important;
}
html[data-theme="dark"] body #pg-payroll .pr-inp[type="date"]{
  color-scheme:dark!important;background:var(--color-paper-2)!important;
  color:var(--color-ink)!important;-webkit-text-fill-color:currentColor!important;border-color:var(--color-rule)!important;
}
html body #pg-payroll .pr-inp[type="date"]::-webkit-datetime-edit,
html body #pg-payroll .pr-inp[type="date"]::-webkit-datetime-edit-fields-wrapper,
html body #pg-payroll .pr-inp[type="date"]::-webkit-datetime-edit-text,
html body #pg-payroll .pr-inp[type="date"]::-webkit-datetime-edit-day-field,
html body #pg-payroll .pr-inp[type="date"]::-webkit-datetime-edit-month-field,
html body #pg-payroll .pr-inp[type="date"]::-webkit-datetime-edit-year-field{
  color:inherit!important;-webkit-text-fill-color:currentColor!important;opacity:1!important;
}
html body #pg-payroll .pr-inp[type="date"]::-webkit-calendar-picker-indicator{
  filter:none!important;opacity:1!important;cursor:pointer;width:20px;height:20px;margin-left:var(--space-xs);
}
html body #pg-payroll .pr-inp[type="date"]:focus-visible{outline:2px solid var(--color-rule)!important;outline-offset:3px!important}
html[data-theme="dark"] body #pg-payroll .pr-inp-wrap .s-lbl{color:var(--color-success)!important}
html body #pg-payroll .pr-action-btn{min-height:36px!important}
html body #pg-payroll .pr-action-btn[onclick^="prSaveRow"]{background:var(--color-paper-2)!important;color:var(--color-ink)!important;-webkit-text-fill-color:currentColor!important}
html body #pg-payroll .pr-action-btn[onclick^="prPayRow"]{background:var(--color-accent)!important;color:var(--color-accent-ink)!important;-webkit-text-fill-color:currentColor!important}
html body #pg-payroll .pr-action-btn[onclick^="prHapusKaryawan"]{background:var(--color-accent)!important;color:var(--color-accent-ink)!important;-webkit-text-fill-color:currentColor!important}
html body #pg-payroll .pr-actions{flex-wrap:wrap}
@media(max-width:1100px){
  html body #pg-payroll .pr-card{grid-template-columns:minmax(0,1fr) auto!important}
  html body #pg-payroll .pr-card-left{grid-column:1;grid-row:1}
  html body #pg-payroll .pr-card-right{grid-column:2;grid-row:1}
  html body #pg-payroll .pr-card-mid{grid-column:1/-1;grid-row:2}
}
@media(max-width:600px){
  html body #pg-payroll .pr-card{grid-template-columns:minmax(0,1fr)!important;padding:var(--space-md)!important}
  html body #pg-payroll .pr-card-right{grid-column:1;grid-row:3;align-items:flex-start!important;min-width:0!important}
  html body #pg-payroll .pr-card-mid{grid-column:1;grid-row:2}
  html body #pg-payroll .pr-inp-wrap{flex:1 1 calc(50% - 12px)}
  html body #pg-payroll .pr-inp-wrap:has(input[type="date"]){flex-basis:100%}
}