/* ================================================
   SmartGrid – giao diện chung cho MỌI grid (áp tự động bởi js/smart-grid.js)
   Đổi màu/cỡ chữ cho toàn bộ grid: chỉ cần sửa các biến --sg-* dưới đây.
   ================================================ */
:root {
    --sg-bg: var(--card-bg, #fff);
    --sg-head-bg: color-mix(in srgb, var(--card-bg, #fff) 92%, var(--accent-color, #667eea) 8%);
    --sg-head-color: var(--text-secondary, #6c7899);
    --sg-text: var(--text-primary, #1a2035);
    --sg-line: var(--border-color, #e8ecf0);
    --sg-col-line: color-mix(in srgb, var(--border-color, #e8ecf0) 70%, transparent);
    --sg-hover: color-mix(in srgb, var(--card-bg, #fff) 93%, var(--accent-color, #667eea) 7%);
    --sg-selected: color-mix(in srgb, var(--card-bg, #fff) 82%, var(--accent-color, #667eea) 18%);
    --sg-handle: #3b82f6;
    --sg-font-size: 12.5px;
    --sg-head-size: 11px;
    --sg-pad-y: 8px;
    --sg-pad-x: 10px;
}
[data-theme="dark"] {
    --sg-head-bg: #162238;
    --sg-head-color: #a1a7bb;
    --sg-line: #2a3a52;
    --sg-col-line: #232838;
    --sg-hover: #18263d;
    --sg-selected: #1b3354;
}

/* ---- Khung cuộn ---- */
.sg-wrap { overflow: auto; position: relative; max-width: 100%; }

/* ---- Bảng ---- */
.sg-table.sg-table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    color: var(--sg-text);
    font-size: var(--sg-font-size);
    --bs-table-bg: var(--sg-bg);
    --bs-table-hover-bg: var(--sg-hover);
    --bs-table-border-color: var(--sg-line);
}
.sg-table.sg-fixed { table-layout: fixed; min-width: 100%; }

.sg-table.sg-table > thead > tr > th,
.sg-table.sg-table > tbody > tr > td,
.sg-table.sg-table > tfoot > tr > * {
    padding: var(--sg-pad-y) var(--sg-pad-x);
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid var(--sg-line);
    border-right: 1px solid var(--sg-col-line);
    vertical-align: middle;
}
.sg-table.sg-table > * > tr > *:last-child { border-right: 0; }

/* 1 dòng + dấu "…" (tắt bằng data-sg-wrap="true") */
.sg-fixed:not(.sg-wrap-text) > thead > tr > th,
.sg-fixed:not(.sg-wrap-text) > tbody > tr > td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Ô có dropdown thì không được cắt menu */
.sg-table > tbody > tr > td:has(.dropdown, .dropup, .btn-group) { overflow: visible; }

/* ---- Tiêu đề ---- */
.sg-table.sg-table > thead > tr > th {
    position: relative;
    background: var(--sg-head-bg);
    color: var(--sg-head-color);
    font-size: var(--sg-head-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    user-select: none;
    border-bottom: 1px solid var(--sg-line);
    --bs-table-bg-type: var(--sg-head-bg);
}
.sg-sticky > thead > tr > th { position: sticky; top: 0; z-index: 2; }
.sg-table > thead > tr > th.sg-sortable { cursor: pointer; }
.sg-table > thead > tr > th.sg-sortable:hover { color: var(--sg-text); }
.sg-icon { margin-left: 4px; opacity: .35; font-size: 10px; line-height: 1; }
th[aria-sort=ascending] > .sg-icon,
th[aria-sort=descending] > .sg-icon { opacity: 1; color: var(--accent-color, #667eea); }

/* ---- Tay kéo giãn cột ---- */
.sg-handle {
    position: absolute; right: 0; top: 0; height: 100%; width: 6px;
    cursor: col-resize; touch-action: none; z-index: 3;
}
.sg-handle:hover, .sg-handle.sg-active { background: var(--sg-handle); }
body.sg-resizing, body.sg-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ---- Dòng: hover / chọn ---- */
.sg-table > tbody > tr > td { background-color: var(--sg-bg); }
.sg-table > tbody > tr:hover > td {
    background-color: var(--sg-hover);
    --bs-table-bg-state: var(--sg-hover);
}
.sg-table > tbody > tr.sg-selected > td {
    background-color: var(--sg-selected);
    --bs-table-bg-state: var(--sg-selected);
}

/* ---- Cột số: căn phải, chữ số đều nhau ---- */
.sg-table td.sg-num { text-align: right; font-variant-numeric: tabular-nums; }
.sg-table th.sg-num { text-align: right; }

/* ---- Thanh công cụ (data-sg-toolbar="true") ---- */
.sg-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }