/*
 * The receiving wizard and its read-back, step 4 (AMENDMENTS A8).
 *
 * WHY IT EXISTS — the same gap the user guide's stylesheet fills, said again
 * for one screen. The panel serves Filament's precompiled bundle, which ships
 * component classes (`fi-*`) and design tokens but not a single Tailwind
 * utility, so `class="flex justify-between"` written in PHP or in a blade is
 * dead on arrival: the review rendered as a flat list of alternating labels and
 * values, unreadable on a phone at arm's length in a yard.
 *
 * WHY THE REVIEW IS HAND-BUILT HTML AT ALL. Its shape depends on the data — one
 * card per line, and a line can carry damage, quality readings and a sample or
 * none of them. A `Section::make()->schema(fn (Get $get) => …)` cannot do it:
 * `CostGate::prune()` evaluates a closure-based schema while walking the tree,
 * before the component has a Livewire container, and that raises
 * (FILAMENT_CONVENTIONS §18.5).
 *
 * Every selector is scoped under `.fp-grn` or `.fp-receiving-step`; selectors
 * that need to reach the wizard shell use `:has()` to find that same marker.
 * Nothing can reach another screen. Every colour is one of Filament's own
 * runtime variables (`--gray-*`, emitted per panel), so the wizard always
 * matches the panel, light and dark. DARK MODE is Filament's `.dark` ancestor
 * class; the variables do not flip on their own, so each colour rule has its
 * dark twin directly below it. Keep that pairing when editing.
 */

/*
 * THE READ-BACK IS A WEIGHBRIDGE TICKET. The yard is holding a paper slip while
 * they read this, so the screen borrows the slip's shape: a small stamped line
 * of date and yard, the supplier's name set large, and one figure per material
 * — the received tonnage — that can be checked against the slip from arm's
 * length. Everything else is a quiet list with dotted leaders, the way a ticket
 * prints. The one accent is a primary hairline down the leading edge of each
 * material card; nothing else is coloured.
 */

.fp-grn {
    display: grid;
    gap: 1rem;
    font-size: 0.875rem;
    line-height: 1.35rem;
    font-variant-numeric: tabular-nums;
}

.fp-grn-ticket,
.fp-grn-line {
    position: relative;
    padding: 1rem 1.125rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background: var(--gray-50);
}

.dark .fp-grn-ticket,
.dark .fp-grn-line {
    border-color: var(--gray-700);
    background: var(--gray-900);
}

.fp-grn-ticket {
    background: transparent;
}

.dark .fp-grn-ticket {
    background: transparent;
}

/* The accent: one hairline on the leading edge of a material card. */
.fp-grn-line::before {
    content: "";
    position: absolute;
    inset-block: 0.75rem;
    inset-inline-start: -1px;
    width: 3px;
    border-radius: 999px;
    background: var(--primary-500);
}

.dark .fp-grn-line::before {
    background: var(--primary-400);
}

.fp-grn-eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.dark .fp-grn-eyebrow {
    color: var(--gray-400);
}

.fp-grn-dot {
    padding-inline: 0.125rem;
    color: var(--gray-400);
}

.fp-grn-title {
    margin: 0.125rem 0 0.75rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.75rem;
    letter-spacing: -0.01em;
    color: var(--gray-950);
}

.dark .fp-grn-title {
    color: var(--gray-50);
}

.fp-grn-facts {
    display: grid;
    gap: 0;
    margin: 0;
}

/*
 * Label, dotted leader, answer — a ticket's own row. The leader is a flex
 * filler drawn with a dotted border so it stretches to whatever is left, and the
 * answer wraps under its own label rather than pushing the row wider than the
 * screen: a delivery note reference and a damage reason are both long enough
 * to do that at 375 pixels.
 */
.fp-grn-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    padding: 0.3125rem 0;
}

.fp-grn-fact dt {
    color: var(--gray-500);
}

.dark .fp-grn-fact dt {
    color: var(--gray-400);
}

.fp-grn-fact dd {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    min-width: 0;
    font-weight: 500;
    color: var(--gray-950);
}

.dark .fp-grn-fact dd {
    color: var(--gray-50);
}

.fp-grn-fact dd::before {
    content: "";
    flex: 1 1 1.5rem;
    min-width: 1.5rem;
    border-bottom: 1px dotted var(--gray-300);
    transform: translateY(-0.3em);
}

.dark .fp-grn-fact dd::before {
    border-bottom-color: var(--gray-600);
}

/* --------------------------------------------------- one card per material */

.fp-grn-line-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.dark .fp-grn-line-head {
    border-bottom-color: var(--gray-700);
}

.fp-grn-line-what {
    min-width: 0;
}

.fp-grn-line-title {
    margin: 0.125rem 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: var(--gray-950);
    overflow-wrap: anywhere;
}

.dark .fp-grn-line-title {
    color: var(--gray-50);
}

.fp-grn-line-sub {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--gray-500);
}

.dark .fp-grn-line-sub {
    color: var(--gray-400);
}

/* The received tonnage — the one figure set large, to be read against the slip. */
.fp-grn-tons {
    display: flex;
    flex: none;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0;
    color: var(--gray-950);
}

.dark .fp-grn-tons {
    color: var(--gray-50);
}

.fp-grn-tons-figure {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: -0.02em;
}

.fp-grn-tons-unit {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-500);
}

.dark .fp-grn-tons-unit {
    color: var(--gray-400);
}

.fp-grn-tons-missing .fp-grn-tons-figure {
    color: var(--gray-400);
}

/* ------------------------------------------------------ desktop workspace */

@media (min-width: 40.0625rem) {
    .fp-grn-ticket .fp-grn-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .fp-grn-line {
        padding: 1.125rem 1.375rem;
    }

    .fp-grn-line .fp-grn-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
    }

    .fp-grn-title {
        font-size: 1.625rem;
        line-height: 2rem;
    }

    .fp-grn-tons-figure {
        font-size: 2.25rem;
        line-height: 2.25rem;
    }

    /* The Transport step: the rate sits beside its per-ton / per-load switch. */
    .fp-receiving-step .fi-fo-toggle-buttons.fi-grouped {
        display: inline-flex;
    }
}

/* --------------------------------------------------------- phone workspace */

