/* ═══════════════════════════════════════════
   CRM DASHBOARD Stylesheet
   ═══════════════════════════════════════════ */

/* Header */
.crm-db-header {
    margin-bottom: 16px;
}
.crm-db-title {
    font-weight: 800 !important;
    letter-spacing: 0.3px;
    background: linear-gradient(90deg, #60a5fa, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.crm-db-subtitle {
    font-size: 0.8rem;
    color: rgba(var(--ag-fg-rgb), 0.45);
    margin-bottom: 12px;
    display: block;
}

/* Control/Filter bar */
.crm-db-filter-bar {
    background: rgba(var(--ag-fg-rgb), 0.03);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.07);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.crm-db-filter-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.crm-db-date-picker {
    width: 160px !important;
}
.crm-db-date-sep {
    color: rgba(var(--ag-fg-rgb), 0.3);
    font-size: 0.9rem;
}

/* KPI Summary Grid & Cards */
.crm-db-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.crm-db-kpi-card {
    background: rgba(var(--ag-fg-rgb), 0.04);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: default;
}
.crm-db-kpi-card:hover {
    transform: translateY(-3px);
    background: rgba(var(--ag-fg-rgb), 0.07);
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
.crm-db-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--card-glow, #64748b);
}
.crm-db-kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg, rgba(var(--ag-fg-rgb),0.05));
    color: var(--icon-color, var(--mud-palette-text-primary));
}
.crm-db-kpi-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.crm-db-kpi-value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--icon-color, var(--mud-palette-text-primary));
    letter-spacing: -0.5px;
}
.crm-db-kpi-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: rgba(var(--ag-fg-rgb), 0.4);
    text-transform: uppercase;
    margin-top: 4px;
}
.crm-db-kpi-desc {
    font-size: 0.7rem;
    color: rgba(var(--ag-fg-rgb), 0.35);
    margin-top: 2px;
}

/* Specific Card Glow Colors */
.crm-kpi-cus { --card-glow: var(--mud-palette-info); --icon-bg: rgba(59, 130, 246, 0.12); --icon-color: var(--mud-palette-info); }
.crm-kpi-team { --card-glow: var(--mud-palette-success); --icon-bg: rgba(16, 185, 129, 0.12); --icon-color: var(--mud-palette-success); }
.crm-kpi-alliance { --card-glow: var(--mud-palette-secondary); --icon-bg: rgba(139, 92, 246, 0.12); --icon-color: var(--mud-palette-secondary); }
.crm-kpi-incident { --card-glow: var(--mud-palette-warning); --icon-bg: rgba(245, 158, 11, 0.12); --icon-color: var(--mud-palette-warning); }
.crm-kpi-debt { --card-glow: var(--mud-palette-error); --icon-bg: rgba(239, 68, 68, 0.12); --icon-color: var(--mud-palette-error); }

/* Panels & Sections */
.crm-db-card {
    background: rgba(var(--ag-fg-rgb), 0.02) !important;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.06) !important;
    border-radius: 16px !important;
    padding: 16px;
    height: 100%;
}
.crm-db-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.06);
}
.crm-db-card-title-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.crm-db-card-title {
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: var(--mud-palette-text-primary);
}
.crm-db-card-subtitle {
    font-size: 0.72rem;
    color: rgba(var(--ag-fg-rgb), 0.4);
}

/* Incident Customer Table — cell colors per incident type */
.crm-incid-doi   { color: var(--mud-palette-info) !important; font-weight: 700; }
.crm-incid-tre   { color: var(--mud-palette-warning) !important; font-weight: 700; }
.crm-incid-thieu { color: var(--mud-palette-success) !important; font-weight: 700; }
.crm-incid-tra   { color: var(--mud-palette-error) !important; font-weight: 700; }
.crm-incid-total { color: var(--mud-palette-secondary) !important; font-weight: 700; background: rgba(var(--ag-fg-rgb),0.015); }
.crm-incid-empty { color: rgba(var(--ag-fg-rgb),0.15) !important; }
/* Dòng "Tổng cộng" (footer) — nền đục để khi sticky không lộ nội dung cuộn phía dưới */
.crm-incid-table tfoot td { background: var(--mud-palette-surface) !important; font-weight: 700; color: var(--mud-palette-text-primary); }
.crm-incid-table tfoot td.crm-incid-total { background: var(--ag-surface-sunken) !important; }

/* Incident Badges & Colors — nền màu nhạt cố định (hoạt động ở cả 2 theme),
   chữ map sang palette để tương phản tốt khi Light */
