/* ==========================================================================
   pickers.css — Form/Number Stepper, Form/Bin Picker, bin-picker-v2 and
   add-items-v2, all measured off Rackman_v2.
   ========================================================================== */

/* ---------- Form/Number Stepper (82x32 r8) ------------------------------- */
.stepper {
  display: inline-flex; align-items: stretch; width: 82px; height: 32px;
  border-radius: var(--radius-md); background: var(--white);
  border: 1.5px solid var(--black-15); overflow: hidden; flex: none;
}
/* Green when the quantity is available in the chosen bin, orange when it is
   not — the line is still allowed onto the quote either way. */
.stepper.is-ok    { border-color: var(--wrc-green); }
.stepper.is-short { border-color: var(--wrc-orange); }
.stepper__spin { display: flex; flex-direction: column; width: 23px; flex: none; }
.stepper__b {
  flex: 1 1 0; display: grid; place-items: center; padding: 0 0 0 3px;
  background: none; border: 0; color: var(--text-medium); cursor: pointer;
}
.stepper__b:hover { color: var(--text-dark); background: var(--grey-light); }
.stepper__div { width: 1px; background: var(--black-15); flex: none; }
.stepper__cell { flex: 1 1 auto; display: flex; align-items: center; padding: 0 8px; }
.stepper__in {
  width: 100%; border: 0; outline: 0; background: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

/* ---------- Form/Bin Picker (h32 r8 pad 0/8/0/10 gap 6) ------------------ */
.binf {
  display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 8px 0 10px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--black-15);
  font: inherit; text-align: left; cursor: pointer; max-width: 100%;
}
.binf:hover:not(.is-disabled) { border-color: var(--wrc-rackman); }
.binf svg { flex: none; color: var(--text-medium); }
.binf__b {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500;
  color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.binf__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wrc-green); flex: none; }
.binf__s { font-size: 11px; font-weight: 600; color: var(--wrc-green); flex: none; }
.binf.is-empty .binf__b { color: var(--black-25); font-weight: 500; }
.binf.is-disabled {
  background: var(--grey-light); border-color: var(--black-7); cursor: default;
}
.binf.is-disabled svg, .binf.is-disabled .binf__b { color: var(--grey-strong); }

/* ---------- Data/Location Chip ------------------------------------------- */
.lchip {
  display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 10px;
  border-radius: var(--radius-sm); font-size: 12px;
  background: var(--wrc-green-7); border: 1px solid var(--wrc-green-20); color: var(--wrc-green);
}
.lchip.is-zero { background: var(--wrc-orange-7); border-color: transparent; color: var(--wrc-orange); }
.lchip b { font-weight: 600; }

