/* public/widgets/price-book-browser.css
   The ONE price book browser (public/widgets/price-book-browser.js, price book
   redesign PR 3, 2026-10-18): the square 4:3 photo cards you click into, on the
   web price book page, the web "add from price book" window and the phone line
   items screen. Tokens only (design-system.css), so light and dark both follow
   the token layer. Borders separate, shadows float (design-system-v2 section 4):
   a card at rest has a 1px border and no shadow; only the menu floats. Every
   control is at least 44px tall or wide where a finger meets it. */

.pbb { position: relative; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

/* Search bar. Pinned while the body scrolls in a window or a sheet (data-sticky). */
.pbb-bar { display: flex; gap: var(--s-2); align-items: center; }
.pbb[data-sticky="1"] .pbb-bar { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: var(--s-2) 0; }
.pbb-search { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.pbb-search .pbb-ico { position: absolute; left: var(--s-3); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.pbb-q {
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-8);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--text-sm);
}
.pbb-q:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }

/* The clickable path: Price book > Heating & Air > Goodman Value */
.pbb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: var(--text-sm); color: var(--ink-3); min-height: 32px; }
.pbb-crumb {
  background: transparent; border: 0; color: var(--ink-3); font: inherit; font-size: inherit; cursor: pointer;
  padding: var(--s-1) var(--s-2); border-radius: var(--r-xs); min-height: 32px;
}
.pbb-crumb:hover, .pbb-crumb:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.pbb-crumb-here { color: var(--ink); font-weight: 600; padding: var(--s-1) var(--s-2); }
.pbb-crumb-sep { display: inline-flex; color: var(--muted); }
.pbb-crumb-sep .pbb-ico { width: 12px; height: 12px; }

.pbb-body { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.pbb-sec { display: flex; flex-direction: column; gap: var(--s-3); }
.pbb-sec-title {
  margin: 0; display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.pbb-link { background: transparent; border: 0; padding: 0; font: inherit; font-size: var(--text-xs); color: var(--accent); cursor: pointer; text-transform: none; letter-spacing: 0; }
.pbb-link:hover { text-decoration: underline; }
.pbb-note { margin: 0; padding: var(--s-5) var(--s-4); text-align: center; color: var(--muted); font-size: var(--text-sm); }
.pbb-note[data-error="1"] { color: var(--danger); }

/* The grid. Big cards on the price book page, smaller in a window, two a row
   on the phone, small in the Move picker. */
.pbb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s-4); }
.pbb[data-layout="dialog"] .pbb-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: var(--s-3); }
.pbb[data-layout="mini"] .pbb-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s-3); }
.pbb[data-layout="phone"] .pbb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 600px) {
  .pbb-grid, .pbb[data-layout="dialog"] .pbb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
}

/* A card: the 4:3 photo on top, the words below. */
.pbb-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pbb-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.pbb-card.is-hi { border-color: var(--accent); box-shadow: var(--ring); }
.pbb-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pbb-card.is-dragging { opacity: 0.45; }
.pbb-card.is-drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.pbb-card.is-drop-after { box-shadow: 3px 0 0 0 var(--accent); }

.pbb-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.pbb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pbb-ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--muted); }
.pbb-ph .pbb-ico { width: 40px; height: 40px; opacity: 0.55; }
.pbb-addphoto {
  display: flex; flex-direction: column; gap: var(--s-1); width: 100%; height: 100%;
  align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--ink-3); font: inherit; font-size: var(--text-sm); font-weight: 600;
  border: 2px dashed var(--border); border-radius: 0; cursor: pointer;
}
.pbb-addphoto .pbb-ico { width: 26px; height: 26px; }
.pbb-addphoto:hover, .pbb-addphoto:focus-visible { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); outline: none; }

/* The corner controls on the photo: the star (top left), the ... menu (top
   right), the check in Select (top left). 44px targets. */
.pbb-more, .pbb-star {
  position: absolute; top: var(--s-1); width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--ink-2);
}
.pbb-more { right: var(--s-1); }
.pbb-star { left: var(--s-1); color: var(--muted); }
.pbb-more::before, .pbb-star::before {
  content: ""; position: absolute; inset: 7px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border-subtle); z-index: -1;
}
.pbb-more .pbb-ico, .pbb-star .pbb-ico { width: 16px; height: 16px; position: relative; }
.pbb-more:hover, .pbb-more:focus-visible, .pbb-more[aria-expanded="true"] { color: var(--accent); outline: none; }
.pbb-star[aria-pressed="true"] { color: var(--warn); }
.pbb-star:hover, .pbb-star:focus-visible { color: var(--warn); outline: none; }
.pbb-more, .pbb-star { isolation: isolate; }
.pbb-check {
  position: absolute; top: var(--s-2); left: var(--s-2); width: 28px; height: 28px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--border); color: transparent;
}
.pbb-check .pbb-ico { width: 16px; height: 16px; }
.pbb-card.is-selected .pbb-check { background: var(--accent); border-color: var(--accent); color: var(--surface); }

