/* ==========================================================================
   AGGROW Dashboard — class trích từ inline style trong các component Dashboard.
   Thay cho style="..." rải rác trong markup; tất cả theme-aware (Light/Dark).
   ========================================================================== */

/* ── Icon empty-state (mờ, căn giữa) ──
   Thay: style="font-size:48px; color:rgba(255,255,255,0.1)" */
.db-empty-icon            { font-size: 48px; color: rgba(var(--ag-fg-rgb), 0.10); }
.db-empty-icon--success   { color: rgba(var(--mud-palette-success-rgb), 0.30); }

/* ── KPI compact card: biến thể accent ──
   Thay: style="--kpi-accent:#..; --kpi-bg:rgba(..)" trên .kpi-compact-card */
.kpi--blue   { --kpi-accent: var(--mud-palette-info);    --kpi-bg: rgba(var(--mud-palette-info-rgb), 0.18); }
.kpi--green  { --kpi-accent: var(--mud-palette-success); --kpi-bg: rgba(var(--mud-palette-success-rgb), 0.18); }
.kpi--amber  { --kpi-accent: var(--mud-palette-warning); --kpi-bg: rgba(var(--mud-palette-warning-rgb), 0.18); }
.kpi--red    { --kpi-accent: var(--mud-palette-error);   --kpi-bg: rgba(var(--mud-palette-error-rgb), 0.18); }
.kpi--purple { --kpi-accent: #a78bfa;                    --kpi-bg: rgba(139, 92, 246, 0.18); }
.kpi--pink   { --kpi-accent: #f472b6;                    --kpi-bg: rgba(236, 72, 153, 0.18); }
.kpi-value-lg { font-size: 1.4rem; }
.kpi-value-md { font-size: 1.1rem; }
/* Card "Chênh lệch": nền amber cố định, accent đổi theo dấu (âm=đỏ, dương=xanh) */
.kpi--gap-amberbg { --kpi-bg: rgba(var(--mud-palette-warning-rgb), 0.18); }
.kpi--gap-neg     { --kpi-accent: var(--mud-palette-error); }
.kpi--gap-pos     { --kpi-accent: var(--mud-palette-success); }

/* ── Hộp insight / gợi ý ──
   Thay: style="margin-top:16px; padding:12px 16px; background:rgba(..); border:..; border-radius:10px" */
.db-insight {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(var(--mud-palette-info-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.20);
    border-radius: 10px;
}
.db-insight--danger {
    background: rgba(var(--mud-palette-error-rgb), 0.08);
    border-color: rgba(var(--mud-palette-error-rgb), 0.20);
}
.db-insight--top0 { margin-top: 0; }
.db-insight-text { color: rgba(var(--ag-fg-rgb), 0.70); }
.db-insight-text--strong { color: rgba(var(--ag-fg-rgb), 0.80); }

/* ── Thanh tiến trình (độ hoàn thiện) ──
   Track tĩnh dùng class; fill giữ width động qua inline style="width:@x%" + class biến thể màu */
.db-progress-track {
    background: rgba(var(--ag-fg-rgb), 0.06);
    border-radius: 6px;
    height: 18px;
    overflow: hidden;
}
.db-progress-fill        { height: 100%; border-radius: 6px; transition: width 0.6s ease; }
.db-progress-fill--good  { background: linear-gradient(90deg, var(--mud-palette-success-darken), var(--mud-palette-success)); }
.db-progress-fill--warn  { background: linear-gradient(90deg, var(--mud-palette-warning-darken), var(--mud-palette-warning)); }
.db-progress-fill--bad   { background: linear-gradient(90deg, var(--mud-palette-error-darken), var(--mud-palette-error)); }

/* ── Header bảng dính (sticky) có màu ── */
.db-sticky-head        { position: sticky; top: 0; z-index: 1; color: #fff; background: var(--mud-palette-primary); }
.db-sticky-head--blue  { background: linear-gradient(135deg, #1565c0, #0d47a1); }

/* ── Spacing tiện ích cho hàng KPI ──
   Thay: style="margin-bottom:16px" trên .kpi-compact-row / hộp cảnh báo */
.db-mb-16 { margin-bottom: 16px; }

/* ── Icon tiêu đề có màu (header báo cáo) ──
   Thay: Style="color:#F59E0B; font-size:22px" / "#38bdf8" */
.db-header-icon         { font-size: 22px; }
.db-header-icon--amber  { color: #F59E0B; }
.db-header-icon--cyan   { color: #38bdf8; }

/* ── Hàng tiêu đề panel có thể thu gọn ──
   Thay: style="display:flex; justify-content:space-between; align-items:center; cursor:pointer" */
.db-collapse-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.db-subtitle-strong { font-weight: 700; letter-spacing: 0.5px; }
.db-fw-700 { font-weight: 700; }

/* ── Hàng có thể bấm (drill-down) ──
   Thay: style="cursor:pointer" trên <tr> */
.db-row-clickable { cursor: pointer; }

/* ── Ô số tiền nhấn mạnh trong bảng ──
   Thay: style="color:var(--mud-palette-info)" / success cỡ lớn */
.db-amount-info       { color: var(--mud-palette-info); }
.db-amount-success-lg { color: var(--mud-palette-success); font-size: 1rem; }

/* ── Hàng tổng cộng của bảng (nền nhạt) ──
   Thay: style="background:rgba(255,255,255,0.06); font-weight:700" */
.db-table-total-row { background: rgba(var(--ag-fg-rgb), 0.06); font-weight: 700; }

/* ── Ô địa chỉ cắt bớt (ellipsis) ──
   Thay: style="max-width:300px; overflow:hidden; text-overflow:ellipsis" */
.db-cell-ellipsis { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }

/* ── Hộp cảnh báo lớn (alert strip) ──
   Thay: Style="border:1px solid rgba(239,68,68,.25); background:rgba(239,68,68,.07)" */
.db-alert-strip {
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.25);
    background: rgba(var(--mud-palette-error-rgb), 0.07);
}
.db-alert-strip-title { font-weight: 800; color: rgba(var(--ag-fg-rgb), 0.92); }

/* ── Panel xếp hạng NCC (top/bottom) ──
   Thay: Style="background:rgba(0,200,83,0.06);border:1px solid rgba(0,200,83,0.2);..." */
.db-vendor-card        { border-radius: 12px; background: var(--mud-palette-surface); }
.db-vendor-panel       { border-radius: 10px; min-height: 200px; }
.db-vendor-panel--good {
    background: rgba(var(--mud-palette-success-rgb), 0.06);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.20);
}
.db-vendor-panel--bad  {
    background: rgba(var(--mud-palette-error-rgb), 0.06);
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.20);
}
.db-vendor-title-good  { font-weight: 700; color: var(--mud-palette-success); }
.db-vendor-title-bad   { font-weight: 700; color: var(--mud-palette-error); }
.db-vendor-rank        { min-width: 22px; font-weight: 800; }
.db-vendor-flex        { flex: 1; min-width: 0; }
.db-vendor-name-cell   { flex: 1; min-width: 0; overflow: hidden; }
.db-vendor-name        { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Thanh % theo ngày trong tuần (weekday mix) ──
   Track tĩnh dùng class; fill giữ width + màu động qua inline */
.db-weekday-bar       { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.db-weekday-bar-track {
    height: 8px;
    width: 88px;
    background: rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 4px;
    overflow: hidden;
}
.db-weekday-bar-fill { height: 100%; }
.db-weekday-bar-val  { font-weight: 700; min-width: 38px; text-align: right; }

/* ── Panel có viền nhẹ (dialog lịch sử KH) ──
   Thay: Style="border: 1px solid rgba(255,255,255,0.08)" */
.db-panel-outline { border: 1px solid rgba(var(--ag-fg-rgb), 0.08); }
.db-dialog-body   { padding: 0 24px 24px 24px; }

/* ── Nền mờ nhẹ cho nhóm nút (quick date) ──
   Thay: Style="background:rgba(255,255,255,0.05);" */
.db-toolbar-soft { background: rgba(var(--ag-fg-rgb), 0.05); }

/* ── Ô căn giữa với icon (số đơn hỗ trợ) ──
   Thay: style="display:flex; justify-content:center; align-items:center; gap:4px" */
.db-cell-center-icon { display: flex; justify-content: center; align-items: center; gap: 4px; }