.crm-badge-exchange { background: rgba(59,130,246,0.12) !important; color: var(--mud-palette-info) !important; border: 1px solid rgba(59,130,246,0.2) !important; }
.crm-badge-return   { background: rgba(245,158,11,0.12) !important; color: var(--mud-palette-warning) !important; border: 1px solid rgba(245,158,11,0.2) !important; }
.crm-badge-cancel   { background: rgba(239,68,68,0.12)  !important; color: var(--mud-palette-error) !important; border: 1px solid rgba(239,68,68,0.2)  !important; }
.crm-badge-reject   { background: rgba(124,58,237,0.12) !important; color: var(--mud-palette-secondary) !important; border: 1px solid rgba(124,58,237,0.2) !important; }
.crm-badge-shortage { background: rgba(236,72,153,0.12) !important; color: var(--mud-palette-secondary) !important; border: 1px solid rgba(236,72,153,0.2) !important; }
.crm-badge-late     { background: rgba(249,115,22,0.12) !important; color: var(--mud-palette-warning) !important; border: 1px solid rgba(249,115,22,0.2) !important; }
.crm-badge-damage   { background: rgba(220,38,38,0.12)  !important; color: var(--mud-palette-error) !important; border: 1px solid rgba(220,38,38,0.2)  !important; }
.crm-badge-weather  { background: rgba(14,165,233,0.12) !important; color: var(--mud-palette-info) !important; border: 1px solid rgba(14,165,233,0.2) !important; }
.crm-badge-drop     { background: rgba(16,185,129,0.12) !important; color: var(--mud-palette-success) !important; border: 1px solid rgba(16,185,129,0.2) !important; }

/* Status Badges */
.crm-status-active { background: rgba(16,185,129,0.12) !important; color: var(--mud-palette-success) !important; border: 1px solid rgba(16,185,129,0.2) !important; }
.crm-status-monitoring { background: rgba(234,179,8,0.12) !important; color: var(--mud-palette-warning) !important; border: 1px solid rgba(234,179,8,0.2) !important; }
.crm-status-vip { background: rgba(168,85,247,0.12) !important; color: var(--mud-palette-secondary) !important; border: 1px solid rgba(168,85,247,0.2) !important; }
.crm-status-baddebt { background: rgba(239,68,68,0.12) !important; color: var(--mud-palette-error) !important; border: 1px solid rgba(239,68,68,0.2) !important; }
.crm-status-suspended { background: rgba(249,115,22,0.12) !important; color: var(--mud-palette-warning) !important; border: 1px solid rgba(249,115,22,0.2) !important; }
.crm-status-prospect { background: rgba(59,130,246,0.12) !important; color: var(--mud-palette-info) !important; border: 1px solid rgba(59,130,246,0.2) !important; }
.crm-status-discontinued { background: rgba(100,116,139,0.12) !important; color: var(--mud-palette-text-secondary) !important; border: 1px solid rgba(100,116,139,0.2) !important; }

/* Chart Container & Fallbacks */
.crm-db-chart-container {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}
/* Fix chart blank/không-full-width: container là flex align-items:center nên child chart
   không được stretch ngang → co bằng nội dung → Width="100%" tính trên bề rộng co lại → chart
   nhỏ, chừa trống 2 bên. Cho MỌI chart (MudChart .mud-chart + ApexChart .apexcharts-canvas/
   wrapper div) stretch full chiều ngang để Width="100%" có kích thước thật, lấp đầy card. */
.crm-db-chart-container > .mud-chart,
.crm-db-chart-container > div,
.crm-db-chart-container .apexcharts-canvas {
    width: 100% !important;
    align-self: stretch;
}
.crm-db-chart-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(var(--ag-fg-rgb), 0.3);
    text-align: center;
    border: 1px dashed rgba(var(--ag-fg-rgb), 0.08);
    border-radius: 12px;
    width: 100%;
    background: rgba(var(--ag-fg-rgb), 0.01);
}
.crm-db-chart-empty-icon {
    font-size: 2rem !important;
    color: rgba(var(--ag-fg-rgb), 0.15) !important;
}

/* Tabs & UI refinement */
.crm-db-tabs .mud-tabs-tabbar {
    background: rgba(var(--ag-fg-rgb), 0.03) !important;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.06) !important;
    border-radius: 10px;
    padding: 2px;
}
.crm-db-tabs .mud-tab {
    text-transform: none !important;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px;
    color: rgba(var(--ag-fg-rgb), 0.5) !important;
    min-width: 120px;
}
.crm-db-tabs .mud-tab-active {
    background: rgba(var(--ag-fg-rgb), 0.06) !important;
    color: var(--mud-palette-primary) !important;
}
.crm-db-tabs .mud-tab-slider {
    display: none !important; /* hide default indicator for clean block design */
}

