/* ==========================================================================
   Laporan Impor - monitoring view
   ========================================================================== */

/* This page stacks more sections (summary, cross-month search, month tabs,
   list) than the landing page, so main.css's 28/36px section gap reads as
   too much air here — tighten it just for this page. */
.content {
  gap: 14px;
}

/* Hero summary: same larger/bolder treatment as Laporan Freelance's
   #freelance-summary override, so both hero cards read the same way. */
#impor-summary .metric-chip-value {
  font-size: 1.3rem;
}

/* Total Order is always a short count; Nominal Belum Tiba is a full rupiah
   figure that needs the room — an even 50/50 split (the shared .metric-grid
   default) starved it. Giving it most of the width keeps it on one line
   instead of wrapping mid-number. */
#impor-summary {
  grid-template-columns: 1fr 2.5fr;
}

@media (max-width: 640px) {
  #impor-summary .metric-chip-value {
    font-size: 1.02rem;
  }
}

@media (min-width: 860px) {
  .content {
    gap: 18px;
    padding-top: 24px;
  }

  #impor-summary .metric-chip,
  #po-summary .metric-chip {
    padding: 14px 18px;
  }
}

/* ==========================================================================
   Confirm dialog — centered, replacing the browser's native confirm()
   which anchors to the top of the window instead.
   ========================================================================== */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15,15,20,0);
  transition: background-color .18s ease;
}

.confirm-overlay.show {
  background: rgba(15,15,20,.45);
}

