/* Оформление кабинета САВП: тёмная (по умолчанию) и светлая темы.
   Сами цвета тем — в app.js (createVuetify). Здесь цвета не пишутся числом, а берутся
   из переменных темы (rgb(var(--v-theme-primary)) и т. п.): тогда элемент сам перекрашивается
   при смене темы — как стиль оформления в 1С, а не цвет у каждого поля.

   Правила единого стиля:
   - скругления: карточки и окна — 12, поля и кнопки — 8, плашки — 6;
   - глубина — тонкой рамкой; тень только у того, что лежит поверх страницы (окна, списки);
   - цвет — только по смыслу: синий — главное действие и выбранное, зелёный/оранжевый/красный — статусы. */

:root {
  --savp-font: Inter, Roboto, "Segoe UI", system-ui, sans-serif;
  /* Сетка полей в панелях: обычное поле — одна ячейка, период — две (с промежутком между ними).
     Поля в строках друг под другом встают по одним вертикалям, стрелки списков — на одном уровне.
     Промежуток между полями — 16 (правка Вовы: «ничего не налеплено друг на друга») */
  --savp-gap: 16px;
  --savp-col: 210px;
  --savp-col-2: calc(var(--savp-col) * 2 + var(--savp-gap));
  --savp-radius: 12px;
  --savp-radius-sm: 8px;
  --savp-radius-xs: 6px;
}

/* Общие переменные обеих тем: рамка, приглушённый текст, подложка, подсветка под мышью */
.v-theme--savp,
.v-theme--savpDark {
  --savp-border: rgba(var(--v-border-color), var(--v-border-opacity));
  --savp-muted: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
  --savp-subtle: rgb(var(--v-theme-surface-light));
  --savp-hover: rgba(var(--v-theme-on-surface), 0.04);
  --savp-overlay: rgb(var(--v-theme-surface-bright));
}

.v-theme--savp {
  --savp-shadow-overlay: 0 12px 32px rgba(24, 24, 27, 0.12), 0 2px 6px rgba(24, 24, 27, 0.06);
}

.v-theme--savpDark {
  --savp-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Смена темы: на долю секунды выключаем плавные переходы, чтобы всё перекрасилось разом
   (класс ставит switchTheme в store.js) */
.savp-theme-switching *,
.savp-theme-switching *::before,
.savp-theme-switching *::after {
  transition: none !important;
}

/* Кто попросил систему не показывать анимацию — не показываем */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Шрифт ---------- */

html,
body,
.v-application {
  font-family: var(--savp-font);
  -webkit-font-smoothing: antialiased;
}

/* Vuetify задаёт шрифт у классов текста отдельно — заменяем на общий */
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
.text-subtitle-1, .text-subtitle-2, .text-body-1, .text-body-2,
.text-button, .text-caption, .text-overline {
  font-family: var(--savp-font) !important;
}

/* Цифры одной ширины: суммы и даты в столбцах стоят ровно, как в отчётах 1С */
.v-table,
.savp-kpi-value,
.savp-tile-value {
  font-variant-numeric: tabular-nums;
}

/* Заголовок карточки и страницы */
.v-card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.savp-page-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* Подзаголовок раздела внутри карточки или окна («Реквизиты», «История»); savp-section-head —
   строка с подзаголовком и кнопкой справа */
.savp-section-title {
  display: block;
  margin-bottom: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.savp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin-bottom: 12px;
}

/* Галочки разделов кабинета в окне сотрудника — в две колонки, на телефоне в одну */
.savp-section-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}

@media (max-width: 599px) {
  .savp-section-checks {
    grid-template-columns: 1fr;
  }
}

.savp-section-head .savp-section-title {
  margin-bottom: 0;
}

/* Пояснения под заголовком не обрезать многоточием */
.v-card-subtitle {
  white-space: normal;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- Карточки ---------- */

.v-card {
  border-radius: var(--savp-radius);
}

/* Карточка на странице — тонкая рамка без тени */
.v-card--variant-elevated {
  border: thin solid var(--savp-border);
  box-shadow: none;
}

/* ---------- Окна, выпадающие списки, подсказки ---------- */

/* Затемнение под окном — чёрное в обеих темах (у Vuetify оно цвета текста: в тёмной теме было белёсым) */
.v-overlay__scrim {
  background: #000;
}

.v-dialog > .v-overlay__scrim {
  --v-overlay-opacity: 0.6;
}

.v-theme--savp.v-dialog > .v-overlay__scrim,
.v-theme--savp .v-dialog > .v-overlay__scrim {
  --v-overlay-opacity: 0.4;
}

/* Окна и выпадающие панели — чуть светлее страницы, с рамкой и тенью: лежат поверх неё */
.v-dialog > .v-overlay__content > .v-card,
.v-dialog > .v-overlay__content > form > .v-card,
.v-menu > .v-overlay__content > .v-card,
.v-menu > .v-overlay__content > .v-list,
.v-menu > .v-overlay__content > .v-sheet {
  background: var(--savp-overlay);
  border: thin solid var(--savp-border);
  box-shadow: var(--savp-shadow-overlay);
}

.v-dialog > .v-overlay__content > .v-card,
.v-dialog > .v-overlay__content > form > .v-card {
  border-radius: var(--savp-radius);
}

/* Ритм окна: заголовок, пояснение, поля и кнопки — от одного левого края (24 точки).
   Поля окна идут колонкой через 16 (класс savp-dialog-fields у v-card-text): промежутки задаёт
   это правило, а не классы mb-3 / mt-2 у полей. Пустое место под полем на подсказку Vuetify
   в окнах не держит (hide-details «auto» — в app.js): подсказка или ошибка появляются,
   только когда есть. */
/* Путь — как у правил самой Vuetify для окон (карточка окна, а не карточки внутри него) */
.v-dialog > .v-overlay__content > :is(.v-card, form > .v-card) > .v-card-title {
  padding: 20px 24px 0;
}

.v-dialog > .v-overlay__content > :is(.v-card, form > .v-card) > .v-card-subtitle {
  padding: 4px 24px 0;
}

.v-dialog > .v-overlay__content > :is(.v-card, form > .v-card) > .v-card-text {
  padding: 16px 24px 8px;
}

.v-dialog > .v-overlay__content > :is(.v-card, form > .v-card) > .v-card-actions {
  gap: 8px;
  padding: 16px 24px 20px;
}

/* Крестик «Закрыть окно» — в правом верхнем углу каждого окна (закрывает, как «Отмена»).
   Заголовок и пояснение не заходят под него */
.v-dialog > .v-overlay__content > :is(.v-card, form > .v-card) {
  position: relative;
}

.savp-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
}

.v-dialog > .v-overlay__content > :is(.v-card, form > .v-card) > :is(.v-card-title, .v-card-subtitle) {
  padding-right: 56px;
}

/* Поверх фото — на подложке, чтобы крестик был виден на любом снимке */
.v-img + .savp-dialog-close,
.savp-dialog-close:has(+ .v-img) {
  background: rgba(var(--v-theme-surface), 0.85);
}

.v-card-text.savp-dialog-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Строка из двух полей (v-row): между полями — те же 16, лишнего сверху и снизу нет.
   У колонки с шириной (cols="12" sm="6") класс не v-col, а v-col-12 v-col-sm-6 — поэтому «*» */
