/* ==========================================================================
   AGGROW CustomerBuyProfile (panel/dialog) — class trích từ inline style, theme-aware.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   Token nội bộ panel (đồng bộ palette MudBlazor, an toàn Light/Dark).
   Dùng cho viền/nền pastel theo ngữ nghĩa thay cho hex tối cố định.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tiện ích dùng chung trong panel/dialog (theme-aware) ── */
.cbp-thead-sticky      { position: sticky; top: 0; z-index: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   BulkRunWizard — dải hướng dẫn "🚀 Chạy cả kỳ".
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Khung dải (gradient nhạt success) ── */
.cbp-wiz {
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.18);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(var(--mud-palette-success-rgb), 0.05) 0%, rgba(var(--mud-palette-success-rgb), 0.01) 100%);
}

/* ── Title ── */
.cbp-wiz-title     { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; }
.cbp-wiz-emoji     { font-size: 17px; line-height: 1; }
.cbp-wiz-title-txt { flex: 1; min-width: 0; }
.cbp-wiz-title-head    { font-weight: 700; font-size: 13px; color: var(--mud-palette-success); letter-spacing: 0.2px; }
.cbp-wiz-title-sub     { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.4); }
.cbp-wiz-step-count {
    font-size: 10px; font-weight: 700;
    color: rgba(var(--ag-fg-rgb), 0.5);
    background: rgba(var(--ag-fg-rgb), 0.05);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 20px; padding: 3px 11px; white-space: nowrap;
}

/* ── Step strip ── */
.cbp-wiz-steps { display: flex; align-items: stretch; gap: 0; padding: 8px 12px 4px; overflow-x: auto; }

/* ── Bước 1: vùng độ phủ kỳ ── */
.cbp-wiz-step1     { padding: 6px 16px 12px; }
.cbp-wiz-row       { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cbp-wiz-btn-tall  { height: 36px; font-weight: 700; white-space: nowrap; }
.cbp-wiz-btn-add   { height: 32px; font-weight: 600; white-space: nowrap; }
.cbp-wiz-btn-addall{ height: 32px; font-weight: 700; white-space: nowrap; }
.cbp-wiz-coverage-text { font-size: 12px; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; }
.cbp-wiz-covered   { color: var(--mud-palette-success); }
.cbp-wiz-chip-bold { font-weight: 700; }
.cbp-wiz-toggle {
    cursor: pointer; font-size: 11px; font-weight: 600; color: var(--mud-palette-info);
    user-select: none; display: inline-flex; align-items: center; gap: 2px;
}
.cbp-wiz-icon-16   { font-size: 16px; }
.cbp-wiz-add-group { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cbp-wiz-hint-empty{ font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.3); font-style: italic; }

/* ── Danh sách độ phủ (bung) ── */
.cbp-wiz-cov-lists { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.cbp-cov-list {
    flex: 1; min-width: 240px;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.10);
    border-radius: 8px; overflow: hidden;
    background: rgba(var(--ag-fg-rgb), 0.015);
}
.cbp-cov-list-head { padding: 6px 12px; font-size: 11px; font-weight: 700; border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.12); }
.cbp-cov-list-head--missing   { color: var(--mud-palette-error);   background: rgba(var(--mud-palette-error-rgb), 0.08); }
.cbp-cov-list-head--uncovered { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), 0.08); }
.cbp-cov-list-body { max-height: 200px; overflow-y: auto; }
.cbp-cov-item {
    display: flex; align-items: baseline; gap: 8px; padding: 4px 12px;
    border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.04); font-size: 11px;
}
.cbp-cov-code { font-family: monospace; color: var(--mud-palette-info); flex-shrink: 0; }
.cbp-cov-name { color: rgba(var(--ag-fg-rgb), 0.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-cov-alliance {
    margin-left: auto; flex-shrink: 0; font-size: 9px;
    color: rgba(var(--ag-fg-rgb), 0.35);
    background: rgba(var(--ag-fg-rgb), 0.05);
    border-radius: 4px; padding: 1px 6px;
}

/* ── Bước 2-3-4: lối đi nhanh ── */
.cbp-wiz-fast {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px; align-items: center;
    border-top: 1px solid rgba(var(--ag-fg-rgb), 0.05);
}
.cbp-wiz-fast-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    color: rgba(var(--ag-fg-rgb), 0.3);
}
.cbp-wiz-btn-fast  { height: 34px; font-weight: 600; white-space: nowrap; }
.cbp-wiz-btn-fast--strong { font-weight: 700; }
.cbp-wiz-chevron   { font-size: 16px; color: rgba(var(--ag-fg-rgb), 0.2); }
.cbp-wiz-count-tail{ margin-left: auto; font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.45); white-space: nowrap; }

