/* ════════════════════════════════════════════════════════════════════════
   PHASE 8 — INVOICE CLASSIFICATION SHOW-ALL MODE
   ════════════════════════════════════════════════════════════════════════
   Visual polish for the show-all toggle, filter chips, and dimmed-classified
   row treatment on /SalesAnalytics/InvoiceClassification when ShowAll=true.

   Builds on:
     - sa-shared.css                → tokens (--accent, --accent-soft,
                                       --accent-strong, --text-main,
                                       --text-muted, --glass-stroke*,
                                       --r-control, --r-pill, --t-fast,
                                       --warn-strong)
     - sales-analytics-phase4.css   → .sa-invoice-classify-card,
                                       .sa-divisions-toolbar,
                                       .sa-suggestion-pill variants,
                                       .sa-vendor-group(-done)

   Owns:
     - .sa-view-toggle / -active           server-side view-mode toggle link
     - .sa-filter-chips                    chip strip container
     - .sa-filter-chip / -active           individual filter chip + active
     - .sa-show-all-mode .sa-classified    dimmed classified rows
     - .sa-filtered-out                    Step 6 row-hide hook
     - .sa-vendor-group-filtered-out       Step 6 group-hide hook
     - .sa-empty-link / .sa-empty-sub      "view all classified" CTA in empty state
     - Show-all-mode override on Phase 4's .sa-vendor-group-done dimming
     - Responsive: chips tighten below 480px

   Color encoding for active filter chips matches Phase 4 kind colors:
     All          → accent blue
     Retail       → accent blue   (Retail's panel color)
     Ingredient   → emerald       (Ingredient's panel color)
     Operational  → neutral gray  (Operational's panel color)
     Unclassified → warn amber    ("needs attention" color)
   ════════════════════════════════════════════════════════════════════════ */


/* ── View-mode toggle ──────────────────────────────────────────────────
   Sits between the queue summary and the "Select & classify" toggle.
   Renders as an <a> for native page reload + back/forward navigation;
   no JS routing needed. Visually distinct from the classify-mode toggle
   so chef doesn't confuse "filter the view" with "enter selection mode." */

.sa-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--glass-stroke-strong);
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--r-control);
    font-size: 0.82rem;
    color: var(--text-main);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}

    .sa-view-toggle:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent-strong);
        text-decoration: none;
    }

.sa-view-toggle-active {
    background: var(--accent);
    border-color: var(--accent-strong);
    color: #fff;
}

    .sa-view-toggle-active:hover {
        background: var(--accent-strong);
        border-color: #1e40af;
        color: #fff;
    }

.sa-view-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    line-height: 1;
}


/* ── Filter chip strip ─────────────────────────────────────────────────
   Sits between toolbar and action bar in show-all mode. Five chips:
   All / Retail / Ingredient / Operational / Unclassified. Active chip
   is filled with kind color; inactive chips are outlined. Wrap to
   second row on narrow viewports. */

.sa-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    background: rgba(248, 250, 252, 0.65);
    border-bottom: 1px solid var(--glass-stroke);
}

.sa-filter-chip {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--glass-stroke-strong);
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}

    .sa-filter-chip:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
        color: var(--accent-strong);
    }

/* Active state. Base is the All variant (accent blue); kind-specific
   selectors override for the typed chips. */

.sa-filter-chip-active {
    background: var(--accent);
    border-color: var(--accent-strong);
    color: #fff;
    cursor: default;
}

    .sa-filter-chip-active:hover {
        background: var(--accent);
        border-color: var(--accent-strong);
        color: #fff;
    }

    .sa-filter-chip-active[data-filter="Ingredient"] {
        background: #10b981;
        border-color: #059669;
    }

        .sa-filter-chip-active[data-filter="Ingredient"]:hover {
            background: #10b981;
            border-color: #059669;
        }

    .sa-filter-chip-active[data-filter="Operational"] {
        background: #6b7280;
        border-color: #4b5563;
    }

        .sa-filter-chip-active[data-filter="Operational"]:hover {
            background: #6b7280;
            border-color: #4b5563;
        }

    .sa-filter-chip-active[data-filter="unclassified"] {
        background: var(--warn-strong, #d97706);
        border-color: #b45309;
    }

        .sa-filter-chip-active[data-filter="unclassified"]:hover {
            background: var(--warn-strong, #d97706);
            border-color: #b45309;
        }


/* ── Classified rows in show-all mode ──────────────────────────────────
   Subtle dim so the chef's eye goes to unclassified work. Not too faded
   — chef may still want to audit/edit. The kind badge stays bright via
   its existing Phase 4 sa-suggestion-pill-* background colors. */

.sa-show-all-mode .sa-invoice-item-row.sa-classified {
    opacity: 0.72;
    background: rgba(248, 250, 252, 0.35);
}

    .sa-show-all-mode .sa-invoice-item-row.sa-classified:hover {
        opacity: 0.95;
        background: rgba(219, 234, 254, 0.18);
    }


/* ── Vendor-group-done override in show-all mode ───────────────────────
   Phase 4's .sa-vendor-group-done applies opacity:.58 + strikethrough
   on the vendor name — designed for the post-classify "just finished"
   state. In show-all mode the same class is server-rendered on every
   fully-classified vendor, where that treatment is too heavy and
   compounds with per-row .sa-classified dimming. Restore opacity and
   drop the strikethrough; keep the ✓ done badge as the cue. */

.sa-show-all-mode .sa-vendor-group-done {
    opacity: 1;
}

    .sa-show-all-mode .sa-vendor-group-done .sa-vendor-name {
        text-decoration: none;
    }


/* ── Filter hide hooks (used by Step 6 JS) ─────────────────────────────
   When a filter chip is active, JS adds .sa-filtered-out to rows whose
   data-kind doesn't match. If every row in a vendor group is hidden,
   JS adds .sa-vendor-group-filtered-out to the group so the empty
   shell doesn't show. */

.sa-invoice-item-row.sa-filtered-out {
    display: none;
}

.sa-vendor-group.sa-vendor-group-filtered-out {
    display: none;
}


/* ── Empty-state link ──────────────────────────────────────────────────
   Sub-line CTA on the "all caught up" empty state, encouraging the
   chef to switch to show-all mode for audit. */

.sa-empty-sub {
    margin-top: 0.75rem;
    text-align: center;
}

.sa-empty-link {
    display: inline-block;
    color: var(--accent);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-control);
    transition: background var(--t-fast), color var(--t-fast);
}

    .sa-empty-link:hover {
        background: var(--accent-soft);
        color: var(--accent-strong);
        text-decoration: none;
    }


/* ── Responsive ────────────────────────────────────────────────────────
   Chips already wrap via flex-wrap. Below 480px, tighten the padding
   and font size so all five chips fit in roughly two rows. */

@media (max-width: 480px) {
    .sa-filter-chips {
        padding: 0.45rem 0.65rem;
        gap: 0.3rem;
    }

    .sa-filter-chip {
        font-size: 0.74rem;
        padding: 0.22rem 0.6rem;
    }

    .sa-view-toggle {
        font-size: 0.78rem;
        padding: 0.3rem 0.65rem;
    }
}

/* ───────── Pending-work badge on the "Classify invoices" link ─────────
   Surfaces unclassified invoice count from the Day page so the chef sees
   pending work without having to visit InvoiceClassification proactively.
   Phase 8.
*/
.sa-classify-invoices-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

    .sa-classify-invoices-link.sa-has-pending {
        border-color: rgba(217, 119, 6, 0.4);
    }

.sa-link-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--warn-strong, #d97706);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(217, 119, 6, 0.25);
}