/* ═══════════════════════════════════════════════
   Badge bảng giá trên grid danh mục khoản thu/chi
   ═══════════════════════════════════════════════ */
.bg-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 72px;
    height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -.01em;
}

.bg-badge i { font-size: 12px; }

/* Có bảng giá */
.bg-badge-active {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    color: #1d4ed8;
    box-shadow: 0 1px 4px rgba(29, 78, 216, .12);
}
.bg-badge-active:hover {
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
    box-shadow: 0 3px 10px rgba(29, 78, 216, .18);
    transform: translateY(-1px);
}
.bg-badge-active i { color: #2563eb; }

/* Chưa có bảng giá */
.bg-badge-empty {
    background: #f8fafc;
    color: #94a3b8;
    border: 1px dashed #cbd5e1;
}
.bg-badge-empty:hover {
    background: #f1f5f9;
    color: #64748b;
    border-color: #93c5fd;
}

/* ═══════════════════════════════════════════════
   Dialog bảng giá mặc định theo chủ hàng
   ═══════════════════════════════════════════════ */
.bg-dialog-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Toolbar: search + info + badge ── */
.bg-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

/* ── Search ── */
.bg-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    flex: 1;
    min-width: 140px;
    max-width: 260px;
    transition: all .15s;
}
.bg-search-wrap:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(15,157,79,.08);
}
.bg-search-wrap i { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.bg-search-wrap input {
    border: none; outline: none; background: transparent;
    font-size: 11.5px; color: #334155; width: 100%; padding: 0; height: 28px;
}
.bg-search-wrap input::placeholder { color: #b0b8c4; }

/* ── Info count ── */
.bg-info-count {
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    margin-left: auto;
}

/* ── Nút Lưu trên toolbar ── */
.bg-save-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    flex-shrink: 0;
}

/* ── Filter chips ── */
.bg-filter-chips {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}
.bg-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}
.bg-chip i { font-size: 10px; }
.bg-chip:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}
.bg-chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ── Table ── */
.bg-table-scroll {
    max-height: 460px;
    overflow: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.bg-table-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.bg-table-scroll::-webkit-scrollbar-track { background: #f8fafc; }
.bg-table-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.bg-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand); }

.bg-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 12px;
}

.bg-table thead tr {
    position: sticky;
    top: 0;
    z-index: 2;
}

.bg-table thead th {
    height: 32px;
    padding: 0 10px;
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    border-bottom: 1px solid #cbd5e1;
    user-select: none;
}

.bg-table tbody td {
    height: 34px;
    padding: 0 10px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    font-size: 12px;
    transition: background .08s;
}

.bg-table tbody tr:hover td {
    background: #f0fdf4 !important;
}

.bg-table tbody tr:last-child td { border-bottom: 0; }

/* ── STT ── */
.bg-td-stt {
    text-align: center;
    font-weight: 700;
    color: #94a3b8;
    font-size: 11px;
    width: 36px;
}

/* ── Mã chủ hàng ── */
.bg-td-ma {
    font-weight: 700;
    color: #0f172a;
    font-size: 12px;
}

/* ── Tên chủ hàng ── */
.bg-td-ten {
    color: #334155;
    font-size: 12px;
    font-weight: 500;
}

/* ── Cột tiền ── */
.bg-td-money {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
}

.bg-td-total {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #dc2626;
    font-size: 11.5px;
}

/* ── Input inline ── */
.bg-td-input { padding: 0 3px !important; }
.bg-td-input .inputn-shell {
    height: 26px !important;
    min-height: 26px !important;
    border-radius: 6px;
    border-color: #e2e8f0;
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}
.bg-td-input .inputn-shell:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(15,157,79,.1);
}
.bg-td-input .inputn-input {
    font-size: 11.5px !important;
    text-align: right;
    padding: 0 7px !important;
    height: 24px !important;
    font-weight: 600;
    color: #1e293b;
}
.bg-td-vat .inputn-shell { max-width: 68px; margin: 0 auto; }

/* ── Row có giá — subtle left accent ── */
.bg-table tbody tr:not(.bg-row-empty):not(.bg-row-changed) td:first-child {
    border-left: 2px solid transparent;
}

/* ── Row đã thay đổi ── */
.bg-row-changed td {
    background: #fffbeb !important;
}
.bg-row-changed td:first-child {
    border-left: 2px solid #f59e0b !important;
}
.bg-row-changed:hover td {
    background: #fef3c7 !important;
}

/* ── Row chưa có giá — vẫn rõ ràng, chỉ nhạt nhẹ ── */
.bg-table tbody tr:not(.bg-row-has):not(.bg-row-changed) td {
    color: #64748b;
}

/* ── Row có giá — highlight nhẹ ── */
.bg-row-has td {
    background: #fafffe !important;
}
.bg-row-has td:first-child {
    border-left: 2px solid #86efac !important;
}

/* ── Empty state ── */
.bg-empty {
    text-align: center;
    color: #94a3b8;
    padding: 40px 16px !important;
    font-size: 12.5px;
    font-weight: 500;
}

/* ── Phân trang ── */
.bg-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 0 0;
}
.bg-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
}
.bg-pager-btn:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}
.bg-pager-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(15,157,79,.2);
}
.bg-pager-btn:disabled {
    opacity: .3;
    cursor: default;
}
.bg-pager-btn i { font-size: 11px; }