/* ===== Tools & Rentals: force 4-up grid on tablets (leave Crews alone) ===== */
#pane-tools .board-grid.max-4,
#pane-rentals .board-grid.max-4{
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: 12px;
}

/* 2-up on small phones */
@media (min-width: 576px){
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 4-up on tablets and up */
@media (min-width: 740px){ /* use 768px for strict Bootstrap md if you want */
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Allow inner lists to scroll inside cards (critical for tablet/desktop) */
#pane-tools .board-grid.max-4 > .grid-item,
#pane-rentals .board-grid.max-4 > .grid-item{
  min-height: 0 !important;
}
#pane-tools .list-card .card-body,
#pane-rentals .list-card .card-body{
  display: flex;
  flex-direction: column;
  min-height: 0 !important;    /* enables nested scroll containers */
  overflow: hidden;             /* contain the inner scroller */
}

/* Always clamp Tools/Rentals lists to ~8 items; scroll if longer */
#pane-tools, #pane-rentals{
  --tile-gap: 12px;
  --row-h: 84px;                /* tune if your rows run taller/shorter */
}
#pane-tools .people-list,
#pane-rentals .people-list{
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  max-height: calc(8 * var(--row-h) + 7 * var(--tile-gap));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Make each row predictable so the clamp is accurate */
#pane-tools .item-card.tool,
#pane-rentals .item-card.rental{
  min-height: var(--row-h);
  display: flex;
  align-items: center;
}
#pane-tools .item-card.tool .thumb,
#pane-rentals .item-card.rental .thumb{
  max-height: calc(var(--row-h) - 20px);
  width: auto; height: auto;
}

/* 8-up on desktops for Tools & Rentals */
@media (min-width: 1200px){
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4{
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

/* (Optional) ultra-wide screens, keep 8 and tighten gaps a touch */
@media (min-width: 1600px){
  #pane-tools .board-grid.max-4,
  #pane-rentals .board-grid.max-4{
    gap: 10px !important; /* tweak if you want */
  }
}

/* === Messenger Icon Badge Styling ============================= */
.messenger-icon {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}
.messenger-icon .bi-chat-dots {
  transition: color 0.2s ease;
}
.messenger-icon:hover .bi-chat-dots {
  color: #ff7a00;
}
.messenger-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 0.7rem;
  padding: 0.2rem 0.35rem;
  line-height: 1;
}