/* =====================================================================
grid.css — CSS dùng chung cho MỌI trang list-admin + report (~63 trang)
Gom từ ~54 file `*Admin.razor.css` (list-admin) + 9 file
`*CriteriaReportAdmin.razor.css` (nội dung 2 nhóm này giống hệt nhau,
không phải 2 "loại" khác biệt — xem CLAUDE.md mục gom CSS 2026-08-21).
Nguồn canonical: ArticlesAdmin.razor.css (bản đầy đủ nhất, comment gốc
ghi "Copy pattern từ ArticlesAdmin.razor.css" ở mọi file khác).
Trước đây mỗi trang tự đặt `.{entity}-grid` (vd .articles-grid,
.hubs-grid, .criteria-grid) làm class host để `::deep` chọn Radzen —
bản thân class đó KHÔNG có nội dung riêng theo entity, chỉ là 1 "móc".
Ở đây thay bằng attribute selector `[class*="-grid"]:not([class*="rz-"])`
để không cần sửa markup Razor của 63 trang:
- `[class*="-grid"]` khớp mọi class kết thúc "-grid" (articles-grid,
hubs-grid, criteria-grid...).
- `:not([class*="rz-"])` loại trừ chính các class nội bộ của Radzen
cũng chứa "-grid" (rz-data-grid, rz-grid-table, rz-datatable) —
nếu không loại trừ, selector sẽ tự khớp qua chính .rz-grid-table
làm ancestor của .rz-grid-table thead th và áp dụng SAI ra toàn
site (đã kiểm tra thật, không phải giả thuyết).
- Đã kiểm tra: các trang public/Member dùng class "-grid" (vd
.courses-grid ở CourseCatalog) là CSS Grid layout thuần
(display:grid), không chứa phần tử Radzen data-grid nào bên
trong → rule ở đây không áp dụng lên đó (an toàn, không xung đột).
Dark mode: TOÀN BỘ nằm gộp 1 khối trong shared.css (không tách theo
từng file) — mọi override dark ở đó đều viết dạng
`html[data-admin-theme="dark"] .adm-root .xxx` nên LUÔN thắng specificity
so với rule light-mode phẳng ở file này, bất kể thứ tự nạp —
đã xác nhận qua grep thật, không phụ thuộc thứ tự file.
===================================================================== */
/* ===================== Token alias cục bộ (mọi trang list-admin) ===================== */
[class*="-grid"]:not([class*="rz-"]) {
--grid-row-border: var(--adm-grid-row-border);
--grid-icon: var(--adm-grid-icon);
--chip-text: var(--adm-chip-text);
--row-selected: var(--adm-row-selected);
}
/* ===================== Thanh lọc / tìm kiếm ===================== */
.filter-bar {
--ctl-icon: var(--adm-ctl-icon);
--ctl-border-hover: var(--adm-ctl-border-hover);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: none;
}
/* Kích thước từng control */
.filter-bar .filter-control--status { width: 200px; }
.filter-bar .filter-control--category { width: 240px; }
.filter-bar .filter-control--search { flex: 1 1 240px; min-width: 200px; max-width: 340px; }
/* Hộp control (đóng) — dropdown + textbox + datepicker đồng bộ */
.filter-bar .rz-dropdown,
.filter-bar .rz-textbox,
.filter-bar .rz-datepicker {
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;
}
/* BUG THẬT đã gặp (2026-08-25, CourseEnrollmentPaymentsAdmin/InstructorPayoutsAdmin — lần đầu dùng
RadzenDatePicker trong .filter-bar của grid.css): .rz-datepicker ở trên chỉ tạo viền NGOÀI, nhưng
input bên trong RadzenDatePicker vẫn tự vẽ viền/nền riêng của Radzen
default.css → nhìn thành viền lồng đôi. Đúng pattern đã dùng ở AuditLogAdmin.razor.css: phải tắt
hẳn viền + nền của input con, chỉ để đúng 1 viền ngoài. */
.filter-bar .rz-datepicker .rz-inputtext {
height: 100%;
border: none;
background: transparent;
font-size: 14px;
color: var(--text);
}
.filter-bar .rz-dropdown .rz-dropdown-label {
display: flex;
align-items: center;
height: 100%;
padding: 0 12px;
font-size: 14px;
color: var(--text);
}
.filter-bar .rz-textbox {
padding: 0 12px;
font-size: 14px;
color: var(--text);
}
/* Placeholder */
.filter-bar .rz-dropdown.rz-state-empty .rz-dropdown-label {
color: var(--text-secondary);
}
.filter-bar .rz-textbox::placeholder {
color: var(--text-secondary);
}
/* Chevron / clear / icon */
.filter-bar .rz-dropdown .rz-dropdown-trigger {
background: transparent;
border: none;
}
.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);
}
/* Hover */
.filter-bar .rz-dropdown:hover,
.filter-bar .rz-textbox:hover,
.filter-bar .rz-datepicker:hover {
border-color: var(--ctl-border-hover);
}
/* Focus — viền + ring màu thương hiệu */
.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;
}
/* Nút tìm */
.filter-bar .filter-btn {
height: 40px;
border-radius: 8px;
font-weight: 600;
box-shadow: none;
}
@media (max-width: 767px) {
.filter-bar {
flex-direction: column;
align-items: stretch;
}
.filter-bar .filter-control--status,
.filter-bar .filter-control--category,
.filter-bar .filter-control--search,
.filter-bar .filter-btn {
width: 100%;
max-width: none;
}
}
/* ===================== Tabs (list-admin có nhiều tab dữ liệu, vd Menu Header/Footer) =====================
1 CARD DUY NHẤT bọc cả dải tab lẫn nội dung — đúng pattern tab chuẩn (Material/GitHub/Bootstrap
nav-tabs) đã thống nhất toàn Admin Panel. File này KHÔNG phải CSS-isolation nên không cần ::deep —
phần nav-tab/panel bên trong RadzenTabs đã được reset chung qua rule .adm-root .rz-tabview* ở
shared.css, ở đây chỉ cần cung cấp khung ngoài. Dùng: