/* =====================================================
   Twitch Stream Board (TSB)
   Tabs layout styles (horizontal strip + compact items)
   ===================================================== */

/* Tabs layout: horizontal strip */
.tsb-layout-tabs #tsb-board {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
}

/* Only the tab-strip needs fixed-size, snap-aligned items */
.tsb-layout-tabs .tsb-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Tabs (more compact) */
.tsb-layout-tabs .tsb-item--tab {
  width: 360px;
  min-height: 56px;

  /* make it feel like a horizontal “tab strip” */
  border-radius: 12px;
  background: rgba(10, 33, 66, 0.85);
  border-color: rgba(33, 95, 174, 0.35);
}

.tsb-layout-tabs .tsb-item--tab .tsb-item-inner {
  padding: 8px 12px;
}

.tsb-layout-tabs .tsb-name {
  font-size: 13px;
}

.tsb-layout-tabs .tsb-status {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* Mobile sizing for tabs */
@media (max-width: 900px) {
  .tsb-layout-tabs .tsb-item--tab {
    width: 84vw;
  }
}