/* ════════════════════════════════════════════════════════════════════
   CFO — Mua hàng & Công nợ (/cfo/purchasing)
   CSS tập trung (rule: 100% CSS ở wwwroot/css, không scoped/inline).
   Dùng chung cho page CfoPurchasing + các component con trong Components/Cfo/.
   ════════════════════════════════════════════════════════════════════ */

/* ── Ambient background ─────────────────────────────────────────── */
.cfo-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;   /* nền trang trí nằm SAU nội dung — để .cfo-page khỏi cần tạo stacking-context (z-index) riêng */
    pointer-events: none;
    background:
        radial-gradient(40% 50% at 10% 15%, rgba(56, 189, 248, .14), transparent 70%),
        radial-gradient(35% 45% at 90% 10%, rgba(167, 139, 250, .12), transparent 70%),
        radial-gradient(40% 50% at 65% 90%, rgba(52, 211, 153, .10), transparent 70%);
}

/* KHÔNG đặt z-index ở đây: z-index trên .cfo-page tạo stacking-context khiến MudDrawer (position:fixed,
   con của .cfo-page) bị "kẹt" dưới thanh AppBar dù z-index drawer rất cao. Ambient đã hạ xuống -1 nên
   nội dung vẫn nổi trên nền mà không cần stacking-context. */
.cfo-page { position: relative; }

/* ── KPI Grid ───────────────────────────────────────────────────── */
.cfo-kpi {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    perspective: 1200px;
}

.cfo-kpi__tile {
    position: relative;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(var(--ag-fg-rgb), 0.10), rgba(var(--ag-fg-rgb), 0.02) 60%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.12);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -10px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease;
}

.cfo-kpi__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(var(--ag-fg-rgb), 0.08) 48%, transparent 60%);
    pointer-events: none;
}

.cfo-kpi__tile:hover {
    transform: translateY(-4px) rotateX(6deg) scale(1.012);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Left accent bar */
.cfo-kpi__tile::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--mud-palette-primary);
    box-shadow: 0 0 16px 2px var(--mud-palette-primary);
}

.cfo-kpi__tile--ok::before   { background: var(--mud-palette-success); box-shadow: 0 0 16px 2px rgba(var(--mud-palette-success-rgb), .8); }
.cfo-kpi__tile--bad::before  { background: var(--mud-palette-error);   box-shadow: 0 0 16px 2px rgba(var(--mud-palette-error-rgb), .8); }
.cfo-kpi__tile--warn::before { background: var(--mud-palette-warning); box-shadow: 0 0 16px 2px rgba(var(--mud-palette-warning-rgb), .8); }
.cfo-kpi__tile--ai::before   { background: #a78bfa; box-shadow: 0 0 16px 2px rgba(167, 139, 250, .8); }
.cfo-kpi__tile--staff::before { background: var(--mud-palette-info); box-shadow: 0 0 16px 2px rgba(var(--mud-palette-info-rgb), .8); }
.cfo-kpi__tile--info::before  { background: var(--mud-palette-primary); box-shadow: 0 0 16px 2px rgba(var(--mud-palette-primary-rgb), .8); }

.cfo-kpi__label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    position: relative; z-index: 1;
}

.cfo-kpi__value {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    position: relative; z-index: 1;
    margin-top: 4px;
}

