/* =====================================================================================
   item-details.css — the Item Details modal on the Heritage design system (m4s.css tokens).

   Scoped to #itemDetailsModal. Linked from templates/_shared_modals.html, so every page that
   includes the modal gets it — including /sellers (index.html), which does not load m4s.css,
   which is why the tokens below are declared on the modal itself with concrete Heritage values
   rather than inherited from :root[data-theme="heritage"].

   The body is rendered by static/js/modules/modals/item-details-modal.js. It emits BAM's own
   classes (qr-*, item-card*, split-lot-*, bad-unit-*, copy-id-*) plus the idm-* classes this
   file introduces. Rules are written with the #itemDetailsModal prefix so they beat the legacy
   definitions in dashboard.css without !important. No Tailwind anywhere.
   ===================================================================================== */

#itemDetailsModal {
  --idm-ink: #0E1C4F; --idm-muted: #6a6c7e; --idm-forest: #336659; --idm-navy: #0E1C4F;
  --idm-cream: #FAECC3; --idm-ivory: #F3EFE8; --idm-taupe: #BBA591;
  --idm-paper: #fbfaf7; --idm-tile: #f6f2ea; --idm-tile2: #f0ebe2;
  --idm-line: rgba(14,28,79,.12); --idm-line2: rgba(14,28,79,.08);
  --idm-link: #336659; --idm-ok: #336659; --idm-ok-bg: rgba(51,102,89,.12);
  --idm-bad: #b5482f; --idm-bad-bg: rgba(181,72,47,.12); --idm-bad-deep: #8c2f1d;
  --idm-warn: #8f6206; --idm-warn-bg: rgba(250,236,195,.9); --idm-warn-dot: #d9a441;
  --idm-serif: "Fraunces", Georgia, serif; --idm-sans: "Inter", system-ui, sans-serif;
  --idm-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --idm-radius: 18px; --idm-radius-sm: 12px;
  font: 15px/1.45 var(--idm-sans); color: var(--idm-ink);
}

/* ---- overlay + box (the former Tailwind utilities, now the real rules) ---- */
#itemDetailsModal.hidden { display: none; }
#itemDetailsModal:not(.hidden) {
  display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center;
  padding: 16px; background: rgba(14,28,79,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#itemDetailsModalContent {
  background: var(--idm-paper); width: 95vw; max-width: 1400px; max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column; border-radius: 22px; border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 80px rgba(14,28,79,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
#itemDetailsHeader {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 24px; background: var(--idm-navy); color: #fff; cursor: move; user-select: none; -webkit-user-select: none;
}
#itemDetailsHeader h2 { margin: 0; font: 600 24px/1.2 var(--idm-serif); letter-spacing: -.01em; color: #fff; }
#itemDetailsHeader h2 small { display: block; font: 500 12px/1.2 var(--idm-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--idm-cream); margin-bottom: 4px; }
#itemDetailsModal .idm-close {
  border: 0; background: transparent; color: rgba(255,255,255,.75); font-size: 30px; line-height: 1; padding: 0 4px; cursor: pointer;
  border-radius: 8px; transition: color .15s, background .15s;
}
#itemDetailsModal .idm-close:hover { color: #fff; background: rgba(255,255,255,.12); }
#itemDetailsContent { overflow-y: auto; flex: 1; padding: 24px; min-height: 0; }
#itemDetailsModal .idm-loading { display: flex; align-items: center; justify-content: center; padding: 80px 0; color: var(--idm-muted); font-size: 15px; }
#itemDetailsModal .empty-state { text-align: center; padding: 40px 16px; color: var(--idm-muted); }
#itemDetailsModal .empty-state h3 { font: 600 18px var(--idm-serif); color: var(--idm-ink); margin: 8px 0; }
#itemDetailsModal .empty-state-icon { color: var(--idm-warn); display: inline-flex; }

/* ---- type + links ---- */
#itemDetailsModal a, #itemDetailsModal .link-cell { color: var(--idm-link); text-decoration: none; }
#itemDetailsModal a:hover, #itemDetailsModal .link-cell:hover { text-decoration: underline; }
#itemDetailsModal h3, #itemDetailsModal h4, #itemDetailsModal h5 { color: var(--idm-ink); }
#itemDetailsModal .idm-h {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px; padding: 0;
  font: 600 19px/1.25 var(--idm-serif); letter-spacing: -.01em; color: var(--idm-ink); background: none; border: 0; box-shadow: none;
}
#itemDetailsModal .idm-h svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--idm-forest); }
#itemDetailsModal .idm-h-gap { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--idm-line2); }
#itemDetailsModal .qr-section > h4 { font: 600 19px/1.25 var(--idm-serif); letter-spacing: -.01em; margin: 0 0 14px; color: var(--idm-ink); }
#itemDetailsModal .idm-ic { display: inline-flex; vertical-align: -3px; width: 16px; height: 16px; flex: 0 0 auto; }
#itemDetailsModal .idm-ic svg { width: 100%; height: 100%; }

