/* e-Sign page styles. Split out of index.html verbatim (no behaviour change). */
  .esign-tabs {
    display:inline-flex; border:1px solid var(--border2); border-radius:var(--radius);
    overflow:hidden; height:34px;
  }
  .esign-tab {
    padding:0 14px; font-size:13px; font-family:'DM Sans', sans-serif;
    background:var(--bg); color:var(--text2);
    border:none; border-right:1px solid var(--border2); cursor:pointer;
    transition:all 0.15s;
  }
  .esign-tab:last-child { border-right:none; }
  .esign-tab:hover { color:var(--text); }
  .esign-tab.active { background:var(--accent); color:#fff; font-weight:500; }
  .esign-tab[data-status="void"].active { background:rgba(220,38,38,0.12); color:#dc2626; }
  .esign-tab[data-status="partially_signed"].active { background:rgba(201,168,99,0.15); color:#b07d20; font-weight:500; }
  .esign-list-wrap {
    flex:1; overflow:auto; padding:22px;
    display:flex; flex-direction:column; min-height:0;
  }
  .esign-empty {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; color:var(--text3); font-size:13px; padding:40px 20px;
  }
  /* Empty document list: the flex:1 "No documents yet" message used to stretch and
     shove the "Drop a PDF" zone all the way to the bottom of the screen. Pin the
     message to its natural height so it and the dropzone sit together at the top. */
  #esign-list-empty { flex:0 0 auto; padding-bottom:16px; }
  .esign-table-card {
    border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:var(--shadow-md); background:var(--bg);
  }
  .esign-table {
    width:100%; border-collapse:collapse; background:var(--bg);
  }
  .esign-table thead th {
    text-align:left; padding:10px 14px; font-size:11px; color:var(--text3);
    text-transform:uppercase; letter-spacing:0.5px; font-weight:500;
    border-bottom:1px solid var(--border); background:var(--bg2);
    position:static; top:auto; z-index:auto; box-shadow:none;
  }
  .esign-table tbody td {
    padding:12px 14px; font-size:13px; border-bottom:1px solid var(--border);
    color:var(--text);
  }
  .esign-table tbody tr:last-child td { border-bottom:none; }
  .esign-table tbody tr:hover td { background:var(--bg3); cursor:pointer; }
  .esign-status-pill {
    display:inline-block; padding:3px 10px; border-radius:99px;
    font-size:11px; text-transform:uppercase; letter-spacing:0.5px; font-weight:500;
    background:var(--bg3); color:var(--text2); border:1px solid var(--border2);
  }
  .esign-status-pill[data-status="draft"]              { background:rgba(168,162,158,0.10); color:#a8a29e; border-color:rgba(168,162,158,0.20); }
  .esign-status-pill[data-status="sent"]               { background:rgba(79,139,232,0.10);  color:#4f8be8; border-color:rgba(79,139,232,0.30); }
  .esign-status-pill[data-status="partially_signed"]   { background:rgba(201,168,99,0.10);  color:#c9a863; border-color:rgba(201,168,99,0.30); }
  .esign-status-pill[data-status="completed"]          { background:rgba(21,128,61,0.10);   color:#15803d; border-color:rgba(21,128,61,0.30); }
  .esign-status-pill[data-status="void"]               { background:rgba(220,38,38,0.10);   color:#dc2626; border-color:rgba(220,38,38,0.30); }
  /* Uniform pill length in the document list so the STATUS column reads as one column. */
  .esign-table .esign-status-pill { min-width:120px; text-align:center; box-sizing:border-box; }
  .esign-signer-stack { display:inline-flex; align-items:center; }
  .esign-signer-avatar {
    width:24px; height:24px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:600; color:#fff;
    border:2px solid var(--bg); margin-left:-6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
    position:relative;
  }
  .esign-signer-avatar:first-child { margin-left:0; }
  .esign-signer-avatar.signed::after {
    content:''; position:absolute; bottom:-2px; right:-2px;
    width:10px; height:10px; border-radius:50%;
    background:#15803d; border:2px solid var(--bg);
  }
  .esign-signer-more { font-size:11px; color:var(--text3); margin-left:6px; }
  .esign-row-actions { display:inline-flex; gap:6px; opacity:0; transition:opacity 0.12s; vertical-align:middle; }
  .esign-table tbody tr:hover .esign-row-actions { opacity:1; }
  .esign-link-chip {
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    margin-left:8px; padding:0; min-width:0; box-sizing:border-box;
    font-size:10px; font-weight:500; line-height:1.4;
    background:none; color:#92400e; border:none;
    border-radius:0; cursor:pointer;
    transition:none;
  }
  .esign-link-chip:hover { background:none; text-decoration:underline; }
  .esign-link-chip i { width:10px; height:10px; }
  [data-theme="dark"] .esign-link-chip {
    background:none; color:#fcd34d; border:none;
  }
  [data-theme="dark"] .esign-link-chip:hover {
    background:none;
  }
  /* "✓ <applicant>" chip on a completed doc that's linked to an app — neutral grey
     with white text to keep the list calm (was green). Uniform min-width too. */
  .esign-linked-chip {
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    margin-left:8px; padding:0; min-width:0; max-width:200px; box-sizing:border-box;
    font-size:10px; font-weight:500; line-height:1.4;
    background:none; color:#15803d; border:none;
    border-radius:0; cursor:pointer;
    transition:none;
  }
  .esign-linked-chip:hover { background:none; }
  .esign-linked-chip i { width:10px; height:10px; flex:0 0 auto; }
  .esign-linked-chip-static { cursor:default; }
  .esign-linked-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  [data-theme="dark"] .esign-linked-chip {
    background:none; color:#4ade80; border:none;
  }
  [data-theme="dark"] .esign-linked-chip:hover {
    background:none;
  }
  .esign-dz {
    display:flex; align-items:center; justify-content:center; gap:10px;
    border:2px dashed var(--border2); border-radius:var(--radius-lg);
    padding:14px 20px; margin-bottom:12px;
    cursor:pointer; user-select:none;
    font-size:13px; color:var(--text3);
    transition:border-color 0.15s, background 0.15s, color 0.15s;
  }
  .esign-dz:hover { border-color:var(--accent); background:rgba(79,139,232,0.04); color:var(--text2); }
  .esign-dz.drag-over { border-color:var(--accent); border-style:solid; background:rgba(79,139,232,0.08); color:var(--text); }
  .esign-dz i { width:16px; height:16px; flex-shrink:0; opacity:0.55; }
  .esign-dz-link { color:var(--accent); font-weight:500; }
  [data-theme="dark"] .esign-dz:hover,
  [data-theme="dark"] .esign-dz.drag-over { background:rgba(79,139,232,0.10); }
  .esign-builder-layout {
    flex:1; display:grid; grid-template-columns:220px 1fr;
    grid-template-rows:minmax(0,auto) minmax(150px,1fr); gap:14px;
    padding:14px 18px; overflow:hidden; min-height:0;
  }
  /* Fields (palette) and Roles (recipients) stacked in the same left column so
     the PDF preview gets the full remaining width. */
  .esign-builder-layout > .esign-palette    { grid-column:1; grid-row:1; }
  .esign-builder-layout > .esign-recipients { grid-column:1; grid-row:2; }
  .esign-builder-layout > .esign-pdf-wrap   { grid-column:2; grid-row:1 / span 2; }
  .esign-palette, .esign-recipients {
    background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:10px; overflow-y:auto;
    box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .esign-panel-title {
    font-family:var(--font-display); font-size:11px; text-transform:uppercase; letter-spacing:1px;
    color:var(--text2); border-bottom:1px solid var(--gold-soft);
    padding-bottom:6px; margin-bottom:12px;
  }
  /* #22 — collapsible Fields / Recipients panels to clean up the signing screen. */
  .esign-panel-title.esign-panel-toggle {
    cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px; user-select:none;
  }
  .esign-panel-chev { width:14px; height:14px; transition:transform .15s ease; flex:0 0 auto; }
  .esign-collapsed > .esign-panel-title .esign-panel-chev { transform:rotate(-90deg); }
  .esign-collapsed > :not(.esign-panel-title) { display:none !important; }
  .esign-collapsed { padding-bottom:10px !important; }
  .esign-panel-stub {
    font-size:12px; color:var(--text3); line-height:1.5;
    padding:14px 6px; text-align:center;
  }
  /* ── Recipients panel ───────────────────────────────────────────────── */
  .esign-recipients-list { display:flex; flex-direction:column; gap:10px; }
  .esign-recipient-row {
    border:1px solid var(--border2); border-radius:10px;
    padding:7px; background:var(--bg2);
    display:flex; flex-direction:column; gap:4px;
    position:relative;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .esign-recipient-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79,139,232,0.10);
  }
  .esign-recipient-head {
    display:flex; align-items:center; gap:8px;
  }
  .esign-recipient-color {
    width:14px; height:14px; border-radius:50%;
    border:1px solid rgba(0,0,0,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    flex:0 0 auto;
  }
  .esign-recipient-ord {
    font-size:11px; font-weight:600; color:var(--text3);
    font-family:'DM Mono',monospace;
  }
  .esign-recipient-head-actions {
    margin-left:auto; display:flex; align-items:center; gap:4px;
  }
  .esign-recipient-update {
    display:none; align-items:center; gap:3px;
    background:none; border:1px solid var(--accent); color:var(--accent);
    cursor:pointer; padding:2px 8px; border-radius:4px;
    font-size:10px; font-weight:600; font-family:'DM Sans',sans-serif;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space:nowrap; line-height:1.6;
  }
  .esign-recipient-update:hover:not(:disabled) { background:var(--accent); color:#fff; }
  .esign-recipient-update.saved {
    background:#15803d; border-color:#15803d; color:#fff; pointer-events:none;
  }
  .esign-recipient-delete {
    background:none; border:none; cursor:pointer;
    color:var(--text3); padding:2px 4px; border-radius:4px; line-height:1;
    transition: color 0.12s, background 0.12s;
  }
  .esign-recipient-delete:hover { color:#dc2626; background:rgba(220,38,38,0.08); }
  .esign-recipient-delete i { width:13px; height:13px; }
  .esign-recipient-row input.esign-recipient-input {
    width:100%; padding:6px 8px; font-size:12px;
    border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text);
    font-family:'DM Sans',sans-serif; outline:none;
  }
  .esign-recipient-row input.esign-recipient-input:focus { border-color: var(--accent); }
  .esign-recipient-row input.esign-recipient-input.invalid {
    border-color:#dc2626;
    box-shadow: 0 0 0 2px rgba(220,38,38,0.10);
  }
  .esign-add-recipient {
    width:100%; margin-top:12px; justify-content:center;
    font-size:12px; padding:8px 10px;
  }
  .esign-add-recipient i { width:14px; height:14px; }
  .esign-recipients-status {
    font-size:10px; color:var(--text3); text-align:center;
    margin-top:8px; min-height:14px; letter-spacing:0.04em;
  }
  .esign-recipients-status.saved { color:#15803d; }
  .esign-recipients-status.saving { color:var(--text3); }
  .esign-recipients-status.error { color:#dc2626; }

  /* ── Field palette ────────────────────────────────────────────────── */
  .esign-palette { display:flex; flex-direction:column; gap:12px; }
  .esign-palette-signer-tabs {
    display:flex; flex-wrap:wrap; gap:6px;
    border-bottom:1px solid var(--border); padding-bottom:10px;
  }
  .esign-palette-signer-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px; font-size:11px; border-radius:999px;
    border:1px solid var(--border2); background:var(--bg2);
    cursor:pointer; color:var(--text2); font-family:'DM Sans',sans-serif;
    line-height:1; max-width:100%;
    transition: all 0.12s;
  }
  .esign-palette-signer-tab .esign-palette-signer-dot {
    width:9px; height:9px; border-radius:50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    flex:0 0 auto;
  }
  .esign-palette-signer-tab .esign-palette-signer-name {
    /* Fixed (not max-) width so every recipient bubble is the same size
       regardless of name length or selected state. */
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:90px;
  }
  .esign-palette-signer-tab.active {
    border-color: var(--signer-color, var(--accent));
    background:var(--bg);
    color:var(--text);
    box-shadow: 0 0 0 1px var(--signer-color, var(--accent));
  }
  .esign-palette-fields { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
  .esign-field-card {
    --tile-accent: var(--accent);
    --tile-surface: var(--bg);
    --tile-surface2: var(--bg2);
    --tile-ink: var(--text);
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:8px 4px; font-size:9px; font-weight:600;
    color: color-mix(in srgb, var(--tile-accent) 78%, var(--tile-ink));
    border:1px solid color-mix(in srgb, var(--tile-accent) 26%, transparent);
    border-radius:8px;
    background: color-mix(in srgb, var(--tile-accent) 8%, var(--tile-surface));
    cursor:pointer; user-select:none;
    font-family:'DM Sans',sans-serif;
    position: relative; overflow: hidden;
    box-shadow: 0 2px 0 color-mix(in srgb, var(--tile-accent) 16%, transparent),
                0 1px 3px rgba(0,0,0,0.06),
                inset 0 1px 0 rgba(255,255,255,0.55);
    transition: all 0.12s;
  }
  /* Top-gloss sheen — same technique as the topbar stat tiles */
  .esign-field-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 100%);
    border-radius: 8px 8px 0 0; pointer-events: none; z-index: 0;
  }
  /* Keep icon + label above the gloss layer */
  .esign-field-card > * { position: relative; z-index: 1; }
  .esign-field-card i { color: var(--tile-accent); }
  .esign-field-card:hover {
    background: color-mix(in srgb, var(--tile-accent) 15%, var(--tile-surface));
    border-color: color-mix(in srgb, var(--tile-accent) 45%, transparent);
    color: var(--tile-accent);
    transform: translateY(-1px);
    box-shadow: 0 3px 0 color-mix(in srgb, var(--tile-accent) 22%, transparent),
                0 4px 8px rgba(0,0,0,0.10),
                inset 0 1px 0 rgba(255,255,255,0.55);
  }
  .esign-field-card.active {
    border-color: var(--tile-accent);
    background: var(--tile-accent);
    color: #fff;
    transform: translateY(0);
    box-shadow: 0 2px 0 color-mix(in srgb, var(--tile-accent) 55%, #000),
                0 0 0 2px color-mix(in srgb, var(--tile-accent) 25%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.28);
  }
  .esign-field-card.active i { color: #fff; }
  .esign-field-card.disabled { opacity:0.4; pointer-events:none; cursor:not-allowed; }
  .esign-field-card i { width:12px; height:12px; }
  /* Cursor signals draggability — users can either click then click on
     the PDF (existing behavior) or drag a card straight onto the PDF. */
  .esign-field-card[draggable="true"] { cursor: grab; }
  .esign-field-card[draggable="true"]:active {
    cursor: grabbing; transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.10), 0 0 0 rgba(0,0,0,0);
  }
  .esign-field-card.dragging { opacity: 0.6; }
  /* Editor-only fields (Add text / White out) — dashed border, slightly
     tinted so they read as distinct from signer-fillable fields. */
  .esign-field-card-editor {
    background: color-mix(in srgb, var(--tile-accent) 4%, var(--tile-surface2));
    border-style: dashed;
    border-color: color-mix(in srgb, var(--tile-accent) 32%, transparent);
  }
  /* Dark mode keeps the LIGHT tile design — the palette reads as a bright,
     branded toolbar against the dark panel (CEO call). Only the tile's own
     colour inputs are swapped back to the light-theme values; light mode is
     untouched. */
  [data-theme="dark"] .esign-field-card {
    --tile-accent: #2563eb;
    --tile-surface: #ffffff;
    --tile-surface2: #f5f8ff;
    --tile-ink: #18181b;
  }
  /* Subtle subheader between signer-fields and editor-fields */
  .esign-panel-subtitle {
    font-size:10px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--text3);
    margin: 14px 0 6px;
  }
  /* Drop zone visual when a palette card is being dragged over the PDF */
  .esign-pdf-overlay.esign-drop-target {
    background: rgba(79,139,232,0.06);
    box-shadow: inset 0 0 0 2px rgba(79,139,232,0.45);
  }
  .esign-palette-hint {
    font-size:10px; color:var(--text3); line-height:1.4; text-align:center;
    padding:8px; border:1px dashed var(--border2); border-radius:6px;
    background:var(--bg2);
  }
  .esign-palette-hint.placing {
    border-style:solid; color:var(--accent); border-color:var(--accent);
    background:rgba(79,139,232,0.06);
  }
  .esign-palette-no-signers {
    text-align:center; padding:14px 6px; font-size:11px; color:var(--text3);
    line-height:1.4;
  }

  /* ── PDF page overlay (where placed fields live) ──────────────────── */
  .esign-pdf-page-wrap {
    position:relative;
    display:inline-block;
    line-height:0;
    box-shadow:var(--shadow-lg);
    border-radius:4px;
    background:#fff;
  }
  .esign-pdf-page-wrap canvas {
    box-shadow:none !important;
    border-radius:4px;
    display:block;
    max-width:100%;
  }
  .esign-pdf-overlay {
    position:absolute; inset:0;
    pointer-events:none;
  }
  body.esign-placing .esign-pdf-overlay {
    pointer-events:auto;
    cursor:crosshair;
  }
  /* Same activation while a palette card is being dragged — without
     this, dragover/drop never fire on the overlay because pointer-events
     is none. Drag must work as the very first action, not only after a
     prior click-to-place. */
  body.esign-dragging .esign-pdf-overlay {
    pointer-events:auto;
  }
  .esign-pdf-overlay .esign-field { pointer-events:auto; }

  /* ── Placed fields ────────────────────────────────────────────────── */
  /* A field dropped onto a dense form (checkboxes, small print) used to wash
     in at 10% opacity — barely more than a tint — so the PDF's own text kept
     showing straight through the placeholder, the two overlapping into an
     unreadable mess. Ruby, 17 Sep: "im having issues with the placeholder or
     feilds options we need to work on this," with a screenshot of a field's
     "Type text…" label sitting directly on top of a form's own printed text.
     A near-opaque fill means the field always reads clearly regardless of
     what's underneath it — true text/PDF-layout-aware collision avoidance
     (moving the field itself) is a bigger feature than an overnight fix. */
  .esign-field {
    position:absolute;
    background: var(--field-bg, #eaf1fc);
    border: 1.5px solid var(--field-color, #4f8be8);
    border-radius: 3px;
    font-size: 11px; font-weight: 500; line-height: 1.1;
    color: var(--field-color, #4f8be8);
    display:flex; align-items:center; gap:3px;
    padding: 0 4px;
    cursor: move;
    user-select: none;
    white-space: nowrap; overflow: hidden;
    font-family:'DM Sans',sans-serif;
    box-sizing: border-box;
    transition: box-shadow 0.12s;
    /* Pointer-event drag relies on these. touch-action: none prevents
       the browser from hijacking the pointer for native pan/zoom on
       touch devices, which used to abort the drag mid-move. */
    touch-action: none;
    -webkit-user-drag: none;
  }
  .esign-field.selected {
    /* The delete/duplicate buttons are positioned outside the field's own
       box (top:-9px) so they read as a floating corner badge. The base
       overflow:hidden (needed to clip long labels/filled content) would
       otherwise clip those buttons to invisible the moment a field is
       selected — the child label already has its own overflow:hidden for
       ellipsis truncation, so this doesn't reopen that clipping. */
    overflow: visible;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
  }
  /* Editor-only fields render their value inline rather than a label.
     Annotation = real text on the doc; Whiteout = solid white block. */
  .esign-field[data-type="annotation"] {
    background: transparent;
    border-color: transparent;
    border-style: dashed;
    color: #111;
    padding: 1px 3px;
    align-items: stretch;
    white-space: normal;
    overflow: visible;
  }
  .esign-field[data-type="annotation"]:hover {
    border-color: rgba(79,139,232,0.35);
  }
  .esign-field.selected[data-type="annotation"] {
    border-color: rgba(79,139,232,0.5);
  }
  .esign-field[data-type="whiteout"] {
    background: #ffffff;
    border-style: dashed;
    border-color: rgba(220, 38, 38, 0.45);
    color: #dc2626;
  }
  .esign-field[data-type="whiteout"] .esign-field-icon,
  .esign-field[data-type="whiteout"] .esign-field-label {
    opacity: 0.6;
  }
  .esign-field[data-type="checkbox"],
  .esign-field[data-type="radio"] {
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  .esign-field[data-type="checkbox"] .esign-field-icon i,
  .esign-field[data-type="radio"]    .esign-field-icon i { width: 14px; height: 14px; }
  .esign-field[data-type="checkbox"] .esign-field-label,
  .esign-field[data-type="radio"]    .esign-field-label { display: none; }
  /* Inline editor for annotation — shown when the field is selected */
  .esign-field-annotation-input {
    width: 100%; height: 100%;
    border: none; background: transparent;
    font: inherit; color: inherit; padding: 0;
    outline: none; resize: none;
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
    line-height: 1.35;
  }
  .esign-field-icon { flex:0 0 auto; display:inline-flex; }
  .esign-field-icon i { width:11px; height:11px; }
  .esign-field-label { flex:1; overflow:hidden; text-overflow:ellipsis; }
  .esign-field-delete {
    position:absolute; top:-9px; right:-9px;
    width:18px; height:18px; border-radius:50%;
    background:#dc2626; color:#fff; border:none;
    display:none; align-items:center; justify-content:center;
    cursor:pointer; padding:0;
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
  }
  .esign-field-delete i { width:10px; height:10px; color:#fff; }
  .esign-field.selected .esign-field-delete { display:flex; }
  .esign-field-duplicate {
    position:absolute; top:-9px; right:14px;
    width:18px; height:18px; border-radius:50%;
    background:#2563eb; color:#fff; border:none;
    display:none; align-items:center; justify-content:center;
    cursor:pointer; padding:0;
    box-shadow:0 1px 4px rgba(0,0,0,0.25);
  }
  .esign-field-duplicate i { width:10px; height:10px; color:#fff; }
  .esign-field.selected .esign-field-duplicate { display:flex; }
  .esign-field-resize {
    position:absolute; right:-1px; bottom:-1px;
    width:10px; height:10px;
    background: var(--field-color, #4f8be8);
    cursor: nwse-resize;
    border-radius: 0 0 3px 0;
    display: none;
  }
  .esign-field.selected .esign-field-resize { display:block; }

  /* Filled-signature field: show the PNG image, hide the placeholder chrome */
  .esign-field.esign-field-filled {
    background: transparent !important;
    border-color: rgba(21,128,61,0.35) !important;
    padding: 0;
  }
  .esign-field.esign-field-filled .esign-field-icon,
  .esign-field.esign-field-filled .esign-field-label { display: none; }
  .esign-field-filled-img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
    pointer-events: none; border-radius: 2px;
  }
  /* Filled text/date value shown in the field box */
  .esign-field-filled-text {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 500; color: #1a2f5c;
    padding: 2px 4px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; pointer-events: none;
  }
  /* Signer status badge inside the recipients panel */
  .esign-recipient-status {
    font-size: 11px; font-weight: 500;
    padding: 4px 8px; border-radius: 5px; margin-top: 6px;
    display: flex; align-items: center; gap: 5px;
  }
  .esign-recipient-status.signed {
    background: rgba(21,128,61,0.10); color: #15803d;
    border: 1px solid rgba(21,128,61,0.22);
  }
  .esign-recipient-status.pending {
    background: rgba(201,168,99,0.10); color: #c9a863;
    border: 1px solid rgba(201,168,99,0.25);
  }
  .esign-recipient-status i { width: 12px; height: 12px; }

  /* Signer name tag — colored strip pinned to the top of signature/initial fields */
  .esign-field-signer-tag {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 13px; line-height: 13px;
    padding: 0 5px;
    background: var(--field-color, #4f8be8);
    color: #fff;
    font-size: 8px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 2px 2px 0 0;
    pointer-events: none;
    z-index: 2;
  }
  /* Push the signature image down so it doesn't sit under the name tag */
  .esign-field.has-signer-tag .esign-field-filled-img {
    margin-top: 13px;
    height: calc(100% - 13px);
  }

  .esign-pdf-wrap {
    background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:18px; overflow:auto; min-height:0;
    box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  #esign-pdf-pages { display:flex; flex-direction:column; align-items:center; gap:14px; }
  #esign-pdf-pages canvas {
    background:#fff; box-shadow:var(--shadow-lg); border-radius:4px;
    display:block; max-width:100%;
  }
  @media (max-width:980px) {
    .esign-builder-layout { grid-template-columns:1fr; grid-template-rows:none; }
    .esign-builder-layout > .esign-palette,
    .esign-builder-layout > .esign-recipients,
    .esign-builder-layout > .esign-pdf-wrap { grid-column:auto; grid-row:auto; }
    .esign-palette, .esign-recipients { max-height:200px; }
  }

  /* ── E-Sign Templates ─────────────────────────────────────────────── */
  .esign-template-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:5px; font-size:11px; font-weight:600;
    letter-spacing:0.3px; background:rgba(37,99,235,0.13); color:#2563eb;
    flex-shrink:0;
  }
  [data-theme="dark"] .esign-template-badge { background:rgba(96,165,250,0.18); color:#93c5fd; }
  .esign-template-badge i { width:12px; height:12px; }
  /* Template rows in the list table */
  .esign-table tbody tr.esign-tpl-row td:first-child .esign-tpl-label {
    display:inline-block; font-size:10px; font-weight:600; letter-spacing:0.3px;
    color:#2563eb; background:rgba(37,99,235,0.1); padding:1px 5px; border-radius:3px;
    margin-right:6px; vertical-align:middle;
  }
  /* Tab highlight for Templates */
  #esign-status-filter option[value="templates"] { font-weight:600; }
  /* View-switcher pills (Documents / Templates) — base styles */
  .esign-view-tabs {
    display:inline-flex; border:1px solid var(--border2); border-radius:var(--radius);
    overflow:hidden; height:32px; flex-shrink:0;
  }
  .esign-view-tab {
    display:inline-flex; align-items:center; gap:5px;
    padding:0 13px; font-size:12px; font-weight:500;
    background:var(--bg); color:var(--text2);
    border:none; border-right:1px solid var(--border2);
    cursor:pointer; transition:all 0.15s; white-space:nowrap;
  }
  .esign-view-tab i { width:13px; height:13px; }
  .esign-view-tab:last-child { border-right:none; }
  .esign-view-tab:hover { color:var(--text); }
  .esign-view-tab.active { background:var(--accent); color:#0b1018; font-weight:600; }
  /* Template card gallery */
  .esign-tpl-gallery {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
    gap:14px; align-content:start; width:100%;
  }
  .esign-tpl-card {
    background:var(--bg); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:16px;
    cursor:pointer; transition:all 0.15s;
    box-shadow:var(--shadow-md);
    display:flex; flex-direction:column; gap:10px;
  }
  .esign-tpl-card:hover {
    border-color:rgba(37,99,235,0.45);
    box-shadow:0 0 0 3px rgba(37,99,235,0.10), var(--shadow-md);
    transform:translateY(-1px);
  }
  .esign-tpl-card-icon {
    width:34px; height:34px; flex-shrink:0;
    background:linear-gradient(135deg,rgba(37,99,235,0.12),rgba(59,130,246,0.08));
    border:1px solid rgba(37,99,235,0.22); border-radius:9px;
    display:flex; align-items:center; justify-content:center; color:#2563eb;
  }
  .esign-tpl-card-icon i { width:17px; height:17px; }
  .esign-tpl-card-title {
    font-weight:600; font-size:14px; color:var(--text);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
  }
  .esign-tpl-card-meta {
    font-size:11px; color:var(--text3); display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;
  }
  .esign-tpl-card-roles { display:flex; flex-wrap:wrap; gap:5px; min-height:22px; }
  .esign-tpl-card-role {
    font-size:11px; padding:2px 8px;
    background:var(--bg2); border:1px solid var(--border);
    border-left-width:3px; border-radius:12px; color:var(--text2);
  }
  .esign-tpl-card-actions { display:flex; gap:6px; margin-top:auto; }
  .esign-tpl-card-actions .btn {
    flex:1; justify-content:center; font-size:12px; height:30px; padding:0 10px;
  }
  .esign-tpl-use-btn {
    background:linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    border:none !important; color:#fff !important;
  }
  .esign-tpl-del-btn { flex:0 !important; padding:0 8px !important; }
  /* Use-template modal */
  #esign-usetpl-overlay { position:fixed; inset:0; background:rgba(10,20,50,0.45); z-index:1200; display:none; }
  #esign-usetpl-overlay.open { display:block; }
  #esign-usetpl-modal {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.96);
    background:var(--bg); border:1px solid var(--border2); border-radius:14px;
    box-shadow:0 16px 48px rgba(10,20,70,0.22); z-index:1201;
    width:min(560px, 96vw); max-height:90vh; display:flex; flex-direction:column;
    opacity:0; transition:opacity 0.15s, transform 0.15s; pointer-events:none;
  }
  #esign-usetpl-modal.open { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:all; }
  .usetpl-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
  .usetpl-head h3 { margin:0; font-size:15px; font-weight:600; }
  .usetpl-body { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:16px; }
  .usetpl-role-block { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; position:relative; }
  .usetpl-role-title {
    font-size:12px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase;
    color:var(--text2); margin:0 0 10px; display:flex; align-items:center; gap:6px;
  }
  .usetpl-role-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
  .usetpl-role-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  /* position:relative so the contact-search dropdown (top:100%) anchors directly
     under the name input, not under the whole role block (which was pushing it
     down past the email/phone row and out of the visible popup). */
  .usetpl-role-fields .full { grid-column:1/-1; position:relative; }
  .usetpl-foot { padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }
  /* Dropdown field type chip in palette */
  .esign-field-card[data-field-type="dropdown"] { }
  /* Options editor for dropdown fields */
  .esign-dropdown-opts-wrap { margin-top:8px; }
  .esign-dropdown-opt-row { display:flex; gap:4px; align-items:center; margin-bottom:4px; }
  .esign-dropdown-opt-row input { flex:1; }
  .esign-add-opt-btn { font-size:11px; color:var(--accent-text); cursor:pointer; background:none; border:none; padding:2px 4px; }
  .esign-add-opt-btn:hover { text-decoration:underline; }