/* ============================================================================
   TIME REC — ЕДИНЫЙ ВИЗУАЛЬНЫЙ ЯЗЫК
   ============================================================================

   Зачем это появилось. В интерфейсе накопилось 138 разных цветов в стилях и
   ещё 73 прямо в разметке. Одинаковые по смыслу вещи выглядели по-разному:
   где-то кнопка серая, где-то оранжевая, где-то похожа на браузерную по
   умолчанию. Статусы передавались цветной точкой перед текстом, счётчики —
   яркими оранжевыми кружками. Из-за этого рабочая система выглядела собранной
   из кусков.

   Здесь собран один набор значений и компонентов. Правило простое: цвет,
   отступ, скругление и тень берутся отсюда, а не пишутся числом на месте.

   Это деловая рабочая система, а не рекламный сайт: палитра спокойная,
   акцент один, ярких пятен минимум — они должны означать «сюда действительно
   надо посмотреть», иначе перестают работать.

   Файл подключается ПОСЛЕДНИМ и только переопределяет. Разметку он не ломает:
   если что-то пойдёт не так, достаточно убрать одну строку подключения.
   ========================================================================= */

:root {
  /* --- Основа. Нейтральные тона несут почти весь интерфейс. --- */
  --ds-ink:            #16202a;   /* основной текст */
  --ds-ink-soft:       #3d4a56;   /* вторичный текст */
  --ds-muted:          #5d6b78;   /* подписи, подсказки — 5.6:1 к белому, с запасом к порогу 4.5 */
  --ds-faint:          #93a0ac;   /* совсем тихое */
  --ds-line:           #e3e8ec;   /* обычные границы */
  --ds-line-strong:    #cdd5dc;   /* заметные границы */
  --ds-canvas:         #f5f7f8;   /* фон страницы */
  --ds-surface:        #ffffff;   /* карточки, панели */
  --ds-surface-sunken: #f0f3f5;   /* вложенные области */

  /* --- Единственный акцент. Фирменный оранжевый остаётся, но работает
         точечно: главное действие и активный раздел. --- */
  --ds-accent:         #e2611c;
  --ds-accent-strong:  #c8500f;
  --ds-accent-deep:    #a53f0b;   /* наведение на заливку: 6.33 с белым */
  --ds-accent-soft:    #fdf1ea;
  --ds-accent-line:    #f3c7ad;

  /* --- Смысловые состояния. Каждое имеет тихий фон, читаемый текст
         и границу: цвет НИКОГДА не единственный носитель смысла,
         рядом всегда есть слово. --- */
  --ds-info-bg:        #eef4fb;  --ds-info-fg:      #1f5c96;  --ds-info-line:    #c3d9ef;
  --ds-attention-bg:   #fdf0ec;  --ds-attention-fg: #b23c17;  --ds-attention-line:#f2c4b3;
  --ds-active-bg:      #eaf6f2;  --ds-active-fg:    #0f6f5c;  --ds-active-line:  #b8dfd3;
  --ds-success-bg:     #edf7ee;  --ds-success-fg:   #2b6b34;  --ds-success-line: #c2e0c6;
  --ds-warning-bg:     #fdf6e6;  --ds-warning-fg:   #8a6206;  --ds-warning-line: #ecd9a6;
  --ds-danger-bg:      #fdeeee;  --ds-danger-fg:    #a32b28;  --ds-danger-line:  #f0c3c1;
  --ds-neutral-bg:     #eef1f3;  --ds-neutral-fg:   #4a5763;  --ds-neutral-line: #dbe1e6;

  /* --- Ритм. Один шаг — 4px, всё кратно ему. --- */
  --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px;
  --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px;

  /* --- Скругления. Три размера, не больше. --- */
  --ds-r-sm: 6px;
  --ds-r-md: 10px;
  --ds-r-lg: 14px;
  --ds-r-pill: 999px;

  /* --- Тени. Мягкие, почти незаметные: глубина создаётся границей,
         а не тёмным пятном под элементом. --- */
  --ds-shadow-sm: 0 1px 2px rgba(22, 32, 42, .05);
  --ds-shadow-md: 0 2px 8px rgba(22, 32, 42, .07);
  --ds-shadow-lg: 0 12px 32px rgba(22, 32, 42, .14);

  /* --- Типографика --- */
  --ds-text-xs: 11.5px;
  --ds-text-sm: 13px;
  --ds-text-md: 14px;
  --ds-text-lg: 16px;
  --ds-title:   19px;

  --ds-focus: 0 0 0 3px rgba(226, 97, 28, .28);
}

