/* CellPoint Pro Web — the Invoices screen: the two lists (sales & payments, repair & layaway deliveries), the totals,
   the rows (a table on wide screens, cards on phones — they follow the list's own width, so the detail panel beside it
   is taken into account), and the detail panel. Colours come from the app's tokens, so the dark theme needs nothing more. */

.inv-page { --inv-drawer-w: 440px; }

/* ---------- Tools ---------- */

.inv-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.inv-range { width: auto; min-width: 160px; }
.inv-search { flex: 1 1 320px; }
.inv-sort { width: auto; }
.inv-filters-btn { display: inline-flex; align-items: center; gap: .4rem; }

.inv-badge {
    display: inline-block;
    min-width: 1.3rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--cp-primary-fill);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1.3rem;
    text-align: center;
}

.inv-spin { display: inline-block; animation: inv-spin .8s linear infinite; }

@keyframes inv-spin {
    to { transform: rotate(360deg); }
}

.inv-dates { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: -.25rem 0 .75rem; }
.inv-date { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .85rem; color: var(--cp-muted); }
.inv-date input { width: auto; }

@media (max-width: 767.98px) {
    .inv-search { flex-basis: 100%; order: -1; }
    .inv-range, .inv-sort { flex: 1 1 0; min-width: 0; }
}

/* ---------- Filters ---------- */

.inv-filters { padding: .9rem 1rem .7rem; margin-bottom: .75rem; display: flex; flex-direction: column; gap: .85rem; }
.inv-fgroup { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.inv-fgroup-row { flex-direction: row; flex-wrap: wrap; gap: 1rem 2.5rem; }
.inv-flabel { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-muted); }
.inv-fchips { display: flex; flex-wrap: wrap; gap: .35rem; }

.inv-fchip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .25rem .7rem;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    color: var(--cp-text);
    font-size: .84rem;
    font-weight: 600;
}

.inv-fchip:hover { border-color: var(--cp-primary); }
.inv-fchip.active { background: var(--cp-primary-50); border-color: var(--cp-primary); color: var(--cp-primary-text); }
.inv-fchip i { color: var(--cp-muted); }
.inv-fcount { font-size: .74rem; font-weight: 700; color: var(--cp-muted); }
.inv-frange { display: flex; align-items: center; gap: .45rem; color: var(--cp-muted); font-size: .85rem; }
.inv-frange input { width: 110px; }
.inv-ffoot { display: flex; justify-content: space-between; align-items: center; padding-top: .55rem; border-top: 1px solid var(--cp-divider); }

.inv-pills { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .75rem; }

.inv-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .45rem .2rem .65rem;
    border: 1px solid var(--cp-primary-200);
    border-radius: 999px;
    background: var(--cp-primary-50);
    color: var(--cp-primary-text);
    font-size: .82rem;
    font-weight: 600;
}

.inv-pill:hover { border-color: var(--cp-primary); }
.inv-pill-x { opacity: .7; }

/* ---------- The two lists ---------- */

.inv-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .75rem; }

.inv-view {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    color: var(--cp-text);
    text-align: left;
    box-shadow: var(--cp-shadow-sm);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.inv-view:hover { border-color: var(--cp-border-strong); }
.inv-view.active { border-color: var(--cp-primary); background: color-mix(in srgb, var(--cp-primary) 5%, var(--cp-surface)); box-shadow: 0 0 0 3px rgba(var(--cp-primary-rgb), .14); }

.inv-view-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--cp-fill);
    color: var(--cp-muted);
    font-size: 1.15rem;
}

