/* Extra work only; existing checklist cards and navigation are unchanged.
   The fields use the same blue-header-over-white-body card as the Access tab,
   so this screen belongs to the app rather than looking like a bolted-on form. */
#pvsExtraWorkScreen { padding:20px 14px calc(var(--pvs-bottom-nav-space,76px) + 24px); background:var(--main-bg,#f8f5ef); min-height:60vh; }
#pvsExtraWorkScreen[hidden] { display:none !important; }
#pvsExtraWorkStore { font-weight:800; font-size:20px; color:var(--navy,#0d1627); margin:0 0 6px; }
#pvsExtraWorkScreen p { line-height:1.5; overflow-wrap:anywhere; }
#pvsExtraWorkScreen .pvs-extra-help { font-size:14px; color:var(--grey,#64748b); margin:0 0 18px; }

#pvsExtraWorkScreen .pvs-extra-field {
  background:var(--white,#fff);
  border:2px solid #172235;
  border-radius:16px;
  box-shadow:5px 6px 0 rgba(23,34,53,.18);
  overflow:hidden;
  margin:0 0 18px;
}
#pvsExtraWorkScreen .pvs-extra-field > strong {
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:11px 14px;
  background:#3099ef;
  color:#fff;
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
#pvsExtraWorkScreen .pvs-extra-field > strong span { font-weight:600; letter-spacing:.04em; opacity:.92; }
#pvsExtraWorkScreen .pvs-extra-field-body { padding:14px; }

/* The header carries the visible label, so the field's own label is for
   screen readers only rather than repeated on screen. */
#pvsExtraWorkScreen .pvs-extra-sr {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
#pvsExtraWorkForm input, #pvsExtraWorkForm textarea {
  box-sizing:border-box; width:100%; padding:12px;
  border:1px solid #94a3b8; border-radius:10px;
  font:inherit; font-size:16px; color:var(--navy,#0d1627); background:#fff;
}
#pvsExtraWorkForm textarea { resize:vertical; }
#pvsExtraWorkForm :focus-visible, #pvsTab-extra-work:focus-visible { outline:3px solid #3099ef; outline-offset:3px; }
/* Its own class, not the checklist's .pvs-end-submit: that one is hidden by
   #pvsApp.pvs-view-only, which is how an Admin uses the app, and recording extra
   work is exactly something an Admin does. Styled to match the app's own primary
   buttons — bright blue, navy border, offset shadow. */
#pvsExtraWorkSave, #pvsExtraWorkScreen .pvs-extra-submit {
  display:block; width:100%; margin-top:4px;
  background:#3099ef; color:#fff;
  border:2px solid #172235; border-radius:14px;
  font-family:inherit; font-weight:800; font-size:.95rem;
  padding:15px 16px; cursor:pointer;
  box-shadow:4px 5px 0 rgba(13,22,39,.90), 0 5px 12px rgba(38,95,148,.20);
}
#pvsExtraWorkScreen .pvs-extra-submit:hover:not(:disabled) { background:#2589db; }
#pvsExtraWorkScreen .pvs-extra-submit:active:not(:disabled) { transform:translate(2px,2px); box-shadow:2px 3px 0 rgba(13,22,39,.90); }
#pvsExtraWorkSave:disabled { opacity:.6; cursor:wait; }
#pvsExtraWorkStatus { margin:14px 0 0; font-size:14px; }

#pvsExtraWorkSaved:empty { display:none; }
#pvsExtraWorkSaved { margin-top:22px; }
.pvs-extra-saved-list { margin:0; padding:0; list-style:none; }
.pvs-extra-saved-list li {
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid rgba(13,22,39,.10);
}
.pvs-extra-saved-list li:last-child { border-bottom:0; }
.pvs-extra-saved-title { font-weight:600; color:var(--navy,#0d1627); overflow-wrap:anywhere; }
.pvs-extra-saved-date { font-size:13px; color:var(--grey,#64748b); white-space:nowrap; }

#pvsTab-extra-work { min-width:0; }
#pvsTab-extra-work span { white-space:normal; }
@media(max-width:360px) { #pvsExtraWorkScreen .pvs-extra-field-body { padding:12px; } }

.pvs-extra-note { margin:8px 0 0; font-size:12.5px; line-height:1.4; color:var(--grey,#64748b); }
#pvsExtraWorkDate { display:block; max-width:220px; margin-inline:auto; text-align:center; }