/* ==========================================================================
   PHASE 1 — CLASSIFICATION UI
   --------------------------------------------------------------------------
   Select-mode toggle, action bar, checkbox column, per-division bulk strips,
   kind tags. All visibility-gated on the .sa-classify-mode class on
   .sa-divisions-card, which JS adds when the toggle is activated.

   Color values use sensible neutral defaults; if the existing app has
   CSS custom properties for theme colors, swap those in.
   ========================================================================== */


/* ── Checkbox column variable ─────────────────────────────────────────────
   The grid templates in Day.cshtml are emitted inline with
     `var(--sa-checkbox-col, 0px) 24px 1.6fr ...`
   as the column track list, so this variable controls whether the checkbox
   column is visible. Zero-width by default; 36px when the card is in
   classify mode. */
.sa-divisions-card {
    --sa-checkbox-col: 0px;
}

    .sa-divisions-card.sa-classify-mode {
        --sa-checkbox-col: 36px;
    }


/* ── Toolbar layout ───────────────────────────────────────────────────────
   Make the toolbar a flex row so the toggle pushes to the right.
   Existing search bar stays at the left. */
.sa-divisions-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}


/* ── Classify-mode toggle (top-right of toolbar) ──────────────────────── */
.sa-classify-toggle {
    margin-left: auto;
    padding: 0.4rem 0.8rem;
    border: 1px solid #d0d4d9;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .sa-classify-toggle:hover {
        background: #f4f6f8;
    }

    .sa-classify-toggle.sa-active {
        background: #2a6df4;
        color: #fff;
        border-color: #2a6df4;
    }

        .sa-classify-toggle.sa-active:hover {
            background: #1f5dd1;
        }

.sa-classify-toggle-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* ── Action bar (multi-select operations) ─────────────────────────────────
   Sticky at the top of the divisions card while scrolling, so chef can
   classify a long list without losing the action buttons.

   The kind buttons are disabled by default (no selection); JS removes the
   disabled attribute when at least one checkbox is checked. */
.sa-classify-actionbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    background: #f0f4ff;
    border: 1px solid #b9cdf8;
    border-radius: 6px;
    margin: 0 0 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 4;
}

    .sa-classify-actionbar[hidden] {
        display: none;
    }

.sa-classify-actionbar-count {
    font-size: 0.85rem;
    color: #333;
    font-weight: 500;
    margin-right: 0.5rem;
}

.sa-classify-btn {
    padding: 0.35rem 0.85rem;
    border: 1px solid #d0d4d9;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #333;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

    .sa-classify-btn[data-kind="Retail"]:hover:not([disabled]) {
        background: #e0eaff;
        border-color: #4a7cf5;
    }

    .sa-classify-btn[data-kind="Meal"]:hover:not([disabled]) {
        background: #fff2dd;
        border-color: #d68a3a;
    }

    .sa-classify-btn[data-kind="Excluded"]:hover:not([disabled]) {
        background: #f0f0f2;
        border-color: #95989b;
    }

    .sa-classify-btn[disabled] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.sa-classify-btn-cancel {
    margin-left: auto;
    color: #666;
}


/* ── Per-division bulk strip ──────────────────────────────────────────────
   Sits above the accordion header. Hidden by default — visible only when
   parent card has .sa-classify-mode AND this strip has a non-zero
   unclassified count.

   The left padding aligns the strip's content with the row content
   (accounting for the checkbox column when active). */
.sa-bulk-strip {
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem 0.45rem calc(var(--sa-checkbox-col) + 0.75rem);
    background: #fafbfc;
    border-bottom: 1px solid #e8eaed;
    font-size: 0.8rem;
}

.sa-classify-mode .sa-bulk-strip[data-unclassified-count]:not([data-unclassified-count="0"]) {
    display: flex;
}

.sa-bulk-strip-count {
    color: #666;
}

.sa-bulk-strip-suggest {
    color: #333;
}

    .sa-bulk-strip-suggest[hidden] {
        display: none;
    }

.sa-bulk-strip-suggest-kind {
    font-weight: 600;
    margin: 0 0.25rem;
}

.sa-bulk-strip-suggest-reason {
    color: #888;
    font-style: italic;
    margin-left: 0.25rem;
}

.sa-bulk-strip-action {
    margin-left: auto;
    padding: 0.25rem 0.7rem;
    border: 1px solid #b9cdf8;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.78rem;
    color: #2a6df4;
}

    .sa-bulk-strip-action:hover {
        background: #f0f4ff;
    }


/* ── Per-row checkbox ─────────────────────────────────────────────────────
   The cell exists in every row (header and item) for grid alignment, but
   the actual <input> only exists on item rows and is hidden when the card
   isn't in classify mode. */
.sa-row-checkbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sa-row-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2a6df4;
}