/* List details */
.crm-db-list-container {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}
.crm-db-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(var(--ag-fg-rgb),0.02);
    border: 1px solid rgba(var(--ag-fg-rgb),0.04);
    margin-bottom: 6px;
    font-size: 0.77rem;
    transition: background 0.15s ease;
}
.crm-db-list-item:hover {
    background: rgba(var(--ag-fg-rgb),0.05);
}
.crm-db-list-name {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}
.crm-db-list-value {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* Scrollbar styles */
.crm-db-list-container::-webkit-scrollbar {
    width: 6px;
}
.crm-db-list-container::-webkit-scrollbar-track {
    background: transparent;
}
.crm-db-list-container::-webkit-scrollbar-thumb {
    background: rgba(var(--ag-fg-rgb),0.1);
    border-radius: 4px;
}
.crm-db-list-container::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--ag-fg-rgb),0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .crm-db-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .crm-db-filter-dates {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .crm-db-date-picker {
        width: 100% !important;
    }
}

/* ═══ Operational Insights / WoW Styles ═══ */
.crm-db-wow-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.crm-db-wow-header {
    background: rgba(var(--ag-fg-rgb), 0.04);
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crm-db-wow-header-title {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
}
.crm-db-wow-badge-green {
    background: rgba(16, 185, 129, 0.15);
    color: var(--mud-palette-success);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.crm-db-wow-badge-red {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mud-palette-error);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid rgba(239, 68, 68, 0.25);
}
.crm-db-alert-card {
    background: rgba(245, 158, 11, 0.04);
    border: 1px solid rgba(245, 158, 11, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
}
.crm-db-alert-title {
    font-weight: 700;
    color: var(--mud-palette-warning);
    font-size: 0.8rem;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.crm-db-alert-body {
    font-size: 0.75rem;
    color: rgba(var(--ag-fg-rgb), 0.7);
    line-height: 1.4;
}

/* Pillar Action Plan Grid */
.crm-db-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}
.crm-db-pillar-card {
    background: rgba(var(--ag-fg-rgb), 0.02);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.05);
    border-radius: 12px;
    padding: 16px;
    transition: background 0.2s ease;
}
.crm-db-pillar-card:hover {
    background: rgba(var(--ag-fg-rgb), 0.04);
}
.crm-db-pillar-title {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-primary);
}
.crm-db-pillar-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.crm-db-pillar-list-item {
    font-size: 0.75rem;
    color: rgba(var(--ag-fg-rgb), 0.6);
    margin-bottom: 8px;
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
}
.crm-db-pillar-list-item::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--bullet-color, var(--mud-palette-info));
    font-weight: 900;
}
.crm-pillar-qc { --bullet-color: var(--mud-palette-success); }
.crm-pillar-sop { --bullet-color: var(--mud-palette-secondary); }
.crm-pillar-sla { --bullet-color: var(--mud-palette-info); }

/* Thẻ đánh giá nhanh (quick summary) */
.crm-db-quick-card {
    background: var(--ag-surface-sunken);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.06);
    border-radius: 8px;
    padding: 10px 12px;
    height: 100%;
}

.crm-db-quick-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(var(--ag-fg-rgb), 0.4);
    margin-bottom: 4px;
}