.savp-dialog-fields > .v-row {
  flex: none;
  margin: -8px;
}

.savp-dialog-fields > .v-row > * {
  padding: 8px;
}

/* Подпись группы полей («Администратор организации») — ближе к своим полям, дальше от прежних */
.savp-dialog-group {
  margin: 4px 0 -8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.v-menu > .v-overlay__content {
  border-radius: 10px;
}

/* Строки выпадающих списков (отборы, выбор из списка) */
.v-menu .v-list-item {
  min-height: 36px;
}

/* Заголовок окна: крупно, справа крестик */
.savp-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 16px 16px 24px;
}

.savp-dialog-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Окно задачи: шапка с крестиком и разделитель — текст начинается ниже и с запасом снизу */
.v-dialog > .v-overlay__content > .v-card > .v-card-text.savp-dialog-body {
  padding: 20px 24px 24px;
}

/* Сведения «подпись — значение» (окно задачи, профиль, карточка дистрибьютора): подпись — простым
   текстом слева, значение — в рамке справа, как поле только для чтения. Все строки одной высоты (40),
   как поле ввода, поэтому строка с полем «Срок» стоит ровно в ряду с остальными */
.savp-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px 20px;
  font-size: 0.875rem;
}

.savp-facts-label {
  color: var(--savp-muted);
}

.savp-facts-value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius-sm);
  background: var(--savp-subtle);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Многострочный текст как набран (описание задачи, комментарий) */
.savp-pre {
  white-space: pre-line;
}

/* Таблица внутри окна или блока — в рамке (история задачи) */
.v-card .v-table.savp-boxed-table {
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius-sm);
  overflow: hidden;
}

.v-card .v-table.savp-boxed-table > .v-table__wrapper:last-child {
  padding-bottom: 0;
}

.savp-boxed-table td {
  vertical-align: top;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Всплывающая подсказка с текстом (значок «i» рядом с кнопкой) */
.v-card.savp-popover {
  max-width: 320px;
  padding: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.v-tooltip > .v-overlay__content {
  border-radius: var(--savp-radius-xs);
  font-size: 0.75rem;
}

/* ---------- Кнопки, поля, плашки ---------- */

/* Кнопки — обычными буквами, а не ЗАГЛАВНЫМИ */
.v-btn {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

.v-btn:not(.v-btn--icon) {
  border-radius: var(--savp-radius-sm);
}

/* Нажатие — кнопка чуть «проседает» */
.v-btn:active:not(.v-btn--disabled) {
  transform: translateY(1px);
}

/* Рамка кнопки без заливки — цвета рамок, а не текста */
.v-btn--variant-outlined:not([class*="text-"]) {
  border-color: rgba(var(--v-theme-on-surface), 0.18);
}

.v-btn-group {
  border-radius: var(--savp-radius-sm);
}

.v-btn-group .v-btn {
  border-radius: 0;
}

/* Переключатель «Активные / Неактивные / Все» — той же высоты, что поле поиска рядом */
.v-btn-group--density-compact.v-btn-group {
  height: 40px;
}

.v-btn-toggle.v-btn-group--variant-outlined {
  border-color: rgba(var(--v-theme-on-surface), 0.18);
}

/* Поля ввода: скруглённые, рамка мягче (при наведении темнеет) */
.v-field {
  border-radius: var(--savp-radius-sm);
}

.v-field--variant-outlined .v-field__outline {
  --v-field-border-opacity: 0.18;
}

/* Форма из полей одно под другим: ровный промежуток, подсказки и ошибки не наезжают на соседнее поле */
.savp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Связанные поля одной парой (новый пароль и его повтор): ближе друг к другу и дальше от соседей */
.savp-form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

/* Подсказка под группой полей — на уровне текста в поле */
.savp-form-hint {
  padding-inline: 16px;
  font-size: 0.75rem;
  color: var(--savp-muted);
}

/* Плашки — с небольшим скруглением, как кнопки (не «таблетки») */
.v-chip {
  border-radius: var(--savp-radius-xs);
  font-weight: 500;
}

/* ---------- Таблицы ---------- */

/* Шапка — на подложке, приглушённым текстом */
.v-table > .v-table__wrapper > table > thead > tr > th {
  background: var(--savp-subtle);
  color: var(--savp-muted);
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* Таблица внутри карточки — прямоугольная: подсветка строки идёт от края до края */
.v-card .v-table,
.v-card .v-table > .v-table__wrapper {
  border-radius: 0;
}

/* Под последней строкой — полоса воздуха: скругление угла карточки не срезает подсветку строки */
.v-card .v-table > .v-table__wrapper:last-child {
  padding-bottom: var(--savp-radius);
}

/* Ячейки в несколько строк (дата и автор, название и артикул) — с запасом сверху и снизу,
   чтобы строки таблицы не слипались; однострочные строки остаются прежней высоты */
.v-table > .v-table__wrapper > table > tbody > tr:not(.v-data-table__tr--mobile) > td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.v-table > .v-table__wrapper > table > tbody > tr:not(.v-data-table__tr--mobile):hover > td {
  background: var(--savp-hover);
}

/* Значки — одного приглушённого цвета по всему кабинету (цвет — только у статусов и чисел со смыслом).
   Кнопки-значки в таблицах при наведении светлеют до цвета текста */
.savp-icon,
.v-table .v-btn--icon.v-btn--variant-text {
  color: var(--savp-muted);
}

.v-table .v-btn--icon.v-btn--variant-text:hover {
  color: rgb(var(--v-theme-on-surface));
}

/* Строка «Итого» внизу таблицы отчёта */
.v-table > .v-table__wrapper > table > tbody > tr.savp-total-row > td {
  font-weight: 700;
  background: var(--savp-subtle);
}

/* Несколько строк в одной ячейке (плашка и пояснение под ней) — с промежутком */
.savp-cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 0;
}

/* Подвал таблицы: «Строк на странице», листание */
.v-data-table-footer {
  font-size: 0.8125rem;
  color: var(--savp-muted);
}

/* Пустая таблица: подпись по центру, приглушённая, с воздухом */
.v-data-table-rows-no-data > td {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  color: var(--savp-muted);
}

/* Заглушка до первого действия (например, отчёт ещё не сформирован): значок и пояснение */
.savp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
  color: var(--savp-muted);
}

.savp-empty > .v-icon {
  width: 56px;
  height: 56px;
  font-size: 28px;
  border-radius: var(--savp-radius);
  color: var(--savp-muted);
  background: var(--savp-subtle);
}

.savp-empty > div {
  max-width: 560px;
}

.savp-table tbody tr {
  cursor: default;
}

.savp-table.clickable tbody tr {
  cursor: pointer;
}

/* Подложка раскрытой строки таблицы */
.savp-expanded {
  background: rgba(var(--v-theme-on-surface), 0.025);
}

/* Таблица на телефоне: строка — карточка «колонка: значение», без лишней высоты */
.v-data-table__tr--mobile > td {
  height: auto !important;
  min-height: 30px;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.v-data-table__tr--mobile > td:first-child {
  padding-top: 12px !important;
}

.v-data-table__tr--mobile > td:last-child {
  padding-bottom: 12px !important;
  border-bottom: thin solid var(--savp-border);
}

/* ---------- Вкладки ---------- */

.v-tab.v-btn {
  font-weight: 500;
  letter-spacing: normal;
}

.v-tab--selected.v-btn {
  font-weight: 600;
}

/* ---------- Панель над таблицей ---------- */

/* Заголовок, поиск, переключатели, кнопки. На узком экране (телефон) элементы
   переносятся на следующую строку, а не обрезаются. */
.savp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--savp-gap);
  white-space: normal;
  overflow: visible;
}

.savp-toolbar > .v-input {
  flex: 1 1 220px;
}

/* Галочки и переключатели в панели — по размеру подписи, а не на всю строку (иначе «висят» посередине) */
.savp-toolbar > .v-checkbox,
.savp-toolbar > .v-switch {
  flex: 0 0 auto;
}

.savp-toolbar .v-selection-control .v-label {
  font-size: 0.875rem;
}

/* Переключатель сразу после итогов — чуть дальше от них, чтобы не читался как ещё один итог */
.savp-totals + .v-switch {
  margin-left: 20px;
}

/* Ритм карточки: строки панели (заголовок, поля, отборы, итоги, подсказка) идут одна под другой
   через 16 точек; первая строка — в 16 от верха; от панели до таблицы — 16. Отступы задаются здесь,
   а не классами pt-0 / pb-2 у каждой строки — так они одинаковые на всех страницах. */
.v-card-title.savp-toolbar,
.v-card-text.savp-toolbar {
  padding: var(--savp-gap) 16px 0;
}

/* Первая строка: в карточке перед ней служебная полоса загрузки Vuetify (.v-card__loader),
   во вкладке она первая */
.v-card__loader + :is(.v-card-title, .v-card-text).savp-toolbar,
:is(.v-card-title, .v-card-text).savp-toolbar:first-child,
.v-divider + .v-card-text.savp-toolbar {
  padding-top: 16px;
}

/* После блока с содержимым (у него свой отступ снизу) строка панели начинается сразу */
.v-card-text:not(.savp-toolbar) + .v-card-text.savp-toolbar {
  padding-top: 0;
}

/* Текст или итоги сразу под панелью (у них pt-0) — тоже через 16, а не вплотную к полям
   или к кнопке в заголовке («Счета» → «Сформировать счёт», правка Вовы, пункт 15) */
:is(.v-card-title, .v-card-text).savp-toolbar + .v-card-text.pt-0 {
  padding-top: 16px !important;
}

/* Подсказка серым под панелью */
.v-card-subtitle {
  padding: 10px 16px 0;
}

/* От панели до таблицы, разделителя, списка или колонок (v-row) — 16 */
:is(.savp-toolbar, .v-card-subtitle) + :is(.v-table, .v-divider, .v-expansion-panels, .savp-matrix, .v-alert, .v-row) {
  margin-top: 16px;
}

/* Карточка (или вкладка), которая заканчивается панелью, — с отступом снизу
   (в карточке после неё ещё служебная подложка Vuetify .v-card__underlay) */
:is(.v-card, .v-window-item) > :is(.v-card-title.savp-toolbar, .v-card-text.savp-toolbar, .v-card-subtitle):is(:last-child, :has(+ .v-card__underlay), :has(+ .v-progress-linear)) {
  padding-bottom: 16px;
}

/* Полоса загрузки в конце карточки лежит поверх её нижнего края и места не занимает:
   пока она была отдельной строкой, карточка на время загрузки меняла высоту и всё под ней
   дёргалось при каждом переходе в раздел (№79). top: auto — Vuetify сам ставит полосе top: 0 */
.v-card > :is(.savp-toolbar, .v-card-subtitle, .v-card-text) + .v-progress-linear {
  position: absolute;
  top: auto !important;
  bottom: 0;
  left: 0;
}

/* Итоги над таблицей (components/totals.js): подпись мелко, число крупно */
.savp-totals {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 32px;
}

.savp-total-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--savp-muted);
  white-space: nowrap;
}

