/*
 * Realtime: KPI-карточки в одну строку, на узком экране — прокрутка вбок.
 */

.rt-kpi-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--mantine-spacing-sm, 0.75rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

/* Отступ под полосой прокрутки — только когда карточки не влезают в ряд */
@media (max-width: 61.99em) {
  .rt-kpi-strip {
    padding-bottom: 10px;
  }
}

.rt-kpi-strip > * {
  flex: 0 0 auto;
  width: min(78vw, 17rem);
  scroll-snap-align: start;
}

@media (min-width: 62em) {
  .rt-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
  }

  .rt-kpi-strip > * {
    width: auto;
  }
}

/* Верх страницы Realtime не скроллится отдельно на телефоне */
@media (max-width: 48em) {
  .cx-fill-page--realtime .cx-fill-page-top {
    max-height: none;
    overflow: visible;
  }
}