/* ---- panels (.tile-style) ---- */
#itemDetailsModal .idm-panel {
  background: var(--idm-tile); border: 1px solid rgba(255,255,255,.85); border-radius: var(--idm-radius);
  padding: 22px; margin-bottom: 22px; min-width: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(14,28,79,.05);
}
#itemDetailsModal .idm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
#itemDetailsModal .idm-grid2 > .idm-panel { margin-bottom: 0; }
#itemDetailsModal .idm-rows { display: grid; gap: 12px; font-size: 15px; }
#itemDetailsModal .idm-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
#itemDetailsModal .idm-row > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
#itemDetailsModal .idm-col { display: flex; flex-direction: column; gap: 8px; }
#itemDetailsModal .idm-k { color: var(--idm-muted); font-size: 13px; letter-spacing: .02em; flex: 0 0 auto; }
#itemDetailsModal .idm-v { font-weight: 500; color: var(--idm-ink); }
#itemDetailsModal .idm-v b, #itemDetailsModal .idm-strong { font-weight: 600; }
#itemDetailsModal .idm-mono { font-family: var(--idm-mono); font-size: 13px; }
#itemDetailsModal .idm-muted { color: var(--idm-muted); }
#itemDetailsModal .idm-small { font-size: 13px; }
#itemDetailsModal .idm-ok { color: var(--idm-ok); }
#itemDetailsModal .idm-bad { color: var(--idm-bad); }
#itemDetailsModal .idm-warn { color: var(--idm-warn); }
#itemDetailsModal .idm-total { padding-top: 12px; border-top: 1px solid var(--idm-line); }
#itemDetailsModal .idm-total .idm-k { color: var(--idm-ink); font-size: 15px; font-weight: 600; }
#itemDetailsModal .idm-total .idm-v { font: 700 22px/1.1 var(--idm-serif); color: var(--idm-navy); letter-spacing: -.01em; }
#itemDetailsModal .idm-address { font-weight: 500; background: rgba(255,255,255,.75); padding: 12px 14px; border-radius: var(--idm-radius-sm); border: 1px solid var(--idm-line2); font-size: 14px; text-align: left !important; }
#itemDetailsModal .idm-lines { display: grid; gap: 4px; }
#itemDetailsModal .idm-line { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--idm-muted); }

/* ---- item cards (the hero stack) ---- */
#itemDetailsModal .item-stack { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; }
#itemDetailsModal .item-card { background: transparent; }
#itemDetailsModal .item-stack .item-card + .item-card { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--idm-line); }
#itemDetailsModal .idm-card-main { display: flex; gap: 28px; margin-bottom: 18px; }
#itemDetailsModal .idm-card-photo { flex: 0 0 auto; }
#itemDetailsModal .idm-card-img {
  width: 220px; height: 220px; object-fit: cover; border-radius: var(--idm-radius); cursor: zoom-in; display: block;
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 10px 28px rgba(14,28,79,.14);
}
#itemDetailsModal .idm-card-noimg {
  width: 220px; height: 220px; border-radius: var(--idm-radius); display: flex; align-items: center; justify-content: center;
  background: var(--idm-tile2); color: var(--idm-taupe); border: 1px dashed rgba(14,28,79,.15);
}
#itemDetailsModal .idm-card-noimg svg { width: 56px; height: 56px; }
#itemDetailsModal .idm-card-body { flex: 1; min-width: 0; }
#itemDetailsModal .idm-title { margin: 0 0 14px; font: 600 24px/1.3 var(--idm-serif); letter-spacing: -.01em; color: var(--idm-ink); overflow-wrap: anywhere; }
#itemDetailsModal .idm-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; font-size: 15px; }
#itemDetailsModal .idm-card-grid > div { min-width: 0; }
#itemDetailsModal .idm-card-grid .idm-k { margin-right: 8px; }
#itemDetailsModal .idm-money { font: 700 20px/1.1 var(--idm-serif); margin-left: 6px; letter-spacing: -.01em; }
#itemDetailsModal .idm-money.idm-ok { color: var(--idm-ok); } #itemDetailsModal .idm-money.idm-bad { color: var(--idm-bad); } #itemDetailsModal .idm-money.idm-muted { color: var(--idm-ink); }
#itemDetailsModal .idm-note { color: var(--idm-muted); font-size: 13px; margin-left: 6px; }
#itemDetailsModal .idm-model { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#itemDetailsModal .idm-model-select {
  padding: 4px 28px 4px 10px; border: 1px solid var(--idm-line); border-radius: 999px; font: 600 13px var(--idm-sans); max-width: 200px; min-height: 30px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236a6c7e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