.savp-total-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.savp-total-value {
  margin-top: 2px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Итог, который можно нажать как отбор («Без координат», №139): подпись подчёркнута,
   включённый отбор — подложкой */
.savp-total-link {
  cursor: pointer;
  margin: -4px -8px;
  padding: 4px 8px;
  border-radius: var(--savp-radius);
}

.savp-total-link .savp-total-label {
  text-decoration: underline dotted;
}

.savp-total-on {
  background: rgba(var(--v-theme-warning), 0.14);
}

/* Раскрывающиеся строки в карточке (отчёт «Ассортимент»): тот же отступ от края, что у таблиц */
.v-card .v-expansion-panel-title {
  padding: 12px 16px;
  min-height: 52px;
}

.v-card .v-expansion-panel-text__wrapper {
  padding: 0 0 8px;
}

.v-card .v-expansion-panels--variant-accordion > .v-expansion-panel {
  background: transparent;
}

/* Страница настроек карточками («Логистика» → «Параметры», эскиз Вовы 2026-11-06): две карточки
   рядом, широкая — под ними; на всю ширину страницы (правка Вовы: без пустоты справа),
   на узком экране — одна под другой */
.savp-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.savp-settings-wide {
  grid-column: 1 / -1;
}

@media (max-width: 959px) {
  .savp-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.savp-settings-card {
  display: flex;
  flex-direction: column;
  padding: 20px 24px;
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius);
  background: var(--savp-subtle);
}

/* Шапка карточки: значок, заголовок, короткое пояснение; под шапкой — черта */
.savp-settings-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: thin solid var(--savp-border);
}

.savp-settings-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--savp-radius-sm);
  background: rgba(var(--v-theme-primary), 0.14);
  color: rgb(var(--v-theme-primary));
}

.savp-settings-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.savp-settings-sub,
.savp-settings-hint {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--savp-muted);
}

.savp-settings-sub {
  margin-top: 2px;
}

/* «Лицензии приложений»: сколько занято из скольких — крупно, под ним полоса и список */
.savp-license-usage {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 0 10px;
}

.savp-license-count {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Плашка не растягивается на высоту карточки (у v-alert во Vuetify flex: 1) */
.savp-license-note {
  flex: none;
}

.savp-license-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto);
  gap: 20px;
  align-items: center;
  padding: 10px 0;
  border-top: thin solid var(--savp-border);
  font-size: 0.875rem;
}

.savp-license-head {
  padding-top: 4px;
  border-top: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--savp-muted);
}

.savp-license-label {
  display: none;
}

/* На телефоне: ФИО, под ним телефон и последний вход */
@media (max-width: 599px) {
  .savp-license-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .savp-license-head {
    display: none;
  }

  .savp-license-label {
    display: inline;
  }
}

/* Строка настройки: слева название и пояснение, справа поле; строки разделены чертой */
.savp-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}

.savp-settings-row + .savp-settings-row {
  border-top: thin solid var(--savp-border);
}

/* Строка с галочкой: под галочкой может раскрыться текст SMS */
.savp-settings-row--block {
  display: block;
}

.savp-settings-label {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}

.savp-settings-hint {
  margin-top: 2px;
}

.savp-settings-input {
  flex: none;
  width: 140px;
}

/* На телефоне карточке — поуже поля, тексту — побольше места */
@media (max-width: 599px) {
  .savp-settings-card {
    padding: 16px;
  }

  .savp-settings-row {
    gap: 16px;
  }

  .savp-settings-input {
    width: 120px;
  }
}

