/*
    Dynamic Salmon Fly order worksheet.

    Activity-log note:
    This stylesheet is presentation-only. Customer cart updates are logged by
    FlyOrderFormController::update(); simple typing, filtering, preview opening,
    and scrolling inside this grid are not logged.
*/
.fly-order-intro,
.fly-order-form {
    /*
        Match the normal catalogue-page footprint. The page shell already
        supplies the outside grey margin, so this panel should use the full
        content width instead of sitting inside a narrower 95% wrapper.

        Staff adjustment point:
        - Change --fly-order-panel-width if the worksheet ever needs to be
          intentionally inset again.
        - Change --fly-order-panel-padding to control the white breathing room
          between the panel border and the header/form controls inside it.
    */
    --fly-order-panel-width: 100%;
    --fly-order-panel-padding: 10px;

    box-sizing: border-box;
    width: var(--fly-order-panel-width, 100%);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: var(--fly-order-panel-padding, 10px);

    border: 1px solid #c9c9c9;
    background-color: #FFFFFF;
    overflow: hidden;
}

.fly-order-form {
    /*
        Staff adjustment point: worksheet font sizing.
        Increase or decrease these values to change the grid font size
        without hunting through the table rules. The desktop value is used
        above 700px; the mobile value is used at 700px and below.
    */
    --fly-order-table-font-size: 0.8rem;
    --fly-order-table-mobile-font-size: 0.76rem;

    /*
        Staff adjustment point: quantity column/input sizing.
        The column width controls the table cell that holds each quantity
        field. The input width controls the editable box inside that cell.
        Keep the column width about 2px wider than the input width so the
        field has room for its border without crowding neighbouring columns.
    */
    --fly-order-quantity-column-width: 60px;
    --fly-order-quantity-input-width: 50px;
    --fly-order-quantity-mobile-column-width: 50px;
    --fly-order-quantity-mobile-input-width: 40px;
}

.fly-order-intro {
    margin-bottom: 12px;
    line-height: 1.38;
}

.fly-order-summary {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 10px;
}

.fly-order-summary-card {
    box-sizing: border-box;
    min-width: 118px;
    padding: 7px 10px;
    border: 1px solid #b8b8b8;
    background: #ffffff;
    text-align: center;
}

.fly-order-summary-card span {
    display: block;
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
}

.fly-order-summary-card strong {
    display: block;
    margin-top: 2px;
    font-size: 1rem;
}

.fly-order-summary-card--cost strong {
    color: #a00000;
}

.fly-order-toolbar,
.fly-order-bottom-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}

.fly-order-bottom-actions {
    justify-content: flex-end;
    margin-top: 10px;
}

.fly-order-search-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(330px, 100%);
    font-weight: bold;
}

.fly-order-search {
    box-sizing: border-box;
    width: 100%;
    padding: 6px 8px;
}

.fly-order-filled-toggle {
    /*
        Keep the filled-row filter visually close to the search box because it
        participates in the same browser-only row filtering. The actual cart is
        not changed until the customer submits the worksheet.
    */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    font-weight: bold;
    white-space: nowrap;
}

.fly-order-filled-toggle input {
    flex: 0 0 auto;
}

.fly-order-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.fly-order-scroll {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    max-height: min(68vh, 720px);
    margin: 0 auto;
    overflow: auto;
    border: 1px solid #9f9f9f;
    background: #ffffff;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    --fly-order-sticky-header-height: 0px;
}

.fly-order-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fly-order-table-font-size, 0.68rem);
    line-height: 1.05;
}

.fly-order-table th,
.fly-order-table td {
    border: 0;
    border-right: 1px solid #8c8c8c;
    border-bottom: 1px solid #8c8c8c;
    padding: 1px 2px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.fly-order-table tr > *:first-child {
    border-left: 1px solid #8c8c8c;
}

.fly-order-table thead tr:first-child > * {
    border-top: 1px solid #8c8c8c;
}

.fly-order-table thead {
    position: sticky;
    top: 0;
    z-index: 8;
}

.fly-order-table thead th,
.fly-order-table tfoot th,
.fly-order-table tfoot td {
    background: #f0f0f0;
    font-weight: bold;
}

.fly-order-table thead th {
    position: sticky;
    z-index: 7;
}

.fly-order-group-heading-row th {
    top: 0;
    height: 20px;
    color: #000000;
}

.fly-order-size-heading-row th {
    top: 22px;
    height: 19px;
}

.fly-order-size-heading-row th,
.fly-order-price-cell,
.fly-order-row-total {
    font-weight: bold;
}

.fly-order-sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #ffffff;
}

