/* ============================================================================
   KERJACERDAS — COMPONENT LIBRARY
   Buttons · Badges · Cards · Tables · Filters · Modals · Evidence · Toast
   ========================================================================== */

/* ------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:hover { background: var(--surface-alt); border-color: var(--neutral); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--surface); border-color: var(--line-strong); }

.btn-primary { background: var(--dlkl-green-800); border-color: var(--dlkl-green-800); color: var(--ink-invert); box-shadow: var(--sh-1); }
.btn-primary:hover { background: var(--dlkl-green-700); border-color: var(--dlkl-green-700); }
.btn-gold { background: var(--biscuit); border-color: #B08F60; color: var(--dlkl-green-900); font-weight: 600; }
.btn-gold:hover { background: #B99765; border-color: #9C7F52; }
.btn-danger { background: var(--alert); border-color: #C33F2C; color: #fff; }
.btn-danger:hover { background: #C94733; }
.btn-ok { background: var(--ok); border-color: #256B4C; color: #fff; }
.btn-ok:hover { background: #256B4C; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.btn-ghost:hover { background: var(--neutral-soft); border-color: transparent; color: var(--ink); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: var(--r-sm); }
.btn-sm svg { width: 13px; height: 13px; }
.btn-icon { width: 38px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }

/* -------------------------------------------------------------- BADGES */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }
.badge.no-dot::before { display: none; }
.badge-ok      { background: var(--ok-soft);      color: #1F5E42; border-color: #BFDDCE; }
.badge-warn    { background: var(--warn-soft);    color: #8A5F0B; border-color: #EBD5A3; }
.badge-alert   { background: var(--alert-soft);   color: #B03824; border-color: #F3C6BC; }
.badge-info    { background: var(--info-soft);    color: #245779; border-color: #BFD8E9; }
.badge-neutral { background: var(--neutral-soft); color: #575047; border-color: #DCD4C7; }
.badge-gold    { background: var(--biscuit-tint); color: #7A5F30; border-color: var(--biscuit-soft); }

/* Lencana yang berfungsi sebagai tautan. Dipakai status "Review Barang" pada
   daftar Purchase Request: menuju barang yang menahan PR itu. */
/* Ikon kecil di dalam baris keterangan — dipakai nama pemasok pada baris PR. */
.cell-sub svg {
  width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8;
  vertical-align: -2px; margin-right: 4px;
}

/* Nomor dokumen yang berfungsi sebagai tautan penyaring. */
.docid-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.docid-link:hover { color: var(--info); }
.docid-link:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* Judul kelompok pemasok pada layar penerbitan PO. Nama pemasok ditulis apa
   adanya — bukan huruf besar semua seperti .section-label — karena ia nama
   toko yang dibaca orang, bukan label bagian. */
.po-group {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 18px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line-strong);
}
.po-group svg {
  width: 14px; height: 14px; flex: 0 0 14px; align-self: center;
  stroke: var(--ink-muted); fill: none; stroke-width: 1.8;
}
.po-group-nama { font-weight: 600; font-size: 13.5px; }
.po-group-sub  { font-size: 11.5px; color: var(--ink-faint); }

.badge-link { cursor: pointer; transition: filter var(--t-fast, .15s); }
.badge-link:hover { filter: brightness(.94); text-decoration: underline; }
.badge-link:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.badge-link b { font-weight: 700; margin-left: 1px; }

.badge-hold {
  background: var(--alert); color: #fff; border-color: #C33F2C;
  animation: holdPulse 2.4s ease-in-out infinite;
}
@keyframes holdPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 78, 57, .38); }
  55%      { box-shadow: 0 0 0 5px rgba(224, 78, 57, 0); }
}
.chan {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  color: var(--ink-muted);
}
.chan svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.chan-tg { background: var(--info-soft); border-color: #BFD8E9; color: #245779; }
.chan-web { background: var(--biscuit-tint); border-color: var(--biscuit-soft); color: #7A5F30; }

/* --------------------------------------------------------------- CARDS */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-alt);
}
.card-head h3 { font-size: 14px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.card-head .hint { font-size: 11.5px; color: var(--ink-faint); }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }

/* KPI tile */
.kpi {
  position: relative;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  cursor: default;
}
.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.kpi::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--biscuit);
}
.kpi.k-alert::after { background: var(--alert); }
.kpi.k-warn::after  { background: var(--warn); }
.kpi.k-ok::after    { background: var(--ok); }
.kpi.k-info::after  { background: var(--info); }
.kpi-label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.kpi-val { font-family: var(--font-display); font-size: 27px; line-height: 1.1; font-weight: 600; }
.kpi-val small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.kpi-foot { margin-top: 6px; font-size: 11.5px; color: var(--ink-muted); }