/* ── Step pill (RenderStep) — biến thể done/active/idle qua class ── */
.cbp-step      { display: flex; align-items: center; gap: 9px; min-width: 150px; flex: 1; }
.cbp-step-dot {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; transition: all 0.2s;
    background: rgba(var(--ag-fg-rgb), 0.05);
    border: 1.5px solid rgba(var(--ag-fg-rgb), 0.14);
    color: rgba(var(--ag-fg-rgb), 0.4);
}
.cbp-step-dot--active {
    background: rgba(var(--mud-palette-info-rgb), 0.18);
    border-color: var(--mud-palette-info);
    color: var(--mud-palette-info);
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-info-rgb), 0.10);
}
.cbp-step-dot--done {
    background: var(--mud-palette-success);
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-surface);
    box-shadow: none;
}
.cbp-step-body  { min-width: 0; }
.cbp-step-title { font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-step-title--active { color: var(--mud-palette-text-primary); }
.cbp-step-title--done   { color: var(--mud-palette-success); }
.cbp-step-hint {
    font-size: 9.5px; color: rgba(var(--ag-fg-rgb), 0.32); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Connector giữa các bước ── */
.cbp-connector {
    flex: 0 0 auto; align-self: center; width: 28px; height: 2px; margin: 0 2px;
    border-radius: 2px; background: rgba(var(--ag-fg-rgb), 0.1); transition: background 0.25s;
}
.cbp-connector--filled { background: var(--mud-palette-success); }

/* ══════════════════════════════════════════════════════════════════════════
   MarkupPreviewDialog — overlay xác nhận "Lưu Markup".
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Backdrop + shell modal (overlay tự dựng, không qua MudDialog) ── */
.cbp-overlay-backdrop { position: fixed; inset: 0; z-index: 8999; background: var(--ag-surface-sunken); }
.cbp-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9000;
    background: var(--mud-palette-surface);
    border-radius: 14px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column;
}
.cbp-modal--success { border: 1px solid rgba(var(--mud-palette-success-rgb), 0.4); width: min(720px, 94vw); max-height: 88vh; }
.cbp-modal--info    { border: 1px solid rgba(var(--mud-palette-info-rgb), 0.4); width: min(700px, 92vw); }

/* ── Header modal ── */
.cbp-modal-head      { display: flex; align-items: center; gap: 10px; padding: 16px 22px 12px; border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.07); }
.cbp-modal-head-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cbp-modal-head-icon--success { background: rgba(var(--mud-palette-success-rgb), 0.12); }
.cbp-modal-head-icon--info    { background: rgba(var(--mud-palette-info-rgb), 0.12); }
.cbp-icon--success { color: var(--mud-palette-success); font-size: 20px; }
.cbp-icon--info    { color: var(--mud-palette-info); font-size: 20px; }
.cbp-modal-head-txt   { flex: 1; min-width: 0; }
.cbp-modal-title      { font-weight: 700; font-size: 14px; color: var(--mud-palette-text-primary); }
.cbp-modal-sub        { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbp-icon-btn-muted   { color: rgba(var(--ag-fg-rgb), 0.4); }

/* ── Body modal ── */
.cbp-modal-body { padding: 16px 22px; overflow: auto; flex: 1; }
.cbp-stat-row   { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cbp-stat-box   { flex: 1; border-radius: 8px; padding: 10px 12px; }
.cbp-stat-box--purple { min-width: 110px; border: 1px solid rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.06); }
.cbp-stat-box--info   { min-width: 90px; border: 1px solid rgba(var(--mud-palette-info-rgb), 0.25); background: rgba(var(--mud-palette-info-rgb), 0.06); }
.cbp-stat-box--success{ min-width: 90px; border: 1px solid rgba(var(--mud-palette-success-rgb), 0.25); background: rgba(var(--mud-palette-success-rgb), 0.06); }
.cbp-stat-label { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-stat-value { font-size: 18px; font-weight: 800; }
.cbp-stat-value--purple  { color: #c4b5fd; }
.cbp-stat-value--info    { color: var(--mud-palette-info); }
.cbp-stat-value--success { color: var(--mud-palette-success); }

.cbp-note-warn  { font-size: 11px; color: var(--mud-palette-warning); margin-bottom: 10px; }
.cbp-note-summary { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.6); margin-bottom: 10px; }

/* ── Bảng bậc giá preview ── */
.cbp-tier-wrap  { border-radius: 8px; border: 1px solid var(--ag-border); overflow: auto; max-height: 38vh; }
.cbp-tier-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 420px; }
.cbp-tier-head  { background: var(--mud-palette-surface); text-align: left; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-tier-th        { padding: 6px 10px; font-weight: 600; }
.cbp-tier-th--center{ text-align: center; }
.cbp-tier-th--right { text-align: right; }
.cbp-tier-row   { border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.04); }
.cbp-tier-td        { padding: 5px 10px; }
.cbp-tier-td--center{ text-align: center; color: rgba(var(--ag-fg-rgb), 0.7); }
.cbp-tier-td--right { text-align: right; color: rgba(var(--ag-fg-rgb), 0.7); }
.cbp-tier-code  { font-family: monospace; color: var(--mud-palette-info); font-size: 11px; white-space: nowrap; }
.cbp-tier-uom   { color: rgba(var(--ag-fg-rgb), 0.5); }
.cbp-tier-disc  { text-align: right; color: var(--mud-palette-success); font-weight: 600; }
.cbp-tier-fixed { text-align: right; color: var(--mud-palette-warning); }
.cbp-tier-fixed--empty { color: rgba(var(--ag-fg-rgb), 0.25); }
.cbp-tier-empty { padding: 16px; text-align: center; color: rgba(var(--ag-fg-rgb), 0.3); font-size: 12px; font-style: italic; }

/* ── Footer modal ── */
.cbp-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 16px; border-top: 1px solid rgba(var(--ag-fg-rgb), 0.07); }
.cbp-btn-muted  { color: rgba(var(--ag-fg-rgb), 0.5); }