/* ---------- bin-picker-v2 ------------------------------------------------ */
.sheet--binp .sheet__body { padding: 18px 24px; }
.sheet__ft--split > :first-child { margin-right: auto; }
.binp__body { display: flex; flex-direction: column; gap: 12px; }
.binp__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.binp__chip {
  height: 22px; padding: 0 10px; border-radius: var(--radius-full);
  background: var(--white); border: 1px solid var(--grey-medium-blue);
  font-size: 10px; font-weight: 500; color: var(--text-medium);
}
.binp__chip.is-on { background: var(--wrc-rackman-dark); border-color: var(--wrc-rackman-dark); color: #fff; }
.binp__groups { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow: auto; }
.binp__wh {
  display: flex; align-items: center; gap: 8px; height: 29px;
  padding: 0 12px 0 10px; border-radius: var(--radius-sm); background: var(--grey-medium);
}
.binp__caret { color: var(--text-medium); flex: none; }
.binp__wh b { font-size: 12px; font-weight: 600; color: var(--text-medium); }
.binp__whl {
  flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--text-light);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.binp__wht { font-size: 12px; font-weight: 600; color: var(--text-medium); font-variant-numeric: tabular-nums; }
.binp__bin {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 25px;
  padding: 0 12px 0 26px; border-radius: var(--radius-sm);
  background: none; border: 1px solid transparent; text-align: left; font: inherit;
}
.binp__bin:hover { background: var(--grey-light); }
.binp__bin.is-on { background: var(--wrc-rackman-7); border-color: var(--wrc-rackman); }
.binp__radio {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--white); border: 1.5px solid var(--grey-medium-blue);
}
.binp__bin.is-on .binp__radio { background: var(--wrc-rackman); border-color: var(--wrc-rackman); box-shadow: inset 0 0 0 2px #fff; }
.binp__bn { flex: 1 1 auto; font-size: 11px; font-weight: 500; color: var(--text-medium); }
.binp__bq { font-size: 11px; font-weight: 500; color: var(--text-medium); font-variant-numeric: tabular-nums; }
.binp__bin.is-on .binp__bn { color: var(--wrc-rackman-dark); }
.binp__bin.is-on .binp__bq { color: var(--wrc-rackman-dark); font-weight: 700; }
.binp__totals { display: flex; align-items: center; font-size: 10px; color: var(--text-light); }
.binp__tr { font-weight: 600; color: var(--text-medium); }
.binp__sel { display: flex; align-items: center; gap: 6px; }
.binp__selk { font-size: 12px; font-weight: 500; color: var(--text-light); }
.binp__selv { font-size: 12.5px; font-weight: 600; color: var(--wrc-rackman); }

/* ---------- add-items-v2 ------------------------------------------------- */
.sheet--ai {
  width: 1840px; max-width: calc(100vw - 48px); height: 1000px;
  max-height: calc(100vh - 48px); display: flex; flex-direction: column;
}
.ai__badge {
  width: 38px; height: 38px; flex: none; border-radius: var(--radius-lg);
  background: var(--grey-light); display: grid; place-items: center; color: var(--text-medium);
}
.sheet--ai .sheet__hd { align-items: center; gap: 14px; }

.ai__toolbar {
  display: flex; align-items: flex-end; gap: 12px; padding: 14px 24px;
  border-bottom: 1px solid var(--black-7); flex: none;
}
.ai__field { display: flex; flex-direction: column; gap: 4px; }
.ai__flabel { font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: var(--text-light); }
.ai__sel { width: 300px; height: 32px; }
.ai__field:last-of-type .ai__sel { width: 240px; }
.ai__search {
  display: flex; align-items: center; gap: 8px; width: 300px; height: 32px;
  padding: 0 10px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--black-15);
}
.ai__search input { flex: 1 1 auto; border: 0; outline: 0; background: none; font: inherit; font-size: 12.5px; }
.ai__search svg { color: var(--text-light); flex: none; }
.ai__toggle { display: flex; align-items: center; gap: 10px; height: 18px; cursor: pointer; }
.ai__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ai__toggle input:checked + .tgl { background: var(--wrc-rackman); }
.ai__toggle input:checked + .tgl::after { transform: translateX(14px); }
.ai__tgll { font-size: 12.5px; color: var(--text-medium); white-space: nowrap; }

.ai__body { flex: 1 1 auto; display: flex; min-height: 0; }

.ai__rail {
  flex: 0 0 300px; padding: 20px; display: flex; flex-direction: column; gap: 18px;
  border-right: 1px solid var(--black-7); overflow: auto;
}
.ai__railhd { display: flex; align-items: center; }
.ai__railt { flex: 1 1 auto; font-size: 10px; font-weight: 600; color: var(--text-dark); letter-spacing: .04em; }
.ai__clear { background: none; border: 0; font: inherit; font-size: 12px; font-weight: 500; color: var(--wrc-rackman); cursor: pointer; }
.ai__group { display: flex; flex-direction: column; gap: 10px; }
.ai__ghd { display: flex; align-items: center; height: 16px; }
.ai__ghd span { flex: 1 1 auto; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-medium); }
.ai__ghd svg { color: var(--text-medium); }
.ai__cb { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-medium); cursor: pointer; }
.ai__cb input { position: absolute; opacity: 0; pointer-events: none; }
.ai__vals { display: flex; gap: 8px; }
.ai__pill {
  height: 18px; padding: 0 8px; border-radius: var(--radius-sm);
  background: var(--wrc-rackman); color: #fff; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center;
}
.ai__slider { position: relative; height: 16px; display: flex; align-items: center; }
.ai__rail { position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--grey-medium-blue); }
.ai__fill { position: absolute; height: 4px; border-radius: 999px; background: var(--wrc-rackman); }
.ai__range {
  position: absolute; left: 0; width: 100%; margin: 0; height: 16px;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.ai__range::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 17px; height: 16px;
  border-radius: var(--radius-xs); background: var(--white);
  border: 1px solid var(--black-15); cursor: pointer;
}
.ai__nums { display: flex; gap: 8px; }
.ai__num { width: 126px; height: 32px; font-size: 13px; font-weight: 600; }

