/*
 * Styles for the order picking workbench (App\Filament\Pages\ProcessOrders).
 *
 * Written as plain CSS on purpose: this project has no compiled Tailwind
 * bundle (there is no public/build, and the panel falls back to Filament's
 * precompiled stylesheet, which ships only .fi-* component classes). Utility
 * classes written in a Blade view therefore do not exist at runtime. This
 * file is registered through FilamentAsset in AppServiceProvider and served
 * from public/css/app, so it needs no build step.
 *
 * Colours come from the panel's own CSS variables so the page follows the
 * active theme, with .dark overrides for dark mode.
 */

.po {
    --po-surface: #fff;
    --po-soft: var(--gray-50);
    --po-line: rgb(0 0 0 / 8%);
    --po-text: var(--gray-950);
    --po-muted: var(--gray-500);

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dark .po {
    --po-surface: var(--gray-900);
    --po-soft: rgb(255 255 255 / 5%);
    --po-line: rgb(255 255 255 / 10%);
    --po-text: #fff;
    --po-muted: var(--gray-400);
}

/* ---------------------------------------------------------------- stats */

.po-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.po-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--po-surface);
    border: 1px solid var(--po-line);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}

.po-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
}

.po-stat-icon .fi-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.po-stat-logo {
    max-width: 1.875rem;
    max-height: 1.875rem;
    object-fit: contain;
}

.po-stat-icon--primary {
    background: color-mix(in oklab, var(--primary-500) 14%, transparent);
}

.po-stat-icon--primary .fi-icon {
    color: var(--primary-600);
}

.po-stat-icon--gray {
    background: color-mix(in oklab, var(--gray-500) 14%, transparent);
}

.po-stat-icon--gray .fi-icon {
    color: var(--gray-600);
}

.po-stat-icon--success {
    background: color-mix(in oklab, var(--success-500) 14%, transparent);
}

.po-stat-icon--success .fi-icon {
    color: var(--success-600);
}

/* Same colours as the carrier chips (App\Support\Shipping\Carrier), so the
   morning-vs-afternoon split reads as the same two carriers everywhere. */
.po-stat-icon--ampere {
    background: color-mix(in oklab, #00cc7b 16%, transparent);
}

.po-stat-icon--ampere .fi-icon {
    color: #00a866;
}

.po-stat-icon--postnl {
    background: color-mix(in oklab, #ff6200 16%, transparent);
}

.po-stat-icon--postnl .fi-icon {
    color: #d95400;
}

.dark .po-stat-icon--gray .fi-icon {
    color: var(--gray-300);
}

.po-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--po-text);
}

.po-stat-label {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--po-muted);
}

/* ------------------------------------------------------ processed banner */

.po-processed {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: color-mix(in oklab, var(--success-500) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--success-500) 35%, transparent);
    border-radius: 0.75rem;
}

.po-processed .fi-icon {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--success-600);
}

.po-processed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.po-processed-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--po-text);
}

.po-processed-detail {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--po-muted);
}

/* --------------------------------------------------------------- notice */

.po-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--po-muted);
    background: var(--po-soft);
    border: 1px solid var(--po-line);
    border-radius: 0.75rem;
}

.po-notice .fi-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
}

.po-notice a {
    font-weight: 600;
    color: var(--primary-600);
}

.po-notice a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------- layout */

.po-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1279px) {
    .po-columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .po-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------- current order card */

.po-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.po-order-id {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--po-text);
}

.po-batch {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--primary-600);
    background: color-mix(in oklab, var(--primary-500) 10%, transparent);
    border-radius: 0.5rem;
}

.dark .po-batch {
    color: var(--primary-400, var(--primary-500));
}

.po-batch .fi-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    color: inherit;
}

.po-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.po-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--po-soft);
    border-radius: 0.5rem;
}

.po-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
    background: var(--po-surface);
    border: 1px solid var(--po-line);
    border-radius: 0.375rem;
}

.po-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.po-thumb .fi-icon {
    width: 40%;
    height: 40%;
    color: var(--gray-400);
}

.po-thumb--line {
    width: 86px;
    height: 86px;
}

.po-thumb--queue {
    width: 50px;
    height: 50px;
}

.po-line-body {
    min-width: 0;
    flex: 1 1 auto;
}

.po-line-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/*
 * Quantity reads as part of the product line at 1 — the common case, where
 * calling it out would be noise. Above 1 it becomes a pill the eye catches,
 * because picking the wrong count is the mistake worth preventing.
 */
.po-qty {
    flex: none;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--po-text);
}

.po-qty--multiple {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    color: #facc15;
    background: #1d4ed8;
    border-radius: 9999px;
}

.po-line-name {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    color: var(--po-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* A quiet reference for double-checking a pick, not something that should
   compete with the product name for attention. */
.po-code {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--po-muted);
}

.po-code-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.po-code-value {
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--po-muted);
}

.po-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Download sits left of process, and the pair sits at the end of the card:
   the last thing done is the rightmost thing on screen. */
.po-actions--end {
    justify-content: flex-end;
}

/* ------------------------------------------------------- header actions */

