/* =====================================================================
   reports.css — CSS dùng chung cho các trang Report/Thống kê Admin.

   2 nhóm KHÔNG liên quan nhau về mặt style (đã kiểm tra thật, không suy
   đoán) nhưng cùng nằm trong "báo cáo" theo nghĩa nghiệp vụ:

   1. `.criteria-grid` — 9 trang `*CriteriaReportAdmin.razor.css`
      (Article/Course/Document/Event/Forum/Hub/Member/Mentor/Payment),
      byte-identical ngoại trừ 3 giá trị min-width breakpoint của
      MemberCriteriaReportAdmin (bảng nhiều cột hơn) — phần khác biệt đó
      GIỮ LẠI trong chính MemberCriteriaReportAdmin.razor.css (CSS isolation
      tự thêm [b-xxx] nên thắng specificity, override đúng chỉ trang đó).
      Khác `grid.css`: đây là bảng CUỘN NGANG rộng (`overflow-x:auto`,
      `width:max-content`) phục vụ nhiều cột số liệu, không phải bảng thẻ
      bo góc thông thường — nên KHÔNG gộp chung vào grid.css dù cũng dùng
      RadzenDataGrid.

   2. `.report-date-filter*` — mảnh dùng chung giữa `ReportsAdmin.razor.css`
      (trang /admin/bao-cao tổng hợp 5 nhóm IReportingService) và 6 trang
      report cũ theo từng phân hệ (Ebook/Econnect/Ehub/Elearning/Financial/
      User). Phần còn lại của 6 trang này (`.kpi-grid`/`.chart-card*`/
      `.xxx-report__section`) đặt tên riêng theo từng trang (không đồng bộ
      hóa tên class), quy mô nhỏ (2-3KB/trang) — để nguyên trong từng
      `.razor.css`, không đáng công gộp tiếp và có rủi ro phải sửa cả
      markup Razor nếu đổi tên class.
   ===================================================================== */

/* ===================== Nhóm 1: Criteria Report — bảng cuộn ngang ===================== */
.filter-bar .filter-control--date   { width: 150px; }
.filter-bar .filter-control--sm     { width: 160px; }
.filter-bar .filter-control--md     { width: 200px; }
.filter-bar .filter-control--search { flex: 1 1 200px; min-width: 160px; max-width: 240px; }

.filter-bar .rz-dropdown,
.filter-bar .rz-textbox,
.filter-bar .rz-datepicker,
.filter-bar .rz-calendar {
    height: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.filter-bar .rz-dropdown .rz-dropdown-trigger-icon,
.filter-bar .rz-dropdown .rz-dropdown-clear-icon,
.filter-bar .rz-dropdown .rzi,
.filter-bar .rz-datepicker .rzi {
    color: var(--ctl-icon);
}

.filter-bar .rz-dropdown:hover,
.filter-bar .rz-textbox:hover,
.filter-bar .rz-datepicker:hover {
    border-color: var(--ctl-border-hover);
}

.filter-bar .rz-dropdown.rz-state-focused,
.filter-bar .rz-dropdown:focus,
.filter-bar .rz-textbox:focus,
.filter-bar .rz-textbox.rz-state-focused,
.filter-bar .rz-datepicker.rz-state-focused {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(30, 166, 158, .12));
    outline: none;
}

@media (max-width: 767px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar .filter-control--date,
    .filter-bar .filter-control--sm,
    .filter-bar .filter-control--md,
    .filter-bar .filter-control--search,
    .filter-bar .filter-btn {
        width: 100%;
        max-width: none;
    }
}

/* Khung bảng + cuộn ngang */
.criteria-grid {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    /* Thanh scroll luôn dễ thấy khi nội dung rộng hơn khung */
    scrollbar-gutter: stable;
}

.criteria-grid .rz-data-grid,
.criteria-grid .rz-datatable {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    /* Không co theo khung — giữ độ rộng cột, thừa thì scroll */
    width: max-content !important;
    min-width: 100%;
    max-width: none;
}

.criteria-grid .rz-data-grid-data {
    overflow: visible !important;
}

.criteria-grid .rz-grid-table,
.criteria-grid .rz-data-grid-data > table {
    border: none;
    background: transparent;
    width: max-content !important;
    min-width: 1280px;
    max-width: none !important;
    table-layout: fixed;
}

/* Cột không bị ép hẹp — header/ô giữ đủ chỗ chữ */
.criteria-grid .rz-grid-table thead th,
.criteria-grid .rz-datatable-thead > tr > th,
.criteria-grid .rz-datatable-data > tr > td,
.criteria-grid .rz-grid-table tbody td {
    box-sizing: border-box;
    overflow: hidden;
}

.criteria-grid .rz-column-title-content,
.criteria-grid .rz-column-title {
    white-space: nowrap !important;
    overflow: visible;
    text-overflow: clip;
}

/* Body */
.criteria-grid .rz-datatable-data > tr > td,
.criteria-grid .rz-grid-table tbody td {
    min-height: 56px;
    height: auto;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid var(--grid-row-border);
    vertical-align: middle;
    font-size: 14px;
    color: var(--text);
    background: transparent;
    white-space: normal;
}

/* Cột tiêu đề / chip / badge / ngày */
.report-title {
    display: block;
    max-width: 100%;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.status-badge--pending_publish { background: #EFF6FF; color: #1D4ED8; }
.status-badge--approved        { background: #ECFDF5; color: #047857; }
.status-badge--pending         { background: #FFFBEB; color: #B45309; }
.status-badge--rejected        { background: #FEF2F2; color: #B91C1C; }

.cell-muted {
    color: var(--text-secondary);
}

.cell-num {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Export success alert — phẳng, không shadow thừa */
.criteria-report .rz-alert {
    border-radius: 12px;
    box-shadow: none;
}

@media (max-width: 1024px) {
    .criteria-grid .rz-grid-table thead th,
    .criteria-grid .rz-datatable-thead > tr > th,
    .criteria-grid .rz-datatable-data > tr > td,
    .criteria-grid .rz-grid-table tbody td {
        padding-left: 12px;
        padding-right: 12px;
    }

    .criteria-grid .rz-grid-table,
    .criteria-grid .rz-data-grid-data > table {
        min-width: 1180px;
    }
}

@media (max-width: 767px) {
    .criteria-grid .rz-grid-table,
    .criteria-grid .rz-data-grid-data > table {
        min-width: 1080px;
    }
}

/* ===================== Nhóm 2: Thanh lọc theo kỳ (báo cáo thống kê) ===================== */
.report-date-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    align-items: center;
}

.report-date-filter__picker {
    min-width: 180px;
}

.report-date-filter__btn {
    height: 40px;
}