/* /Pages/TicketList.razor.rz.scp.css */
/* The results table on a phone (MudBlazor Xs, under 600px — the same edge the page's
   breakpoint flag uses): eight columns cannot fit a 430px screen, so each row lays out
   as a stacked card instead. Same markup, same cells — the c-* classes are the grid slots.
   Layout per Micah, 2026-08-17:

       [check]  202608160001 · Submitted                    2026-08-16
       [check]  20 · 10080TXT1
       [check]  CCWIS Y2 BID_8" Line Removal
       [check]  hydro vaced 5 wholes to expose other utilities. Two lines
       [check]  of the description of work before it clips…

   "Waiting on" is a Biller-desk column and is not on the card (it derives from the status
   shown right there); the job's description is, since nobody has every code by heart.
   Every table element becomes a block (the whole chain, or the browser wraps the grid in
   anonymous table boxes); the header row has nothing to head and goes away. */

/* Content that exists in one layout only: the job description and the longer description
   of work are card-only; the 48-character description is table-only. */
.ticket-results[b-u5k6ui3znx]  .card-only {
    display: none;
}

/* "Waiting on" is a Biller-desk column (it derives from the status beside it), and below md
   it is the 87 px that made the eight-column table wider than its card on an iPad in
   portrait (721 px in 706 at 820, 2026-10-26 — the card then scrolled sideways). The phone
   card never showed it either; this one rule covers both. The th carries the class too. */
@media (max-width: 959.98px) {
    .ticket-results[b-u5k6ui3znx]  .c-waiting {
        display: none;
    }
}

@media (max-width: 599.98px) {
    .ticket-results[b-u5k6ui3znx]  .card-only {
        display: inline;
    }

    .ticket-results[b-u5k6ui3znx]  .table-only {
        display: none;
    }

    .ticket-results[b-u5k6ui3znx]  table,
    .ticket-results[b-u5k6ui3znx]  tbody {
        display: block;
    }

    .ticket-results[b-u5k6ui3znx]  thead {
        display: none;
    }

    /* Five tracks: check · A · B · C(1fr) · D. The ticket number spans A–B so that A is sized
       by the company code alone — otherwise the job on line 2 would start where the ticket
       number ends, a hand's width away from its "20 ·". */
    .ticket-results[b-u5k6ui3znx]  table tbody tr {
        display: grid;
        grid-template-columns: auto auto auto 1fr auto;
        grid-template-areas:
            "check ticket  ticket  status  date"
            "check co      job     job     job"
            "check jobdesc jobdesc jobdesc jobdesc"
            "check desc    desc    desc    desc";
        column-gap: 0.375rem;
        row-gap: 0.125rem;
        align-items: baseline;
        padding: 0.625rem 0.25rem;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    /* MudBlazor's dense-table cell padding and per-cell rule lines belong to the table
       shape; the card draws its own line under the row instead. */
    .ticket-results[b-u5k6ui3znx]  table tbody tr td {
        display: block;
        min-width: 0;
        padding: 0 !important;
        border-bottom: none !important;
    }

    /* Fixed width whether or not this row gets a box, so every card's text shares one left
       edge (only Submitted/Approved rows are checkable — the grid is per row). */
    .ticket-results[b-u5k6ui3znx]  .c-check {
        grid-area: check;
        align-self: start;
        width: 1.75rem;
        margin: -0.5rem 0 0 -0.5rem; /* the checkbox carries its own touch padding */
    }

    .ticket-results[b-u5k6ui3znx]  .c-ticket {
        grid-area: ticket;
        font-weight: 600;
    }

    .ticket-results[b-u5k6ui3znx]  .c-status {
        grid-area: status;
        color: var(--mud-palette-text-secondary);
    }

        .ticket-results[b-u5k6ui3znx]  .c-status::before {
            content: "· ";
        }

    .ticket-results[b-u5k6ui3znx]  .c-date {
        grid-area: date;
        justify-self: end;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
    }

    .ticket-results[b-u5k6ui3znx]  .c-co {
        grid-area: co;
        color: var(--mud-palette-text-secondary);
    }

        .ticket-results[b-u5k6ui3znx]  .c-co::after {
            content: " ·";
        }

    .ticket-results[b-u5k6ui3znx]  .c-job {
        grid-area: job;
    }

    /* The job's description on its own row under the company number, wrapping in full —
       Vista caps it at 60 characters, two phone lines at most, and clipping it would lose
       the end, which is often the part that tells the jobs apart (2026-08-17). A card-only
       cell: the rule outside the media block keeps it out of the table entirely. */
    .ticket-results[b-u5k6ui3znx]  .c-jobdesc.card-only {
        display: block; /* outranks .card-only's inline by specificity, not by file order */
        grid-area: jobdesc;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
    }

    .ticket-results[b-u5k6ui3znx]  .c-desc {
        grid-area: desc;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}