/* ============================================================================
   VRYNO SIGN -- the pieces the module was missing
   ============================================================================
   Nothing here introduces a new visual language. Every surface below is built
   from the tokens and the card shapes the Sign pages already use:

     .section-card / .section-card-header / .section-heading / .section-card-body
     .recipient-card / .recipient-number / .field-chip / .route-item

   What is new is the field editor canvas, which had no precedent in the
   project, and a handful of small parts (the signature pad, the audit
   timeline) that follow the same card grammar.

   ON DARK MODE -- read this before adding a rule.

   This theme inverts its own scale rather than keeping one set of greys and
   swapping the background. In dark, --gray-900 is #D9DCFF and --gray-300 is
   #08081A; --white is #030318 and --border-color is #161641. So a rule written
   with the tokens is already correct in both themes, and a dark override is
   not only unnecessary, it is how you get dark text on a dark card -- which is
   exactly what the first draft of this file did by reaching for a literal
   #4b5563 and a [data-theme="dark"] block to undo it.

   So: no literal greys, no literal #fff, and no dark block. The one exception
   is the document itself. A page in the field editor is a sheet of paper and
   stays white in both themes, along with the grey rules printed on it -- the
   same decision the send page's preview already made.
============================================================================ */

/* ==========================================================================
   1. FIELD EDITOR -- palette, canvas, placed fields
   ========================================================================== */

.vr-fe-wrap {
    max-width: 1500px;
    margin: 0 auto;
}

/* ---- the field palette on the left ---- */

.vr-fe-palette {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vr-fe-tool {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--white);
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-800);
    cursor: grab;
    user-select: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.vr-fe-tool:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgb(1 73 255 / 10%);
}

.vr-fe-tool:active {
    cursor: grabbing;
    transform: scale(.97);
}

.vr-fe-tool i {
    font-size: 15px;
    color: var(--primary);
    flex-shrink: 0;
}

/* ---- the recipient picker: whose field is being placed ---- */

.vr-fe-signer {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--white);
    cursor: pointer;
    margin-bottom: 7px;
    transition: border-color .15s ease, background .15s ease;
}

.vr-fe-signer:last-child {
    margin-bottom: 0;
}

/* currentColor is the recipient's own colour, set inline per row */
.vr-fe-signer.active {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 9%, var(--white));
}

.vr-fe-signer-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.vr-fe-signer-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.2;
}

.vr-fe-signer-mail {
    font-size: 10.5px;
    color: var(--gray-500);
    line-height: 1.3;
}

.vr-fe-signer-count {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, currentColor 16%, transparent);
    color: inherit;
}

/* ---- the document canvas ---- */

.vr-fe-canvas {
    background: var(--light);
    border-radius: 10px;
    padding: 18px;
    max-height: calc(100vh - 290px);
    overflow: auto;
}

/* A page is paper. It is white in both themes, because a document that turns
   navy in dark mode stops reading as the thing being signed. */
.vr-fe-page {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 18px;
    aspect-ratio: 8.5 / 11;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 3px 16px rgb(30 20 90 / 9%);
    overflow: hidden;
}

.vr-fe-page:last-child {
    margin-bottom: 0;
}

.vr-fe-page.vr-fe-drop {
    outline: 2px dashed var(--primary);
    outline-offset: -6px;
}

.vr-fe-page-no {
    position: absolute;
    right: 9px;
    bottom: 7px;
    font-size: 10px;
    color: #9ca3af;
    pointer-events: none;
}

/* The fixture document body: the same grey rules the send page's preview
   uses, so a page reads as a document without shipping a real PDF. Printed on
   the paper, so literal greys are right here. */
.vr-fe-para {
    height: 7px;
    border-radius: 3px;
    background: #eceef4;
    margin: 0 0 9px;
}

.vr-fe-heading {
    height: 11px;
    border-radius: 3px;
    background: #dcdfe9;
    margin: 0 0 14px;
}

/* ---- a field placed on a page ---- */

.vr-fe-field {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    border: 1.5px solid currentColor;
    border-radius: 5px;
    background: color-mix(in srgb, currentColor 13%, #fff);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    cursor: move;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
}

.vr-fe-field i {
    font-size: 12px;
    flex-shrink: 0;
}

.vr-fe-field.selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
    z-index: 3;
}