.cfo-kpi__tile--ok  .cfo-kpi__value { color: var(--mud-palette-success); }
.cfo-kpi__tile--bad .cfo-kpi__value { color: var(--mud-palette-error); }
.cfo-kpi__tile--ai  .cfo-kpi__value { color: #c4b5fd; }
.cfo-kpi__tile--staff .cfo-kpi__value { color: var(--mud-palette-info); }
.cfo-kpi__tile--info  .cfo-kpi__value { color: var(--mud-palette-primary); }

.cfo-kpi__sub {
    font-size: .65rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    position: relative; z-index: 1;
}

.cfo-kpi__exact {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Hero: Tổng đang nợ (đầu trang) ───────────────────────────────── */
.cfo-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.cfo-hero__card {
    position: relative;
    text-align: left;
    cursor: pointer;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(150deg, rgba(var(--ag-fg-rgb), 0.08), rgba(var(--ag-fg-rgb), 0.02) 60%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    overflow: hidden;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, border-color .2s ease;
}

.cfo-hero__card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: #38bdf8;
    box-shadow: 0 0 18px 2px rgba(56, 189, 248, .7);
}

.cfo-hero__card--ncc::before   { background: #fb923c; box-shadow: 0 0 18px 2px rgba(251, 146,  60, .7); }
.cfo-hero__card--nv::before    { background: #a78bfa; box-shadow: 0 0 18px 2px rgba(167, 139, 250, .7); }
.cfo-hero__card--total::before { background: #f87171; box-shadow: 0 0 18px 2px rgba(248, 113, 113, .75); }

.cfo-hero__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.cfo-hero__card--ncc.is-active   { border-color: rgba(251, 146,  60, 0.7); background: linear-gradient(150deg, rgba(251, 146,  60, 0.14), rgba(var(--ag-fg-rgb), 0.02) 60%); }
.cfo-hero__card--nv.is-active    { border-color: rgba(167, 139, 250, 0.7); background: linear-gradient(150deg, rgba(167, 139, 250, 0.14), rgba(var(--ag-fg-rgb), 0.02) 60%); }
.cfo-hero__card--total.is-active { border-color: rgba(248, 113, 113, 0.7); background: linear-gradient(150deg, rgba(248, 113, 113, 0.14), rgba(var(--ag-fg-rgb), 0.02) 60%); }

.cfo-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.cfo-hero__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.cfo-hero__chip {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(56, 189, 248, .16);
    color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, .35);
}

.cfo-hero__chip--ncc   { background: rgba(251, 146,  60, .16); color: #fdba74; border-color: rgba(251, 146,  60, .4); }
.cfo-hero__chip--nv    { background: rgba(167, 139, 250, .16); color: #c4b5fd; border-color: rgba(167, 139, 250, .4); }
.cfo-hero__chip--total { background: rgba(248, 113, 113, .16); color: #fca5a5; border-color: rgba(248, 113, 113, .4); }

.cfo-hero__val {
    margin-top: 10px;
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.05;
    color: #fb923c;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.cfo-hero__card--nv .cfo-hero__val { color: #c4b5fd; }
.cfo-hero__val--total { color: #fca5a5; font-size: 2.4rem; }

.cfo-hero__meta {
    margin-top: 6px;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .cfo-hero { grid-template-columns: 1fr; }
}

/* ── Header bảng có thể sắp xếp ──────────────────────────────────── */
.cfo-sortable-head th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .12s ease, background .12s ease;
}
.cfo-sortable-head th:hover { color: var(--mud-palette-text-primary); background: rgba(56, 189, 248, 0.10); }

/* ── Section title ──────────────────────────────────────────────── */
.cfo-section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}

/* ── Empty state ────────────────────────────────────────────────── */
.cfo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
}

/* ── Quick filter / summary bar ─────────────────────────────────── */
.cfo-quickbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
/* Dải KPI của NV đi chợ có 4 thẻ → ép 4 cột 1 hàng (mặc định .cfo-quickbar chỉ 3 cột cho dải NCC/NV). */
.cfo-quickbar--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cfo-quick {
    text-align: left;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(var(--ag-fg-rgb), 0.04);
    border: 1px solid rgba(var(--ag-fg-rgb), 0.10);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
}
.cfo-quick:hover { background: rgba(var(--ag-fg-rgb), 0.07); transform: translateY(-2px); }
.cfo-quick.is-active        { border-color: rgba(56, 189, 248, 0.7); background: rgba(56, 189, 248, 0.12); }
.cfo-quick--ncc.is-active   { border-color: rgba(251, 146, 60, 0.7); background: rgba(251, 146, 60, 0.12); }
.cfo-quick--nv.is-active    { border-color: rgba(167, 139, 250, 0.7); background: rgba(167, 139, 250, 0.12); }
.cfo-quick__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; color: var(--mud-palette-text-secondary); }
.cfo-quick__val   { font-size: 1.15rem; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cfo-quick--ncc .cfo-quick__val { color: #fb923c; }
.cfo-quick--nv  .cfo-quick__val { color: #c4b5fd; }
.cfo-quick__meta  { font-size: .65rem; color: var(--mud-palette-text-secondary); margin-top: 1px; }
.cfo-quick__split { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.cfo-quick__owed  { font-size: .95rem; font-weight: 800; color: #fca5a5; font-variant-numeric: tabular-nums; }
.cfo-quick__adv   { font-size: .82rem; font-weight: 700; color: #6ee7b7; font-variant-numeric: tabular-nums; }

/* Ô số bấm được để xem chi tiết */
.cfo-detail-table td.cell-link { cursor: pointer; transition: background .12s ease; }
.cfo-detail-table td.cell-link:hover { background: rgba(56, 189, 248, 0.16); text-decoration: underline; }

/* Drawer chi tiết ô */
.cfo-cell-explain {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
    background: rgba(var(--ag-fg-rgb), 0.04);
    border-left: 3px solid #38bdf8;
    padding: 6px 10px;
    border-radius: 6px;
}
.cfo-cell-net {
    margin-top: 8px;
    font-size: .9rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}
.cfo-cell-net span { color: var(--mud-palette-text-secondary); font-size: .75rem; }

/* Badge trạng thái thanh toán của phiếu mua */
.cfo-st { padding: 1px 7px; border-radius: 10px; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.st-paid    { background: rgba(var(--mud-palette-success-rgb), 0.18); color: #6ee7b7; }
.st-unpaid  { background: rgba(var(--mud-palette-error-rgb), 0.18); color: #fca5a5; }
.st-partial { background: rgba(var(--mud-palette-warning-rgb), 0.18); color: #fcd34d; }

/* Badge loại MovementType của phiếu trả/ứng */
.cfo-mv { padding: 1px 7px; border-radius: 10px; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.mv-out { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }  /* tiền ra */
.mv-in  { background: rgba(251, 146, 60, 0.16); color: #fb923c; }  /* tiền vào */
.mv-adj { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; } /* điều chỉnh */

/* Dòng phiếu trả KHÔNG tính vào công nợ mua hàng */
.cfo-grpo-table tr.row-muted { opacity: .4; }

/* ── Legend (giải thích Nợ / Dư) ────────────────────────────────── */
.cfo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: .7rem;
    color: var(--mud-palette-text-secondary);
}
.cfo-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.cfo-legend .dot--owed  { background: #fca5a5; }
.cfo-legend .dot--clear { background: #6ee7b7; }
.cfo-legend__note { color: var(--mud-palette-text-secondary); font-style: italic; }

/* ── Detail table ───────────────────────────────────────────────── */
.cfo-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
}

.cfo-table-wrap--tall {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: auto;
}

.cfo-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}

.cfo-detail-table thead th {
    position: sticky;
    top: 0;
    background: var(--ag-overlay-paper);
    backdrop-filter: blur(8px);
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--ag-border);
    white-space: nowrap;
}

.cfo-detail-table th.num,
.cfo-detail-table td.num { text-align: right; }

.cfo-detail-table tbody tr:hover { background: rgba(var(--ag-fg-rgb), 0.04); }
.cfo-detail-table tbody tr:nth-child(even) { background: rgba(var(--ag-fg-rgb), 0.02); }

.cfo-detail-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.05);
}

.cfo-detail-table td.name-cell {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.cfo-detail-table tfoot td {
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    border-top: 1px solid var(--ag-border);
    padding: 8px 10px;
    background: var(--ag-surface-sunken);
}

.row-overdue { background: rgba(248, 113, 113, 0.06) !important; }

.val-owed   { color: #fca5a5; font-weight: 700; }
.val-clear  { color: #6ee7b7; }
.val-warn   { color: #fcd34d; }
.val-orange { color: #fb923c; }

/* ── Type badges ────────────────────────────────────────────────── */
.cfo-v1-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, 0.4);
    white-space: nowrap;
}

.cfo-v2-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: .65rem;
    font-weight: 700;
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.4);
    white-space: nowrap;
}

/* ── GRPO table (inside drawer) ─────────────────────────────────── */
.cfo-grpo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
    margin-top: 4px;
}

.cfo-grpo-table th {
    color: var(--mud-palette-text-secondary);
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--ag-border);
}

.cfo-grpo-table td { padding: 5px 8px; border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.04); }
.cfo-grpo-table .num { text-align: right; }

/* ── Toggle xem cuối kỳ: Theo phiếu / Lũy tiến (sổ ngày) ─────────── */
.cfo-ledger-toggle {
    margin: 10px 0 4px;
    border: 1px solid rgba(var(--ag-fg-rgb), 0.10);
    border-radius: 8px;
    background: rgba(var(--ag-fg-rgb), 0.03);
}
.cfo-ledger-toggle .mud-toggle-item {
    font-size: .72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    letter-spacing: .2px;
}
.cfo-ledger-toggle .mud-toggle-item-selected {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
}

/* ── Sổ ngày: ô tìm kiếm / lọc client-side ──────────────────────── */
.cfo-ledger-search { margin: 4px 0 6px; }
.cfo-ledger-search-field.mud-input-control { margin: 0; }
.cfo-ledger-search-field .mud-input.mud-input-outlined {
    background: rgba(var(--ag-fg-rgb), 0.03);
    border-radius: 8px;
    font-size: .78rem;
    color: var(--mud-palette-text-primary);
}
.cfo-ledger-search-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(var(--ag-fg-rgb), 0.10);
}
.cfo-ledger-search-field .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(56, 189, 248, 0.35);
}
.cfo-ledger-search-field .mud-input.mud-input-focused .mud-input-outlined-border {
    border-color: rgba(56, 189, 248, 0.6);
}
.cfo-ledger-search-field input::placeholder { color: var(--mud-palette-text-secondary); }

/* Dòng "không có chứng từ khớp" khi lọc rỗng */
.cfo-ledger-table .cfo-ledger-empty td {
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    padding: 14px 8px;
}

/* ── Sổ ngày: dòng tổng & cột số dư lũy kế ──────────────────────── */
.cfo-grpo-table .cfo-ledger-bal { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Nhãn Nợ / Dư trước số dư (giúp phân biệt nợ vs dư/credit rõ ràng) */
/* Bọc nhãn + số trên 1 dòng vì ô căn phải */
.cfo-bal-wrap { white-space: nowrap; }
.cfo-bal-tag {
    display: inline-block; font-size: .58rem; font-weight: 800; letter-spacing: .04em;
    padding: 0 5px; margin-right: 4px; border-radius: 5px; vertical-align: middle; opacity: .85;
    background: rgba(var(--ag-fg-rgb), 0.08);
}
.val-owed .cfo-bal-tag  { background: rgba(248, 113, 113, 0.22); color: #fca5a5; }
.val-clear .cfo-bal-tag { background: rgba(52, 211, 153, 0.20); color: #6ee7b7; }

.cfo-ledger-table {
    --cfo-ledger-bg: var(--mud-palette-surface, #27272f);
    --cfo-ledger-head-bg: var(--mud-palette-background, #1a1a27);
}

/* ── Drawer "Chi tiết 1 ô công nợ" (Anchor.End) ──────────────────── */
/* Drawer nổi trên app bar + nội dung trang; vẫn dưới MudDialog mặc định (~1400+)
   nên các dialog con (PurchaseDetail/PaymentVoucher) mở từ trong sổ vẫn che được drawer. */
.mud-drawer.cfo-ledger-drawer {
    z-index: 1380 !important;
    top: 0 !important;   /* phủ kín từ đỉnh màn hình — che cả thanh menu trên cùng */
    height: 100vh;       /* dùng hết chiều cao màn hình */
    max-height: 100vh;
}
/* Overlay (scrim) đi kèm drawer phải ngay dưới drawer để không đè lên nó. */
.mud-overlay-drawer {
    z-index: 1379 !important;
}

/* Vùng thân bảng sổ Lũy tiến cuộn nội bộ — dùng hết chiều cao viewport.
   Trừ phần cố định: header drawer + toolbar (explain/toggle/daterange/search) + tfoot tổng. */
.cfo-ledger-scroll {
    max-height: calc(100vh - 340px);
    min-height: 55vh;
    overflow: auto;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.cfo-ledger-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--cfo-ledger-head-bg);
    box-shadow: inset 0 -1px 0 rgba(56, 189, 248, 0.28);
    border-bottom: none;
}

.cfo-ledger-table tfoot tr.cfo-ledger-total td {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--cfo-ledger-head-bg);
    box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.45);
    border-top: none;
    border-bottom: none;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cfo-ledger-table th.cfo-ledger-exp,
.cfo-ledger-table td.cfo-ledger-exp { width: 28px; padding-left: 4px; padding-right: 0; text-align: center; }

.cfo-exp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: rgba(125, 211, 252, 0.7);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.cfo-exp-btn:hover { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }
.cfo-exp-btn:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.6); outline-offset: 1px; }
.cfo-exp-ico { display: inline-block; font-size: .7rem; line-height: 1; transition: transform .15s ease; }
.cfo-exp-btn.is-open .cfo-exp-ico { transform: rotate(90deg); }

.cfo-ledger-row.is-expanded > td { background: rgba(56, 189, 248, 0.05); }

/* Diễn giải chứng từ trong sổ BO — cắt gọn, ưu tiên dễ đọc */
.cfo-ledger-desc { color: var(--mud-palette-text-primary); }

/* Dòng Số dư đầu kỳ (OB) — nổi bật, neo đầu sổ */
.cfo-ledger-row.cfo-ledger-ob > td {
    background: rgba(251, 191, 36, 0.10);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 -1px 0 rgba(251, 191, 36, 0.30);
}
.cfo-ledger-row.cfo-ledger-ob .cfo-ledger-desc { color: #fcd34d; letter-spacing: .01em; }

/* Dấu cho dòng ngày CÓ chứng từ ẩn (bấm để bung) */
.cfo-ledger-row.has-docs > td { background: rgba(56, 189, 248, 0.025); }
.cfo-ledger-date.is-link { cursor: pointer; border-bottom: 1px dashed rgba(var(--ag-fg-rgb), 0.25); }
.cfo-ledger-date.is-link:hover { color: #7dd3fc; border-bottom-color: #7dd3fc; }
.cfo-doc-count {
    display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
    font-size: .62rem; font-weight: 700; color: #fbbf24;
    background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.35);
    vertical-align: middle;
}

/* Hàng phụ liệt kê chứng từ của ngày */
.cfo-ledger-table tr.cfo-ledger-sub > td {
    padding: 6px 8px 8px 32px;
    background: rgba(var(--ag-fg-rgb), 0.02);
    border-bottom: 1px solid rgba(var(--ag-fg-rgb), 0.04);
}
.cfo-ledger-docs { display: flex; flex-direction: column; gap: 4px; }
.cfo-ledger-doc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .72rem;
    color: var(--mud-palette-text-primary);
}
.cfo-ledger-doc.row-muted { opacity: 0.45; }
.cfo-doc-kind { flex: 0 0 auto; }
.cfo-doc-amt { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cfo-doc-id { color: var(--mud-palette-text-secondary); }

.cfo-doc-link {
    padding: 0;
    border: none;
    background: transparent;
    color: #7dd3fc;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cfo-doc-link:hover { color: #bae6fd; }
.cfo-doc-link:focus-visible { outline: 2px solid rgba(56, 189, 248, 0.6); outline-offset: 2px; border-radius: 3px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .cfo-kpi { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
    .cfo-kpi { grid-template-columns: repeat(2, 1fr); }
    .cfo-kpi__value { font-size: 1.3rem; }
    .cfo-quickbar,
    .cfo-quickbar--4 { grid-template-columns: 1fr; }
    .cfo-ledger-scroll { max-height: calc(100vh - 260px); min-height: 45vh; }
    .cfo-ledger-table { min-width: 460px; }
    .cfo-ledger-table tr.cfo-ledger-sub > td { padding-left: 16px; }
    .cfo-ledger-doc { font-size: .7rem; }
}

@media (max-width: 600px) {
    .cfo-kpi { grid-template-columns: 1fr; }
    .cfo-table-wrap { overflow-x: auto; }
    .cfo-detail-table { min-width: 560px; }
}