/* Dashboard v3 — chỉ bổ sung; kế thừa rtop-ui.css, dashboard.css, dashboard-v2.css */

/* Bảng dữ liệu trong thẻ biểu đồ (mở bằng "Xem bảng") */
.cmp-table-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.cmp-table-cap { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }

/* Chú giải hai kỳ + thông báo tổng hợp */
.cmp-legend { margin: 2px 0 2px; }
.cmp-notice { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 10px; border: 1px solid #cfe6f2; background: var(--blue-soft); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-2); }
.cmp-notice .icon { flex: none; margin-top: 2px; color: var(--blue); }

/* Bảng so sánh */
.cmp-name { display: block; font-weight: 500; }
.cmp-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.cmp-sub .pill { vertical-align: middle; }
.cmp-warn { color: var(--amber); }
.cmp-reason { display: block; font-size: 11.5px; color: var(--muted); font-family: var(--font); white-space: normal; max-width: 220px; margin-left: auto; }
.cmp-table th small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.cmp-table thead th { position: sticky; top: 0; z-index: 1; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort .icon { opacity: .35; }
.th-sort.is-active .icon, .th-sort:hover .icon { opacity: 1; color: var(--blue); }
.table tbody tr.is-selected td { background: var(--blue-soft); }
.table tfoot tr.cmp-total td { background: var(--surface-2); border-top: 2px solid var(--border-strong); font-weight: 600; padding: 11px 12px; }
.table tfoot tr.cmp-total .cmp-sub { font-weight: 400; }
.r-card--total { background: var(--surface-2); border-style: dashed; cursor: default; }