.sa-divisions-card:not(.sa-classify-mode) .sa-row-checkbox {
    display: none;
}


/* ── Kind tags on rows ────────────────────────────────────────────────────
   Injected by JS into .sa-item-name based on saClassifiedPosKindsData.
   Three visible kinds plus a "pending review" state for legacy migration
   rows whose Kind defaulted to Retail without chef confirmation. */
.sa-kind-tag {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-left: 0.5rem;
    vertical-align: middle;
    line-height: 1.4;
}

.sa-kind-tag-retail {
    background: #e0eaff;
    color: #1f4dbd;
}

.sa-kind-tag-meal {
    background: #fff2dd;
    color: #8b5921;
}

.sa-kind-tag-excluded {
    background: #f0f0f2;
    color: #5a5d61;
}

.sa-kind-tag-pending {
    background: transparent;
    color: #888;
    border: 1px dashed #c5c8cc;
    font-style: italic;
}


/* ── Dim already-classified rows in classify mode ─────────────────────────
   Pulls chef's eye to unclassified rows. Hover restores most of the
   opacity so chef can still see clearly when interacting. */
.sa-classify-mode .sa-acc-header.sa-classified,
.sa-classify-mode .sa-item-row.sa-classified {
    opacity: 0.55;
}

    .sa-classify-mode .sa-acc-header.sa-classified:hover,
    .sa-classify-mode .sa-item-row.sa-classified:hover {
        opacity: 0.85;
    }


/* ── Per-division bulk strip — Phase 1 polish ─────────────────────────────
   Sits above the accordion header. Quieter visual weight than v1 — reads
   as a subtle prefix line rather than a card-style container competing
   with the accordion below. */
.sa-bulk-strip {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.18rem 0.75rem 0.18rem calc(var(--sa-checkbox-col) + 0.75rem);
    /* Background and border removed — strip is part of the division's
       whitespace, not its own container. */
    font-size: 0.72rem;
}

.sa-classify-mode .sa-bulk-strip[data-unclassified-count]:not([data-unclassified-count="0"]) {
    display: flex;
}

/* Hide the strip when its accordion is expanded — chef has opened the
   division to look at items, the bulk action is no longer the relevant
   operation. Higher specificity than the show rule above, so wins
   without !important. */
.sa-classify-mode .sa-accordion:has(.sa-acc-header[aria-expanded="true"]) .sa-bulk-strip {
    display: none;
}

.sa-bulk-strip-count {
    color: #888;
}

.sa-bulk-strip-suggest {
    color: #666;
}

    .sa-bulk-strip-suggest[hidden] {
        display: none;
    }

.sa-bulk-strip-suggest-kind {
    font-weight: 600;
    margin: 0 0.2rem;
}

.sa-bulk-strip-suggest-reason {
    color: #999;
    font-style: italic;
    margin-left: 0.2rem;
}

.sa-bulk-strip-action {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    border: 1px solid #d8e1f5;
    background: transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.72rem;
    color: #2a6df4;
}

    .sa-bulk-strip-action:hover {
        background: #f0f4ff;
        border-color: #b9cdf8;
    }


