/*!
 * smit-views — полоса сохранённых видов списка (build 2155).
 * Пара с smit-views.js.
 *
 * Виды стоят над чипами и выглядят иначе: чип — это разовый фильтр, вид —
 * сохранённый набор фильтров. Разная роль должна читаться до клика.
 */
.smit-views {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-bottom: .4rem;
}

.smit-view {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  border: 1px dashed var(--sc-border, #cbd5e1);
  background: transparent; color: var(--sc-text-muted, #64748b);
  font-size: var(--sc-fz-sm, .82rem); line-height: 1.5; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.smit-view:hover { border-color: var(--sc-brand, #43b77a); color: var(--sc-brand, #43b77a); }
.smit-view:focus-visible {
  outline: 2px solid var(--sc-brand, #43b77a); outline-offset: 2px;
}
.smit-view.is-active {
  border-style: solid; border-color: var(--sc-brand, #43b77a);
  background: rgba(67, 183, 122, .12); color: var(--sc-brand-dark, #2d9a5f);
  font-weight: 600;
}
.smit-view-pin { font-size: .7em; opacity: .75; }
.smit-view-add { border-style: dashed; }
/* Кебаб рисует SmitActions — здесь только место под него, без рамки чипа. */
.smit-view-menu { display: inline-flex; align-items: center; }

[data-bs-theme="dark"] .smit-view, body.dark-theme .smit-view {
  border-color: #3a4250; color: #94a3b8;
}
[data-bs-theme="dark"] .smit-view.is-active, body.dark-theme .smit-view.is-active {
  background: rgba(67, 183, 122, .18); color: #6ee7b7; border-color: #43b77a;
}

/* Пустая полоса — только кнопка «Вид»: рамка вокруг одной кнопки выглядела
   бы недоделанным блоком. */
.smit-views.is-empty { margin-bottom: .3rem; }

@media (max-width: 767.98px) {
  /* На телефоне виды прокручиваются в строку: перенос съедал экран. */
  .smit-views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .smit-views::-webkit-scrollbar { display: none; }
  .smit-view { flex: 0 0 auto; }
  .smit-view-add-label { display: none; }
}