/* ============================================================================
   1. КНОПКИ. Пять видов, и у каждого своя работа.
   ========================================================================= */

.ds-btn,
.workspace button:not(.nav, .ds-plain, .quick, .stat-card),
.panel button:not(.nav, .ds-plain, .quick, .stat-card) {
  font: inherit;
  font-size: var(--ds-text-md);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--ds-r-sm);
  padding: 9px 14px;
  min-height: 36px;
  border: 1px solid var(--ds-line-strong);
  background: var(--ds-surface);
  color: var(--ds-ink);
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.workspace button:not(.nav, .ds-plain, .quick, .stat-card):hover,
.panel button:not(.nav, .ds-plain, .quick, .stat-card):hover {
  background: var(--ds-surface-sunken);
  border-color: var(--ds-faint);
}
.workspace button:not(.nav):focus-visible,
.panel button:not(.nav):focus-visible,
.ds-btn:focus-visible,
.filter-tabs button:focus-visible,
.nav:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
  border-color: var(--ds-accent);
}
.workspace button:disabled,
.panel button:disabled,
.ds-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Главное действие страницы — ровно одно на экран.
   Заливка именно -strong: на светлом оранжевом (#e2611c) белая подпись даёт
   3.52 при норме 4.5. Плитки сводки исключены — у них классы «quick primary»,
   и без исключения это правило перекрашивает их в кнопки. */
.ds-btn-primary,
.workspace button.primary:not(.quick, .stat-card),
.panel button.primary:not(.quick, .stat-card) {
  background: var(--ds-accent-strong);
  border-color: var(--ds-accent-strong);
  color: #fff;
}
.ds-btn-primary:hover,
.workspace button.primary:not(.quick, .stat-card):hover,
.panel button.primary:not(.quick, .stat-card):hover {
  background: var(--ds-accent-deep);
  border-color: var(--ds-accent-deep);
}

/* Обычное действие. */
.ds-btn-secondary,
.workspace button.secondary:not(.quick, .stat-card),
.panel button.secondary:not(.quick, .stat-card) {
  background: var(--ds-surface);
  border-color: var(--ds-line-strong);
  color: var(--ds-ink);
}

/* Опасное действие: приглушено, пока к нему не потянулись. */
.workspace button.danger-link,
.workspace button.danger-btn,
.workspace button.danger,
.panel button.danger-link,
.panel button.danger-btn,
.ds-btn-danger,
button.danger,
button.danger-link {
  /* Тоже явно: иначе общее правило кнопок красит удаление в обычный цвет,
     и опасное действие перестаёт отличаться от безопасного. */
  background: var(--ds-surface);
  border-color: var(--ds-danger-line) !important;
  color: var(--ds-danger-fg) !important;
  font-weight: 600;
  text-decoration: none;
}
.ds-btn-danger:hover,
button.danger:hover,
button.danger-link:hover {
  background: var(--ds-danger-bg);
  border-color: var(--ds-danger-fg);
}

/* Действие без рамки — для второстепенного. */
.ds-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-ink-soft);
}
.ds-btn-ghost:hover { background: var(--ds-surface-sunken); }

/* Ожидание. */
.ds-btn.is-loading, button.is-loading { position: relative; color: transparent !important; }
.ds-btn.is-loading::after, button.is-loading::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--ds-ink-soft);
  animation: ds-spin .7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   2. СЧЁТЧИКИ. Замечание владельца: оранжевые кружки в меню выглядят грубо.
   Счётчик — это справка, а не тревога. Тревожным он становится только когда
   действительно требует внимания, и даже тогда остаётся спокойным.
   ========================================================================= */

.count-badge,
.ds-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: auto;
  border-radius: var(--ds-r-pill);
  /* Непрозрачный фон: полупрозрачность мешала измерить контраст и делала
     цифры бледнее на тёмной панели. */
  background: #2b3945;
  color: #eef3f7;
  border: 1px solid #3b4a57;
  font-size: var(--ds-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;   /* цифры не «пляшут» при обновлении */
  letter-spacing: .1px;
  line-height: 1;
}
/* Требует внимания — но по-прежнему сдержанно. */
.count-badge.is-attention, .ds-count.is-attention {
  background: var(--ds-attention-bg);
  color: var(--ds-attention-fg);
  border-color: var(--ds-attention-line);
}
/* Активный раздел: счётчик на светлом фоне пункта. */
.nav.active .count-badge, .nav.active .ds-count {
  background: var(--ds-neutral-bg);
  color: var(--ds-ink-soft);
  border-color: var(--ds-neutral-line);
}
/* Трёхзначные и «999+» не должны разрывать пункт меню. */
.count-badge { max-width: 52px; overflow: hidden; }