/* ------------------------------------------------------------- FILTERS */
.filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  box-shadow: var(--sh-1);
}
.search {
  position: relative; flex: 1 1 260px; min-width: 180px;
}
.search svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--ink-faint); fill: none; stroke-width: 1.8;
  pointer-events: none;
}
.search input {
  width: 100%; height: 38px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  font-size: 13px;
}
.search input:focus { background: var(--surface); outline-offset: 0; }
.field {
  height: 38px; padding: 0 30px 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-alt) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6660' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  font-size: 13px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
input.field { background-image: none; padding-right: 11px; cursor: text; }
.filter-spacer { flex: 1 1 auto; }
.chipline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 10px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 12px; cursor: pointer;
  transition: all var(--t-fast);
}
.chip:hover { border-color: var(--neutral); }
.chip.on { background: var(--dlkl-green-800); border-color: var(--dlkl-green-800); color: var(--ink-invert); }
.chip .n {
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 0 5px; border-radius: 4px;
  background: var(--neutral-soft); color: var(--ink-muted);
}
.chip.on .n { background: rgba(255,255,255,.16); color: var(--biscuit-soft); }

/* -------------------------------------------------------------- TABLES */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { font-size: 13px; min-width: 780px; }
table.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-alt);
  text-align: left;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.tbl thead th.sortable { cursor: pointer; user-select: none; }
table.tbl thead th.sortable:hover { color: var(--ink); }
table.tbl thead th .caret { opacity: .35; margin-left: 3px; }
table.tbl thead th.sorted .caret { opacity: 1; color: var(--biscuit); }
table.tbl tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.tbl tbody tr { transition: background var(--t-fast); }
table.tbl tbody tr:hover { background: var(--biscuit-tint); }
table.tbl tbody tr.row-hold { background: rgba(224, 78, 57, .05); }
table.tbl tbody tr.row-hold:hover { background: rgba(224, 78, 57, .1); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.acts { text-align: right; white-space: nowrap; }
.cell-title { font-weight: 600; }
.cell-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.docid { font-family: var(--font-mono); font-size: 12px; color: var(--dlkl-green-700); font-weight: 500; }

.tbl-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  font-size: 12.5px; color: var(--ink-muted);
}
.pager { display: flex; gap: 4px; margin-left: auto; }

.empty { padding: 46px 20px; text-align: center; color: var(--ink-faint); }
.empty svg { width: 40px; height: 40px; stroke: var(--line-strong); fill: none; stroke-width: 1.4; margin-bottom: 10px; }
.empty h4 { font-size: 14px; color: var(--ink-muted); margin-bottom: 4px; }

/* Progress meter (3-way match / stock level) */
.meter { height: 6px; border-radius: 99px; background: var(--neutral-soft); overflow: hidden; min-width: 70px; }
.meter > span { display: block; height: 100%; border-radius: 99px; background: var(--ok); transition: width var(--t-med); }
.meter.m-warn > span  { background: var(--warn); }
.meter.m-alert > span { background: var(--alert); }

/* -------------------------------------------------------------- MODALS */
.modal-root {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(10, 31, 26, .55);
  backdrop-filter: blur(3px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-med);
}
.modal-root.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 720px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
  transform: translateY(12px) scale(.985);
  transition: transform var(--t-med);
}
.modal-root.open .modal { transform: none; }
.modal.wide { max-width: 1040px; }
.modal.narrow { max-width: 460px; }

.modal-head {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--dlkl-green-800);
  color: var(--ink-invert);
}
.modal-head .mh-txt { flex: 1 1 auto; min-width: 0; }
.modal-head h3 { font-family: var(--font-display); font-size: 19px; }
.modal-head .mh-sub { font-size: 12px; color: var(--biscuit); margin-top: 2px; }
.modal-close {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--ink-invert);
  display: grid; place-items: center; cursor: pointer;
}
.modal-close:hover { background: rgba(255,255,255,.14); }
.modal-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