.confirm-modal {
  width: 100%;
  max-width: 340px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 20px 50px -12px rgba(20,20,26,.4);
  transform: scale(.94);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.confirm-overlay.show .confirm-modal {
  transform: scale(1);
  opacity: 1;
}

/* Wider shell for forms with many fields (order/PO creation) — the plain
   .confirm-modal stays 340px for short dialogs like confirm/choice/Kas's
   simpler add-entry popup. */
.confirm-modal--wide {
  max-width: 480px;
}

/* Wider still, for the export preview table — wide enough for a real
   spreadsheet-like view, capped by the viewport on small screens. */
.confirm-modal--export {
  max-width: min(900px, 95vw);
}

.export-preview-scroll {
  overflow: auto;
  max-height: 50vh;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* A table embedded directly on the page (not inside a modal) grows to its
   full height and scrolls DOWN with the page, instead of being boxed into
   its own capped-height area with a second vertical scrollbar — that inner
   scrollbar leaves too little usable height on a phone.
   Sideways is the opposite: the table is wider than a phone screen, and
   letting that overflow reach the page would drag the app bar, sidebar and
   everything else off-screen with it. So horizontal scrolling stays
   contained here, and only the table slides.
   (Setting one axis to auto forces the other to compute as auto too, which
   is harmless: with no max-height the box always grows to fit its rows, so
   the vertical scrollbar never has anything to scroll.) */
.export-preview-scroll--page {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

/* The header's sticky-on-scroll only made sense pinned to the inner
   scroll box above — with that box gone, "top: 0" would instead stick it
   to the very top of the whole page and fight the app bar for the same
   spot. */
.export-preview-scroll--page .export-preview-table thead th {
  position: static;
}

.export-preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.78rem;
  white-space: nowrap;
}

.export-preview-table th,
.export-preview-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.export-preview-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.export-preview-table tbody tr:last-child td {
  border-bottom: none;
}

/* Row-select highlight for tables used as an editable ledger (Laporan
   Bulanan) instead of the card list every other ledger uses. */
.export-preview-table tr.row-selected td {
  background: #FFF5F5;
}

/* Fullscreen variant — for a dense "see everything at once" preview
   (Laporan Bulanan), as opposed to the export preview's capped-height
   modal above. Genuinely edge-to-edge: the overlay's own centering padding
   is dropped too, and the modal fills the entire viewport with square
   corners instead of floating as a big centered card. */
.confirm-overlay--fullscreen {
  padding: 0;
}

.confirm-modal--fullscreen {
  max-width: 100vw;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  /* .confirm-modal (dasarnya) membawa max-height: calc(100vh - 40px) -
     tanpa override ini, max-height itu tetap menang atas height di atas
     (max-height selalu mengalahkan height kalau lebih kecil), jadi modal
     "fullscreen" ini dulu selalu bersisa 20px kosong di atas & bawah,
     bukan benar-benar edge-to-edge seperti niatnya. */
  max-height: 100vh;
  max-height: 100dvh;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.confirm-modal--fullscreen .export-preview-scroll {
  flex: 1;
  max-height: none;
}

/* Laba Rugi's two per-row actions (edit, insert) side by side instead of
   stacking — .impor-field-edit-btn is `display:flex`, which makes each
   button a block-level box on its own line when there's more than one. */
.lr-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bulanan-year-block + .bulanan-year-block {
  margin-top: 22px;
}

.bulanan-year-block-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}

.bulanan-year-block-title span:last-child {
  color: #17803D;
}

/* Shared field grid for forms inside a modal (Kas's add-entry/transfer/
   saldo popups, and the order/PO creation popups below) — two columns with
   generous breathing room, one column on narrow screens. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 16px;
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.confirm-modal-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 18px;
}

.confirm-modal-actions {
  display: flex;
  gap: 10px;
}

.confirm-modal-btn {
  flex: 1;
  padding: 11px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* Aksi yang berpindah halaman ditulis sebagai <a href>, bukan tombol yang
   berpindah lewat JavaScript - tautan sungguhan dijalankan peramban
   sendiri, jadi tetap bekerja walau ada skrip yang gagal lebih dulu, dan
   bisa ditekan-lama untuk dibuka di tab baru. <a> tidak mewarisi apa pun
   dari gaya bawaan tombol, jadi yang dibutuhkan ditulis di sini supaya
   bentuknya sama persis dengan tombol di sebelahnya. */
a.confirm-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.confirm-modal-btn.cancel {
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

.confirm-modal-btn.confirm {
  background: #B8151D;
  color: #fff;
  border: none;
}

/* Choice dialog — same shell as the confirm, but the options are the
   subject rather than a yes/no. */
.confirm-modal-choices {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.choice-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* Lebih dari 3 pilihan (mis. "Pindahkan ke mana?" dengan banyak tujuan) -
   2 kolom supaya rapi, tidak meluber jadi satu baris sempit di HP. */
.confirm-modal-choices--wrap {
  flex-wrap: wrap;
}
.confirm-modal-choices--wrap .choice-btn {
  /* 3 kolom supaya 5 pilihan (kasus "Pindahkan ke mana?") pas jadi 2
     baris (3 + 2), bukan 3 baris. */
  flex: 1 1 calc(33.333% - 7px);
  min-width: 0;
}

.choice-btn:hover {
  border-color: var(--red);
  background: #FDEBEC;
  color: var(--red);
}

/* The sea option previews the colour its card will take. */
.choice-btn.sea:hover {
  border-color: #0284C7;
  background: #F0F8FE;
  color: #0284C7;
}

.choice-btn-icon svg {
  width: 26px;
  height: 26px;
}

/* ==========================================================================
   Undo / redo, sitting opposite the page title
   ========================================================================== */
/* main.css stacks the greeting block vertically; here it is a single title
   with the history buttons opposite it, so the direction is overridden. */
.greeting {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.history-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

.history-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
}

.history-btn svg {
  width: 17px;
  height: 17px;
}

.history-btn:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
  background: #FDEBEC;
}

.history-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Metric chip: flat, color-accented summary display -------------------
   Shared by Laporan Impor, Data PO, and Laporan Kas (whose own .kas-chip
   adds interactive filtering on top of the same visual recipe). */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.metric-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent, var(--border));
  background: var(--card);
  min-width: 0;
}

.metric-chip-label {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.metric-chip-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent, var(--ink));
  /* A cut-off rupiah figure reads as a wrong number, not just clipped text
     — every value here is a count or an amount, never long free text, so
     wrapping to a second line beats losing digits behind an ellipsis. */
  white-space: normal;
  overflow-wrap: break-word;
}

/* Dark gradient block for a page's headline metrics — same navy hero card
   Laporan Kas uses for Saldo Akhir, reusable wherever a summary deserves
   that treatment. */
.hero-card {
  background: linear-gradient(135deg, var(--surface-dark), #2B335C);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}

.hero-card .metric-grid {
  gap: 10px;
}

/* Dark-surface variant of .metric-chip — a translucent panel instead of a
   solid white one, so the chip reads correctly sitting on the hero card. */
.metric-chip--dark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .12);
  border-left-color: var(--accent, rgba(255, 255, 255, .3));
}

.metric-chip--dark .metric-chip-label {
  color: rgba(255, 255, 255, .6);
}

