/* ==========================================================================
   Receipt signatures and bulk download (js/modules/signatures.js).
   Print parts use fixed colours: the voucher is always on white paper.
   ========================================================================== */

/* Signature blocks on the receipt voucher (SG9) */
.v-sign.sg-sign { align-items: end; margin-top: 22px; }
.v-sign.sg-sign .sg-blk { display: grid; gap: 2px; justify-items: center; text-align: center; font-size: 11px; color: #4b5f69; }
.sg-blk img { width: 45mm; max-width: 100%; height: 15mm; object-fit: contain; border-bottom: 1px solid #8499a3; padding-bottom: 2px; }
.sg-blk i { display: block; width: 100%; height: 15mm; border-bottom: 1px solid #8499a3; }
.sg-blk b { color: #172e38; font-size: 11px; margin-top: 3px; }
.sg-blk span { font-size: 10.5px; }
.sg-blk small { font-size: 9.5px; color: #6f818a; }
.sg-note { margin-top: 8px; font-size: 9px; color: #8499a3; text-align: center; }
.voucher { position: relative; }
.sg-cancel { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-22deg); font-size: 64px; font-weight: 800; color: #e1273d; opacity: .14; pointer-events: none; letter-spacing: .06em; }
.sg-preview { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px 10px; }

/* Pad */
.sg-form { display: grid; gap: 10px; }
.sg-padwrap { display: grid; gap: 4px; }
.sg-padlabel { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 12.5px; }
.sg-pad { display: block; width: 100%; aspect-ratio: 3 / 1; background: #fff; border: 1.5px dashed var(--line-strong, #9fb3bb); border-radius: 10px; touch-action: none; cursor: crosshair;
  background-image: linear-gradient(transparent calc(100% - 28%), rgba(23, 46, 56, .18) calc(100% - 28%), rgba(23, 46, 56, .18) calc(100% - 28% + 1px), transparent calc(100% - 28% + 1px)); }
.sg-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.sg-check input { margin-top: 2px; flex: none; }
.sg-check span { display: grid; gap: 1px; }
.sg-err { margin-bottom: 8px; }
.sg-thumb { height: 48px; width: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }

/* Customer's link page (phone view) */
.sg-phone { max-width: 420px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-3); padding: 18px 18px 22px; display: grid; gap: 10px; }
.sg-phone header { display: flex; justify-content: center; padding-bottom: 8px; border-bottom: 3px solid var(--primary); }
.sg-phone header img { height: 38px; width: auto; }
.sg-phone h2 { font-size: 17px; }
.sg-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.sg-sum div { background: var(--surface-3); border-radius: 8px; padding: 6px 9px; min-width: 0; }
.sg-sum dt { font-size: 11px; color: var(--ink-3); }
.sg-sum dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sg-phone .btn.lg { height: 44px; justify-content: center; }

/* Signatures page */
.sg-sel { width: auto; min-width: 220px; }
.sg-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.sg-p { padding: 0 16px; font-size: 12px; }
.sg-users { display: grid; gap: 8px; padding: 8px 16px 16px; }
.sg-user { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; flex-wrap: wrap; }
.sg-uimg { width: 130px; height: 44px; display: grid; place-items: center; background: #fff; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.sg-uimg img { max-width: 100%; max-height: 100%; }
.sg-user .grow { display: grid; min-width: 120px; }
.sg-settings { display: grid; gap: 10px; padding: 8px 16px 16px; }
.sg-days { max-width: 200px; }
.kpis button.card.stat { text-align: start; cursor: pointer; font: inherit; color: inherit; }

/* Download dialog */
.sg-fmt { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; margin: 0; }
.sg-fmt legend { font-weight: 600; font-size: 12px; padding-inline: 4px; }
.sg-fmt label { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.sg-live { background: var(--surface-3); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.sg-recent { margin-top: 12px; }

@media (max-width: 760px) {
  .sg-sel { min-width: 0; width: 100%; }
  .sg-sum { grid-template-columns: 1fr; }
  .v-sign.sg-sign { grid-template-columns: 1fr; gap: 14px; }
}
@media print { .sg-page { page-break-after: always; break-after: page; } }

/* Print sets and accounts department signatures (js/modules/printsets.js) */
.td-copy { display: inline-block; margin-top: 4px; padding: 1px 12px; border: 1.5px solid #172e38; border-radius: 4px; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #172e38; }
.td-copy.is-copy { border-color: #e1273d; color: #e1273d; }
.v-title em.td-copy { justify-self: center; }
.ps-sign { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 12px; align-items: end; }
.voucher .ps-sign, .voucher .sg-sign { margin-top: 22px; }
.ps-blk { display: grid; gap: 2px; justify-items: center; text-align: center; font-size: 9.5px; color: #4b5f69; position: relative; z-index: 1; }
.ps-blk img { width: 45mm; max-width: 100%; height: 15mm; object-fit: contain; border-bottom: 1px solid #8499a3; padding-bottom: 2px; }
.ps-blk i { display: block; width: 100%; height: 15mm; border-bottom: 1px solid #8499a3; }
.ps-blk b { color: #172e38; font-size: 10px; margin-top: 3px; }
.ps-blk small { color: #6f818a; font-size: 9px; }
.ps-stampbox { position: relative; }
.ps-stamp { position: absolute; inset-inline-end: -14px; inset-block-start: -62px; width: 27mm; height: 27mm; color: #19868b; opacity: .78; transform: rotate(-12deg); z-index: 0; pointer-events: none; }
.ps-list { display: grid; gap: 6px; margin-bottom: 10px; }
.ps-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.ps-row .grow { display: grid; }
.ps-preview { overflow-x: auto; background: var(--surface-3); border-radius: var(--radius); padding: 12px; }
.ps-preview .a4 { transform-origin: top center; }
@media (max-width: 760px) { .ps-sign { grid-template-columns: 1fr; } .ps-stamp { inset-block-start: -10px; } }