/* ── Overlay modal ───────────────────────────────────────── */
.ret2-modal {
  background    : var(--bg2);
  border-radius : var(--radius);
  border        : 1px solid var(--border);
  width         : 100%;
  max-width     : 820px;
  display       : flex;
  flex-direction: column;
  max-height    : calc(100vh - 40px);
  overflow      : hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.ret2-hdr {
  display        : flex;
  align-items    : flex-start;
  justify-content: space-between;
  padding        : 18px 20px 14px;
  border-bottom  : 1px solid var(--border);
  flex-shrink    : 0;
}
.ret2-title {
  font-size  : 17px;
  font-weight: 600;
  color      : var(--text);
}
.ret2-sub {
  font-size : 12px;
  color     : var(--text2);
  margin-top: 3px;
}
.ret2-close {
  background   : none;
  border       : none;
  color        : var(--text2);
  cursor       : pointer;
  font-size    : 16px;
  padding      : 3px 7px;
  border-radius: var(--radius-sm);
  line-height  : 1;
  transition   : background var(--transition), color var(--transition);
}
.ret2-close:hover { background: var(--bg3); color: var(--text); }

/* ── Returner bar ────────────────────────────────────────── */
.ret2-rbar {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 10px 20px;
  background   : rgba(59, 130, 246, 0.06);
  border-bottom: 1px solid var(--border);
  flex-shrink  : 0;
}
.ret2-avatar {
  width          : 26px;
  height         : 26px;
  border-radius  : 50%;
  background     : var(--bg3);
  border         : 1px solid var(--border2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 11px;
  font-weight    : 600;
  color          : var(--accent2);
  flex-shrink    : 0;
}
.ret2-rbar-text         { font-size: 12px; color: var(--text2); }
.ret2-rbar-text strong  { font-weight: 600; color: var(--text); }
.ret2-rbar-note         { margin-left: auto; font-size: 11px; color: var(--text3); }

/* ── Verify strip ────────────────────────────────────────── */
.ret2-vstrip {
  display    : flex;
  align-items: center;
  gap        : 8px;
  padding    : 9px 20px;
  font-size  : 12px;
  font-weight: 500;
  flex-shrink: 0;
  transition : background var(--transition), color var(--transition);
}
.ret2-vs-empty { background: var(--bg3);                      color: var(--text2); }
.ret2-vs-pend  { background: rgba(245, 158, 11, 0.10);        color: var(--amber); }
.ret2-vs-ok    { background: rgba( 16, 185, 129, 0.10);       color: var(--green); }

.ret2-vdot {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  flex-shrink  : 0;
}
.ret2-vs-empty .ret2-vdot { background: var(--text3); }
.ret2-vs-pend  .ret2-vdot { background: var(--amber); }
.ret2-vs-ok    .ret2-vdot { background: var(--green); }

.ret2-vr {
  margin-left: auto;
  font-size  : 11px;
  font-weight: 400;
  opacity    : .65;
}

/* ── Two panels ──────────────────────────────────────────── */
.ret2-panels {
  display              : grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height           : 380px;
  flex                 : 1;
  overflow             : hidden;
}
.ret2-panel {
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
}
.ret2-panel:first-child { border-right: 1px solid var(--border); }

/* panel header */
.ret2-phdr {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  padding        : 11px 16px 9px;
  border-bottom  : 1px solid var(--border);
  flex-shrink    : 0;
}
.ret2-ptitle {
  font-size     : 11px;
  font-weight   : 600;
  color         : var(--text2);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ret2-badge {
  font-size    : 11px;
  font-weight  : 600;
  padding      : 2px 9px;
  border-radius: 20px;
  background   : var(--bg3);
  color        : var(--text2);
}
.ret2-badge-blue  { background: rgba(59,130,246,0.12);  color: var(--accent2); }
.ret2-badge-green { background: rgba(16,185,129,0.12);  color: var(--green);   }

/* ── Search bar ──────────────────────────────────────────── */
.ret2-search {
  position     : relative;
  padding      : 9px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink  : 0;
}
.ret2-sinput {
  width        : 100%;
  padding      : 7px 11px 7px 32px;
  border       : 1px solid var(--border2);
  border-radius: var(--radius-sm);
  font-size    : 13px;
  background   : var(--bg3);
  color        : var(--text);
  outline      : none;
  font-family  : inherit;
  transition   : border-color var(--transition), box-shadow var(--transition);
}
.ret2-sinput:focus {
  border-color: var(--accent);
  box-shadow  : 0 0 0 3px var(--accent-glow);
}
.ret2-sinput::placeholder { color: var(--text3); }
.ret2-sico {
  position      : absolute;
  left          : 22px;
  top           : 50%;
  transform     : translateY(-50%);
  font-size     : 12px;
  color         : var(--text3);
  pointer-events: none;
}

/* ── Left: item list ─────────────────────────────────────── */
.ret2-ilist {
  overflow-y: auto;
  flex      : 1;
  padding   : 8px;
}

/* "Add all" shortcut */
.ret2-add-all {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  width          : calc(100% - 16px);
  margin         : 4px 8px 6px;
  padding        : 8px 12px;
  border-radius  : var(--radius-sm);
  border         : 1px dashed var(--border2);
  background     : none;
  font-size      : 12px;
  color          : var(--text2);
  cursor         : pointer;
  font-family    : inherit;
  transition     : background var(--transition), border-color var(--transition), color var(--transition);
}
.ret2-add-all:hover {
  background  : var(--bg3);
  border-color: var(--accent);
  color       : var(--accent2);
}

/* item row */
.ret2-irow {
  display      : flex;
  align-items  : center;
  gap          : 10px;
  padding      : 9px 10px;
  border-radius: var(--radius-sm);
  cursor       : pointer;
  border       : 1px solid transparent;
  transition   : background var(--transition), border-color var(--transition);
}
.ret2-irow:hover {
  background  : var(--bg3);
  border-color: var(--border);
}
.ret2-iinfo { flex: 1; min-width: 0; }
.ret2-iname {
  font-size    : 13px;
  font-weight  : 600;
  color        : var(--text);
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
}
.ret2-imeta {
  display    : flex;
  gap        : 6px;
  align-items: center;
  margin-top : 3px;
  flex-wrap  : wrap;
}
.ret2-bc {
  background   : var(--bg4);
  padding      : 1px 6px;
  border-radius: 4px;
  font-size    : 10px;
  font-family  : 'DM Mono', monospace;
  color        : var(--text2);
  border       : 1px solid var(--border);
}
.ret2-sn { font-size: 10px; color: var(--text3); }

/* + add button */
.ret2-abtn {
  width          : 26px;
  height         : 26px;
  border-radius  : var(--radius-sm);
  border         : 1px solid var(--border2);
  background     : none;
  cursor         : pointer;
  font-size      : 16px;
  color          : var(--text2);
  display        : flex;
  align-items    : center;
  justify-content: center;
  flex-shrink    : 0;
  line-height    : 1;
  transition     : background var(--transition), border-color var(--transition), color var(--transition);
}
.ret2-abtn:hover {
  background  : rgba(59,130,246,0.12);
  border-color: var(--accent);
  color       : var(--accent2);
}

/* ── Right: cart ─────────────────────────────────────────── */
.ret2-clist {
  overflow-y    : auto;
  flex          : 1;
  padding       : 8px;
  display       : flex;
  flex-direction: column;
  gap           : 5px;
}
.ret2-citem {
  display      : flex;
  align-items  : flex-start;
  gap          : 9px;
  padding      : 10px 11px;
  border-radius: var(--radius-sm);
  border       : 1px solid var(--border);
  background   : var(--bg3);
  transition   : background var(--transition), border-color var(--transition);
}
.ret2-citem.ret2-repair {
  background  : rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.25);
}
.ret2-cnum {
  width          : 20px;
  height         : 20px;
  border-radius  : 50%;
  background     : var(--bg4);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 10px;
  font-weight    : 600;
  color          : var(--text2);
  flex-shrink    : 0;
  margin-top     : 1px;
}
.ret2-cinfo  { flex: 1; min-width: 0; }
.ret2-cname  { font-size: 13px; font-weight: 600; color: var(--text); }
.ret2-cmeta  { display: flex; gap: 6px; margin: 3px 0 8px; flex-wrap: wrap; }

/* ── Status toggle ───────────────────────────────────────── */
.ret2-stoggle { display: flex; gap: 4px; }

.ret2-sbtn {
  padding      : 4px 10px;
  border-radius: var(--radius-sm);
  border       : 1px solid var(--border2);
  font-size    : 11px;
  font-weight  : 500;
  cursor       : pointer;
  background   : none;
  color        : var(--text2);
  font-family  : inherit;
  transition   : background var(--transition), border-color var(--transition), color var(--transition);
}

/* Available button — green hover */
.ret2-sbtn-avail:hover {
  background  : rgba(16, 185, 129, 0.12);
  border-color: var(--green);
  color       : var(--green);
}
/* Available active state */
.ret2-sbtn-avail.ret2-sa {
  background  : rgba(16, 185, 129, 0.15);
  border-color: var(--green);
  color       : var(--green);
}

/* Repair button — red hover */
.ret2-sbtn-repair:hover {
  background  : rgba(239, 68, 68, 0.12);
  border-color: var(--red);
  color       : var(--red);
}
/* Repair active state */
.ret2-sbtn-repair.ret2-sr {
  background  : rgba(239, 68, 68, 0.15);
  border-color: var(--red);
  color       : var(--red);
}

/* delete button */
.ret2-delbtn {
  background   : none;
  border       : none;
  cursor       : pointer;
  color        : var(--text3);
  font-size    : 13px;
  padding      : 3px 5px;
  border-radius: var(--radius-sm);
  line-height  : 1;
  flex-shrink  : 0;
  margin-top   : 1px;
  transition   : background var(--transition), color var(--transition);
}
.ret2-delbtn:hover {
  background: rgba(239, 68, 68, 0.12);
  color     : var(--red);
}

/* ── Empty states ────────────────────────────────────────── */
.ret2-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 48px 20px;
  height         : 100%;
  text-align     : center;
}
.ret2-eico {
  width          : 36px;
  height         : 36px;
  border-radius  : 50%;
  background     : var(--bg4);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 15px;
  color          : var(--text3);
  margin-bottom  : 2px;
}
.ret2-empty p     { font-size: 13px; color: var(--text2); font-weight: 500; }
.ret2-empty small { font-size: 11px; color: var(--text3); }

/* ── Footer ──────────────────────────────────────────────── */
.ret2-footer {
  display    : flex;
  align-items: center;
  gap        : 10px;
  padding    : 13px 18px;
  border-top : 1px solid var(--border);
  flex-shrink: 0;
}
.ret2-fsum { margin-right: auto; font-size: 12px; color: var(--text3); }
.ret2-fsum span { font-weight: 600; color: var(--text2); }

.ret2-btn-sec {
  padding      : 8px 18px;
  border-radius: var(--radius-sm);
  border       : 1px solid var(--border2);
  background   : none;
  font-size    : 13px;
  color        : var(--text2);
  cursor       : pointer;
  font-family  : inherit;
  transition   : background var(--transition), color var(--transition), border-color var(--transition);
}
.ret2-btn-sec:hover { background: var(--bg3); border-color: var(--border); color: var(--text); }

.ret2-btn-pri {
  padding      : 8px 20px;
  border-radius: var(--radius-sm);
  border       : none;
  background   : var(--accent);
  font-size    : 13px;
  font-weight  : 600;
  color        : #fff;
  cursor       : pointer;
  display      : flex;
  align-items  : center;
  gap          : 7px;
  font-family  : inherit;
  transition   : opacity var(--transition), box-shadow var(--transition);
}
.ret2-btn-pri:hover    { opacity: .85; box-shadow: 0 0 16px var(--accent-glow); }
.ret2-btn-pri:disabled { opacity: .35; cursor: default; }

/* Missing button — orange/amber hover */
.ret2-sbtn-missing:hover {
  background  : rgba(245, 158, 11, 0.12);
  border-color: var(--amber);
  color       : var(--amber);
}
/* Missing active state */
.ret2-sbtn-missing.ret2-sm {
  background  : rgba(245, 158, 11, 0.15);
  border-color: var(--amber);
  color       : var(--amber);
}

/* Missing cart item highlight */
.ret2-citem.ret2-missing {
  background  : rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}

.pir-audit-addedby {
  font-size: 0.75rem;                 /* smaller text */
  font-weight: 600;                   /* slightly bold for visibility */
  color: var(--accent);               /* keep your theme color */
  background: rgba(0, 0, 0, 0.04);    /* soft background highlight */
  padding: 2px 6px;                   /* small pill spacing */
  border-radius: 6px;                 /* rounded look */
  letter-spacing: 0.3px;              /* improves readability */
  display: inline-block;              /* ensures padding works nicely */
}