/* Галочка с подписью в две строки: квадратик — напротив первой строки */
.savp-settings-check .v-selection-control {
  align-items: flex-start;
}

.savp-settings-check .v-label {
  padding-top: 4px;
  opacity: 1;
  white-space: normal;
}

/* Поля «План-факта» — в две колонки одной высоты, на узком экране — одно под другим */
.savp-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 8px;
}

@media (max-width: 959px) {
  .savp-settings-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Блок внутри карточки под чертой («Причины задержки») */
.savp-settings-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: thin solid var(--savp-border);
}

/* Причины задержки — плашками с крестиком; длинная причина переносится внутри плашки */
.savp-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.savp-reasons .v-chip {
  height: auto;
  min-height: 32px;
  padding-block: 4px;
  white-space: normal;
}

/* Новая причина: поле и кнопка «Добавить» одной строкой */
.savp-reasons-add {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 560px;
  margin-top: 16px;
}

.savp-reasons-add .v-input {
  flex: 1;
}

.savp-reasons-off {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* Подробности мелким текстом внизу карточки */
.savp-settings-note {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--savp-muted);
}

.savp-settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* «Ассортимент»: строки дистрибьюторов — как таблица с шапкой (правка Вовы, пункт 4).
   Название, доля, «продавалось» и сумма — каждая в своей колонке, поэтому в соседних строках
   значения стоят ровно друг под другом, а не сдвигаются за длиной названия */
.savp-assort-head,
.savp-assort-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 150px 160px;
  column-gap: var(--savp-gap);
  align-items: center;
}

/* Справа в строке — 16 до стрелки раскрытия; стрелка — ровно 24, чтобы шапка знала её ширину */
.savp-assort-row {
  width: 100%;
  padding-right: var(--savp-gap);
}

.v-expansion-panel-title:has(.savp-assort-row) .v-expansion-panel-title__icon {
  width: 24px;
  justify-content: center;
}

/* Шапка — как у таблиц; справа место под стрелку: 16 + 24 + 16 */
.savp-assort-head {
  padding: 10px 56px 10px 16px;
  background: var(--savp-subtle);
  color: var(--savp-muted);
  font-weight: 600;
  font-size: 0.8125rem;
  white-space: nowrap;
}

.savp-toolbar + .savp-assort-head {
  margin-top: 16px;
}

.savp-assort-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Подписи «доля», «продавалось» в плашках — только на телефоне, где нет шапки */
.savp-assort-label {
  display: none;
}

/* На телефоне колонкам не хватает места: название — отдельной строкой, под ним доля,
   «продавалось» и сумма (справа; не помещается — строкой ниже); шапки нет, подписи — в плашках */
@media (max-width: 599px) {
  .savp-assort-head {
    display: none;
  }

  .savp-assort-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .savp-assort-name {
    flex-basis: 100%;
  }

  .savp-assort-amount {
    margin-left: auto;
    white-space: nowrap;
  }

  .savp-assort-label {
    display: inline;
    margin-right: 0.25em;
  }
}

/* Поля в панели — шрифтом на ступень мельче: плотнее, и подписи отборов («Характеристика»)
   помещаются целиком */
.savp-toolbar .v-input {
  font-size: 0.875rem;
}

.savp-toolbar .v-field-label:not(.v-field-label--floating) {
  font-size: 0.875rem;
}

.savp-toolbar .v-btn-toggle {
  max-width: 100%;
  overflow-x: auto;
}

/* Поля отбора, «Производитель», «Строки», даты (savp-filter) — ровно одна ячейка сетки;
   поиск (savp-search) — одной ширины на всех страницах. На телефоне — во всю ширину */
.savp-toolbar > .savp-filter {
  flex: 0 0 var(--savp-col);
  max-width: var(--savp-col);
}

/* Поле на две ячейки: «Производитель» — название организации длинное */
.savp-toolbar > .savp-filter.savp-filter-wide {
  flex-basis: var(--savp-col-2);
  max-width: var(--savp-col-2);
}

.savp-toolbar > .savp-search {
  flex: 0 0 280px;
  max-width: 280px;
}

@media (max-width: 599px) {
  .savp-toolbar > :is(.savp-filter, .savp-filter.savp-filter-wide, .savp-search) {
    flex: 1 1 100%;
    max-width: none;
  }
}

/* Телефон: переключатель на всю ширину, кнопки делят её поровну */
@media (max-width: 599px) {
  .savp-toolbar .v-btn-toggle {
    width: 100%;
  }

  .savp-toolbar .v-btn-toggle .v-btn {
    flex: 1 1 auto;
    padding: 0 8px;
    letter-spacing: normal;
  }
}

/* ---------- Меню слева и шапка ---------- */

/* Меню — на цвете страницы, отделено тонкой линией */
.v-navigation-drawer.savp-nav {
  background: rgb(var(--v-theme-background));
}

.savp-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 60px;
  padding: 10px 8px 6px 16px;
}

.v-navigation-drawer--rail .savp-nav-head {
  justify-content: center;
  padding: 10px 0 6px;
}

.savp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.savp-nav-head .savp-logo {
  flex: 1 1 auto;
}

/* Значок САВП: квадрат цвета акцента */
.savp-logo-mark {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--savp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--v-theme-on-primary));
  background: rgb(var(--v-theme-primary));
}

.savp-logo-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.savp-logo-subtitle {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--savp-muted);
}

.savp-nav-toggle {
  color: var(--savp-muted);
}

.savp-nav-list.v-list {
  padding: 4px 10px;
  background: transparent;
}

.v-navigation-drawer--rail .savp-nav-list.v-list {
  padding: 4px 8px;
}

/* Счётчик справа от пункта меню — без пустого промежутка перед ним (иначе «Обращения» обрезались) */
.savp-nav-list .v-list-item__append > .v-list-item__spacer {
  width: 8px;
}

/* Меню помещается на экран без прокрутки: строки и подписи групп — плотнее */
.savp-nav .v-list-subheader {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 26px;
  margin-top: 6px;
  padding-inline-start: 10px !important;
}

.savp-nav .v-list-item {
  margin-bottom: 1px;
  min-height: 34px;
}

.savp-nav .v-list-item__prepend > .v-icon {
  opacity: 0.7;
}

.savp-nav .v-list-item--active .v-list-item__prepend > .v-icon {
  opacity: 1;
}

.savp-nav .v-list-item-title {
  font-size: 0.875rem;
  font-weight: 500;
}

.savp-nav .v-list-item--active .v-list-item-title {
  font-weight: 600;
}