#itemDetailsModal .idm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--idm-line); border-radius: 999px; background: rgba(255,255,255,.75); color: var(--idm-muted); cursor: pointer;
}
#itemDetailsModal .idm-icon-btn:hover { color: var(--idm-forest); border-color: var(--idm-forest); background: #fff; }
#itemDetailsModal .idm-icon-btn svg { width: 14px; height: 14px; }
#itemDetailsModal .item-card-divider { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; font: 600 12px var(--idm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--idm-muted); }
#itemDetailsModal .item-card-divider svg { width: 16px; height: 16px; color: var(--idm-taupe); }
#itemDetailsModal .item-card-foreign { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--idm-muted); }
#itemDetailsModal .item-card-open, #itemDetailsModal .item-card-more {
  background: none; border: none; padding: 0; color: var(--idm-link); font: 600 13px var(--idm-sans); cursor: pointer;
}
#itemDetailsModal .item-card-open:hover, #itemDetailsModal .item-card-more:hover { text-decoration: underline; }
#itemDetailsModal .item-card-more { text-align: left; margin: 4px 0 12px; }

/* copy-id rows */
#itemDetailsModal .copy-id-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#itemDetailsModal .copy-id-value { user-select: all; -webkit-user-select: all; font-weight: 600; }
#itemDetailsModal .copy-id-value.idm-mono { font-weight: 500; }
#itemDetailsModal .copy-id-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--idm-muted); cursor: pointer; user-select: none; -webkit-user-select: none;
}
#itemDetailsModal .copy-id-btn svg { width: 14px; height: 14px; }
#itemDetailsModal .copy-id-btn:hover { background: var(--idm-ok-bg); color: var(--idm-forest); opacity: 1; }
#itemDetailsModal .copy-id-links { user-select: none; -webkit-user-select: none; color: var(--idm-muted); font-size: 13px; }
#itemDetailsModal .idm-idwrap { display: inline-flex; align-items: center; gap: 6px; }

/* ---- status pill (same treatment as the orders table) ---- */
#itemDetailsModal .idm-status-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#itemDetailsModal .idm-status {
  appearance: none; -webkit-appearance: none; height: 30px; min-height: 0; min-width: 0; width: auto; max-width: 220px;
  padding: 0 28px 0 13px; border: 0; border-radius: 999px; font: 600 12px/30px var(--idm-sans); color: #fff; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 2px 6px rgba(14,28,79,.12);
}
#itemDetailsModal .idm-status:focus { outline: none; box-shadow: 0 0 0 3px rgba(14,28,79,.18); }
#itemDetailsModal .idm-status option { background: #fff !important; color: var(--idm-ink) !important; font-weight: 500; }

/* ---- buttons (self-contained: /sellers has no m4s-bridge.css) ---- */
#itemDetailsModal .btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 18px;
  border: 1px solid var(--idm-line); background: rgba(255,255,255,.8); color: var(--idm-ink);
  font: 500 14px var(--idm-sans); cursor: pointer; text-decoration: none; box-shadow: none; transition: background .15s, box-shadow .15s, border-color .15s;
  white-space: nowrap; line-height: 1;
}
#itemDetailsModal .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
#itemDetailsModal .btn:hover { background: #fff; border-color: rgba(14,28,79,.22); transform: none; text-decoration: none; }
#itemDetailsModal .btn-secondary, #itemDetailsModal .btn-secondary:hover { color: var(--idm-ink); }
#itemDetailsModal .btn-primary, #itemDetailsModal .btn-primary:hover {
  background: var(--idm-forest); border-color: var(--idm-forest); color: #fff; border-radius: 12px; box-shadow: 0 6px 16px rgba(51,102,89,.25);
}
#itemDetailsModal .btn-primary:hover { filter: brightness(1.08); }
#itemDetailsModal .btn-bad, #itemDetailsModal .btn-bad:hover { color: var(--idm-bad); border-color: rgba(181,72,47,.45); background: rgba(255,255,255,.8); }
#itemDetailsModal .btn-bad:hover { background: var(--idm-bad-bg); }
#itemDetailsModal .btn-warn, #itemDetailsModal .btn-warn:hover { color: var(--idm-warn); border-color: rgba(143,98,6,.4); background: rgba(255,255,255,.8); }
#itemDetailsModal .btn-warn:hover { background: var(--idm-warn-bg); }
#itemDetailsModal .btn-sm, #itemDetailsModal .btn.btn-sm { min-height: 30px; font-size: 13px; padding: 0 12px; }
#itemDetailsModal .btn:disabled { opacity: .5; cursor: not-allowed; }
#itemDetailsModal .idm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idm-bad); display: inline-block; box-shadow: 0 0 0 3px rgba(181,72,47,.18); }