/* Small tags on the photo: Add-on, Hidden, Inactive. */
.pbb-tags { position: absolute; left: var(--s-2); bottom: var(--s-2); display: flex; flex-wrap: wrap; gap: var(--s-1); max-width: calc(100% - var(--s-4)); }
.pbb-tag {
  font-size: var(--text-xs); font-weight: 700; line-height: 1.4; padding: 1px var(--s-2); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--border-subtle);
}
.pbb-tag.is-addon { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.pbb-tag.is-hidden { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.pbb-tag.is-inactive { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }

/* The words. The whole lower half is one button (keyboard reachable). */
.pbb-main {
  display: flex; flex-direction: column; gap: 2px; align-items: stretch; flex: 1;
  width: 100%; min-height: 44px; padding: var(--s-3) var(--s-4) var(--s-4);
  background: transparent; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
}
.pbb-main:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.pbb-name {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pbb-path { font-size: var(--text-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbb-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-1); flex-wrap: wrap; }
.pbb-price { font-size: var(--text-lg); font-weight: 800; color: var(--ink); }
.pbb-kind { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.pbb-cost { font-size: var(--text-xs); color: var(--muted); }
.pbb-count { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
.pbb-count .pbb-ico { width: 14px; height: 14px; margin-left: auto; }
.pbb-folder .pbb-count { width: 100%; }

/* The dashed "New folder" / "New item" cards, right where you are. */
.pbb-new {
  align-items: center; justify-content: center; gap: var(--s-1); min-height: 180px; padding: var(--s-4);
  background: transparent; border: 2px dashed var(--border); color: var(--ink-2); font: inherit; text-align: center;
}
.pbb-new:hover, .pbb-new:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); outline: none; }
.pbb-new-plus .pbb-ico { width: 28px; height: 28px; }
.pbb-new-title { font-size: var(--text-sm); font-weight: 700; }
.pbb-new-sub { font-size: var(--text-xs); color: var(--ink-3); }
.pbb[data-layout="mini"] .pbb-new, .pbb[data-layout="phone"] .pbb-new { min-height: 120px; }

/* Inside a folder: its own photo, name, description and counts on top. */
.pbb-fhead {
  display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
}
.pbb-fhead-photo { flex: 0 0 auto; width: 132px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--surface-2); }
.pbb-fhead-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.pbb-fhead-name { margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--ink); }
.pbb-fhead-desc { margin: 0; font-size: var(--text-sm); color: var(--ink-2); }
.pbb-fhead-acts { display: flex; align-items: center; gap: var(--s-2); }
.pbb-fhead-acts .pbb-more { position: relative; top: auto; right: auto; }
.pbb[data-layout="phone"] .pbb-fhead, .pbb[data-layout="mini"] .pbb-fhead { padding: var(--s-3); gap: var(--s-3); }
.pbb[data-layout="phone"] .pbb-fhead-photo, .pbb[data-layout="mini"] .pbb-fhead-photo { width: 84px; }
.pbb[data-layout="phone"] .pbb-fhead-name, .pbb[data-layout="mini"] .pbb-fhead-name { font-size: var(--text-lg); }
@media (max-width: 600px) { .pbb-fhead { flex-wrap: wrap; } .pbb-fhead-photo { width: 96px; } }

/* The filter chips inside a folder (the price book page). */
.pbb-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pbb-chip {
  min-height: 36px; padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer;
}
.pbb-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.pbb-chip:focus-visible { outline: none; box-shadow: var(--ring); }

/* The ... menu floats (a ds-menu-list placed by the widget). */
.pbb-menu { z-index: var(--z-dropdown); }

/* An item with no photo: its Type tile, the same icon the line rows show
   (public/line-photo.js iconSvg), so a card and its line look alike. */
.pbb-type-tile svg { width: 40px; height: 40px; opacity: 0.6; }
.pbb[data-layout="mini"] .pbb-type-tile svg, .pbb[data-layout="phone"] .pbb-type-tile svg { width: 32px; height: 32px; }

/* The smart search strip (2026-10-27, services/price-book-smart-search.js): what
   the search understood, and the one-tap "Narrow it" chips (each adds words to
   the search, with how many items it leaves). On the phone each row is one line
   you swipe sideways, so the cards stay high on the screen. */
.pbb-smart {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid var(--border);
}
.pbb-smart-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.pbb-smart-lab { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-ink); margin-right: var(--s-1); }
.pbb-smart-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px var(--s-3);
  border-radius: var(--r-full); border: 1px solid transparent; background: var(--surface);
  color: var(--accent-ink); font: inherit; font-size: var(--text-xs); font-weight: 700; white-space: nowrap;
}
.pbb-smart-chip.is-word { color: var(--ink-2); font-weight: 600; }
.pbb-smart-chip.is-narrow { cursor: pointer; color: var(--ink); border-color: var(--border); min-height: 32px; }
.pbb-smart-chip.is-narrow b { color: var(--ink-3); font-weight: 700; }
.pbb-smart-chip.is-narrow:hover, .pbb-smart-chip.is-narrow:focus-visible { border-color: var(--accent); outline: none; box-shadow: var(--ring); }
.pbb[data-layout="phone"] .pbb-smart-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-3)); padding: 0 var(--s-3); }
.pbb[data-layout="phone"] .pbb-smart-row::-webkit-scrollbar { display: none; }
.pbb[data-layout="phone"] .pbb-smart-chip, .pbb[data-layout="phone"] .pbb-smart-lab { flex: 0 0 auto; }