/* Card reading block on the check-in pages (/appointment/group and
 * /appointment/group/self; the public page has no reader input).
 *
 * Three ways in: the USB barcode reader types into #scan_capture, the camera
 * and a picked photo are the two .scan-source buttons. On a desk the reader
 * leads; on a phone nobody has one, so the two buttons move to the top. */

.scan-dock {
    --scan-accent: var(--bs-primary, #0d6efd);
    --scan-accent-rgb: var(--bs-primary-rgb, 13, 110, 253);
    --scan-line: #ced4da;
    --scan-muted: #6c757d;
    display: flex;
    flex-direction: column;
}

/* -- barcode reader input ------------------------------------------------ */

.scan-dock__reader {
    position: relative;
}

.scan-dock__reader-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--scan-muted);
    stroke-width: 1.6;
    stroke-linecap: round;
    pointer-events: none;
    transition: stroke 0.15s;
}

.scan-dock__reader .form-control {
    padding-left: 2.5rem;
    min-height: 2.75rem;
}

/* The reader only works while this input has focus; make that state obvious. */
.scan-dock__reader:focus-within .scan-dock__reader-icon {
    stroke: var(--scan-accent);
}

/* -- divider --------------------------------------------------------------- */

.scan-dock__or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    color: var(--scan-muted);
    font-size: 0.8125rem;
}

.scan-dock__or::before,
.scan-dock__or::after {
    content: "";
    flex: 1;
    border-top: 1px solid #e3e6ea;
}

/* -- camera / photo buttons ----------------------------------------------- */

.scan-dock__sources {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.scan-source {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--scan-line);
    border-radius: 0.5rem;
    background: #fff;
    color: inherit;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

/* A dashed edge is the familiar cue for "pick a file". */
.scan-source--file {
    border-style: dashed;
}

.scan-source:hover:not(:disabled) {
    border-color: var(--scan-accent);
    background: rgba(var(--scan-accent-rgb), 0.04);
}

.scan-source:active:not(:disabled) {
    background: rgba(var(--scan-accent-rgb), 0.09);
}

.scan-source:focus-visible {
    outline: 0;
    border-color: var(--scan-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--scan-accent-rgb), 0.25);
}

.scan-source__icon {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--scan-accent-rgb), 0.1);
    fill: none;
    stroke: var(--scan-accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scan-source__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scan-source__title {
    font-weight: 600;
    line-height: 1.3;
}

.scan-source__sub {
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--scan-muted);
}

/* group_checkin.js disables the photo button while it decodes: swap the icon
 * for a spinner so the wait reads as work, not as a dead button. */
.scan-source__spinner {
    display: none;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 3px solid rgba(var(--scan-accent-rgb), 0.2);
    border-top-color: var(--scan-accent);
    animation: scan-spin 0.8s linear infinite;
}

.scan-source:disabled {
    cursor: progress;
    border-color: rgba(var(--scan-accent-rgb), 0.5);
}

.scan-source:disabled .scan-source__icon {
    display: none;
}

.scan-source:disabled .scan-source__spinner {
    display: block;
}

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

@media (prefers-reduced-motion: reduce) {
    .scan-source__spinner {
        animation-duration: 2.4s;
    }
}

/* group_checkin.js rewrites the hint's class, so style it by id. */
.scan-dock #scan_hint {
    margin-top: 0.5rem;
}

/* -- phones ---------------------------------------------------------------- */

@media (max-width: 575.98px) {
    /* No barcode reader on a phone: camera and photo come first. */
    .scan-dock__sources {
        order: 1;
    }
    .scan-dock__or {
        order: 2;
    }
    .scan-dock__reader {
        order: 3;
    }
    #scan_hint {
        order: 4;
    }

    /* Two thumb-sized tiles side by side, icon on top. */
    .scan-source {
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
        min-height: 7rem;
        padding: 1rem 0.5rem;
        text-align: center;
    }

    .scan-source__icon,
    .scan-source__spinner {
        width: 3rem;
        height: 3rem;
        padding: 0.625rem;
    }

    .scan-source__spinner {
        padding: 0;
    }

    .scan-source__sub {
        display: none;
    }

    /* The camera panel is scrolled to the top of the screen when it opens.
     * A phone's portrait stream would otherwise be taller than the screen,
     * leaving the controls below the fold; fix the shape up front so the
     * panel does not jump when the stream starts. Cropping keeps the centre,
     * which is where the guide frame points. */
    #scan_camera_box {
        scroll-margin-top: 0.75rem;
    }

    #scan_video {
        aspect-ratio: 4 / 5;
        max-height: 62vh;
        max-height: 62svh;
        object-fit: cover;
        background: #000;
    }

    #scan_camera_stop {
        width: 100%;
        min-height: 2.75rem;
    }
}