/*
 * #779 — THE LICENCE CAPTURE, one stylesheet for every surface that uses it.
 *
 * Ethan, 2026-09-24: "it looks different than the one in the booking multistep
 * form, we should follow dry and reuse the same logic and make a reuseable
 * script or modual that we can reuse in both any places we have ID's".
 *
 * These rules were MOVED, unchanged, out of multistep-form.css, which loads only
 * with the booking form. The markup is templates/partials/licence-capture.php
 * and the behaviour is assets/js/licence-capture.js; the booking form and the
 * renter's Profile tab both render all three. multistep-form.css depends on this
 * sheet, so the booking form loads it first, in the same place in the cascade
 * as before.
 */

.file-input-hidden {
    display: none;
}

.file-preview {
    margin-top: 12px;
}

/* The evidence belongs before the controls: renters should see which physical
   side is missing before choosing a camera or a file. */
.dl-capture-overview {
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid var(--fleet-border-color, #777);
    border-radius: var(--fleet-border-radius, 8px);
}
.dl-capture-overview h3 { margin: 0 0 4px; }
.dl-capture-overview > p { margin: 0; }

/* Fixed slots make the evidence legible: a renter can see which physical side
   has been saved, rather than infer it from the order of two thumbnails. */
.file-preview .dl-capture-slot {
    display: inline-flex;
    vertical-align: top;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
    min-height: 115px;
    margin: 0 12px 12px 0;
    padding: 10px;
    border: 1px dashed var(--fleet-border-color, #777);
    border-radius: var(--fleet-border-radius, 8px);
    color: var(--fleet-text-secondary, inherit);
}
.file-preview .dl-capture-slot-filled { border-style: solid; }
/* A FIXED width, not just a min-width floor. `.dl-file-image` is `width: 100%`
   with `aspect-ratio`, so the slot's shrink-to-fit width came from the PHOTO's
   intrinsic size — a phone shot is thousands of px wide, and the slot grew to
   fill the whole row (Ethan, 2026-09-22: "now these pictures are way too big
   ... It should fit perfectly inside of front and back"). */
.file-preview .dl-capture-slot { width: 280px; box-sizing: border-box; }
/* Inside a slot the item fills it; the slot already carries the cap. This must
   stay MORE specific than the item-level cap below (0-3-0 vs :has at 0-2-0), or
   a 280px item would overflow the slot's 258px content box. */
.file-preview .dl-capture-slot .dl-file-item { width: 100%; }
.file-preview .dl-capture-slot .dl-file-item { margin-right: 0; }
.file-preview .dl-capture-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
}
.file-preview .dl-capture-actions .button { margin: 0; }
.file-preview .dl-capture-actions .camera-button { min-width: 48px; }

.progress-shade {
    margin-top: 12px;
}

.progress-shade.hidden {
    display: none;
}

.progress-shade .progressbar {
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: var(--fleet-border-color, rgba(127, 127, 127, 0.25));
}

.progressbar-inner {
    width: 0%;
    background: var(--fleet-accent-color);
    height: 4px;
    border-radius: 2px;
    transition: width 0.3s;
}


/* The slot's two control glyphs (moved from multistep-form.css with the
   rest of the capture, #779). */
.upload-icon {
    font-size: 18px;
}

.camera-icon {
    font-size: 16px;
}

/* Driver's License File Upload */
.dl-file-item {
    display: inline-block;
    position: relative;
    margin-right: 12px;
    margin-bottom: 12px;
}

/* THE CAP LIVES ON THE ITEM, not on `.dl-capture-slot`.
   Measured on the Parlay sandbox 2026-09-22: a freshly uploaded preview is
   appended to `.dl-capture-overview`, NOT into a front/back slot (both slots
   reported 0 items), so a cap scoped to the slot never reaches the element the
   renter is actually looking at. Unrotated it took `width: 100%` of a full-row
   container -- the "way too big" Ethan reported; rotated it collapsed to 3x2px,
   because `inline-block` + `aspect-ratio` + an absolutely positioned child has
   ZERO intrinsic width.
   `:has(> .dl-file-image)` and not a bare `.dl-file-item`, because a PDF
   preview is a 100px icon: a 280px box around it puts `::after` -- the green
   "Saved" bar, `left:0; right:0` -- under nothing, which is exactly the defect
   #669 fixed. Only a photo frame gets the photo width. */
.dl-file-item:has(> .dl-file-image) {
    width: 280px;
    max-width: 100%;
    box-sizing: border-box;
}

/* #669 · the thumbnail must FILL its frame.
   It was a hard-coded 100x100 square inside `.dl-capture-slot`, whose
   `min-width: 180px` floor stretches `.dl-file-item` (a column flex item) to
   180px. `.dl-file-item::after` is `left:0; right:0`, so the green "Saved"
   bar measured 180px under a 100px image — a bar underlining nothing, with
   the rest of the frame empty. Measured before the fix at both 1280px and
   390px, and for both a portrait and a landscape source, because `object-fit:
   cover` made the source's own shape irrelevant: img=100, bar=180 every time.
   That is also why a landscape licence read as a "small portrait" — it was
   being cropped to a square.
   `aspect-ratio` is the ID-1 card ratio (85.6 x 54 mm), so the frame is
   licence-shaped rather than square, and `max-width` keeps it from
   overflowing a narrow parent. */
.dl-file-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 85.6 / 54;
    object-fit: cover;
    border-radius: var(--fleet-input-border-radius);
    border: 1px solid var(--fleet-accent-color);
}

