/* ============================================================================
   com_xqbase — lớp bắc cầu giữa bảng tự chế của component và chuẩn cr-ui
   09/10/2026

   VÌ SAO CẦN: các màn hình lớn của com_xqbase (explorer, players, game,
   position/setup, master) dựng dòng bảng BẰNG JAVASCRIPT — `.xq-games-tbl`,
   `.xq-info-tbl`, bảng trong popup đồng bộ. Đổi từng <td> sang class của cr-ui
   sẽ phải sửa cả mấy nghìn dòng JS và dễ bỏ sót, nên thay vì thế, khối này
   áp ĐÚNG BẢY CON SỐ của cr-ui lên chính các bảng đó.

   Chỉ ăn khi bảng nằm trong .cr-ui, nên view nào chưa gắn class ấy thì giữ
   nguyên hình dáng cũ — chuyển dần từng view được.

   Bàn cờ, quân cờ, banner gradient và biểu đồ KHÔNG nằm trong đây: chúng là
   nhận diện riêng của component, cr-ui không chạm tới.
   ============================================================================ */

/* ----------------------------------------------------------- BẢNG DỮ LIỆU -- */

.cr-ui .xq-games-tbl,
.cr-ui .xq-sync-wrap table,
.cr-ui #m-psync table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--cr-fs);
}

/* Tiêu đề cột: 32px, chữ 10.5px KHÔNG in hoa, bám theo màn hình.
   Nền sáng như cr-ui thay cho nền xanh #0078D4 của bản cũ. */
.cr-ui .xq-games-tbl > thead > tr > th,
.cr-ui .xq-games-tbl > thead > tr > td,
.cr-ui #m-psync table > thead > tr > th {
    position: sticky;
    top: var(--cr-sticky-top, 0px);
    z-index: 2;
    height: 32px;
    padding: 0 10px;
    text-align: left;
    font-size: var(--cr-fs-th);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--cr-ink-3);
    white-space: nowrap;
    background: var(--cr-surface-3);
    border-bottom: 1px solid var(--cr-line-strong);
}

/* Ô tích trong tiêu đề từng là nền xanh nên phải ép màu trắng; nay nền sáng
   thì trả về mặc định, nếu không ô tích biến mất trên nền xám. */
.cr-ui .xq-games-tbl > thead > tr > th input[type="checkbox"],
.cr-ui #m-psync table > thead > tr > th input[type="checkbox"] {
    accent-color: var(--cr-accent);
    margin: 0;
    vertical-align: middle;
}

/* Dòng dữ liệu: 30px. */
.cr-ui .xq-games-tbl > tbody > tr > td,
.cr-ui #m-psync table > tbody > tr > td {
    height: var(--cr-row);
    padding: 0 10px;
    border-bottom: 1px solid var(--cr-line);
    color: var(--cr-ink);
    vertical-align: middle;
}

/* Vằn xen kẽ + đổi màu khi rê chuột — bản cũ chỉ có hover. */
.cr-ui .xq-games-tbl > tbody > tr:nth-child(even) > td,
.cr-ui #m-psync table > tbody > tr:nth-child(even) > td { background: rgba(239, 242, 246, .55); }
.cr-ui .xq-games-tbl > tbody > tr:hover > td,
.cr-ui #m-psync table > tbody > tr:hover > td { background: var(--cr-accent-soft); }
.cr-ui .xq-games-tbl > tbody > tr:last-child > td { border-bottom: 0; }

/* Nút và ô chọn NẰM TRONG bảng: 24px (30px sẽ đội dòng lên 40px). */
.cr-ui .xq-games-tbl .crb,
.cr-ui .xq-games-tbl .btn,
.cr-ui #m-psync table .crb,
.cr-ui #m-psync table .btn {
    height: 24px;
    min-height: 24px;
    padding: 0 8px;
    font-size: 12px;
}
.cr-ui .xq-games-tbl .form-control,
.cr-ui .xq-games-tbl .form-select {
    height: 24px;
    min-height: 24px;
    padding: 0 6px;
    font-size: 12px;
}

