/* Photos, QR and page scanning, the Employee Sample Record, and printing.
   The ESR form keeps the old twin's paper dimensions (styles.css 4928–5450)
   so the screen and the printed A5 match. */

.visually-hidden-file-input {
  position: fixed; left: -10000px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* --- Line buttons (the day's tools are on its toolbar, day.css) ------------------- */
/* A line's tool button (one tool at a time): photos blue, ESR a round black
   ESR symbol, links orange (day.css). */
.photo-row-btn, .esr-row-btn, .link-row-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-height: 0; width: 2rem; height: 2rem; padding: 0; border-radius: 999px;
}
.photo-row-btn .icon, .esr-row-btn .icon, .link-row-btn .icon { width: 1.1rem; height: 1.1rem; }
.photo-row-btn { background: #dbeafe; color: #1d4ed8; }
.photo-row-btn.has-photos { background: #2563eb; color: #fff; }
.esr-row-btn { background: #0f172a; color: #fff; }
.esr-row-btn.has-esr::after {
  content: ""; position: absolute; right: -.1rem; top: -.1rem; width: .6rem; height: .6rem;
  border-radius: 999px; background: #22c55e; border: 2px solid #fff;
}
.photo-count {
  position: absolute; right: -.25rem; top: -.25rem; min-width: 1rem; height: 1rem; padding: 0 .2rem;
  border-radius: 999px; background: #0f766e; color: #fff; font-size: .62rem; line-height: 1rem;
}
.row-no-inner { flex-wrap: wrap; }
input.qr-scan-target { border-color: #60a5fa; background: #eff6ff; cursor: pointer; caret-color: transparent; }

/* --- Photo dialog and viewer ------------------------------------------------------- */
.photo-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.photo-choice {
  flex-direction: column; align-items: flex-start; gap: .15rem; padding: .7rem .8rem;
  background: #f8fafc; color: var(--text); border: 1px solid var(--border); text-align: left;
}
.photo-choice span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.photo-choice.has-photo { border-color: #5eead4; background: #f0fdfa; }
.photo-extra-row { margin-bottom: .75rem; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.photo-preview-item {
  flex-direction: column; align-items: stretch; gap: .2rem; padding: .35rem; text-align: left;
  background: #fff; color: var(--text); border: 1px solid var(--border); font-size: .8rem;
}
.photo-preview-item span { color: var(--muted); font-weight: 500; font-size: .75rem; }
.photo-frame { position: relative; display: grid; place-items: center; background: #f1f5f9; border-radius: .5rem; overflow: hidden; }
.photo-frame img { display: block; max-width: 100%; }
.photo-frame.is-loading::after { content: "Loading…"; position: absolute; color: var(--muted); font-size: .8rem; }
.photo-missing { padding: 1rem; color: var(--muted); font-size: .8rem; text-align: center; }
.photo-thumb-frame { aspect-ratio: 4 / 3; }
.photo-thumb { width: 100%; height: 100%; object-fit: cover; }
.photo-full-frame { max-height: 65vh; }
.photo-full { max-height: 65vh; object-fit: contain; }
.app-dialog.photo-viewer-dialog { width: min(96vw, 900px); }
.photo-viewer-actions { margin-top: .6rem; }

/* --- QR and page scanners ---------------------------------------------------------------- */
.qr-frame, .scanner-stage { position: relative; background: #020617; border-radius: .7rem; overflow: hidden; }
.qr-video, .scanner-video { display: block; width: 100%; max-height: 60vh; object-fit: cover; }
.qr-guide {
  position: absolute; left: 50%; top: 50%; width: min(70%, 18rem); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 3px solid #fff; border-radius: .6rem; box-shadow: 0 0 0 100vmax rgba(2, 6, 23, .35);
}
.scanner-status { margin: .6rem 0 0; font-weight: 600; }
.app-dialog.page-scanner-dialog { width: min(96vw, 760px); }
.scanner-status-row { margin-bottom: .5rem; }
.scanner-pill { background: #eef2ff; border-color: #c7d2fe; color: var(--switch); }
.scanner-panel { display: grid; gap: .6rem; }
.scanner-panel h3 { margin: 0; }
.a5-guide {
  position: absolute; left: 50%; top: 50%; width: min(60%, 260px); aspect-ratio: 148 / 210; transform: translate(-50%, -50%);
  border: 2px dashed rgba(255, 255, 255, .9); border-radius: .3rem; display: grid; place-items: end center;
}
.a5-guide span { margin-bottom: .4rem; color: #fff; font-size: .75rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.scanner-edit-frame { width: 100%; }
.scanner-edit-canvas { display: block; width: 100%; touch-action: none; border-radius: .6rem; background: #020617; }
.scanner-result-frame { display: grid; place-items: center; background: #f1f5f9; border-radius: .6rem; padding: .5rem; }
.scanner-result-canvas { max-width: 100%; max-height: 55vh; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .15); }
.scanner-presets .segment { border: 0; border-radius: 0; min-height: 36px; }
.segmented-links button.segment { background: #fff; color: var(--text); border-radius: 0; }
.segmented-links button.segment.is-current { background: var(--header); }

/* --- ESR dialog ------------------------------------------------------------------------ */
.app-dialog.esr-dialog { width: min(98vw, 1260px); }
.esr-tabs { margin-bottom: .6rem; }
.esr-body { overflow: auto; max-height: 72vh; }
.esr-actions { margin-bottom: .6rem; }
.esr-scan-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.esr-scan-page {
  flex-direction: column; align-items: stretch; gap: .4rem; padding: .6rem; text-align: left;
  background: #f8fafc; color: var(--text); border: 1px solid var(--border);
}
.esr-scan-page.has-scan { border-color: #163a5f; }
.esr-scan-empty, .esr-scan-thumb-frame {
  display: grid; place-items: center; aspect-ratio: 148 / 210; background: #e2e8f0; border-radius: .4rem; color: var(--muted);
}
.esr-scan-thumb { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* Safari before 15 (iPadOS 14) has no aspect-ratio: the guides keep their
   shape through padding (a percentage of the same width), the frames get a
   height of their own. */
@supports not (aspect-ratio: 1) {
  .qr-guide { height: 0; padding-top: min(70%, 18rem); }
  .a5-guide { height: 0; padding-top: calc(min(60%, 260px) * 210 / 148); }
  .photo-thumb-frame { height: 6.5rem; }
  .esr-scan-empty, .esr-scan-thumb-frame { height: 14rem; }
}
.sesr-sheets { display: flex; gap: 6mm; justify-content: center; padding: 2mm; }

/* --- The A5 twin (screen and print) ----------------------------------------------------- */
.sesr-twin { --line: #263849; --dsrs-navy: #163a5f; --dsrs-light: #e8f3fb; --twin-muted: #5f6b7a; --tech: #eeeeee; }
.sesr-page {
  flex: 0 0 auto; width: 148.5mm; height: 210mm; padding: 4.2mm 4.8mm 3.8mm; background: #fff; color: #111827;
  box-shadow: 0 12px 38px rgba(15, 23, 42, .18); font-family: Arial, Helvetica, sans-serif; line-height: 1.2; overflow: hidden;
}
.sesr-twin .record { height: 100%; display: flex; flex-direction: column; border: .35mm solid var(--line); background: #fff; }
.sesr-twin .record-head { display: grid; grid-template-columns: 1fr 33mm; min-height: 11mm; }
.sesr-twin .record-title { padding: 1.4mm 2mm .5mm; font-size: 10.5pt; font-weight: 800; color: var(--dsrs-navy); text-transform: uppercase; line-height: 1.1; }
.sesr-twin .record-subtitle { padding: 0 2mm 1mm; font-size: 4.8pt; font-weight: 700; color: var(--twin-muted); }
.sesr-twin .record-meta { display: grid; grid-template-rows: 1fr 1fr; border-left: .25mm solid var(--line); font-size: 5.6pt; }
.sesr-twin .record-meta .twin-cell { padding: 1.2mm 1.4mm .8mm; }
.sesr-twin .record-meta .twin-label { color: var(--dsrs-navy); text-transform: uppercase; }
.sesr-twin .twin-band {
  padding: 1.05mm 1.5mm .7mm; background: var(--dsrs-light); border-top: .28mm solid var(--line); border-bottom: .28mm solid var(--line);
  font-size: 6.1pt; line-height: 1; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: .1pt;
}
.sesr-twin .twin-cell { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3mm .8mm; min-width: 0; }
.sesr-twin .twin-label { flex: 0 0 auto; font-weight: 800; text-transform: uppercase; color: #111827; letter-spacing: 0; font-size: inherit; display: inline; }
.sesr-twin .twin-hint { font-size: 4.65pt; font-weight: 700; color: var(--twin-muted); text-transform: none; }
.sesr-twin label { display: inline-flex; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
.sesr-twin .twin-in, .sesr-twin .twin-area {
  flex: 1 1 40%; min-width: 9mm; width: 100%; margin: 0; padding: 0 .3mm; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; font: inherit; color: #111827; min-height: 0; outline: none;
}
.sesr-twin .twin-in:focus, .sesr-twin .twin-area:focus { background: #fff6c9; box-shadow: none; }
.sesr-twin .twin-in.short { flex: 0 0 12mm; width: 12mm; }
.sesr-twin .twin-in.centre { text-align: center; }
.sesr-twin .twin-value { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.sesr-twin .twin-box {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; display: inline-block; width: 3.15mm; height: 3.15mm; margin: 0;
  padding: 0; border: .34mm solid var(--line); border-radius: 0; background: #fff; vertical-align: -.6mm; cursor: pointer; min-height: 0;
}
.sesr-twin .twin-box:checked, .sesr-twin .twin-box.is-checked { background: var(--dsrs-navy); box-shadow: inset 0 0 0 .35mm #fff; }
.sesr-twin .twin-opt { align-items: center; gap: .4mm; font-weight: 800; white-space: nowrap; }
.sesr-twin .twin-inline, .sesr-twin .twin-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5mm 1.2mm; }
.sesr-twin .twin-other { display: inline-flex; align-items: baseline; gap: .6mm; font-weight: 800; flex: 1 1 14mm; }
.sesr-twin .employee-grid { display: grid; grid-template-columns: 1.55fr .63fr .74fr; border-bottom: .25mm solid var(--line); }
.sesr-twin .employee-grid > .twin-cell {
  min-height: 7.1mm; padding: 1mm 1.15mm .65mm; border-right: .25mm solid var(--line); border-bottom: .25mm solid var(--line); font-size: 5.7pt; line-height: 1.1;
}
.sesr-twin .employee-grid > .twin-cell:nth-child(3n), .sesr-twin .employee-grid > .twin-cell:nth-child(8), .sesr-twin .employee-grid > .twin-cell:last-child { border-right: 0; }
.sesr-twin .employee-grid > .twin-cell:nth-last-child(-n+2) { border-bottom: 0; }
.sesr-twin .span-2 { grid-column: span 2; }
.sesr-twin table.activity { flex: 1 1 auto; border-collapse: collapse; width: 100%; min-width: 0; table-layout: fixed; }
.sesr-twin .activity th, .sesr-twin .activity td { border: .25mm solid var(--line); padding: .2mm .4mm; vertical-align: middle; font-size: 5.55pt; line-height: 1.15; }
.sesr-twin .activity th { background: var(--dsrs-light); text-transform: uppercase; font-weight: 800; text-align: center; height: 6.8mm; font-size: 5.35pt; }
.sesr-twin .activity td { height: 8.8mm; }
.sesr-twin .activity .tick-cell { text-align: center; font-size: 5.15pt; }
.sesr-twin .ppe-detail { display: grid; grid-template-columns: 1.45fr 1fr 1.1fr .45fr; min-height: 14mm; }
.sesr-twin .ppe-detail > div { border-right: .25mm solid var(--line); padding: 1mm 1.15mm .8mm; font-size: 5.35pt; line-height: 1.25; flex-direction: column; align-items: stretch; }
.sesr-twin .ppe-detail > div:last-child { border-right: 0; justify-content: center; align-items: center; }
.sesr-twin .ppe-detail .twin-wrap { justify-content: center; margin-top: .9mm; font-size: 5pt; }
.sesr-twin .none-worn .twin-opt { flex-direction: column; font-size: 5.8pt; }
.sesr-twin .twin-opt.big .twin-box { width: 4.1mm; height: 4.1mm; border-width: .4mm; }
.sesr-twin .twin-question {
  display: grid; grid-template-columns: 1fr 24mm; min-height: 6.2mm; border-top: .25mm solid var(--line); font-size: 5.45pt; line-height: 1.08;
}
.sesr-twin .twin-question > span:first-child { padding: 1mm 1.15mm .7mm; font-weight: 800; text-transform: uppercase; }
.sesr-twin .twin-yesno { border-left: .25mm solid var(--line); display: flex; align-items: center; justify-content: center; gap: 1.3mm; }
.sesr-twin .record-foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 1mm 1.4mm; border-top: .25mm solid var(--line); font-size: 5.3pt; font-weight: 800;
}
.sesr-twin .record-foot .twin-cell { flex: 0 1 50%; }
.sesr-twin .conditions { display: grid; grid-template-columns: 29mm 1fr; border-bottom: .25mm solid var(--line); }
.sesr-twin .condition-label, .sesr-twin .condition-body { min-height: 15mm; padding: .75mm 1.15mm .55mm; font-size: 5.45pt; line-height: 1.12; }
.sesr-twin .condition-label { background: var(--dsrs-light); font-weight: 800; text-transform: uppercase; display: flex; align-items: center; }
.sesr-twin .condition-body { border-left: .25mm solid var(--line); display: grid; grid-template-columns: 16mm 1fr; gap: 1.6mm; }
.sesr-twin .condition-options { display: flex; flex-direction: column; justify-content: center; gap: 1.2mm; font-size: 5.2pt; }
.sesr-twin .condition-options .twin-box { width: 3.4mm; height: 3.4mm; }
.sesr-twin .condition-write { display: flex; flex-direction: column; min-width: 0; border-left: .25mm dashed #b9c2cc; padding-left: 1.8mm; }
.sesr-twin .condition-write .twin-in { font-size: 5pt; }
.sesr-twin .heavy-line { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5mm; margin-top: auto; padding-top: .8mm; font-size: 5pt; }
.sesr-twin .sign-off-text { margin: 0; padding: 1.15mm 2mm .9mm; text-align: center; font-size: 6.15pt; line-height: 1.18; }
.sesr-twin .twin-row { display: grid; border-top: .25mm solid var(--line); border-bottom: .25mm solid var(--line); }
.sesr-twin .twin-row.two { grid-template-columns: 1fr 1fr; }
.sesr-twin .twin-row.three { grid-template-columns: 1fr 1fr 1fr; }
.sesr-twin .twin-row > .twin-cell { min-height: 6mm; padding: 1mm 1.15mm .5mm; font-size: 5.3pt; align-items: center; }
.sesr-twin .twin-row > .twin-cell + .twin-cell { border-left: .25mm solid var(--line); }
.sesr-twin .comment-box { display: flex; flex-direction: column; border-bottom: .25mm solid var(--line); padding: .9mm 1.15mm; font-size: 5.25pt; flex: 1 1 auto; }
.sesr-twin .comment-box.tech { background: var(--tech); }
.sesr-twin .comment-box .twin-area { flex: 1 1 auto; min-height: 7mm; margin-top: .6mm; resize: none; }

/* --- Printing --------------------------------------------------------------------------- */
.print-root { display: none; }

@media print {
  body[data-printing] > *:not(.print-root) { display: none !important; }
  body[data-printing] { background: #fff; margin: 0; }
  .print-root { display: block; color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 8pt; }
  .print-root h2 { margin: 0 0 2mm; font-size: 11pt; }
  .print-root h3 { margin: 2.5mm 0 1mm; font-size: 9pt; }
  .print-root, .print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-footer { position: fixed; left: 0; right: 0; bottom: 0; border-top: 1px solid #000; padding-top: 1mm; font-size: 9pt; background: #fff; }
}

.print-grid { display: grid; gap: 1.5mm 3mm; margin-bottom: 1.5mm; }
.print-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.print-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.print-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.print-field { display: flex; flex-direction: column; min-width: 0; }
.print-label { font-size: 6.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #333; }
.print-value { min-height: 4.5mm; padding: .3mm 0; border-bottom: 1px solid #999; font-size: 8.5pt; overflow-wrap: anywhere; }
.print-conditions { display: flex; flex-wrap: wrap; align-items: center; gap: 1mm 4mm; margin: 1mm 0; }
.print-check { display: inline-flex; align-items: center; gap: 1mm; }
.print-box { display: inline-block; width: 3mm; height: 3mm; border: 1px solid #000; vertical-align: middle; }
.print-box.is-checked { background: #000; box-shadow: inset 0 0 0 .5mm #fff; }
.print-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.print-table th, .print-table td { border: 1px solid #000; padding: .4mm .6mm; vertical-align: top; overflow-wrap: anywhere; text-align: center; }
.print-table th { background: #d8e4c1; font-size: 6.5pt; text-transform: uppercase; line-height: 1.1; }
.print-table th span { font-weight: 400; text-transform: none; }
.print-table td.col-employee, .print-table td.col-analysis, .print-table td.col-occupation { text-align: left; }
.print-table .col-no { width: 6mm; }
.print-table .col-analysis { width: 12%; }
.print-table .col-employee { width: 14%; }
.print-table .col-seg, .print-table .col-occupation { width: 9%; }
.print-table tr.is-unavailable td { color: #555; }
.print-void-reason { display: block; font-style: italic; }
.print-table.blanks { width: 55%; }
.print-shortfall { margin: 1mm 0 0; font-weight: 700; }
.print-empty { color: #555; }
.record-notes, .worklist-day + .worklist-day, .record-sheet + .record-notes + .record-sheet { break-before: page; }
.record-sheet { break-inside: auto; }
.print-note { margin-bottom: 2mm; }
.print-note-box { min-height: 22mm; border: 1px solid #000; padding: 1mm; white-space: pre-wrap; font-size: 9pt; }
.print-heading p { margin: 0 0 2mm; }
.print-table.worklist td { text-align: left; font-size: 10pt; padding: 1.2mm 1.5mm; }
.print-table.worklist td.noise { text-align: center; }
.print-table.worklist .print-box { width: 4mm; height: 4mm; }
.print-table td.num { text-align: right; }
.print-table tr.is-short td { font-weight: 700; }
.print-worklist-footer-space, .print-plan-worklist .worklist-day { padding-bottom: 12mm; }
.summary-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin: 3mm 0; }
.summary-pie { display: grid; place-items: center; width: 34mm; height: 34mm; border-radius: 50%; }
.summary-pie span { display: grid; place-items: center; width: 14mm; height: 14mm; border-radius: 50%; background: #fff; font-weight: 700; }
.summary-chart ul { list-style: none; padding: 0; margin: 2mm 0 0; }
.swatch { display: inline-block; width: 3mm; height: 3mm; margin-right: 1.5mm; vertical-align: middle; }
/* One printed side: two A5 halves, with cut marks at the centre for the
   guillotine. */
.sesr-print-sheet { position: relative; display: flex; width: 297mm; height: 210mm; overflow: hidden; break-after: page; }
.sesr-print-sheet:last-child { break-after: auto; }
.sesr-print-sheet .sesr-page { box-shadow: none; width: 148.5mm; height: 210mm; }
.sesr-page-blank { flex: 0 0 auto; width: 148.5mm; height: 210mm; }
.sesr-print-sheet::before, .sesr-print-sheet::after {
  content: ""; position: absolute; left: 148.5mm; width: 0; height: 3mm; border-left: .2mm solid #999;
}
.sesr-print-sheet::before { top: 0; }
.sesr-print-sheet::after { bottom: 0; }
.print-flip { margin: .4rem 0 0; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: .7rem; display: grid; gap: .4rem; }
.print-flip .print-choice { border: 0; padding: .2rem 0; }
.print-choices { display: grid; gap: .5rem; }
.print-choice { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: .7rem; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--text); }
.print-choice input { width: auto; }
.print-day-pick { margin-left: 2.3rem; }

/* --- Exports ---------------------------------------------------------------------------- */
.transfer-days { display: grid; gap: .4rem; margin-bottom: .6rem; }
.transfer-day {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; padding: .55rem .75rem;
  border: 1px solid var(--border); border-radius: .7rem; text-transform: none; letter-spacing: 0; font-size: .98rem; color: var(--text);
}
.transfer-day input { width: auto; grid-row: span 2; }
.transfer-day-state { font-size: .82rem; color: var(--muted); }
.transfer-day.is-changed { border-color: var(--warning-border); background: var(--warning-bg); }
.transfer-day.is-new .transfer-day-state { color: #166534; font-weight: 600; }
.transfer-day.is-empty { opacity: .6; }

@media (max-width: 760px) {
  .photo-choice-grid { grid-template-columns: 1fr; }
  .esr-scan-pages { grid-template-columns: 1fr; }
}