/* =====================================================
   MANSONS — PO Item Picker CSS  (po-items.css)
   Append this to assets/css/portal.css
   ===================================================== */

/* ── ITEM PICKER MODAL ──────────────────────────────── */
.msn-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.62);
  z-index: 9800;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
  animation: msn-fade-in .2s ease;
}
.msn-picker-box {
  background: #fff;
  border-radius: 16px;
  width: 100%; max-width: 1060px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  animation: msn-pop-in .22s ease;
  overflow: hidden;
}
.msn-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  background: #fff;
}
.msn-picker-head h3 {
  font-size: 17px; font-weight: 800; color: #0f1c3f;
  display: flex; align-items: center; gap: 10px;
}
.msn-picker-head h3 span.msn-po-badge {
  background: #fffbeb; color: #c9a227;
  border: 1px solid #fcd34d;
  padding: 3px 10px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
}
.msn-picker-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: #f1f5f9;
  cursor: pointer; font-size: 20px; color: #64748b;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; line-height: 1;
}
.msn-picker-close:hover { background: #fee2e2; color: #991b1b; }

/* Search + currency bar */
.msn-picker-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0; flex-wrap: wrap;
}
.msn-picker-search {
  position: relative; flex: 1; min-width: 220px;
}
.msn-picker-search svg {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%); color: #94a3b8; pointer-events: none;
}
.msn-picker-search input {
  width: 100%; padding: 9px 12px 9px 34px;
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  font-size: 13.5px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.msn-picker-search input:focus { border-color: #0f1c3f; }
.msn-picker-curr-wrap {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #64748b; white-space: nowrap;
}
.msn-picker-curr-wrap select {
  padding: 8px 10px; border: 1.5px solid #e2e8f0;
  border-radius: 8px; font-size: 13px; font-family: inherit;
  outline: none; background: #fff; cursor: pointer;
}
.msn-picker-curr-wrap select:focus { border-color: #0f1c3f; }
.msn-picker-count-badge {
  padding: 5px 14px; background: #eff6ff;
  color: #1d4ed8; border: 1px solid #bfdbfe;
  border-radius: 20px; font-size: 12px; font-weight: 700;
  white-space: nowrap;
}

/* Table scroll area */
.msn-picker-body {
  flex: 1; overflow-y: auto; min-height: 0;
}
.msn-picker-loading {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 60px 20px; color: #94a3b8; gap: 14px;
}

/* Items table */
table.msn-items-tbl {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.msn-items-tbl thead {
  position: sticky; top: 0; z-index: 10;
}
.msn-items-tbl thead tr { background: #0f1c3f; }
.msn-items-tbl thead th {
  padding: 11px 12px; text-align: left;
  color: #fff; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; border-right: 1px solid rgba(255,255,255,.08);
}
.msn-items-tbl thead th:last-child { border-right: none; }
.msn-items-tbl thead th.msn-th-chk { width: 44px; text-align: center; }
.msn-items-tbl thead th.msn-th-sr  { width: 48px; }
.msn-items-tbl thead th.msn-th-qty { width: 70px; text-align: right; }
.msn-items-tbl thead th.msn-th-ship{ width: 90px; }
.msn-items-tbl thead th.msn-th-price{ width: 100px; }
.msn-items-tbl thead th.msn-th-curr { width: 82px; }
.msn-items-tbl thead th.msn-th-amt  { width: 110px; text-align: right; }

.msn-items-tbl tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155; vertical-align: middle;
}
.msn-irow { cursor: pointer; transition: background .12s; }
.msn-irow:hover { background: #f8fafc; }
.msn-irow.msn-irow-sel { background: #eff6ff; }
.msn-irow.msn-irow-sel td { color: #0f172a; }
.msn-irow.msn-irow-hide { display: none; }

.msn-td-chk { text-align: center; }
.msn-td-chk input[type=checkbox] {
  width: 16px; height: 16px; cursor: pointer;
  accent-color: #0f1c3f;
}
.msn-td-sr { color: #94a3b8; font-size: 12px; }
.msn-td-mansons { font-weight: 700; color: #0f1c3f; font-family: monospace; font-size: 12.5px; }
.msn-td-oem { font-family: monospace; font-size: 12px; color: #64748b; }
.msn-td-desc { font-weight: 500; }
.msn-td-brand { }
.msn-td-qty { text-align: right; font-weight: 600; }
.msn-td-ship input {
  width: 72px; padding: 5px 8px;
  border: 1.5px solid #e2e8f0; border-radius: 6px;
  font-size: 13px; text-align: center;
  font-family: inherit; outline: none;
  transition: border-color .2s;
}
.msn-td-ship input:not(:disabled):focus { border-color: #c9a227; }
.msn-td-ship input:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.msn-td-price input {
  width: 86px; padding: 5px 8px;
  border: 1.5px solid #e2e8f0; border-radius: 6px;
  font-size: 13px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.msn-td-price input:not(:disabled):focus { border-color: #c9a227; }
.msn-td-price input:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.msn-td-curr select {
  width: 72px; padding: 5px 6px;
  border: 1.5px solid #e2e8f0; border-radius: 6px;
  font-size: 12px; font-family: inherit; outline: none;
  background: #fff; cursor: pointer;
}
.msn-td-curr select:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.msn-td-amt {
  text-align: right; font-weight: 600;
  font-size: 13px; color: #0f1c3f; min-width: 90px;
}
.msn-td-amt.msn-pending { color: #94a3b8; font-weight: 400; }

/* Modal footer */
.msn-picker-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
.msn-picker-foot-left { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 12px; }
.msn-picker-foot-right { display: flex; gap: 10px; }
.msn-picker-total {
  font-size: 14px; font-weight: 700; color: #0f1c3f;
  display: flex; align-items: center; gap: 6px;
}

/* ── STEP 2 — SELECTED ITEMS DISPLAY ────────────────── */
.msn-step2-wrap { margin-top: 0; }
.msn-step2-zone {
  border: 2px dashed #e2e8f0; border-radius: 12px;
  padding: 36px 24px; text-align: center;
  cursor: pointer; transition: all .2s;
  background: #fff;
}
.msn-step2-zone:hover {
  border-color: #c9a227; background: #fffbf0;
}
.msn-step2-zone-icon { font-size: 36px; margin-bottom: 10px; }
.msn-step2-zone p { font-size: 14px; color: #94a3b8; margin-bottom: 14px; }
.msn-step2-zone .msn-add-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border: 1.5px solid #0f1c3f;
  border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: #0f1c3f; background: #fff; cursor: pointer;
  transition: all .2s; font-family: inherit;
}
.msn-step2-zone .msn-add-btn:hover {
  background: #0f1c3f; color: #fff;
}

/* Items added header */
.msn-items-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
}
.msn-items-header-left { font-size: 15px; font-weight: 700; color: #0f1c3f; display: flex; align-items: center; gap: 10px; }
.msn-items-badge-cnt {
  background: #ecfdf5; color: #065f46;
  border: 1px solid #a7f3d0;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
}

/* Selected items table */
table.msn-sel-tbl {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.msn-sel-tbl thead tr { background: #f8fafc; }
.msn-sel-tbl thead th {
  padding: 10px 14px; text-align: left;
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.msn-sel-tbl tbody td {
  padding: 11px 14px; border-bottom: 1px solid #f8fafc;
  color: #334155; vertical-align: middle;
}
.msn-sel-tbl tbody tr:last-child td { border-bottom: none; }
.msn-sel-tbl tbody tr:hover td { background: #fafafa; }
.msn-sel-tbl .msn-sel-mansons { font-weight: 700; color: #0f1c3f; font-size: 12.5px; font-family: monospace; }
.msn-sel-tbl .msn-sel-desc { font-weight: 500; }
.msn-sel-tbl .msn-sel-brand { color: #64748b; }
.msn-sel-tbl .msn-sel-qty { font-weight: 600; text-align: center; }
.msn-sel-tbl .msn-sel-price { color: #94a3b8; text-align: right; }
.msn-sel-tbl .msn-sel-amt { font-weight: 700; color: #0f1c3f; text-align: right; }
.msn-sel-tbl .msn-sel-amt.msn-pending { color: #94a3b8; font-weight: 400; }
.msn-sel-remove {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: #fee2e2; color: #991b1b;
  font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.msn-sel-remove:hover { background: #fca5a5; }

/* Footer bar inside card */
.msn-items-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}
.msn-items-total-line {
  font-size: 14px; font-weight: 700; color: #0f1c3f;
}
.msn-items-total-line span { color: #c9a227; }

/* No items placeholder */
.msn-no-items {
  text-align: center; padding: 24px;
  color: #94a3b8; font-size: 13.5px;
}