/* Clickable summary chip (e.g. Laporan Impor's "Total Order"/"Nominal
   Belum Tiba", Data PO's "PO Masuk" — filters the list to the set the chip
   itself counts) — filled with its own --accent color while the filter is
   engaged, monochrome dark text on top so it stays legible over any
   accent. Works on both the light .metric-chip (white card, e.g. Data PO)
   and the dark .metric-chip--dark variant (e.g. Laporan Impor's hero
   card) — the hover tint is picked per variant since a translucent-white
   overlay only reads on a dark background. */
.metric-chip--clickable {
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.metric-chip--clickable:hover {
  background: rgba(0, 0, 0, .04);
}
.metric-chip--dark.metric-chip--clickable:hover {
  background: rgba(255, 255, 255, .13);
}
.metric-chip--clickable.active {
  background: var(--accent, rgba(255, 255, 255, .3));
  border-color: var(--accent, rgba(255, 255, 255, .3));
}
.metric-chip--clickable.active .metric-chip-label {
  color: rgba(11, 18, 32, .65);
}
.metric-chip--clickable.active .metric-chip-value {
  color: #0B1220;
}

/* Simple single-number hero (e.g. Laporan Rugi's Total Kerugian) — a label
   above one big value, no chip grid needed for just one number. */
.hero-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #F87171;
}

/* ==========================================================================
   Cross-month name search
   ========================================================================== */
.impor-global-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--muted);
}

.impor-global-search:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228,33,43,.1);
}

.impor-global-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.impor-global-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
}

.impor-card-month-tag {
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--red);
  background: #FDEBEC;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  margin-right: 6px;
}

/* ==========================================================================
   Month selector
   ========================================================================== */
.month-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.month-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}

.month-tab-count {
  font-size: 0.66rem;
  font-weight: 800;
  background: var(--bg);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.month-tab.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.month-tab.active .month-tab-count {
  background: rgba(255,255,255,.22);
  color: #fff;
}

.month-tab-add {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px dashed var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.month-tab-add svg {
  width: 15px;
  height: 15px;
}

.month-tab-add:hover {
  border-color: var(--red);
  color: var(--red);
}

.month-delete-btn {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}

.month-delete-btn svg {
  width: 15px;
  height: 15px;
}

.month-delete-btn:hover:not(:disabled) {
  background: #FDEBEC;
  color: var(--red);
}

.month-delete-btn:disabled {
  color: var(--border);
  cursor: not-allowed;
}

/* ==========================================================================
   Section head extras
   ========================================================================== */
.impor-list-count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.section-head-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.section-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Single icon toggle between the normal card list and the dense "padat"
   preview (see .impor-card.preview-row below) — shared by Laporan Impor,
   Data PO, and Laporan Kas so the control looks and behaves identically. */
.view-icon-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.view-icon-btn svg {
  width: 15px;
  height: 15px;
}

.view-icon-btn:hover {
  background: #ECECEF;
  color: var(--ink);
}

.view-icon-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ==========================================================================
   Shipment list & cards
   ========================================================================== */
/* 80:20 split — adding an order is the common action, deleting is
   deliberately the smaller target. */
.impor-order-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

/* Same solid green fill as Laporan Kas's Debit (+) button — a deliberate
   "add" action, not a placeholder-looking dashed box. */
.impor-add-order-btn {
  flex: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1.5px solid #059669;
  border-radius: var(--radius-lg);
  background: #ECFDF5;
  color: #059669;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.impor-add-order-btn:hover {
  background: #D1FAE5;
}

.impor-export-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.impor-export-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.impor-export-btn:hover {
  border-color: #059669;
  color: #059669;
  background: #ECFDF5;
}

.impor-delete-order-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.impor-delete-order-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.impor-delete-order-btn:hover {
  border-color: #B8151D;
  color: #B8151D;
  background: #FDEBEC;
}

.impor-delete-order-btn.active {
  border-style: solid;
  border-color: #B8151D;
  background: #B8151D;
  color: #fff;
}

.impor-delete-order-count {
  font-size: 0.68rem;
  font-weight: 800;
}

/* Selection checkbox — only rendered while picking rows to delete. */
.impor-select-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.impor-select-check svg {
  width: 11px;
  height: 11px;
}

.impor-select-check.checked {
  background: #B8151D;
  border-color: #B8151D;
}

.impor-card.select-mode {
  cursor: pointer;
}

.impor-card.select-mode.selected {
  border-color: #F5B5B8;
  background: #FFF5F5;
}

.impor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* "Padat" view: a dense list of just no./title/nominal per row, no card
   shell. Shared by Laporan Impor, Data PO, and Laporan Kas. */
.impor-list.view-padat {
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card);
}

/* Kept as an .impor-card so the existing delete-select click handling
   (which matches on that class) keeps working unchanged — just stripped
   down to a plain divided row instead of the full card look. */
.impor-card.preview-row {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: default;
}

.impor-card.preview-row:last-child {
  border-bottom: none;
}

.impor-card.preview-row.select-mode {
  cursor: pointer;
}

.impor-card.preview-row.selected {
  background: #FFF5F5;
}

.preview-row .impor-card-no {
  font-size: 0.78rem;
}

.preview-row-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.preview-row-amount {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.impor-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.impor-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Sorotan sesaat untuk order yang dituju dari halaman lain (?order=<id>,
   dipakai tombol "Buka ... di Laporan Impor" di popup hubungan Restock).
   Daftarnya bisa panjang dan kartunya seragam, jadi tanpa penanda ini
   orang mendarat di tengah daftar tanpa tahu yang mana yang dimaksud.
   Memudar sendiri: gunanya cuma menunjukkan, bukan menandai status. */
.impor-card--disorot {
  border-color: var(--red);
  animation: impor-sorot 2.4s ease-out 1;
}

@keyframes impor-sorot {
  0%   { box-shadow: 0 0 0 3px rgba(228, 33, 43, .32); }
  70%  { box-shadow: 0 0 0 3px rgba(228, 33, 43, .32); }
  100% { box-shadow: var(--shadow-card); }
}

/* Sebagian orang menyetel sistemnya untuk menekan animasi - sorotannya
   tetap ada, hanya tidak berkedip. */
@media (prefers-reduced-motion: reduce) {
  .impor-card--disorot { animation: none; box-shadow: 0 0 0 3px rgba(228, 33, 43, .32); }
}

.impor-card.is-lost {
  border-color: #F5B5B8;
  background: #FFF8F8;
}

/* Sea-freight orders (billed by volume, not weight) get a pale blue block
   so they stand out from the air-freight majority at a glance. Text keeps
   its normal color — only the card frame changes. */
.impor-card.is-sea {
  border-color: #BEE0FB;
  background: #F0F8FE;
}

.impor-card-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.impor-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.impor-card-title-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.impor-card-no {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}

.impor-card-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink);
}

