/*
 * Loader: вкладки — рамка панели как продолжение активной вкладки;
 * горизонтальный скролл списка на узком экране.
 */

.loader-tabs-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

.loader-tabs-list .mantine-Tabs-tab {
  flex-shrink: 0;
  /* на 5px ниже стандартного вертикального padding */
  padding-top: max(2px, calc(var(--mantine-spacing-xs, 10px) - 2px));
  padding-bottom: max(2px, calc(var(--mantine-spacing-xs, 10px) - 2px));
}

/* Компактный бейдж-номер во вкладке */
.loader-tabs-list .mantine-Tabs-tab > div > div:first-child {
  width: 18px;
  height: 18px;
  font-size: 11px;
  border-radius: 4px;
  font-weight: 600;
}

/* Активный ярлычок — Tailwind *‑50 цвета квадратика (--loader-tab-bg); нижняя граница сохраняется */
.loader-tabs.mantine-Tabs-root[data-variant="outline"] .loader-tab-accent[data-active] {
  border-bottom-color: var(--mantine-color-gray-3, #dee2e6);
  background: var(--loader-tab-bg);
  z-index: 2;
}

/* Панель: рамка-продолжение вкладки; отступ содержимого ≈ 1.5 строки */
.loader-tabs .mantine-Tabs-panel {
  border: 1px solid var(--mantine-color-gray-3, #dee2e6);
  border-radius: 0 var(--mantine-radius-md, 8px) var(--mantine-radius-md, 8px) var(--mantine-radius-md, 8px);
  background: var(--mantine-color-body, #fff);
  padding: 1.5em;
  margin-top: -1px;
}