/* MetaPi TPMS — shared six-box PIN entry component.
   Progressively enhances any <input class="pin-box"> field (see pin-input.js).
   Used across applicant, candidate, trainer, and admin auth screens —
   one shared implementation instead of a per-portal one-off each. */

.pin-input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: nowrap;
}

.pin-input-group input {
    width: 48px;
    height: 56px;
    padding: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    font-family: inherit;
    color: #0f172a;
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    -moz-appearance: textfield;
}

.pin-input-group input::-webkit-outer-spin-button,
.pin-input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pin-input-group input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.pin-input-group input.filled {
    border-color: #93c5fd;
    background: #f0f6ff;
}

.pin-input-group.pin-error input {
    border-color: #dc2626;
    animation: pinShake .32s ease;
}

@keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

@media (max-width: 420px) {
    .pin-input-group { gap: 7px; }
    .pin-input-group input { width: 40px; height: 48px; font-size: 20px; }
}

/* PIN-UI-1 (owner, 2026-09-28): validity timer, expired state, held resend. */
.pin-timer { margin: 0 0 12px; text-align: left; }
.pin-timer-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #334155; margin-bottom: 6px; }
.pin-timer-value { font-variant-numeric: tabular-nums; }
.pin-track { height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.pin-track i { display: block; height: 100%; width: 100%; background: #22c55e; border-radius: 99px; transition: width .9s linear, background .3s; }
.pin-timer.is-amber .pin-track i { background: #f59e0b; }
.pin-timer.is-red .pin-track i { background: #ef4444; }
.pin-input-group.pin-expired input { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
.pin-expired-note { margin: 10px 0 0; text-align: center; font-size: 13.5px; font-weight: 600; color: #b45309; }
.pin-spam-hint { display: block; margin-top: 4px; font-size: 12.5px; color: #64748b; font-weight: 400; }
[data-pin-resend]:disabled { opacity: .6; cursor: not-allowed; }
.pin-resend-ready, button.pin-resend-ready { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; opacity: 1; }

/* PIN-UI-1 follow-up (owner, 2026-09-28): the Verify button says what it does
   and shows its state - grey while digits are missing, green with a tick once
   all six are in; Resend reads as a quiet link until the PIN expires. */
.pin-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease; }
.pin-submit.is-waiting, .pin-submit.is-waiting:hover { background: #e5e9f0 !important; background-image: none !important; color: #94a3b8 !important; border-color: #e5e9f0 !important; box-shadow: none !important; cursor: not-allowed; transform: none; }
.pin-submit.is-ready { background: linear-gradient(135deg, #16a34a, #15803d) !important; color: #fff !important; border-color: #15803d !important; box-shadow: 0 8px 20px rgba(22, 163, 74, .28) !important; animation: pinReady .35s ease; cursor: pointer; }
.pin-submit.is-ready:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 163, 74, .34) !important; }
.pin-submit-tick { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pin-submit-spin { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: pinSpin .7s linear infinite; flex: none; }
@keyframes pinReady { 0% { transform: scale(.97); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes pinSpin { to { transform: rotate(360deg); } }
.pin-input-group.pin-complete input { border-color: #22c55e; background: #f0fdf4; }
.pin-resend-lead { font-size: 13.5px; color: #64748b; }
[data-pin-resend] { background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: #2563eb !important; font-weight: 700; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px !important; min-height: 0 !important; width: auto !important; cursor: pointer; }
[data-pin-resend]:disabled { color: #94a3b8 !important; text-decoration: none; cursor: not-allowed; opacity: 1; }
[data-pin-resend].pin-resend-ready { background: #2563eb !important; color: #fff !important; text-decoration: none; padding: 11px 22px !important; border-radius: 10px !important; font-size: 14.5px; }
.pin-back-link { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #64748b; text-decoration: none; }
.pin-back-link:hover { color: #0f172a; }
.pin-resend-lead, [data-pin-resend] { align-self: center; vertical-align: middle; }
/* Owner, 2026-09-28: on the Candidate Portal PIN screens the label, the buttons
   and the "Didn't get it?" line sit centred under the six boxes. */
.pin-label { display: block; text-align: center; }
.pin-actions { justify-content: center; align-items: center; }
.pin-resend-row { margin-top: 14px; gap: 6px; }