/* ============================================================================
 * EverShelf — mobile layout (layer 4, loaded LAST)
 *
 * Geometry only: no colours, no fonts, no theme. It exists because the three
 * layers below are desktop-first: on a 350-390 px phone the dashboard alerts
 * squeezed the name to ~90 px ("Formaggio spalmabile Philadelph…") and the
 * quantity line wrapped into six lines, while a shopping row collapsed its
 * title to 0 px (43 lines, one letter each) because the title is a flex row
 * with a nowrap quantity, an urgency badge and a price cell beside it.
 *
 * Rule of thumb: on a phone the TEXT gets the full width of the row and the
 * badges / quantities move under it; nothing is truncated to an ellipsis
 * unless it is a single short label, and no button is ever broken mid-word.
 * ========================================================================= */

@media (max-width: 640px) {
    /* Nothing may push a row wider than the screen. */
    .alert-item,
    .inventory-item,
    .shop-row-content,
    .product-item,
    .suggestion-item,
    .smart-item,
    .log-entry,
    .recipe-archive-card {
        min-width: 0;
    }

    /* ── Dashboard: expiring / expired / opened / unused-for-too-long ────── */
    .alert-item {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 6px;
        padding: 10px;
        font-size: 0.88rem;
    }
    .alert-item-info {
        flex: 1 1 100%;          /* the text owns the line… */
    }
    .alert-item-badges {
        max-width: 100%;         /* …and the badges/buttons wrap under it */
        flex: 0 1 auto;
        justify-content: flex-start;
    }
    .alert-item-name,
    .alert-item-head .alert-item-name,
    .alert-item-head .alert-item-brand {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
    .alert-item-qty,
    .alert-item-verdict {
        overflow-wrap: anywhere;
    }
    /* A label or a button is a unit: never broken after three letters. */
    .alert-item-badge,
    .alert-item-badges .btn-banner,
    .alert-item-badges .btn-alert-extend {
        white-space: nowrap;
    }
    .alert-item-badges .btn-banner,
    .alert-item-badges .btn-alert-extend {
        padding: 7px 10px;
        font-size: 0.8rem;
    }

    /* ── Inventory rows (pantry list + dashboard tiles) ──────────────────── */
    .inv-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }
    .inv-qty-right {
        max-width: 45%;
    }
    .inv-qty-value,
    .inv-qty-pkg-detail,
    .inv-expiry-small {
        white-space: normal;
    }
    .inv-expiry-small {
        text-align: right;
        line-height: 1.2;
    }

    /* ── Shopping list rows ─────────────────────────────────────────────── */
    .shop-row-main {
        gap: 10px;
        align-items: flex-start;
    }
    .shop-row-content {
        padding: 12px;
        min-height: 0;
    }
    .shop-row-visual {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    .shop-row-title {
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 8px;
        row-gap: 2px;
    }
    .shop-row-title-name {
        flex: 1 1 100%;          /* the name gets the first line, whole */
        font-size: 1.05rem;
    }
    .shop-row-qty {
        font-size: 1rem;
        text-align: left;
    }
    .shop-row-price {
        min-width: 0;
        align-self: flex-start;
    }
    .shop-row-price .price-col-main {
        font-size: 1rem;
    }
    .shop-row-subtitle,
    .shop-row-reason,
    .shop-row-sub {
        overflow-wrap: anywhere;
    }
    .shop-row-swipe-hint {
        font-size: 0.72rem;
    }

    /* ── Smaller lists: quick search, AI matches, receipt review, spend bars ─ */
    .quick-name-result-item .qnr-name,
    .ai-match-info strong,
    .review-item-name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }
    /* The bar-chart label was pinned to 78 px: "Latticini" came out as "Latticin…". */
    .ms-cat-name {
        min-width: 0;
        max-width: 38%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.15;
    }
    .qa-brand {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        line-height: 1.15;
    }

    /* ── "In previsione", products, recipes, log ────────────────────────── */
    .suggestion-name,
    .smart-item-name,
    .smart-item-specific,
    .product-preview-info h3,
    .log-product,
    .recipe-archive-title {
        overflow-wrap: anywhere;
    }
    .recipe-archive-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
}

/* Very narrow phones (iPhone SE 1st gen, 320 px): keep the text, drop the decor. */
@media (max-width: 400px) {
    .alert-item {
        padding: 9px;
    }
    .shop-row-visual {
        display: none;           /* decorative tile, 44 px the title needs */
    }
    .shop-row-swipe-hint {
        display: none;           /* the swipe zones still spell out their action */
    }
    .alert-item-badges .btn-banner,
    .alert-item-badges .btn-alert-extend {
        padding: 7px 8px;
    }
    .inv-qty-right {
        max-width: 40%;
    }
}