/*
 * /suppliers — page-specific overrides on top of /companies/css/style.css
 * and /investor-deck/css/style.css. Kept thin — most chrome tokens come
 * from those two sibling stylesheets so restyles track automatically.
 *
 * Suppliers-only additions:
 *   - Row-1 service pills with per-pill count badge
 *   - Row-per-supplier logo tile + client pill in the Company cell
 *   - Mini-chip pills for Services / Coverage / Commodities cells
 *   - "Global" coverage pill accent
 *   - Drawer checkbox row for MH Clients toggle
 */

/* ---------- Row 1: primary service pills ---------- */

/* Wrap the pill row so a long taxonomy doesn't push the Actions cluster
   off-screen — horizontal scroll on the pill list only. */
.sp-primary-row {
  align-items: center;
  gap: 12px;
}

.sp-service-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.sp-service-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Faceted counts: pills whose count under the current filter mix is zero
   render dimmed + non-interactive. The user sees the option's existence
   but understands it would empty the result set. Clicking is a no-op
   (onclick omitted in the renderer) — no need for pointer-events chicanery. */
.sp-service-pills .market-option.is-empty {
  opacity: 0.4;
  cursor: not-allowed;
}
.sp-service-pills .market-option.is-empty:hover {
  background: #f1f5f9;
  color: #1f2937;
}

/* Coverage-country modifier: "Include global suppliers" checkbox row.
   Compact vertical spacing so it reads as part of the coverage control,
   not a separate section. Dims when disabled (no country picked → toggle
   is a no-op). */
.sp-drawer-checkbox-row {
  margin: 8px 0 4px;
}
.sp-drawer-checkbox-row sl-checkbox::part(label) {
  font-size: 13px;
  color: #334155;
}
.sp-drawer-checkbox-row sl-checkbox[disabled]::part(label) {
  color: #94a3b8;
}

/* "More Services" sl-select sits inline with the pill row (mirrors the
   /investor-deck "More Commodities" pattern). Fixed min-width so the label
   doesn't jitter as different rest-categories are populated. Hidden entirely
   when the top-N covers every populated category. */
#sp-more-services-wrapper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

#sp-more-services-select {
  min-width: 190px;
}

/* Match the pill button visuals — pill background + fully-rounded border +
   14px text, so the dropdown reads as another pill rather than a form field.
   Style via ::part hooks so Shoelace's shadow-DOM combobox picks up our
   values without pulling in the widget's default box/border chrome. */
#sp-more-services-select::part(combobox) {
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #1f2937;
  font-size: 14px;
  min-height: 34px;
  padding: 4px 12px;
  transition: all 0.15s ease;
}
#sp-more-services-select::part(display-input) {
  color: inherit;
  font-size: 14px;
}
#sp-more-services-select::part(display-input)::placeholder {
  color: #1f2937;
  opacity: 1;
}
#sp-more-services-select::part(combobox):hover {
  background: #e2e8f0;
}
#sp-more-services-select[open]::part(combobox),
#sp-more-services-select:focus-within::part(combobox) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
/* When a rest-category is picked, mirror the pill "selected" state — teal
   background + white text — so it reads as an active filter. */
#sp-more-services-select[data-mh-active]::part(combobox) {
  background: #30a5bf;
  border-color: rgba(0, 0, 0, 0.04);
  color: #fff;
  box-shadow: 0 6px 18px rgba(48, 165, 191, 0.35);
}
#sp-more-services-select[data-mh-active]::part(display-input) {
  color: #fff;
}

/* Row-2 layout — search on the left, actions on the right. Matches
   /companies except we scope the auto-margin here (in /companies the
   actions live in row 1). */
.filters-section .companies-search-row .drilling-actions-wrapper {
  margin-left: auto;
}

/* Per-pill count badge inside the .market-option so the pill still uses
   the shared token styling. Slightly muted so the label reads first. */