/* Блок пользователя внизу меню: нажатие — меню «Профиль» и настройки */
.savp-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px;
  padding: 8px 6px 8px 8px;
  border-radius: var(--savp-radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

.savp-user:hover,
.savp-user:focus-visible {
  background: var(--savp-hover);
  outline: none;
}

.savp-user.active {
  background: rgba(var(--v-theme-primary), 0.1);
}

.v-navigation-drawer--rail .savp-user {
  justify-content: center;
  padding: 8px 0;
}

.savp-user .flex-none {
  flex: none;
}

/* Свернуть / развернуть меню — сразу, без анимации ширины: при плавном сдвиге браузер на каждом кадре
   заново раскладывал всю страницу справа (большие таблицы), и движение подтормаживало.
   Выезд меню на телефоне (сдвиг, без перераскладки) остаётся плавным */
.v-navigation-drawer {
  transition-property: transform, visibility;
}

.v-main,
.v-app-bar.v-toolbar {
  transition: none;
}

/* Шапка над страницей: слева организация, справа переключатель темы */
.v-app-bar.savp-bar {
  border-bottom: thin solid var(--savp-border);
}

.savp-bar-org {
  min-width: 0;
}

.savp-bar-org-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ---------- Страница входа ---------- */

.savp-login {
  flex: 1 1 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Левая часть — узкая колонка (Земля и пара фраз), форма входа — ближе к середине экрана */
@media (min-width: 960px) {
  .savp-login {
    grid-template-columns: clamp(400px, 32vw, 560px) minmax(0, 1fr);
  }

}

/* Левая половина: о сервисе на фоне Земли из космоса (components/globe.js), в обеих темах тёмная.
   Текст — сверху, Земля «встаёт» снизу и под текст не заходит */
.savp-login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 44px 48px;
  color: #ececef;
  background: radial-gradient(120% 80% at 70% 100%, #0b1630 0%, #05070d 60%);
  border-right: thin solid rgba(255, 255, 255, 0.08);
}

.savp-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.savp-login-brand > :not(.savp-globe) {
  position: relative;
}

.savp-login-brand .savp-logo-mark {
  color: #0b0b0c;
  background: #5b9bff;
}

.savp-login-brand .savp-logo-subtitle {
  color: rgba(236, 236, 239, 0.6);
}

.savp-login-headline {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
  max-width: 460px;
  text-wrap: balance;
}

.savp-login-lead {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 440px;
  color: rgba(236, 236, 239, 0.7);
}

/* Правая половина: форма входа */
.savp-login-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 32px;
}

/* На широком экране форма чуть левее середины правой части — ближе к центру экрана */
@media (min-width: 960px) {
  .savp-login-main {
    padding-right: max(16px, 9vw);
  }
}

.savp-login-form {
  width: 100%;
  max-width: 380px;
}

.savp-login-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.savp-login-main .savp-login-theme {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* «Запрос отправлен»: что будет дальше — абзацами */
.savp-login-sent {
  font-size: 0.875rem;
  line-height: 1.55;
}

.savp-login-sent p + p {
  margin-top: 10px;
}

/* ---------- Сотрудники: запросы нового пароля ---------- */

.savp-toolbar > .savp-requests {
  flex: 1 1 100%;
}

.savp-requests {
  border: 1px solid var(--savp-border);
  border-radius: var(--savp-radius-sm);
  padding: 12px 16px;
}

.savp-requests-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  font-weight: 600;
}

/* Значок — в плашке цвета «внимание», как срочность в «Требует внимания» */
.savp-requests-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--savp-radius-xs);
  color: rgb(var(--v-theme-warning));
  background: rgba(var(--v-theme-warning), 0.14);
}

.savp-request-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--savp-border);
}

.savp-requests-note {
  padding-top: 10px;
  border-top: 1px solid var(--savp-border);
  font-size: 0.8125rem;
  color: var(--savp-muted);
}

/* ---------- Дашборд ---------- */

.savp-kpi-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--savp-muted);
}

.savp-kpi-value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.savp-kpi-icon {
  color: var(--savp-muted);
}

/* «Требует внимания»: значки одного цвета и ближе к тексту; срочность — плашка справа */
.savp-attention .v-list-item {
  padding-inline: 8px !important;
}

.savp-attention .v-list-item__prepend > .v-icon,
.savp-attention .v-list-item__append > .v-icon {
  color: var(--savp-muted);
  opacity: 1;
}

.savp-attention .v-list-item__prepend > .v-icon ~ .v-list-item__spacer {
  width: 14px;
}

.savp-attention .v-list-item__append > .v-icon ~ .v-list-item__spacer {
  width: 12px;
}

/* Место в топе: 1–3 подсвечены */
.savp-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--savp-radius-xs);
  font-size: 12px;
  font-weight: 600;
  background: var(--savp-subtle);
  color: var(--savp-muted);
}

.savp-rank.top {
  background: rgba(var(--v-theme-primary), 0.14);
  color: rgb(var(--v-theme-primary));
}

/* Доля в топе: короткая полоска и процент */
.savp-share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.savp-share .v-progress-linear {
  flex: none;
  width: 48px !important;
}

/* На телефоне таблица узкая — только процент */
@media (max-width: 599px) {
  .savp-share .v-progress-linear {
    display: none;
  }
}

/* ---------- Общие мелочи ---------- */

/* Значок организации в профиле: буква на подложке акцента (у дистрибьютора — оранжевой,
   у розничной точки — зелёной) */
.savp-avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--savp-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: rgb(var(--v-theme-primary));
  background: rgba(var(--v-theme-primary), 0.14);
}

.savp-avatar.distributor {
  color: rgb(var(--v-theme-warning));
  background: rgba(var(--v-theme-warning), 0.14);
}

.savp-avatar.retail {
  color: rgb(var(--v-theme-success));
  background: rgba(var(--v-theme-success), 0.14);
}

.savp-secret {
  font-family: Consolas, monospace;
  font-size: 15px;
  padding: 10px 12px;
  background: var(--savp-subtle);
  border-radius: var(--savp-radius-sm);
  word-break: break-all;
}

/* Пакет из 1С как пришёл (окно загрузки у администратора САВП) */
.savp-json {
  max-height: 420px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--savp-radius-sm);
  background: var(--savp-subtle);
  font-family: Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
}

/* Фото номенклатуры: маленькая копия, по нажатию — крупно */
.savp-thumb {
  cursor: zoom-in;
  background: var(--savp-subtle);
  border-radius: var(--savp-radius-xs);
}

.savp-photo {
  width: 96px;
}

/* ---------- Календарь выгрузок (components/upload_calendar.js) ---------- */

/* Метка дня — одного размера у всех дней, со значками и без (луна, замечания), как ячейки одной сетки */
.v-chip.savp-day-chip {
  width: 84px;
  padding-inline: 6px;
  justify-content: center;
}

.savp-day-chip .v-chip__content {
  gap: 3px;
}

.savp-day-chip .v-icon {
  margin: 0 !important;
}

/* Сводка по дистрибьюторам: таблица шире экрана прокручивается внутри, имя закреплено слева */
.savp-matrix {
  overflow-x: auto;
}

.savp-matrix td {
  height: 52px !important;
}

.savp-matrix .savp-matrix-name {
  position: sticky;
  left: 0;
  background: rgb(var(--v-theme-surface));
  z-index: 1;
  min-width: 200px;
  max-width: 260px;
  white-space: normal;
}

.savp-matrix thead .savp-matrix-name {
  background: var(--savp-subtle);
}

.savp-matrix .savp-matrix-name a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.savp-matrix .savp-matrix-name a:hover {
  color: rgb(var(--v-theme-primary));
  text-decoration: underline;
}

/* Месяц: 7 колонок (Пн–Вс), день — клетка с меткой времени */
.savp-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.savp-month-head {
  text-align: center;
  font-size: 12px;
  color: var(--savp-muted);
}

