/* ==========================================================================
   PHASE 3 — MEAL COMPARISON BADGES + NOTABLE STRIP
   --------------------------------------------------------------------------
   Builds on _MealMovers.cshtml. Three classifications get visible tags:
     - .sa-tag-thin       → "limited history" (gray, soft)
     - .sa-tag-new        → "new dish" (emerald, distinct)
     - .sa-tag-returning  → "returning" (amber, attention-grabbing but mild)

   Plus a "Notable this week" strip that holds new + returning dishes
   below the up/down mover cards.

   Owns:
     - .sa-meal-tag base
     - .sa-tag-thin, .sa-tag-new, .sa-tag-returning color variants
     - .sa-meal-movers overrides (longer titles than _PanelMovers)
     - .sa-meal-notable strip + child elements
     - Responsive: tighter padding under 720px

   Load order: after sa-shared.css, sales-analytics-phase1.css, and
   sales-analytics-phase2.css.
   ========================================================================== */


/* ── Classification tags ──────────────────────────────────────────────────
   All three share the same compact pill shape. Color encoding only —
   readable on either light or alternating-row backgrounds. */
.sa-meal-tag {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    margin-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    border-radius: 9px;
    line-height: 1.4;
    vertical-align: 1px;
    white-space: nowrap;
}

.sa-tag-thin {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.sa-tag-new {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.sa-tag-returning {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}


/* ── Meal-mover-specific overrides ────────────────────────────────────────
   _MealMovers shares card structure with _PanelMovers but the title text
   is longer ("Selling more than usual" vs "Movers up"). Slight tweaks so
   the longer titles don't feel cramped. */
.sa-meal-movers .sa-mover-hd-title {
    font-size: 0.86rem;
}

.sa-meal-movers .sa-mover-qty {
    font-size: 0.78rem;
}


/* ── Notable this week strip ──────────────────────────────────────────────
   Below the up/down cards, shows new + returning dishes that don't have
   a comparison baseline. Inline list, compact. Renders only when there
   are notable dishes — partial gates rendering. */
.sa-meal-notable {
    margin-top: 0.85rem;
    padding: 0.55rem 0.9rem;
    background: #fafbfc;
    border: 1px solid #e8eaee;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
}

.sa-meal-notable-label {
    color: #6b7280;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.sa-meal-notable-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
}

    .sa-meal-notable-list li {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.18rem 0.55rem;
        background: #fff;
        border: 1px solid #e8eaee;
        border-radius: 3px;
        font-size: 0.82rem;
    }

.sa-meal-notable-name {
    color: #374151;
    font-weight: 500;
}

.sa-meal-notable-qty {
    color: #6b7280;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}


/* ── Responsive ───────────────────────────────────────────────────────────
   Notable strip wraps cleanly already (flex-wrap), but the stacked
   layout under ~720px wants tighter padding. */
@media (max-width: 720px) {
    .sa-meal-notable {
        padding: 0.4rem 0.65rem;
        font-size: 0.8rem;
    }

    .sa-meal-notable-list {
        gap: 0.3rem 0.5rem;
    }
}