/* Paying and collecting coming apart on a repair (#2009): the warning's
   buttons, the marker a job keeps, and the two counts over the list. */

/* A warning with buttons of its own (Modal.choose). The safe one is first;
   they wrap on a phone rather than run off the box, and each is a full
   finger high. */
.modal-choices { flex-wrap: wrap; justify-content: flex-start; }
.modal-choices .btn { min-height: 44px; flex: 1 1 auto; }

/* UNPAID on a collected job that owes; PAID · NOT COLLECTED on a paid job
   still in the shop. */
/* No nowrap: in the list's narrow Shopify column the marker wraps (#2139,
   components.css) rather than run under the buttons beside it. */
.ri-mismatch { font-weight: 700; letter-spacing: 0.02em; }

/* How many jobs carry each marker. A button: pressing it shows only those. */
.repair-mismatch-count {
    border: 0; cursor: pointer; margin-left: 0.35rem;
    font-family: inherit; font-weight: 700; white-space: nowrap;
}
.repair-mismatch-count.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 767px) {
    .repair-mismatch-count { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.8rem; }
}

/* Take payment, opened from a warning: the job's own three pay buttons. */
.pay-sheet { display: flex; margin-top: 0.75rem; min-width: 0; }
/* On a phone the three must share the box (#2049). A grid column of 1fr
   won't go narrower than its words, and "SPLIT CASH + CARD" on one line is
   159px, so the third tile ran 19px off a 375px screen. Here the columns
   may shrink and the label may wrap. */
