/* ══════════════════════════════════════════════════
   PHOTOGRAPHING THE ORDER FORM (js/20-scan.js)
   ══════════════════════════════════════════════════ */

/* over the invoice form when opened from it */
#scan-modal { z-index: 240; }
#scan-modal .modal { width: 620px; }

/* the pages taken so far */
.scan-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.scan-page {
  margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card-2);
  overflow: hidden; display: flex; flex-direction: column;
}
.scan-page img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; }
.scan-page figcaption {
  display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 10px;
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--line-soft);
}
.scan-page figcaption span { flex: 1; }
.scan-mini {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  font-size: 15px; line-height: 1; color: var(--muted); cursor: pointer; touch-action: manipulation;
}
.scan-mini:disabled { opacity: .35; cursor: default; }
.scan-mini.danger { color: var(--danger); }
.scan-wait { align-items: center; justify-content: center; min-height: 140px; font-size: 13px; color: var(--muted); }
.scan-empty {
  grid-column: 1 / -1; padding: 22px 16px; border: 1px dashed var(--line); border-radius: var(--r-md);
  text-align: center; font-size: 13.5px; color: var(--muted); line-height: 1.5;
}

/* take / choose */
.scan-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.scan-adds .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.scan-adds .btn svg { width: 19px; height: 19px; }
#scan-warn { margin-top: 10px; }

/* "Have it as a PDF already?" under the two big buttons */
.scan-pdf { display: block; margin: 0 0 10px; font-size: 13px; }

/* the form's controls on an order card travel together */
.pdf-ctl { display: contents; }
.inv-scan svg { width: 16px; height: 16px; }

/* Take photos, in the PDF viewer's bar */
.pdf-photo { display: inline-flex; align-items: center; gap: 7px; }
.pdf-photo svg { width: 16px; height: 16px; }
html.role-readonly .pdf-photo { display: none !important; }

/* Rotate, in the same bar (10-attachments.js) */
.pdf-rot { display: inline-flex; align-items: center; gap: 7px; }
.pdf-rot svg { width: 16px; height: 16px; }
.sheet-over-body.pdf-turned { overflow: hidden; }
.sheet-over-body.pdf-turned iframe { inset: auto; top: 50%; left: 50%; max-width: none; max-height: none; transform-origin: 50% 50%; }

@media (hover: none), (any-pointer: coarse) {
  .scan-mini { width: 40px; height: 40px; }
}

/* at the counter the button sits beside "Send to the workshop" (17-counter.js) */
html.role-counter #invoice-modal .ctr-scan {
  height: 44px; padding: 0 15px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; background: var(--card); color: var(--text); border-color: var(--line);
}
html.role-counter #invoice-modal .ctr-scan svg { display: inline-block; width: 18px; height: 18px; color: var(--gold); }
html.role-counter #invoice-modal .ctr-scan span { display: inline; }

/* ── Phones ── */
@media (max-width: 620px) {
  .scan-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scan-adds { grid-template-columns: 1fr; }

  /* on an order card the form's controls take one row of their own:
     Attach form, or PDF ✓ | replace | remove */
  .oc-tools > .pdf-ctl { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; min-width: 0; }
  .oc-tools > .pdf-ctl > .btn { flex: 1 1 0; min-width: 0; width: auto; padding: 0 8px; }
  .oc-tools > .pdf-ctl > .icon-btn { flex: none; }

  /* the viewer bar on a phone: Rotate is an icon, and the buttons wrap
     onto a second row rather than run off the screen */
  .pdf-rot span { display: none; }
  .pdf-rot { padding: 0 12px; }
  .pdf-acts { width: 100%; justify-content: flex-start; }

  /* the invoice form: the camera stays an icon at the counter */
  .inv-scan span { display: none; }
  html.role-counter #invoice-modal .inv-head-acts .btn.inv-scan svg { display: inline-block; }
  html.role-counter #invoice-modal .inv-head-acts .btn.inv-scan { padding: 0 11px; }
}