/*
 * The camera scanner, on both the floor and the office screens.
 *
 * Its own file for the same reason scanner.js is: floor.css and app.css share
 * nothing on purpose, and this is the one thing that genuinely is the same in
 * both places. It leans on the custom properties both of them define, so it
 * takes the colours of whichever screen it opens over.
 *
 * Everything here is added by scanner.js and only on a browser that can read a
 * barcode, so none of it applies unless the camera is actually available.
 */

/* The button that sits next to a field codes are typed into. */
.camera-open {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

/*
 * A small panel in a corner, not a screen.
 *
 * This is the shape the trade uses and it is worth saying why, because bigger
 * is the obvious instinct and it is wrong. A large viewfinder teaches somebody
 * to aim with the screen; the job wants their eyes on the shelf and on the box
 * in their hand, with the phone pointed at it. So the preview is only big
 * enough to tell you the camera is looking roughly the right way -- and every
 * pixel past that is a line of the pick list it is standing on top of.
 *
 * Placed by scanner.js, which also lets it be dragged, because where it is in
 * the way depends on the person, the phone and which hand is free.
 */
.scanner {
    position: fixed;
    width: 176px;
    z-index: 50;
    background: #111827;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 13px;
    line-height: 1.35;

    /*
     * The one thing it must never do is fight the list underneath it for a
     * scroll. It is a fixed panel over a page that stays scrollable.
     */
    touch-action: none;
}

/* Lifted while it is being moved, so it is clearly the thing under the thumb. */
.scanner.moving { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); }

.scanner .peek {
    position: relative;
    height: 120px;
    background: #000;
}

.scanner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Small, in the corner of the preview, out of the way of the picture. */
.scanner .torch {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.scanner .torch.on { background: #fbbf24; color: #1f2933; }

/*
 * What just happened. Two lines at most -- it is a confirmation glanced at, not
 * a message read, and anything longer would need the panel to grow.
 */
.scanner .readout {
    margin: 0;
    padding: 7px 10px;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.scanner .readout.good { color: #6ee7b7; }

.scanner .readout.bad { color: #fca5a5; }

/*
 * The handle, and the way out.
 *
 * One strip: dragging anywhere on it moves the panel, except on the button.
 * Making the whole panel draggable would mean a tap on the torch sometimes
 * moved it instead, which is the kind of thing that is only annoying four
 * hundred times a shift.
 */
.scanner .grip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 10px;
    background: rgba(255, 255, 255, 0.06);
    cursor: grab;
}

.scanner.moving .grip { cursor: grabbing; }

/* The universal "this moves" mark. */
.scanner .grip .bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.scanner .grip .done {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/*
 * Room under the last card so the panel is never parked on top of the only
 * thing left to read. Small, because the panel is small and can be moved.
 */
body[data-scanning] { padding-bottom: 150px; }