/* A licence photographed in PORTRAIT is turned upright in the PREVIEW only —
   the stored file is never altered, because it is the evidence. The frame
   stays licence-shaped (ID-1) and the rotated photo covers it exactly: the
   image box is sized to the frame's height x width, so a -90deg turn lands
   flush. 63.08% = 54/85.6, 158.52% = 85.6/54. */
.dl-file-item--rotated {
    position: relative;
    aspect-ratio: 85.6 / 54;
    overflow: hidden;
    border-radius: var(--fleet-input-border-radius);
    border: 1px solid var(--fleet-accent-color);
}

.dl-file-image--rotated {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 63.08%;
    height: 158.52%;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.dl-file-pdf {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fleet-background-panel);
    border: 1px solid var(--fleet-accent-color);
    border-radius: var(--fleet-input-border-radius);
    font-size: 14px;
    color: var(--fleet-accent-color);
}

.dl-file-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f44336;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.dl-file-remove:hover {
    background: #d32f2f;
}

/* Driver's License Camera Modal */
.dl-camera-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dl-camera-container {
    max-width: 800px;
    width: 100%;
    background: var(--fleet-background-dark);
    border-radius: var(--fleet-input-border-radius);
    padding: 20px;
    border: 2px solid var(--fleet-accent-color);
}

.dl-camera-title {
    color: var(--fleet-accent-color);
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
}

.dl-camera-video-container {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 20px;
    background: #000;
    border-radius: var(--fleet-input-border-radius);
    overflow: hidden;
}

.dl-camera-video {
    width: 100%;
    display: block;
}

.dl-camera-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}


/* ── #366 · licence capture state ──────────────────────────────────────────
   A thumbnail alone only proves the BROWSER decoded the file. That is exactly
   the reassurance the old code gave while storing nothing, so each capture
   shows whether the SERVER has it: pending, stored, or failed. */