.crm-db-quick-value {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

@media (max-width: 960px) {
    .crm-db-pillar-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .crm-db-wow-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════
   Trích từ inline style (.razor) — theme-aware
   CrmDashboard.razor / CrmDebtRisk.razor / CrmOperationsInsight.razor
   ═══════════════════════════════════════════ */

/* ── CrmDashboard.razor (page) ── */
.crm-db-header-icon { color: var(--mud-palette-info); font-size: 32px; }
.crm-db-team-filter { min-width: 260px; }

/* ── Tiện ích card dùng chung (modifier cho .crm-db-card) ── */
/* Nền "mờ" rất nhẹ — thay rgba(255,255,255,0.01..0.015) */
.crm-card--faint        { background: rgba(var(--ag-fg-rgb), 0.02) !important; }
.crm-card--tint         { background: rgba(var(--ag-fg-rgb), 0.03) !important; }
/* Nền surface tối — thay rgba(15,23,42,0.4) (panel donut) */
.crm-card--surface      { background: var(--mud-palette-surface) !important; }
.crm-card--fill         { height: 100%; }
.crm-card--gap          { margin-bottom: 16px; }
.crm-card--minh-lg      { min-height: 320px; }
/* Viền nhấn theo palette — thay border-color hex/rgba cố định */
.crm-card--accent-info    { border-color: rgba(var(--mud-palette-info-rgb), 0.25) !important; }
.crm-card--accent-success { border-color: rgba(var(--mud-palette-success-rgb), 0.25) !important; }
/* Panel donut: surface + flex column */
.crm-card--donut {
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

/* Tiêu đề màu theo palette — thay color:#60a5fa / #34d399 */
.crm-title--info    { color: var(--mud-palette-info); }
.crm-title--success { color: var(--mud-palette-success); }
/* Hàng tiêu đề biến thể */
.crm-title-row--plain   { border-bottom: none; }
.crm-title-row--success { border-bottom-color: rgba(var(--mud-palette-success-rgb), 0.15) !important; }

/* Chữ màu semantic (tái dùng cho điều kiện) */
.crm-text-info    { color: var(--mud-palette-info); }
.crm-text-success { color: var(--mud-palette-success); }
.crm-text-danger  { color: var(--mud-palette-error); }

/* Chart container biến thể padding */
.crm-chart--padded { min-height: 250px; padding: 8px; }
.crm-chart--donut  { flex: 1; min-height: 200px; }

/* Empty-state theo kích thước (thay style="min-height:...") */
.crm-db-chart-empty--xl    { min-height: 460px; }
.crm-db-chart-empty--lg    { min-height: 220px; }
.crm-db-chart-empty--sm    { min-height: 120px; }
.crm-db-chart-empty--donut { min-height: 180px; border: none; }
/* Icon empty-state kích thước nhỏ (thay Style="font-size:..!important") */
.crm-empty-icon-sm { font-size: 1.5rem !important; }
.crm-empty-icon-xs { font-size: 1.3rem !important; }

/* Cell font nhỏ trong bảng (thay style="font-size:..") */
.crm-cell-sm     { font-size: 0.78rem; }
.crm-cell-xs     { font-size: 0.72rem; }
.crm-cell-reason { font-size: 0.75rem; }

/* ── CrmOperationsInsight.razor ── */
/* Root card (nền surface + viền info) */
.crm-ops-root {
    padding: 16px;
    margin-bottom: 16px;
    border-color: rgba(var(--mud-palette-info-rgb), 0.15);
    background: var(--mud-palette-surface);
}

/* Hero header — gradient brand (giữ tông xanh dương/lá), theme-aware nền */
.crm-ops-hero {
    background: linear-gradient(135deg,
        rgba(var(--mud-palette-info-rgb), 0.08),
        rgba(var(--mud-palette-success-rgb), 0.05));
    border-radius: 12px;
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.18);
    padding: 18px 22px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.crm-ops-hero-icon {
    color: var(--mud-palette-info);
    font-size: 44px !important;
    filter: drop-shadow(0 0 10px rgba(var(--mud-palette-info-rgb), 0.35));
}
.crm-ops-hero-body { flex: 1; min-width: 240px; }
.crm-ops-hero-title {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.3px;
    margin: 0 0 4px 0;
}
.crm-ops-hero-meta {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}
.crm-ops-hero-period { color: var(--mud-palette-text-primary); }

/* Chart lớn (hero) */
.crm-ops-bigchart { width: 100%; min-height: 480px; padding: 8px; }
.crm-ops-bigchart > .mud-chart,
.crm-ops-bigchart > div,
.crm-ops-bigchart .apexcharts-canvas { width: 100% !important; }

/* Cột KPI tóm tắt sự cố (bên phải hero) */
.crm-ops-kpi-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
/* KPI card padding biến thể (thay style="padding:..") */
.crm-kpi-card--lead    { padding: 12px 14px; }
.crm-kpi-card--compact { padding: 10px 14px; }
.crm-kpi-card--danger  { border-color: rgba(var(--mud-palette-error-rgb), 0.3); }
.crm-kpi-value--lead    { font-size: 1.7rem; }
.crm-kpi-value--compact { font-size: 1.4rem; }
.crm-kpi-value--danger  { color: var(--mud-palette-error); }
.crm-kpi-label--lead    { font-size: 0.6rem; }
.crm-kpi-label--compact { font-size: 0.58rem; }
.crm-kpi-label-muted    { color: rgba(var(--ag-fg-rgb), 0.35); }
/* Badge WoW trong KPI card */
.crm-ops-wow-badge {
    font-size: 0.66rem;
    padding: 1px 4px;
    margin-top: 4px;
    align-self: flex-start;
}

/* Đánh giá nhanh — exec summary text */
.crm-ops-exec-summary {
    font-size: 0.85rem;
    line-height: 1.55;
    color: rgba(var(--ag-fg-rgb), 0.9);
    margin-bottom: 12px;
}
/* Quick card — viền trái màu điều kiện (thay border-left inline) */
.crm-quick--danger  { border-left: 3px solid var(--mud-palette-error); }
.crm-quick--success { border-left: 3px solid var(--mud-palette-success); }
.crm-quick--warning { border-left: 3px solid var(--mud-palette-warning); }

/* % cách tính cũ (mờ) */
.crm-ops-pct-legacy { color: rgba(var(--ag-fg-rgb), 0.45); font-weight: 600; }

/* Hộp ghi chú info (lưu ý cách tính %) */
.crm-ops-note {
    background: rgba(var(--mud-palette-info-rgb), 0.04);
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.12);
    border-radius: 8px;
}
.crm-ops-note-text { font-size: 0.75rem; line-height: 1.45; }

/* Badge tỷ trọng nhạt (root-cause) */
.crm-badge-ratio { background: rgba(var(--mud-palette-error-rgb), 0.08) !important; }

/* Ghi chú "Tập trung sự cố" (Pareto) */
.crm-ops-pareto-note {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(var(--ag-fg-rgb), 0.85);
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--ag-fg-rgb), 0.06);
}