/* Bảng lý lịch (view=master): nhãn bên trái, giá trị bên phải, cùng 30px. */
.cr-ui .xq-info-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cr-fs); }
.cr-ui .xq-info-tbl th,
.cr-ui .xq-info-tbl td { height: var(--cr-row); padding: 0 10px; vertical-align: middle; }
.cr-ui .xq-info-tbl th {
    width: 130px; text-align: left; font-size: 12px; font-weight: 600;
    color: var(--cr-ink-3); white-space: nowrap;
}

/* ------------------------------------------------------------------ POPUP -- */
/* Popup tự chế .xq-modal: ô nhập và nút theo đúng 30px, nhãn cùng cỡ chữ. */

.cr-ui .xq-modal .form-control,
.cr-ui .xq-modal .form-select,
.cr-ui .xq-modal input[type="text"],
.cr-ui .xq-modal input[type="number"],
.cr-ui .xq-modal select {
    height: var(--cr-h);
    min-height: var(--cr-h);
    padding: 0 9px;
    font-size: var(--cr-fs);
    border: 1px solid var(--cr-line-strong);
    border-radius: var(--cr-r);
}
.cr-ui .xq-modal label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cr-ink-2);
    margin: 0 0 4px;
}
.cr-ui .xq-modal .xq-pe-row .form-control { height: var(--cr-h); min-height: var(--cr-h); padding: 0 9px; }
.cr-ui .xq-m-foot { gap: var(--cr-gap); }

/* Thẻ tab trong popup đồng bộ: cùng 30px như nút. */
.cr-ui .xq-sync-tab {
    height: var(--cr-h);
    padding: 0 12px;
    border-radius: var(--cr-r);
    font-size: var(--cr-fs);
    font-weight: 600;
    text-transform: none;
}

/* Nhãn trạng thái trong popup đồng bộ: dùng khuôn chip của cr-ui (pastel +
   viền cùng tông) thay cho ba khối màu đặc. Chữ trong nhãn vẫn nói rõ nghĩa. */
.cr-ui #m-psync .xq-badge {
    display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
    border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 700;
    background: transparent;
}
.cr-ui #m-psync .xq-badge.new    { color: var(--cr-ok);   border-color: rgba(31, 157, 87, .42);  background: rgba(31, 157, 87, .11); }
.cr-ui #m-psync .xq-badge.update { color: var(--cr-warn); border-color: rgba(184, 116, 0, .42);  background: rgba(184, 116, 0, .11); }
.cr-ui #m-psync .xq-badge.same   { color: var(--cr-off);  border-color: rgba(138, 147, 158, .42); background: rgba(138, 147, 158, .11); }

/* ------------------------------------------------------------- KHUNG PANE -- */
/* .xq-pane là khung nội dung cũ; cho nó cùng bo góc và viền với .cr-card. */

.cr-ui .xq-pane {
    border: 1px solid var(--cr-line);
    border-radius: var(--cr-r-card);
    background: var(--cr-surface);
    padding: 12px;
}

/* .xq-card (view=master) giữ nguyên vai trò thẻ, chỉ đồng bộ bo góc và viền. */
.cr-ui .xq-card { border-radius: var(--cr-r-card); }

/* Hàng nút cũ: cùng khe hở 8px như .cr-toolbar. */
.cr-ui .xq-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cr-gap); }

/* --------------------------------------------------------------- BẢN IN --- */
/* Bản in hồ sơ danh thủ cần nền trắng và không có hiệu ứng rê chuột. */
@media print {
    .cr-ui .xq-games-tbl > tbody > tr:nth-child(even) > td,
    .cr-ui .xq-games-tbl > tbody > tr:hover > td { background: transparent; }
    .cr-ui .xq-games-tbl > thead > tr > th { position: static; background: #f2f4f7; }
}