/* =============================================================
   REPORT-THEME.CSS — DieuHanhTU
   Gom màn báo cáo / hậu kiểm về một theme thương hiệu (đỏ).
   Chỉ áp khi wrapper có class .theme-report (gán từ _Layout).
   Không đổi số liệu, route hay điều kiện quyền.
   ============================================================= */

.theme-report .report-link {
    color: var(--report-link, var(--color-brand)) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.theme-report .report-link:hover {
    color: var(--report-link-hover, var(--color-brand-hover)) !important;
    text-decoration: underline !important;
}

.theme-report .report-link:focus {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

/* ── KPI / ô tổng hợp: bỏ header tím-xanh-vàng-cyan ─────────
   View BaoCao đã đổi sang .report-kpi / .report-kpi-header (15/09/2026). Các rule đè
   bg-*/border-* dưới đây giữ thêm một chu kỳ cho partial/view chưa quét; gỡ sau khi
   grep "card-header bg-" trong Areas/BaoCao trả 0 ở đợt kế tiếp. */
.theme-report .card-header.bg-primary,
.theme-report .card-header.bg-success,
.theme-report .card-header.bg-warning,
.theme-report .card-header.bg-info,
.theme-report .card-header.bg-danger,
.theme-report .card-header.bg-secondary,
.theme-report .card-header.bg-primary.text-white,
.theme-report .card-header.bg-success.text-white,
.theme-report .card-header.bg-info.text-white,
.theme-report .card-header.bg-danger.text-white,
.theme-report .card-header.bg-warning.text-dark {
    background-color: var(--color-brand-light) !important;
    color: var(--color-brand-dark) !important;
    border-bottom: 1px solid var(--color-brand-border) !important;
}

/* Tiền tố "html": theme-default.css (Vuexy) khai báo "html:not([dir=rtl]) .border-primary"
   kèm !important — specificity (0,2,1) thắng ".theme-report .border-primary" (0,2,0),
   nên ô KPI đầu tiên từng giữ viền tím (đo runtime 15/09/2026). */
html .theme-report .border-primary,
html .theme-report .border-success,
html .theme-report .border-warning,
html .theme-report .border-info,
html .theme-report .border-danger {
    border-color: var(--color-brand-border) !important;
}

/* Mép trên KPI phải !important + border-top-color riêng, vì border-color !important
   ở rule trên đè màu của shorthand border-top. */
html .theme-report .report-kpi,
html .theme-report .card.h-100.border-primary,
html .theme-report .card.h-100.border-success,
html .theme-report .card.h-100.border-warning,
html .theme-report .card.h-100.border-info,
html .theme-report .card.h-100.border-danger {
    border: 1px solid var(--color-brand-border) !important;
    border-top: 3px solid var(--color-brand) !important;
    border-top-color: var(--color-brand) !important;
}

/* Header ô KPI sau khi dọn markup (không còn bg-primary/bg-success…) */
.theme-report .report-kpi-header {
    background-color: var(--color-brand-light) !important;
    color: var(--color-brand-dark) !important;
    border-bottom: 1px solid var(--color-brand-border) !important;
}

/* Hàng lọc: Select2 cùng chiều cao 36px với ô nhập/select/nút (site.css đã đặt
   .form-control/.form-select = token nút lệnh toàn app từ 15/09/2026). */
.theme-report .select2-container .select2-selection--single {
    height: var(--btn-command-height-default, 36px) !important;
    min-height: var(--btn-command-height-default, 36px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: calc(var(--btn-command-height-default, 36px) - 2px);
}

.theme-report .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--btn-command-height-default, 36px) - 2px);
}

.theme-report .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--btn-command-height-default, 36px) - 2px);
}

.theme-report .text-primary,
.theme-report .text-success,
.theme-report .text-info,
.theme-report .text-warning {
    color: var(--color-brand-dark) !important;
}

.theme-report .text-danger {
    color: var(--color-danger) !important;
}

/* ── Thanh lệnh: TẤT CẢ nút nền đỏ thương hiệu (không grey/outline) ── */
.theme-report .ui-command-bar .btn-command,
.theme-report .ui-command-bar .btn-command-primary,
.theme-report .ui-command-bar .btn-command-secondary,
.theme-report .ui-command-bar .btn-primary,
.theme-report .ui-command-bar .btn-secondary,
.theme-report .ui-command-bar .btn-success,
.theme-report .ui-command-bar .btn-info,
.theme-report .ui-command-bar .btn-warning,
.theme-report .ui-command-bar .btn-outline-primary,
.theme-report .ui-command-bar .btn-outline-secondary,
.theme-report .ui-command-bar .btn-outline-success,
.theme-report .ui-command-bar .btn-outline-info,
.theme-report .ui-command-bar .btn-outline-warning,
.theme-report .ui-command-bar .btn-outline-danger {
    color: var(--btn-brand-color, #fff) !important;
    background-color: var(--btn-brand-bg, var(--color-brand)) !important;
    border-color: var(--btn-brand-border, var(--color-brand)) !important;
    box-shadow: var(--btn-brand-shadow, 0 3px 10px rgba(206, 17, 16, .35)) !important;
}

.theme-report .ui-command-bar .btn-command:hover,
.theme-report .ui-command-bar .btn-command:focus,
.theme-report .ui-command-bar .btn-command-primary:hover,
.theme-report .ui-command-bar .btn-command-primary:focus,
.theme-report .ui-command-bar .btn-command-secondary:hover,
.theme-report .ui-command-bar .btn-command-secondary:focus,
.theme-report .ui-command-bar .btn-primary:hover,
.theme-report .ui-command-bar .btn-primary:focus,
.theme-report .ui-command-bar .btn-secondary:hover,
.theme-report .ui-command-bar .btn-secondary:focus,
.theme-report .ui-command-bar .btn-success:hover,
.theme-report .ui-command-bar .btn-success:focus,
.theme-report .ui-command-bar .btn-info:hover,
.theme-report .ui-command-bar .btn-info:focus,
.theme-report .ui-command-bar .btn-warning:hover,
.theme-report .ui-command-bar .btn-warning:focus,
.theme-report .ui-command-bar .btn-outline-primary:hover,
.theme-report .ui-command-bar .btn-outline-primary:focus,
.theme-report .ui-command-bar .btn-outline-secondary:hover,
.theme-report .ui-command-bar .btn-outline-secondary:focus,
.theme-report .ui-command-bar .btn-outline-success:hover,
.theme-report .ui-command-bar .btn-outline-success:focus,
.theme-report .ui-command-bar .btn-outline-info:hover,
.theme-report .ui-command-bar .btn-outline-info:focus,
.theme-report .ui-command-bar .btn-outline-warning:hover,
.theme-report .ui-command-bar .btn-outline-warning:focus,
.theme-report .ui-command-bar .btn-outline-danger:hover,
.theme-report .ui-command-bar .btn-outline-danger:focus {
    color: var(--btn-brand-color, #fff) !important;
    background-color: var(--btn-brand-hover-bg, var(--color-brand-hover)) !important;
    border-color: var(--btn-brand-hover-border, var(--color-brand-hover)) !important;
}

/* ── View toggle: tab đang chọn nhấn đậm hơn, vẫn nền đỏ ── */
.theme-report .view-toggle-menu .ui-command-bar .btn-command.active {
    background-color: var(--btn-brand-hover-bg, var(--color-brand-hover)) !important;
    border-color: var(--btn-brand-hover-border, var(--color-brand-hover)) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15) !important;
}

/* ── Phân trang: trang đang chọn nền đỏ thay tím Vuexy (BaoCaoDanhGia, ThongBaoViec) ── */
html .theme-report .pagination .page-item.active .page-link,
html .theme-report .pagination .page-link.active {
    background-color: var(--btn-brand-bg, var(--color-brand)) !important;
    border-color: var(--btn-brand-border, var(--color-brand)) !important;
    color: var(--btn-brand-color, #fff) !important;
    box-shadow: none !important;
}

html .theme-report .pagination .page-link {
    color: var(--color-brand-dark) !important;
}

html .theme-report .pagination .page-link:hover,
html .theme-report .pagination .page-link:focus {
    background-color: var(--color-brand-light) !important;
    color: var(--color-brand) !important;
}

/* ── Badge đếm: cùng nền thương hiệu nhạt ─────────────────── */
.theme-report .badge.bg-label-warning,
.theme-report .badge.bg-label-info,
.theme-report .badge.bg-label-success,
.theme-report .badge.bg-label-primary,
.theme-report .badge.bg-success,
.theme-report .badge.bg-info,
.theme-report .badge.bg-warning,
.theme-report .badge.bg-primary,
.theme-report .badge.bg-warning.text-dark,
.theme-report .badge.bg-info.text-dark {
    background-color: var(--color-brand-light) !important;
    color: var(--color-brand-dark) !important;
}

.theme-report .badge.bg-label-secondary,
.theme-report .badge.bg-secondary {
    background-color: var(--color-gray-100) !important;
    color: var(--color-text-secondary) !important;
}

/* ── Header/ô bảng nhiều màu → xám + nhấn thương hiệu ─────── */
.theme-report .table-primary,
.theme-report .table-warning,
.theme-report .table-success,
.theme-report .table-info,
.theme-report .table-danger,
.theme-report tr.table-info,
.theme-report tr.table-success,
.theme-report tr.table-warning,
.theme-report tr.table-danger,
.theme-report .table-info.font-weight-bold,
.theme-report .table-success.font-weight-bold,
.theme-report .table-warning.font-weight-bold {
    --bs-table-bg: var(--color-gray-50);
    --bs-table-accent-bg: var(--color-gray-50);
    background-color: var(--color-gray-50) !important;
    color: var(--color-text-primary) !important;
}

.theme-report thead.thead-dark th,
.theme-report .thead-dark th {
    background-color: var(--table-header-bg, #835050) !important;
    color: var(--table-header-color, beige) !important;
}

.theme-report thead th[style*="background"] {
    background-color: var(--color-gray-50) !important;
    color: var(--color-text-primary) !important;
}

.theme-report .group-header,
.theme-report .group-header-row {
    background-color: var(--color-gray-50) !important;
    border-left-color: var(--color-brand) !important;
    color: var(--color-text-primary) !important;
}

.theme-report .group-total {
    background-color: var(--color-gray-100) !important;
    border-left-color: var(--color-brand) !important;
}

.theme-report .grand-total {
    background-color: var(--color-gray-100) !important;
    border-left-color: var(--color-brand-dark) !important;
}

.theme-report .progress-bar.bg-success {
    background-color: var(--color-brand) !important;
}

.theme-report .progress-bar.bg-warning {
    background-color: var(--color-muted) !important;
}

.theme-report .hk-vanban-header {
    border-left-color: var(--color-brand) !important;
    background-color: var(--color-gray-50) !important;
}

.theme-report .hk-vanban-header:hover {
    background-color: var(--color-gray-100) !important;
}