/* BLA Shipping — app-only styles. Theme styles live in /theme/css (Velzon). Printable documents use /css/print.css. */

/* ---------- intro.js tours ---------- */
.customTooltipBigSize { min-width: 500px !important; }
.introjs-tooltipReferenceLayer:has(.customTooltipBigSize) { min-width: 500px !important; top: 65% !important; left: 50% !important; }
.customTooltip .introjs-tooltip-title, .customTooltipBigSize .introjs-tooltip-title { color: #fff; }
.introjs-helperLayer { border: 2px solid #fff; }

/* ---------- photos and previews ---------- */
.thumb-sm { width: 50px; height: 50px; object-fit: contain; }
.thumb-md { width: 150px; height: 150px; object-fit: contain; }
.img-preview-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.img-thumbnail-container { position: relative; display: inline-block; }
.img-thumbnail-container .remove-image-btn {
  position: absolute; top: 0; right: 0; width: 20px; height: 20px; line-height: 1;
  display: flex; justify-content: center; align-items: center; cursor: pointer;
  background: rgba(0, 0, 0, 0.55); color: #fff; border: none; border-radius: 50%;
}

/* ---------- tables ---------- */
.col-0 { width: 1%; }

/* ---------- lightbox2 ---------- */
.lb-nav a.lb-prev, .lb-nav a.lb-next { opacity: 1; }
.lb-image { max-height: 80vh !important; max-width: 80vw !important; }

/* ---------- packing slip: scanning ---------- */
.scan-input { font-size: 1.25rem; letter-spacing: 0.5px; }
.scan-input.is-busy { opacity: 0.6; }
.scan-feedback { font-size: 1rem; }
.slip-barcode svg { height: 44px; width: auto; }
#itemsTable tr.table-success td { transition: background-color 1.5s ease; }

/* ---------- catalog labels ---------- */
.barcode-preview svg { height: 44px; width: auto; }
.label-sheet { display: flex; flex-wrap: wrap; gap: 6mm; }
.label { width: 62mm; min-height: 29mm; border: 1px dashed #bbb; border-radius: 3px; padding: 2mm 3mm; display: flex; flex-direction: column; align-items: center; justify-content: center; break-inside: avoid; }
.label-name { font-size: 11px; font-weight: 600; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-code svg { width: 56mm; height: auto; }

/* ---------- project gallery ---------- */
.gallery-slip { padding: 10px 0; border-bottom: 1px dashed var(--vz-border-color); }
.gallery-slip:last-child { border-bottom: 0; }
.gallery-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.gallery-label { font-size: 12px; color: var(--vz-secondary-color); min-width: 90px; }
.progress-sm { height: 6px; }

/* ---------- generic print (screens other than the dedicated print documents) ---------- */
.offscreen { position: absolute; top: -9999px; left: -9999px; width: 100%; }
@media print {
  .no-print, .introjs-hints, #page-topbar, .app-menu, .vertical-overlay, .footer, .page-title-box, .flash-messages, .scan-card, #itemCounters { display: none !important; }
  html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; background: #fff !important; }
  .main-content { margin-left: 0 !important; }
  .page-content { padding: 0.3in !important; margin: 0 !important; }
  .container-fluid { padding: 0 !important; max-width: 100% !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
  @page { size: 8.5in 11in; margin: 0.4in; }
  .label-sheet { gap: 4mm; }
  .label { border-color: transparent; }
}

/* audit page: long request paths wrap inside the table */
.audit-path { max-width: 420px; word-break: break-all; }

/* top-bar search dropdown: scroll inside, keep the page still */
.search-results { max-height: 340px; overflow-y: auto; }

/* PIN sign-in (login page on registered scanners) */
.pin-input { font-size: 1.8rem; letter-spacing: 0.4em; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pin-pad .btn { font-size: 1.4rem; padding: 12px 0; }

/* Devices page: the scanner key as a barcode (the SVG has no size of its own) */
.device-code svg { height: 64px; width: auto; max-width: 100%; display: block; }

/* Quantity boxes in item tables: wide enough for the number, no spinner stealing the space */
.qty-input, #itemsTable .qty-input { width: 4.75rem; min-width: 4.75rem; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#itemsTable .row-qty { white-space: nowrap; }