.savp-month-cell {
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius-sm);
  min-height: 64px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

.savp-month-cell:not(.empty):not(.future):hover {
  background: var(--savp-hover);
}

.savp-month-cell.empty {
  border: none;
  cursor: default;
}

.savp-month-cell.future {
  opacity: 0.4;
  cursor: default;
}

.savp-month-cell.today {
  border: 2px solid rgb(var(--v-theme-primary));
}

.savp-month-day {
  font-size: 12px;
  color: var(--savp-muted);
  align-self: flex-start;
}

/* На телефоне клетки месяца узкие: метка помещается без отступов */
@media (max-width: 599px) {
  .savp-month-cell .v-chip.savp-day-chip {
    width: 100%;
    padding: 0 4px;
    font-size: 11px;
  }

  .savp-month-cell .savp-day-chip .v-icon {
    display: none;
  }
}

/* ---------- Карточка дистрибьютора: плитки сводки ---------- */

.savp-tile {
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius);
  padding: 12px 16px;
  height: 100%;
}

.savp-tile.clickable {
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

.savp-tile.clickable:hover {
  background: var(--savp-hover);
}

.savp-tile-value {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.savp-tile-value.small {
  font-size: 15px;
  line-height: 1.6;
}

.savp-tile-title {
  font-size: 13px;
  color: var(--savp-muted);
}

/* ---------- Карта торговых точек (components/outlet_map.js) ---------- */

/* Своя «стопка слоёв»: элементы карты не перекрывают меню и окна кабинета */
.savp-map {
  position: relative;
  z-index: 0;
  border-radius: var(--savp-radius);
  overflow: hidden;
}

.savp-map.leaflet-container {
  font-family: var(--savp-font);
  font-size: 13px;
  background: rgba(var(--v-theme-on-surface), 0.04);
}

/* Тёмная тема: подложка карты темнеет. Фильтр стоит на каждом квадрате карты, а не на всём слое:
   так браузер перекрашивает квадрат один раз, и карта не подтормаживает при сдвиге */
.savp-map-dark .leaflet-tile {
  filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.9) saturate(0.6);
}

/* Кнопки «+ / −», подпись в углу и окно подробностей — в цветах темы */
.savp-map-dark .leaflet-bar a,
.savp-map-dark .leaflet-popup-content-wrapper,
.savp-map-dark .leaflet-popup-tip,
.savp-map-dark .leaflet-tooltip {
  background: var(--savp-overlay);
  color: rgb(var(--v-theme-on-surface));
  border-color: var(--savp-border);
}

.savp-map-dark .leaflet-tooltip-left::before {
  border-left-color: var(--savp-overlay);
}

.savp-map-dark .leaflet-tooltip-right::before {
  border-right-color: var(--savp-overlay);
}

.savp-map-dark .leaflet-control-attribution {
  background: rgba(var(--v-theme-surface), 0.8);
  color: rgba(var(--v-theme-on-surface), 0.7);
}

/* Карта-редактор: точка или зона ставится нажатием — курсор «прицел» */
.savp-map-pick.leaflet-container {
  cursor: crosshair;
}

/* Маршрутные листы: начальная точка на карте — треугольник, карточка листа нажимается */
.savp-depot-icon {
  color: #111827;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  text-shadow: 0 0 3px #fff;
}

/* Адрес доставки на карте маршрутных листов: цвет листа, внутри — сколько реализаций на адрес */
.savp-place-icon {
  background: none;
  border: none;
}

.savp-place-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 999px; /* кружок; номер «3/12» (адрес в двух листах) — овал */
  padding: 0 3px;
  box-sizing: border-box;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 0 2px #000;
  cursor: pointer;
}

/* Точка на карте мониторинга (№101): номер по плану, красная рамка — опоздание */
.savp-stop-dot {
  min-width: 22px;
  height: 22px;
}

.savp-stop-dot.late {
  border: 3px solid #dc2626;
}

.savp-place-dot.chosen {
  box-shadow: 0 0 0 3px #111827;
}

/* Карточка адреса по нажатию на метку карты листов (№17) */
.savp-place-card {
  font-size: 13px;
  line-height: 1.35;
}

.savp-place-card-btn {
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: none;
  color: #2563eb;
  cursor: pointer;
}

/* Итоги листов под выбором листов на карте (№17) */
.savp-map-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  font-size: 13px;
}

.savp-route-card {
  cursor: pointer;
}

/* Переписка с водителем по листу (№23): свои сообщения (логист) справа, водителя — слева */
.savp-chat-list {
  max-height: 46vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.savp-chat-row {
  display: flex;
}
.savp-chat-mine {
  justify-content: flex-end;
}
.savp-chat-bubble {
  max-width: 75%;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--savp-subtle);
}
.savp-chat-mine .savp-chat-bubble {
  background: rgba(var(--v-theme-primary), 0.12);
}
.savp-chat-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* «Маршрутные листы»: список листов слева прокручивается сам, выбранный лист — рамкой,
   лист, на который сейчас тащат заказ, — подсветкой */
.savp-routes-list {
  max-height: 72vh;
  overflow-y: auto;
}

/* «Маршрутные листы»: длинный список заказов прокручивается внутри таблицы, шапка остаётся на месте,
   а листы слева — на экране, чтобы заказ можно было перетащить (замечание Папы №14, 06.11) */
.savp-scroll-table > .v-table__wrapper {
  max-height: 62vh;
  overflow-y: auto;
}

.savp-route-card.savp-route-active {
  border-color: rgb(var(--v-theme-primary));
  border-width: 2px;
}

.savp-route-card.savp-route-drop {
  background: rgba(var(--v-theme-primary), 0.12);
  border-style: dashed;
}

.savp-drag-row {
  cursor: grab;
}

/* Мониторинг: где машина — плашка с именем водителя цветом рейса */
.savp-vehicle-icon {
  background: none;
  border: none;
}

.savp-vehicle-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--savp-radius-sm);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
}

/* Зоны доставки: образец цвета в таблице и выбор цвета в окне */
.savp-zone-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.savp-zone-color {
  width: 24px;
  height: 24px;
  border-radius: var(--savp-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
}

.savp-zone-color.active {
  border-color: rgb(var(--v-theme-on-surface));
}

/* Карта: подсказка «нажмите — приблизится» и легенда цветов под картой */
.savp-map-hint {
  padding: 4px 10px;
  border-radius: var(--savp-radius-sm);
  font-size: 12px;
  background: var(--savp-overlay);
  color: rgb(var(--v-theme-on-surface));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Карта мониторинга с кнопкой «развернуть на весь экран» (№144): развёрнутая — поверх
   страницы с отступом от краёв, вместе с подписью цветов; Esc или та же кнопка — обратно */
.savp-map-box {
  position: relative;
  height: 440px;
}

.savp-map-box .savp-map {
  height: 100%;
}

.savp-map-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
}

.savp-map-big {
  position: fixed;
  inset: 12px;
  z-index: 1500;
  overflow: auto;
  padding: 12px;
  border-radius: var(--savp-radius);
  background: rgb(var(--v-theme-surface));
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.savp-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--savp-muted);
}

.savp-map-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}

/* ---------- Выбор дат (components/date.js, period.js) ---------- */

/* Поле периода, панель с вариантами и календарём */
.savp-period-field {
  flex: 0 0 var(--savp-col-2);
  max-width: var(--savp-col-2);
}