.dl-file-item.dl-file-uploading { opacity: .55; }
.dl-file-item.dl-file-uploading::after {
    content: "Uploading…";
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, .65); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}
.dl-file-item.dl-file-uploaded { outline: 2px solid #2e7d32; }
.dl-file-item.dl-file-uploaded::after {
    content: "\2713 Saved";
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(46, 125, 50, .9); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}
/* Failed is LOUD on purpose — a silently-lost licence is the whole defect. */
.dl-file-item.dl-file-failed { outline: 2px solid #b3261e; }
.dl-file-item.dl-file-failed::after {
    content: "Not saved — retake";
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(179, 38, 30, .92); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}

/* Taken before the consent box was ticked: held in the browser, NOT saved.
   Red like a failure, because nothing has reached the server — but it says
   what fixes it, and ticking the box sends it (customer-form.js). */
.dl-file-item.dl-file-awaiting-consent { outline: 2px solid #b3261e; }
.dl-file-item.dl-file-awaiting-consent::after {
    content: "Not saved \2014  tick the consent box above";
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(179, 38, 30, .92); color: #fff;
    font-size: 11px; text-align: center; padding: 2px 0;
}
/* The consent refusal is an error, not body copy. */
.dl-consent-error { color: var(--fleet-danger, #f2737f); font-weight: 600; }

/* The consent line (#676), one layout on every surface (#779): the box sits
   beside its text, top-aligned, and takes the tenant's accent colour. */
.dl-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}
.dl-consent-label input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    accent-color: var(--fleet-accent-color, #e0a241);
}
.dl-consent-links { margin: 8px 0 0; }

/* #358 · whether the card was machine-READ, which is not the same as saved.
   A renter seeing only "Saved" cannot tell a scanned licence from a blurry one,
   and retaking it is cheap while they are still standing at the counter. */
.dl-file-item.dl-file-scanned::after   { content: "\2713 Saved \00b7 scanned"; }
.dl-file-item.dl-file-unscanned::after { content: "\2713 Saved \00b7 barcode not detected"; background: rgba(120, 90, 0, .92); }
/* The photo side is not expected to contain a barcode. Calling it unreadable
   trained renters to retake a perfectly stored Front capture. */
.dl-capture-slot[data-dl-side="front"] .dl-file-item.dl-file-unscanned::after {
    content: "\2713 Saved \00b7 front photo";
    background: rgba(46, 125, 50, .9);
}
.dl-capture-slot[data-dl-side="back"] .dl-file-item.dl-file-unscanned::after {
    content: "\2713 Saved \00b7 barcode not detected";
}


/* Which side is still needed. Says "complete" only when the SERVER says so. */
.dl-capture-state { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.dl-capture-incomplete { color: #8a5a00; }
.dl-capture-complete   { color: #2e7d32; }
.dl-capture-error      { color: #b3261e; }


@media (max-width: 600px) {
    .file-preview .dl-capture-slot {
        display: flex;
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        margin-right: 0;
    }

    /* ONE row, and ONE line of label: the add button takes the room and the
       camera stays a 48px square beside it. `wrap` dropped the camera onto a
       line of its own under a full-width button, and a wrapping label made a
       two-line slab of it (Ethan, 2026-09-23: "it could easily fit into one
       line ... even if font has to shrink"). The label scales with the
       viewport — measured at 375px, "Add back — barcode side" needs 177px at
       14px against 173px of room, 166px at 13px — and truncates only if a
       phone narrower than that still cannot fit it. The spans carry their own
       14px, so they must inherit or the button's size never reaches them. */
    .file-preview .dl-capture-actions {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .file-preview .dl-capture-actions .dl-upload-trigger {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(11px, 3.3vw, 14px);
        padding-left: 8px;
        padding-right: 8px;
    }

    .file-preview .dl-capture-actions .dl-upload-trigger > span {
        font-size: inherit;
    }

    .file-preview .dl-capture-actions .camera-button {
        flex: 0 0 48px;
        min-width: 48px;
        padding-left: 0;
        padding-right: 0;
    }
}

/*
 * #784 — a license already on file: one line of facts and a "Replace" link.
 * The button is bare, so a tenant theme would repaint it on hover/focus; it is
 * styled through the armour tokens (fleet-theme-armor.css) AND with plain
 * declarations at the same values, so it reads the same with or without armour.
 */
.dl-on-file {
    /* The armour owns block margin/padding at 0-3-0 on FleetForm pages; its
       tokens carry our values (measured: padding rendered 0 without them). */
    --ff-block-margin-top: 0;
    --ff-block-margin-bottom: 0.75em;
    --ff-block-padding-top: 0.75em;
    --ff-block-padding-right: 1em;
    --ff-block-padding-bottom: 0.75em;
    --ff-block-padding-left: 1em;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25em 0.75em;
    margin: 0 0 0.75em;
    padding: 0.75em 1em;
    border: 1px solid var(--fleet-border-color, #777);
    border-radius: var(--fleet-border-radius, 8px);
    color: var(--fleet-text-color, inherit);
}
.dl-on-file-text {
    overflow-wrap: anywhere;
}
.dl-capture-overview .dl-on-file-replace {
    --ff-btn-bg: transparent;
    --ff-btn-fg: var(--fleet-accent-color, currentColor);
    --ff-btn-border-width: 0;
    --ff-btn-width: auto;
    background: transparent;
    color: var(--fleet-accent-color, currentColor);
    border: 0;
    width: auto;
    /* A thumb-sized target: measured 21px tall at 390px without this. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25em;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ─── Tiles, 2026-09-26 ────────────────────────────────────────────────────
   Ethan: at mid widths the front/back tiles "look really bad … camera's not
   centered, it's outside of its box". The slots were fixed 280px boxes while
   the buttons inside took the theme's large type, so the add button filled the
   slot and pushed the camera past its edge. Now the two slots share the row as
   a grid whose tracks stop at the 280px slot of 2026-09-22 (#722: "these
   pictures are way too big" — a 1fr track let a slot grow to half the row),
   so neither can outgrow its cell, and every width gets the one-line row the
   phone layout already had: the add button flexes and ellipsises, the camera is
   a fixed, centred square. */
.dl-capture-overview .file-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 280px));
    gap: 12px;
}

/* An upload's preview can land in the grid itself, beside the slots (#722's
   "overview" nesting): it keeps its own width, as it did before the grid —
   a PDF icon stays an icon and its "Saved" bar stays under it. */
.dl-capture-overview .file-preview > .dl-file-item {
    justify-self: start;
    align-self: start;
}

.dl-capture-overview .file-preview .dl-capture-slot {
    display: flex;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.dl-capture-overview .file-preview .dl-capture-actions {
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}

.dl-capture-overview .file-preview .dl-capture-actions .dl-upload-trigger {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Shrinks with the viewport before it truncates — Ethan, 2026-09-23: "it
       could easily fit into one line ... even if font has to shrink". A fixed
       14px here outranked the phone rule's clamp, so at 375px "Add back —
       barcode side" was cut to "barcode s…" (measured 2026-09-27; the clamp
       gives 12.4px and the whole label). */
    font-size: clamp(11px, 3.3vw, 14px);
    line-height: 1.2;
    --ff-btn-width: auto;
}

.dl-capture-overview .file-preview .dl-capture-actions .dl-upload-trigger > span {
    font-size: inherit;
}

.dl-capture-overview .file-preview .dl-capture-actions .camera-button {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    --ff-btn-width: 44px;
}

.dl-capture-overview .file-preview .dl-capture-actions .camera-button .camera-icon {
    display: block;
    margin: 0;
}

/* The consent: one line on the box, the full terms one click away. */
.dl-consent-details {
    margin: 4px 0 0 28px;
    font-size: 0.9em;
}

.dl-consent-details > summary {
    cursor: pointer;
    color: var(--fleet-accent-color, #e0a241);
}

.dl-consent-details .dl-consent-terms {
    margin: 6px 0;
    color: var(--fleet-text-secondary, #ccc);
}