/* ============================================================================
   3. СТАТУСЫ И ФИЛЬТРЫ. Замечание владельца: «точка + текст» выглядит
   примитивно. Точку убираем, вместо неё — аккуратная пилюля, у которой
   есть форма, фон и понятное активное состояние. Смысл читается словом,
   а не только цветом.
   ========================================================================= */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-2);
  padding: 0;
  background: transparent;
  border: 0;
}
.workspace .filter-tabs button,
.panel .filter-tabs button,
.filter-tabs button {
  appearance: none;
  border: 1px solid var(--ds-line-strong);
  background: var(--ds-surface);
  color: var(--ds-ink-soft);
  /* Приоритет указан явно: общее правило кнопок весит больше из-за :not(),
     а фильтр обязан остаться пилюлей, иначе он снова превращается в
     обычную прямоугольную кнопку — то, на что жаловался владелец. */
  border-radius: var(--ds-r-pill) !important;
  padding: 7px 14px !important;
  min-height: 34px !important;
  font-size: var(--ds-text-sm) !important;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-2);
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.workspace .filter-tabs button:hover,
.filter-tabs button:hover { background: var(--ds-surface-sunken); border-color: var(--ds-faint); }
.workspace .filter-tabs button.active,
.filter-tabs button.active {
  background: var(--ds-ink) !important;
  border-color: var(--ds-ink) !important;
  color: #fff !important;
}
/* Смысловая окраска — только у неактивных: активный всегда один и тот же,
   чтобы взгляд сразу находил, где он находится. */
.workspace .filter-tabs button[data-tone="attention"]:not(.active),
.filter-tabs button[data-client-filter="attention"]:not(.active),
.filter-tabs button[data-tone="attention"]:not(.active) {
  background: var(--ds-attention-bg) !important; color: var(--ds-attention-fg) !important; border-color: var(--ds-attention-line) !important;
}
.workspace .filter-tabs button[data-tone="active"]:not(.active),
.filter-tabs button[data-client-filter="active"]:not(.active),
.filter-tabs button[data-tone="active"]:not(.active) {
  background: var(--ds-active-bg) !important; color: var(--ds-active-fg) !important; border-color: var(--ds-active-line) !important;
}
.filter-tabs button[data-client-filter="trash"]:not(.active) {
  background: var(--ds-surface); color: var(--ds-muted); border-color: var(--ds-line);
}
/* Метка-кружок внутри пилюли: маленькая, ровно на базовой линии,
   и она ДОПОЛНЯЕТ слово, а не заменяет его. */
.filter-tabs button .ds-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .75; flex: 0 0 auto;
}

/* Пилюля статуса в списках и карточках. */
.ds-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--ds-r-pill);
  font-size: var(--ds-text-xs);
  font-weight: 700;
  border: 1px solid var(--ds-neutral-line);
  background: var(--ds-neutral-bg);
  color: var(--ds-neutral-fg);
  white-space: nowrap;
}
.ds-status--attention { background: var(--ds-attention-bg); color: var(--ds-attention-fg); border-color: var(--ds-attention-line); }
.ds-status--active    { background: var(--ds-active-bg);    color: var(--ds-active-fg);    border-color: var(--ds-active-line); }
.ds-status--success   { background: var(--ds-success-bg);   color: var(--ds-success-fg);   border-color: var(--ds-success-line); }
.ds-status--warning   { background: var(--ds-warning-bg);   color: var(--ds-warning-fg);   border-color: var(--ds-warning-line); }
.ds-status--danger    { background: var(--ds-danger-bg);    color: var(--ds-danger-fg);    border-color: var(--ds-danger-line); }
.ds-status--info      { background: var(--ds-info-bg);      color: var(--ds-info-fg);      border-color: var(--ds-info-line); }

/* Старые «pill» приводим к тому же виду. */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--ds-r-pill);
  background: var(--ds-info-bg); color: var(--ds-info-fg);
  border: 1px solid var(--ds-info-line);
  font-size: var(--ds-text-xs); font-weight: 700;
}