@keyframes fp-receiving-step-in {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 40rem) {
    /* Reclaim the width lost before the form reaches its nested repeaters. */
    .fi-main:has(.fp-receiving-step) {
        padding-inline: 0.75rem;
    }

    .fi-page:has(.fp-receiving-step) .fi-page-header-main-ctn {
        padding-block: 1rem;
    }

    .fi-page:has(.fp-receiving-step) .fi-page-content {
        gap: 1rem;
    }

    /* One calm orientation strip: only Filament's active step is visible here. */
    .fi-sc-wizard:has(> .fp-receiving-step) > .fi-sc-wizard-header {
        overflow: hidden;
        border-radius: 0.875rem;
        background: var(--gray-50);
        box-shadow: inset 0 0 0 1px var(--gray-200);
    }

    .dark .fi-sc-wizard:has(> .fp-receiving-step) > .fi-sc-wizard-header {
        background: var(--gray-900);
        box-shadow: inset 0 0 0 1px var(--gray-700);
    }

    .fi-sc-wizard:has(> .fp-receiving-step) .fi-sc-wizard-header-step-btn {
        width: 100%;
        min-width: 0;
        gap: 0.75rem;
        padding: 0.75rem 0.875rem;
    }

    .fi-sc-wizard:has(> .fp-receiving-step) .fi-sc-wizard-header-step-icon-ctn {
        width: 2.25rem;
        height: 2.25rem;
    }

    .fi-sc-wizard:has(> .fp-receiving-step) .fi-sc-wizard-header-step-text {
        min-width: 0;
    }

    .fi-sc-wizard:has(> .fp-receiving-step) .fi-sc-wizard-header-step-label {
        max-width: 100%;
        overflow: hidden;
        font-size: 1rem;
        line-height: 1.25rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fi-sc-wizard:has(> .fp-receiving-step) .fi-sc-wizard-header-step-description {
        display: none;
    }

    .fp-receiving-step {
        min-width: 0;
    }

    .fp-receiving-step.fi-active {
        padding-bottom: 6.75rem;
        animation: fp-receiving-step-in 160ms ease-out both;
    }

    .fp-receiving-step .fi-grid,
    .fp-receiving-step .fi-grid-col,
    .fp-receiving-step .fi-fo-field,
    .fp-receiving-step .fi-fo-field-content-col {
        min-width: 0;
    }

    /* Filament's unqualified two-column schemas are cramped at 320px. */
    .fp-receiving-step .fi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* A bale weight is one short number; this is the intentional exception. */
    .fp-receiving-step .fp-receiving-sample-weights > .fi-fo-repeater-items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fp-receiving-step .fi-fo-field {
        gap: 0.5rem;
    }

    .fp-receiving-step .fi-fo-field-label-content {
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.25rem;
    }

    .fp-receiving-step .fi-fo-field-content-col .fi-sc-text:not(.fi-badge) {
        font-size: 0.875rem;
        line-height: 1.35rem;
    }

    .fp-receiving-step .fi-input-wrp {
        min-height: 3rem;
        border-radius: 0.75rem;
    }

    .fp-receiving-step .fi-input-wrp input,
    .fp-receiving-step .fi-input-wrp textarea,
    .fp-receiving-step select.fi-select-input,
    .fp-receiving-step .fi-select-input-btn {
        min-height: 3rem;
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .fp-receiving-step .fi-fo-select,
    .fp-receiving-step .fi-fo-select-wrp,
    .fp-receiving-step .fi-select-input {
        width: 100%;
        min-width: 0;
    }

    .fp-receiving-step button.fi-icon-btn {
        min-width: 3rem;
        min-height: 3rem;
    }

    /* Radios become touch rows instead of a small circle beside loose text. */
    .fp-receiving-step .fi-fo-radio {
        gap: 0.5rem;
    }

    .fp-receiving-step .fi-fo-radio:not(.fi-inline).fi-grid-direction-col {
        margin-top: 0;
    }

    .fp-receiving-step .fi-fo-radio > .fi-fo-radio-label {
        width: 100%;
        min-height: 3rem;
        align-items: center;
        padding: 0.6875rem 0.75rem;
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        background: var(--gray-50);
        transition:
            background-color 120ms ease,
            border-color 120ms ease,
            transform 120ms ease;
    }

    .dark .fp-receiving-step .fi-fo-radio > .fi-fo-radio-label {
        border-color: var(--gray-700);
        background: var(--gray-900);
    }

    .fp-receiving-step .fi-fo-radio:not(.fi-inline).fi-grid-direction-col > .fi-fo-radio-label {
        padding-top: 0.6875rem;
    }

    .fp-receiving-step .fi-fo-radio.fi-inline > .fi-fo-radio-label {
        flex: 1 1 8rem;
    }

    .fp-receiving-step .fi-fo-radio > .fi-fo-radio-label:active {
        transform: scale(0.99);
    }

    .fp-receiving-step .fi-fo-radio-label > .fi-radio-input {
        margin-top: 0;
    }

    .fp-receiving-step .fi-fo-radio-label-text {
        font-size: 0.9375rem;
        line-height: 1.35rem;
    }

    /* The material remains the card; optional detail inside it becomes flatter. */
    .fp-receiving-step .fi-fo-repeater-item {
        overflow: hidden;
        border: 1px solid var(--gray-200);
        border-radius: 0.875rem;
        box-shadow: none;
    }

    .dark .fp-receiving-step .fi-fo-repeater-item {
        border-color: var(--gray-700);
    }

    .fp-receiving-step .fi-fo-repeater-item-header {
        min-height: 3rem;
        padding: 0.75rem 0.875rem;
    }

    .fp-receiving-step .fi-fo-repeater-item-content {
        padding: 0.875rem;
    }

    .fp-receiving-step .fi-fo-repeater-add .fi-btn {
        width: 100%;
        min-height: 3rem;
    }

    .fp-receiving-step .fi-section:not(.fi-section-not-contained) {
        overflow: hidden;
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        background: var(--gray-50);
        box-shadow: none;
    }

    .dark .fp-receiving-step .fi-section:not(.fi-section-not-contained) {
        border-color: var(--gray-700);
        background: var(--gray-900);
    }

    .fp-receiving-step .fi-section:not(.fi-section-not-contained) > .fi-section-header {
        min-height: 3rem;
        align-items: center;
        padding: 0.75rem 0.875rem;
        transition: background-color 120ms ease;
    }

    .fp-receiving-step .fi-section:not(.fi-section-not-contained) > .fi-section-header:active {
        background: var(--gray-100);
    }

    .dark .fp-receiving-step .fi-section:not(.fi-section-not-contained) > .fi-section-header:active {
        background: var(--gray-800);
    }

    .fp-receiving-step .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content {
        padding: 0.875rem;
    }

    .fp-receiving-step .fi-section .fi-fo-repeater-item {
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .fp-receiving-step .fi-section .fi-fo-repeater-item-content {
        padding: 0.375rem 0;
    }

    .fp-receiving-step .fi-section-collapse-btn {
        width: 3rem;
        height: 3rem;
    }

    /* The action dock stays under the operator's thumb and above the safe area. */
    .fi-sc-wizard:has(> .fp-receiving-step) > .fi-sc-wizard-footer {
        position: fixed;
        z-index: 40;
        inset-inline: 0;
        bottom: 0;
        gap: 0.75rem;
        margin: 0;
        padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) calc(0.75rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
        border-top: 1px solid var(--gray-200);
        background: color-mix(in oklab, var(--gray-50) 94%, transparent);
        box-shadow: 0 -0.75rem 2rem color-mix(in oklab, var(--gray-950) 8%, transparent);
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem);
    }

    .dark .fi-sc-wizard:has(> .fp-receiving-step) > .fi-sc-wizard-footer {
        border-top-color: var(--gray-700);
        background: color-mix(in oklab, var(--gray-950) 94%, transparent);
        box-shadow: 0 -0.75rem 2rem rgb(0 0 0 / 0.25);
    }

    .fi-sc-wizard:has(> .fp-receiving-step) > .fi-sc-wizard-footer > div {
        min-width: 0;
        flex: 1;
    }

    .fi-sc-wizard:has(> .fp-receiving-step) > .fi-sc-wizard-footer > div:nth-child(n + 3) {
        flex-grow: 1.35;
    }

    .fi-sc-wizard:has(> .fp-receiving-step) > .fi-sc-wizard-footer .fi-btn {
        width: 100%;
        min-height: 3rem;
        border-radius: 0.75rem;
        font-size: 0.9375rem;
    }

    /* The review reads like a compact ticket without tiny type. */
    .fp-grn {
        font-size: 0.9375rem;
        line-height: 1.4rem;
    }

    .fp-grn-fact {
        padding: 0.4375rem 0;
    }

    .fp-grn-fact dd {
        overflow-wrap: anywhere;
    }

    .fp-grn-ticket,
    .fp-grn-line {
        padding: 0.875rem 1rem;
    }

    .fp-grn-line-head {
        flex-direction: column;
        gap: 0.5rem;
    }

    .fp-grn-tons {
        align-self: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-receiving-step.fi-active {
        animation: none;
    }

    .fp-receiving-step .fi-fo-radio > .fi-fo-radio-label,
    .fp-receiving-step .fi-section:not(.fi-section-not-contained) > .fi-section-header {
        transition: none;
    }
}