.fly-order-table thead .fly-order-sticky-col,
.fly-order-table tfoot .fly-order-sticky-col {
    z-index: 10;
    background: #f0f0f0;
}

.fly-order-pattern-header {
    text-align: center !important;
}

.fly-order-sticky-header-clone {
    display: none;
}

.fly-order-sticky-header-clone .fly-order-table {
    /*
        The mobile sticky header is a visual clone of the real header. JavaScript
        copies the measured body-column widths into a colgroup; fixed layout
        makes the clone obey those widths exactly instead of recalculating its
        own narrower header-only table layout.
    */
    margin: 0;
    table-layout: fixed;
}

.fly-order-sticky-header-clone thead,
.fly-order-sticky-header-clone th {
    /*
        The clone itself is sticky. Reset table-cell sticky rules inside the
        clone so mobile browsers do not try to apply two different sticky
        behaviours to the same visible header.
    */
    position: static !important;
    top: auto !important;
}

.fly-order-pattern-cell {
    min-width: 230px;
    max-width: 300px;
    text-align: left !important;
    font-weight: bold;
}

.fly-order-pattern-link,
.fly-order-pattern-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 1px 2px;
    color: inherit;
    font: inherit;
    font-weight: bold;
    line-height: 1.08;
    text-align: left;
}

.fly-order-pattern-link {
    position: static;
    border: 0;
    background: transparent;
    text-decoration: underline;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.fly-order-pattern-link:hover,
.fly-order-pattern-link:focus {
    color: #213663;
    outline: 1px solid #213663;
    outline-offset: 1px;
}

.fly-order-pattern-link:active {
    transform: none;
    left: auto;
    top: auto;
}

.fly-order-price-col,
.fly-order-price-cell,
.fly-order-total-col,
.fly-order-row-total {
    min-width: 46px;
}

.fly-order-size-col,
.fly-order-cell {
    min-width: var(--fly-order-quantity-column-width, 27px);
    width: var(--fly-order-quantity-column-width, 27px);
}

.fly-order-qty-input {
    box-sizing: border-box;
    width: var(--fly-order-quantity-input-width, 25px);
    min-height: 19px;
    padding: 0;
    border: 1px solid #777777;
    text-align: center;
    font-size: var(--fly-order-table-font-size, 0.68rem);
    font-weight: bold;
    line-height: 1;
    appearance: textfield;
    -moz-appearance: textfield;
}

.fly-order-qty-input::-webkit-outer-spin-button,
.fly-order-qty-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.fly-order-cell--missing,
.fly-order-cell--blocked {
    background: #d0d0d0;
    color: #555555;
}

.fly-order-blocked-marker {
    display: inline-block;
    width: 100%;
    min-height: 1em;
}

.fly-order-row[hidden] {
    display: none;
}

.fly-order-row-cost,
.fly-order-table tfoot td:last-child {
    color: #a00000;
}

.fly-order-image-modal[hidden] {
    display: none;
}

.fly-order-image-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.fly-order-image-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
}

.fly-order-image-modal__panel {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: min(720px, 96vw);
    max-height: 92vh;
    padding: 14px;
    overflow: auto;
    border: 2px solid #213663;
    background: #ffffff;
    text-align: center;
}

.fly-order-image-modal__panel h2 {
    margin: 0 38px 10px;
    font-size: 1.05rem;
}

.fly-order-image-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #213663;
    background: #ffffff;
    background-image: none;
    color: #213663;
    font-size: 1.35rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-shadow: none;
    box-shadow: none;
    transform: none;
}

.fly-order-image-modal__close:hover,
.fly-order-image-modal__close:focus,
.fly-order-image-modal__close:active {
    top: 8px;
    right: 8px;
    left: auto;
    background: #ffffff;
    background-image: none;
    color: #213663;
    text-shadow: none;
    box-shadow: none;
    transform: none;
}

.fly-order-image-modal__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 76vh;
    margin: 0 auto;
}

