/* ============================================================================
 * JBH Document Scanner — styles
 * Scoped under .jbh-scan-overlay and #jbhScanOverlay so they don't bleed
 * into the rest of the portal.
 * ==========================================================================*/

.jbh-scan-overlay,
.jbh-scan-overlay * {
    box-sizing: border-box;
}

.jbh-scan-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #222;
}

.jbh-scan-modal {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    max-width: 760px;
    max-height: 95vh;
    overflow: auto;
    position: relative;
    padding: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.jbh-scan-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #555;
}

.jbh-scan-close:hover { color: #000; }

/* ------------------------------------------------------------------- steps */

.jbh-step {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.jbh-step-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.jbh-step-title {
    font-size: 18px;
    font-weight: 600;
}

.jbh-step-sub {
    font-size: 13px;
    color: #666;
}

.jbh-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

/* ------------------------------------------------------------- doc picker */

.jbh-step-picktype h3 {
    margin: 0 0 4px 0;
    font-size: 18px;
}

.jbh-doc-type {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

.jbh-source-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.jbh-source-buttons .jbh-btn {
    flex: 1 1 220px;
    padding: 14px;
    font-size: 16px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    line-height: 1.25;
}

.jbh-source-buttons .jbh-btn[disabled],
.jbh-source-buttons .jbh-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(40%);
}

.jbh-btn-sub {
    display: block;
    flex-basis: 100%;
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
}

.jbh-ico {
    font-size: 20px;
}

/* Native <input type="file"> must be visually removed but stay focusable
   so we can call .click() on it. display:none is overridden by some Power
   Pages base styles, so push it off-screen instead. */
.jbh-scan-overlay .jbh-file-input,
input.jbh-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.jbh-required-label {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.jbh-required-star {
    color: #c0392b;
    margin-left: 2px;
}

.jbh-required-hint {
    font-size: 13px;
    color: #8a4a04;
    background: #fff3d6;
    border: 1px solid #e3b769;
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: -4px;
}

.jbh-input-invalid {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}

.jbh-accepted-formats {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

/* ------------------------------------------------------------------- buttons */

.jbh-btn {
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    background: #f4f4f4;
    color: #222;
    transition: background-color 0.15s, border-color 0.15s;
}

.jbh-btn:hover { background: #e9e9e9; }

.jbh-btn-primary {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.jbh-btn-primary:hover { background: #0067d6; border-color: #0067d6; }

/* Disabled state — used by the preview screen when the blur analyzer
   returns a hard-fail verdict. Neutral gray so it's obviously not clickable
   and easily distinguished from the enabled primary blue. */
.jbh-btn-primary[disabled],
.jbh-btn-primary:disabled {
    background: #dcdcdc;
    border-color: #dcdcdc;
    color: #555555;
    cursor: not-allowed;
}
.jbh-btn-primary[disabled]:hover,
.jbh-btn-primary:disabled:hover {
    background: #dcdcdc;
    border-color: #dcdcdc;
}

.jbh-btn-secondary {
    background: #5a6268;
    color: #fff;
    border-color: #5a6268;
}

.jbh-btn-secondary:hover { background: #484c50; border-color: #484c50; }

.jbh-btn-ghost {
    background: transparent;
    border-color: #ccc;
}

.jbh-btn-ghost:hover { background: #f4f4f4; }

/* --------------------------------------------------------------- camera */

.jbh-camera-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jbh-video {
    display: block;
    width: 100%;
    height: 100%;
    /* Hide the actual video element; we draw the cropped square onto the
       overlay canvas, so highlights and capture share one source. */
    visibility: hidden;
    position: absolute;
    inset: 0;
}

.jbh-live-overlay {
    display: block;
    width: 100%;
    height: 100%;
}

.jbh-camera-guide {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 80%;
    max-height: 80%;
    border: 2px dashed rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.jbh-camera-hint {
    font-size: 13px;
    color: #555;
    background: #fff8e6;
    border: 1px solid #f0d27a;
    padding: 8px 10px;
    border-radius: 6px;
    line-height: 1.35;
}

/* In-camera bottom controls strip — placed inside .jbh-camera-wrap,
   absolutely positioned over the preview so it feels like a camera app. */
.jbh-camera-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: auto;
}

/* Big circular shutter — sits in the centre of the camera-controls strip. */
.jbh-shutter {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    padding: 0;
    margin: 0 auto;
    transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.jbh-shutter:active:not(:disabled):not(.jbh-shutter-disabled) {
    transform: scale(0.92);
}
.jbh-shutter:disabled,
.jbh-shutter.jbh-shutter-disabled {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
    cursor: not-allowed;
}

/* Small side controls (back ✕ / flip ⟲) flanking the shutter. */
.jbh-cam-side {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.jbh-cam-side:hover  { background: rgba(0, 0, 0, 0.75); }
.jbh-cam-side:active { transform: scale(0.94); }

/* ----------------------------------------------------------------- crop */

.jbh-crop-wrap {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    align-self: center;     /* override flex stretch from .jbh-step */
    background: #222;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
    margin: 0 auto;
}

.jbh-crop-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.jbh-crop-handles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.jbh-handle {
    position: absolute;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid #007bff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
}

.jbh-handle:active { cursor: grabbing; }

/* -------------------------------------------------------------- preview */

.jbh-preview-wrap {
    background: #f0f0f0;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

.jbh-preview-canvas {
    max-width: 100%;
    height: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    background: #fff;
}

.jbh-quality-hints {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jbh-hint {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border-left: 4px solid #ccc;
    background: #f8f8f8;
}

.jbh-hint-ok   { border-left-color: #28a745; background: #eaf6ec; }
.jbh-hint-warn { border-left-color: #f0ad4e; background: #fdf3e3; }
.jbh-hint-err  { border-left-color: #d9534f; background: #fbeceb; color: #6a1a17; font-weight: 600; }

/* ---------------------------------------------------------- busy + toast */

.jbh-busy {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 16px;
    border-radius: 10px;
    z-index: 10005;
    /* block clicks on whatever's under us while we're working */
    pointer-events: all;
}

.jbh-busy-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.12);
    border-top-color: #0078d4;
    border-radius: 50%;
    animation: jbh-busy-spin 0.9s linear infinite;
}

.jbh-busy-label {
    color: #333;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Determinate progress bar shown while the OpenCV bundle downloads
   on first visit (~10 MB) and while an annotation upload streams. */
.jbh-busy-bar {
    width: 220px;
    max-width: 70vw;
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    display: none;
}
.jbh-busy-fill {
    height: 100%;
    width: 0%;
    background: #1f6feb;
    transition: width 0.15s ease;
}

@keyframes jbh-busy-spin {
    to { transform: rotate(360deg); }
}

/* In-camera recovery panel — shown when camera permission is denied,
   no camera exists, the camera is in use by another app, or OpenCV
   failed to load. Replaces the live preview so the user sees only
   the recovery path. */
.jbh-camera-error {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.92);
    color: #fff;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    gap: 16px;
}
.jbh-camera-error-icon {
    font-size: 42px;
    line-height: 1;
    color: #ffce4b;
}
.jbh-camera-error-msg {
    font-size: 15px;
    line-height: 1.45;
    max-width: 420px;
}
.jbh-camera-error-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
}
.jbh-camera-error-actions .jbh-btn { width: 100%; }

.jbh-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #333;
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10010;
    max-width: 90%;
    text-align: center;
}

.jbh-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.jbh-toast-ok    { background: #1e7e34; }
.jbh-toast-warn  { background: #c98917; }
.jbh-toast-error { background: #b02a37; }

/* --------------------------------------------------- responsive tweaks */

@media (max-width: 480px) {
    .jbh-scan-modal {
        padding: 14px;
        max-height: 100dvh;     /* dynamic viewport — accounts for iOS Safari chrome */
        height: 100dvh;
        border-radius: 0;
    }
    .jbh-step-title { font-size: 16px; }
    .jbh-btn { padding: 10px 12px; font-size: 14px; }
    .jbh-camera-wrap  { max-width: 100%; max-height: 60dvh; }
    .jbh-step-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 4;
    }
}