.vr-fe-field[data-required="1"]::after {
    content: "*";
    color: var(--danger, #e11d48);
    font-size: 12px;
    margin-left: 1px;
}

.vr-fe-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #fff;
    border: 1.5px solid currentColor;
    cursor: nwse-resize;
    display: none;
}

.vr-fe-field.selected .vr-fe-handle {
    display: block;
}

/* ---- the empty state before anything is placed ---- */

.vr-fe-hint {
    position: absolute;
    inset: auto 0 auto 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    pointer-events: none;
    padding: 0 24px;
}

.vr-fe-hint i {
    display: block;
    font-size: 26px;
    margin-bottom: 6px;
    opacity: .6;
}

/* ---- the placed-field list on the right ---- */

.vr-fe-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 11.5px;
    color: var(--gray-800);
    cursor: pointer;
    background: var(--white);
}

.vr-fe-list-item:last-child {
    margin-bottom: 0;
}

.vr-fe-list-item.selected {
    border-color: var(--primary);
    background: var(--primary-transparent);
}

.vr-fe-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- canvas toolbar (zoom, page count) ---- */

.vr-fe-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--white);
    color: var(--gray-900);
    margin-bottom: 12px;
}

/* ==========================================================================
   2. SIGNATURE PAD -- draw / type / upload
   ========================================================================== */

.vr-sig-pad {
    width: 100%;
    height: 150px;
    border: 1px dashed var(--border-color);
    border-radius: 9px;
    background: var(--white);
    display: block;
    cursor: crosshair;
    touch-action: none;
}

.vr-sig-typed {
    height: 150px;
    border: 1px dashed var(--border-color);
    border-radius: 9px;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--gray-900);
    overflow: hidden;
    padding: 0 16px;
}

.vr-sig-face {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.vr-sig-face button {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white);
    padding: 5px 13px;
    font-size: 19px;
    line-height: 1.3;
    cursor: pointer;
    color: var(--gray-900);
}

.vr-sig-face button.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-transparent);
}

/* ==========================================================================
   3. AUDIT TRAIL -- the event timeline
   ========================================================================== */

.vr-audit {
    position: relative;
    padding-left: 26px;
}

.vr-audit::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border-color);
}

.vr-audit-item {
    position: relative;
    padding-bottom: 16px;
}

.vr-audit-item:last-child {
    padding-bottom: 0;
}

.vr-audit-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-transparent);
}

.vr-audit-item[data-tone="success"]::before {
    background: var(--success, #16a34a);
    box-shadow: 0 0 0 3px rgb(22 163 74 / 15%);
}

.vr-audit-item[data-tone="danger"]::before {
    background: var(--danger, #e11d48);
    box-shadow: 0 0 0 3px rgb(225 29 72 / 15%);
}

.vr-audit-item[data-tone="muted"]::before {
    background: var(--gray-400);
    box-shadow: 0 0 0 3px rgb(134 135 135 / 22%);
}

.vr-audit-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
}

.vr-audit-meta {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 1px;
}

/* ==========================================================================
   4. BULK SEND -- the recipient sheet preview
   ========================================================================== */

.vr-bulk-table {
    border: 1px solid var(--border-color);
    border-radius: 9px;
    overflow: hidden;
    font-size: 11.5px;
}

.vr-bulk-table table {
    width: 100%;
    margin: 0;
}

.vr-bulk-table th {
    background: var(--light);
    font-weight: 600;
    font-size: 11px;
    color: var(--gray-700);
    padding: 7px 10px;
    white-space: nowrap;
}

.vr-bulk-table td {
    padding: 7px 10px;
    border-top: 1px solid var(--border-color);
    color: var(--gray-800);
}

/* ==========================================================================
   5. SMALL SCREENS
   ========================================================================== */

@media (max-width: 991.98px) {
    .vr-fe-canvas {
        max-height: none;
        padding: 12px;
    }

    .vr-fe-palette {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .vr-fe-palette {
        grid-template-columns: 1fr 1fr;
    }
}