/* ── Parts Catalog Picker (.pcp-) ──────────────────────────────────────────
   Two-pane cart + catalog, modelled on the incident flow. Dark by default;
   light-mode overrides at the bottom. */

.pcp-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .15s; z-index:5900;
}
.pcp-backdrop.pcp-on{ opacity:1; visibility:visible; }

.pcp-modal{
  position:fixed; z-index:6000; inset:0; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:#101318;
  opacity:0; visibility:hidden; transform:scale(.99); transform-origin:center 42%; transition:opacity .15s ease, transform .18s ease;
  font-family:'Barlow', sans-serif; color:#dce3ed;
}
.pcp-modal.pcp-on{ opacity:1; visibility:visible; transform:scale(1); }

.pcp-head{
  display:flex; align-items:center; gap:9px; padding:15px 20px; flex:none; border-bottom:1px solid #1f2530;
  background:linear-gradient(90deg, rgba(212,245,66,.08), transparent);
}
.pcp-head-ic{ color:var(--accent,#d4f542); font-size:20px !important; }
.pcp-title{ font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:15px; letter-spacing:.6px; text-transform:uppercase; }
.pcp-scope{ font-size:11px; font-weight:700; letter-spacing:.3px; color:#7a8a9b; background:#141820; border:1px solid #2a3444; border-radius:999px; padding:2px 9px; }
.pcp-x{ margin-left:auto; width:28px; height:28px; border:0; background:transparent; color:#7a8a9b; border-radius:6px; display:grid; place-items:center; }
.pcp-x:hover{ background:#141820; color:#dce3ed; }
.pcp-x .material-symbols-outlined{ font-size:19px !important; }

.pcp-cols{ flex:1; min-height:0; display:flex; }

/* ── cart (left) ── */
.pcp-cart{ width:290px; flex:none; display:flex; flex-direction:column; border-right:1px solid #1f2530; background:#0d1116; }
.pcp-cart-h{ display:flex; align-items:center; gap:8px; padding:11px 14px; flex:none; border-bottom:1px solid #1f2530;
  font-family:'Barlow Condensed', sans-serif; font-size:12px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; }
.pcp-cart-h .material-symbols-outlined{ font-size:16px !important; color:#8a9aab; }
.pcp-cart-cnt{ margin-left:auto; font-size:11px; font-weight:800; color:#7a8a9b; background:#141820; border:1px solid #1f2530; border-radius:999px; padding:1px 8px; }
.pcp-cart-list{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px; min-height:0; }
.pcp-cart-item{ display:flex; align-items:center; gap:8px; background:#141820; border:1px solid #1f2530; border-radius:8px; padding:8px 9px; }
.pcp-cart-main{ flex:1; min-width:0; }
.pcp-cart-n{ font-weight:700; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcp-cart-m{ font-size:10.5px; color:#7a8a9b; margin-top:2px; font-variant-numeric:tabular-nums; }
.pcp-cart-rm{ flex:none; width:26px; height:26px; border:0; background:transparent; color:#7a8a9b; border-radius:6px; display:grid; place-items:center; }
.pcp-cart-rm:hover{ color:#f87171; background:rgba(239,68,68,.12); }
.pcp-cart-rm .material-symbols-outlined{ font-size:16px !important; }
.pcp-cart-empty{ padding:24px 14px; text-align:center; color:#7a8a9b; font-size:12px; line-height:1.5; }
.pcp-cart-foot{ flex:none; display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid #1f2530; }
.pcp-cart-total{ font-weight:800; font-size:13px; color:#dce3ed; font-variant-numeric:tabular-nums; }
.pcp-done{ margin-left:auto; border:0; background:var(--accent,#d4f542); color:#0c1016; font-family:'Barlow Condensed', sans-serif; font-weight:800; font-size:13px; letter-spacing:.5px; text-transform:uppercase; padding:8px 18px; border-radius:8px; }
.pcp-done:hover{ filter:brightness(1.06); }

/* ── catalog (right) ── */
.pcp-catalog{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pcp-tools{ display:flex; gap:8px; padding:11px 12px; border-bottom:1px solid #1f2530; flex-wrap:wrap; flex:none; }
.pcp-search{ flex:1 1 200px; display:flex; align-items:center; gap:8px; background:#141820; border:1px solid #2a3545; border-radius:8px; padding:8px 10px; }
.pcp-search .material-symbols-outlined{ color:#7a8a9b; font-size:18px !important; }
.pcp-search input{ flex:1; border:0; background:transparent; color:#dce3ed; outline:0; font-family:inherit; font-size:13px; min-width:0; }
.pcp-select{ flex:0 1 auto; background:#141820; border:1px solid #2a3545; border-radius:8px; color:#8a9aab; padding:8px 9px; font-family:inherit; font-size:12px; font-weight:600; max-width:150px; cursor:pointer; }
.pcp-select:focus{ outline:1px solid rgba(212,245,66,.4); }
.pcp-list{ flex:1; overflow-y:auto; padding:10px 12px 14px; display:flex; flex-direction:column; gap:8px; min-height:0; }

.pcp-card{ border:1px solid #1f2530; border-radius:10px; padding:10px 11px; background:#141820; transition:border-color .12s; }
.pcp-card.pcp-added{ border-color:rgba(212,245,66,.5); background:rgba(212,245,66,.05); }
.pcp-card-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pcp-cat{ font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#7a8a9b; }
.pcp-sup{ font-size:10px; font-weight:700; color:#8a9aab; }
.pcp-name{ font-weight:700; font-size:13.5px; margin:4px 0 6px; }
.pcp-card-foot{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.pcp-nums{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-variant-numeric:tabular-nums; }
.pcp-num{ font-size:11px; color:#8a9aab; }
.pcp-pcs{ font-size:10px; font-weight:700; color:#7a8a9b; background:#171b22; border-radius:4px; padding:1px 6px; }
.pcp-price{ font-size:12.5px; font-weight:800; color:#dce3ed; }
.pcp-add{ flex:none; width:32px; height:32px; border-radius:8px; border:1px solid #2a3545; background:#171b22; color:var(--accent,#d4f542); display:grid; place-items:center; }
.pcp-add:hover{ border-color:var(--accent,#d4f542); background:rgba(212,245,66,.1); }
.pcp-add:disabled{ cursor:default; }
.pcp-add .material-symbols-outlined{ font-size:19px !important; }
.pcp-card.pcp-added .pcp-add{ background:var(--accent,#d4f542); color:#0c1016; border-color:var(--accent,#d4f542); }

/* PDF page chip — the "is this the right part?" control. Sits beside + so the
   two card actions are one group, and it is a TAP target, not a hover. */
.pcp-acts{ display:flex; align-items:center; gap:8px; flex:none; }
.pcp-pdf{ display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 10px; flex:none;
  border:1px solid #2a3545; border-radius:8px; background:#171b22; color:#c8d2de;
  font-family:inherit; font-weight:700; font-size:11.5px; letter-spacing:.2px; white-space:nowrap; }
.pcp-pdf .material-symbols-outlined{ font-size:16px !important; color:#e05050; }
.pcp-pdf:hover{ border-color:#3a4657; color:#eef3f9; }
.pcp-pdf-sm{ height:28px; padding:0 8px; font-size:11px; }
.pcp-pdf-sm .material-symbols-outlined{ font-size:15px !important; }

.pcp-more{ align-self:center; margin-top:4px; border:1px solid #2a3545; background:#141820; color:#8a9aab; font-family:inherit; font-weight:700; font-size:12px; padding:8px 16px; border-radius:8px; }
.pcp-more:hover{ color:#dce3ed; border-color:#3a4657; }
.pcp-empty{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:38px 16px; color:#7a8a9b; font-size:13px; }
.pcp-empty .material-symbols-outlined{ font-size:30px !important; color:#4a5a6b; }
.pcp-loading .material-symbols-outlined{ animation:pcp-spin 1s linear infinite; }
@keyframes pcp-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .pcp-loading .material-symbols-outlined{ animation:none; } }

@media (max-width:720px){
  /* Picker is already full-screen; on narrow screens stack the cart above the catalog. */
  .pcp-cols{ flex-direction:column; }
  .pcp-cart{ width:auto; border-right:0; border-bottom:1px solid #1f2530; max-height:38%; }
  .pcp-select{ max-width:none; flex:1 1 45%; }
  /* Nothing on the job yet = one line of guidance, not a third of the screen.
     Done is the head's ✕ while the cart is empty, so the footer goes too. */
  .pcp-cart.pcp-cart-none{ max-height:none; flex:none; }
  .pcp-cart.pcp-cart-none .pcp-cart-list{ padding:0; overflow:visible; }
  .pcp-cart.pcp-cart-none .pcp-cart-empty{ padding:7px 14px 9px; text-align:left; font-size:11.5px; line-height:1.35; }
  .pcp-cart.pcp-cart-none .pcp-cart-foot{ display:none; }
  /* Touch targets */
  .pcp-pdf{ height:38px; padding:0 12px; font-size:12.5px; }
  .pcp-pdf-sm{ height:34px; padding:0 10px; font-size:12px; }
  .pcp-add{ width:38px; height:38px; }
  .pcp-cart-rm{ width:34px; height:34px; }
}

/* ── Light mode ─────────────────────────────────────────────────────────── */
body.light-mode .pcp-backdrop{ background:rgba(0,0,0,.35); }
body.light-mode .pcp-modal{ background:#fff; border-color:#dde2ec; color:#1a2030; box-shadow:0 18px 44px rgba(0,0,0,.18); }
body.light-mode .pcp-head{ border-bottom-color:#e4e8f0; }
body.light-mode .pcp-scope{ background:#f0f3f8; border-color:#dde2ec; color:#5a6a7b; }
body.light-mode .pcp-x{ color:#6a7a8b; }
body.light-mode .pcp-x:hover{ background:#f0f3f8; color:#1a2030; }
body.light-mode .pcp-cart{ background:#f5f7fa; border-right-color:#e4e8f0; }
body.light-mode .pcp-cart-h, body.light-mode .pcp-cart-foot{ border-color:#e4e8f0; }
body.light-mode .pcp-cart-cnt{ background:#eef1f8; border-color:#dde2ec; color:#5a6a7b; }
body.light-mode .pcp-cart-item{ background:#fff; border-color:#e4e8f0; }
body.light-mode .pcp-cart-m, body.light-mode .pcp-cart-empty{ color:#6a7a8b; }
body.light-mode .pcp-cart-total{ color:#1a2030; }
body.light-mode .pcp-done{ color:#0c1016; }
body.light-mode .pcp-tools{ border-bottom-color:#e4e8f0; }
body.light-mode .pcp-search, body.light-mode .pcp-select{ background:#f0f3f8; border-color:#dde2ec; color:#5a6a7b; }
body.light-mode .pcp-search input{ color:#1a2030; }
body.light-mode .pcp-card{ background:#fff; border-color:#e4e8f0; }
body.light-mode .pcp-card.pcp-added{ background:rgba(90,122,0,.06); border-color:#9fb800; }
body.light-mode .pcp-cat, body.light-mode .pcp-sup, body.light-mode .pcp-num, body.light-mode .pcp-pcs{ color:#6a7a8b; }
body.light-mode .pcp-pcs{ background:#eef1f8; }
body.light-mode .pcp-price{ color:#1a2030; }
body.light-mode .pcp-add{ background:#f0f3f8; border-color:#dde2ec; color:#5a7a00; }
body.light-mode .pcp-add:hover{ border-color:#9fb800; background:rgba(90,122,0,.08); }
body.light-mode .pcp-card.pcp-added .pcp-add{ background:var(--accent,#d4f542); color:#0c1016; }
body.light-mode .pcp-pdf{ background:#f0f3f8; border-color:#dde2ec; color:#3a4656; }
body.light-mode .pcp-pdf:hover{ border-color:#c3ccdb; color:#1a2030; }
body.light-mode .pcp-more{ background:#f0f3f8; border-color:#dde2ec; color:#5a6a7b; }
body.light-mode .pcp-empty{ color:#6a7a8b; }