/* Reusable cart view (window.createCartView). Self-contained: cart table,
   qty controls, item notes, and the bottom-sheet item-edit modal. */

/* ── Cart table ── */

.cv-list {
    width: 100%;
    border-collapse: collapse;
}

.cv-list th,
.cv-list td {
    padding: 0.6rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.cv-list th {
    font-weight: bold;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
}

.cv-list td.cv-price,
.cv-list td.cv-linetotal,
.cv-list th.cv-price,
.cv-list th.cv-linetotal {
    text-align: right;
    white-space: nowrap;
}

.cv-list td.cv-qty {
    text-align: center;
    white-space: nowrap;
}

.cv-list th.cv-qty {
    text-align: center;
}

.cv-qty-btn {
    background: var(--button-color, #888);
    color: white;
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
}

.cv-qty-value {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    font-weight: bold;
    vertical-align: middle;
}

.cv-total {
    margin-top: 1.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    border-top: 2px solid #333;
    padding-top: 0.8rem;
}

.cv-total-label {
    color: #555;
}

.cv-empty {
    text-align: center;
    color: #999;
    margin-top: 3rem;
}

/* ── Rows ── */

.cv-item-options {
    margin-top: 0.3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.cv-option-pill {
    font-size: 0.75rem;
    background: var(--attenuated-color, #eee);
    color: #444;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
}

.cv-item-notes {
    font-size: 1.1rem;
    color: #888;
    margin-top: 0.2rem;
    font-style: italic;
}

.cv-item-unit-value {
    font-size: 0.8rem;
    color: #555;
    margin-top: 0.2rem;
    text-align: center;
}

/* ── Per-item state button row (staff-only, informational) ── */

/* The item row joins its state row visually: drop the row's own divider so the
   only separator is the full-width line under the state buttons. A 3px top
   border in the page color adds a gap above each item, so consecutive items
   read as: state line (1px) + gap (3px). */
.cv-row td {
    border-bottom: none;
    border-top: 3px solid var(--background-color);
}

/* Keep the cell as a real table cell (colspan → full width); buttons flow as
   inline-blocks and wrap across the whole width. display:flex would void the
   colspan and collapse the cell to the first column. */
.cv-state-row td {
    padding: 0 0.4rem 0.6rem;
}

.cv-state-row .cv-details-btn,
.cv-state-row .cv-state-btn {
    margin: 0rem 1.4rem 0 0;
    vertical-align: middle;
}

.cv-state-btn {
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    transition: opacity 0.15s, box-shadow 0.15s;
}

.cv-state-btn.small {
    padding: 0.26rem 0.68rem;
    font-size: 0.6rem;
}

.cv-state-btn[data-item-state="preparing"] {
    background: var(--item-preparing-color);
    --cv-glow: var(--item-preparing-color);
}

.cv-state-btn[data-item-state="delivered"] {
    background: var(--item-delivered-color);
    --cv-glow: var(--item-delivered-color);
}

.cv-state-btn[data-item-state="cancelled"] {
    background: var(--item-cancelled-color);
    --cv-glow: var(--item-cancelled-color);
}

.cv-state-btn[data-item-state="return"] {
    background: var(--item-return-color);
    --cv-glow: var(--item-return-color);
}

.cv-state-btn:not(.is-selected) {
    opacity: 0.4;
}

.cv-state-btn.is-selected {
    border-color: #333;
    box-shadow: 0 0 0 1px var(--cv-glow), 0 0 20px 2px var(--cv-glow);
}

/* Tint the whole item (both its rows) with a light shade of the chosen state. */
.cv-list tr[data-item-state="preparing"]>td {
    background: var(--item-preparing-bg);
}

.cv-list tr[data-item-state="delivered"]>td {
    background: var(--item-delivered-bg);
}

.cv-list tr[data-item-state="cancelled"]>td {
    background: var(--item-cancelled-bg);
}

.cv-list tr[data-item-state="return"]>td {
    background: var(--item-return-bg);
}

/* Neutral "Details" action button (outline, not a state toggle). */
.cv-details-btn {
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    border: 2px solid #333;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
}

.cv-details-btn.small {
    padding: 0.26rem 0.68rem;
    font-size: 0.6rem;
}

/* Read-only (e.g. finished session): hide qty controls. */
.cv-readonly .cv-qty-btn {
    display: none;
}

.cv-readonly .cv-qty-value {
    margin: 0 auto;
}

/* ── Item edit modal (bottom sheet) ── */

.cv-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-end;
}

.cv-modal.cv-hidden {
    display: none !important;
}

/* hidden helper for inner sections */
.cv-modal-unit-section.cv-hidden {
    display: none !important;
}

.cv-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.cv-modal-content {
    position: relative;
    background: #fff;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1.2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    z-index: 1111;
}

.cv-modal-content h3 {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
}

.cv-modal-content label {
    font-size: 0.85rem;
    color: #888;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: -0.4rem;
}

.cv-modal-unit-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cv-unit-btn {
    background: var(--button-color, #888);
    color: white;
    border: none;
    border-radius: 8px;
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

.cv-unit-btn:active {
    opacity: 0.7;
}

.cv-modal-unit-display {
    font-size: 1.4rem;
    font-weight: bold;
    min-width: 48px;
    text-align: center;
}

.cv-modal-unit-label {
    font-size: 1rem;
    color: #555;
}

.cv-modal-notes {
    width: 100%;
    min-height: 80px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.6rem;
    font-size: 1rem;
    resize: vertical;
    box-sizing: border-box;
}

.cv-modal-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.4rem;
}

.cv-modal-btn {
    flex: 1;
    height: 52px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.cv-modal-btn-save {
    background: var(--button-color, #888);
    color: white;
}

.cv-modal-btn-cancel {
    background: #eee;
    color: #333;
}

.cv-modal-btn:active {
    opacity: 0.75;
}

/* "+ Add" row (service page quick-add). */
.cv-add-row td {
    padding: 8px 0;
}

.cv-add-btn {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--button-color, #888);
    border-radius: 10px;
    background: transparent;
    color: var(--button-color, #555);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.cv-add-btn:active {
    opacity: 0.7;
}

/* Empty order: Add Item + Delete share the row at a 3:1 ratio. */
.cv-add-actions {
    display: flex;
    gap: 8px;
}

.cv-add-actions .cv-add-btn {
    flex: 3;
    width: auto;
}

.cv-delete-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid #d9534f;
    border-radius: 10px;
    background: transparent;
    color: #d9534f;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

.cv-delete-btn:active {
    opacity: 0.7;
}

/* ── Mobile: reflow each item's 4 columns into a stacked card ──
   The 4-column table can't shrink its columns below their content on a phone,
   so it overflows horizontally (qty + line-total get pushed off-screen). Below
   600px we drop the table layout and lay each item out as a grid:
       name (full width)
       price · qty · line-total  (one wrapping row)
   The state-button row and "+ Add" row stay full-width blocks underneath. */
@media (max-width: 600px) {

    .cv-list,
    .cv-list thead,
    .cv-list tbody,
    .cv-list td {
        display: block;
    }

    /* Column headers are meaningless once cells are stacked. */
    .cv-list thead {
        display: none;
    }

    .cv-list .cv-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "name  name  name"
            "price qty   total";
        align-items: center;
        /* No column-gap: cells keep their own 0.4rem padding, and a gap would
           show untinted strips between cells on state-tinted items. */
        /* Move the inter-item gap from the cells onto the row, so it reads as a
           single band above the card instead of a line through its middle. */
        border-top: 3px solid var(--background-color);
    }

    .cv-list .cv-row>td {
        border-top: none;
    }

    .cv-list .cv-row>td:first-child {
        grid-area: name;
    }

    .cv-list .cv-row>td.cv-price {
        grid-area: price;
        text-align: left;
    }

    .cv-list .cv-row>td.cv-qty {
        grid-area: qty;
    }

    .cv-list .cv-row>td.cv-linetotal {
        grid-area: total;
    }

    .cv-list .cv-state-row,
    .cv-list .cv-add-row {
        display: block;
    }

    /* Uniform, compact state buttons: fixed width + tight padding so several fit
       per row, with overflowing labels truncated to an ellipsis. */
    .cv-state-row .cv-details-btn,
    .cv-state-row .cv-state-btn {
        width: 3.6rem;
        box-sizing: border-box;
        padding: 0.2rem 0.1rem;
        margin: 0 0.1rem 0.1rem 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}