/* FA-13 Price book (board 38). [data-look="v2"] only. See
   frontend/js/pricebookV2.js for the JS half (relocating the real
   #pricebook-search into the slot below and reusing v1's own
   filterPriceBookItems()/isPriceBookPlaceholder() — category grid, result
   cards and the item-detail pane are new v2-only markup built by JS, styled
   here, but every field shown comes from the real priceBookCache item shape;
   see docs/fa13-price-book-estimate.md for the fields the board shows that
   don't exist in real data (Unit, long description) and are therefore not
   built). With the switch OFF this file has no effect and #scr-pricebook
   renders exactly as it does today. */

[data-look="v2"] #scr-pricebook > #pricebook-v1 {
  display: none;
}

[data-look="v2"] #pricebookv2-search-slot input {
  width: 100%;
  box-sizing: border-box;
}

[data-look="v2"] .pbv2-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--field-space-4);
  margin-bottom: var(--field-space-2);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  color: var(--field-text-primary);
  font: var(--field-text-card-heading);
  text-align: left;
}
[data-look="v2"] .pbv2-category-count {
  color: var(--field-text-secondary);
  font: var(--field-text-meta);
}

[data-look="v2"] .pbv2-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--field-space-3);
  width: 100%;
  padding: var(--field-space-3) var(--field-space-4);
  margin-bottom: var(--field-space-2);
  background: var(--field-surface);
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius-card);
  text-align: left;
}
[data-look="v2"] .pbv2-item-text {
  display: flex;
  flex-direction: column;
  color: var(--field-text-primary);
  font: var(--field-text-body);
}
[data-look="v2"] .pbv2-item-meta {
  color: var(--field-text-secondary);
  font: var(--field-text-meta);
}
[data-look="v2"] .pbv2-item-price {
  color: var(--field-text-primary);
  font: var(--field-text-card-heading);
  white-space: nowrap;
}
[data-look="v2"] .pbv2-item-unavailable {
  color: var(--field-text-secondary);
  font-style: italic;
}

[data-look="v2"] .pbv2-detail-row {
  display: flex;
  justify-content: space-between;
  padding: var(--field-space-3) 0;
  border-bottom: 1px solid var(--field-border);
  color: var(--field-text-primary);
  font: var(--field-text-body);
}
[data-look="v2"] .pbv2-detail-label {
  color: var(--field-text-secondary);
  font: var(--field-text-label);
}

[data-look="v2"] #pricebookv2-detail-optionpicker button {
  width: 100%;
  margin-top: var(--field-space-2);
}
