/* ============================================================
   database-view.css — gaya tampilan database (Invoice & Mutasi), 21 Sep 2026.
   SEMUA kelas berawalan `dbv-` — halaman pembawa (invoice.html / batch.html) sudah punya
   .panel/.tab/.btn/.badge/.pill sendiri, jadi nama umum di sini akan tabrakan.
   Variabel warna mengikuti shared.css (dengan fallback) supaya tema ikut.
   ============================================================ */
.dbv { display: block; }
.dbv[hidden], .dbv [hidden] { display: none !important; }

.dbv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.dbv-head h2 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.dbv-sub { margin: 2px 0 0; font-size: .8rem; color: var(--text2, #637083); max-width: 80ch; }
.dbv-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.dbv-card { background: var(--surface, #fff); border: 1px solid var(--border, #e7e4ef); border-radius: 12px; padding: 14px 16px; margin: 12px 0; box-shadow: 0 1px 3px rgba(28,24,48,.05); }
.dbv-note { background: var(--accent-soft, #f5f1f9); border: 1px dashed var(--accent, #8b3cdd); border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: .82rem; color: var(--text2, #637083); }

/* ---- tombol (mandiri, tidak bergantung .btn halaman) ---- */
.dbv-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #e7e4ef); background: var(--surface, #fff); color: inherit; border-radius: 8px; padding: 7px 12px; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.dbv-btn:hover { border-color: var(--accent, #8b3cdd); color: var(--accent-text, #5921bc); }
.dbv-btn:disabled { opacity: .5; cursor: not-allowed; }
.dbv-btn-primary { background: var(--accent, #8b3cdd); border-color: var(--accent, #8b3cdd); color: #fff; }
.dbv-btn-primary:hover { color: #fff; filter: brightness(.94); }
.dbv-btn-danger { border-color: #b91c1c; color: #b91c1c; }
.dbv-btn-danger:hover { background: #fdeaea; border-color: #b91c1c; color: #b91c1c; }
.dbv-btn-sm { padding: 3px 8px; font-size: .74rem; }
.dbv-btn.is-on { background: var(--accent-soft, #f5f1f9); border-color: var(--accent, #8b3cdd); color: var(--accent-text, #5921bc); }

/* ---- banner editor-mode (permanen selama aktif) ---- */
.dbv-editbanner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #b45309; color: #fff; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: .86rem; font-weight: 600; position: sticky; top: 0; z-index: 30; }
.dbv-editbanner strong { font-weight: 800; letter-spacing: .02em; }
.dbv-editbanner .dbv-btn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); color: #fff; margin-left: auto; }

.dbv-editbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #f0c48a; margin: 10px 0; font-size: .84rem; }
.dbv-editbar .dbv-count { font-weight: 700; color: #92400e; }
.dbv-editbar .dbv-spacer { flex: 1; }

/* ---- menu ⋮ ---- */
.dbv-menu-wrap { position: relative; display: inline-block; }
.dbv-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; min-width: 230px; background: var(--surface, #fff); border: 1px solid var(--border, #e7e4ef); border-radius: 10px; box-shadow: 0 6px 24px rgba(28,24,48,.14); padding: 6px; }
.dbv-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; padding: 9px 10px; font: inherit; font-size: .84rem; font-weight: 600; color: inherit; border-radius: 7px; cursor: pointer; }
.dbv-menu-item:hover { background: var(--tint, #faf9fd); }

/* ---- filter ---- */
.dbv-toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dbv-fld { display: flex; flex-direction: column; gap: 4px; }
.dbv-fld label { font-size: .7rem; font-weight: 700; color: var(--text2, #637083); text-transform: uppercase; letter-spacing: .03em; }
.dbv-fld input, .dbv-fld select { padding: 7px 10px; border: 1px solid var(--border, #e7e4ef); border-radius: 7px; font-size: .84rem; background: var(--surface, #fff); color: inherit; font-family: inherit; }
.dbv-fld input[type="search"] { min-width: 220px; }
.dbv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.dbv-chip { appearance: none; border: 1px solid var(--border, #e7e4ef); background: var(--surface, #fff); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer; color: inherit; display: inline-flex; gap: 6px; align-items: center; }
.dbv-chip[aria-pressed="true"] { border-color: var(--accent, #8b3cdd); background: var(--accent-soft, #f5f1f9); }
.dbv-chip .n { font-size: .7rem; opacity: .75; }

/* ---- pill status ---- */
.dbv-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.dbv-pill-paid { background: var(--success-soft, #e6f6ec); color: var(--green-text, #12703a); }
.dbv-pill-partial { background: #fdf0dc; color: #8a5a08; }
.dbv-pill-not_yet { background: var(--danger-soft, #fdeaea); color: #b91c1c; }
.dbv-pill-reversed { background: #eceafd; color: #4433a8; }
.dbv-pill-unknown { background: #eef0f4; color: #5c6673; }
.dbv-tag { display: inline-flex; align-items: center; font-size: .64rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-left: 5px; white-space: nowrap; }
.dbv-tag-unsaved { background: #eef4fd; color: #1f4e8c; border: 1px dashed #1f4e8c; }
.dbv-tag-noodoo { background: #fdf4e3; color: #8a5a08; border: 1px dashed #b8860b; }
.dbv-tag-manual { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.dbv-tag-sandbox { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.dbv-tag-edited { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.dbv-tag-locked { background: #f1f2f6; color: #4b5563; border: 1px solid #cbd5e1; cursor: help; }
.dbv-tag-dei { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; margin-left: 0; margin-right: 6px; }
.dbv-tag-dpi { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; margin-left: 0; margin-right: 6px; }
.dbv-tag-warn { background: rgba(234, 179, 8, 0.12); color: #8b4f18; border: 1px solid rgba(234, 179, 8, 0.35); cursor: help; }
/* reconcile-lab-save-invoice-sync — invoice yang sudah di-Save sebagai match di Reconcile Lab */
.dbv-tag-reconciled { background: rgba(28, 115, 67, 0.1); color: #1c7343; border: 1px solid rgba(28, 115, 67, 0.35); }
.dbv-src { font-size: .64rem; color: var(--text-subtle, #8a93a0); margin-left: 5px; white-space: nowrap; }

/* ---- ringkasan ---- */
.dbv-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.dbv-stat { flex: 1 1 140px; border: 1px solid var(--border, #e7e4ef); border-radius: 9px; padding: 9px 12px; }
.dbv-stat .k { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text2, #637083); font-weight: 700; }
.dbv-stat .v { font-size: 1.1rem; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dbv-stat .s { font-size: .7rem; color: var(--text-subtle, #8a93a0); }

/* ---- pesan ---- */
.dbv-msg-box { margin: 10px 0; padding: 10px 14px; border-radius: 8px; font-size: .84rem; }
.dbv-msg-box.ok { background: var(--success-soft, #e6f6ec); color: var(--green-text, #12703a); }
.dbv-msg-box.err { background: var(--danger-soft, #fdeaea); color: #b91c1c; }
.dbv-msg-box.info { background: #eef4fd; color: #1f4e8c; }
.dbv-msg-box.warn { background: #fdf4e3; color: #8a5a08; }
.dbv-empty { text-align: center; padding: 36px 20px; color: var(--text2, #637083); font-size: .86rem; }
.dbv-snapinfo { font-size: .76rem; color: var(--text2, #637083); margin: 6px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---- grup dokumen + tabel ---- */
.dbv-doc { border: 1px solid var(--border, #e7e4ef); border-radius: 10px; margin: 10px 0; overflow: hidden; }
.dbv-doc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #faf9fd; cursor: pointer; user-select: none; flex-wrap: wrap; }
.dbv-doc-head:hover { background: #f4f2fa; }
.dbv-caret { transition: transform .15s; color: var(--text2, #637083); display: flex; }
.dbv-doc.open .dbv-caret { transform: rotate(90deg); }
.dbv-doc-title { font-weight: 700; font-size: .84rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dbv-doc-meta { font-size: .74rem; color: var(--text2, #637083); }
.dbv-doc-badges { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.dbv-doc-body { display: none; padding: 0 6px 6px; }
.dbv-doc.open .dbv-doc-body { display: block; }
.dbv-tbl-wrap { overflow-x: auto; margin-top: 8px; }
table.dbv-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.dbv-tbl th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text2, #637083); padding: 7px 8px; border-bottom: 1px solid var(--border, #e7e4ef); white-space: nowrap; }
table.dbv-tbl td { padding: 6px 8px; border-bottom: 1px solid #f2f0f7; vertical-align: middle; }
table.dbv-tbl tbody tr:hover { background: #faf9fd; }
table.dbv-tbl tr.dbv-dirty { background: #fffbeb; }
table.dbv-tbl tr.dbv-dirty:hover { background: #fef3c7; }
.dbv-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; }
td.dbv-edited { background: #fff7ed; box-shadow: inset 3px 0 0 #f59e0b; }

/* ---- sel yang bisa diedit ---- */
.dbv-in { width: 100%; min-width: 80px; padding: 4px 6px; border: 1px solid #f0c48a; border-radius: 6px; font: inherit; font-size: .8rem; background: #fffdf7; color: inherit; }
.dbv-in.dbv-in-num { text-align: right; min-width: 100px; }
.dbv-in.dbv-in-wide { min-width: 200px; }
.dbv-in:focus { outline: 2px solid var(--accent, #8b3cdd); outline-offset: 0; }
.dbv-in.dbv-invalid { border-color: #b91c1c; background: #fdeaea; }

/* ---- dialog tambah invoice manual ---- */
.dbv-overlay { position: fixed; inset: 0; background: rgba(15,10,25,.52); z-index: 11000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dbv-overlay[hidden] { display: none; }
.dbv-dialog { background: var(--surface, #fff); color: var(--text, #161d27); border-radius: 12px; max-width: 560px; width: 100%; padding: 20px 22px; box-shadow: 0 12px 32px -4px rgba(22,29,39,.3); border-top: 4px solid var(--accent, #8b3cdd); max-height: 88vh; overflow-y: auto; }
.dbv-dialog h3 { margin: 0 0 4px; font-size: 1rem; }
.dbv-dialog p.hint { margin: 0 0 12px; font-size: .78rem; color: var(--text2, #637083); }
.dbv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.dbv-form .full { grid-column: 1 / -1; }
.dbv-form .dbv-fld input, .dbv-form .dbv-fld select { width: 100%; box-sizing: border-box; }
.dbv-err { color: #b91c1c; font-size: .72rem; min-height: 1em; }
.dbv-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

@media (max-width: 640px) {
  .dbv-fld input[type="search"] { min-width: 140px; }
  .dbv-form { grid-template-columns: 1fr; }
}

/* ---- push massal (§4.1/4.2) ---- */
.dbv-bulk-summary { font-size: .84rem; margin-bottom: 10px; }
.dbv-bulk-progress { margin: 10px 0; }
.dbv-bulk-progress-label { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600; color: var(--text2, #637083); margin-bottom: 4px; }
.dbv-bulk-progress-track { height: 8px; border-radius: 999px; background: var(--border, #e7e4ef); overflow: hidden; }
.dbv-bulk-progress-fill { height: 100%; background: var(--accent, #8b3cdd); transition: width .2s ease; }
.dbv-bulk-counters { display: flex; gap: 14px; font-size: .78rem; font-weight: 700; margin-top: 6px; }
.dbv-bulk-counters .ok { color: #12703a; }
.dbv-bulk-counters .skip { color: #8a5a08; }
.dbv-bulk-counters .fail { color: #b91c1c; }
.dbv-bulk-log { max-height: 220px; overflow-y: auto; background: #faf9fc; border: 1px solid var(--border, #e7e4ef); border-radius: 8px; padding: 8px 10px; font-family: ui-monospace, monospace; font-size: .74rem; margin-top: 8px; }
.dbv-bulk-log-empty { color: var(--text2, #637083); }
.dbv-bulk-log .line { display: block; padding: 1px 0; }
.dbv-bulk-log .line-ok { color: #12703a; }
.dbv-bulk-log .line-skip { color: #8a5a08; }
.dbv-bulk-log .line-fail { color: #b91c1c; }
.dbv-bulk-log .line-info { color: var(--text2, #637083); }

/* ---- Draft/Post + baris baru (change invoice-tambah-invoice-simplify) ---- */
.dbv-tag-draft { background: #f1f2f6; color: #4b5563; border: 1px dashed #94a3b8; margin-left: 0; margin-right: 6px; }
.dbv-tag-post { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; margin-left: 0; margin-right: 6px; }
table.dbv-tbl tr.dbv-row-draft td { color: #6b7280; }
table.dbv-tbl tr.dbv-new { background: #ede9fe; transition: background 1.2s ease; }

/* ---- Kontrol dua sisi [Draft|Post] (revisi 24 Sep §10.5) ---- */
.dbv-seg-wrap { display: inline-flex; border: 1px solid #d7d3e0; border-radius: 999px; overflow: hidden; font-size: .66rem; font-weight: 800; vertical-align: middle; line-height: 1.4; }
.dbv-seg { padding: 3px 9px; border: 0; background: #fff; color: #9ca3af; cursor: default; font: inherit; }
.dbv-seg-wrap .dbv-seg:first-child { border-right: 1px solid #d7d3e0; }
.dbv-seg-active:first-child { background: #f1f2f6; color: #4b5563; }
.dbv-seg-active:last-child { background: #ecfdf5; color: #065f46; }
.dbv-seg-btn { cursor: pointer; color: var(--accent, #8b3cdd); }
.dbv-seg-btn:hover { background: #f3effb; }
.dbv-seg-locked { color: #b0aab8; cursor: not-allowed; }
.dbv-seg-ro { color: #d8d4e0; }
table.dbv-tbl tr.dbv-new:hover { background: #e4dcfb; }