/* ============================================================================
   4. МАССОВЫЕ ДЕЙСТВИЯ. Замечание владельца: «Удалить выбранные» выглядит
   как стандартная HTML-кнопка. Пока ничего не выбрано, этих кнопок вообще
   не должно быть видно — они только шумят.
   ========================================================================= */

.ds-bulkbar {
  display: flex;
  align-items: center;
  gap: var(--ds-3);
  flex-wrap: wrap;
  padding: var(--ds-2) var(--ds-3);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface-sunken);
}
.ds-bulkbar__count { font-weight: 700; color: var(--ds-ink); font-size: var(--ds-text-sm); }
.ds-bulkbar__spacer { margin-left: auto; }
.ds-bulkbar[hidden] { display: none; }

/* Опасное действие в панели массовых операций всегда справа и отделено. */
.ds-bulkbar .ds-btn-danger,
.ds-bulkbar button.danger-link { margin-left: var(--ds-2); }

/* ============================================================================
   5. ПАНЕЛИ, КАРТОЧКИ, ТАБЛИЦЫ, ПУСТЫЕ СОСТОЯНИЯ
   ========================================================================= */

.panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-sm);
  padding: var(--ds-4);
}
.panel-head { margin-bottom: var(--ds-3); gap: var(--ds-3); }
.panel h2 { font-size: var(--ds-title); font-weight: 700; letter-spacing: -.2px; color: var(--ds-ink); }

.stats article, .stat-card, .quick, .document-card, .measurement-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-shadow-sm);
}
.stats article { border-top: 3px solid var(--ds-accent); }
.stats article.accent { background: var(--ds-ink); border-color: var(--ds-ink); color: #fff; }
.stats strong { font-weight: 700; letter-spacing: -.5px; }
.stats span { color: var(--ds-muted); }

table { border-collapse: collapse; width: 100%; }
table th {
  text-align: left;
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ds-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--ds-line-strong);
  padding: 8px 10px;
}
table td { border-bottom: 1px solid var(--ds-line); padding: 9px 10px; font-size: var(--ds-text-md); }
table tbody tr:hover { background: var(--ds-surface-sunken); }

.empty, .ds-empty {
  padding: var(--ds-8) var(--ds-4);
  text-align: center;
  color: var(--ds-muted);
  font-size: var(--ds-text-md);
  background: var(--ds-surface-sunken);
  border: 1px dashed var(--ds-line-strong);
  border-radius: var(--ds-r-md);
}

/* ============================================================================
   6. ПОЛЯ ВВОДА
   ========================================================================= */

/* input:not([type]) — поля, у которых атрибут type не указан вовсе. Браузер
   считает их текстовыми, а правила input[type=text] их не выбирают: атрибута
   нет. Именно так написана форма клиента, и она выпадала из оформления. */
input[type=text], input[type=search], input[type=tel], input[type=email],
input[type=number], input[type=date], input[type=password], input:not([type]),
select, textarea,
.search {
  font: inherit;
  font-size: var(--ds-text-md);
  color: var(--ds-ink);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-sm);
  padding: 8px 11px;
  min-height: 36px;
  transition: border-color .13s ease, box-shadow .13s ease;
}
input::placeholder, textarea::placeholder { color: var(--ds-faint); }
label { font-size: var(--ds-text-sm); color: var(--ds-ink-soft); font-weight: 600; }
.hint, .fld-hint, .muted { color: var(--ds-muted); font-size: var(--ds-text-sm); }

/* ============================================================================
   7. ЛЕВОЕ МЕНЮ
   ========================================================================= */