.modal-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.modal-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
}
.modal-foot .spacer { flex: 1 1 auto; }

/* Definition rows */
.dl { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 8px 14px; font-size: 13px; }
.dl dt { color: var(--ink-faint); font-size: 12px; padding-top: 1px; }
.dl dd { margin: 0; font-weight: 500; }
.section-label {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  margin: 20px 0 9px;
  display: flex; align-items: center; gap: 8px;
}
.section-label::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.section-label:first-child { margin-top: 0; }

label.lbl { display: block; font-size: 12px; color: var(--ink-muted); margin-bottom: 5px; font-weight: 500; }
textarea.field, input.field, select.field { width: 100%; }
textarea.field { height: auto; min-height: 84px; padding: 9px 11px; resize: vertical; line-height: 1.5; font-family: inherit; }

/* Telegram-style raw chat bubble (AI ground truth) */
.tg-quote {
  border-left: 3px solid var(--info);
  background: var(--info-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 11px 13px;
  font-size: 13px;
}
.tg-quote .tg-meta {
  font-size: 11px; color: #245779; font-weight: 600;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.tg-quote .tg-text { font-style: italic; color: var(--ink); }

/* AI parse trace */
.parse-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.parse-row:last-child { border-bottom: 0; }
.parse-raw { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); }
.parse-arrow { color: var(--biscuit); flex: 0 0 auto; }
.conf {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 6px; border-radius: 4px;
  background: var(--ok-soft); color: #1F5E42;
}
.conf.low { background: var(--warn-soft); color: #8A5F0B; }

/* ----------------------------------------------------- EVIDENCE VIEWER */
.evidence-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ev-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-alt);
}
.ev-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px; font-weight: 600;
}
.ev-head .tag {
  margin-left: auto;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.ev-photo {
  display: block; width: 100%; height: auto;
  background: #E9E2D6;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ev-foot { padding: 9px 11px; font-size: 11.5px; color: var(--ink-muted); }

.match-line {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,.62fr)) minmax(0,.85fr) minmax(0,.95fr) auto;
  gap: 8px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.match-line.head {
  border-bottom: 1px solid var(--line-strong);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.match-line.head > * { padding-bottom: 2px; }
.match-line:last-child { border-bottom: 0; }
/* Tombol baris dikelompokkan pada satu sel supaya tetap berada di barisnya
   sendiri; sebelum ini tombolnya terlempar ke baris grid berikutnya. */
.match-acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.delta-neg { color: var(--alert); font-weight: 600; }
.delta-ok  { color: var(--ok); font-weight: 600; }

/* --------------------------------------------------- EDITOR ALIAS BERULANG */
.alias-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; align-items: center;
  padding: 4px 0;
}

/* ------------------------------------------------- EDITOR PEMASOK BERULANG */
/* Nama melebar, harga tetap, penanda utama dan tombol hapus sekecil isinya —
   sehingga menambah baris tidak menggeser tata letak kolomnya. */
.sup-head, .sup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto auto;
  gap: 8px; align-items: center;
}
.sup-head {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
  padding-bottom: 4px; margin-top: 4px;
  border-bottom: 1px solid var(--line);
}
.sup-row { padding: 6px 0; }
.sup-row + .sup-row { border-top: 1px dashed var(--line); }
.sup-utama {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-muted); white-space: nowrap;
  cursor: pointer;
}
.sup-utama input { cursor: pointer; }
@media (max-width: 720px) {
  .sup-head { display: none; }
  .sup-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
}

/* --------------------------------------------------------- TIMELINE */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.tl-item { position: relative; padding-bottom: 15px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -21px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
}
.tl-item.done::before { background: var(--ok); border-color: var(--ok); }
.tl-item.hold::before { background: var(--alert); border-color: var(--alert); }
.tl-item.now::before  { background: var(--biscuit); border-color: var(--biscuit); box-shadow: 0 0 0 3px var(--biscuit-tint); }
.tl-title { font-size: 13px; font-weight: 600; }
.tl-meta { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }

