/* SignVerse Signature Capture — sv-signature-capture.css
   Shared signature creation UI used by signing modal, settings page,
   and any future signature capture surface.
   Depends on: sv-tokens.css (design tokens) */

/* ── Tab Shell ── */
.sv-sig-tabs{display:flex;border-bottom:1px solid var(--border,#e2e8f0);margin-bottom:16px}
.sv-sig-tab{flex:1;padding:10px;font-size:var(--sv-text-md,13px);font-weight:var(--sv-weight-medium,500);text-align:center;cursor:pointer;color:var(--muted,#64748b);border:none;border-bottom:2px solid transparent;transition:all 0.15s;background:none}
.sv-sig-tab.active{color:var(--brand,#2563eb);border-bottom-color:var(--brand,#2563eb)}
.sv-sig-panel{display:none}
.sv-sig-panel.active{display:block}

/* ── Draw Pad ── */
.sv-sig-pad-wrap{position:relative;border:2px dashed var(--border,#e2e8f0);border-radius:var(--radius-lg,12px);background:#fafafa;touch-action:none}
.sv-sig-pad-canvas{display:block;width:100%;height:200px;border-radius:10px;cursor:crosshair}
.sv-sig-pad-baseline{position:absolute;left:16px;right:16px;bottom:42px;border-top:1px solid #cbd5e1}
.sv-sig-pad-baseline span{position:absolute;left:0;top:6px;font-size:var(--sv-text-xs,11px);color:var(--subtle,#94a3b8)}
.sv-sig-pad-clear{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:var(--sv-text-xs,11px);color:var(--muted,#64748b);background:none;border:none;cursor:pointer;padding:4px 8px}

/* ── Type Mode ── */
.sv-sig-type-input{width:100%;padding:16px;font-size:24px;font-family:var(--sv-font-display,'Dancing Script',cursive);text-align:center;border:1px solid var(--border,#e2e8f0);border-radius:var(--radius,8px);background:var(--surface,#fff);color:var(--text,#0f172a);box-sizing:border-box}
.sv-sig-type-input:focus{outline:none;border-color:var(--brand,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.sv-sig-type-preview{text-align:center;padding:24px;font-size:32px;font-family:var(--sv-font-display,'Dancing Script',cursive);color:var(--text,#0f172a);border:1px solid var(--border,#e2e8f0);border-radius:var(--radius,8px);margin-top:12px;background:#fafafa;min-height:80px;display:flex;align-items:center;justify-content:center}

/* ── Upload Mode ── */
.sv-sig-upload-zone{border:2px dashed var(--border,#e2e8f0);border-radius:var(--radius,8px);padding:32px;text-align:center;cursor:pointer;transition:all 0.15s}
.sv-sig-upload-zone:hover{border-color:var(--brand,#2563eb);background:rgba(37,99,235,.04)}
.sv-sig-upload-preview{margin-top:12px;text-align:center}
.sv-sig-upload-preview img{max-width:100%;max-height:120px;border:1px solid var(--border,#e2e8f0);border-radius:var(--radius,8px);padding:8px;background:#fff}

/* ── Phone Scan Mode ── */
.sv-sig-scan-card{border:1px solid var(--border,#e2e8f0);border-radius:var(--radius-lg,12px);padding:18px;background:#fafafa;display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center}
.sv-sig-scan-card.full{grid-template-columns:1fr;text-align:center}
.sv-sig-scan-qr{width:80px;height:80px;border-radius:var(--radius,8px);background:#fff;border:1px solid var(--border,#e2e8f0);display:flex;align-items:center;justify-content:center;color:var(--subtle,#94a3b8)}

/* ── Consent ── */
.sv-sig-consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--border,#e2e8f0)}
.sv-sig-consent input[type="checkbox"]{margin-top:3px;flex-shrink:0;accent-color:var(--brand,#2563eb)}
.sv-sig-consent span{font-size:var(--sv-text-sm,12px);color:var(--muted,#64748b);line-height:var(--sv-leading-snug,1.4)}

/* ── Ink Color Picker ── */
.sv-sig-colors{display:flex;gap:6px;align-items:center;margin-left:auto}
.sv-sig-color-btn{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;outline:none;transition:transform .1s,box-shadow .1s}
.sv-sig-color-btn:hover{transform:scale(1.15)}
.sv-sig-color-btn.selected{box-shadow:0 0 0 2px var(--brand,#2563eb);transform:scale(1.15)}

/* ── Hint ── */
.sv-sig-hint{font-size:var(--sv-text-xs,11px);color:var(--muted,#64748b);margin-top:8px}

/* ── Saved Signature Picker ── */
.sv-sig-saved{border:1px solid var(--border,#e2e8f0);border-radius:var(--radius,8px);padding:12px;margin-bottom:16px;background:var(--surface,#fff)}
.sv-sig-saved-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:var(--sv-text-sm,12px);font-weight:var(--sv-weight-semibold,600);color:var(--text,#0f172a)}
.sv-sig-saved-item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border,#e2e8f0);border-radius:var(--radius,8px);cursor:pointer;transition:all .12s;margin-bottom:6px}
.sv-sig-saved-item:last-child{margin-bottom:0}
.sv-sig-saved-item:hover{border-color:var(--brand,#2563eb);background:rgba(37,99,235,.04)}
.sv-sig-saved-item.selected{border-color:var(--brand,#2563eb);background:rgba(37,99,235,.06);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.sv-sig-saved-item img{height:36px;background:#fff;border-radius:4px;border:1px solid var(--border,#e2e8f0);flex-shrink:0}
.sv-sig-saved-meta{flex:1;min-width:0;font-size:var(--sv-text-xs,11px);color:var(--muted,#64748b)}
.sv-sig-saved-meta b{color:var(--text,#0f172a);font-weight:var(--sv-weight-semibold,600)}

/* ── Settings-mode extras ── */
.sv-sig-settings-list{list-style:none;padding:0;margin:0}
.sv-sig-settings-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border,#e2e8f0)}
.sv-sig-settings-row:last-child{border-bottom:none}
.sv-sig-settings-row img{height:40px;background:#fff;border-radius:4px;border:1px solid var(--border,#e2e8f0)}
.sv-sig-settings-row .meta{flex:1;font-size:var(--sv-text-sm,12px)}

/* ── Mobile: keep tabs on one line, shrink pad, allow color row to stack ── */
@media (max-width:480px){
  .sv-sig-tabs{gap:2px}
  .sv-sig-tab{padding:8px 4px;font-size:var(--sv-text-sm,12px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .sv-sig-tab[data-tab="mobile"]::before{content:"Phone"}
  .sv-sig-tab[data-tab="mobile"]{font-size:0}
  .sv-sig-tab[data-tab="mobile"]::before{font-size:var(--sv-text-sm,12px)}
  .sv-sig-pad-canvas{height:150px}
  .sv-sig-pad-baseline{bottom:32px}
  .sv-sig-pad-wrap+div{flex-wrap:wrap;row-gap:6px}
  .sv-sig-colors{margin-left:0;width:100%;justify-content:flex-start}
  .sv-sig-scan-card{grid-template-columns:1fr;text-align:center;padding:14px}
  .sv-sig-scan-qr{margin:0 auto}
  .sv-sig-type-input{font-size:20px;padding:12px}
  .sv-sig-type-preview{font-size:26px;padding:18px;min-height:64px}
}