/* ---- inputs ---- */
#itemDetailsModal input:not([type=checkbox]):not([type=radio]), #itemDetailsModal select:not(.idm-status), #itemDetailsModal textarea {
  font: 14px var(--idm-sans); color: var(--idm-ink); border: 1px solid var(--idm-line); border-radius: 8px; background: rgba(255,255,255,.8);
}
#itemDetailsModal input:focus, #itemDetailsModal select:focus, #itemDetailsModal textarea:focus { outline: none; border-color: var(--idm-forest); box-shadow: 0 0 0 3px var(--idm-ok-bg); }
#itemDetailsModal .idm-notes {
  width: 100%; min-height: 110px; padding: 14px; font: 15px/1.5 var(--idm-sans); resize: vertical; box-sizing: border-box;
  border-radius: var(--idm-radius-sm); background: rgba(255,255,255,.85);
}

/* ---- Quality & Refunds ---- */
#itemDetailsModal .qr-section { background: var(--idm-tile); border: 1px solid rgba(255,255,255,.85); border-radius: var(--idm-radius); padding: 22px; margin-bottom: 22px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(14,28,79,.05); }
#itemDetailsModal .qr-card { background: rgba(255,255,255,.72); border: 1px solid var(--idm-line2); border-radius: var(--idm-radius-sm); padding: 14px 16px; margin-bottom: 12px; }
#itemDetailsModal .qr-card-head { display: flex; align-items: center; gap: 6px; font: 600 12px var(--idm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--idm-muted); margin-bottom: 8px; }
#itemDetailsModal .qr-info { color: var(--idm-taupe); font-size: 14px; }
#itemDetailsModal .qr-info-bubble { background: var(--idm-navy); color: #fff; font: 400 12px/1.4 var(--idm-sans); letter-spacing: 0; text-transform: none; border-radius: 10px; }
#itemDetailsModal .qr-summary { color: var(--idm-muted); font-size: 13px; }
#itemDetailsModal .qr-muted { color: var(--idm-muted); font-size: 14px; }
#itemDetailsModal .qr-error, #itemDetailsModal .qr-muted.qr-error { color: var(--idm-bad); }
#itemDetailsModal .qr-unrecorded { color: var(--idm-warn); background: var(--idm-warn-bg); border: 1.5px solid currentColor; border-radius: 9px; padding: 3px 9px; font-size: 13px; font-weight: 600; }
#itemDetailsModal .qr-field { color: var(--idm-muted); font-size: 13px; }
#itemDetailsModal .qr-field input, #itemDetailsModal .qr-field select { padding: 8px 10px; font-size: 14px; width: 100%; box-sizing: border-box; }
#itemDetailsModal .qr-amount { text-align: right; font-family: var(--idm-mono); }
#itemDetailsModal .qr-net { margin-top: 10px; font-size: 13px; color: var(--idm-ink); }
#itemDetailsModal .qr-link { background: none; border: none; padding: 0; color: var(--idm-link); font: 600 14px var(--idm-sans); cursor: pointer; }
#itemDetailsModal .qr-link:hover { text-decoration: underline; }
#itemDetailsModal .qr-help { margin: 8px 0 10px; font-size: 13px; color: var(--idm-muted); }
#itemDetailsModal .qr-help.qr-error { color: var(--idm-bad); font-weight: 600; }
#itemDetailsModal .qr-legacy-chip { background: var(--idm-tile2); color: var(--idm-muted); border-radius: 6px; }
#itemDetailsModal .qr-legacy-note { color: var(--idm-muted); }
#itemDetailsModal .qr-icon-btn { color: var(--idm-muted); border-radius: 8px; }
#itemDetailsModal .qr-icon-btn:hover { background: var(--idm-bad-bg); color: var(--idm-bad); }
#itemDetailsModal .qr-text-btn {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--idm-line);
  background: rgba(255,255,255,.8); color: var(--idm-link); font: 500 13px var(--idm-sans); cursor: pointer;
}
#itemDetailsModal .qr-text-btn:hover { background: #fff; border-color: var(--idm-forest); }
#itemDetailsModal .qr-unsaved { background: var(--idm-warn-bg); border: 1.5px solid var(--idm-warn); color: var(--idm-warn); border-radius: 9px; font-size: 12px; font-weight: 600; padding: 2px 9px; }
#itemDetailsModal .refund-lost { color: var(--idm-bad); font-size: 12px; font-weight: 600; margin-top: 6px; }
#itemDetailsModal .qr-denied-loss { font-size: 13px; }
#itemDetailsModal .idm-sep { color: var(--idm-taupe); }
#itemDetailsModal .idm-units-input { width: 64px; padding: 4px 6px; text-align: center; }