.sidebar { background: var(--ds-ink); }
.nav {
  display: flex;
  align-items: center;
  gap: var(--ds-2);
  color: #b9c4ce;
  font-weight: 600;
  font-size: var(--ds-text-md);
  border-radius: var(--ds-r-sm);
  padding: 9px 12px;
  position: relative;
}
.nav:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav.active {
  background: #fff;
  color: var(--ds-ink);
  font-weight: 700;
}
/* Полоска у активного раздела — цвет не единственный признак. */
.nav.active::before {
  content: '';
  position: absolute; left: -14px; top: 6px; bottom: 6px;
  width: 3px; border-radius: var(--ds-r-pill);
  background: var(--ds-accent);
}
.sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .12); }
.user-name { color: #fff; font-size: var(--ds-text-md); }
.user-role { color: #93a3b1; }

/* Разделитель перед служебными разделами: рабочее и административное
   не должны выглядеть одинаково важными. */
.nav.director-only:first-of-type,
.nav[data-view="localBackups"] {
  margin-top: var(--ds-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: var(--ds-3);
}

/* ============================================================================
   8. ШАПКА РАБОЧЕЙ ОБЛАСТИ
   ========================================================================= */

.topbar h1 { font-weight: 700; letter-spacing: -.4px; color: var(--ds-ink); }
.eyebrow { color: var(--ds-faint); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.topbar-search .search { min-width: 260px; }

/* ============================================================================
   9. ОКНА
   ========================================================================= */

dialog {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-shadow-lg);
  padding: 0;
  color: var(--ds-ink);
}
dialog::backdrop { background: rgba(22, 32, 42, .45); }
.dialog-form { padding: var(--ds-5); }
.dialog-actions { display: flex; gap: var(--ds-2); justify-content: flex-end; margin-top: var(--ds-4); }

/* ============================================================================
   10. ДОСТУПНОСТЬ
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ============================================================================
   ПРАВКИ ПО РЕЗУЛЬТАТАМ ПРОСМОТРА СНИМКОВ ЭКРАНА.
   Проверка стилей была зелёной, а на снимке обнаружилось другое — поэтому
   правки ниже сделаны по тому, что видно глазами.
   ========================================================================= */

/* Фильтры вставали в столбик по одному и съедали высоту экрана: панель
   инструментов — колонка, и полоса фильтров получала узкую ширину.
   На широком экране отдаём фильтрам всю строку целиком. */
@media (min-width: 761px) {
  .measurement-toolbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--ds-3);
  }
  .measurement-toolbar .filter-tabs {
    flex: 1 1 100% !important;
    width: 100%;
    row-gap: var(--ds-2);
  }
  .filter-tabs button { white-space: nowrap; }
}

/* Счётчик с нулём — это не информация, а шум. Прячем сам элемент. */
.count-badge.is-zero { display: none; }

/* Панель массовых действий не должна занимать место, пока пуста.
   Скрываем и по атрибуту, и по классу: атрибут hidden перебивается
   правилом display у некоторых предков. */
.ds-bulkbar[hidden],
.ds-bulkbar.is-empty { display: none !important; }


/* ============================================================================
   СКРЫТОЕ ДОЛЖНО БЫТЬ СКРЫТО.
   Правила показа по роли («.director .director-only { display: flex }»)
   перебивали атрибут hidden, и кнопки, которые код прячет, всё равно
   оставались на экране — например «Снять выделение» и «Удалить выбранные»
   висели у директора постоянно, хотя ничего не выбрано.
   ========================================================================= */
[hidden] { display: none !important; }


/* ============================================================================
   МОБИЛЬНЫЙ ВИД НЕ ДОЛЖЕН ПОСТРАДАТЬ ОТ УПЛОТНЕНИЯ.
   ========================================================================= */
@media (max-width: 760px) {
  /* iPhone сам увеличивает страницу, если поле мельче 16px. Здесь размер
     важнее плотности. */
  input[type=text], input[type=search], input[type=tel], input[type=email],
  input[type=number], input[type=date], input[type=password], input:not([type]),
  select, textarea,
  .search {
    font-size: 16px !important;
    min-height: 40px;
  }

  /* Ничто не должно быть шире экрана: горизонтальная прокрутка в рабочей
     системе недопустима. */
  .topbar-search .search { min-width: 0 !important; width: 100%; }
  .workspace, .panel, .document-card, .measurement-card, .stats article, .stat-card {
    max-width: 100%;
  }
  .panel { padding: 12px; }
  .measurement-toolbar { flex-direction: column !important; align-items: stretch !important; }
  .measurement-toolbar .filter-tabs { width: 100%; }
  .filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    /* Тень у края, за которым спрятаны фильтры. Два верхних слоя движутся
       вместе с содержимым и закрывают тень, когда прокручивать больше
       некуда, — поэтому подсказка честная и не висит постоянно. */
    background-image:
      linear-gradient(to right, var(--ds-surface), var(--ds-surface)),
      linear-gradient(to right, var(--ds-surface), var(--ds-surface)),
      linear-gradient(to right, rgba(22, 32, 42, .16), rgba(22, 32, 42, 0)),
      linear-gradient(to left,  rgba(22, 32, 42, .16), rgba(22, 32, 42, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { height: 0; }
  .filter-tabs button { flex: 0 0 auto; }
  table { display: block; overflow-x: auto; }
  .ds-bulkbar { flex-direction: column; align-items: stretch; }
  .ds-bulkbar__spacer { display: none; }
}