.pay-sheet .rp-pay-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
.pay-sheet .rp-pay-tile { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* ── Paid and Collected on each job card (#2009) ──────────────────────────────
   Two shortcuts beside Parts and Edit, in the pay buttons' outline look
   (#2007): a transparent button, a 2px line and the label in capitals. Paid
   is the cash green (tokens.css --pay-cash-*); Collected is a plain slate
   line, so it isn't read as Paid card's blue. */
.ri-shortcuts { display: inline-flex; gap: 4px; align-items: center; order: 1; }
.ri-paid, .ri-collected {
    --pay-line: var(--text-muted);
    --pay-text: var(--text-strong);
    background: transparent; border: 2px solid var(--pay-line); color: var(--pay-text);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.ri-paid { --pay-line: var(--pay-cash-line); --pay-text: var(--pay-cash-text); }
.ri-paid:hover:not(:disabled), .ri-collected:hover:not(:disabled) {
    background: color-mix(in srgb, var(--pay-line) 16%, transparent);
}

/* "#127 marked Collected" with Undo: a full finger high, under the words. */
.toast-action { display: block; margin-top: 0.4rem; min-height: 44px; padding: 0 1rem; font-weight: 700; }

/* The list (wider than a phone): the last column grows to hold the two
   buttons beside the pin. These are the board's own column lists from
   components.css with only that last figure changed;
   tests/test_card_shortcuts_2009.py fails if the two drift apart. */
@media (min-width: 769px) {
    .repairs-list-header,
    .repair-item {
        grid-template-columns: 48px 56px minmax(140px, 1.4fr) minmax(180px, 2fr) 130px 90px 130px 120px 90px 104px 184px;
    }
    /* Where the columns don't fit and the list scrolls sideways (a tablet,
       or a laptop with the sidebar open), the buttons stay in view at the
       right edge instead of scrolling off with the last column. */
    .repair-item .ri-actions {
        position: sticky; right: 0; z-index: 1;
        /* The page's colour: the list has no box of its own (components.css). */
        background: var(--bg);
        box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.18);
        align-self: stretch; padding: 0 6px 0 4px;
    }
    .repair-item.overdue .ri-actions {
        background: linear-gradient(rgba(198, 40, 40, 0.05), rgba(198, 40, 40, 0.05)), var(--bg);
    }
    .ri-actions .ri-shortcuts .btn { padding: 2px 7px; font-size: 0.78rem; min-height: 30px; justify-content: center; }
    /* The two labels side by side are wider than this column (#2050),
       and a wider one would push the full-width list past its box on a
       1680px screen. So here the two sit one over the other... */
    .ri-shortcuts { flex-direction: column; align-items: stretch; gap: 3px; }
    /* 1408px: the least the stacked list above needs (see components.css,
       which switches its tight grid at the same figure). At 1380 a list
       between the two scrolled sideways, on a 1710px screen (#2056). */
    @container (max-width: 1408px) {
        /* ...and side by side in the narrower list, which has the room. */
        .repairs-list-header,
        .repair-item {
            grid-template-columns: 34px 44px minmax(90px, 1.1fr) minmax(120px, 1.6fr) 92px 68px 94px 82px 70px 78px 262px;
        }
        /* A four-figure amount ("PAY €1234.50") beside the Collected button
           ran 15px past this column (#2056). A wider column would push the list
           sideways on a 1440px screen, so the two buttons give up padding
           and letter spacing instead; their height is untouched. Anything
           longer still wraps under rather than running out of the cell. */
        .ri-shortcuts { flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
        .ri-actions .ri-shortcuts .btn { padding: 2px 4px; font-size: 0.75rem; letter-spacing: 0; }
    }
    /* A list under 640px (an iPad held upright: about 500px beside the
       sidebar, #2296) scrolls sideways whatever it does, and the 262px
       column stuck to its right edge took half of what showed, over the job.
       Here the buttons stack in a column about a quarter of the list wide
       and Pin, Edit and Parts wrap under them. Written as min-width 0 and
       max-width so the width figure above stays the only plain
       "(max-width: Npx)" query in this file
       (tests/test_repairs_list_wide_desktop_2056.py counts them). */
    @container (min-width: 0px) and (max-width: 640px) {
        .repairs-list-header,
        .repair-item {
            grid-template-columns: 34px 44px minmax(90px, 1.1fr) minmax(120px, 1.6fr) 92px 68px 94px 82px 70px 78px 152px;
        }
        .repair-item .ri-actions { flex-wrap: wrap; }
        .ri-shortcuts { flex-direction: column; align-items: stretch; flex: 1 1 100%; }
    }
}
/* Touch screens up to a laptop's width: a full finger high. */
@media (min-width: 769px) and (max-width: 1366px) {
    .ri-actions .ri-shortcuts .btn { min-height: 44px; }
}

/* Phone card: the shortcuts lead the buttons row, each as wide as the other.
   On a narrow phone they take a row of their own above Parts and Edit. */
@media (max-width: 768px) {
    .ri-shortcuts { order: 0; flex: 2 1 0; gap: var(--sp-2); }
    .ri-shortcuts .btn { flex: 1 1 0; justify-content: center; }
    .ri-actions { flex-wrap: wrap; }
    /* The Status dropdown as a compact chip (#2009): as wide as its words,
       not the whole row. Tapping it opens the list as before. */
    .ri-status-select.ri-status-chip {
        flex: 0 1 auto; width: auto; max-width: 100%;
        border-radius: 999px; padding: 0 var(--sp-3);
        font-size: 0.88rem;
    }
}
@media (max-width: 480px) {
    .ri-shortcuts { flex: 1 1 100%; }
}

/* The Payment filter's longest choice ("Draft order or order raised
   (unpaid)") is wider than a phone. A flex item won't shrink below its
   content unless told it may, so the box pushed the whole Repairs page
   426px wide on a 375px phone, measured while fitting the buttons above. */
.repair-filter-field { min-width: 0; }

/* ── The job panel's footer on a phone (#2052) ────────────────────────────────
   Three tall pay tiles and a second row took about a quarter of a phone
   screen, over the list being worked on. On a narrow screen the footer is
   one slim row: a single pay button (the card's, opening the Take payment
   box), the draft order or order link, ↻ and the status badge. It wraps to a
   second slim line only when a job has more to say (out of date, voided,
   a marker). Wider than a phone the tiles stay: there is room, and one press
   fewer at the counter. */
.rp-pay-slim { display: none; }
/* The tiles may shrink and their labels wrap wherever they are drawn, so
   "SPLIT CASH + CARD" is never cut off in a narrow panel. */
.rp-pay-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-pay-tiles .rp-pay-tile { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .repair-panel-footer .rp-pay-tiles { display: none; }
    .repair-panel-footer .rp-pay-slim { display: inline-flex; order: -1; }
    .repair-panel-footer {
        padding-top: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem;
        gap: 0.3rem 0.4rem;
    }
    /* Ready for Collection shares its line with the pay button rather than
       taking a whole one to itself. */
    .repair-panel-footer .btn-primary { flex: 1 1 auto; order: -2; }
    /* Every control a full finger high, none stretched taller. */
    .repair-panel-footer .btn {
        min-height: 44px; padding-top: 0; padding-bottom: 0;
        align-items: center; white-space: nowrap; font-size: 0.9rem;
    }
    .repair-panel-footer .btn-ghost { min-width: 44px; justify-content: center; }
    /* Badges and the "this order was voided" line keep their place, in the
       same slim line height, and may wrap rather than run off the edge. */
    .repair-panel-footer .badge,
    .repair-panel-footer > span { white-space: normal !important; overflow-wrap: anywhere; max-width: 100%; }
}