.inv-view.active .inv-view-icon { background: var(--cp-primary-100); color: var(--cp-primary-text); }
.inv-view-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.inv-view-name { font-weight: 700; line-height: 1.25; }
.inv-view-sub { font-size: .78rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.inv-view-count {
    min-width: 2.2rem;
    padding: .1rem .6rem;
    border-radius: 999px;
    background: var(--cp-fill);
    color: var(--cp-text-2);
    font-size: 1rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.inv-view.active .inv-view-count { background: var(--cp-primary-fill); color: #fff; }

@media (max-width: 767.98px) {
    .inv-views { gap: .4rem; }
    .inv-view { padding: .55rem .6rem; gap: .5rem; }
    .inv-view-icon, .inv-view-sub { display: none; }
    .inv-view-name { font-size: .86rem; }
    .inv-view-count { font-size: .88rem; min-width: 1.9rem; padding: .05rem .45rem; }
}

/* ---------- Totals ---------- */

.inv-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-bottom: .75rem; }

.inv-tile {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    padding: .6rem .8rem;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    color: var(--cp-text);
    text-align: left;
    box-shadow: var(--cp-shadow-sm);
}

.inv-tile > strong { font-size: 1.15rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.inv-tile-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cp-muted); }
.inv-tile-label .bi-funnel-fill { color: var(--g); }
.inv-tile-sub { font-size: .74rem; color: var(--cp-muted); }
.inv-tile-btn { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.inv-tile-btn:hover { border-color: var(--g); }
.inv-tile-btn.active { border-color: var(--g); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 20%, transparent); }

.inv-tile-note {
    grid-column: span 4;
    flex-direction: row;
    align-items: flex-start;
    gap: .6rem;
    border-color: var(--cp-info-100);
    background: var(--cp-info-50);
    color: var(--cp-text-2);
    font-size: .84rem;
}

.inv-tile-note > i { margin-top: .1rem; color: var(--cp-info-text); font-size: 1rem; }

/* The tiles follow the room the screen has (less with the detail panel open). */
.inv-inner { container: inv-page / inline-size; }

@container inv-page (max-width: 860px) {
    .inv-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .inv-tile-note { grid-column: 1 / -1; }
}

@container inv-page (max-width: 520px) {
    .inv-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
    .inv-tile { padding: .5rem .65rem; }
    .inv-tile > strong { font-size: 1.02rem; }
}

/* Payment columns (desktop Cash / Credit / Debit / Others): one colour each for the tiles, chips and dots. */
.inv-page .g-cash { --g: var(--cp-success); }
.inv-page .g-credit { --g: var(--cp-info); }
.inv-page .g-debit { --g: var(--cp-violet); }
.inv-page .g-other { --g: var(--cp-orange); }
.inv-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--g, var(--cp-subtle)); }

/* ---------- Invoice types ---------- */

.inv-page .t-sale { --t-bg: var(--cp-primary-50); --t-fg: var(--cp-primary-text); }
.inv-page .t-refund { --t-bg: var(--cp-danger-50); --t-fg: var(--cp-danger-text); }
.inv-page .t-repair { --t-bg: var(--cp-cyan-50); --t-fg: var(--cp-cyan-text); }
.inv-page .t-layaway { --t-bg: var(--cp-pink-50); --t-fg: var(--cp-pink-text); }
.inv-page .t-bill { --t-bg: var(--cp-warning-50); --t-fg: var(--cp-warning-text); }
.inv-page .t-account { --t-bg: var(--cp-violet-50); --t-fg: var(--cp-violet-text); }
.inv-page .t-expense { --t-bg: var(--cp-orange-50); --t-fg: var(--cp-orange-text); }
.inv-page .t-other { --t-bg: var(--cp-fill); --t-fg: var(--cp-text-2); }

/* A delivery keeps its repair / layaway colour, in an outline: it carries no money. */
.inv-page .t-delivery { --t-bg: transparent; }
.inv-tag.t-delivery { border: 1px dashed var(--t-fg); }

.inv-tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .14rem .55rem;
    border-radius: 999px;
    background: var(--t-bg, var(--cp-fill));
    color: var(--t-fg, var(--cp-text-2));
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-types { margin-bottom: .75rem; }
.inv-type-chip { --rs: var(--t-fg); }
.inv-type-chip > i { color: var(--t-fg); }

/* ---------- Notes over the list ---------- */

.inv-note-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
    padding: .55rem .8rem;
    border: 1px solid var(--cp-primary-100);
    border-radius: var(--cp-radius-sm);
    background: var(--cp-primary-50);
    color: var(--cp-text);
    font-size: .88rem;
}

