/* ==========================================================================
   Đại Dương — Design system (premium data interface)
   Tinh chỉnh trên Bootstrap 5.3, không đổi markup/JS. Tông trung tính ấm,
   một accent indigo, typography tiếng Việt (Be Vietnam Pro), số dạng tabular.
   ========================================================================== */

:root {
    /* Neutral (warm) surfaces */
    --c-bg:        #f4f4f1;
    --c-surface:   #ffffff;
    --c-surface-2: #fafaf8;
    --c-border:    #e6e6e0;
    --c-border-2:  #efefe9;

    /* Text */
    --c-ink:    #1b1b18;
    --c-ink-2:  #44443e;
    --c-muted:  #8a8a80;

    /* Single accent (desaturated indigo) + semantics */
    --c-accent:      #4f46e5;
    --c-accent-soft: #eef0ff;
    --c-accent-ink:  #3730a3;
    --c-money:       #15803d;

    --c-ok-bg:   #e7f4ec; --c-ok-ink:   #1a6b3c;
    --c-warn-bg: #fbf1d9; --c-warn-ink: #8a6310;
    --c-bad-bg:  #fbe5e6; --c-bad-ink:  #a4282f;

    --radius:    14px;
    --radius-sm: 9px;
    --shadow:    0 1px 2px rgba(28,28,24,.04), 0 8px 24px -12px rgba(28,28,24,.16);
    --shadow-sm: 0 1px 2px rgba(28,28,24,.05), 0 2px 8px -4px rgba(28,28,24,.10);

    /* Bootstrap overrides */
    --bs-body-bg: var(--c-bg);
    --bs-body-color: var(--c-ink);
    --bs-body-font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-border-color: var(--c-border);
    --bs-link-color-rgb: 79, 70, 229;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--bs-body-font-family);
    font-size: .94rem;
    letter-spacing: -0.006em;
}

/* Numbers / dates align cleanly */
.tnum, .text-end .fw-bold, td.text-end, .money {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

h1, h2, h3, .h4, .h5 { letter-spacing: -0.02em; color: var(--c-ink); }

/* ---------- Navbar: refined dark slate, accent active ---------- */
.navbar.bg-primary {
    background-color: #1b1b18 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}
.navbar .navbar-brand { letter-spacing: -0.02em; font-weight: 700; }
.navbar-dark .navbar-nav .nav-link {
    color: #b9b9b1;
    font-weight: 500;
    padding-inline: .9rem;
    border-radius: 8px;
    transition: color .18s ease, background-color .18s ease;
}
.navbar-dark .navbar-nav .nav-link:hover { color: #fff; background-color: rgba(255,255,255,.06); }
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background-color: rgba(79,70,229,.22);
    box-shadow: inset 0 0 0 1px rgba(124,118,240,.35);
}

/* Login header banner */
.bg-primary.text-white.text-center { background-color: #1b1b18 !important; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-body { padding: 1.4rem 1.5rem; }

/* ---------- Filter panel (was border bg-light) ---------- */
.filter-panel {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-2);
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
}
.filter-panel .form-label {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--c-muted);
    margin-bottom: .3rem;
}
.form-control, .form-select {
    border-color: var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(79,70,229,.14);
}
.input-group-text {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-muted);
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: -0.005em; transition: transform .06s ease, background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background-color: var(--c-accent); border-color: var(--c-accent); }
.btn-primary:hover { background-color: #4338ca; border-color: #4338ca; }
.btn-success { background-color: var(--c-money); border-color: var(--c-money); }
.btn-success:hover { background-color: #126b34; border-color: #126b34; }
.btn-outline-primary { color: var(--c-accent); border-color: var(--c-border); }
.btn-outline-primary:hover { background-color: var(--c-accent); border-color: var(--c-accent); }
.btn-outline-danger, .btn-outline-secondary, .btn-outline-info, .btn-outline-warning { border-color: var(--c-border); }
.btn-outline-secondary { color: var(--c-ink-2); }
.btn-outline-secondary:hover { background: var(--c-ink); border-color: var(--c-ink); color:#fff; }

/* ---------- Table: clean ledger ---------- */
.table-responsive { border-radius: var(--radius); border: 1px solid var(--c-border); overflow: hidden; box-shadow: var(--shadow-sm); }
.table { margin-bottom: 0; --bs-table-bg: var(--c-surface); color: var(--c-ink); }
.table > thead { position: sticky; top: 0; z-index: 5; }
.table > thead th {
    background: var(--c-surface-2);
    color: var(--c-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-border);
    padding: .7rem .85rem;
    white-space: nowrap;
}
.table > tbody td { padding: .72rem .85rem; border-top: 1px solid var(--c-border-2); vertical-align: middle; }
.table.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: transparent; background: transparent; }
.table.table-hover > tbody > tr { transition: background-color .12s ease; }
.table.table-hover > tbody > tr:hover > * { background-color: rgba(79,70,229,.045); }
.table tfoot td { background: var(--c-surface-2); border-top: 2px solid var(--c-border); padding: .8rem .85rem; }
.table .fw-bold { font-weight: 600; }

/* Duplicate row de-emphasis */
tr:has(.badge-dup) > td { color: var(--c-muted); }
tr:has(.badge-dup) { background-image: repeating-linear-gradient(135deg, transparent 0 9px, rgba(138,99,16,.05) 9px 10px); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; border-radius: 7px; padding: .34em .6em; letter-spacing: .01em; }
.badge-A { background-color: var(--c-ok-bg);  color: var(--c-ok-ink); }
.badge-B { background-color: var(--c-warn-bg); color: var(--c-warn-ink); }
.badge-C { background-color: var(--c-bad-bg);  color: var(--c-bad-ink); }
.badge-dup { background-color: var(--c-warn-bg); color: var(--c-warn-ink); }

/* Status icons sizing */
.vat-ok  { color: var(--c-money); }
.vat-bad { color: #d1434b; }

/* ---------- Pagination ---------- */
.pagination { --bs-pagination-color: var(--c-ink-2); --bs-pagination-border-color: var(--c-border); --bs-pagination-border-radius: var(--radius-sm); gap: 4px; }
.pagination .page-link { border-radius: 8px !important; border: 1px solid var(--c-border); }
.pagination .page-item.active .page-link { background: var(--c-accent); border-color: var(--c-accent); }
.pagination .page-link:hover { background: var(--c-accent-soft); color: var(--c-accent-ink); }

/* ---------- Section header ---------- */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.page-head .eyebrow { font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
.page-head h1, .page-head .h4 { font-size:1.55rem; font-weight:700; margin:0; }

/* Toolbar chips row */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }

/* Empty state */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--c-muted); }
.empty-state .bi { font-size:2.4rem; opacity:.5; display:block; margin-bottom:.6rem; }

/* Helper */
.hint { color: var(--c-muted); font-size: .82rem; }
.divider-soft { height:1px; background:var(--c-border-2); border:0; margin: .25rem 0 1rem; }