/* Signature field actions — the "Sign" / "Edit Signature" pair on the staff signing
   screen (employee/instructor_sign_report/view_sign_report.html.twig).

   Signing is the one thing that screen exists for, so the Sign button carries the
   weight: it sits on the RIGHT, at full size, in solid dark green. Editing the stored
   drawing is housekeeping — it sits left, quiet, and never competes.

   A field with no signature drawn yet has nothing to sign with, so its "Set Signature"
   button takes the same primary treatment on the right: it IS the action there.

   Deliberately its own colour rather than .btn-primary (navy brand) or Bootstrap's
   .btn-success — this is a signing affirmation, not a brand action or a generic
   success, and the green is fixed so it reads the same on every org theme.
   Lives in a real stylesheet rather than the template's inline <style>, which is
   inside a turbo-frame and is not reliably applied on re-render. */

:root {
    /* The house dark green for signing affirmations — every "this is signed / this is
       done" action across the signing screens reads from these two, so there is one
       green rather than a Bootstrap success here and a Tailwind-ish green there. */
    --bit-sign-green: #005720;
    --bit-sign-green-hover: #004018;
}

/* Row layout: quiet action left, primary action right. */
.sig-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sig-actions .sig-spacer {
    margin-left: auto;
}

/* ===== Primary: Sign / Set Signature ===== */
.btn-sign {
    background-color: var(--bit-sign-green);
    border: 1px solid var(--bit-sign-green);
    color: #fff;
    font-weight: 600;
    font-size: .95rem;
    padding: .5rem 1.25rem;
    border-radius: 8px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 87, 32, .25);
    transition: background-color .15s, box-shadow .15s, transform .05s;
}

.btn-sign:hover,
.btn-sign:focus {
    background-color: var(--bit-sign-green-hover);
    border-color: var(--bit-sign-green-hover);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 87, 32, .32);
}

.btn-sign:active {
    transform: translateY(1px);
}

.btn-sign:focus-visible {
    outline: 3px solid rgba(0, 87, 32, .35);
    outline-offset: 2px;
}

/* ===== Secondary: Edit Signature ===== */
.btn-edit-signature {
    background: transparent;
    border: 1px solid #d7dde5;
    color: #64748b;
    font-size: .78rem;
    font-weight: 500;
    padding: .3rem .7rem;
    border-radius: 7px;
    white-space: nowrap;
}

.btn-edit-signature:hover,
.btn-edit-signature:focus {
    background: #f1f5f9;
    border-color: #c3ccd8;
    color: #475569;
}

/* ===== Field name =====
   The field's own name, as a heading. It used to be a bordered button carrying an eye
   icon, which read as an action and competed with the Sign button beside it — while
   only ever scrolling the page image into view. */
.sig-field-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

/* ===== "All done" panel =====
   Shown once every field on the document is signed. The screen previously just ran out
   of Sign buttons, which left the signer with nothing confirming they were finished and
   no obvious way onward. */
.sig-done {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 87, 32, .35);
    border-left: 4px solid var(--bit-sign-green);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 87, 32, .07), rgba(0, 87, 32, .02));
}

.sig-done-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--bit-sign-green);
}

.sig-done-msg i {
    font-size: 1.35rem;
    color: var(--bit-sign-green);
    line-height: 1.2;
}

.sig-done-msg strong {
    display: block;
    font-size: .98rem;
}

.sig-done-msg span {
    display: block;
    font-size: .84rem;
    color: #3f6b4f;
}

/* The way onward — full width so it cannot be mistaken for one more field's action. */
.btn-sign-lg {
    width: 100%;
    font-size: 1.05rem;
    padding: .7rem 1.5rem;
    border-radius: 10px;
}

/* ===== Click a card to find its field =====
   The card is a way to the box on the document, so it says so on hover. Its own
   controls keep their normal cursor. */
.sig-card-jump {
    cursor: pointer;
}

/* Rollover in the org's own Success colour. That setting is a background TINT
   (#def2e6 on this org), which is exactly what a hover wash wants — the border and
   text take the readable dark green so the panel still reads at a glance.
   --bit-success-fg is the theme's paired foreground; it falls back to the same dark
   green rather than to white, which would vanish on the tint. */
.sig-card-jump:hover {
    background-color: color-mix(in srgb, var(--bit-success, #def2e6) 60%, white) !important;
    border-color: color-mix(in srgb, var(--bit-success, #def2e6) 35%, #005f26fc) !important;
    box-shadow: 0 1px 5px color-mix(in srgb, #005f26fc 18%, transparent);
}

.sig-card-jump:hover .sig-field-title {
    color: color-mix(in srgb, #005f26fc 85%, black);
}

.sig-card-jump a,
.sig-card-jump button,
.sig-card-jump input,
.sig-card-jump textarea,
.sig-card-jump label {
    cursor: auto;
}

.sig-card-jump a,
.sig-card-jump button {
    cursor: pointer;
}

/* The box that was jumped to. Pulses rather than staying highlighted: it is an
   answer to "which one", not a new state for the field. Outline rather than border,
   so it cannot shift the box off the position it is drawn at. */
.field-jump-pulse {
    animation: field-jump-pulse 1.5s ease-out 1;
}

@keyframes field-jump-pulse {
    0%   { outline: 4px solid rgba(21, 128, 61, .95); outline-offset: 3px; }
    70%  { outline: 4px solid rgba(21, 128, 61, .45); outline-offset: 3px; }
    100% { outline: 4px solid rgba(21, 128, 61, 0);   outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .field-jump-pulse { animation: none; outline: 4px solid rgba(21, 128, 61, .8); outline-offset: 3px; }
}

/* Tells the signer the cards are clickable. The click target is a whole card rather
   than a named button — quick once you know, invisible until you do. */
.sig-jump-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 6px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: .74rem;
    line-height: 1.3;
}

.sig-jump-hint i {
    color: #94a3b8;
    font-size: .8rem;
}

/* ===== Student signing: the Save that FINISHES the document =====
   signing_fields_controller#refreshSaveButton swaps this in for .btn-brand on the save
   that leaves nothing else owed ("Save and Continue"). Colours only — Bootstrap's .btn
   still owns the sizing, since this button is w-100 in the rail footer and must not
   pick up .btn-sign's own padding.

   NOT .btn-success: Bootstrap's green (#198754) is lighter than the green the rest of
   the signing flow uses, so the one button that means "you're done" was the palest
   green on screen. Same token as .btn-sign instead. */
.btn-sign-finish {
    background-color: var(--bit-sign-green);
    border: 1px solid var(--bit-sign-green);
    color: #fff;
    font-weight: 600;
}

.btn-sign-finish:hover,
.btn-sign-finish:focus,
.btn-sign-finish:active {
    background-color: var(--bit-sign-green-hover);
    border-color: var(--bit-sign-green-hover);
    color: #fff;
}

.btn-sign-finish:focus-visible {
    outline: 3px solid rgba(0, 87, 32, .35);
    outline-offset: 2px;
}

/* Disabled is only ever "nothing to save"; keep it grey so the green means action. */
.btn-sign-finish:disabled {
    background-color: var(--bit-sign-green);
    border-color: var(--bit-sign-green);
    opacity: .55;
}