/* ══════════════════════════════════════════════════════════════════════════
   GenerationAuditDialog — lịch sử tạo BG (trong MudDialog).
   ══════════════════════════════════════════════════════════════════════════ */

.cbp-dlg-title       { display: flex; align-items: center; gap: 10px; }
.cbp-icon--purple    { color: #a78bfa; vertical-align: middle; }
.cbp-dlg-title-head  { font-weight: 700; line-height: 1.1; }
.cbp-text-muted-45   { color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-btn-nowrap      { font-weight: 600; white-space: nowrap; }

.cbp-filter-bar      { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.cbp-seg-group       { display: flex; gap: 0; }
.cbp-seg--left       { border-radius: 6px 0 0 6px; font-weight: 600; }
.cbp-seg--mid        { border-radius: 0; font-weight: 600; border-left: none; border-right: none; }
.cbp-seg--right      { border-radius: 0 6px 6px 0; font-weight: 600; }
.cbp-field-140       { width: 140px; }
.cbp-field-108       { width: 108px; }
.cbp-filter-count    { color: rgba(var(--ag-fg-rgb), 0.45); align-self: center; margin-left: auto; white-space: nowrap; }

/* ── Dải thống kê (stat cards) ── */
.cbp-audit-stats     { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 14px; }
.cbp-stat-card {
    flex: 0 0 auto; min-width: 130px; padding: 8px 12px;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.08); border-radius: 8px;
    background: var(--ag-surface-sunken);
}
.cbp-stat-card-label { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.45); text-transform: uppercase; letter-spacing: 0.4px; }
.cbp-stat-card-value { font-size: 18px; font-weight: 800; color: var(--mud-palette-text-primary); line-height: 1.3; }
.cbp-stat-card-value--success { color: var(--mud-palette-success); }
.cbp-stat-card-value--info    { color: var(--mud-palette-info); }
.cbp-stat-card-label--full    { width: 100%; margin-bottom: 2px; }
.cbp-mode-box {
    flex: 1 1 320px; min-width: 240px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px;
    padding: 8px 10px; border: 1px solid rgba(var(--ag-fg-rgb), 0.08); border-radius: 8px;
    background: var(--ag-surface-sunken);
}
.cbp-stats-caption { color: rgba(var(--ag-fg-rgb), 0.35); display: block; margin-top: -8px; margin-bottom: 10px; }

/* ── Empty state ── */
.cbp-empty       { padding: 36px 20px; text-align: center; }
.cbp-empty-icon  { font-size: 40px; color: rgba(var(--ag-fg-rgb), 0.18); }
.cbp-empty-text  { color: rgba(var(--ag-fg-rgb), 0.4); margin-top: 8px; }

/* ── Bảng audit ── */
.cbp-audit-wrap  { overflow: auto; max-height: 60vh; border: 1px solid rgba(var(--ag-fg-rgb), 0.08); border-radius: 8px; }
.cbp-audit-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 920px; }
.cbp-audit-head-row { background: var(--ag-surface-sunken); color: rgba(var(--ag-fg-rgb), 0.45); text-align: left; }
.cbp-audit-th       { padding: 8px 12px; font-weight: 600; }
.cbp-audit-th--nowrap { white-space: nowrap; }
.cbp-audit-row      { border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.05); }
.cbp-audit-td       { padding: 7px 12px; }
.cbp-audit-td--time { white-space: nowrap; color: rgba(var(--ag-fg-rgb), 0.7); }
.cbp-audit-td--team { max-width: 200px; }
.cbp-audit-team-name{ color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-audit-team-code{ font-family: monospace; color: var(--mud-palette-info); font-size: 10px; }
.cbp-audit-td--period { color: rgba(var(--ag-fg-rgb), 0.6); white-space: nowrap; }
.cbp-audit-td--center { text-align: center; white-space: nowrap; }
.cbp-audit-src      { font-size: 9px; color: rgba(var(--ag-fg-rgb), 0.35); margin-top: 2px; }
.cbp-audit-td--line { text-align: right; font-weight: 700; color: var(--mud-palette-text-primary); }
.cbp-audit-td--margin { text-align: right; white-space: nowrap; }
.cbp-margin-strong  { font-weight: 700; }
.cbp-margin-floor   { color: rgba(var(--ag-fg-rgb), 0.3); font-size: 10px; }
.cbp-dash-muted     { color: rgba(var(--ag-fg-rgb), 0.25); }
.cbp-target         { font-size: 10px; font-weight: 700; }
.cbp-audit-td--user { color: rgba(var(--ag-fg-rgb), 0.6); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-link-quote {
    font-size: 11px; color: var(--mud-palette-info); text-decoration: none;
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.3); padding: 3px 10px; border-radius: 4px;
}

/* ── Chip "kiểu tạo" (ModeBadge) — chip nhỏ trong dải thống kê ── */
.cbp-mode-chip { border-radius: 5px; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* ── Badge "kiểu tạo" trong ô bảng (nhỏ hơn) ── */
.cbp-mode-badge { border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; }
/* Bảng màu theo GenerationMode (nền pastel + chữ semantic, theme-aware). */
.cbp-mode--info    { background: rgba(var(--mud-palette-info-rgb), 0.13);    color: var(--mud-palette-info); }
.cbp-mode--success { background: rgba(var(--mud-palette-success-rgb), 0.13); color: var(--mud-palette-success); }
.cbp-mode--purple  { background: rgba(167, 139, 250, 0.13);                  color: #a78bfa; }
.cbp-mode--muted   { background: rgba(var(--ag-fg-rgb), 0.10);               color: rgba(var(--ag-fg-rgb), 0.65); }
.cbp-mode--warning { background: rgba(var(--mud-palette-warning-rgb), 0.13); color: var(--mud-palette-warning); }

/* ══════════════════════════════════════════════════════════════════════════
   QuoteSummaryPanel — thanh tóm tắt báo giá (sticky command bar).
   ══════════════════════════════════════════════════════════════════════════ */

.cbp-summary {
    position: sticky; top: 0; z-index: 5;
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.25);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
    background: var(--mud-palette-surface);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.cbp-summary-row1   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cbp-summary-icon   { color: var(--mud-palette-success); font-size: 20px; }
.cbp-summary-title  { font-weight: 700; margin: 0; color: var(--mud-palette-text-primary); }
.cbp-summary-spacer { margin-left: auto; }
.cbp-summary-hint   { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.35); font-style: italic; }
.cbp-summary-btn    { font-weight: 700; white-space: nowrap; height: 36px; }

/* ── Badge trạng thái đạt/không đạt (sàn / target) ── */
.cbp-badge      { font-size: 11px; padding: 3px 10px; border-radius: 6px; font-weight: 700; }
.cbp-badge--ok  { background: rgba(var(--mud-palette-success-rgb), 0.15); color: var(--mud-palette-success); }
.cbp-badge--bad { background: rgba(var(--mud-palette-error-rgb), 0.15); color: var(--mud-palette-error); }

/* ── Hàng KPI ── */
.cbp-kpi-row    { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cbp-kpi-box    { border: 1px solid rgba(var(--ag-fg-rgb), 0.08); border-radius: 8px; padding: 8px 12px; }
.cbp-kpi-box--1 { flex: 1; min-width: 150px; }
.cbp-kpi-box--margin { flex: 1; min-width: 160px; }
.cbp-kpi-box--2 { flex: 2; min-width: 240px; }
.cbp-kpi-label  { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-kpi-value  { font-size: 18px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cbp-kpi-value--ok  { color: var(--mud-palette-success); }
.cbp-kpi-value--bad { color: var(--mud-palette-error); }
.cbp-kpi-sub-floor  { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.4); }
.cbp-kpi-sub    { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.4); }
.cbp-kpi-note   { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.7); line-height: 1.35; }
.cbp-kpi-dot    { color: rgba(var(--ag-fg-rgb), 0.3); }

/* ══════════════════════════════════════════════════════════════════════════
   MissingLinesPanel — panel "⚠ Thiếu N SP".
   ══════════════════════════════════════════════════════════════════════════ */

.cbp-missing {
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.32);
    border-radius: 10px; margin-bottom: 12px; overflow: hidden;
    background: rgba(var(--mud-palette-warning-rgb), 0.05);
}
.cbp-missing-head {
    cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: rgba(var(--mud-palette-warning-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.06);
}
.cbp-missing-head--collapsed { border-bottom: none; }
.cbp-missing-icon  { color: var(--mud-palette-warning); font-size: 20px; flex-shrink: 0; }
.cbp-missing-head-txt { flex: 1; min-width: 0; }
.cbp-missing-title { font-weight: 700; font-size: 13px; color: var(--mud-palette-warning); }
.cbp-missing-sub   { font-size: 10px; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-missing-selected {
    font-size: 11px; font-weight: 700; color: var(--mud-palette-success);
    background: rgba(var(--mud-palette-success-rgb), 0.14); border-radius: 6px; padding: 2px 10px; white-space: nowrap;
}
.cbp-caret      { font-size: 13px; color: rgba(var(--ag-fg-rgb), 0.5); transition: transform 0.15s; transform: rotate(0deg); }
.cbp-caret--open{ transform: rotate(90deg); }

.cbp-missing-table-wrap { overflow: auto; max-height: 42vh; }
.cbp-missing-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 900px; }
.cbp-missing-head-row { background: var(--ag-surface-sunken); text-align: left; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-missing-th--check  { padding: 7px 10px; width: 34px; text-align: center; }
.cbp-missing-th         { padding: 7px 10px; font-weight: 600; }
.cbp-missing-th--right  { text-align: right; }
.cbp-missing-th--sl     { text-align: right; width: 96px; }
.cbp-missing-th--price  { text-align: right; width: 120px; }
.cbp-missing-th--margin { text-align: right; width: 72px; }
.cbp-checkbox   { cursor: pointer; width: 15px; height: 15px; accent-color: var(--mud-palette-success); }
.cbp-missing-row { border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.04); }
.cbp-missing-row--selected { background: rgba(var(--mud-palette-success-rgb), 0.05); }
.cbp-td-check   { padding: 6px 10px; text-align: center; vertical-align: middle; }
.cbp-td-code    { padding: 6px 10px; font-family: monospace; color: var(--mud-palette-info); font-size: 11px; white-space: nowrap; vertical-align: middle; }
.cbp-barcode    { font-family: monospace; color: rgba(var(--ag-fg-rgb), 0.35); font-size: 9px; }
.cbp-td-name    { padding: 6px 10px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.cbp-td-reason  { padding: 6px 10px; vertical-align: middle; }
.cbp-reason-chip {
    display: inline-block; background: rgba(var(--mud-palette-warning-rgb), 0.14); color: var(--mud-palette-warning);
    border-radius: 4px; padding: 1px 8px; font-size: 10px; font-weight: 600;
}
.cbp-td-num     { padding: 6px 10px; text-align: right; vertical-align: middle; }
.cbp-num-input {
    width: 100%; max-width: 110px; text-align: right;
    background: rgba(var(--ag-fg-rgb), 0.04); border: 1px solid rgba(var(--ag-fg-rgb), 0.14);
    border-radius: 6px; padding: 4px 8px; color: var(--mud-palette-text-primary);
    font-size: 12px; font-weight: 600; outline: none;
}
.cbp-td-margin  { padding: 6px 10px; text-align: right; white-space: nowrap; vertical-align: middle; }
.cbp-td-cost    { padding: 6px 10px; text-align: right; white-space: nowrap; color: rgba(var(--ag-fg-rgb), 0.6); vertical-align: middle; }
.cbp-td-cost--empty { color: rgba(var(--ag-fg-rgb), 0.25); }
.cbp-margin-pill { border-radius: 4px; padding: 2px 8px; font-weight: 700; font-size: 11px; }
/* Bậc màu margin (theo MarginColor): nền pastel + chữ semantic, theme-aware. */
.cbp-margin-pill--na   { background: rgba(var(--ag-fg-rgb), 0.10);            color: rgba(var(--ag-fg-rgb), 0.7); }
.cbp-margin-pill--neg  { background: rgba(var(--mud-palette-error-rgb), 0.14);   color: var(--mud-palette-error); }
.cbp-margin-pill--low  { background: rgba(249, 115, 22, 0.14);                color: #f97316; }
.cbp-margin-pill--mid  { background: rgba(var(--mud-palette-warning-rgb), 0.14); color: var(--mud-palette-warning); }
.cbp-margin-pill--good { background: rgba(var(--mud-palette-success-rgb), 0.14); color: var(--mud-palette-success); }

.cbp-missing-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
    border-top: 1px solid rgba(var(--ag-fg-rgb), 0.06); background: rgba(var(--ag-fg-rgb), 0.015);
}
.cbp-missing-actions-hint { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-missing-actions-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cbp-missing-btn { height: 34px; font-weight: 600; white-space: nowrap; }
.cbp-missing-btn--strong { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   MarginUpliftPanel — kế hoạch nâng margin rổ.
   ══════════════════════════════════════════════════════════════════════════ */

.cbp-uplift {
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.25);
    border-radius: 10px; padding: 14px; margin-bottom: 16px;
    background: rgba(var(--mud-palette-warning-rgb), 0.04);
}
.cbp-uplift-head  { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cbp-uplift-icon  { color: var(--mud-palette-warning); }
.cbp-uplift-title { font-weight: 700; margin: 0; }
.cbp-uplift-badge { margin-left: 4px; }
.cbp-uplift-close { margin-left: auto; }

.cbp-uplift-kpis  { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cbp-uplift-kpi   { border: 1px solid rgba(var(--ag-fg-rgb), 0.08); border-radius: 8px; padding: 10px 12px; }
.cbp-uplift-kpi--1 { flex: 1; min-width: 140px; }
.cbp-uplift-kpi--2 { flex: 2; min-width: 220px; }
.cbp-uplift-kpi-label { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-uplift-kpi-value { font-size: 18px; font-weight: 700; color: var(--mud-palette-text-primary); }
.cbp-uplift-kpi-value--warn { color: var(--mud-palette-warning); }
.cbp-uplift-kpi-sub   { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.4); }
.cbp-uplift-recovered--ok   { color: var(--mud-palette-success); }
.cbp-uplift-recovered--low  { color: #f97316; }
.cbp-uplift-strategy  { font-size: 12px; color: rgba(var(--ag-fg-rgb), 0.7); }
.cbp-uplift-strategy-sub { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.4); margin-top: 2px; }

.cbp-uplift-table-wrap { border-radius: 8px; border: 1px solid rgba(var(--ag-fg-rgb), 0.08); overflow: auto; max-height: 44vh; }
.cbp-uplift-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 960px; }
.cbp-uplift-head-row { background: var(--ag-surface-sunken); text-align: left; color: rgba(var(--ag-fg-rgb), 0.45); }
.cbp-uplift-th  { padding: 7px 10px; font-weight: 600; }
.cbp-uplift-th--right { text-align: right; }
.cbp-uplift-row { border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.04); }
.cbp-uplift-td  { padding: 6px 10px; }
.cbp-uplift-td--nowrap { white-space: nowrap; }
.cbp-uplift-td--right  { text-align: right; }
.cbp-uplift-priority { font-size: 11px; font-weight: 600; }
.cbp-uplift-code { font-family: monospace; color: var(--mud-palette-info); font-size: 11px; }
.cbp-uplift-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-uplift-qty   { text-align: right; color: rgba(var(--ag-fg-rgb), 0.6); }
.cbp-uplift-cur   { text-align: right; color: rgba(var(--ag-fg-rgb), 0.5); }
.cbp-uplift-proposed { text-align: right; font-weight: 700; color: var(--mud-palette-warning); }
.cbp-uplift-change   { text-align: right; color: #86efac; }
.cbp-uplift-margin   { text-align: right; white-space: nowrap; font-size: 11px; }
.cbp-uplift-margin-old { color: rgba(var(--ag-fg-rgb), 0.5); }
.cbp-uplift-margin-arrow { color: rgba(var(--ag-fg-rgb), 0.3); }
.cbp-uplift-margin-new { color: #86efac; font-weight: 600; }
.cbp-uplift-basket   { text-align: right; color: var(--mud-palette-warning); font-weight: 600; }
.cbp-uplift-stab     { font-size: 11px; font-weight: 600; }
.cbp-uplift-rationale { font-size: 11px; color: rgba(var(--ag-fg-rgb), 0.45); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   AliasEditDialog — overlay sửa "Tên SP theo Khách".
   ══════════════════════════════════════════════════════════════════════════ */

.cbp-alias-code   { font-family: monospace; color: var(--mud-palette-info); }
.cbp-alias-body   { padding: 18px 22px 14px; display: flex; flex-direction: column; gap: 12px; }
.cbp-alias-cols   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }