/* Receipt */

.frame[data-frame="receipt"] {
    /* Width of the quantity column (room for "−12"); the object icon uses the same column. */
    --quantity-width: 2.6em;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: #f4f4f2;
    color: #1b1c20;
    overflow: hidden;
}

.receipt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #e4e4e0;
}

.receipt-header .receipt-relation {
    flex: 1;
    min-width: 0;
}

/* The receipt number, top right, in the green accent of a finished receipt */
.receipt-number {
    flex: none;
    padding: 2px 6px;
    margin-right: -6px;
    border-radius: 6px;
    color: #2e7d57;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
}

.receipt-number:active {
    background: #d6eadd;
}

/* A reopened receipt that is still open keeps its number, in grey */
.receipt-number.open {
    color: #5c5e66;
}

/* Same columns as a receipt line: the icon in the quantity column, the name above the product names. */
.receipt-relation {
    display: grid;
    grid-template-columns: var(--quantity-width) 1fr;
    align-items: center;
    width: 100%;
    min-height: 28px;
    font-weight: 700;
    font-size: 15px;
    color: inherit;
    text-align: left;
}

.receipt-relation v-icon {
    width: 0.85em;
    height: 0.85em;
    /* The icon library moves its svg down by 0.125em; lift it back to the middle of the text. */
    margin-top: -0.25em;
    color: #5c5e66;
}

