/* Party hire (crew): the staff app's styles for public/js/views/hire-crew.js. Phone first: the set-up and
   collection checks are done standing on a lawn, so big tap targets and full-screen dialogs on a phone. */

.hire-crew-form h3 { margin: 6px 0 0; font-size: 15px; }
.hire-crew-checks { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hire-crew-checks label.check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border-bottom: 1px solid var(--border); line-height: 1.35; }
.hire-crew-checks label.check:last-child { border-bottom: 0; }
.hire-crew-checks label.check:has(input:checked) { background: var(--ok-soft); }
.hire-crew-checks input[type="checkbox"], .hire-crew-checks input[type="radio"] { width: 24px; height: 24px; flex: none; margin: 0; }

.hire-crew-photos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hire-crew-camera { min-height: 48px; padding-inline: 18px; }
.hire-crew-uploading { width: 84px; height: 64px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }

.hire-crew-sign { display: flex; flex-direction: column; gap: 6px; }
.hire-crew-pad { width: 100%; height: 180px; background: #fff; border: 2px dashed var(--border); border-radius: var(--radius); touch-action: none; cursor: crosshair; }

.hire-crew-go { min-height: 44px; }

/* The records on the booking's page. */
.hire-crew-record { padding: 12px 0; border-top: 1px solid var(--border); }
.hire-crew-record:first-child { border-top: 0; padding-top: 0; }
.hire-crew-record p { margin: 6px 0; }
.hire-crew-ticks { list-style: none; margin: 8px 0; padding: 0; }
.hire-crew-ticks li { display: flex; gap: 8px; padding: 3px 0; }
.hire-crew-ticks li.ok > span:first-child { color: var(--ok); font-weight: 700; }
.hire-crew-ticks li.no { color: var(--warn); font-weight: 600; }
.hire-crew-thumb { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.hire-crew-thumb img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.hire-crew-signed { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.hire-crew-signed img { width: 260px; max-width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.hire-crew-full { width: 100%; height: auto; display: block; border-radius: 8px; }

/* On a phone the checks fill the screen, with the buttons in easy reach. */
@media (max-width: 640px) {
  dialog:has(.hire-crew-form) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  dialog:has(.hire-crew-form) form { height: 100%; max-height: 100dvh; }
  dialog:has(.hire-crew-form) .content { flex: 1; }
  dialog:has(.hire-crew-form) footer .btn { min-height: 48px; }
  dialog:has(.hire-crew-form) footer .btn.primary { flex: 1; }
}

@media print {
  .hire-crew-thumb img { width: 72px; height: 54px; }
}