:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --border:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;

  --brand-yellow:#ffed00;
  --brand-green:#105541;

  --danger:#b91c1c;
  --ok:#166534;

  /* Positions list sizing */
  --pos-row-h: 34px;
  --pos-gap: 6px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
}

/* --- App layout --- */
.wrap{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:16px;
  height:100vh;
}

/* --- Left panel --- */
aside{
  padding:14px;
  border-right:1px solid var(--border);
  align-self:stretch;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* prevent whole panel scrolling */
  background:var(--panel);
}

main{
  padding:18px;
  overflow:auto; /* right side can scroll with page if needed */
}

h1{
  font-size:18px;
  margin:6px 0 12px;
  font-weight:800;
}

/* --- Brand (logo) --- */
.brandRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom: 6px;
}

.brandLogo{
  flex: 0 0 75px;     /* fixed width */
  width: 75px;
  margin: 0;
}

.brandLogo img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.pageTitle{
  margin:0;
  margin-left: 6px;
  font-size:22px;
  font-weight:800;
  line-height:1.1;
}

.resetTop{
  width:100%;
  margin: 0 0 12px 0;
}

/* --- Form blocks --- */
.block{ margin-bottom:10px; }
.block h3{
  margin:0 0 6px;
  font-size:13px;
  color:#374151;
  font-weight:800;
  letter-spacing:.2px;
}

/* Positions wrapper: acts like other blocks, but without its own box */
.positionsWrap{
  margin-bottom:10px;     /* same spacing as .block */
}
.positionsWrap > h3{
  margin:0 0 6px;
}

/* Prevent double-border/box if .positionsWrap still has .block styling */
.block.positionsWrap{
  background:transparent;
  border:none;
  padding:0;
  border-radius:0;
}

select{
  width:100%;
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
}

/* --- Positions (scrollable) --- */
.positionsBlock{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  min-height:200px;     /* required for nested scrolling */
  max-height: calc(52px + 5px + ((10 * var(--pos-row-h)) + (9 * var(--pos-gap))));
}

.posGrid{
  align-content: start;
  grid-auto-rows: var(--pos-row-h);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pos-gap);
  overflow:auto;
  min-height: 194px;
}

.posRow{
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  gap:8px;
  min-height: var(--pos-row-h);
}
.posLabel{ font-size:12px; color:var(--muted); font-weight:800; }
.posSelect{
  padding:7px 10px;
  font-size:13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
}
.posSelect option[value=""]{ color:#9ca3af; }

/* --- CTA buttons --- */
.cta{
  position:static;
  background:transparent;
  border: none;
  margin-top:10px;
  padding-bottom: 0;
  flex:0 0 auto;
}

.ctaRow{
  display:block;
}

button{
  appearance:none;
  border:none;
  background:var(--brand-green);
  color:white;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  width:100%;
}
button:hover{ filter:brightness(0.95); }

button.sec{
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  font-weight:800;
  width:auto;
  padding:10px 12px;
}
.ctaRow #validateBtn.sec{ width:100%; }

.ctaHint{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.25;
}

/* --- Existing part number list --- */
.recWrap{ margin-bottom:10px; }

.recLabelRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px;
}
.recLabelRow h3{ margin:0; }   /* use same h3 styling as other blocks */
.recMeta{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  opacity:1;                  /* undo the old .8 */
}

/* inner box matches selects / positions box */
.recBlock{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:150px;
}

.recList{
  padding:8px 6px;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  flex:1 1 auto;
}

/* remove/ignore old header/title (no longer used) */
.recHeader, .recTitle{ display:none; }

/* ITEM LAYOUT: text left, buttons right */
.recItem{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  margin:6px 2px;

  display:grid;
  grid-template-columns: 1fr 86px; /* text | buttons */
  grid-auto-rows: max-content;
  column-gap:10px;
  row-gap:6px;
  align-items:start;
}

.recPn{
  grid-column:1;
  grid-row:1;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
  font-size:12px;
  font-weight:800;
  color:var(--text);
  word-break:break-word;
}