@media (max-width: 700px) {
    .fly-order-intro,
    .fly-order-form {
        /*
            Keep the mobile worksheet aligned with the full mobile page shell.
            The slightly smaller padding prevents the internal grid controls
            from feeling cramped without reintroducing the older side gutters.
        */
        --fly-order-panel-width: 100%;
        --fly-order-panel-padding: 8px;
    }

    .fly-order-summary,
    .fly-order-toolbar,
    .fly-order-bottom-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .fly-order-summary-card,
    .fly-order-filled-toggle {
        width: 100%;
    }

    .fly-order-filled-toggle {
        box-sizing: border-box;
        padding-bottom: 0;
        white-space: normal;
    }

    .fly-order-toolbar-actions,
    .fly-order-bottom-actions {
        justify-content: stretch;
    }

    .fly-order-toolbar-actions .button,
    .fly-order-toolbar-actions button,
    .fly-order-bottom-actions .button,
    .fly-order-bottom-actions button {
        width: 100%;
        text-align: center;
    }

    .fly-order-scroll {
        max-height: 62vh;
    }

    .fly-order-scroll.fly-order-scroll--has-sticky-clone .fly-order-sticky-header-clone {
        display: block;
        position: sticky;
        top: 0;
        z-index: 30;
        width: max-content;
        min-width: 100%;
        margin-bottom: calc(-1 * var(--fly-order-sticky-header-height, 46px));
        pointer-events: none;
        background: #ffffff;
    }

    .fly-order-scroll.fly-order-scroll--has-sticky-clone .fly-order-table > thead {
        /*
            Mobile browsers that ignore sticky table headers still reserve the
            real header's table space. Hide its painted copy and show the
            sticky clone above it so the body rows remain correctly aligned.
        */
        visibility: hidden;
    }

    .fly-order-scroll.fly-order-scroll--has-sticky-clone .fly-order-sticky-header-clone .fly-order-table > thead {
        visibility: visible;
    }

    .fly-order-group-heading-row th {
        top: 0;
        height: 22px;
    }

    .fly-order-size-heading-row th {
        top: 24px;
        height: 22px;
    }

    .fly-order-table {
        font-size: var(--fly-order-table-mobile-font-size, 0.76rem);
    }

    .fly-order-pattern-cell {
        min-width: 205px;
        max-width: 230px;
        white-space: normal !important;
    }

    .fly-order-pattern-link,
    .fly-order-pattern-text {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .fly-order-size-col,
    .fly-order-cell {
        min-width: var(--fly-order-quantity-mobile-column-width, 31px);
        width: var(--fly-order-quantity-mobile-column-width, 31px);
    }

    .fly-order-qty-input {
        width: var(--fly-order-quantity-mobile-input-width, 29px);
        min-height: 22px;
        font-size: var(--fly-order-table-mobile-font-size, 0.76rem);
    }
}

/*
    Fly order form header reset.

    The worksheet page can render the same legacy Salmon Flies header content
    that appears on catalogue pages, but this page does not load category.css.
    These scoped rules restore the intended layout locally:
        - no global UI table borders/padding on the header layout table
        - the Wallace photo displays at its actual 123px x 150px size
        - the text cells remain clean layout cells rather than data-table cells

    Activity-log note:
    Header rendering is presentation-only. Do not activity-log this display
    reset. Durable header-content edits remain logged by the Admin page that
    saves catalogue/custom-page content.
*/
.fly-order-header .catalogue-header-media-table,
.fly-order-header .catalogue-header-media-table table,
.fly-order-header .catalogue-header-media-table tbody,
.fly-order-header .catalogue-header-media-table tr,
.fly-order-header .catalogue-header-media-table th,
.fly-order-header .catalogue-header-media-table td {
    border: 0;
    background: #ffffff;
}

.fly-order-header .catalogue-header-media-table,
.fly-order-header .catalogue-header-media-table table {
    border-collapse: separate;
    margin-bottom: 0;
}

.fly-order-header .catalogue-header-media-table th,
.fly-order-header .catalogue-header-media-table td {
    padding: 0;
    text-align: left;
    vertical-align: middle;
}

.fly-order-header .fly-order-header-inner {
    width: 98%;
    margin: 0 auto;
    border-spacing: 10px;
}

.fly-order-header .catalogue-header-logo-cell {
    width: 123px;
    min-width: 123px;
    text-align: center;
    vertical-align: middle;
}

.fly-order-header .catalogue-header-logo-image {
    display: block;
    width: 123px;
    max-width: none;
    height: auto;
    margin: 0 auto;
}

.fly-order-header .catalogue-header-text-cell {
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
    vertical-align: middle;
}

@media (max-width: 700px) {
    .fly-order-header .catalogue-header-logo-cell,
    .fly-order-header .catalogue-header-text-cell {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .fly-order-header .catalogue-header-logo-image {
        max-width: min(123px, 85vw);
        margin: 0 auto 8px;
    }

    .fly-order-header .fly-order-header-inner {
        border-spacing: 0;
    }
}