/* ═══════════════════════════════════════════════════════════════════════
   Phase 2C — Panel layout polish
   ═══════════════════════════════════════════════════════════════════════
   Builds on the Phase 2B Day.cshtml structure:

     section.sa-divisions-card
       div.sa-divisions-toolbar
       div.sa-divisions-legend
       div.sa-accordions
         div.sa-panel.sa-panel-unclassified
         div.sa-panel.sa-panel-retail
         div.sa-panel.sa-panel-meal
       details.sa-excluded-footer

   Goals:
     1. Visible section headers per panel (was small inline text)
     2. Subtle color accent per kind (left border on header, no fills)
     3. Vertical breathing room between panels
     4. Unclassified CTA reads as an action button, not a link
     5. Compact movers row beneath retail/meal panels
     6. Excluded footer is a compressed strip until expanded
   ─────────────────────────────────────────────────────────────────────── */


/* ── Panel container ──────────────────────────────────────────────────────
   Top margin separates panels visually inside the shared divisions-card.
   First-child override keeps the first panel flush with the legend. */
.sa-panel {
    margin-top: 1.75rem;
}

    .sa-panel:first-child {
        margin-top: 0.5rem;
    }


/* ── Panel header ─────────────────────────────────────────────────────────
   Flex row: name on the left, meta/KPIs/CTA on the right.
   The colored left border is the kind-specific accent — very subtle, no
   filled backgrounds (those would compete with the accordion rows below).

   Order on the right:
     - Unclassified: meta text + CTA button (header has Classify items →)
     - Retail:       KPI strip (Units, Rev, $/unit, Items, Divs)
     - Meal:         KPI strip (Portions, Rev, $/portion, Dishes, Divs)

   margin-left: auto on the right-side element pushes it to the far right;
   gap on the parent flex handles spacing within. */
.sa-panel-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.9rem 0.55rem 0.9rem;
    border-bottom: 1px solid #e8eaee;
    background: transparent;
    margin-bottom: 0.25rem;
    border-left: 3px solid transparent; /* placeholder; per-kind below */
}

.sa-panel-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3e50;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

/* Per-kind accent — single left border, ~3px, calm tones */
.sa-panel-unclassified .sa-panel-header {
    border-left-color: #f59e0b; /* amber */
}

.sa-panel-retail .sa-panel-header {
    border-left-color: #3b82f6; /* blue */
}

.sa-panel-meal .sa-panel-header {
    border-left-color: #10b981; /* emerald */
}


/* ── Unclassified panel — meta line + CTA button ──────────────────────────
   "X items pending classification across Y divisions" + a primary action
   button that activates classify mode. Visual weight: meta text quiet,
   CTA prominent. */
.sa-panel-meta {
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.4;
}

    .sa-panel-meta strong {
        color: #374151;
        font-weight: 600;
    }