/* bad units */
#itemDetailsModal .bad-unit-picker-title { font: 600 15px var(--idm-sans); color: var(--idm-ink); }
#itemDetailsModal .bad-unit-picker-hint, #itemDetailsModal .bad-unit-package-note { color: var(--idm-muted); }
#itemDetailsModal .bad-unit-choice { background: rgba(255,255,255,.8); border: 1px solid var(--idm-line2); border-radius: var(--idm-radius-sm); }
#itemDetailsModal .bad-unit-choice input[type="checkbox"] { accent-color: var(--idm-forest); width: 16px; height: 16px; }
#itemDetailsModal .bad-unit-choice-photo { background: var(--idm-tile2); border-radius: 8px; color: var(--idm-taupe); }
#itemDetailsModal .bad-unit-choice-photo svg { width: 22px; height: 22px; }
#itemDetailsModal .bad-unit-choice-line1 { color: var(--idm-ink); }
#itemDetailsModal .bad-unit-choice-line2 { color: var(--idm-muted); }
#itemDetailsModal .bad-unit-choice-step { color: var(--idm-ink); }
#itemDetailsModal .bad-unit-picker-notnow, #itemDetailsModal .bad-unit-picker-link { color: var(--idm-link); font-weight: 500; }
#itemDetailsModal .bad-unit-cap-note { color: var(--idm-bad); }
#itemDetailsModal .idm-bu-rows { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
#itemDetailsModal .bad-unit-row {
  width: 100%; box-sizing: border-box; background: rgba(255,255,255,.8); border: 1px solid var(--idm-line2); border-left: 4px solid var(--idm-taupe);
  border-radius: var(--idm-radius-sm); padding: 12px 14px; text-align: left;
}
#itemDetailsModal .bad-unit-row[data-issue-type="cosmetic"] { border-left-color: var(--idm-warn-dot); }
#itemDetailsModal .bad-unit-row[data-issue-type="nonfunctional"] { border-left-color: var(--idm-bad); }
#itemDetailsModal .bad-unit-row[data-issue-type="both"] { border-left-color: var(--idm-bad-deep); }
#itemDetailsModal .bad-unit-row[data-issue-type="unspecified"] { border-left-color: var(--idm-muted); }
#itemDetailsModal .idm-bu-what { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 10px; }
#itemDetailsModal .idm-bu-types { display: inline-flex; border: 1px solid var(--idm-line); border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.8); }
#itemDetailsModal [data-action="bad-unit-type"] { padding: 5px 12px; border: 0; background: transparent; color: var(--idm-ink); font: 500 12px var(--idm-sans); cursor: pointer; }
#itemDetailsModal [data-action="bad-unit-type"] + [data-action="bad-unit-type"] { border-left: 1px solid var(--idm-line); }
#itemDetailsModal [data-action="bad-unit-type"][aria-pressed="true"] { background: var(--idm-navy); color: #fff; }
#itemDetailsModal .idm-bu-group { margin-top: 8px; }
#itemDetailsModal .idm-bu-label { font: 600 11px var(--idm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--idm-muted); margin-bottom: 4px; }
#itemDetailsModal [data-action="bad-unit-reason"] {
  padding: 4px 11px; margin: 0 6px 6px 0; border-radius: 999px; font: 500 12px var(--idm-sans); cursor: pointer;
  border: 1px solid var(--idm-line); background: rgba(255,255,255,.8); color: var(--idm-ink);
}
#itemDetailsModal [data-action="bad-unit-reason"][aria-pressed="true"][data-category="cosmetic"] { background: var(--idm-warn-bg); border-color: var(--idm-warn-dot); color: var(--idm-warn); font-weight: 600; }
#itemDetailsModal [data-action="bad-unit-reason"][aria-pressed="true"][data-category="nonfunctional"] { background: var(--idm-bad); border-color: var(--idm-bad); color: #fff; font-weight: 600; }
#itemDetailsModal .idm-bu-split { background: none; border: none; padding: 0; color: var(--idm-link); font: 500 12px var(--idm-sans); cursor: pointer; text-decoration: underline; }
#itemDetailsModal .idm-bu-error { margin-top: 6px; color: var(--idm-bad); font-size: 12px; }
#itemDetailsModal .idm-bu-hint { margin-top: 8px; font-size: 12px; color: var(--idm-muted); }
#itemDetailsModal .idm-bu-notes { display: block; width: 100%; margin-top: 10px; padding: 8px 10px; box-sizing: border-box; font-size: 13px; }
#itemDetailsModal .idm-bu-errors { margin-top: 10px; padding: 10px 12px; background: var(--idm-bad-bg); border: 1px solid rgba(181,72,47,.3); border-radius: 10px; color: var(--idm-bad); font-size: 13px; }
#itemDetailsModal .idm-bu-select { padding: 4px 8px; font-size: 13px; font-weight: 600; max-width: 280px; min-height: 30px; }
#itemDetailsModal .idm-bu-empty { color: var(--idm-muted); font-size: 13px; }
#itemDetailsModal .idm-bu-add { margin-top: 10px; }