@media (max-width: 599px) {
  .savp-period-field {
    flex: 1 1 100%;
    max-width: none;
  }
}

.savp-period-field input {
  cursor: pointer;
}

.savp-period-menu {
  display: flex;
  flex-wrap: wrap;
}

.savp-period-presets {
  min-width: 190px;
  border-right: thin solid var(--savp-border);
}

.savp-period-presets .v-list {
  background: transparent;
}

.savp-period-calendar {
  max-width: 360px;
}

/* На телефоне варианты — над календарём */
@media (max-width: 599px) {
  .savp-period-presets {
    width: 100%;
    border-right: 0;
    border-bottom: thin solid var(--savp-border);
  }

  .savp-period-presets .v-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
}

.savp-date-icon {
  cursor: pointer;
}

.savp-date-menu .v-date-picker,
.savp-period-calendar .v-date-picker {
  background: transparent;
}

/* ---------- Поле времени (components/time.js): часы и минуты двумя столбцами ---------- */

.savp-time-menu {
  display: flex;
  gap: 4px;
  padding: 8px;
}

.savp-time-col {
  display: flex;
  flex-direction: column;
  width: 64px;
}

.savp-time-head {
  padding: 2px 0 6px;
  font-size: 0.75rem;
  color: var(--savp-muted);
  text-align: center;
}

.savp-time-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--v-theme-on-surface), 0.2) transparent;
}

.savp-time-cell {
  flex: none;
  height: 34px;
  border-radius: var(--savp-radius-xs);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--v-theme-on-surface));
  transition: background-color 0.15s;
}

.savp-time-cell:hover {
  background: var(--savp-hover);
}

.savp-time-cell--active,
.savp-time-cell--active:hover {
  background: rgb(var(--v-theme-primary));
  color: rgb(var(--v-theme-on-primary));
  font-weight: 600;
}

/* ---------- Поле числа (components/number.js): свои стрелки вместо стрелок браузера ---------- */

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.savp-number-arrows {
  display: flex;
  flex-direction: column;
  margin-left: 4px;
}

.savp-number-arrows button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 15px;
  border-radius: 4px;
  color: var(--savp-muted);
  transition: background-color 0.15s, color 0.15s;
}

.savp-number-arrows button:hover:not(:disabled) {
  background: var(--savp-hover);
  color: rgb(var(--v-theme-primary));
}

.savp-number-arrows button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Период в календаре: первый и последний день — синие, дни между ними — на лёгкой подложке
   (день «в середине» — тот, у кого выбраны и предыдущий, и следующий день) */
.savp-period-calendar .v-date-picker-month__day--selected + .v-date-picker-month__day--selected:has(+ .v-date-picker-month__day--selected) .v-btn {
  background: rgba(var(--v-theme-primary), 0.16) !important;
  color: rgb(var(--v-theme-on-surface)) !important;
}

/* ---------- Карточка записи в панели справа (components/record_card.js) ---------- */

.savp-record.v-navigation-drawer {
  background: var(--savp-overlay);
  border-left: thin solid var(--savp-border);
  box-shadow: var(--savp-shadow-overlay);
}

/* Кнопка «Наверх» (components/scroll_top.js): справа внизу поверх страницы, ниже окон и панелей */
.savp-scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
}

@media (max-width: 599px) {
  .savp-scroll-top {
    right: 12px;
    bottom: 12px;
  }
}

/* Шапка: что это (мелко), название (крупно), дистрибьютор или артикул; справа — крестик */
.savp-record-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 14px 12px 24px;
}

.savp-record-head > .v-btn:first-child {
  margin: 2px 4px 0 -12px;
}

.savp-record-kind {
  font-size: 0.75rem;
  color: var(--savp-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.savp-record-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.savp-record-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 16px;
}

.savp-record-body {
  padding: 20px 24px 32px;
}

/* Таблицы в карточке: строки нажимаются (переход в позицию или точку) */
.savp-record-table {
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius-sm);
  overflow: hidden;
  background: transparent;
}

.savp-record-table tr.clickable {
  cursor: pointer;
}

.savp-record-table tr.clickable:hover > td {
  background: var(--savp-hover);
}

.savp-record-photo {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: var(--savp-radius-sm);
  background: #fff;
}

/* Строка простой таблицы, которая открывает карточку (топы дашборда) */
tr.savp-row-link {
  cursor: pointer;
}

/* ---------- Помощь: подсказка раздела, панель «?», экскурс ---------- */

/* Подсказка при первом заходе в раздел: текст слева, кнопки справа (на телефоне — под текстом) */
.savp-hint-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.savp-hint-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
}

.savp-help {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.savp-help p + p {
  margin-top: 10px;
}

.savp-help-lead {
  margin-bottom: 10px;
  font-weight: 500;
}

.savp-help-steps {
  padding-left: 20px;
}

.savp-help-steps li + li {
  margin-top: 6px;
}

/* Экскурс: приветствие в окне, дальше — карточка внизу справа поверх раздела */
.savp-tour-welcome {
  padding: 28px 24px 8px;
}

/* «Больше не показывать» — под текстом, приглушённо: главное — «Начать экскурс» */
.v-btn.savp-tour-never {
  margin: 8px 0 0 -8px;
  color: var(--savp-muted);
}

.savp-tour-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: var(--savp-radius);
  color: rgb(var(--v-theme-primary));
  background: rgba(var(--v-theme-primary), 0.12);
}

.v-card.savp-tour {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1500;
  width: 380px;
  padding: 14px 16px 12px;
  border: thin solid rgba(var(--v-theme-primary), 0.5);
  background: var(--savp-overlay);
  box-shadow: var(--savp-shadow-overlay);
}

.savp-tour-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.savp-tour-step {
  font-size: 0.75rem;
  color: var(--savp-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.savp-tour-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 600;
}

.savp-tour-text {
  margin: 8px 0 14px;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Обучение по разделу (components/lesson.js): нужное место обведено, остальной экран затемнён.
   Рамка не мешает нажимать в кабинете (pointer-events: none), плавно переезжает между шагами */
.savp-lesson-frame {
  position: fixed;
  z-index: 1490;
  border: 2px solid rgb(var(--v-theme-primary));
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(3, 5, 10, 0.6), 0 0 18px rgba(var(--v-theme-primary), 0.55);
  pointer-events: none;
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
}

.savp-lesson-dim {
  position: fixed;
  inset: 0;
  z-index: 1490;
  background: rgba(3, 5, 10, 0.6);
  pointer-events: none;
}

.v-card.savp-tour.savp-lesson-card {
  z-index: 2600; /* над окнами кабинета: шаг может подсвечивать открытое окно */
}

.v-card.savp-tour.savp-lesson-card--left {
  right: auto;
  left: 24px;
}

/* На телефоне карточка экскурса — во всю ширину внизу */
@media (max-width: 600px) {
  .v-card.savp-tour {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }
}

/* ---------- Техподдержка: окно чата ---------- */

.savp-helpdesk-chat {
  max-height: 460px;
  min-height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius);
}

/* Предложенный вопрос — кнопкой во всю ширину, длинный текст переносится */
.savp-helpdesk-suggestion {
  height: auto !important;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  white-space: normal;
  justify-content: flex-start;
  text-align: left;
}

/* ---------- Обращения: переписка ---------- */

.savp-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Сообщение автора — слева, ответ получателя — с отступом слева и подсветкой */
.savp-message {
  max-width: 92%;
  padding: 10px 14px;
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius-sm);
  background: var(--savp-subtle);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.savp-message-reply {
  align-self: flex-end;
  border-color: rgba(var(--v-theme-primary), 0.35);
  background: rgba(var(--v-theme-primary), 0.08);
}

.savp-message-head {
  margin-bottom: 4px;
  font-size: 0.8125rem;
}

.savp-message-event {
  align-self: center;
  font-size: 0.8125rem;
  color: var(--savp-muted);
}

/* Файлы в сообщении: картинки — квадратиками (нажать — крупно), остальное — значками */
.savp-message-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.savp-message-image,
.savp-attach-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border: thin solid var(--savp-border);
  border-radius: var(--savp-radius-sm);
  color: var(--savp-muted);
  background: var(--savp-subtle);
}

