/* ==========================================================================
   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.

   Owns:
     - --sa-checkbox-col variable on .sa-divisions-card
     - .sa-divisions-toolbar layout
     - .sa-classify-toggle (toolbar button + active state)
     - .sa-classify-actionbar (sticky multi-select action bar)
     - .sa-classify-btn variants per kind (Retail/Meal/Excluded + cancel)
     - .sa-bulk-strip (initial definition + Phase 1 polish override)
     - .sa-row-checkbox (cell + input)
     - .sa-kind-tag variants (retail/meal/excluded/pending)
     - Dim already-classified rows when in classify mode

   Load order: after sa-shared.css and sa-analytics.css (or whatever owns
   the base Day page layout — .sa-divisions-card, .sa-accordions, etc.).
   Color values use neutral defaults; if those base files expose theme
   custom properties, the values here can be swapped in later.

   Note: .sa-bulk-strip is defined twice — once initial, once as a
   "Phase 1 polish" override. Cascade resolves with the second winning on
   overlapping properties (gap, padding, font-size). Kept verbatim from
   the original v1 → polish progression rather than merged so the intent
   stays visible in diffs.
   ========================================================================== */


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