/* Mikode POS — UI/UX Fase 2: halaman Transaksi (transaksi.html) saja,
   termasuk panel Shift Kasir & Audit Log yang hidup di halaman ini.
   Dimuat SETELAH css/mikode-theme.css dari transaksi.html. Semua warna,
   spasi, ukuran huruf & radius dari token design system. Selector
   dibatasi body.pg-transaksi agar halaman lain tidak terpengaruh. */
body.pg-transaksi{
  --tx-muted:var(--muted,var(--text-muted,#44596D));
  --tx-faint:var(--faint,var(--text-faint,#5A6E82));
  --tx-line:var(--line,rgba(10,31,51,.10));
  --tx-line-strong:var(--line-strong,rgba(10,31,51,.20));
}

/* ---------- Shell: harmonisasi pola .ui-side/.ui-topbar dengan CSS lama
   (dicerminkan dari css/dashboard-ui.css Fase 1) ---------- */
@media (min-width:768px) and (max-width:980px){
  body.pg-transaksi .ui-side{position:sticky;transform:none}
}
body.pg-transaksi .mobile-header.ui-topbar{
  background:var(--side-bg,#0A1F33);
  color:var(--side-ink,#fff);
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  min-height:0;
}
@media (min-width:768px){
  body.pg-transaksi .mobile-header.ui-topbar{display:none}
}
body.pg-transaksi .ui-tenant-chip span:empty{display:none}
body.pg-transaksi .ui-tenant-chip:not(:has(span:not(:empty))){display:none}
body.pg-transaksi .btn-toggle-sidebar,
body.pg-transaksi .btn-close-sidebar{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2,8px);
}
body.pg-transaksi .btn-toggle-sidebar svg,
body.pg-transaksi .btn-close-sidebar svg{width:18px;height:18px;flex-shrink:0}
body.pg-transaksi .theme-toggle-btn svg{width:20px;height:20px;display:block}

/* Modal statis halaman ini dibuka JS lewat style.display inline (pola
   lama .modal), jadi override display:flex dari .ui-modal tema. */
body.pg-transaksi .modal.ui-modal{display:none}

/* Panel yang disembunyikan JS lewat atribut hidden (shift/audit 403) */
body.pg-transaksi .mk-panel[hidden]{display:none!important}

/* ---------- Bilah filter periode (dulu inline style di HTML) ---------- */
body.pg-transaksi .tx-filter{
  display:flex;
  gap:var(--sp-3,12px);
  padding:var(--sp-4,16px);
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:var(--sp-4,16px);
  background:var(--card,#fff);
  border:1px solid var(--tx-line);
  border-radius:var(--r-md,12px);
  box-shadow:var(--sh-card,0 1px 2px rgba(10,31,51,.04));
}
body.pg-transaksi .tx-filter-label{
  font-size:var(--fs-12,12px);
  font-weight:700;
  color:var(--tx-muted);
}
body.pg-transaksi .tx-filter .ui-select{width:auto;min-width:150px}
body.pg-transaksi .tx-filter .ui-field{margin-bottom:0}

/* ---------- Tabel riwayat (.ui-table di dalam .ui-table-wrap) ---------- */
body.pg-transaksi .tx-total{font-weight:700;color:var(--success-text,var(--success,#17803D))}
body.pg-transaksi .tx-void-alasan{
  font-size:var(--fs-12,12px);
  color:var(--danger-text,var(--danger,#B42318));
  margin-top:var(--sp-1,4px);
}
body.pg-transaksi .tx-skel-line{display:block;width:100%;height:14px}
@media (max-width:640px){
  body.pg-transaksi .ui-table td:has(.ui-empty){display:block;text-align:center}
}

/* ---------- Tabel hasil render JS (riwayat shift & audit log) ---------- */
body.pg-transaksi .tx-table-wrap{margin-top:var(--sp-3,12px)}

/* ---------- Modal rincian transaksi ---------- */
body.pg-transaksi .tx-modal-content{max-width:500px;width:100%}
body.pg-transaksi .tx-modal-title{
  margin-top:0;
  margin-bottom:var(--sp-2,8px);
  font-size:var(--fs-20,20px);
}
body.pg-transaksi .tx-detail-id{
  color:var(--success-text,var(--success,#17803D));
  font-weight:700;
}
body.pg-transaksi .tx-status-box{
  margin-bottom:var(--sp-4,16px);
  display:flex;
  align-items:center;
  gap:var(--sp-2,8px);
  flex-wrap:wrap;
}
body.pg-transaksi .tx-void-alasan-inline{
  font-size:var(--fs-13,13px);
  color:var(--danger-text,var(--danger,#B42318));
}
body.pg-transaksi .tx-detail-table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:var(--sp-3,12px);
}
body.pg-transaksi .tx-detail-head-row{
  border-bottom:2px solid var(--tx-line-strong);
  text-align:left;
}
body.pg-transaksi .tx-detail-th{
  padding:var(--sp-3,12px) var(--sp-1,4px);
  font-size:var(--fs-13,13px);
}
body.pg-transaksi .tx-detail-th--qty{text-align:center;width:70px}
body.pg-transaksi .tx-detail-th--subtotal{text-align:right;width:110px}
body.pg-transaksi .tx-detail-th--aksi{width:70px}
body.pg-transaksi .tx-item-nama{font-weight:500}
body.pg-transaksi .tx-item-qty{text-align:center;color:var(--tx-muted)}
body.pg-transaksi .tx-item-subtotal{text-align:right;font-weight:700}
body.pg-transaksi .tx-item-aksi-sel{text-align:center}
body.pg-transaksi .tx-item-note{
  display:block;
  font-size:var(--fs-12,12px);
  color:var(--warn-text,var(--warn,#B45309));
  background:var(--warn-soft,#FEF3C7);
  border-radius:var(--r-sm,8px);
  padding:2px 7px;
  margin-top:var(--sp-1,4px);
}
body.pg-transaksi .trx-item-actions button svg{width:14px;height:14px;display:block}
body.pg-transaksi .tx-state-sel{padding:var(--sp-4,16px)}
body.pg-transaksi .tx-modal-actions{
  border-top:1px solid var(--tx-line);
  padding-top:var(--sp-4,16px);
}
body.pg-transaksi #editFromDetailBtn[hidden]{display:none!important}

/* Perbaikan QA visual: aturan lama style.css `.filter-container select{flex:1 1 200px}`
   kini bekerja vertikal karena select dibungkus .ui-field (flex column) — basis 200px
   menjadi TINGGI 200px. Netralkan di bilah filter halaman ini. */
body.pg-transaksi .tx-filter .ui-field select { flex: 0 0 auto; }

/* Fase 3: nama outlet kecil di bawah nomor nota (multi-outlet). */
body.pg-transaksi .tx-outlet-nama {
  font-size: var(--fs-12, 12px);
  color: var(--tx-muted, #44596D);
  margin-top: var(--sp-1, 4px);
}

/* ---------- Modernisasi v47: kartu riwayat transaksi di HP ----------
   Mode kartu tema (<=640px) menyusun ulang baris #transactionData menjadi
   kartu aktivitas: nota = judul, waktu = subjudul redup, total besar di
   kanan bawah, tombol detail selebar kartu. Tabel desktop tidak berubah. */
@media (max-width:640px){
  body.pg-transaksi #transactionData tr{
    border-radius:16px;padding:4px 16px 14px;
  }
  body.pg-transaksi #transactionData td[data-label="No. Urut"]{display:none}
  body.pg-transaksi #transactionData td[data-label="ID Nota"]{
    justify-content:flex-start;padding-top:10px;font-size:var(--fs-15,15px);
  }
  body.pg-transaksi #transactionData td[data-label="ID Nota"]::before{display:none}
  body.pg-transaksi #transactionData td[data-label="ID Nota"] b{font-size:var(--fs-15,15px);font-weight:800}
  body.pg-transaksi #transactionData td[data-label="Waktu"]{
    justify-content:flex-start;border-bottom:0;padding:0 0 2px;
    color:var(--tx-muted,#44596D);font-size:var(--fs-13,13px);
  }
  body.pg-transaksi #transactionData td[data-label="Waktu"]::before{display:none}
  body.pg-transaksi #transactionData td[data-label="Keterangan"]{
    justify-content:flex-start;border-bottom:0;padding-top:6px;
  }
  body.pg-transaksi #transactionData td[data-label="Keterangan"]::before{display:none}
  body.pg-transaksi #transactionData td[data-label="Total"]{
    border-top:1px dashed var(--line-strong,rgba(10,31,51,.18));border-bottom:0;
    margin-top:8px;padding-top:10px;font-size:var(--fs-16,16px);font-weight:800;
    color:var(--success-text,#17803D);
  }
  body.pg-transaksi #transactionData td[data-label="Aksi"]{
    border-bottom:0;padding-top:10px;
  }
  body.pg-transaksi #transactionData td[data-label="Aksi"]::before{display:none}
  body.pg-transaksi #transactionData td[data-label="Aksi"] .ui-btn{
    flex:1;min-height:40px;background:var(--accent-soft,rgba(62,155,230,.14));
    color:var(--brand-ink,#144262);border:1px solid transparent;box-shadow:none;
  }
}