.ai__results { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ai__thead, .ai__row { display: flex; align-items: center; }
.ai__thead {
  height: 34px; padding: 0 20px; background: var(--grey-light);
  border-bottom: 1px solid var(--black-15); flex: none;
  font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--text-light);
}
.ai__list { flex: 1 1 auto; overflow: auto; }
.ai__row { min-height: 97px; padding: 14px 20px; border-bottom: 1px solid var(--black-7); }
.ai__row.is-on { background: var(--wrc-rackman-7); }
.ai__photo { flex: 0 0 72px; height: 54px; margin-right: 14px; border-radius: var(--radius-sm);
             background-size: cover; background-position: center; background-color: var(--grey-light); }
.ai__thead .ai__photo { height: 12px; background: none; }
.ai__item { flex: 1 1 auto; min-width: 0; margin-right: 16px; display: flex; flex-direction: column; gap: 5px; }
.ai__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai__k { font-size: 9.5px; color: var(--text-light); }
.ai__v { font-size: 12px; font-weight: 600; color: var(--text-medium); }
.ai__title { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.ai__sites { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai__all { font-size: 11px; font-weight: 500; color: var(--text-light); }
.ai__price { flex: 0 0 100px; margin-right: 16px; font-size: 14px; font-weight: 600; color: var(--wrc-orange); }
.ai__thead .ai__price { font-size: 10px; font-weight: 500; color: var(--text-light); }
.ai__bin { flex: 0 0 206px; margin-right: 12px; }
.ai__bin .binf { width: 206px; }
.ai__qty { flex: 0 0 82px; margin-right: 14px; }
.ai__addcell { flex: 0 0 92px; }
.ai__add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 92px; height: 32px; border-radius: var(--radius-md); border: 0;
  background: var(--wrc-rackman); color: #fff; font: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ai__add:hover { background: var(--wrc-rackman-dark); }
.ai__add.is-added { background: var(--wrc-green); }
.ai__add.is-added:hover { background: var(--wrc-green-dark); }

.ai__selrail {
  flex: 0 0 400px; display: flex; flex-direction: column;
  background: var(--grey-light); border-left: 1px solid var(--black-7);
}
.ai__selhd { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px;
             border-bottom: 1px solid var(--black-7); flex: none; }
.ai__selt { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-medium); }
.ai__count {
  min-width: 22px; height: 18px; padding: 0 7px; border-radius: var(--radius-full);
  background: var(--wrc-rackman); color: #fff; font-size: 11px; font-weight: 600;
  display: inline-grid; place-items: center;
}
.ai__sellist { flex: 1 1 auto; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ai__card {
  padding: 12px; border-radius: var(--radius-lg); background: var(--white);
  border: 1px solid var(--black-7); display: flex; flex-direction: column; gap: 10px;
}
.ai__ctop { display: flex; align-items: flex-start; gap: 10px; }
.ai__cphoto { flex: 0 0 56px; height: 42px; border-radius: var(--radius-sm);
              background-size: cover; background-position: center; background-color: var(--grey-light); }
.ai__cinfo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ai__ctitle { font-size: 12px; font-weight: 500; color: var(--text-dark);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai__remove { width: 30px; height: 30px; flex: none; border-radius: var(--radius-md);
              background: none; border: 0; color: var(--text-light); display: grid; place-items: center; cursor: pointer; }
.ai__remove:hover { background: var(--grey-light); color: var(--status-red); }
.ai__cbot { display: flex; align-items: center; gap: 8px; }
.ai__unit { font-size: 11px; font-weight: 500; color: var(--text-light); }
.ai__line { font-size: 13px; font-weight: 600; color: var(--text-dark); font-variant-numeric: tabular-nums; }
.ai__subtotal { display: flex; align-items: center; height: 49px; padding: 0 16px;
                background: var(--white); border-top: 1px solid var(--black-7); flex: none; }
.ai__subk { font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--text-light); }
.ai__subv { font-size: 14px; font-weight: 600; color: var(--wrc-orange); font-variant-numeric: tabular-nums; }
.ai__empty { padding: 32px 16px; text-align: center; font-size: 12.5px; color: var(--text-light); }
.ai__summary { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-light); }
.ai__summary b { font-weight: 600; color: var(--text-dark); }
.ai__dot { color: var(--black-25); }

@media (max-width: 1500px) {
  .sheet--ai { height: calc(100vh - 48px); }
  .ai__rail { flex-basis: 240px; }
  .ai__selrail { flex-basis: 320px; }
}

/* ---------- edit-mode cells inside the quote line table ------------------- */
/* title-input 528x32 r8, value 13 Semi Bold */
.li__tin {
  width: 100%; height: 32px; padding: 0 10px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--black-15);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-dark);
}
.li__tin:focus { outline: 0; border-color: var(--wrc-rackman); border-width: 1.5px; }

.li__notes { display: flex; align-items: flex-start; gap: 8px; }
/* add-external / add-internal: 18 r999, 1px #000@15%, plus + 10 Medium */
.li__addnote {
  display: inline-flex; align-items: center; gap: 5px; height: 18px;
  padding: 0 10px 0 8px; border-radius: var(--radius-full);
  background: none; border: 1px solid var(--black-15);
  font: inherit; font-size: 10px; font-weight: 500; color: var(--text-light); cursor: pointer;
}
.li__addnote:hover { border-color: var(--wrc-rackman); color: var(--wrc-rackman); }
.li__addnote svg { color: currentColor; }
.li__notepen {
  width: 14px; height: 14px; flex: none; padding: 0; margin-top: 2px;
  background: none; border: 0; color: var(--text-light); cursor: pointer;
}
.li__notepen:hover { color: var(--wrc-rackman); }
.dchip.is-click { cursor: pointer; }
.dchip.is-click:hover { background: var(--wrc-rackman-7); color: var(--wrc-rackman); }

/* Form/Add Row Bar v2 — 1638x44 pad 7/16/7/14 gap 12, 1px #000@7% */
.addrow {
  display: flex; align-items: center; gap: 12px; height: 44px;
  padding: 0 16px 0 14px; background: var(--white);
  border: 1px solid var(--black-7); border-top: 0;
}
.addrow__new {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--wrc-rackman); cursor: pointer;
}
.addrow__div { width: 1px; height: 20px; background: var(--black-7); flex: none; }
.addrow__search {
  display: flex; align-items: center; gap: 8px; width: 320px; height: 30px;
  padding: 0 10px; border-radius: var(--radius-md);
  background: var(--white); border: 1px solid var(--black-15);
}
.addrow__search svg { color: var(--text-light); flex: none; }
.addrow__search input {
  flex: 1 1 auto; border: 0; outline: 0; background: none; font: inherit;
  font-size: 12px; color: var(--text-medium);
}
.addrow__pick, .addrow__web { height: 32px; padding: 0 16px; font-size: 12.5px; font-weight: 600; }

/* Data/Table Footer — 44 pad 14/18, #f8f8f8, amount orange */
.qd__tfoot {
  display: flex; align-items: center; height: 44px; padding: 0 18px;
  background: var(--grey-light); border: 1px solid var(--black-15); border-top: 0;
  font-size: 13px; color: var(--text-light);
}
.qd__tfv { font-size: 13px; font-weight: 600; color: var(--wrc-orange); font-variant-numeric: tabular-nums; }

/* summary-row REORDER toggle */
.qd__reorder { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-right: 12px; }
.qd__reorder input { position: absolute; opacity: 0; pointer-events: none; }
.qd__reorder input:checked + .tgl { background: var(--wrc-rackman); }
.qd__reorder input:checked + .tgl::after { transform: translateX(14px); }
.qd__reol { font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--text-light); }