.impor-title-input {
  width: 160px;
  max-width: 45vw;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ink);
}

.impor-title-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228,33,43,.12);
}

.impor-card-sub {
  display: block;
  font-size: 0.66rem;
  color: var(--muted);
  margin-top: 1px;
}

.impor-card-nominal-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.impor-card-nominal {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

/* A negative/loss amount on a card or preview row (e.g. Laporan Rugi) —
   generic version of Laporan Kas's page-specific .kas-amount-out. */
.amount-negative {
  color: var(--red-dark) !important;
}

.impor-card-index {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* Progress: a 4-stop stepper for Bayar / Forwarder / Bea Cukai / Gudang */
.impor-progress {
  display: flex;
  align-items: center;
}

.impor-step {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 800;
}

.impor-step svg {
  width: 8px;
  height: 8px;
}

.impor-step.done {
  background: #17803D;
  border-color: #17803D;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(23,128,61,.14);
}

.impor-step-line {
  flex: 1;
  min-width: 8px;
  height: 2px;
  background: var(--border);
  margin: 0 1px;
}

.impor-step-line.done {
  background: #17803D;
}

.impor-progress-lost {
  font-size: 0.7rem;
  font-weight: 700;
  color: #B8151D;
}

.impor-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

/* Attachments: two per-order document slots (PDF, Excel). Grey and inert
   until a file lives in that slot; colored once one does. Uploading (as
   opposed to opening what's there) only works while the card is editing. */
.impor-attachments {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Tanda "sudah terhubung ke Restock". Hubungannya dibuat di modul Restock
   (tombol rantai di restock-riwayat.html); di sini yang ditampilkan
   kebalikannya, dan diklik untuk melompat ke restock-nya. Ungu - warna
   yang tidak dipakai satu pun slot lampiran di sebelahnya (abu-abu,
   merah, hijau) - supaya sekilas terbaca sebagai tautan ke luar halaman,
   bukan lampiran keempat. */
.impor-restock-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: #F5F3FF;
  border: 1px solid #DDD6FE;
  color: #7C3AED;
  text-decoration: none;
  cursor: pointer;
}

.impor-restock-link svg {
  width: 18px;
  height: 18px;
}

.impor-restock-link:hover {
  background: #EDE9FE;
}
/* Belum terhubung: abu-abu, sama seperti tombol lampiran kosong. */
.impor-restock-link--kosong { background: var(--bg); border-color: var(--border); color: var(--muted); }
.impor-restock-link--kosong:hover { background: #EDE9FE; color: #7C3AED; border-color: #DDD6FE; }
/* Pemilih restock (dialog Hubungkan ke Restock) */
.impor-hub-cari {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 8px 0 10px;
  border: 1.5px solid #CBD0D8; border-radius: var(--radius-sm); background: var(--bg);
  font-family: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink); outline: none;
}
.impor-hub-cari:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(228, 33, 43, .12); }
.impor-hub-daftar { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.impor-hub-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.impor-hub-item:hover { border-color: var(--red); }
.impor-hub-item.aktif { border-color: #7C3AED; background: #F5F3FF; }
.impor-hub-teks { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.impor-hub-teks strong { font-size: 0.84rem; }
.impor-hub-teks small { font-size: 0.72rem; color: var(--muted); }
.impor-hub-kanan em { font-style: normal; font-size: 0.68rem; font-weight: 700; color: #6D28D9; white-space: nowrap; }
.impor-hub-kanan em.lain { color: #B45309; }
/* Kaki dialog hubungan: satu baris, tombol tidak melipat dua baris. */
.poinv-linked-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.poinv-linked-actions .confirm-modal-btn { flex: 1 1 auto; min-width: 0; padding-inline: 12px; white-space: nowrap; text-align: center; text-decoration: none; }
.poinv-buka-invoice { border-color: #DDD6FE; background: #F5F3FF; color: #6D28D9; }
.poinv-buka-invoice:hover { background: #EDE9FE; }
.poinv-ket { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 10px; }
@media (max-width: 600px) {
  .poinv-linked-actions .confirm-modal-btn { flex: 1 1 calc(50% - 4px); }
}
.impor-attach-slot {
  position: relative;
  display: inline-flex;
}

.impor-attach-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: #EEF0F3;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
}

.impor-attach-btn svg {
  width: 18px;
  height: 18px;
}

.impor-attach-btn.is-inert {
  opacity: 0.55;
  cursor: not-allowed;
}

/* While uploading, the icon gives way to a live percentage — on a slow
   mobile link a static dimmed icon is indistinguishable from a hang. */
.impor-attach-btn.uploading {
  pointer-events: none;
  position: relative;
  background: var(--border);
  color: var(--ink-soft);
}

.impor-attach-btn.uploading svg {
  visibility: hidden;
}

.impor-attach-btn.uploading::after {
  content: attr(data-progress);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.impor-attach-btn.has-file.pdf {
  background: #FDEBEC;
  border-color: rgba(228, 33, 43, 0.25);
  color: var(--red);
}

.impor-attach-btn.has-file.excel {
  background: #E8F8EE;
  border-color: rgba(23, 128, 61, 0.25);
  color: #17803D;
}

.impor-attach-btn.has-file.image {
  background: #E4F1FE;
  border-color: rgba(2, 132, 199, 0.25);
  color: #0284C7;
}

.impor-attach-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--red-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

/* ==========================================================================
   File preview — opens PDF/Excel attachments in-app (PDF.js canvases for
   PDF, a parsed table for Excel) instead of sending them through a
   download. Phones get nearly the full viewport: these are dense documents
   and every pixel of width counts.
   ========================================================================== */
.file-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(15,15,20,0);
  transition: background-color .18s ease;
}

@media (min-width: 860px) {
  .file-preview-overlay {
    padding: 16px;
  }
}

.file-preview-overlay.show {
  background: rgba(15,15,20,.55);
}

.file-preview-modal {
  width: min(920px, 100%);
  height: min(94vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px -12px rgba(20,20,26,.4);
  overflow: hidden;
  transform: scale(.96);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.file-preview-overlay.show .file-preview-modal {
  transform: scale(1);
  opacity: 1;
}

.file-preview-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.file-preview-title {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zoom controls, added to the header for PDFs only. */
.file-preview-zoom {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.file-preview-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
}

.file-preview-zoom-btn svg {
  width: 14px;
  height: 14px;
}

.file-preview-zoom-btn:hover {
  background: var(--border);
  color: var(--red);
}

.file-preview-zoom-label {
  min-width: 40px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.file-preview-download,
.file-preview-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
}

.file-preview-download svg,
.file-preview-close svg {
  width: 15px;
  height: 15px;
}

.file-preview-download:hover,
.file-preview-close:hover {
  background: var(--border);
  color: var(--red);
}

.file-preview-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: auto;
  background: var(--bg);
}

/* A photo is centred and scaled to fit, so the whole thing is visible at
   once without any scrolling. */
.file-preview-body.is-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}

/* Once zoomed the image outgrows the frame, so it has to scroll — and
   `safe` centring keeps the top-left corner reachable instead of pushing
   it out of scroll range. */
.file-preview-body.is-image.is-zoomed {
  overflow: auto;
  align-items: safe center;
  justify-content: safe center;
}

.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Flex items shrink to fit their container by default — once zoomed
     past 100% the explicit pixel width set in JS must win instead, or a
     photo close to the frame's width just gets squeezed back down. */
  flex-shrink: 0;
}

/* PDF pages, rendered to canvas by PDF.js and stacked vertically. Once
   zoomed past the container width the pages overflow both sides, and a
   plain `center` would put the left edge out of scroll reach — `safe`
   falls back to flex-start exactly then (older engines ignore the second
   declaration and keep plain centering). */
.file-preview-pdf-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: safe center;
  gap: 10px;
  padding: 8px;
  width: fit-content;
  min-width: 100%;
  touch-action: pan-x pan-y;
}

/* No max-width here: the width is set explicitly per zoom level. */
.file-preview-pdf-page {
  display: block;
  background: #fff;
  box-shadow: 0 2px 10px -2px rgba(20,20,26,.25);
}

/* Membungkus tiap canvas halaman PDF - cuma supaya tautan di dalamnya
   (lihat pasangTautanPdf di js/*.js) bisa ditumpangkan tepat di atasnya.
   Ukurannya sengaja dibuat mengikuti canvas persis (di-set lewat JS setiap
   kali zoom berubah), bukan lewat CSS, supaya posisi tautannya (dalam
   persen) selalu pas di teks aslinya pada zoom berapa pun. */
.file-preview-pdf-page-wrap { position: relative; display: block; line-height: 0; }
.file-preview-pdf-tautan {
  position: absolute;
  display: block;
  border-radius: 2px;
  cursor: pointer;
}
.file-preview-pdf-tautan:hover, .file-preview-pdf-tautan:focus-visible {
  background: rgba(37, 99, 235, .12);
  outline: 1.5px solid rgba(37, 99, 235, .55);
}

.file-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.file-preview-error {
  padding: 32px 16px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}

.file-preview-fallback {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--radius-md);
  background: var(--red);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}

.file-preview-sheet-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  overflow-x: auto;
  flex-shrink: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.file-preview-sheet-tab {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  cursor: pointer;
  white-space: nowrap;
}

.file-preview-sheet-tab.active {
  background: var(--red);
  color: #fff;
}

.file-preview-table-wrap {
  overflow: auto;
  height: 100%;
}

/* Spreadsheets carry their own layout (merged header blocks, wide notes
   columns), so cells wrap inside a bounded width rather than running off
   into one enormous column — horizontal scrolling stays, but only for
   genuinely wide sheets. */
/* Zooming scales the type itself, so the text redraws crisp at every
   level instead of being a magnified bitmap. Cell metrics are in em so
   padding and column limits grow with it. */
.file-preview-table {
  border-collapse: collapse;
  font-size: calc(0.68rem * var(--sheet-zoom, 1));
  background: var(--bg);
}

.file-preview-table td {
  padding: 0.36em 0.64em;
  border: 1px solid var(--border);
  color: var(--ink);
  vertical-align: top;
  min-width: 4.2em;
  max-width: 16.4em;
  overflow-wrap: break-word;
}

.file-preview-table tr:nth-child(even) td {
  background: var(--card);
}

/* Product photos pulled out of the workbook's zip and dropped back into
   the cell they were anchored to. */
/* Sized in em so a photo grows along with the sheet when zooming in. */
.file-preview-cell-image {
  display: block;
  max-width: 100%;
  max-height: 11em;
  margin: 0.2em 0;
  object-fit: contain;
}

@media (min-width: 860px) {
  /* Same zoom factor, just a larger starting point on a big screen. */
  .file-preview-table {
    font-size: calc(0.76rem * var(--sheet-zoom, 1));
  }

  .file-preview-cell-image {
    max-height: 13em;
  }

  .file-preview-table td {
    min-width: 4.6em;
    max-width: 21.4em;
  }
}

.aging-badge {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.aging-ok { background: #E8F8EE; color: #17803D; }
.aging-watch { background: #FDF1DC; color: #B45309; }
.aging-alert { background: #FDEBEC; color: #B8151D; }
.aging-done { background: #EEF0F3; color: var(--ink-soft); }

/* Expandable details */
.impor-card-details {
  display: none;
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--bg);
}

.impor-card.expanded .impor-card-details {
  display: block;
}

.impor-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
}

/* Keterangan runs the full width of the grid — a note reads better on its
   own line than squeezed into one column alongside short fields. */
.impor-field--wide {
  grid-column: 1 / -1;
}

.impor-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Same specificity as .impor-field's own `display: flex` above (both one
   class/attribute selector), so without this the native `hidden` attribute
   toggle used to show/hide a field (invoice.js's DP field, arus-kas-
   bulanan.js's Rincian Operasional / Jumlah Yuan fields, etc.) NEVER
   actually hid anything - `.impor-field` simply came later in this same
   stylesheet and won the tie, so `el.hidden = true` silently did nothing
   visible. */
.impor-field[hidden] {
  display: none;
}

.impor-field-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--muted);
}

.impor-field-text {
  display: block;
  min-height: 22px;
  padding-top: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: break-word;
}

/* The single per-card edit toggle, next to the order name. */
.impor-field-edit-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--muted);
}

.impor-field-edit-btn svg {
  width: 13px;
  height: 13px;
}

.impor-field-edit-btn:hover {
  background: var(--border);
  color: var(--red);
}

/* Edit mode input — every field in the card swaps to this at once, via the
   one edit toggle above, rather than field-by-field. */
.impor-input-group {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 8px;
}

.impor-input-group:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228,33,43,.12);
}

.impor-input-affix {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.impor-input {
  width: 100%;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  padding: 7px 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.impor-input[type="date"] {
  font-weight: 600;
}

/* The edit trigger only appears once the card is expanded, bottom-right —
   editing requires opening the card first, not a click from the header. */
.impor-card-edit-trigger {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Save/Cancel for the whole card, shown only while it's in edit mode. */
.impor-card-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.impor-card-save-btn,
.impor-card-cancel-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.impor-card-save-btn {
  background: #17803D;
  color: #fff;
}

.impor-card-save-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.impor-card-cancel-btn {
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 860px) {
  .impor-detail-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .impor-card-main {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
  }

  .impor-card-top {
    flex: 1.4;
    min-width: 0;
  }

  .impor-progress {
    flex: 1;
    max-width: 160px;
  }

  .impor-card-footer {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px;
  }
}

/* ---- Kolom wajib (Pengaturan) & lampiran di modal Tambah - dipakai oleh
   Laporan Rugi & Laporan Kas, jadi generik di sini bukan per-modul. -------- */
.wajib-mark {
  color: var(--red);
  font-weight: 800;
}

.modal-lampiran-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-lampiran-name {
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rugi-pengaturan-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.rugi-pengaturan-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.rugi-pengaturan-row input { margin-top: 3px; accent-color: var(--red); flex-shrink: 0; }
.rugi-pengaturan-row strong { color: var(--ink); }
.rugi-pengaturan-row:has(input:checked) { border-color: var(--red); background: #FEF2F2; }

.rugi-pin-field { margin-bottom: 10px; }
.rugi-pin-input {
  width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; color: var(--ink); text-align: center; font-size: 1.3rem; font-weight: 800;
  letter-spacing: 0.6em; outline: none;
}
.rugi-pin-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(228,33,43,.1); }
.rugi-pin-error { font-size: 0.78rem; font-weight: 600; color: var(--red-dark); text-align: center; margin-bottom: 14px; }

/* Title/date/Penjelasan grouped in one column that can actually shrink —
   .impor-card-top is a row (desktop) or column (mobile) flex container, so
   without min-width:0 this block (and the long Penjelasan text inside it)
   would refuse to shrink below its content width and push the nominal/
   footer out of the card instead of wrapping. */
.rugi-card-title-block { min-width: 0; }

/* Penjelasan preview on the card itself, clamped so a long one doesn't blow
   up the list — the full text is still there in Edit. */
.rugi-card-penjelasan {
  margin: 3px 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Laba Rugi: rincian perhitungan (klik baris) ---- */
#labarugi-table-body tr.lr-baris { cursor: pointer; }
#labarugi-table-body tr.lr-baris:hover td { background: rgba(228, 33, 43, .045); }
.lr-rincian-modal { max-width: 580px; max-height: 88vh; overflow-y: auto; overflow-x: hidden; text-align: left; }
.lr-rincian-modal .confirm-modal-text { text-align: left; }
.lr-rincian { display: flex; flex-direction: column; margin: 4px 0 14px; }
.lr-rincian-kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-weight: 800; font-size: .95rem; }
.lr-rincian-kepala strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr-rincian-sumber { margin: 8px 2px 10px; color: var(--muted); font-size: .78rem; }
.lr-rumus { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lr-rumus-baris { display: grid; grid-template-columns: 20px 1fr auto; align-items: baseline; gap: 8px; padding: 8px 12px; font-size: .84rem; }
.lr-rumus-baris + .lr-rumus-baris { border-top: 1px solid var(--border); }
.lr-rumus-tanda { color: var(--muted); font-weight: 800; text-align: center; }
.lr-rumus-label small { display: block; color: var(--muted); font-size: .72rem; font-weight: 500; }
.lr-rumus-nilai { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr-rumus-hasil { background: #F1FAF4; font-weight: 800; }
.lr-rincian-persen { margin: 12px 2px 0; color: var(--ink-soft); font-size: .8rem; }
.lr-rincian-daftar { margin-top: 12px; }
.lr-rincian-daftar summary { padding: 6px 2px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.lr-rincian-tabel { max-height: 240px; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: 8px; }
.lr-rincian-daftar table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.lr-rincian-daftar tr:first-child td { border-top: 0; }
.lr-rincian-daftar td { padding: 5px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.lr-rincian-daftar td:first-child { white-space: nowrap; color: var(--muted); }
.lr-rincian-daftar td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr-rincian-catatan { margin: 10px 2px 0; color: var(--muted); font-size: .74rem; }
/* baris sumber yang bisa diklik -> pop-up daftar transaksi */
.lr-rumus-klik { cursor: pointer; transition: background .15s; }
.lr-rumus-klik:hover, .lr-rumus-klik:focus-visible { background: #FFF4F4; outline: none; }
.lr-rumus-lihat { display: block; margin-top: 2px; color: var(--red); font-size: .72rem; font-style: normal; font-weight: 700; }
.lr-transaksi-modal, .lr-lampiran-modal { max-width: 620px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; text-align: left; }
.lr-transaksi-modal .confirm-modal-text, .lr-lampiran-modal .confirm-modal-text { text-align: left; }
.lr-transaksi { margin: 4px 0 14px; }
.lr-transaksi-daftar { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lr-transaksi-baris { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 12px; }
.lr-transaksi-baris + .lr-transaksi-baris { border-top: 1px solid var(--border); }
.lr-transaksi-no { color: var(--muted); font-size: .76rem; font-weight: 700; padding-top: 1px; }
.lr-transaksi-atas { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--muted); }
.lr-transaksi-atas strong { color: var(--ink); font-size: .86rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lr-transaksi-ket { margin-top: 2px; font-size: .84rem; color: var(--ink); word-break: break-word; }
.lr-transaksi-lampiran { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lr-lampiran-foto { width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); cursor: zoom-in; }
.lr-lampiran-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-lampiran-pdf-tombol { width: 64px; height: 64px; border: 1px solid #F5C2C4; border-radius: 8px; background: #FFF4F4; color: var(--red-dark); font-weight: 800; font-size: .78rem; cursor: pointer; }
.lr-lampiran-foto:hover, .lr-lampiran-pdf-tombol:hover { border-color: var(--red); }
.lr-transaksi-tanpa { margin-top: 6px; color: var(--muted); font-size: .72rem; }
.lr-transaksi-total { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #F1FAF4; font-size: .86rem; font-weight: 800; }
.lr-lampiran-wadah { display: flex; justify-content: center; margin: 6px 0 14px; }
.lr-lampiran-besar { max-width: 100%; max-height: 70vh; border-radius: 8px; object-fit: contain; }
.lr-lampiran-pdf { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 8px; }
.lr-lampiran-tab { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }