/* ==========================================================================
   Hubungan Data PO <-> Invoice & Surat (js/po-invoice.js).

   Dipakai DUA halaman (Data PO dan Invoice & Surat), jadi gayanya di berkas
   sendiri - bukan menumpang salah satu dari keduanya. Kerangka dialognya
   sendiri (.confirm-overlay / .confirm-modal) sudah ada di
   css/laporan-impor.css yang dimuat kedua halaman; di sini hanya isi
   dialognya, lencana hubungan pada kartu, dan kabar kerjanya.
   ========================================================================== */

/* ---- isi dialog pemilih -------------------------------------------------- */
.poinv-ket {
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.poinv-cari {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  margin-bottom: 10px;
}
.poinv-cari:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(228, 33, 43, .12); }

.poinv-daftar {
  max-height: 46vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  margin-bottom: 16px;
}

.poinv-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.poinv-item + .poinv-item { border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; }
.poinv-item:hover { background: var(--bg); }

.poinv-item-atas {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
}
/* Nama pelanggan/PO boleh terpotong; nominal di kanan tidak pernah. */
.poinv-item-atas strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.poinv-nominal { flex-shrink: 0; font-weight: 800; color: var(--ink); }

.poinv-item-bawah {
  font-size: 0.74rem;
  color: var(--muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poinv-dipakai { color: #B45309; }

.poinv-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: #E0F2FE;
  color: #0369A1;
}
.poinv-tag--sph { background: #FEF3C7; color: #B45309; }

.poinv-kosong { padding: 22px 10px; text-align: center; font-size: 0.82rem; color: var(--muted); }

.poinv-pilih-actions { justify-content:space-between; }
.poinv-linked-summary {
  display:flex; flex-wrap:wrap; align-items:center; gap:5px 7px; margin:0 0 12px; padding:10px 12px;
  border:1px solid #DDD6FE; border-radius:10px; background:#F5F3FF; color:#5B21B6;
  font-size:.77rem; line-height:1.45;
}
.poinv-linked-summary span { color:#6B7280; font-weight:600; }
.poinv-linked-summary strong { font-weight:800; }
.poinv-buka-po { border-color:#DDD6FE; background:#F5F3FF; color:#6D28D9; }
.poinv-buka-po:hover { background:#EDE9FE; }
/* Satu baris, tiap tombol selebar teksnya (tidak melipat "Buka Invoice" /
   "Ganti invoice" jadi dua baris); modalnya dilebarkan (confirm-modal--wide). */
.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; }
.poinv-buka-invoice { border-color:#DDD6FE; background:#F5F3FF; color:#6D28D9; }
.poinv-buka-invoice:hover { background:#EDE9FE; }
.impor-card.poinv-target { outline:2px solid #8B5CF6; outline-offset:3px; box-shadow:0 0 0 7px rgba(139,92,246,.12); }
.doc-card.poinv-target { outline:2px solid #8B5CF6; outline-offset:3px; box-shadow:0 0 0 7px rgba(139,92,246,.12); }
.poinv-create-modal { width:min(700px, calc(100vw - 24px)); }
.poinv-create-form { display:grid; grid-template-columns:1fr 1fr; gap:13px 14px; margin-top:16px; }
.poinv-field { display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--ink-soft); font-size:.74rem; font-weight:700; }
.poinv-field--wide { grid-column:1 / -1; }
.poinv-field input,.poinv-field select,.poinv-field textarea {
  width:100%; min-height:40px; padding:9px 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:.82rem; font-weight:600; outline:none;
}
.poinv-field textarea { min-height:66px; resize:vertical; line-height:1.45; }
.poinv-field input:focus,.poinv-field select:focus,.poinv-field textarea:focus {
  border-color:var(--red); background:#fff; box-shadow:0 0 0 3px rgba(228,33,43,.1);
}
.poinv-form-error { grid-column:1 / -1; min-height:1em; margin:0; color:var(--red-dark); font-size:.76rem; font-weight:700; }
.poinv-create-actions { grid-column:1 / -1; margin-top:0; }
@media (max-width:600px) {
  .poinv-create-form { grid-template-columns:1fr; }
  .poinv-field--wide,.poinv-form-error,.poinv-create-actions { grid-column:auto; }
  .poinv-pilih-actions { flex-wrap:wrap; }
  .poinv-pilih-actions .poinv-buat-baru { order:-1; width:100%; }
  .poinv-linked-actions .confirm-modal-btn { flex:1 1 calc(50% - 4px); }
}

/* ---- kabar kerja (menggambar PDF perlu beberapa detik) ------------------- */
.poinv-kabar {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 12px);
  z-index: 1400;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.poinv-kabar.tampil { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 860px) { .poinv-kabar { bottom: 24px; } }

/* ---- lencana hubungan pada kartu ---------------------------------------- */
/* Tombol rantai: abu-abu waktu belum terhubung, UNGU waktu sudah. Ungunya
   memakai nada yang sudah dipakai di tempat lain (css/laporan-impor.css,
   css/restock.css): #7C3AED di atas #F5F3FF dengan tepi #DDD6FE - jadi
   lencana ini terlihat sebagai bagian dari aplikasi yang sama, bukan warna
   baru yang berdiri sendiri. */
/* Tombol isi cepat DP/Pelunasan dari nominal invoice (kartu PO mode edit) */
/* Kotak di sel sebelah (Jumlah, Tgl DP) jangan ikut meninggi karena sel DP/Pelunasan
   punya baris chip: sel grid disejajarkan ke atas, kotak isian tidak melar. */
.impor-detail-grid:has(.po-isi-cepat) { align-items:start; }
.impor-detail-grid:has(.po-isi-cepat) .impor-input-group { flex:0 0 auto; }
.po-isi-cepat { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.po-isi-cepat > span { font-size:.68rem; font-weight:700; color:var(--muted); }
.po-isi-cepat-btn {
  padding:3px 10px; border:1px solid #DDD6FE; border-radius:999px; background:#F5F3FF; color:#6D28D9;
  font-family:inherit; font-size:.7rem; font-weight:800; cursor:pointer; white-space:nowrap;
}
.po-isi-cepat-btn:hover { background:#6D28D9; border-color:#6D28D9; color:#fff; }

.poinv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.poinv-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.poinv-btn span { overflow: hidden; text-overflow: ellipsis; }
.poinv-btn:hover { background: var(--bg); color: var(--ink); }
.poinv-btn.terhubung {
  background: #F5F3FF;
  border-color: #DDD6FE;
  color: #7C3AED;
}
.poinv-btn.terhubung:hover { background: #EDE9FE; }