.po-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* --------------------------------------------------- shipping label row */

.po-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--po-soft);
    border: 1px solid var(--po-line);
    border-radius: 0.5rem;
}

.po-label-heading {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--po-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.po-label-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--po-text);
}

.po-label-price {
    font-weight: 700;
    color: var(--po-text);
}

.po-label-options {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    margin-top: 0.25rem;
}

.po-label-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    text-align: start;
    color: var(--po-text);
    background: var(--po-surface);
    border: 1px solid var(--po-line);
    border-radius: 0.375rem;
    cursor: pointer;
}

.po-label-option:hover {
    border-color: var(--primary-500);
}

.po-label-option.is-selected {
    border-color: var(--primary-500);
    background: color-mix(in oklab, var(--primary-500) 8%, transparent);
}

.po-label-hint {
    width: 100%;
    font-size: 0.75rem;
    color: var(--po-muted);
}

/* --------------------------------------------------------------- scanner */

.po-scan {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--po-soft);
    border: 1px solid var(--po-line);
    border-radius: 0.5rem;
}

.po-scan-field {
    flex: 1 1 16rem;
    min-width: 12rem;
}

.po-scan-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--po-muted);
    white-space: nowrap;
}

.po-scan-progress--done {
    color: var(--success-600);
}

.po-scan-progress .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}

/* A scanned line steps back visually so what is left stands out. */
.po-line--scanned {
    background: color-mix(in oklab, var(--success-500) 10%, transparent);
}

.po-line-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.po-scan-count {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--po-muted);
    white-space: nowrap;
}

.po-scan-count--done {
    color: var(--success-600);
}

.po-scan-check {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--success-600);
}

/* --------------------------------------------------------- pickup window */

/* Same colours as the carrier stat tiles and chips, so "when this has to be
   ready" reads as the same two carriers everywhere on the page. */
.po-window {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
}

.po-window .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: inherit;
}

.po-window--sm {
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
}

.po-window--ampere {
    color: #00a866;
    background: color-mix(in oklab, #00cc7b 16%, transparent);
}

.po-window--postnl {
    color: #d95400;
    background: color-mix(in oklab, #ff6200 16%, transparent);
}

/* The day is worth showing even before a carrier is settled, so the chip
   has to stand on its own without a carrier colour. */
.po-window:not(.po-window--ampere):not(.po-window--postnl) {
    color: var(--po-muted);
    background: var(--po-soft);
}

/* -------------------------------------------------------------- country */

/* Domestic and foreign read the same way - the flag itself already says
   which is which, so no extra background is needed to call one out. */
.po-country {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.po-flag {
    font-size: 1.125rem;
    line-height: 1;
}

/* --------------------------------------------------------------- carrier */

.po-carrier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    height: 1.75rem;
    overflow: hidden;
    background: var(--po-surface);
    border: 1px solid var(--po-line);
    border-radius: 0.25rem;
}

.po-carrier img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Until a logo file is dropped in, a name chip in the carrier's colour
   does the same job of telling the carriers apart at a glance. */
.po-carrier--text {
    width: auto;
    padding: 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    border: 0;
}

/* ----------------------------------------------------------- order meta */

.po-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--po-muted);
}

.po-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.po-meta .fi-icon {
    width: 1rem;
    height: 1rem;
    color: var(--po-muted);
}

.po-meta strong {
    font-weight: 600;
    color: var(--po-text);
}

/* ---------------------------------------------------------------- queue */

.po-search {
    margin-bottom: 0.75rem;
}

.po-queue-scroll {
    max-height: 52rem;
    overflow-y: auto;
}

.po-queue {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.po-queue-item {
    cursor: pointer;
    padding: 0.625rem 0.5rem;
    border-top: 1px solid var(--po-line);
    border-radius: 0.375rem;
}

.po-queue-item:first-child {
    border-top: 0;
}

.po-queue-item:hover {
    background: var(--po-soft);
}

.po-queue-item.is-same-pick {
    background: color-mix(in oklab, var(--primary-500) 7%, transparent);
}

/* The order actually on screen right now - a stronger mark than "same
   pick", since this is the one thing in the list that is not just upcoming
   work but where the picker's attention already is. */
.po-queue-item.is-current {
    background: color-mix(in oklab, var(--primary-500) 12%, transparent);
    border-left: 3px solid var(--primary-500);
}

.po-queue-item.is-current.is-same-pick {
    background: color-mix(in oklab, var(--primary-500) 16%, transparent);
}

/* Someone else is already walking the shelves for this one. Still listed,
   so the queue reads as the whole day's work, but visibly not yours to
   take. */
.po-queue-item.is-claimed {
    cursor: default;
    opacity: 0.55;
}

.po-queue-item.is-claimed:hover {
    background: transparent;
}

.po-queue-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.po-queue-order-id {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--po-text);
}

.po-queue-recipient {
    font-size: 0.75rem;
    color: var(--po-muted);
}

.po-label-alt {
    width: 100%;
    font-size: 0.75rem;
    color: var(--po-muted);
}

.po-queue-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    color: var(--po-muted);
}

.po-queue-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-queue-label-hint {
    flex: none;
    font-style: italic;
    opacity: 0.75;
}

.po-queue-label .po-carrier {
    width: 2.25rem;
    height: 1.375rem;
}

/* One row per item, so a multi-item order reads as the several things it
   is rather than one run-on line. */
.po-queue-lines {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.po-queue-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.po-queue-line-name {
    overflow: hidden;
    font-size: 0.8125rem;
    color: var(--po-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-empty {
    padding: 1.5rem 0;
    font-size: 0.875rem;
    color: var(--po-muted);
    text-align: center;
}

/* ------------------------------------------------------- processed orders */

.po-processed-orders {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--po-line);
}

.po-processed-orders-heading {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--po-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.po-processed-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.po-processed-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    text-decoration: none;
    border-radius: 0.375rem;
}

.po-processed-item:hover {
    background: var(--po-soft);
}

.po-processed-item .po-queue-recipient {
    overflow: hidden;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-done {
    padding: 3rem 0;
    text-align: center;
}

.po-done .fi-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    color: var(--success-500);
}

.po-done-title {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--po-text);
}

.po-done-text {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--po-muted);
}

/* ------------------------------------------------------- collection tabs */

/* Which day's collection is being packed, under the day itself: the
   difference between the next collection and working ahead is the thing
   worth not getting wrong. */
.po-tab-sub {
    display: block;
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--po-muted);
}

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

/* Who is at this screen. Kept modest: it matters when two people are on
   the floor and is noise when one is. */
.po-picker {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--po-muted);
    background: var(--po-soft);
    border: 1px solid var(--po-line);
    border-radius: 0.75rem;
}

.po-picker .fi-icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.po-picker strong {
    color: var(--po-text);
}

.po-picker-spacer {
    flex: 1 1 auto;
}

.po-picker-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ------------------------------------------------------------ pick list */

/*
 * Everything the batch needs, added up per product: the list a packer
 * carries to the shelves before packing anything.
 *
 * Lives in a dialog rather than on the page, which is busy enough with the
 * order in hand and the queue behind it. One product per line, top to
 * bottom - a list you read while walking is a column, not a grid.
 */
.po-picklist-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.625rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--po-line);
}

.po-picklist-meta {
    font-size: 0.8125rem;
    color: var(--po-muted);
}

.po-picklist-lines {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.po-picklist-line {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--po-line);
}

.po-picklist-line:first-child {
    border-top: 0;
}

/* The count is what gets misread, so it is the thing that is hard to
   misread. */
.po-picklist-qty {
    flex: none;
    min-width: 2.75rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    color: var(--po-text);
}

/* Big enough to recognise across a warehouse aisle, which is the whole
   reason a photo is on the list at all. */
.po-picklist-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    overflow: hidden;
    background: var(--po-surface);
    border: 1px solid var(--po-line);
    border-radius: 0.375rem;
}

.po-picklist-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.po-picklist-body {
    min-width: 0;
}

.po-picklist-name {
    display: block;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--po-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-picklist-code {
    display: block;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--po-muted);
}

/*
 * Printing means printing the list and nothing else - the queue, the
 * scanner and the panel's own chrome are for the screen, and someone
 * walking the warehouse wants one sheet with counts on it.
 *
 * Sized in millimetres so it stays one sheet rather than depending on the
 * browser's idea of a pixel: one column of roughly twenty-five rows, which
 * is what a batch of twenty-five orders comes to.
 */
/* The copy that prints, teleported to be a direct child of body so the
   rest of the app can be collapsed outright rather than merely hidden. */
.po-print {
    display: none;
}

/*
 * Printing means printing the list and nothing else - the queue, the
 * scanner and the panel's own chrome are for the screen, and someone
 * walking the warehouse wants one sheet with counts on it.
 *
 * Everything else is removed from the layout rather than made invisible.
 * A hidden element still takes up its space, which is what turned one
 * list into three sheets, and an absolutely positioned copy inside the
 * dialog inherited its fixed positioning and repeated on every one.
 */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    body > *:not(.po-print) {
        display: none !important;
    }

    .po-print {
        display: block !important;
    }

    .po-picklist {
        padding: 0;
        border: 0;
        /* Product photos are the fastest way to find a thing on a shelf,
           so they have to survive the browser's default of dropping
           anything it treats as decoration. */
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .po-picklist-meta {
        font-size: 8pt;
    }

    .po-picklist-line {
        gap: 3mm;
        padding: 1mm 0;
        break-inside: avoid;
        border-top: 0.2mm solid #ccc;
    }

    .po-picklist-qty {
        min-width: 11mm;
        font-size: 12pt;
    }

    .po-picklist-thumb {
        width: 9mm;
        height: 9mm;
        border: 0;
    }

    .po-picklist-name {
        font-size: 9pt;
    }

    .po-picklist-code {
        font-size: 7pt;
    }
}

/* The keyboard shortcut, said on the button that does it. A packer holding
   a parcel should not have to find a mouse to move to the next order. */
.po-key {
    margin-inline-start: 0.5rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    background: rgb(255 255 255 / 22%);
    border-radius: 0.25rem;
}