.savp-message-image {
  cursor: zoom-in;
}

.savp-message-image img,
.savp-attach-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.savp-image-view {
  padding: 0 16px 16px;
  text-align: center;
}

.savp-image-view img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--savp-radius-sm);
}

/* Приложенные к новому сообщению файлы — под полем текста */
.savp-attach-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.savp-attach-remove {
  position: absolute;
  top: 4px;
  right: 4px;
}

.savp-attach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
}

/* ---------- Скачать ---------- */

/* Кнопки прижаты к низу карточки — в ряду карточек стоят на одном уровне */
.v-card.savp-download {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 24px 24px;
}

.savp-download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 20px;
}

.savp-download-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.savp-download-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--savp-radius);
  color: var(--savp-muted);
  background: var(--savp-subtle);
}

.savp-download-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Меню под именем пользователя: профиль и настройки */
.savp-user-menu.v-list {
  min-width: 220px;
  padding: 6px;
}

/* Дашборд: на экране цифры прежнего отбора, свежие ещё считаются — бледнее и не нажимаются */
.savp-dashboard-body {
  transition: opacity 0.15s ease-out;
}

.savp-dashboard-body.savp-stale {
  opacity: 0.5;
  pointer-events: none;
}

/* Окно подключения: уже подключённые организации, напротив каждой — «Отвязать» */
.savp-linked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

/* ---------- Каталог розничной точки (pages/retail_catalog.js) ---------- */

/* Количество «В заказ» в строке каталога — узкое поле у правого края */
.savp-qty {
  width: 110px;
  margin-left: auto;
}


/* Стандарт выкладки — карточка с картинкой (components/merch_standards.js) */
.savp-standard.clickable {
  cursor: pointer;
  height: 100%;
  transition: background-color 0.15s ease-out;
}

.savp-standard.clickable:hover {
  background: var(--savp-hover);
}

/* Визит мерчендайзера (components/merch_visit_card.js): фото плиткой, ответы строками */
.savp-visit-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

/* Голосовое совместного посещения: проигрыватель и текст записи */
.savp-voice-player {
  height: 36px;
  max-width: 100%;
}

.savp-visit-answer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
}

/* Фотолента (components/merch_photos.js) */
.savp-feed-card {
  cursor: pointer;
}

.savp-feed-card:hover {
  background: var(--savp-hover);
}

/* Уведомления (pages/notifications.js): непрочитанное — полоса слева цветом темы */
.savp-notification.unread {
  border-left: 3px solid rgb(var(--v-theme-primary));
}

.savp-notification-text {
  white-space: pre-line;
}
/* Окно подтверждения действия (store.js, ask): текст вопроса с переносами строк, как его написали */
.savp-question .savp-question-text {
  padding: 24px 24px 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  white-space: pre-line;
}

.savp-question .savp-question-input {
  padding: 0 24px 8px;
}

.savp-question .v-card-actions {
  padding: 8px 16px 16px;
  gap: 8px;
}

/* Переключатель темы — «таблетка» (components/theme_switch.js, №12 Папы 06.11): солнце слева,
   луна справа, синий круг под выбранной темой, фон полупрозрачный */
.savp-theme-switch {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(var(--v-theme-on-surface), 0.08);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.12);
  backdrop-filter: blur(6px);
  cursor: pointer;
  vertical-align: middle;
}

.savp-theme-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgb(var(--v-theme-primary));
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.45);
  transition: transform 0.2s ease;
}

.savp-theme-switch.is-dark .savp-theme-switch__knob {
  transform: translateX(26px);
}

.savp-theme-switch__slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: rgba(var(--v-theme-on-surface), 0.55);
  transition: color 0.2s ease;
}

.savp-theme-switch:not(.is-dark) .savp-theme-switch__slot:nth-child(2),
.savp-theme-switch.is-dark .savp-theme-switch__slot:nth-child(3) {
  color: #ffffff;
}

.savp-theme-switch:focus-visible {
  outline: 2px solid rgb(var(--v-theme-primary));
  outline-offset: 2px;
}

/* Строка группы свободных заказов «по точкам» / «по адресам» (№17) */
.savp-group-row {
  background: rgba(var(--v-theme-on-surface), 0.04);
}

.savp-group-title {
  cursor: pointer;
}

/* Галочки на всём сайте (Вова, 09.11): скруглённый квадрат, отмечено — заливка цветом кнопок сайта.
   Vuetify рисует галочку значком-шрифтом: убираем его и рисуем свой квадрат. Действует и в таблицах. */
.v-checkbox-btn .v-selection-control__input > .v-icon {
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(var(--v-theme-on-surface), 0.45);
  border-radius: 7px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

.v-checkbox-btn .v-selection-control__input > .v-icon::before {
  content: "";
}

.v-checkbox-btn .v-selection-control__input > .v-icon.mdi-checkbox-marked,
.v-checkbox-btn .v-selection-control__input > .v-icon.mdi-minus-box {
  background: rgb(var(--v-theme-primary));
  border-color: rgb(var(--v-theme-primary));
}

.v-checkbox-btn .v-selection-control__input > .v-icon.mdi-checkbox-marked::before,
.v-checkbox-btn .v-selection-control__input > .v-icon.mdi-minus-box::before {
  width: 16px;
  height: 16px;
  background: rgb(var(--v-theme-on-primary));
  -webkit-mask: var(--savp-check-mark) center / contain no-repeat;
  mask: var(--savp-check-mark) center / contain no-repeat;
}

.v-checkbox-btn .v-selection-control__input > .v-icon.mdi-checkbox-marked {
  --savp-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.v-checkbox-btn .v-selection-control__input > .v-icon.mdi-minus-box {
  --savp-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.v-checkbox-btn .v-label {
  margin-inline-start: 8px;
}

/* Распознавание фото полки (components/merch_shelf.js): рамки найденных позиций поверх фото */
.savp-shelf-photo {
  position: relative;
  line-height: 0;
}

.savp-shelf-photo img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.savp-shelf-photo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.savp-shelf-number,
.savp-shelf-chip {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  min-width: 16px;
  padding: 0 3px;
  text-align: center;
  border-radius: 3px;
}

.savp-shelf-number {
  position: absolute;
  pointer-events: none;
}

.savp-shelf-chip {
  display: inline-block;
}