/* ------------------------------------------------------------- BANNERS */
.banner {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  font-size: 12.5px;
}
.banner svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: currentColor; fill: none; stroke-width: 1.8; margin-top: 1px; }
.banner strong { display: block; margin-bottom: 2px; font-size: 13px; }
.banner-alert { background: var(--alert-soft); border-color: #F3C6BC; color: #8E2F1E; }
.banner-warn  { background: var(--warn-soft);  border-color: #EBD5A3; color: #7A5409; }
.banner-info  { background: var(--info-soft);  border-color: #BFD8E9; color: #245779; }
.banner-ok    { background: var(--ok-soft);    border-color: #BFDDCE; color: #1F5E42; }

/* --------------------------------------------------------------- TOAST */
#toast-rail {
  position: fixed; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 9px;
  z-index: 300; pointer-events: none;
  max-width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--dlkl-green-800);
  color: var(--ink-invert);
  box-shadow: var(--sh-3);
  font-size: 13px;
  pointer-events: auto;
  animation: toastIn 240ms cubic-bezier(.2,.9,.3,1.2);
  border-left: 3px solid var(--biscuit);
}
.toast.t-ok    { border-left-color: #6FD6A6; }
.toast.t-alert { border-left-color: var(--alert); }
.toast.out { animation: toastOut 200ms ease forwards; }
.toast strong { display: block; font-size: 12.5px; margin-bottom: 1px; }
.toast .tmsg { color: rgba(247,243,236,.82); font-size: 12px; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(20px); } }

/* --------------------------------------------------------- MINI CHARTS */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 116px; padding-top: 8px; }
.bars .b { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.bars .b i {
  display: block; width: 100%; max-width: 34px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--dlkl-green-600), var(--dlkl-green-800));
  transition: height var(--t-med);
}
.bars .b.hi i { background: linear-gradient(180deg, var(--biscuit), #A9884F); }
.bars .b span { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }

/* Batang bertingkat: porsi non-kas digambar di dalam batang penjualan yang
   sama, karena bahannya memang keluar lewat penjualan itu — bukan tambahan
   di sebelahnya. */
.bars .b i { position: relative; overflow: hidden; }
.bars .b i em {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  background: linear-gradient(180deg, var(--warn), #C99A2E);
}

/* Sepasang batang dalam satu kelompok: penjualan dan belanja bersebelahan. */
.bars .b .duo {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; width: 100%; height: 100%;
}
.bars .b .duo i { max-width: 15px; }
.bars .b .duo i.alt { background: linear-gradient(180deg, var(--biscuit), #A9884F); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.split-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.split-list li:last-child { border-bottom: 0; }
.split-list .sl-main { flex: 1 1 auto; min-width: 0; }
.split-list .sl-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-list .sl-sub { font-size: 11.5px; color: var(--ink-faint); }

/* ---------------------------------------------- LAPORAN LABA RUGI (P&L) */
/* Empat tingkat baris mengikuti bentuk laporan rujukan: SEKSI dan HASIL rata
   kiri huruf besar, GRUP menjorok sedikit, AKUN menjorok penuh, SUBTOTAL rata
   kiri bergaris. Indentasi memakai padding pada sel pertama, bukan spasi,
   supaya tetap benar saat teksnya membungkus ke baris berikutnya. */
.pnl-kop { text-align: center; padding: 18px 16px 10px; }
.pnl-kop-1 { font-weight: 700; font-size: 15px; }
.pnl-kop-2 { font-size: 13.5px; margin-top: 2px; }
.pnl-kop-3 { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.pnl-kaki {
  text-align: center; font-size: 11.5px; color: var(--ink-faint);
  padding: 12px 16px 16px; border-top: 1px solid var(--line);
}

.pnl-tbl td { vertical-align: top; }
.pnl-tbl tr.pnl-seksi > td {
  font-weight: 700; letter-spacing: .02em;
  background: var(--card-subtle); padding-top: 12px;
}
.pnl-tbl tr.pnl-grup > td:first-child { padding-left: 22px; font-weight: 600; }
.pnl-tbl tr.pnl-akun > td:first-child { padding-left: 44px; }
.pnl-tbl tr.pnl-subtotal > td {
  font-weight: 600; border-top: 1px solid var(--line-strong);
}
.pnl-tbl tr.pnl-hasil > td {
  font-weight: 800;
  border-top: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
}
/* Huruf besar hanya pada kolom keterangan. Menerapkannya ke seluruh baris
   mengubah "Rp" menjadi "RP" pada kolom nilai. */
.pnl-tbl tr.pnl-hasil > td:first-child,
.pnl-tbl tr.pnl-seksi > td:first-child { text-transform: uppercase; }
/* Keterangan kecil di bawah label tetap huruf biasa — ia kalimat, bukan judul. */
.pnl-tbl .cell-sub { text-transform: none; font-weight: 400; }

/* ------------------------------------------------------------ PRINT/PDF */
@media print {
  .sidebar, .topbar, .filterbar, .chipline, .modal-root, #toast-rail, .page-head .acts { display: none !important; }
  .app-shell { display: block; height: auto; }
  .content { overflow: visible; padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }

  /* Laporan laba rugi dicetak sebagai dokumen utuh: kartu KPI, judul halaman,
     dan spanduk tidak ikut: yang diserahkan ke Finance adalah laporannya,
     bukan tangkapan layar antarmuka. */
  body:has(#pnl-laporan) .page-head,
  body:has(#pnl-laporan) .grid.grid-4,
  body:has(#pnl-laporan) .banner { display: none !important; }
  #pnl-laporan { border: 0; }
  #pnl-laporan .card-head { display: none; }
  #pnl-laporan .table-wrap { overflow: visible; }
  /* Kepala kolom diulang pada tiap halaman — perilaku bawaan <thead> saat
     tabelnya tidak dipaksa break-inside: avoid. */
  #pnl-laporan .pnl-tbl { break-inside: auto; font-size: 11.5px; }
  #pnl-laporan .pnl-tbl thead { display: table-header-group; }
  #pnl-laporan .pnl-tbl tr { break-inside: avoid; }
  @page { margin: 14mm 12mm; }
}

@media (max-width: 768px) {
  .evidence-pair { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; gap: 3px 0; }
  .dl dd { margin-bottom: 8px; }
  .modal { max-height: calc(100vh - 24px); }
  .match-line { grid-template-columns: 1fr 1fr; row-gap: 2px; }
  .match-line.head { display: none; }
}

/* ------------------------------------------------- RESPONSIVE UTILITIES */
@media (max-width: 1180px) {
  .hide-sm { display: none; }
  #btn-export-top { width: 38px; padding: 0; }
}
@media (max-width: 560px) {
  .topbar-tools .date-pill { display: none; }
  .scope-pill { padding: 0 8px; gap: 6px; }
  .scope-pill select { max-width: 88px; font-size: 12px; }
  .page-id h1 { font-size: 15px; }
  .page-head h2 { font-size: 19px; }
}

/* --------------------------- INLINE ICON SIZING (di luar tombol & badge) */
.tg-meta svg,
.ev-head svg,
.split-list svg,
.tl-title svg,
.section-label svg {
  width: 13px; height: 13px;
  flex: 0 0 13px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -2px;
}

/* ============================================================ LAYAR LOGIN */
#login-screen {
  position: fixed; inset: 0; z-index: 400;
  display: none; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(199,167,123,.16), transparent 60%),
    var(--dlkl-green-900);
  overflow-y: auto;
}
body.logged-out #login-screen { display: grid; }
body.logged-out .app-shell { display: none; }

.login-card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 30px 30px 24px;
}
.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.login-name { font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.login-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

#login-form .field { width: 100%; }
.login-submit { width: 100%; margin-top: 20px; height: 42px; }
.login-forgot { width: 100%; margin-top: 6px; font-size: 12.5px; }

.login-msg {
  margin-top: 14px; padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--alert-soft); border: 1px solid #F3C6BC;
  color: #8E2F1E; font-size: 12.5px; line-height: 1.5;
}
.login-msg.ok { background: var(--ok-soft); border-color: #BFDDCE; color: #1F5E42; }

.login-demo { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.login-demo-h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
}
.login-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.login-demo-grid button {
  text-align: left; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-alt); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.login-demo-grid button:hover { border-color: var(--biscuit); background: var(--biscuit-tint); }
.login-demo-grid b { display: block; font-size: 12px; font-weight: 600; }
.login-demo-grid span { font-size: 10.5px; color: var(--ink-faint); }

/* ------------------------------------- PENDAFTARAN TENANT DI HALAMAN MASUK */
/* Panel terlipat, bukan formulir yang selalu terbuka: yang datang ke halaman
   ini hampir selalu hendak masuk, bukan mendaftar. Membiarkannya terbuka
   mendorong kartu masuk turun keluar layar pada laptop 13 inci. */
.daftar-tenant { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.daftar-toggle {
  width: 100%; text-align: center; font-size: 12.5px; padding: 8px;
  color: var(--ink-soft);
}
.daftar-toggle b { color: var(--brand); }
.daftar-panel { margin-top: 12px; }
.daftar-lede { font-size: 12px; color: var(--ink-faint); margin-bottom: 14px; line-height: 1.5; }
.daftar-kontak { display: grid; grid-template-columns: 116px 1fr; gap: 8px; }
.daftar-kirim { width: 100%; margin-top: 16px; }
.daftar-kaki {
  font-size: 11.5px; color: var(--ink-faint); margin-top: 10px;
  line-height: 1.5; text-align: center;
}
.daftar-panel .req { color: var(--alert); }

/* tombol keluar di footer sidebar */
.who-out {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm);
  background: transparent; color: rgba(247,243,236,.7);
  cursor: pointer; transition: all var(--t-fast);
}
.who-out:hover { background: rgba(224,78,57,.22); border-color: var(--alert); color: #fff; }
@media (max-width: 1024px) { .who-out { display: none; } }
@media (max-width: 768px)  { .who-out { display: grid; } }

/* ------------------------------------------------- PITCHING VENDOR (PR) --
   Perbandingan pemasok pada pop-up approval. Tiap kandidat adalah satu baris
   yang dapat dipilih; yang terpilih diberi latar dan garis tegas supaya
   keputusannya terbaca sekilas tanpa mencari tombol radio yang kecil. */
.pitch-baris {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--surface-alt);
}
.pitch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-strong);
  margin-bottom: 8px;
}
.pitch-list { display: flex; flex-direction: column; gap: 6px; }

.pitch-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.pitch-opt:hover { border-color: var(--line-strong); }
.pitch-opt.dipilih {
  border-color: var(--dlkl-green-600);
  background: var(--ok-soft);
  box-shadow: inset 3px 0 0 var(--dlkl-green-700);
}
/* Penawaran yang barangnya kosong tetap ditampilkan — ketiadaan stok pada
   pemasok itu sendiri adalah informasi — tetapi tidak dapat dipilih. */
.pitch-opt.habis { opacity: .55; cursor: not-allowed; }
.pitch-opt input[type="radio"] { margin-top: 3px; flex: 0 0 auto; }
.pitch-nama { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.pitch-harga {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 120px;
}
@media (max-width: 640px) {
  .pitch-head { flex-direction: column; }
  .pitch-opt { flex-wrap: wrap; }
  .pitch-harga { min-width: 0; text-align: left; padding-left: 26px; }
}

/* ------------------------------------------- PEMILIH JUMLAH BARIS TABEL --
   Ditempatkan di kaki tabel bersama pagination: keduanya menjawab pertanyaan
   yang sama — seberapa banyak yang ingin dilihat sekaligus. */
/* Penyaring dropdown di dalam .filterbar. Dipakai ketika daftar pilihan
   terlalu panjang untuk chip — katalog barang punya puluhan kategori, dan
   sebagai chip ia membungkus jadi lima baris di atas tabel. */
.filter-select {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-muted);
  flex: 0 1 auto; min-width: 0;
}
.filter-select label { font-weight: 500; white-space: nowrap; }
.filter-select select {
  /* Nama kategori panjang ("Sayur & Bahan Segar Pasar"); dibiarkan melar
     sampai batas, lalu dipotong dengan elipsis alih-alih memaksa bilah
     penyaring membungkus. */
  max-width: 320px; min-width: 190px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit; font-size: 12.5px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.filter-select select:hover { border-color: var(--biscuit); }
.filter-select select:focus-visible {
  outline: 2px solid var(--dlkl-green-600); outline-offset: 1px;
}
@media (max-width: 720px) {
  .filter-select { width: 100%; }
  .filter-select select { flex: 1 1 auto; max-width: none; }
}

.tbl-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  font-size: 12.5px;
  color: var(--ink-muted);
}
.tbl-size label { font-weight: 500; }
.tbl-size select {
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.tbl-size select:focus-visible { outline: 2px solid var(--dlkl-green-600); outline-offset: 1px; }
/* Jeda pada deret nomor halaman yang dipadatkan. */
.pager-gap { padding: 0 4px; color: var(--ink-faint); user-select: none; }
@media (max-width: 640px) {
  .tbl-size { margin-left: 0; width: 100%; }
}