/* ---------- Data/Item Image (16771:16677) -------------------------------- */
.iimg {
  position: relative; display: block; padding: 0; border: 0; flex: none;
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background-color: var(--grey-medium-blue);
  background-size: cover; background-position: center;
}
/* State=Hover — the surface colour over the whole tile at 50%, plus a centred
   white circle holding Icon/image-add. */
.iimg__ov {
  position: absolute; inset: 0; opacity: 0; transition: opacity .12s;
  background: var(--wrc-green);
}
.iimg--rackman .iimg__ov { background: var(--wrc-rackman); }
.iimg:hover .iimg__ov { opacity: .5; }
.iimg__badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9);
  border-radius: 50%; background: var(--white); color: var(--wrc-green);
  display: grid; place-items: center; opacity: 0; transition: opacity .12s, transform .12s;
}
.iimg--rackman .iimg__badge { color: var(--wrc-rackman); }
.iimg:hover .iimg__badge { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* State=Persistent — a corner badge, inset 6px bottom-right, no overlay. */
.iimg__corner {
  position: absolute; right: 6px; bottom: 6px; border-radius: 50%;
  background: var(--white); color: var(--wrc-green);
  display: grid; place-items: center; box-shadow: 0 1px 3px rgba(16, 24, 40, .2);
}
.iimg--rackman .iimg__corner { color: var(--wrc-rackman); }
.iimg.is-persistent:hover .iimg__corner { opacity: 0; }

/* ---------- Modal/Image Gallery (18288:72721) ---------------------------- */
.sheet--gal { width: 768px; max-width: calc(100vw - 48px); }
.sheet--gal .sheet__hd { padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--black-15); }
.sheet--gal .sheet__hd h3 { flex: 1 1 auto; font-size: 18px; }
.sheet--gal .sheet__x { width: 34px; height: 34px; border-radius: 50%; background: var(--grey-light); }
.gal__body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.gal__stage { position: relative; }
/* Modal/Image Gallery draws the hero at 720x540 and the thumbs at 104x78 —
   both exactly 4:3. Those were fixed HEIGHTS here, so on a narrow modal the
   hero went portrait. The ratio is the thing to pin, not the height. */
.gal__hero {
  aspect-ratio: 4 / 3; border-radius: var(--radius-xl);
  background: var(--grey-light) center/cover no-repeat;
}
.gal__ctl {
  position: absolute; left: 20px; right: 20px; bottom: 16px; height: 40px;
  display: flex; align-items: center; gap: 16px;
}
.gal__dots { flex: 1 1 auto; display: flex; gap: 6px; }
.gal__dot {
  width: 9px; height: 9px; border-radius: 2px; border: 0; padding: 0;
  background: var(--white-75); cursor: pointer;
}
.gal__dot.is-on { background: var(--wrc-orange); }
.gal__nav {
  display: flex; gap: 6px; padding: 4px; border-radius: var(--radius-md); background: var(--white);
}
.gal__nav button {
  width: 40px; height: 40px; border-radius: var(--radius-sm); border: 0;
  background: var(--wrc-orange-7); color: var(--wrc-orange);
  display: grid; place-items: center; cursor: pointer;
}
.gal__nav button:hover { background: var(--wrc-orange-20); }
.gal__thumbs { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.gal__thumbs::-webkit-scrollbar { height: 0; }
.gal__thumbs .gal__thumb {
  flex: 0 0 104px; aspect-ratio: 4 / 3; border-radius: var(--radius-md);
  border: 2px solid transparent;
  background: var(--grey-light) center/cover no-repeat; padding: 0; cursor: pointer;
}
.gal__thumb.is-on { border-color: var(--wrc-green); }

/* the tile fills its slot inside the cards that host it */
.ai__photo .iimg, .ai__cphoto .iimg { width: 100% !important; height: 100% !important; }
.ai__photo, .ai__cphoto { background: none; }
.icard__imgwrap { display: block; }
.icard__imgwrap .iimg { width: 100% !important; height: 180px !important; border-radius: var(--radius-md); }
.li td.t-item .iimg { width: 72px !important; height: 54px !important; }