/* ===========================================================================
 * D'leaps Studio OS - BOQ catalog picker + GST rows (V32, bolt-on stylesheet)
 * The picker component lives in the bundle (index-V32BqGst.js, __BqPick).
 * Works in every look (liquid / white / iMac). Screen only: nothing here
 * reaches the printed BOQ or invoice.
 * Roll back: delete the boq-picker.css line in index.html (the picker still
 * works, it just looks plain).
 * =========================================================================== */
@media screen {
/* the open picker must sit above the next section, whatever glass layer made a stacking context */
.boq-sec:focus-within, .boq-addbar:focus-within { position: relative; z-index: 30; }
.bq-pick { position: relative; flex: 1 1 300px; max-width: 420px; min-width: 220px; }
.bq-pick-in.input { width: 100%; font-size: .8rem !important; padding: .45rem .8rem .45rem 2rem !important; }
/* the magnifier sits on the wrapper: the glass layers repaint the input's background */
.bq-pick:before { content: ""; position: absolute; left: .75rem; top: 50%; width: 14px; height: 14px; margin-top: -7px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E6278' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat; }
.bq-pick:has(.bq-pick-pop):before, .bq-pick:has(.bq-pick-msg):before { top: 1.2rem; }
.bq-pick-pop { position: absolute; left: 0; top: calc(100% + 6px); width: min(480px, 92vw); z-index: 60;
  background: rgba(255,255,255,.96); border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(150,156,190,.28), 0 24px 54px -18px rgba(70,80,130,.40), 0 2px 6px rgba(70,80,130,.10);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); }
.bq-pick-list { max-height: 340px; overflow-y: auto; padding: 6px; }
.bq-pick-cat { position: sticky; top: -6px; z-index: 1; padding: .55rem .6rem .3rem; font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6B6F86; font-weight: 600; background: rgba(255,255,255,.97); }
.bq-pick-opt { display: flex; align-items: center; gap: .75rem; padding: .5rem .65rem; border-radius: 10px; cursor: pointer; }
.bq-pick-opt.on { background: rgba(207,145,191,.16); box-shadow: inset 0 0 0 1px rgba(155,80,137,.18); }
.bq-pick-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bq-pick-t b { font-weight: 500; font-size: .82rem; color: #2B2A28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-pick-t small { font-size: .68rem; color: #6B6F86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-pick-r { font-size: .78rem; color: #2B2A28; white-space: nowrap; }
.bq-pick-r small { color: #6B6F86; margin-left: 1px; }
.bq-pick-none { padding: .9rem .7rem; font-size: .8rem; color: #6B6F86; }
.bq-pick-add { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; font-size: .8rem;
  font-weight: 500; color: #9B5089; padding: .7rem 1rem; background: rgba(247,234,243,.85); border-top: 1px solid rgba(155,80,137,.14); }
.bq-pick-add.on, .bq-pick-add:hover { background: rgba(207,145,191,.26); }
.bq-pick-form { padding: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.bq-pick-form .input { font-size: .8rem !important; padding: .45rem .7rem !important; }
.bq-pick-ft { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #9B5089; font-weight: 600; }
.bq-pick-g { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: .5rem; }
.bq-pick-btns { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.bq-pick-btns .btn { font-size: .74rem !important; padding: .4rem .8rem !important; }
.bq-pick-msg { position: absolute; left: 0; top: calc(100% + 4px); font-size: .7rem; color: #B3261E; white-space: nowrap; }
.sum-row.gst-pos { color: var(--muted, #6B6F86); padding-top: .15rem; }
}