.sp-pill-count {
  margin-left: 6px;
  opacity: 0.6;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.market-option.selected .sp-pill-count {
  opacity: 0.85;
}

/* ---------- Body grid ---------- */

/* Two-column grid + 320px rail inherited from /companies. Featured Supplier
   card lives in the rail (mounted via <mh-featured-client-card
   surface="suppliers">). When no eligible supplier is available the
   component silently hides itself and the rail sits as a 320px gap —
   same behavior as /companies. `:has()` lets us collapse cleanly to
   single-column when the widget has hidden itself so the empty column
   doesn't dead-space wide screens. */
@media (min-width: 1100px) {
  .companies-body-grid:has(.companies-body-rail > mh-featured-client-card[style*="display: none"]),
  .companies-body-grid:has(.companies-body-rail:empty) {
    grid-template-columns: minmax(0, 1fr);
  }
  .companies-body-grid:has(.companies-body-rail > mh-featured-client-card[style*="display: none"]) .companies-body-rail,
  .companies-body-rail:empty {
    display: none;
  }
}

/* ---------- Row cell tokens ---------- */

/* Supplier cell: logo + name. Narrow (icon-style, aspect < 1.6) logos sit
   inline next to the name at 28×28; wide/wordmark logos flip
   `.sp-row-company` to column layout via `.is-wide-logo` and let the
   artwork span the cell above the name so the aspect ratio isn't
   destroyed. Detection happens on image load in suppliers.js. */
.sp-row-company {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sp-row-company.is-wide-logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.sp-row-logo-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sp-row-company.is-wide-logo .sp-row-logo-wrap {
  width: auto;
  max-width: 160px;
}

.sp-row-logo-img,
.sp-row-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Wide-logo variant: let the image size to natural aspect ratio, capped so
   a very tall wordmark doesn't bloat row height. */
.sp-row-company.is-wide-logo .sp-row-logo-img {
  width: auto;
  height: 32px;
  max-width: 160px;
  border-radius: 4px;
}

.sp-row-logo--monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: #f0fdfa;
  color: #0f766e;
  border: 1px solid #ccfbf1;
}

.sp-row-company__text {
  min-width: 0;
}

/* Combined Services cell — primary category pill + "+N services" pill.
   Wraps so a long primary category name doesn't push the +N pill out of the
   cell on narrow viewports. */
.sp-services-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
/* "+N services" enrichment chip carries the leaf count. Same tooltip
   plumbing as other "+N" chips (data-sp-tooltip → attachTooltipDelegation)
   but the wider label ("+10 services") justifies a touch more horizontal
   padding than the numeric-only "+N" chips. */
.sp-services-more {
  padding-left: 9px;
  padding-right: 9px;
}

/* Primary-service pill inside its column */
.sp-primary-pill {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #1e40af;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
}

/* Mini chips inside the Services / Coverage / Commodities cells. Wrap onto
   a second line so long lists don't overflow horizontally. */
.sp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sp-mini-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
}

.sp-mini-chip--commodity {
  color: #1e40af;
  background: #ffffff;
  border-color: #bfdbfe;
}

.sp-mini-chip--more {
  color: #64748b;
  background: transparent;
  border-color: #cbd5e1;
}

.sp-mini-chip--global {
  color: #0f766e;
  background: #f0fdfa;
  border-color: #99f6e4;
  font-weight: 600;
}

/* HQ cell — city/state on top, country below in muted grey. */
.sp-hq__primary {
  font-size: 13px;
  color: #0f172a;
  line-height: 1.4;
}

.sp-hq__country {
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
  margin-top: 1px;
}

/* ---------- Services hierarchical tree container ---------- */

/* HierarchicalMultiselect mounts inside .sp-drawer-tree. The widget carries
   its own summary border + absolutely-positioned dropdown, so this wrapper
   must be a bare block:
     - NO border/border-radius/background — the widget's summary already
       renders these; a container border would double-up.
     - NO overflow: hidden/auto — the widget's open <ul> is
       position:absolute and would get clipped inside a scroll container.
     - NO max-height — the widget owns its own internal max-height on the
       list wrapper (300px by default). */
.sp-drawer-tree {
  position: relative;
}

/* The widget renders its dropdown at position: absolute with z-index: 99.
   Inside the Shoelace drawer that's not enough — the drawer body sets its
   own stacking context. Bump the details[open] z-index so the dropdown
   floats above the following drawer sections. */
.sp-drawer-tree .hier-ms-widget[open] { z-index: 20; }

/* Match the summary border to the neighboring sl-input fields for visual
   coherence — Shoelace default is `--sl-input-border-color: #cccccc`. */
.sp-drawer-tree .hier-ms-widget summary {
  border-color: #cccccc;
  border-radius: 6px;
  height: 34px;
}
.sp-drawer-tree .hier-ms-widget[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sp-drawer-tree .hier-ms-widget summary+ul {
  border-color: #cccccc;
}

/* ---------- Hover tooltip for +N pills ---------- */

.sp-hover-tooltip {
  position: absolute;
  z-index: 10000;
  min-width: 140px;
  max-width: 260px;
  padding: 8px 12px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
  pointer-events: none;
}

.sp-hover-tooltip::after {
  /* Little triangle pointing down at the anchor — the default position is
     ABOVE the pill; flipped variant handles the below-anchor case. */
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(15, 23, 42, 0.94);
}

.sp-hover-tooltip--below::after {
  top: -5px;
  bottom: auto;
  border-top: 0;
  border-bottom: 5px solid rgba(15, 23, 42, 0.94);
}

.sp-hover-tooltip__row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-hover-tooltip__row + .sp-hover-tooltip__row {
  margin-top: 2px;
}

/* +N pill needs pointer cursor + focus outline for keyboard users. */
.sp-mini-chip--more {
  cursor: help;
}
.sp-mini-chip--more:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
}

/* ---------- HQ cell — prevent single-line wraps like "British Columbia" ---------- */
.sp-hq__primary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}