/* Tag đánh giá nhỏ ở đầu mỗi KPI card (Cải thiện / Cảnh báo / Không đổi) */
.crm-kpi-verdict {
    margin-left: auto;
    flex: none;
    align-self: center;
    white-space: nowrap;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-transform: uppercase;
}
.crm-kpi-verdict--good {
    color: var(--mud-palette-success);
    background: rgba(var(--mud-palette-success-rgb), 0.12);
    border-color: rgba(var(--mud-palette-success-rgb), 0.28);
}
.crm-kpi-verdict--warn {
    color: var(--mud-palette-error);
    background: rgba(var(--mud-palette-error-rgb), 0.12);
    border-color: rgba(var(--mud-palette-error-rgb), 0.28);
}
.crm-kpi-verdict--flat {
    color: rgba(var(--ag-fg-rgb), 0.55);
    background: rgba(var(--ag-fg-rgb), 0.06);
    border-color: rgba(var(--ag-fg-rgb), 0.12);
}

/* Kéo giãn 6 KPI card lấp đầy chiều cao cột (ngang chart 460px) — chỉ từ lg trở lên */
@media (min-width: 1280px) {
    .crm-ops-kpi-col > .crm-db-kpi-card {
        flex: 1 1 0;
        min-height: 0;
    }
}

/* ── CrmDebtRisk.razor — danh sách rủi ro nợ ── */
.crm-risk-item { border-left: 3px solid var(--mud-palette-error); }
.crm-risk-item-main { display: flex; flex-direction: column; }
.crm-risk-item-meta { font-size: 0.68rem; color: rgba(var(--ag-fg-rgb), 0.4); }
.crm-risk-item-amount { display: flex; flex-direction: column; align-items: flex-end; }
.crm-risk-amount-value { color: var(--mud-palette-error) !important; }
.crm-risk-amount-days { font-size: 0.65rem; color: var(--mud-palette-error); font-weight: 700; }
.crm-risk-term-chip {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-warning);
    background: rgba(var(--mud-palette-warning-rgb), 0.12);
}

/* ── CrmIncidentQuality.razor — bảng sản phẩm sự cố theo khách hàng ── */
/* Gói nhiều chip loại sự cố trong 1 ô, tự xuống dòng cho gọn */
.crm-iq-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.crm-iq-type-chip {
    margin: 0 !important;
    font-size: 0.68rem !important;
}

/* ── CrmIncidentQuality.razor — card "TOP SẢN PHẨM BỊ SỰ CỐ" (bar ngang) ── */
/* Cao bằng bảng sản phẩm bên cạnh để hàng cân đối; chart lấp đầy chiều rộng card. */
.crm-iq-prodcard { height: 100%; display: flex; flex-direction: column; }
.crm-iq-prodchart {
    flex: 1 1 auto;
    min-height: 320px;
    justify-content: flex-start;
}
.crm-iq-prodchart > .apexcharts-canvas,
.crm-iq-prodchart > .mud-chart { width: 100%; align-self: stretch; }