/* ── Repairs on a phone: the compact job card (#2105) ─────────────────────────
   The card from components.css ("Phone / small tablet") with pay-collect.css's
   buttons came to about 320px on a phone, so a 375 x 667 screen showed one
   whole job. Neil picked the compact card from a mock-up: three lines, about
   four jobs to a screen.

       #412  Customer name                      €85.00
       Job · bike                            Due Today
       [ Status chip ]                      [ PAY €85 ]

   Given up on the card, all still one tap away inside the job: the "In"
   date, Edit, the pin (the job's header has one, below) and Mark collected
   on a Ready job (the status chip, or the job's own Status). One main
   button: PAY when there is something to pay, otherwise Parts.

   Phone width only (639px and under, where the Repairs bar turns into its
   phone form). A small tablet (640 to 768) keeps the fuller card and a
   desktop its list. Loaded after components.css and pay-collect.css, whose
   phone rules this overrides at equal weight.
   tests/test_repairs_phone_compact_card_2105.py measures it in Chrome. */

/* Drawn for the phone only. */
.ri-desc-bike, .repair-panel-pin { display: none; }

@media (max-width: 639px) {
    .repair-item {
        position: relative;
        align-items: baseline;
        gap: 0 8px;
        padding: 8px 12px;
        margin-bottom: 6px;
        line-height: 1.3;
    }
    /* Overdue keeps its red edge and tint; a drop-off group its edge. */
    .repair-item.overdue,
    .repair-item.in-group:not(.overdue) { padding-left: 9px; }

    /* Two line breaks: after the price, and after Due. Each is an empty
       full-width line. A row gap would count them as lines and add itself
       twice more, so there is none: lines two and three carry a top margin. */
    .repair-item::before,
    .repair-item::after {
        content: ''; flex: 1 1 100%; height: 0; margin: 0;
    }
    .repair-item::before { order: 5; }
    .repair-item::after  { order: 8; }

    /* The photo sits beside lines one and two rather than making line one
       taller; the two lines step in to clear it. */
    .ri-media { position: absolute; top: 8px; left: 12px; }
    .repair-item.overdue .ri-media,
    .repair-item.in-group:not(.overdue) .ri-media { left: 9px; }
    .ri-media img { width: 40px; height: 40px; }
    .repair-item:has(.ri-media img) .ri-ticket,
    .repair-item:has(.ri-media img) .ri-desc { margin-left: 48px; }

    /* Line 1: ticket number, customer, price */
    .ri-ticket   { order: 2; align-self: baseline; font-size: 14px; line-height: 1.3; }
    .ri-identity { order: 3; align-self: baseline; }
    .ri-identity > .ri-customer { font-size: 18px; }
    .ri-identity > .ri-bike { display: none; }
    .ri-cost     { order: 4; align-self: baseline; font-size: 18px; line-height: 1.3; }

    /* Line 2: the job with the bike muted after it, on one line, and Due */
    .ri-desc {
        order: 6; flex: 1 1 0; min-width: 0;
        display: block; -webkit-line-clamp: none;
        font-size: 15px; font-weight: 600; line-height: 1.3;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        margin-top: 1px;
    }
    .ri-desc-bike { display: inline; font-weight: 400; color: var(--text-muted); }
    .ri-due { order: 7; flex: none; font-size: 15px; margin-top: 1px; }
    .ri-in  { display: none; }

    /* Line 3: the status chip, any markers, and the one button. The status
       cell takes what is left, so a long status name is cut short in the
       chip rather than pushing the button onto a line of its own. */
    .ri-status, .ri-priority, .ri-shopify, .ri-actions { margin-top: 5px; }
    .ri-status {
        order: 9; flex: 1 1 0; min-width: 6rem;
        align-self: center; gap: 6px;
    }
    .ri-status-select.ri-status-chip { min-width: 5.5rem; }
    /* A job that is on hold or a quick job has markers beside the chip. They
       are never squeezed: the cell is as wide as what it holds, the button
       drops to a line of its own if the two don't fit, and the markers wrap
       inside the cell on a very narrow phone. */
    .ri-status > .badge, .ri-status > .neutral-service { flex: none; white-space: nowrap; }
    .ri-status:has(> .badge:not(.ri-status-badge)) { flex: 1 1 auto; flex-wrap: wrap; row-gap: 4px; }
    /* With the marker beside it, the cell may shrink below 6rem: a wider face
       than Barlow (a phone that has not loaded it) pushed the button down. */
    .repair-item:has(.ri-mismatch) .ri-status { min-width: 0; }
    .ri-priority { order: 10; align-self: center; }
    .ri-shopify  { order: 11; flex: 0 1 auto; min-width: 0; align-self: center; font-size: 14px; }
    /* Too small to press: a tap on the invoice marker opens the job like the
       rest of the card, and the job's footer has the link to Shopify. */
    .ri-shopify a { pointer-events: none; }
    /* PAY already says there is an unpaid draft order or order. Part paid,
       paid, cancelled, out of date and the UNPAID markers all stay. */
    .repair-item:has(.ri-paid) .ri-shopify-state[data-pay="unpaid"] { display: none; }
    /* PAID · NOT COLLECTED already says paid, and the "Paid #1430" beside it
       pushed the button onto a line of its own (#2216). */
    .repair-item:has(.ri-mismatch-paid_not_collected) .ri-shopify-state[data-pay="paid"] { display: none; }
    /* Neutral service is a marker for the job's inside: beside the status chip
       it filled the line and the button dropped below it (#2216). */
    .ri-status > .neutral-service { display: none; }
    /* The marker itself takes two short lines, inside the 44px the button
       already makes the line, so the card stays three lines high. */
    .ri-shopify .ri-mismatch {
        display: inline-block; white-space: normal; max-width: 4.8rem; font-size: 0.62rem; padding-left: 4px; padding-right: 4px;
        line-height: 1.15; text-align: center; vertical-align: middle;
    }

    .ri-actions {
        order: 12; flex: none; align-self: center;
        margin-left: auto;
        border-top: none; padding-top: 0;
        gap: 8px; flex-wrap: nowrap;
    }
    .ri-shortcuts { order: 0; flex: none; }
    .ri-actions .btn { min-height: 44px; padding: 0 12px; font-size: 15px; }
    .ri-actions > .btn:not(.ri-edit):not(.ri-parts) { min-width: 44px; justify-content: center; }
    .ri-parts { flex: none; }
    /* Inside the job instead: Edit (the Details tab), the pin, Mark collected. */
    .ri-edit, .ri-actions .btn-pin, .ri-collected { display: none; }
    .ri-shortcuts:not(:has(.ri-paid)) { display: none; }
    /* One main button: PAY takes Parts' place. */
    .ri-actions:has(.ri-paid) .ri-parts { display: none; }
    /* A cancelled or archived job's one button is Archive (or Restore), not
       Parts: it had both (#2216). */
    .ri-actions:has(> .btn:not(.ri-edit):not(.ri-parts)) .ri-parts { display: none; }
    /* The pin has left the card, so a pinned job says so beside its number
       (#2216); Filters > Pinned still finds them all. */
    .repair-item:has(.btn-pin.pinned) .ri-ticket::after { content: ' \1F4CC'; font-size: 12px; }

    /* The pin, in the open job's header beside the close button. */
    .repair-panel-pin {
        display: inline-flex; align-items: center; justify-content: center;
        flex: none; min-width: 44px; min-height: 44px;
        background: none; border: none; border-radius: var(--radius);
        font-size: 1.1rem; cursor: pointer;
        filter: grayscale(1);
    }
    .repair-panel-pin.pinned { background: var(--accent-soft); filter: none; }
}