.recMetaLine{
  grid-column:1;

  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

/* Buttons stay stacked on the right */
.recBtns{
  grid-column:2;
  grid-row:1 / span 4;      /* spans PN + 3 meta lines */
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}

.recBtn{
  width:100%;              /* fill the button column */
  padding:8px 10px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
}
.recBtn:hover{ filter:brightness(0.97); }

.recBtn.view{
  background: var(--brand-green);
  color:#fff;
  border-color: rgba(16,85,65,.8);
}

/* --- Right side --- */
.rightCard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.section{ display:flex; flex-direction:column; gap:6px; }
.sectionLabel{
  font-size:13px;
  color:#374151;
  font-weight:900;
  letter-spacing:.2px;
}

.pnLine{
  display:flex;
  align-items:center;
  gap:10px;
}

.pnPlain{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
  font-size:18px;
  font-weight:900;
  color:var(--text);
  flex:1 1 auto;
  min-width:0;
}

.quoteBtn{
  background: var(--brand-green);
  color: white;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  width: auto;
  min-width: 160px;
  white-space: nowrap;
}
.quoteBtn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* Status box */
.statusBox{
  width:160px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  border-radius:12px;
  text-transform:lowercase;
  user-select:none;
}
.statusBox.ok{
  background:rgba(22,101,52,.10);
  border-color:rgba(22,101,52,.35);
  color:var(--ok);
}
.statusBox.bad{
  background:rgba(185,28,28,.10);
  border-color:rgba(185,28,28,.35);
  color:var(--danger);
}
.statusBox.neutral{
  background:#fff;
  border-color:var(--border);
  color:var(--muted);
}

/* Messages */
.msgBox{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}
.msgLines{ font-size:13px; color:var(--muted); line-height:1.35; }
.msgLine{ padding:2px 0; }

.imagesGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.imgPanel{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:10px;
}

.imgPanel > img{
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
  display:block;
}

.imgPanelDual{
  display:grid;
  grid-template-columns:5fr 5fr;
  grid-auto-rows:max-content;
  gap:12px;
  align-items:start;
  align-content:start;
}

.imgSlot{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.imgSlotPinout img{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:calc(70vh - 40px);
  object-fit:contain;
  display:block;
}

.imgSlotProduct{
  padding-top:10px;
}

.imgSlotProduct img,
.imgPanelDual img{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
}

.imgPanelTitle{
  font-size:13px;
  font-weight:800;
  color:#374151;
  margin:0 0 10px 0;
  letter-spacing:.2px;
}

.imgPanelTitleDual{
  grid-column:1 / -1;
  margin:0 0 2px 0;
}

/* Left column is viewport height */
aside{
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;         /* prevent whole column growing off-screen */
}

/* The positions panel should be allowed to grow, then stop and scroll inside */
.positionsBlock{
  max-height: 35vh;         /* IMPORTANT: remove your fixed calc cap */
  overflow: hidden;         /* contain the scrolling child */
  display: flex;
  flex-direction: column;
}

/* Make the positions list itself scroll */
.posGrid{
  flex: 1 1 auto;
  min-height: 194px;            /* CRITICAL for nested scrolling */
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;     /* stop rows spreading vertically */
  grid-auto-rows: var(--pos-row-h); /* keep row height consistent */
}

/* No outer box for the list */
.recWrap{ margin-bottom:10px; }

.recLabelRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px;
}
.recLabelRow h3{ margin:0; }

.recMeta{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  opacity:1;
}

/* List is now the container */
.recList{
  padding:0;              /* items fill full width */
  margin:0;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  max-height:45vh;        /* optional: remove if you already constrain via flex */
}

/* Remove/neutralize old box styling if still present */
.recBlock{ border:none; background:transparent; padding:0; }

.recItem{ margin:6px 0; }

/* --- CSP-safe utilities --- */
.is-hidden{ display:none !important; }
.is-inert{ pointer-events:none !important; }

/* --- Positions sizing: grow until max-height then scroll --- */
.positionsBlock{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  overflow:hidden;
  max-height:35vh;      /* scroll starts here */
}

.posGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pos-gap);
  overflow-y:auto;
  overflow-x:hidden;
  min-height: calc((5 * var(--pos-row-h)) + (4 * var(--pos-gap))); /* 5 rows */
  align-content:start;
  grid-auto-rows: var(--pos-row-h);
}

/* --- Available part numbers list (no outer box) --- */
.recWrap{ margin-bottom:10px; }

.recLabelRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px;
}
.recLabelRow h3{ margin:0; }

.recMeta{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  opacity:1;
}

.recList{
  padding:0;                 /* items fill width */
  margin:0;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0;
  max-height:45vh;           /* scroll starts here */
}

.recEmptySmall{ padding:8px 10px; opacity:.85; font-size:10px; }

.recEmpty{
  padding:8px 10px;
  opacity:.85;
  font-size:12px;
}

/* ITEM LAYOUT: text left, buttons right */
.recItem{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  margin:6px 0;

  display:grid;
  grid-template-columns: 1fr 86px;
  grid-auto-rows: max-content;
  column-gap:10px;
  row-gap:6px;
  align-items:start;
}

.recBtns{
  grid-column:2;
  grid-row:1 / span 4;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}

.recBtn{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
}
.recBtn:hover{ filter:brightness(0.97); }

.recBtn.view{
  background: var(--brand-green);
  color:#fff;
  border-color: rgba(16,85,65,.8);
}



/* utility */
.is-hidden{ display:none !important; }

/* left panel layout */
aside{
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* keep positions scroll behaviour you liked */
.positionsBlock{
  flex:0 0 auto;
  overflow:hidden;
  max-height:35vh;              /* adjust as needed */
  display:flex;
  flex-direction:column;
}
.posGrid{
  overflow-y:auto;
  min-height: calc((5 * var(--pos-row-h)) + (4 * var(--pos-gap)));
  align-content:start;
  grid-auto-rows: var(--pos-row-h);
}

/* IMPORTANT: recWrap consumes remaining height */
.recWrap{
  flex:1 1 auto;
  min-height:0;                 /* critical */
  display:flex;
  flex-direction:column;
}

/* IMPORTANT: recList fills recWrap and scrolls (no fixed vh cap) */
.recList{
  flex:1 1 auto;
  min-height:0;                 /* critical */
  overflow-y:auto;
  overflow-x:hidden;
  max-height:none !important;   /* kills the 45vh rule */
  padding:0;                    /* items fill width */
}

/* --- Responsive --- */
@media (max-width: 980px){
  .wrap{
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  aside{
    border-right:none;
    border-bottom:1px solid var(--border);
  }

  main{
    overflow:visible;
  }

  .imagesGrid{
    grid-template-columns:1fr;
  }

  /* keep positions + recList scroll areas usable */
  .positionsBlock{ max-height:45vh; }
  .recList{ max-height:45vh; }

  button.sec{ width:100%; }
}