.inv-note-bar > i { color: var(--cp-primary-text); flex-shrink: 0; }
.inv-other { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: -.1rem 0 .6rem; font-size: .85rem; color: var(--cp-muted); }
.inv-other strong { color: var(--cp-text-2); }

/* Nothing matched an amount: the nearest ones. */
.inv-close { margin-bottom: .75rem; overflow: hidden; }
.inv-close-head { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem .6rem; }
.inv-close-head > i { margin-top: .15rem; color: var(--cp-muted); }

.inv-close-row {
    display: grid;
    grid-template-columns: 76px 150px 110px minmax(0, 1fr) auto 76px;
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .5rem .9rem;
    border: 0;
    border-top: 1px solid var(--cp-divider);
    background: transparent;
    color: var(--cp-text);
    text-align: left;
}

.inv-close-row:hover { background: var(--cp-hover); }
.inv-close-row .inv-tag { justify-self: start; }
.inv-close-when, .inv-close-who { font-size: .85rem; color: var(--cp-muted); }
.inv-close-amt { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.inv-close-diff { font-size: .8rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.inv-close-diff.more { color: var(--cp-warning-text); }
.inv-close-diff.less { color: var(--cp-info-text); }
.inv-close-foot { padding: .6rem .9rem; border-top: 1px solid var(--cp-divider); }

@media (max-width: 767.98px) {
    .inv-close-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .inv-close-when, .inv-close-who { display: none; }
}

/* An invoice number found on another day. */
.inv-found { margin-bottom: .75rem; overflow: hidden; }
.inv-found-head { display: flex; align-items: center; justify-content: space-between; padding: .45rem .45rem .45rem .9rem; border-bottom: 1px solid var(--cp-divider); }
.inv-found .inv-list { border: 0; border-radius: 0; box-shadow: none; }

/* ---------- The list ---------- */

.inv-list {
    container-type: inline-size;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    background: var(--cp-surface);
    box-shadow: var(--cp-shadow-sm);
    overflow: clip;
}

.inv-head,
.inv-row {
    display: grid;
    grid-template-columns: 92px 78px 150px minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.7fr) 104px 14px;
    gap: .75rem;
    align-items: center;
    padding: .5rem .9rem;
}

.inv-head {
    padding-top: .45rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--cp-border);
    background: var(--cp-surface-2);
    color: var(--cp-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.inv-row {
    position: relative;
    min-height: 54px;
    border-bottom: 1px solid var(--cp-divider);
    cursor: pointer;
    transition: background-color .12s;
}

.inv-row:last-child { border-bottom: 0; }
.inv-row:hover { background: var(--cp-hover); }
.inv-row:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: -2px; }
.inv-row.selected { background: color-mix(in srgb, var(--cp-primary) 8%, var(--cp-surface)); box-shadow: inset 3px 0 0 var(--cp-primary); }
.inv-row.deleted { color: var(--cp-muted); }
.inv-row.deleted .inv-c-total { text-decoration: line-through; color: var(--cp-muted); }
.inv-row.deleted .inv-pay { opacity: .6; }

.inv-c-num { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 0; }
.inv-num { font-weight: 800; color: var(--cp-primary-text); font-variant-numeric: tabular-nums; }

.inv-flag { padding: 0 .35rem; border-radius: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.inv-flag.deleted { background: var(--cp-danger-100); color: var(--cp-danger-text); }
.inv-flag.legacy { background: var(--cp-warning-100); color: var(--cp-warning-text); }

.inv-c-time { display: flex; flex-direction: column; line-height: 1.25; font-size: .86rem; color: var(--cp-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-c-date { font-size: .74rem; font-weight: 700; color: var(--cp-muted); }
.inv-c-type { min-width: 0; }
.inv-customer { font-weight: 600; }
.inv-customer.walk-in { color: var(--cp-muted); font-weight: 500; }
.inv-sub { font-size: .8rem; color: var(--cp-muted); }
.inv-c-by { font-size: .88rem; }

.inv-c-paid { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }

.inv-pay {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    padding: .1rem .5rem;
    border: 1px solid color-mix(in srgb, var(--g) 24%, var(--cp-surface));
    border-radius: 6px;
    background: color-mix(in srgb, var(--g) 9%, var(--cp-surface));
    font-size: .8rem;
    white-space: nowrap;
}

.inv-pay-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; color: var(--cp-text-2); font-weight: 600; }
.inv-pay-amt { font-weight: 700; font-variant-numeric: tabular-nums; }

/* The part that matched an amount search. */
.inv-pay.hit,
.inv-row.hit-total .inv-c-total > span,
.inv-drawer-total.hit,
.inv-payrow.hit {
    background: var(--cp-warning-100);
    border-color: var(--cp-warning);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cp-warning) 40%, transparent);
    color: var(--cp-text);
}

.inv-row.hit-total .inv-c-total > span { border-radius: 6px; padding: .1rem .35rem; margin-right: -.35rem; }

.inv-nopay { font-size: .82rem; font-style: italic; color: var(--cp-subtle); }
.inv-paid-before { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--cp-success-text); }
.inv-c-total { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-c-total.neg { color: var(--cp-danger-text); }
.inv-c-go { color: var(--cp-subtle); font-size: .78rem; }

/* Days: each one's heading stays in view while its invoices scroll past. */
.inv-day {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .45rem .9rem;
    border-bottom: 1px solid var(--cp-border);
    background: var(--cp-surface-2);
    font-size: .84rem;
}

.inv-day-name { font-weight: 700; }
.inv-day-sum { color: var(--cp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.inv-skeleton-row { padding: .6rem .9rem; border-bottom: 1px solid var(--cp-divider); }
.inv-skeleton-row .cp-skeleton-block { height: 34px; }
.inv-foot { margin-top: .9rem; text-align: center; font-size: .82rem; color: var(--cp-muted); }

/* A narrower list (a tablet, or the detail panel open beside it): the type goes under the number, no "made by". */
@container (max-width: 1000px) {
    .inv-head,
    .inv-row {
        grid-template-columns: 146px 66px minmax(0, 1.2fr) minmax(0, 1.5fr) 92px 12px;
        grid-template-areas: "num time who paid total go" "type time who paid total go";
        row-gap: .2rem;
    }

    .inv-head { grid-template-areas: "num time who paid total go"; }
    .inv-head > :nth-child(1), .inv-c-num { grid-area: num; }
    .inv-head > :nth-child(2), .inv-c-time { grid-area: time; }
    .inv-head > :nth-child(4), .inv-c-who { grid-area: who; }
    .inv-head > :nth-child(6), .inv-c-paid { grid-area: paid; }
    .inv-head > :nth-child(7), .inv-c-total { grid-area: total; }
    .inv-head > :nth-child(8), .inv-c-go { grid-area: go; }
    .inv-c-type { grid-area: type; }
    .inv-c-by,
    .inv-head > :nth-child(3),
    .inv-head > :nth-child(5) { display: none; }
}

/* Narrow: each invoice is a small card. */
@container (max-width: 700px) {
    .inv-head { display: none; }

    .inv-row {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "num type time total"
            "who who who who"
            "paid paid paid paid";
        gap: .3rem .5rem;
        padding: .6rem .8rem;
    }

    .inv-c-num { grid-area: num; flex-direction: row; align-items: center; gap: .35rem; }
    .inv-c-type { grid-area: type; }
    .inv-c-time { grid-area: time; flex-direction: row; gap: .35rem; align-items: baseline; }
    .inv-c-total { grid-area: total; }
    .inv-c-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; }
    .inv-c-paid { grid-area: paid; }
    .inv-c-go { display: none; }
    .inv-c-paid:empty { display: none; }
}

/* ---------- Detail panel ---------- */

.inv-scrim { display: none; }

.inv-drawer {
    position: fixed;
    top: var(--cp-topbar-h);
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    width: var(--inv-drawer-w);
    border-left: 1px solid var(--cp-border);
    background: var(--cp-surface);
    color: var(--cp-text);
    box-shadow: var(--cp-shadow-lg);
    outline: none;
    animation: inv-slide-in .18s ease-out;
}

@keyframes inv-slide-in {
    from { transform: translateX(28px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Wide screens: the list makes room for the panel (its scroll bar stays in view, left of the panel). */
@media (min-width: 1200px) {
    .inv-page.inv-has-drawer .page-body { margin-right: var(--inv-drawer-w); }
}

/* Smaller screens: the panel covers the list. */
@media (max-width: 1199.98px) {
    .inv-scrim { display: block; position: fixed; inset: 0; z-index: 1029; background: var(--cp-scrim); animation: fade-in .15s ease-out; }
    .inv-drawer { top: 0; width: min(var(--inv-drawer-w), 100vw); }
}

@media (max-width: 575.98px) {
    .inv-drawer { width: 100vw; border-left: 0; }
}

.inv-drawer-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .5rem .55rem 1rem; border-bottom: 1px solid var(--cp-border); }
.inv-drawer-title { display: flex; align-items: center; gap: .6rem; }
.inv-drawer-num { margin: 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.inv-drawer-nav { display: flex; align-items: center; gap: .05rem; flex-shrink: 0; }
.inv-drawer-pos { margin-right: .35rem; font-size: .78rem; color: var(--cp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.inv-drawer-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.inv-drawer-sum { display: flex; flex-direction: column; gap: .15rem; }
.inv-drawer-total { align-self: flex-start; border-radius: 8px; font-size: 2rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.inv-drawer-total.neg { color: var(--cp-danger-text); }
.inv-drawer-total.hit { padding: 0 .4rem; margin-left: -.4rem; }
.inv-drawer-when { font-size: .88rem; color: var(--cp-muted); }

.inv-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; margin: 0; }
.inv-facts dt { margin-bottom: .1rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cp-muted); }
.inv-facts dd { margin: 0; font-size: .92rem; }
.inv-facts a.inv-sub { text-decoration: none; }
.inv-links { display: flex; flex-wrap: wrap; gap: .4rem; }

.inv-sec { padding-top: .85rem; border-top: 1px solid var(--cp-divider); }
.inv-sec-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cp-muted); }
.inv-sec-count { padding: 0 .45rem; border-radius: 999px; background: var(--cp-fill); color: var(--cp-text-2); font-size: .7rem; }
.inv-sec-error { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .88rem; color: var(--cp-danger-text); }

.inv-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.inv-line { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px dashed var(--cp-divider); }
.inv-line:last-child { border-bottom: 0; }
.inv-line-name { font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.inv-line-sub { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .8rem; color: var(--cp-muted); }
.inv-line-total { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-lines-skeleton { display: flex; flex-direction: column; gap: .5rem; }
.inv-lines-skeleton .cp-skeleton-block { height: 38px; }

.inv-sum-rows { display: flex; flex-direction: column; gap: .1rem; font-size: .92rem; }
.inv-sum-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.inv-sum-rows > div > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-sum-rows > .strong { margin-top: .25rem; padding-top: .45rem; border-top: 1px solid var(--cp-border); font-weight: 800; }
.inv-sum-rows > .sub { padding-left: 1rem; font-size: .82rem; color: var(--cp-muted); }
.inv-payrow > span:first-child { display: inline-flex; align-items: center; gap: .45rem; }
.inv-payrow.hit { margin: 0 -.4rem; padding: .15rem .4rem !important; border-radius: 6px; }

.inv-banner { display: flex; gap: .6rem; padding: .65rem .8rem; border-radius: var(--cp-radius-sm); font-size: .88rem; }
.inv-banner > i { margin-top: .1rem; }
.inv-banner.danger { border: 1px solid var(--cp-danger-200); background: var(--cp-danger-50); color: var(--cp-danger-text); }
.inv-banner.legacy { border: 1px solid var(--cp-warning-200); background: var(--cp-warning-50); color: var(--cp-warning-text); }
.inv-banner-quote { font-style: italic; overflow-wrap: anywhere; }

.inv-callout { display: flex; gap: .6rem; padding: .7rem .8rem; border: 1px solid var(--cp-success-200); border-radius: var(--cp-radius-sm); background: var(--cp-success-50); font-size: .88rem; }
.inv-callout > i { margin-top: .1rem; color: var(--cp-success-text); }
.inv-note { padding: .6rem .75rem; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); background: var(--cp-surface-2); font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.inv-drawer-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--cp-border);
    background: var(--cp-surface-2);
}

.inv-drawer-keys { font-size: .76rem; color: var(--cp-muted); }

/* ---------- Refund, note, delete (detail panel) ---------- */

.inv-banner.refund { border: 1px solid var(--cp-info-200); background: var(--cp-info-50); color: var(--cp-info-text); }
.inv-banner.exchange { border: 1px solid var(--cp-border-strong); background: var(--cp-primary-50); color: var(--cp-primary-text); }
.inv-line-tag { padding: 0 .45rem; border-radius: 999px; background: var(--cp-info-50); color: var(--cp-info-text); font-weight: 600; }

.inv-drawer-acts { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.inv-del-btn:hover:not(:disabled) { color: var(--cp-danger-text); }

.inv-del-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-bottom: .75rem; }
.inv-del-total { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.inv-del-effects { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 .75rem; padding-left: 1.1rem; font-size: .92rem; }

/* The refund dialog: what comes back (left), the money (right); one column on phones. */
.rf-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.5rem; }
.rf-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.rf-lines { display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.rf-line {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .75rem;
    border: 1.5px solid var(--cp-border);
    border-radius: 12px;
    background: var(--cp-surface);
    transition: border-color .15s, background-color .15s;
}
.rf-line.on { border-color: var(--cp-danger); background: color-mix(in srgb, var(--cp-danger) 5%, var(--cp-surface)); }
.rf-check { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin: 0; cursor: pointer; }
.rf-check:checked { background-color: var(--cp-danger); border-color: var(--cp-danger); }
.rf-line-main { display: flex; flex-direction: column; flex: 1; min-width: 0; margin: 0; cursor: default; }
label.rf-line-main { cursor: pointer; }
.rf-line-name { font-weight: 600; overflow-wrap: anywhere; }
.rf-line-sub { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .8rem; color: var(--cp-muted); }
.rf-before { color: var(--cp-info-text); font-weight: 600; }
.rf-line-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0; }
.rf-step { display: flex; align-items: center; gap: .15rem; }
.rf-step input { width: 3.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rf-line-of { font-size: .72rem; color: var(--cp-muted); }
.rf-line-amount { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--cp-danger-text); }
.rf-sub-title { margin: 1rem 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cp-muted); }
.rf-off .rf-line { border-style: dashed; background: var(--cp-surface-2); }
.rf-off .rf-line-name { color: var(--cp-text-2); font-weight: 500; }

.rf-sum-total { margin-top: .35rem; padding-top: .45rem !important; border-top: 1px dashed var(--cp-border-strong); font-size: 1.2rem; font-weight: 800; color: var(--cp-danger-text); }
.rf-sum-total span:last-child { font-variant-numeric: tabular-nums; }
.rf-methods { display: flex; flex-wrap: wrap; gap: .4rem; }
.rf-method {
    --pm: var(--cp-primary);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border: 1.5px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    color: inherit;
    font-size: .88rem;
    font-weight: 600;
}
.rf-method > i { color: var(--pm); }
.rf-method:hover:not(:disabled) { border-color: var(--pm); }
.rf-method.added { border-color: var(--pm); background: color-mix(in srgb, var(--pm) 10%, var(--cp-surface)); }
.rf-method:disabled { cursor: default; }
.rf-money .pay-line-surcharge { gap: .5rem; }
.rf-money .pay-line-surcharge .btn-link { flex-shrink: 0; white-space: nowrap; }
.rf-over { color: var(--cp-warning-text); }
.rf-remaining { font-size: 1rem; }
.rf-gets { display: flex; justify-content: space-between; gap: 1rem; margin-top: .6rem; padding: .55rem .8rem; border-radius: 12px; background: var(--cp-surface-2); }
.rf-gets strong { font-variant-numeric: tabular-nums; }
.rf-fields { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--cp-divider); }
.rf-hint { font-size: .85rem; color: var(--cp-muted); }

@media (max-width: 991.98px) {
    .rf-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 575.98px) {
    .rf-line { padding: .55rem .6rem; gap: .55rem; }
    .rf-step input { width: 3rem; }
    .rf-hint { flex-basis: 100%; }
}