/* split lot */
#itemDetailsModal .split-lot-btn { padding: 4px 10px; font: 600 11px var(--idm-sans); background: rgba(255,255,255,.8); border: 1px solid var(--idm-line); border-radius: 999px; color: var(--idm-ink); cursor: pointer; }
#itemDetailsModal .split-lot-btn:hover { background: #fff; border-color: var(--idm-forest); color: var(--idm-forest); }
#itemDetailsModal .split-lot-badge { padding: 3px 10px; border-radius: 9px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.6); border: 1.5px solid var(--idm-navy); color: var(--idm-navy); }
#itemDetailsModal .split-lot-panel { margin-top: 16px; padding: 16px; background: var(--idm-tile); border: 1px solid rgba(255,255,255,.85); border-radius: var(--idm-radius-sm); font-size: 14px; }
#itemDetailsModal .split-lot-panel h5 { margin: 0 0 12px; font: 600 16px var(--idm-serif); color: var(--idm-ink); }
#itemDetailsModal .split-lot-row select, #itemDetailsModal .split-lot-row input, #itemDetailsModal .split-place-row select { padding: 6px 8px; border: 1px solid var(--idm-line); border-radius: 8px; font-size: 13px; }
#itemDetailsModal .split-lot-footer { color: var(--idm-muted); } #itemDetailsModal .split-lot-footer strong { color: var(--idm-ink); }
#itemDetailsModal .split-lot-table th { font: 600 11px var(--idm-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--idm-muted); border-bottom: 1px solid var(--idm-line); }
#itemDetailsModal .split-lot-table td { border-bottom: 1px solid var(--idm-line2); }
#itemDetailsModal .split-lot-table tfoot td { font-weight: 600; border-bottom: 0; }
#itemDetailsModal [data-role="split-placements"] { background: rgba(255,255,255,.75); border: 1px solid var(--idm-line2); border-radius: 10px; color: var(--idm-ink); }

/* ---- edit history ---- */
#itemDetailsModal .idm-history { max-height: 220px; overflow-y: auto; padding-right: 4px; }
#itemDetailsModal .idm-hist { padding: 10px 14px; background: rgba(255,255,255,.75); border-radius: var(--idm-radius-sm); margin-bottom: 8px; border-left: 3px solid var(--idm-forest); }
#itemDetailsModal .idm-hist-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
#itemDetailsModal .idm-hist-field { font-weight: 600; color: var(--idm-ink); }
#itemDetailsModal .idm-hist-date { font-size: 12px; color: var(--idm-muted); font-family: var(--idm-mono); }
#itemDetailsModal .idm-hist-body { font-size: 14px; color: var(--idm-muted); }
#itemDetailsModal .idm-old { text-decoration: line-through; color: var(--idm-bad); }
#itemDetailsModal .idm-new { color: var(--idm-ok); font-weight: 600; }
#itemDetailsModal .idm-arrow { margin: 0 8px; color: var(--idm-taupe); }
#itemDetailsModal .idm-center { text-align: center; padding: 20px; color: var(--idm-muted); }
#itemDetailsModal .idm-center.idm-bad { color: var(--idm-bad); }

