/* ══════════════════════════════════════════════════════════════════════════
   canon-catpicker.css — the "Add from catalog" picker (core/ui/catalogpicker.js)
   and the category chips + overflow menu inside it (core/ui/catmenu.js).

   The picker is a shared component opened from Quotes, Invoices, Customers
   (schedule of rates) and Dispatch (a job's price item), so its look lives
   with the component, not with one page. It used to sit in canon-doc.css,
   which only the two doc editors load — on Customers and Dispatch every row
   painted as a bare run of centred text.

   Everything is scoped to #ndCatPicker so the catalog page's own chips
   (canon-catalog.css) are untouched. The tech app draws its own copy in
   canon-tech-bridge.css.
   ══════════════════════════════════════════════════════════════════════════ */

@layer components {

  /* The picker opens on top of whatever raised it — on Dispatch that is the
     job editor, which sits at --z-modal — so it stacks above modals rather
     than at .bk-overlay's page-level 60. */
  :root.canon-v5 #ndCatPicker { z-index: calc(var(--z-modal, 1000) + 10); }

  /* A column with the list as the only scroller, so the search box and the
     Done button stay put however long the catalog runs. */
  :root.canon-v5 #ndCatPicker .cat-picker {
    display: flex; flex-direction: column; max-width: 520px; max-height: min(90vh, 760px); overflow: hidden;
  }
  :root.canon-v5 #ndCatPicker .cat-picker h3 { flex: none; }
  :root.canon-v5 #ndCatPicker .cat-picker > .inv-search { flex: none; }
  :root.canon-v5 #ndCatPicker .cat-picker .bk-modal-actions { flex: none; margin-top: 12px; }

  :root.canon-v5 #ndCatPicker .cat-picker-list {
    flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 6px; margin: 0 -4px; padding: 0 4px 2px;
  }
  :root.canon-v5 #ndCatPicker .cat-pick-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none;
    width: 100%; padding: 10px 12px; box-sizing: border-box; text-align: left;
    border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-card); color: var(--c-text);
    font-family: inherit; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  :root.canon-v5 #ndCatPicker .cat-pick-row:hover { border-color: var(--c-border-2); background: var(--c-card-2); }
  :root.canon-v5 #ndCatPicker .cat-pick-row:focus-visible { border-color: var(--c-accent-edge); background: var(--c-card-2); outline: 2px solid var(--c-accent-soft); outline-offset: 0; }
  :root.canon-v5 #ndCatPicker .cat-pick-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
  :root.canon-v5 #ndCatPicker .cat-pick-name { overflow-wrap: anywhere; font-size: 13px; font-weight: 600; line-height: 1.35; }
  :root.canon-v5 #ndCatPicker .cat-pick-meta { overflow-wrap: anywhere; font-size: 11px; line-height: 1.4; color: var(--c-cap); }
  :root.canon-v5 #ndCatPicker .cat-pick-price {
    flex: none; white-space: nowrap; text-align: right;
    font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
  }
  :root.canon-v5 #ndCatPicker .cat-pick-price .cat-unit { display: block; font-size: 11px; font-weight: 500; color: var(--c-cap); }
  :root.canon-v5 #ndCatPicker .cat-pick-perunit { display: block; font-size: 11px; font-weight: 600; color: var(--c-on-wash-accent); }
  /* "No matching items." and the "Showing the first 200 of …" line. */
  :root.canon-v5 #ndCatPicker .cat-picker-list .cust-meta { margin: 0; font-size: 12px; line-height: 1.5; color: var(--c-cap); }

  /* ── Category chips ───────────────────────────────────────────────────── */
  :root.canon-v5 #ndCatPicker .cat-cats { flex: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
  :root.canon-v5 #ndCatPicker .cat-chip {
    display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 11px;
    border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-card); color: var(--c-text-2);
    font-family: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer;
  }
  :root.canon-v5 #ndCatPicker .cat-chip:hover { border-color: var(--c-border-2); }
  :root.canon-v5 #ndCatPicker .cat-chip.is-active { border-color: var(--c-accent-edge); background: var(--c-accent-soft); color: var(--c-on-wash-accent); }
  :root.canon-v5 #ndCatPicker .cat-chip-n { font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--c-cap); }
  :root.canon-v5 #ndCatPicker .cat-chip.is-active .cat-chip-n { color: inherit; }

  /* ── The overflow menu ────────────────────────────────────────────────
     catmenu.js places the panel from the trigger's viewport rect, so it is
     position:fixed — an absolute panel lands wherever top/left happen to
     point inside .catm. */
  :root.canon-v5 #ndCatPicker .catm { position: relative; display: inline-block; }
  :root.canon-v5 #ndCatPicker .catm-trigger { display: inline-flex; align-items: center; gap: 5px; }
  :root.canon-v5 #ndCatPicker .catm-caret { font-size: 13px; color: var(--c-cap); }
  :root.canon-v5 #ndCatPicker .catm-panel {
    position: fixed; z-index: 1; box-sizing: border-box; width: 260px; padding: 6px;
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-card); box-shadow: var(--float);
  }
  :root.canon-v5 #ndCatPicker .catm-panel[hidden] { display: none; }
  :root.canon-v5 #ndCatPicker .catm-search {
    box-sizing: border-box; width: 100%; height: 32px; margin: 0; padding: 0 10px;
    border: 1px solid var(--c-border); border-radius: 6px; background: var(--c-sunken); color: var(--c-text); font-family: inherit; font-size: 13px;
  }
  :root.canon-v5 #ndCatPicker .catm-rows { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  :root.canon-v5 #ndCatPicker .catm-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 9px;
    border: 0; border-radius: 6px; background: transparent; color: var(--c-text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer;
  }
  :root.canon-v5 #ndCatPicker .catm-row:hover,
  :root.canon-v5 #ndCatPicker .catm-row:focus-visible { background: var(--c-card-2); outline: none; }
  :root.canon-v5 #ndCatPicker .catm-row.is-active { background: var(--c-accent-soft); font-weight: 600; color: var(--c-on-wash-accent); }
  :root.canon-v5 #ndCatPicker .catm-row-label { min-width: 0; overflow-wrap: anywhere; }
  :root.canon-v5 #ndCatPicker .catm-row-n { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-cap); }
  :root.canon-v5 #ndCatPicker .catm-none { margin: 0; padding: 10px; font-size: 13px; color: var(--c-text-2); }

  /* ── Phones: a bottom sheet ───────────────────────────────────────────
     Thumb reach, and the whole height for the list. 16px search text keeps
     iOS from zooming the page when the box takes focus. */
  @media (max-width: 560px) {
    :root.canon-v5 #ndCatPicker { align-items: flex-end; padding: 0; }
    :root.canon-v5 #ndCatPicker .cat-picker {
      max-width: none; max-height: 88dvh; border-radius: 12px 12px 0 0; border-bottom: 0;
      padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    }
    :root.canon-v5 #ndCatPicker .cat-picker > .inv-search { height: 40px; font-size: 16px; }
    :root.canon-v5 #ndCatPicker .cat-pick-row { padding: 11px 12px; }
    :root.canon-v5 #ndCatPicker .cat-picker .bk-modal-actions .btn-primary { width: 100%; justify-content: center; }
    :root.canon-v5 #ndCatPicker .cat-picker .bk-modal-actions .bk-right { flex: 1; }
  }
}