.sa-panel-cta {
    margin-left: auto;
    padding: 0.38rem 0.8rem;
    background: #f59e0b;
    color: #fff;
    border: 1px solid #d97706;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

    .sa-panel-cta:hover {
        background: #d97706;
        border-color: #b45309;
    }

    .sa-panel-cta:active {
        background: #b45309;
    }

/* Hide the CTA when classify mode is already active — the toolbar toggle
   covers the same intent and the redundant button just adds noise. */
.sa-classify-mode .sa-panel-cta {
    display: none;
}


/* ── Retail / Meal panels — KPI strip on the header right ─────────────────
   Inline list of per-panel summary numbers. Labels small uppercase to
   match the headline pill style; values inherit normal weight. */
.sa-panel-kpis {
    display: flex;
    gap: 1.1rem;
    margin-left: auto;
    align-items: baseline;
    font-size: 0.85rem;
    color: #4b5563;
}

    .sa-panel-kpis > span {
        white-space: nowrap;
    }

.sa-panel-kpi-label {
    color: #9ca3af;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.25rem;
    font-weight: 600;
}


/* ── Panel divisions wrapper ──────────────────────────────────────────────
   The partial wraps accordion rows in .sa-panel-divisions. Existing
   .sa-accordion CSS (Phase 1) handles the per-row styling — we only need
   to ensure the first accordion sits cleanly under the panel header. */
.sa-panel-divisions {
    /* No padding — accordion rows handle their own spacing.
       Listed for documentation; rule could be omitted. */
}


/* ── Movers row beneath a panel ───────────────────────────────────────────
   _PanelMovers.cshtml renders <div class="sa-movers-row-compact sa-panel-movers">
   containing two .sa-card.sa-mover-card siblings. The existing mover-card
   CSS handles the card itself; we just space the row from the accordions
   above and the next panel below. */
.sa-panel-movers {
    margin-top: 1.1rem;
    margin-bottom: 0.25rem;
}


/* ── Excluded footer ──────────────────────────────────────────────────────
   <details> element — collapsed by default to a single thin strip,
   expanded shows the flat item list. Native disclosure triangle hidden in
   favor of a CSS-rendered chevron that rotates with [open] state.

   The flat list is a CSS grid per row: division | name | code | qty | rev.
   Subtle alternating row background to scan long lists more easily. */
.sa-excluded-footer {
    margin-top: 1.75rem;
    padding: 0.55rem 0.9rem;
    background: #f8f9fa;
    border: 1px solid #e8eaee;
    border-radius: 4px;
    font-size: 0.85rem;
}

    .sa-excluded-footer summary {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: #6b7280;
        list-style: none;
        user-select: none;
        padding: 0.15rem 0;
    }
        /* Hide native triangle (Webkit + Firefox). */
        .sa-excluded-footer summary::-webkit-details-marker {
            display: none;
        }

        .sa-excluded-footer summary::marker {
            content: "";
        }

        /* Custom chevron — rotates 90° when [open]. */
        .sa-excluded-footer summary::before {
            content: '▸';
            font-size: 0.78rem;
            color: #9ca3af;
            transition: transform 0.15s ease;
            display: inline-block;
        }

    .sa-excluded-footer[open] summary::before {
        transform: rotate(90deg);
    }

.sa-excluded-label {
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.74rem;
}

.sa-excluded-meta {
    color: #9ca3af;
    font-size: 0.82rem;
}

    .sa-excluded-meta strong {
        color: #4b5563;
        font-weight: 600;
    }

.sa-excluded-list {
    margin: 0.65rem 0 0 0;
    padding: 0.4rem 0 0 0;
    list-style: none;
    border-top: 1px solid #e8eaee;
}

    .sa-excluded-list li {
        display: grid;
        grid-template-columns: 1.1fr 2.4fr 90px 70px 80px;
        gap: 0.75rem;
        padding: 0.32rem 0.5rem;
        align-items: center;
        color: #4b5563;
        font-size: 0.83rem;
        border-radius: 2px;
    }

        .sa-excluded-list li:nth-child(odd) {
            background: rgba(0, 0, 0, 0.018);
        }

        .sa-excluded-list li:hover {
            background: rgba(59, 130, 246, 0.04);
        }

.sa-excluded-div {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sa-excluded-name {
    color: #374151;
}

.sa-excluded-code {
    color: #9ca3af;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.76rem;
}

.sa-excluded-qty {
    text-align: right;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
}

.sa-excluded-rev {
    text-align: right;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}


/* ── Responsive: narrow viewports ─────────────────────────────────────────
   Panel header gets cramped under ~720px. Stack the right-side element
   below the name. KPIs wrap to two rows if needed. */
@media (max-width: 720px) {
    .sa-panel-header {
        flex-wrap: wrap;
        gap: 0.5rem 0.85rem;
    }

    .sa-panel-kpis,
    .sa-panel-cta,
    .sa-panel-meta {
        margin-left: 0;
    }

    .sa-panel-kpis {
        flex-wrap: wrap;
        gap: 0.5rem 0.85rem;
        font-size: 0.8rem;
    }

    .sa-excluded-list li {
        grid-template-columns: 1fr 70px 70px;
        gap: 0.4rem;
    }

        .sa-excluded-list li .sa-excluded-div,
        .sa-excluded-list li .sa-excluded-code {
            display: none;
        }
}

/* ═══════════════════════════════════════════════════════════════════════
   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.
   ─────────────────────────────────────────────────────────────────────── */


/* ── 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;
    }
}