/* ---- Manual Budget Flag (warn panel) ---- */
#itemDetailsModal .idm-panel.idm-warn-panel { background: var(--idm-warn-bg); border-color: rgba(217,164,65,.55); box-shadow: inset 0 3px 0 var(--idm-warn-dot), 0 6px 18px rgba(14,28,79,.05); }
#itemDetailsModal .idm-warn-panel .idm-h svg { color: var(--idm-warn); }
#itemDetailsModal .idm-flag-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
#itemDetailsModal .idm-flag-copy p { margin: 0 0 6px; color: var(--idm-warn); font-size: 14px; }
#itemDetailsModal .idm-flag-copy p:last-child { margin: 0; font-size: 13px; color: var(--idm-muted); }
#itemDetailsModal .idm-flag-state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 9px; border: 1.5px solid currentColor; font-weight: 600; font-size: 12px; background: rgba(255,255,255,.55); }

/* ---- sticky footer toolbar ---- */
#itemDetailsModal .idm-footer {
  position: sticky; bottom: 0; z-index: 2; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap;
  margin: 8px -24px -24px; padding: 14px 24px; background: rgba(251,250,247,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--idm-line); box-shadow: 0 -8px 24px rgba(14,28,79,.06);
}
#itemDetailsModal .idm-footer-left, #itemDetailsModal .idm-footer-right { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#itemDetailsModal .idm-footer-right { margin-left: auto; }

/* ---- narrow screens ---- */
@media (max-width: 760px) {
  #itemDetailsModal:not(.hidden) { padding: 0; align-items: stretch; }
  #itemDetailsModalContent { width: 100vw; max-height: 100vh; border-radius: 0; border: 0; }
  #itemDetailsHeader { padding: 14px 16px; cursor: default; }
  #itemDetailsContent { padding: 16px; }
  #itemDetailsModal .idm-panel, #itemDetailsModal .qr-section { padding: 16px; border-radius: var(--idm-radius-sm); }
  #itemDetailsModal .idm-grid2 { grid-template-columns: 1fr; gap: 14px; }
  #itemDetailsModal .idm-card-main { flex-direction: column; gap: 14px; }
  #itemDetailsModal .idm-card-img, #itemDetailsModal .idm-card-noimg { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; max-height: 260px; object-fit: cover; }
  #itemDetailsModal .idm-card-grid { grid-template-columns: 1fr; gap: 10px; }
  #itemDetailsModal .idm-title { font-size: 20px; }
  #itemDetailsModal .idm-row { flex-wrap: wrap; } #itemDetailsModal .idm-row > :last-child { text-align: left; }
  #itemDetailsModal .idm-status-wrap { justify-content: flex-start; }
  #itemDetailsModal .idm-flag-body { flex-direction: column; align-items: flex-start; }
  #itemDetailsModal .qr-grid { grid-template-columns: 1fr; }
  #itemDetailsModal .idm-footer { margin: 8px -16px -16px; padding: 12px 16px; }
  #itemDetailsModal .idm-footer .btn { flex: 1 1 auto; justify-content: center; }
  #itemDetailsModal .idm-footer-left, #itemDetailsModal .idm-footer-right { width: 100%; }
}
@media print {
  #itemDetailsModal:not(.hidden) { position: static; background: none; padding: 0; }
  #itemDetailsModalContent { max-height: none; box-shadow: none; }
  #itemDetailsModal .idm-footer, #itemDetailsModal .idm-close { display: none; }
}

/* =====================================================================================
   Hover glow for every clickable thing (Oliver, Oct 27): same language as the /orders stat tiles,
   buttons and row cells — a forest ring + soft halo and a 1px lift. Appended last so these win.
   ===================================================================================== */
