/* =============================================================================
   inventory-receive-mobile.css — Clint receiving experience, mobile redesign (2026-06-30)
   Luke's asks: large item NAMES, small item DETAILS, ONE action button (menu:
   receive / give-to-installer / edit), and clean up the "gross" top.
   Additive + scoped to body.device-phone + the Clint receiving page. Pairs with the
   single-action <details> menu markup added to InventoryClint.cshtml. Reversible:
   delete this file + its <link> + revert the Open->Actions cell.
   ============================================================================= */

/* ---------- 1) ONE action button -> menu (collapses Do next/Portable/Item/Label/QR) ---------- */
.clint-actions { display: block; position: relative; }
.clint-actions > summary.clint-actions-toggle {
    list-style: none; cursor: pointer; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.clint-actions > summary::-webkit-details-marker { display: none; }
.clint-actions > summary.clint-actions-toggle::after { content: "▾"; font-size: 11px; opacity: .85; }
.clint-actions[open] > summary.clint-actions-toggle::after { content: "▴"; }
.clint-actions-menu {
    display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px;
    background: var(--smkk-spx-surface-elevated, #fff);
    border: 1px solid var(--smkk-spx-border, rgba(120, 130, 145, .25));
    border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.clint-actions-menu .app-btn { width: 100%; justify-content: center; min-height: 44px; }
body.device-phone .clint-actions > summary.clint-actions-toggle { width: 100%; }

/* ---------- 2) MOBILE ITEM CARDS: big name, small everything-else ---------- */
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] tbody tr {
    border: 1px solid var(--smkk-spx-border, rgba(120, 130, 145, .2));
    border-radius: 12px; padding: 12px; margin-bottom: 12px;
    background: var(--smkk-spx-surface, #fff);
}
/* the item name = the hero */
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] td[data-label="Item / context"] strong {
    font-size: 19px; font-weight: 800; line-height: 1.2; display: block; margin-bottom: 2px;
    color: var(--smkk-spx-text, #1f2933);
}
/* every detail = small + calm */
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] .muted.tiny {
    font-size: 12px; line-height: 1.35;
}
/* field labels: quiet, so the values lead */
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] td[data-label]::before {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; font-weight: 700;
}
/* hide the noise that overwhelms the card (debug audit cell + the 7-line package cell) */
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] td[data-label="Future records"],
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] td[data-label="Package match"] {
    display: none;
}
/* keep proof/next-action but compact */
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] td[data-label="Proof gap"],
body.device-phone .responsive-card-table[data-clint-receiving-work-queue-table] td[data-label="Action"] {
    font-size: 12px; color: var(--smkk-spx-text-muted, #5b6b7a);
}

/* ---------- 3) CLEAN THE GROSS TOP (Clint receiving page only, via :has) ---------- */
body.device-phone .app-main:has([data-clint-receiving-work-queue]) .app-header .app-subtitle { display: none; }
body.device-phone .app-main:has([data-clint-receiving-work-queue]) .app-header h1 { font-size: 20px; margin: 2px 0 0; }
body.device-phone .app-main:has([data-clint-receiving-work-queue]) .app-header .app-eyebrow { font-size: 11px; }
/* the huge instructional note -> clamp to a couple lines on phone */
body.device-phone .app-main:has([data-clint-receiving-work-queue]) .warehouse-note {
    font-size: 12px; line-height: 1.4; max-height: 4.4em; overflow: hidden;
}
/* the 8 proof stat cards -> tight 2-col */
body.device-phone .app-main:has([data-clint-receiving-work-queue]) .warehouse-proof-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
body.device-phone .app-main:has([data-clint-receiving-work-queue]) .warehouse-proof-card { padding: 8px 10px; }
body.device-phone .app-main:has([data-clint-receiving-work-queue]) .warehouse-proof-card span { font-size: 11px; }
/* the 9-badge count row -> horizontal scroll instead of a wrapped pile */
body.device-phone .warehouse-row-actions[data-clint-receiving-work-queue-counts] {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
}
body.device-phone .warehouse-row-actions[data-clint-receiving-work-queue-counts] .badge { white-space: nowrap; }