.receipt-relation span {
    translate: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receipt-lines {
    flex: 1;
    overflow-y: auto;
    padding-inline: 14px;
    scrollbar-width: thin;
}

.frame[data-frame="receipt"].dimmed .receipt-lines {
    padding-bottom: var(--sheet-space, 0px);
    scroll-padding-bottom: var(--sheet-space, 0px);
}

.receipt-line {
    display: grid;
    grid-template-columns: var(--quantity-width) 1fr auto;
    padding: 8px 6px;
    margin-inline: -6px;
    border-bottom: 1px solid #deded9;
    border-radius: 8px;
    cursor: pointer;
}

/* Children (messages, sub-products, discounts): indented under their line, tied to it by a line on the left. */
.receipt-child {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 3px;
    padding-left: 10px;
    border-left: 2px solid #c9ccd3;
    color: #5c5e66;
    font-size: 0.88em;
}

/* A discount on the whole receipt: a row of its own just above the total, the width of the receipt. */
.receipt-discount {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid #deded9;
    font-weight: 600;
    cursor: pointer;
}

.receipt-discount[hidden] {
    display: none;
}

.receipt-discount.active {
    background: #e6ebf5;
    box-shadow: inset 3px 0 0 #3b6fd8;
}

/* A discount under a line can be tapped on its own (active: only that discount goes with C) */
.receipt-child.discount {
    cursor: pointer;
    border-radius: 0 6px 6px 0;
}

.receipt-child.discount.active {
    background: #e6ebf5;
    border-left-color: #3b6fd8;
    color: #1b1c20;
}

/* A returned line: negative quantity and amount in red */
.receipt-line.returned .receipt-quantity,
.receipt-line.returned .receipt-amount {
    color: #c0392b;
}

/* The object in the header (relation, later also a table) when it is active */
.receipt-header.active {
    background: #dfe5f2;
    box-shadow: inset 3px 0 0 #3b6fd8;
}

/* A reopened receipt: the earlier order in a frame, so you see where it ends and the new order begins */
.receipt-earlier-group {
    margin: 6px -6px 8px;
    padding-inline: 6px;
    border: 1px solid #d3d5da;
    border-radius: 10px;
    background: #ebebe7;
}

.receipt-earlier-group > :last-child {
    border-bottom-color: transparent;
}

/* A reopened receipt: the earlier order collapsed into one line; tap to expand */
.receipt-earlier {
    display: grid;
    grid-template-columns: var(--quantity-width) 1fr auto;
    align-items: center;
    padding: 8px 6px;
    margin-inline: -6px;
    border-bottom: 1px solid #deded9;
    border-radius: 8px;
    color: #5c5e66;
    font-weight: 600;
    cursor: pointer;
}

.receipt-earlier v-icon {
    width: 0.8em;
    height: 0.8em;
    margin-top: -0.25em;
    transition: rotate 0.2s;
    rotate: -90deg;
}

.receipt-earlier.open v-icon {
    rotate: 0deg;
}

/* Payments: part of the receipt, lines below the articles (same columns, no quantity) */
.receipt-payment {
    display: grid;
    grid-template-columns: var(--quantity-width) 1fr auto;
    padding: 8px 6px;
    margin-inline: -6px;
    border-bottom: 1px solid #deded9;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.receipt-payment.final {
    cursor: default;
}

.receipt-payment.active {
    background: #e6ebf5;
    box-shadow: inset 3px 0 0 #3b6fd8;
}

/* A checked-out receipt stays on screen, visually done, until the next one starts */
.frame[data-frame="receipt"].done .receipt-relation,
.frame[data-frame="receipt"].done .receipt-lines,
.frame[data-frame="receipt"].done .receipt-discount,
.frame[data-frame="receipt"].done .receipt-total {
    opacity: 0.45;
}

.receipt-done {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 14px;
    background: #e3f5ea;
    border-top: 1px solid #c9e8d5;
    font-weight: 800;
    font-size: 24px;
}

.receipt-done[hidden] {
    display: none;
}

/* The active line: last added or tapped. Functions work on it when nothing is selected. */
.receipt-line.active {
    box-shadow: inset 3px 0 0 #3b6fd8;
}

.receipt-line.selected {
    position: relative;
    z-index: 2;
    background: #d9dee8;
    border-bottom-color: transparent;
}

/* While the line detail sheet is open, the receipt is dimmed except the selected line. */
.frame[data-frame="receipt"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}

.frame[data-frame="receipt"].dimmed::after {
    opacity: 1;
}

.receipt-quantity {
    color: #6b6d75;
}

/* Numpad input waiting for the next button (e.g. 6, then Koffie) */
.receipt-input {
    display: flex;
    padding: 8px 14px;
    border-top: 1px solid #deded9;
}

.receipt-input[hidden] {
    display: none;
}

.receipt-input {
    gap: 8px;
}

.receipt-input-value.return {
    background: #c0392b;
}

.receipt-input-value {
    padding: 4px 12px;
    border-radius: 8px;
    background: #3b6fd8;
    color: #fff;
    font-weight: 800;
    font-size: 1.1em;
    font-variant-numeric: tabular-nums;
}

.receipt-total.active {
    background: #e6ebf5;
    box-shadow: inset 3px 0 0 #3b6fd8;
}

.receipt-total {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 14px;
    border-top: 1px solid #deded9;
}

.receipt-total-label,
.receipt-total-amount {
    font-weight: 800;
    font-size: 24px;
}

/* Desktop: the receipt text grows with the width of the receipt frame. */
@media (min-width: 768px) and (min-height: 500px) {
    .frame[data-frame="receipt"] {
        container-type: inline-size;
    }

    .receipt-relation,
    .receipt-number {
        font-size: clamp(15px, 4.3cqi, 19px);
    }

    .receipt-line,
    .receipt-discount,
    .receipt-payment,
    .receipt-earlier {
        font-size: clamp(15px, 4.3cqi, 19px);
        padding-block: 10px;
    }

    .receipt-name {
        font-weight: 600;
    }

    .receipt-total-label,
    .receipt-total-amount,
    .receipt-done {
        font-size: clamp(22px, 7cqi, 28px);
    }
}

/* Line detail sheet: bottom of the screen on mobile, bottom of the receipt frame on desktop */

.line-detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.line-detail-title {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 17px;
}

.line-detail-controls {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    gap: 10px;
    height: 52px;
}

.line-detail-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--surface-raised);
}

.line-detail-controls v-icon {
    width: 18px;
    height: 18px;
}

.line-delete {
    background: #4a1f23 !important;
    color: var(--offline);
}

.line-stepper {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    border-radius: 12px;
    background: var(--surface-raised);
    overflow: hidden;
}

.line-stepper button {
    border-radius: 0;
    background: none;
}

.line-stepper button:disabled {
    opacity: 0.3;
    cursor: default;
}

.line-quantity {
    font-weight: 800;
    font-size: 20px;
}

.line-quantity input {
    width: 4em;
    padding: 4px;
    border: none;
    border-radius: 8px;
    background: var(--background);
    color: var(--text);
    font: inherit;
    text-align: center;
    outline: 2px solid #3b6fd8;
}

.line-detail-controls button:active {
    filter: brightness(0.85);
}