#itemDetailsModal .btn, #itemDetailsModal .qr-text-btn, #itemDetailsModal .idm-icon-btn, #itemDetailsModal .copy-id-btn,
#itemDetailsModal .idm-model-select, #itemDetailsModal .idm-status, #itemDetailsModal .qr-icon-btn, #itemDetailsModal .split-lot-btn,
#itemDetailsModal [data-action="bad-unit-type"], #itemDetailsModal [data-action="bad-unit-reason"], #itemDetailsModal .bad-unit-choice,
#itemDetailsModal .idm-card-img, #itemDetailsModal .idm-notes, #itemDetailsModal .qr-field input, #itemDetailsModal .qr-field select, #itemDetailsModal .idm-units-input {
  transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .2s, filter .15s;
}
#itemDetailsModal .btn { --idm-glow: rgba(14,28,79,.16); }
#itemDetailsModal .btn-primary { --idm-glow: rgba(51,102,89,.38); }
#itemDetailsModal .btn-bad { --idm-glow: rgba(181,72,47,.3); }
#itemDetailsModal .btn-warn { --idm-glow: rgba(217,164,65,.4); }
#itemDetailsModal .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--idm-glow), 0 0 18px 2px var(--idm-glow); }
#itemDetailsModal .btn-primary:not(:disabled):hover { box-shadow: 0 0 0 3px var(--idm-glow), 0 0 18px 2px var(--idm-glow), 0 6px 16px rgba(51,102,89,.25); }
#itemDetailsModal .btn:not(:disabled):active { transform: none; box-shadow: 0 0 0 2px var(--idm-glow); }
/* small pills + icon buttons */
#itemDetailsModal .qr-text-btn:hover, #itemDetailsModal .split-lot-btn:hover, #itemDetailsModal .idm-icon-btn:hover,
#itemDetailsModal .qr-icon-btn:hover, #itemDetailsModal [data-action="bad-unit-reason"]:hover {
  transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(51,102,89,.16), 0 0 14px 1px rgba(51,102,89,.22); }
#itemDetailsModal .qr-icon-btn:hover { box-shadow: 0 0 0 3px rgba(181,72,47,.16), 0 0 14px 1px rgba(181,72,47,.22); }
#itemDetailsModal .copy-id-btn:hover { box-shadow: 0 0 0 2px rgba(51,102,89,.2), 0 0 10px 1px rgba(51,102,89,.22); }
#itemDetailsModal [data-action="bad-unit-type"]:hover:not([aria-pressed="true"]) { background: var(--idm-ok-bg); color: var(--idm-forest); }
/* model picker + status pill */
#itemDetailsModal .idm-model-select:hover { border-color: var(--idm-forest); background-color: #fff; transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(51,102,89,.16), 0 0 14px 1px rgba(51,102,89,.22); }
#itemDetailsModal .idm-status:hover { filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px rgba(14,28,79,.14), 0 0 14px 2px rgba(14,28,79,.18); }
/* links (seller, listing, tracking, copy-id links) */
#itemDetailsModal a.link-cell, #itemDetailsModal .copy-id-links a, #itemDetailsModal .qr-link, #itemDetailsModal .bad-unit-picker-link {
  display: inline-block; padding: 1px 6px; margin: -1px -6px; border-radius: 8px; transition: background .15s, box-shadow .2s; }
#itemDetailsModal a.link-cell:hover, #itemDetailsModal .copy-id-links a:hover, #itemDetailsModal .qr-link:hover, #itemDetailsModal .bad-unit-picker-link:hover {
  text-decoration: none; background: var(--idm-ok-bg); box-shadow: 0 0 0 2px rgba(51,102,89,.2), 0 0 12px 1px rgba(51,102,89,.22); }
/* fields: notes, refund amounts, units, bad-unit choices */
#itemDetailsModal .idm-notes:hover, #itemDetailsModal .qr-field input:hover, #itemDetailsModal .qr-field select:hover, #itemDetailsModal .idm-units-input:hover {
  border-color: var(--idm-forest); background: #fff; box-shadow: 0 0 0 3px rgba(51,102,89,.14), 0 0 14px 1px rgba(51,102,89,.2); }
#itemDetailsModal .idm-notes:focus, #itemDetailsModal .qr-field input:focus, #itemDetailsModal .qr-field select:focus, #itemDetailsModal .idm-units-input:focus {
  box-shadow: 0 0 0 3px rgba(51,102,89,.26), 0 0 18px 2px rgba(51,102,89,.3); }
#itemDetailsModal .bad-unit-choice:hover { border-color: var(--idm-forest); box-shadow: 0 0 0 3px rgba(51,102,89,.14), 0 0 14px 1px rgba(51,102,89,.2); cursor: pointer; }
/* the photo opens the listing / zooms — give it the same cue */
#itemDetailsModal .idm-card-img:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(51,102,89,.16), 0 12px 28px rgba(14,28,79,.18); }
/* two Save buttons were both primary: the section one is now secondary + specific, the footer keeps primary */
#itemDetailsModal .qr-save-row { display: flex; align-items: center; gap: 12px; }
@media (prefers-reduced-motion: reduce) { #itemDetailsModal * { transition: none !important; transform: none !important; } }