.spaces-scope {
  /* Базовая палитра и токены интерфейса.
     Держим их локально в .spaces-scope, чтобы стили модуля помещений
     не протекали в остальные страницы приложения. */
  --cc-primary: #2563eb;
  --cc-primary-strong: #1d4ed8;
  --cc-primary-soft: #5b8def;
  --cc-text: #1f2a37;
  --cc-muted: #6b7280;
  --cc-border: #cfd8e3;
  --cc-surface: #ffffff;
  --cc-surface-soft: #f7f9fc;
  --cc-surface-soft-2: #f8fbff;
  --cc-head-bg: #f8f9fb;
  --cc-head-border: #e5e7eb;
  --cc-shadow: 0 6px 14px rgba(37, 99, 235, 0.2);
}

/* Общие карточки.
   Это базовый каркас для списка, карточки и страницы редактирования. */
.spaces-scope .mdc-card {
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px !important;
  background: var(--cc-surface) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

/* Шапки карточек.
   Адаптируем визуальный язык cart под модуль помещений. */
.spaces-scope .space-main-card__head,
.spaces-scope .space-side-card__head,
.spaces-scope .space-tabs-card__head {
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
}

.spaces-scope .space-main-card__head {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
}

.spaces-scope .space-side-card__head {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%) !important;
}

.spaces-scope .space-tabs-card__head {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
}

/* Усиленное переопределение для карточки помещения.
   Нужна повышенная специфичность, чтобы новый theme-layer уверенно
   перебивал старую разметку без точечных inline-фиксов. */
.spaces-scope.space-card-page .space-main-card__head,
.spaces-scope.space-card-page .space-side-card__head,
.spaces-scope.space-card-page .space-tabs-card__head {
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
}

.spaces-scope.space-card-page .space-main-card__head {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
}

.spaces-scope.space-card-page .space-side-card__head {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%) !important;
}

.spaces-scope.space-card-page .space-tabs-card__head {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
}

.spaces-scope.space-card-page .space-main-card .card-body,
.spaces-scope.space-card-page .space-side-card .card-body,
.spaces-scope.space-card-page .space-tabs-card .card-body {
  background: var(--cc-surface-soft-2) !important;
}

.spaces-scope.space-card-page .space-main-card__head {
  position: relative;
  overflow: hidden;
}

.spaces-scope.space-card-page .space-main-card__head::before {
  /* Легкая подсветка в шапке карточки помещения:
     синхронизирует визуальный характер с карточкой арендатора. */
  content: '';
  position: absolute;
  inset: auto -24% -80% 36%;
  height: 210px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.spaces-scope.space-card-page .space-main-card__head h5 {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.spaces-scope.space-card-page .space-side-card__head .material-icons,
.spaces-scope.space-card-page .space-main-card__head .material-icons {
  color: rgba(255, 255, 255, 0.92) !important;
}

.spaces-scope.space-card-page .space-main-card__head .btn,
.spaces-scope.space-card-page .space-side-card__toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.spaces-scope.space-card-page .space-main-card__head .space-back-btn {
  width: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 10px !important;
  border-color: #d4deec !important;
  background: #fff !important;
  color: #1f2a37 !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.09);
}

.spaces-scope.space-card-page .space-main-card__head .space-back-btn .material-icons {
  font-size: 21px;
  transform: translateX(-1px);
  color: #1f2a37 !important;
}

.spaces-scope.space-card-page .space-main-card__head .space-back-btn:hover,
.spaces-scope.space-card-page .space-main-card__head .space-back-btn:focus-visible {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.spaces-scope .space-main-card__head .btn,
.spaces-scope .space-side-card__head .btn,
.spaces-scope .space-tabs-card__head .btn {
  color: #fff !important;
}

.spaces-scope.space-card-page .space-side-card__head {
  gap: 10px;
}

.spaces-scope.space-card-page .space-side-card__head-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.spaces-scope.space-card-page .space-side-card__toggle {
  display: none !important;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.spaces-scope.space-card-page .space-side-card__toggle .material-icons {
  font-size: 22px;
  transition: transform 0.18s ease;
}

.spaces-scope.space-card-page .space-side-card.is-expanded .space-side-card__toggle .material-icons {
  transform: rotate(180deg);
}

/* Вкладки в шапке карточки.
   Отдельно фиксируем читаемость активных и неактивных состояний. */
.spaces-scope .space-tabs-card__head .tab-buttons-row .btn {
  color: var(--cc-text) !important;
  background: #fff !important;
  border-color: var(--cc-border) !important;
}

.spaces-scope .space-tabs-card__head .tab-buttons-row .btn:hover {
  color: var(--cc-text) !important;
  border-color: var(--cc-primary-soft) !important;
}

.spaces-scope .space-tabs-card__head .tab-buttons-row .btn.active {
  color: #fff !important;
  background: var(--cc-primary) !important;
  border-color: var(--cc-primary) !important;
}

/* Главная CTA-кнопка карточки помещения. */
.spaces-scope.space-card-page .space-main-card__head .btn-warning {
  color: #fff !important;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: #16a34a !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.26) !important;
}

.spaces-scope.space-card-page .space-main-card__head .btn-warning .material-icons {
  font-size: 18px;
}

/* Поля формы и селекты.
   Любые изменения здесь нужно проверять и на обычных input/select,
   и на select2-обертках edit-page. */
.spaces-scope .form-control,
.spaces-scope select.form-control {
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text) !important;
  background: #fff !important;
}

.spaces-scope .form-control:focus,
.spaces-scope select.form-control:focus {
  border-color: var(--cc-primary-soft) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}

/* Кнопки и destructive-состояния.
   Здесь собран единый паттерн основных и опасных действий. */
.spaces-scope .btn-primary {
  color: #fff !important;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28) !important;
}

.spaces-scope .btn-warning {
  color: #fff !important;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #d97706 !important;
  box-shadow: 0 8px 18px rgba(217, 119, 6, 0.24) !important;
}

.spaces-scope .btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  color: #fff !important;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.22) !important;
}

.spaces-scope .btn-danger:hover,
.spaces-scope .btn-danger:focus {
  color: #fff !important;
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
  border-color: #b91c1c !important;
  box-shadow: 0 10px 20px rgba(185, 28, 28, 0.24) !important;
}

.spaces-scope .btn-outline-danger {
  color: #b91c1c !important;
  background: #fff5f5 !important;
  border-color: #fca5a5 !important;
  box-shadow: none !important;
}

.spaces-scope .btn-outline-danger:hover,
.spaces-scope .btn-outline-danger:focus {
  color: #fff !important;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #dc2626 !important;
  box-shadow: 0 8px 18px rgba(220, 38, 38, 0.18) !important;
}

.spaces-scope .btn-secondary {
  color: var(--cc-text) !important;
  background: #fff !important;
  border-color: var(--cc-border) !important;
}

.spaces-scope .btn-secondary:hover,
.spaces-scope .btn-secondary:focus {
  color: var(--cc-text) !important;
  background: #f8fbff !important;
  border-color: var(--cc-primary-soft) !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.12) !important;
}

.spaces-scope .btn-danger.btn-sm,
.spaces-scope .btn-outline-danger.btn-sm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px;
  border-radius: 10px !important;
  font-weight: 700;
  padding: 0.36rem 0.72rem !important;
}

/* Группы переключателей для вкладок и фильтров. */
.spaces-scope .spaces-filter-buttons,
.spaces-scope .tab-buttons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: var(--cc-surface-soft);
}

.spaces-scope .spaces-filter-buttons .btn,
.spaces-scope .tab-buttons-row .btn {
  border: 1px solid var(--cc-border);
  background: #fff;
  color: var(--cc-text);
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.spaces-scope .spaces-filter-buttons .btn:hover,
.spaces-scope .tab-buttons-row .btn:hover {
  border-color: var(--cc-primary-soft);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.14);
}

.spaces-scope .spaces-filter-buttons .btn.is-active,
.spaces-scope .tab-buttons-row .btn.active {
  background: var(--cc-primary);
  color: #fff;
  border-color: var(--cc-primary);
  box-shadow: var(--cc-shadow);
}

/* Общий табличный язык.
   Этот блок задает единые правила таблиц для списка помещений и вкладок карточки:
   плотность, бордеры, hover-состояния и читаемость чисел. */
.spaces-scope .space-data-table,
.spaces-scope .spaces-table {
  background: #fff;
  border-collapse: collapse;
}

.spaces-scope .space-data-table thead th,
.spaces-scope .spaces-table thead th {
  background: #f8f9fb;
  color: var(--cc-text);
  border-bottom: 1px solid #e5e7eb;
}

.spaces-scope .space-data-table tbody td,
.spaces-scope .space-data-table tfoot td,
.spaces-scope .spaces-table tbody td,
.spaces-scope .spaces-table tfoot td {
  border-top: 1px solid #eef2f7;
}

.spaces-scope .space-data-table tbody tr:nth-child(even) > td,
.spaces-scope .spaces-table tbody tr:nth-child(even) > td {
  background: #fcfdff;
}

.spaces-scope .space-data-table tbody tr:hover > td,
.spaces-scope .spaces-table tbody tr:hover > td {
  background: #f5f9ff;
}


/* Список помещений.
   Ниже идет отдельный слой именно для `/spaces`: фильтры, статусы, таблица,
   управление скрытием колонок, lazy loading и кнопка "вгору". */
.spaces-scope.spaces-page .spaces-filters-card {
  border-radius: 14px !important;
  background: var(--cc-surface-soft) !important;
  border: 1px solid var(--cc-border) !important;
  padding: 1.1rem !important;
}

.spaces-scope.spaces-page .spaces-toolbar-classic {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 0.9rem !important;
  align-items: start !important;
}

.spaces-scope.spaces-page .spaces-control {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.spaces-scope.spaces-page .spaces-control .form-label {
  margin-bottom: 0.45rem !important;
  color: var(--cc-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
}

.spaces-scope.spaces-page .spaces-control .form-control {
  width: 100% !important;
  min-height: 48px !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px !important;
  padding: 0.7rem 0.9rem !important;
  background: #fff !important;
}

.spaces-scope.spaces-page .spaces-control input.form-control,
.spaces-scope.spaces-page .spaces-control input[type='search'].form-control {
  box-sizing: border-box !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  height: 48px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-clip: padding-box !important;
}

.spaces-scope.spaces-page .spaces-control input[type='search'].form-control::-webkit-search-decoration,
.spaces-scope.spaces-page .spaces-control input[type='search'].form-control::-webkit-search-cancel-button,
.spaces-scope.spaces-page .spaces-control input[type='search'].form-control::-webkit-search-results-button,
.spaces-scope.spaces-page .spaces-control input[type='search'].form-control::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

.spaces-scope.spaces-page .spaces-control input.form-control::placeholder,
.spaces-scope.spaces-page .spaces-control input[type='search'].form-control::placeholder {
  color: var(--cc-muted) !important;
  opacity: 1 !important;
}

.spaces-scope.spaces-page .spaces-control input.form-control:focus,
.spaces-scope.spaces-page .spaces-control input[type='search'].form-control:focus {
  border-color: var(--cc-primary-soft) !important;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.14) !important;
  outline: none !important;
}

.spaces-scope.spaces-page .spaces-filter-buttons {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
  gap: 0.6rem !important;
  margin-top: 0.9rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.spaces-scope.spaces-page .spaces-filter-buttons .btn {
  min-height: 44px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
}

.spaces-scope.spaces-page .spaces-footer-bar {
  gap: 0.75rem !important;
  color: var(--cc-text) !important;
  font-size: 1rem !important;
}

.spaces-scope.spaces-page .spaces-mobile-filters-toggle,
.spaces-scope.spaces-page .spaces-mobile-filters-hide {
  display: none !important;
}

.spaces-scope.spaces-page .spaces-mobile-filters-panel {
  display: block !important;
}

.spaces-scope.spaces-page .sc-hidden-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

.spaces-scope.spaces-page .sc-hidden-col-select {
  max-width: 260px;
  border-radius: 999px !important;
}

.spaces-scope.spaces-page .sc-hidden-col-btn {
  border: 1px solid var(--cc-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--cc-text) !important;
  padding: 0.45rem 0.85rem !important;
  font-weight: 600 !important;
}

.spaces-scope.spaces-page .spaces-table-wrap {
  /* Обертка таблицы удерживает список в ширине экрана на desktop
     и дает предсказуемый горизонтальный скролл на mobile. */
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid var(--cc-head-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.spaces-scope.spaces-page .spaces-table {
  /* Для desktop стараемся занимать всю доступную ширину, но не ломать верстку
     при скрытии/возврате колонок и при динамической подгрузке строк. */
  width: 100% !important;
  min-width: 1120px !important;
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.spaces-scope.spaces-page .spaces-table thead th {
  text-align: center !important;
  vertical-align: middle !important;
  background: var(--cc-head-bg) !important;
  color: var(--cc-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cc-head-border) !important;
  padding: 0.8rem 0.65rem !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.spaces-scope.spaces-page .spaces-table tbody td,
.spaces-scope.spaces-page .spaces-table tfoot td {
  border: 0 !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 0.75rem 0.65rem !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.spaces-scope.spaces-page .spaces-table a {
  /* Локальный акцент ссылок в основном блоке spaces-таблицы.
     Цвет выровнен с /rentCollection-fixed, чтобы переходы между реестрами
     не выглядели как разные UI-модули. */
  color: #1f4b8f !important;
  font-weight: 700;
  text-decoration: none !important;
}

.spaces-scope.spaces-page .spaces-table a:hover {
  text-decoration: underline !important;
}

.spaces-scope.spaces-page .spaces-table tbody tr:nth-child(even) > td {
  background: #fcfdff !important;
}

.spaces-scope.spaces-page .spaces-table tbody tr:hover > td {
  background: #f5f9ff !important;
}

.spaces-scope.spaces-page .sc-totals-row td {
  background: var(--cc-surface-soft-2) !important;
  font-size: 1.04rem !important;
  font-weight: 800 !important;
}

.spaces-scope.spaces-page .sc-total-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
}

.spaces-scope.spaces-page .sc-total-subtitle {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cc-text);
}

.spaces-scope.spaces-page .sort-arrows {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.55rem !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  vertical-align: middle !important;
  position: relative !important;
}

.spaces-scope.spaces-page .sort-arrows::before {
  font-size: 0.88rem;
  line-height: 1;
  color: var(--cc-muted);
}

.spaces-scope.spaces-page .sort-arrows.none::before {
  content: '⇅';
}

.spaces-scope.spaces-page .sort-arrows.asc::before {
  content: '↑';
  color: var(--cc-primary-strong);
}

.spaces-scope.spaces-page .sort-arrows.desc::before {
  content: '↓';
  color: var(--cc-primary-strong);
}

.spaces-scope.spaces-page .sc-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 34px;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
}

.spaces-scope.spaces-page .sc-status-pill.is-rented {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.26);
}

.spaces-scope.spaces-page .sc-status-pill.is-empty {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.spaces-scope.spaces-page .sc-backtop-fab {
  /* Плавающая кнопка возврата наверх.
     В покое полностью скрыта и появляется только после прокрутки.
     В видимом состоянии остается пассивной, а акцент получает только при наведении. */
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--cc-primary-strong);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--cc-primary), var(--cc-primary-strong));
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
  filter: saturate(0.82);
}

.spaces-scope.spaces-page .sc-backtop-fab.is-visible {
  /* Даже в видимом состоянии держим кнопку чуть "тише" (полупрозрачной),
     чтобы она не спорила с таблицей.
     Полный акцент пользователь получает осознанно при hover/focus. */
  opacity: 0.56;
  transform: translateY(0);
  pointer-events: auto;
}

.spaces-scope.spaces-page .sc-backtop-fab__icon {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
}

.spaces-scope.spaces-page .sc-backtop-fab:hover,
.spaces-scope.spaces-page .sc-backtop-fab:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34);
  filter: saturate(1);
}

.spaces-scope.spaces-page .sc-sentinel {
  width: 100%;
  height: 1px;
}

@media (max-width: 992px) {
  .spaces-scope.spaces-page .spaces-filter-buttons {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }

  .spaces-scope.spaces-page .spaces-footer-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 768px) {
  .spaces-scope.spaces-page .spaces-mobile-filters-toggle {
    display: inline-flex !important;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.85rem;
    font-weight: 700;
  }

  .spaces-scope.spaces-page .spaces-mobile-filters-hide {
    display: inline-flex !important;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    margin-top: 0.85rem;
    border: 1px solid var(--cc-border);
    border-radius: 12px;
    background: #fff;
    color: var(--cc-text);
    font-weight: 600;
  }

  .spaces-scope.spaces-page .spaces-mobile-filters-panel {
    display: none !important;
  }

  .spaces-scope.spaces-page.filters-open .spaces-mobile-filters-panel,
  .spaces-scope.spaces-page .spaces-mobile-filters-panel.is-open {
    display: block !important;
  }

  .spaces-scope.spaces-page .spaces-toolbar-classic {
    grid-template-columns: 1fr !important;
  }

  .spaces-scope.spaces-page .spaces-filter-buttons {
    grid-template-columns: 1fr !important;
  }

  .spaces-scope.spaces-page .sc-hidden-buttons {
    flex-direction: column;
    align-items: stretch !important;
  }

  .spaces-scope.spaces-page .sc-hidden-col-select,
  .spaces-scope.spaces-page .sc-hidden-col-btn {
    width: 100%;
    max-width: 100%;
  }

  .spaces-scope.spaces-page .spaces-table-wrap {
    overflow-x: auto !important;
  }
}
.spaces-scope.space-card-page .space-kpi {
  /* Старые KPI-плитки карточки.
     Часть контекста перенесена в insight-блоки, но визуальная система карточки
     по-прежнему опирается на эти компактные метрики. */
  border-color: #dbe4ef !important;
  background: #fff !important;
}

.spaces-scope.space-card-page .space-kpi__label {
  color: var(--cc-muted) !important;
}

.spaces-scope.space-card-page .space-kpi__value {
  color: var(--cc-text) !important;
}

.spaces-scope.space-card-page .space-info-row {
  border-color: #e5e7eb !important;
  background: #fff !important;
  padding: 0.4rem 0.55rem !important;
  margin-bottom: 0.4rem !important;
}

.spaces-scope.space-card-page .space-info-row .material-icons {
  color: #475569 !important;
}

.spaces-scope.space-card-page .space-info-row p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  /* На mobile длинные примітки/почта/ФИО не должны выталкивать строку за карточку.
     Разрешаем мягкий перенос в любом месте, сохраняя общий flex-ритм строки. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.spaces-scope.space-card-page .space-info-row p strong {
  flex: 0 0 170px;
  color: #475569;
  margin: 0;
}

.spaces-scope.space-card-page .space-section-title {
  /* Смысловые заголовки секций карточки помещения.
     Они помогают разделить "паспорт" помещения и финансовую часть. */
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0.65rem 0 0.45rem;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spaces-scope.space-card-page .space-section-title--base {
  color: #1d4ed8;
}

.spaces-scope.space-card-page .space-section-title--finance {
  color: #0f766e;
}

.spaces-scope.space-card-page .space-section-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #dbe4ef;
}

.spaces-scope.space-card-page .space-readonly-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #dbe4ef;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
}

.spaces-scope.space-card-page .space-readonly-value.is-debt {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.spaces-scope.space-card-page .space-readonly-value.is-neutral {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.spaces-scope.space-card-page .sc-copy-chip {
  border: 1px solid #dbe4ef;
  background: #fff;
  color: #1d4ed8;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 2px 8px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.spaces-scope.space-card-page .sc-copy-chip:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.spaces-scope.space-card-page .sc-copy-chip.is-copied {
  color: #065f46;
  border-color: #a7f3d0;
  background: #d1fae5;
}

.spaces-scope.space-card-page a {
  color: var(--cc-primary-strong);
}

.spaces-scope.space-card-page a:hover {
  color: var(--cc-primary);
}

.spaces-scope.space-card-page .sc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  padding: 2px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.spaces-scope.space-card-page .sc-badge--success {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.spaces-scope.space-card-page .sc-badge--warning {
  background: #fef3c7;
  color: #92400e;
  border-color: #fde68a;
}

.spaces-scope.space-card-page .sc-badge--danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.spaces-scope.space-card-page .sc-badge--neutral {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.spaces-scope.space-card-page .sc-tab-total-row td {
  background: #f8fbff !important;
  font-weight: 800 !important;
}

.spaces-scope.space-card-page .sc-tab-total-row td * {
  /* Подчеркиваем, что вся итоговая строка "Разом" должна быть визуально жирной,
     включая вложенные span/strong после клиентских пересчетов totals. */
  font-weight: 800 !important;
}

.spaces-scope.space-card-page .space-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spaces-scope.space-card-page .space-card-insights {
  /* Две верхние insight-карточки всегда идут равными колонками, чтобы визуально читались как единая пара.
     Раньше здесь было 3 колонки под "Активна вкладка", но этот блок убран:
     фиксируем 2x1 как целевой UX-контракт для desktop/tablet. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.spaces-scope.space-card-page .space-card-insight {
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 14px 15px;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.06);
}

.spaces-scope.space-card-page .space-card-insight__label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.spaces-scope.space-card-page .space-card-insight__value {
  margin-top: 6px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.spaces-scope.space-card-page .space-card-insight__hint {
  margin-top: 6px;
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.45;
}

.spaces-scope.space-card-page .space-status-chip {
  /* Статусные чипы под insight-блоком.
     Они должны читаться как краткое резюме текущего сценария помещения. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid #dbe4ef;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  background: #f8fafc;
  color: #334155;
}

.spaces-scope.space-card-page .space-status-chip.is-positive {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.spaces-scope.space-card-page .space-status-chip.is-negative {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.spaces-scope.space-card-page .space-status-chip.is-accent {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
}

.spaces-scope.space-card-page .space-status-chip.is-neutral {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.spaces-scope.space-card-page .space-density-switch {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}

.spaces-scope.space-card-page .space-density-btn {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.92);
  color: #1f2a37;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 10px;
  line-height: 1.1;
  cursor: pointer;
}

.spaces-scope.space-card-page .space-density-btn.is-active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.spaces-scope.space-card-page .space-tabs-toolbar {
  /* Toolbar вкладок карточки объединяет навигацию, meta-подсказку и поиск в разделе. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.spaces-scope.space-card-page .space-tabs-toolbar__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.spaces-scope.space-card-page .tab-select-mobile-wrap {
  position: relative;
  display: none;
  width: 100%;
}

.spaces-scope.space-card-page .tab-select-mobile-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #1d4ed8;
  pointer-events: none;
}

.spaces-scope.space-card-page .tab-select-mobile-icon .material-icons {
  font-size: 22px;
}

.spaces-scope.space-card-page .space-tabs-toolbar__side {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: flex-end;
}

.spaces-scope.space-card-page .space-card-tab-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.spaces-scope.space-card-page .space-card-tab-meta {
  /* Meta-блок активной вкладки.
     Его высота и ритм синхронизированы с полем поиска, чтобы строка выглядела цельно. */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  align-self: stretch;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.spaces-scope.space-card-page .space-card-tab-meta__title {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}

.spaces-scope.space-card-page .space-card-tab-meta__hint {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.76rem;
  line-height: 1.35;
}

.spaces-scope.space-card-page .space-card-tab-search-host {
  flex: 0 0 clamp(250px, 28vw, 360px);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.spaces-scope.space-card-page .space-card-tab-search {
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: stretch;
}

.spaces-scope.space-card-page .space-card-tab-search .form-control {
  min-height: 42px;
  height: 100%;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
  font-size: 0.94rem;
  padding: 0 14px !important;
}

.spaces-scope.space-card-page .space-table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: auto;
  max-height: 56vh;
}

.spaces-scope.space-card-page .space-table-wrap .space-data-table {
  margin-bottom: 0;
}

.spaces-scope.space-card-page .space-table-wrap .space-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.spaces-scope.space-card-page .space-table-wrap .sc-tab-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.spaces-scope.space-card-page .space-empty-state {
  /* Пустые состояния во вкладках карточки.
     Вместо "голого" текста оставляем аккуратный контейнер с пояснением. */
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 18px 20px;
}

.spaces-scope.space-card-page .space-empty-state__title {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
}

.spaces-scope.space-card-page .space-empty-state__hint {
  margin-top: 6px;
  color: #475569;
  font-size: 0.86rem;
  line-height: 1.5;
}

.spaces-scope.space-card-page .space-card-backtop {
  position: fixed;
  left: 14px;
  bottom: 18px;
  z-index: 45;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #1d4ed8;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
  opacity: 0.68;
  transition: opacity 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}

.spaces-scope.space-card-page .space-card-backtop:hover,
.spaces-scope.space-card-page .space-card-backtop:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34);
  color: #fff;
}

.spaces-scope.space-card-page .space-card-backtop > span {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Noto Sans Symbols", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-2px);
}

/* Общий фон рабочего пространства модуля помещений.
   Он унифицирует список, карточку и редактирование в одном визуальном языке. */
.spaces-scope.space-card-page,
.spaces-scope.spaces-page,
.spaces-scope.edit-space-page {
  background: transparent !important;
}

/* Компактные индикаторы состояний, используемые в нескольких страницах модуля. */
.spaces-scope .sc-status-pill,
.spaces-scope .space-kpi__value.is-positive,
.spaces-scope .space-kpi__value.is-negative {
  font-weight: 700;
}

/* Общее поведение мобильной панели фильтров.
   На desktop фильтры остаются раскрытыми, а на mobile переходят в скрываемую панель. */
@media (max-width: 768px) {
  .spaces-scope .spaces-mobile-filters-toggle {
    border: 1px solid var(--cc-border);
    background: #fff;
    color: var(--cc-text);
    border-radius: 10px;
  }

  .spaces-scope .spaces-mobile-filters-panel {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fbfdff;
    padding: 10px;
  }

  /* Мобильный UX карточки помещения: компактнее шапки и лучшее касание. */
  .spaces-scope.space-card-page {
    padding: 0.5rem !important;
  }

  .spaces-scope.space-card-page .card-header {
    padding: 0.58rem 0.62rem !important;
  }

  .spaces-scope.space-card-page .card-body {
    padding: 0.62rem !important;
  }

  .spaces-scope.space-card-page .space-main-card__head {
    /* Шапка помещения повторяет mobile-композицию карточки арендатора:
       слева назад, по центру заголовок, справа действие редактирования. */
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    grid-template-areas: 'back title edit';
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 0.62rem 0.68rem !important;
  }

  .spaces-scope.space-card-page .space-main-card__head h5,
  .spaces-scope.space-card-page .space-side-card__head h5,
  .spaces-scope.space-card-page .space-tabs-card__head h5 {
    font-size: 0.94rem !important;
    line-height: 1.15 !important;
  }

  .spaces-scope.space-card-page .space-main-card__head h5 {
    grid-area: title;
    width: auto;
    margin: 0;
    text-align: left;
    font-size: 0.97rem !important;
    line-height: 1.18 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spaces-scope.space-card-page .space-main-card__head .space-back-btn {
    grid-area: back;
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;
    border-radius: 12px !important;
    border-color: #d5e2f3 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
  }

  .spaces-scope.space-card-page .space-main-card__head .space-back-btn .material-icons {
    font-size: 22px;
    transform: translateX(-1px);
  }

  .spaces-scope.space-card-page .space-main-card__head .btn-warning {
    grid-area: edit;
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;
    border-radius: 12px !important;
    justify-self: end;
  }

  .spaces-scope.space-card-page .space-main-card__head .btn-warning span {
    display: none;
  }

  .spaces-scope.space-card-page .space-main-card__head .btn-warning .material-icons {
    font-size: 18px;
    margin: 0;
  }

  .spaces-scope.space-card-page .space-main-card__head .btn {
    font-size: 0.79rem !important;
    min-height: 38px;
    line-height: 1 !important;
  }

  /* KPI-блок в две колонки для меньшей высоты первого экрана. */
  .spaces-scope.space-card-page .space-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .spaces-scope.space-card-page .space-card-insights {
    grid-template-columns: 1fr;
    gap: 0.42rem;
    margin-bottom: 0.55rem !important;
  }

  .spaces-scope.space-card-page .space-card-insight {
    padding: 0.58rem 0.68rem;
    border-radius: 13px;
  }

  .spaces-scope.space-card-page .space-card-insight__label {
    font-size: 0.7rem;
  }

  .spaces-scope.space-card-page .space-card-insight__value {
    font-size: 0.94rem;
  }

  .spaces-scope.space-card-page .space-card-insight__hint {
    font-size: 0.78rem;
  }

  .spaces-scope.space-card-page .space-status-strip {
    gap: 6px;
    margin-bottom: 0.6rem !important;
  }

  .spaces-scope.space-card-page .space-status-chip {
    min-height: 28px;
    padding: 2px 9px;
    font-size: 0.75rem;
  }

  .spaces-scope.space-card-page .space-kpi {
    padding: 0.42rem 0.52rem;
  }

  .spaces-scope.space-card-page .space-kpi__label {
    font-size: 0.72rem;
  }

  .spaces-scope.space-card-page .space-kpi__value {
    font-size: 0.92rem;
  }

  .spaces-scope.space-card-page .space-info-row {
    padding: 0.38rem 0.46rem !important;
    border-radius: 10px;
  }

  .spaces-scope.space-card-page .space-info-row p strong {
    flex: 0 0 100%;
    font-size: 0.78rem;
  }

  .spaces-scope.space-card-page .space-info-row p {
    gap: 4px;
    font-size: 0.9rem;
  }

  .spaces-scope.space-card-page .space-readonly-value {
    min-height: 30px;
    padding: 3px 10px;
    font-size: 0.86rem;
  }

  .spaces-scope.space-card-page .space-section-title {
    margin: 0.5rem 0 0.35rem;
    font-size: 0.78rem;
  }

  .spaces-scope.space-card-page .sc-copy-chip {
    padding: 3px 9px;
    font-size: 0.7rem;
  }

  /* Вкладки: акцент на select, кнопки на мобильном скрываем. */
  .spaces-scope.space-card-page .tab-mobile-hint {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 0.72rem !important;
    margin-bottom: 4px;
  }

  .spaces-scope.space-card-page .space-tabs-card__head {
    position: sticky;
    top: 8px;
    z-index: 12;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.25);
  }

  .spaces-scope.space-card-page .space-tabs-toolbar {
    flex-direction: column;
    gap: 8px;
  }

  .spaces-scope.space-card-page .space-tabs-toolbar__side {
    width: 100%;
  }

  .spaces-scope.space-card-page .tab-select-mobile-wrap {
    display: block !important;
  }

  .spaces-scope.space-card-page .tab-select-mobile {
    display: block !important;
    width: 100%;
    margin-top: 2px;
    min-height: 46px;
    padding: 0 52px 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
    color: #1f2a37 !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .spaces-scope.space-card-page .tab-buttons-row {
    display: none !important;
  }

  .spaces-scope.space-card-page .space-card-tab-search {
    margin: 8px 0 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .spaces-scope.space-card-page .space-card-tab-tools {
    flex-direction: column;
    gap: 10px;
  }

  .spaces-scope.space-card-page .space-card-tab-meta,
  .spaces-scope.space-card-page .space-card-tab-search-host {
    width: 100%;
    flex: 1 1 auto;
    max-width: none;
  }

  .spaces-scope.space-card-page .space-card-tab-meta {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .spaces-scope.space-card-page .space-card-tab-search .form-control {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    padding: 0 14px !important;
  }

  .spaces-scope.space-card-page .space-density-switch {
    width: 100%;
    margin-top: 8px;
    margin-left: 0;
    justify-content: stretch;
  }

  .spaces-scope.space-card-page .space-density-btn {
    flex: 1 1 50%;
    font-size: 0.76rem;
    padding: 6px 8px;
  }

  .spaces-scope.space-card-page .space-side-card__toggle {
    display: inline-flex !important;
  }

  .spaces-scope.space-card-page [data-collapsible-card]:not(.is-expanded) .space-side-card__body {
    display: none;
  }

  .spaces-scope.space-card-page .tab-content {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Таблицы: горизонтальный touch-scroll для контента вкладок на mobile.
     Делаем скролл максимально явным и устойчивым в мобильных браузерах. */
  .spaces-scope.space-card-page .space-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow-x: scroll;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .spaces-scope.space-card-page .space-table-wrap .space-data-table {
    min-width: 760px;
    width: max(760px, 100%);
  }

  .spaces-scope.space-card-page .space-table-wrap .space-data-table thead th,
  .spaces-scope.space-card-page .space-table-wrap .space-data-table tbody td,
  .spaces-scope.space-card-page .space-table-wrap .space-data-table tfoot td {
    padding: 6px 7px !important;
    font-size: 0.86rem !important;
    white-space: nowrap;
  }

  .spaces-scope.space-card-page .space-empty-state {
    padding: 14px 15px;
  }

  .spaces-scope.space-card-page .space-card-backtop {
    width: 40px;
    height: 40px;
    left: 10px;
    bottom: 14px;
  }

  .spaces-scope.space-card-page .space-card-backtop > span {
    font-size: 20px;
  }
}

.spaces-scope.space-card-page.is-density-compact .space-table-wrap .space-data-table thead th,
.spaces-scope.space-card-page.is-density-compact .space-table-wrap .space-data-table tbody td,
.spaces-scope.space-card-page.is-density-compact .space-table-wrap .space-data-table tfoot td {
  padding: 4px 6px !important;
  font-size: 0.82rem !important;
}

/* Компактный UX для editSpace: читаемые секции, единая палитра и мобильная адаптация. */
.spaces-scope.edit-space-page {
  min-height: 100vh;
}

.spaces-scope.edit-space-page .edit-space-card__head {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
}

.spaces-scope.edit-space-page .edit-space-subtitle {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
}

.spaces-scope.edit-space-page .edit-space-card__head h5 {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
}

.spaces-scope.edit-space-page .edit-space-card {
  overflow: hidden;
}

.spaces-scope.edit-space-page .edit-space-card__head {
  position: relative;
  overflow: hidden;
}

.spaces-scope.edit-space-page .edit-space-card__head::after {
  content: '';
  position: absolute;
  inset: auto -20% -40% 40%;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.spaces-scope.edit-space-page .edit-space-card__body {
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.94) 0%, rgba(255, 255, 255, 0.98) 18%, rgba(255, 255, 255, 1) 100%),
    #fff !important;
}

.spaces-scope.edit-space-page .edit-space-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spaces-scope.edit-space-page .edit-space-insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.spaces-scope.edit-space-page .edit-space-insight-card {
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding: 14px 15px;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.06);
}

.spaces-scope.edit-space-page .edit-space-insight-card__label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.spaces-scope.edit-space-page .edit-space-insight-card__value {
  margin-top: 6px;
  color: #0f172a;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.spaces-scope.edit-space-page .edit-space-insight-card__hint {
  margin-top: 6px;
  color: #475569;
  font-size: 0.83rem;
  line-height: 1.45;
}

.spaces-scope.edit-space-page .edit-space-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  padding: 3px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}

.spaces-scope.edit-space-page .select2-container {
  width: 100% !important;
}

.spaces-scope.edit-space-page .select2-container--default .select2-selection--single {
  min-height: 44px;
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  display: flex;
  align-items: center;
  padding: 0 42px 0 12px;
}

.spaces-scope.edit-space-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--cc-text) !important;
  line-height: 1.35 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.spaces-scope.edit-space-page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  right: 10px !important;
}

.spaces-scope.edit-space-page .select2-dropdown {
  border: 1px solid #dbe4ef !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.spaces-scope.edit-space-page .select2-search--dropdown {
  padding: 10px !important;
  background: #f8fbff;
}

.spaces-scope.edit-space-page .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  border: 1px solid #dbe4ef !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
}

.spaces-scope.edit-space-page .select2-results__option {
  padding: 10px 12px !important;
  font-size: 0.92rem;
}

.spaces-scope.edit-space-page .edit-space-chip.is-positive {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.spaces-scope.edit-space-page .edit-space-chip.is-negative {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.spaces-scope.edit-space-page .edit-space-chip.is-accent {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
}

.spaces-scope.edit-space-page .edit-space-chip.is-neutral {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.spaces-scope.edit-space-page .edit-space-section {
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: #fff;
  padding: 12px 12px 6px;
}

.spaces-scope.edit-space-page .edit-space-section--location {
  border-color: #bfdbfe;
  box-shadow: inset 0 3px 0 #60a5fa;
}

.spaces-scope.edit-space-page .edit-space-section--terms {
  border-color: #c7d2fe;
  box-shadow: inset 0 3px 0 #818cf8;
}

.spaces-scope.edit-space-page .edit-space-section--relations {
  border-color: #bbf7d0;
  box-shadow: inset 0 3px 0 #34d399;
}

.spaces-scope.edit-space-page .edit-space-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spaces-scope.edit-space-page .edit-space-section--location .edit-space-section__title {
  color: #1d4ed8;
}

.spaces-scope.edit-space-page .edit-space-section--terms .edit-space-section__title {
  color: #4338ca;
}

.spaces-scope.edit-space-page .edit-space-section--relations .edit-space-section__title {
  color: #047857;
}

.spaces-scope.edit-space-page .edit-space-section__title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #dbe4ef;
}

.spaces-scope.edit-space-page .edit-space-section .form-group:last-child {
  margin-bottom: 0.85rem !important;
}

.spaces-scope.edit-space-page .edit-space-section .form-label {
  margin-bottom: 0.42rem;
  color: #334155;
  font-weight: 700;
}

.spaces-scope.edit-space-page .edit-space-inline-banner {
  margin: -2px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dbe4ef;
  background: #f8fbff;
  color: #334155;
  font-size: 0.84rem;
  line-height: 1.45;
}

.spaces-scope.edit-space-page .edit-space-inline-banner.is-warning {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.spaces-scope.edit-space-page .edit-space-inline-banner.is-danger {
  border-color: #fca5a5;
  background: #fef2f2;
  color: #991b1b;
}

.spaces-scope.edit-space-page .edit-space-inline-banner.is-info {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}

/* UX-контур выбора судьбы скидки при смене арендатора.
   Это не "еще один radio-group", а сценарный блок:
   он должен визуально отделяться от обычных полей формы и читатьcя как
   последовательность решений с понятным контекстом и последствиями. */
.spaces-scope.edit-space-page .edit-space-tenant-discount-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Верхние контекстные карточки показывают исходные данные конфликта:
   какая скидка активна сейчас и с какой даты приходит новый арендатор.
   Это позволяет не прятать критичный контекст внутри длинного текста баннера. */
.spaces-scope.edit-space-page .edit-space-tenant-discount-context__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-context__label {
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-context__value {
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.45;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-options {
  display: grid;
  gap: 10px;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-options__title {
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Каждая опция — кликабельная карточка.
   Такой паттерн намеренно безопаснее для оператора, чем "голая" строка с radio:
   меньше риск случайного выбора и проще увидеть смысл сценария. */
.spaces-scope.edit-space-page .edit-space-tenant-discount-option {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__input {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
  pointer-events: none;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid #dbe4ef;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

/* Hover и checked-состояния не просто "для красоты".
   Они помогают оператору быстро считывать:
   1) что карточка кликабельна;
   2) какой именно сценарий уже выбран для сохранения. */
.spaces-scope.edit-space-page .edit-space-tenant-discount-option:hover .edit-space-tenant-discount-option__body {
  border-color: #93c5fd;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__input:checked + .edit-space-tenant-discount-option__body {
  border-color: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 12px 24px rgba(37, 99, 235, 0.08);
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__input:focus-visible + .edit-space-tenant-discount-option__body {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__title {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__badge.is-info {
  background: #dbeafe;
  color: #1d4ed8;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__badge.is-warning {
  background: #fef3c7;
  color: #b45309;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__badge.is-accent {
  background: #dcfce7;
  color: #047857;
}

/* Внутри карточки разделяем:
   - пояснение "когда выбирать этот вариант";
   - итог "что произойдет после сохранения".
   Это помогает воспринимать блок как мини-конструктор сценария, а не как справку. */
.spaces-scope.edit-space-page .edit-space-tenant-discount-option__hint {
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.45;
}

.spaces-scope.edit-space-page .edit-space-tenant-discount-option__result {
  color: #1f2937;
  font-size: 0.81rem;
  line-height: 1.45;
  font-weight: 700;
}

.spaces-scope.edit-space-page .edit-space-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #dbe4ef;
  border-radius: 11px;
  background: #f8fbff;
  cursor: pointer;
}

.spaces-scope.edit-space-page .edit-space-toggle .editSpace-checkbox {
  margin-right: 2px;
}

.spaces-scope.edit-space-page .edit-space-toggle__label {
  flex: 1 1 auto;
  color: #1f2a37;
  font-weight: 700;
}

.spaces-scope.edit-space-page .edit-space-toggle__icon {
  min-width: 18px;
  text-align: right;
  font-weight: 800;
  color: #334155;
}

.spaces-scope.edit-space-page .editSpace-form-control.is-edited,
.spaces-scope.edit-space-page .select2-container--default .select2-selection--single.is-edited {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
  background: #eff6ff !important;
}

.spaces-scope.edit-space-page .editSpace-form-control.is-attention {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12) !important;
  background: #fffaf0 !important;
}

.spaces-scope.edit-space-page .form-text {
  margin-top: 6px;
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.45;
}

.spaces-scope.edit-space-page .edit-space-sticky-summary {
  position: sticky;
  bottom: 16px;
  margin-top: 16px;
  margin-left: auto;
  width: min(360px, 100%);
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
  padding: 14px 16px;
  z-index: 4;
}

.spaces-scope.edit-space-page .edit-space-sticky-summary__title {
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spaces-scope.edit-space-page .edit-space-sticky-summary__list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.spaces-scope.edit-space-page .edit-space-sticky-summary__list li {
  position: relative;
  padding-left: 18px;
  color: #334155;
  font-size: 0.86rem;
  line-height: 1.45;
}

.spaces-scope.edit-space-page .edit-space-sticky-summary__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #60a5fa;
  transform: translateY(-50%);
}

.spaces-scope.edit-space-page .edit-space-actions {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.spaces-scope.edit-space-page .edit-space-actions__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.spaces-scope.edit-space-page .edit-space-actions__meta > strong {
  color: #1e3a8a;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.spaces-scope.edit-space-page .edit-space-actions__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.spaces-scope.edit-space-page .edit-space-actions__buttons .btn {
  min-height: 42px;
  border-radius: 12px !important;
  font-weight: 700;
}

.spaces-scope.edit-space-page .edit-space-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spaces-scope.edit-space-page .edit-space-section-btn {
  border: 1px solid #dbe4ef;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  padding: 5px 10px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  transition: all 0.18s ease;
}

.spaces-scope.edit-space-page .edit-space-section-btn.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
}

.spaces-scope.edit-space-page .edit-space-discounts-panel {
  border: 1px solid #dbe4ef;
  border-radius: 11px;
  background: #f8fbff;
  padding: 10px;
}

.spaces-scope.edit-space-page .edit-space-discounts-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 800;
}

.spaces-scope.edit-space-page .edit-space-discounts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spaces-scope.edit-space-page .edit-space-discount-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dbe4ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.spaces-scope.edit-space-page .edit-space-discount-editor-bar,
.spaces-scope.edit-space-page .edit-space-discounts-panel,
.spaces-scope.edit-space-page .edit-space-inline-banner {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.spaces-scope.edit-space-page .edit-space-discount-editor-bar__title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #33506b;
}

.spaces-scope.edit-space-page .edit-space-discount-editor-bar__state {
  margin-top: 3px;
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 700;
}

.spaces-scope.edit-space-page .edit-space-discount-item {
  width: 100%;
  text-align: left;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #fff;
  padding: 9px 10px;
  color: #1f2a37;
  cursor: pointer;
}

.spaces-scope.edit-space-page .edit-space-discount-item.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
  background: #eff6ff;
}

.spaces-scope.edit-space-page .edit-space-discount-item__type {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
}

.spaces-scope.edit-space-page .edit-space-discount-item__meta {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: #64748b;
}

.spaces-scope.edit-space-page .edit-space-discounts-empty {
  color: #64748b;
  font-size: 0.86rem;
}

.spaces-scope.edit-space-page .edit-space-delete-form {
  margin-top: 0.8rem;
}

.spaces-scope.edit-space-page .edit-space-back-btn {
  border-radius: 10px !important;
}

@media (max-width: 768px) {
  .spaces-scope.edit-space-page {
    padding: 0.55rem !important;
  }

  .spaces-scope.edit-space-page .card-header {
    padding: 0.8rem !important;
  }

  .spaces-scope.edit-space-page .card-body {
    padding: 0.72rem !important;
  }

  .spaces-scope.edit-space-page .edit-space-card__head {
    align-items: flex-start !important;
    gap: 10px;
  }

  .spaces-scope.edit-space-page .edit-space-card__head h5 {
    font-size: 1.18rem;
    margin-bottom: 4px !important;
  }

  .spaces-scope.edit-space-page .edit-space-subtitle {
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 34ch;
  }

  .spaces-scope.edit-space-page .edit-space-kpis {
    gap: 5px;
    margin-bottom: 10px !important;
  }

  .spaces-scope.edit-space-page .edit-space-chip {
    justify-content: flex-start;
    font-size: 0.72rem;
    padding: 4px 8px;
  }

  .spaces-scope.edit-space-page .edit-space-insights {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-bottom: 12px !important;
  }

  .spaces-scope.edit-space-page .edit-space-insight-card {
    padding: 11px 12px;
    border-radius: 14px;
  }

  .spaces-scope.edit-space-page .edit-space-insight-card__label {
    font-size: 0.7rem;
  }

  .spaces-scope.edit-space-page .edit-space-insight-card__value {
    font-size: 0.91rem;
  }

  .spaces-scope.edit-space-page .edit-space-insight-card__hint {
    font-size: 0.78rem;
  }

  .spaces-scope.edit-space-page .edit-space-actions {
    position: sticky;
    bottom: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
  }

  .spaces-scope.edit-space-page .edit-space-actions__buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .spaces-scope.edit-space-page .edit-space-actions__buttons .btn {
    width: 100%;
    min-height: 44px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.8rem;
  }

  .spaces-scope.edit-space-page .edit-space-sections {
    display: none;
  }

  .spaces-scope.edit-space-page .edit-space-section {
    padding: 9px 9px 4px;
    border-radius: 14px;
  }

  .spaces-scope.edit-space-page .edit-space-section .form-label {
    font-size: 0.84rem;
  }

  .spaces-scope.edit-space-page .edit-space-toggle {
    min-height: 44px;
    padding: 8px 10px;
  }

  .spaces-scope.edit-space-page .edit-space-section__title {
    font-size: 0.74rem;
    margin-bottom: 10px;
  }

  .spaces-scope.edit-space-page .edit-space-discount-editor-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .spaces-scope.edit-space-page .edit-space-inline-banner {
    padding: 9px 10px;
    font-size: 0.8rem;
  }

  /* На мобильной ширины двух колонок уже не хватает:
     контекстные карточки и верхний ряд option-card переводим в одну колонку,
     чтобы сценарий читался сверху вниз без "шахматки". */
  .spaces-scope.edit-space-page .edit-space-tenant-discount-context {
    grid-template-columns: 1fr;
  }

  .spaces-scope.edit-space-page .edit-space-tenant-discount-option__top {
    flex-direction: column;
    align-items: flex-start;
  }

  .spaces-scope.edit-space-page .form-text {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .spaces-scope.edit-space-page .select2-container--default .select2-selection--single {
    min-height: 46px;
    border-radius: 12px !important;
    padding-right: 40px;
  }

  .spaces-scope.edit-space-page .select2-results__option {
    padding: 11px 12px !important;
    font-size: 0.9rem;
  }
}

/* ==========================================================================
   Список арендаторов (новый визуальный слой)
   --------------------------------------------------------------------------
   Вся стилизация ограничена .renters-scope, чтобы не задеть карточки арендатора,
   edit-flow и другие страницы со схожими bootstrap/materialize-классами.
   ========================================================================== */
.spaces-scope.renters-scope.renters-page {
  --rt-primary: #2563eb;
  --rt-primary-strong: #1d4ed8;
  --rt-primary-soft: #dbeafe;
  --rt-text: #1f2a37;
  --rt-muted: #5f738d;
  --rt-border: #d8e3f2;
  --rt-surface: #ffffff;
  --rt-surface-soft: #f8fbff;
}

/* Основная карточка фильтров.
   Добавляем "живой" фон, мягкую глубину и верхний акцентный штрих,
   чтобы блок выглядел как самостоятельная рабочая панель. */
.spaces-scope.renters-scope.renters-page .renters-filters-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #ccdbee;
  border-radius: 20px;
  background:
    radial-gradient(circle at 8% 10%, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0) 42%),
    linear-gradient(140deg, #ffffff 0%, #f7fbff 55%, #eff6ff 100%);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.spaces-scope.renters-scope.renters-page .renters-filters-card::before {
  content: '';
  position: absolute;
  inset: auto -90px -110px auto;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0) 74%);
  pointer-events: none;
}

.spaces-scope.renters-scope.renters-page .renters-filters-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 48%, rgba(96, 165, 250, 0) 100%);
  pointer-events: none;
}

/* Вертикальный ритм панели:
   1) хедер-контекст;
   2) действия;
   3) фильтры. */
.spaces-scope.renters-scope.renters-page .renters-toolbar-classic {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Верхняя строка с подписью модуля.
   Помогает визуально "собрать" панель и делает блок менее безликим. */
.spaces-scope.renters-scope.renters-page .renters-hero-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.spaces-scope.renters-scope.renters-page .renters-hero-copy {
  min-width: 0;
}

.spaces-scope.renters-scope.renters-page .renters-hero-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #233754;
}

.spaces-scope.renters-scope.renters-page .renters-hero-subtitle {
  margin: 4px 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: #58708f;
}

.spaces-scope.renters-scope.renters-page .renters-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid #c8daf5;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #355275;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.spaces-scope.renters-scope.renters-page .renters-hero-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}

/* Группа действий.
   Делаем "капсулу", внутри которой кнопки выровнены по центру по вертикали
   и не наследуют конфликтные line-height/text-transform от Materialize. */
.spaces-scope.renters-scope.renters-page .renters-actions-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: fit-content;
  padding: 6px;
  border: 1px solid #d1e0f2;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 20px rgba(30, 64, 175, 0.09);
}

.spaces-scope.renters-scope.renters-page .renters-action-form {
  margin: 0;
  display: flex;
}

.spaces-scope.renters-scope.renters-page .renters-action-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 1.16rem !important;
  border-radius: 12px;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1 !important;
  letter-spacing: 0.012em;
  text-transform: none !important;
  white-space: nowrap;
  transition: transform 0.14s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-primary {
  color: #fff !important;
  border: 1px solid #1d4ed8 !important;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 10px 18px rgba(29, 78, 216, 0.27) !important;
}

.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-primary:hover,
.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-primary:focus {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%) !important;
}

.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-secondary {
  color: #334155 !important;
  border: 1px solid #cfdced !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%) !important;
  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.07) !important;
}

.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-secondary:hover,
.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-secondary:focus {
  transform: translateY(-1px);
  border-color: #9db6d8 !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%) !important;
}

/* Ряд фильтров: поиск + площадь.
   Поиск оставляем приоритетным по ширине, селект делаем компактным справа. */
.spaces-scope.renters-scope.renters-page .renters-filters-inline {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, 300px);
  gap: 12px;
  align-items: end;
  padding: 11px;
  border: 1px solid #d9e6f7;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.spaces-scope.renters-scope.renters-page .renters-zone-group,
.spaces-scope.renters-scope.renters-page .renters-search-group {
  min-width: 0;
}

.spaces-scope.renters-scope.renters-page .renters-zone-group .form-label,
.spaces-scope.renters-scope.renters-page .renters-search-group .form-label {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #415877;
}

/* Обертка поля и иконка.
   Иконка не перехватывает клики и не мешает выделению текста. */
.spaces-scope.renters-scope.renters-page .renters-field-shell {
  position: relative;
}

.spaces-scope.renters-scope.renters-page .renters-field-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #6b86a9;
  pointer-events: none;
  user-select: none;
}

.spaces-scope.renters-scope.renters-page .renters-field-control {
  min-height: 48px;
  height: 48px !important;
  padding-left: 43px !important;
  padding-right: 12px !important;
  border-radius: 13px !important;
  border: 1px solid #cddcec !important;
  background-color: #fff !important;
  color: var(--rt-text) !important;
  line-height: 1.2 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.spaces-scope.renters-scope.renters-page .renters-search-group .renters-field-control {
  font-size: 1.01rem;
}

/* Для select добавляем собственную стрелку, чтобы скрыть "случайные" системные
   артефакты и получить аккуратный единый вид с input-полем поиска. */
.spaces-scope.renters-scope.renters-page .renters-zone-select {
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #6485ad 50%),
    linear-gradient(135deg, #6485ad 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.spaces-scope.renters-scope.renters-page .renters-zone-group .renters-field-control:focus,
.spaces-scope.renters-scope.renters-page .renters-search-group .renters-field-control:focus {
  border-color: #7aa4f6 !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
}

.spaces-scope.renters-scope.renters-page .renters-search-help {
  display: block;
  margin-top: 6px;
  margin-bottom: 0;
  font-size: 0.74rem;
  line-height: 1.28;
  color: var(--rt-muted) !important;
}

/* Нижняя строка шапки: статус загрузки.
   Делаем "пилюлей", чтобы статус не выглядел как случайный текст. */
.spaces-scope.renters-scope.renters-page .renters-footer-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spaces-scope.renters-scope.renters-page #rt-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid #d2e2f8;
  border-radius: 999px;
  color: #4b6485;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.87rem;
  font-weight: 700;
}

.spaces-scope.renters-scope.renters-page #rt-summary::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.16);
}

.spaces-scope.renters-scope.renters-page .renters-footer-spacer {
  flex: 1 1 auto;
}

/* Таблица арендаторов.
   Оставляем горизонтальный скролл для плотных наборов данных, при этом
   делаем рабочую область чистой и визуально отделенной от фона. */
.spaces-scope.renters-scope.renters-page .renters-table-wrap {
  border: 1px solid var(--rt-border);
  border-radius: 14px;
  background: var(--rt-surface);
  overflow: auto;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.spaces-scope.renters-scope.renters-page .renters-table {
  margin-bottom: 0;
  min-width: 960px;
  border-collapse: collapse;
}

.spaces-scope.renters-scope.renters-page .renters-table-head th {
  background: #f8fafd;
  color: #2c4056;
  font-weight: 700;
  border-bottom: 1px solid #dfe7f2 !important;
  vertical-align: middle;
  white-space: nowrap;
}

.spaces-scope.renters-scope.renters-page .renters-table tbody td {
  border-top: 1px solid #ecf1f7 !important;
  vertical-align: middle;
}

.spaces-scope.renters-scope.renters-page .renters-table tbody tr:nth-child(even) > td {
  background: #fcfdff;
}

.spaces-scope.renters-scope.renters-page .renters-table tbody tr:hover > td {
  background: #f3f8ff;
}

.spaces-scope.renters-scope.renters-page .renters-table a {
  /* Базовый акцент ссылок в renters-таблице (до финальных override-блоков ниже).
     Дублируем целевое значение намеренно, чтобы даже при частичном каскаде
     цвет оставался согласованным с fixed-реестром. */
  color: #1f4b8f;
  font-weight: 700;
  text-decoration: none;
}

.spaces-scope.renters-scope.renters-page .renters-table a:hover {
  text-decoration: underline;
}

/* Лоадинг-состояние таблицы при динамическом поиске/фильтрации. */
.spaces-scope.renters-scope.renters-page.is-loading .renters-table-wrap {
  opacity: 0.75;
  transition: opacity 0.16s ease;
}

/* Пагинация.
   Дополнительно сбрасываем конфликтные bootstrap/materialize-отступы, чтобы
   убрать "полосы/фоновые линии" вокруг кнопок страниц. */
.spaces-scope.renters-scope.renters-page .renters-pagination {
  display: flex;
  justify-content: center;
  margin: 14px 0;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .pagination {
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .pagination .page-item {
  display: inline-flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Критический mobile-fix:
     Materialize задает `.pagination li { height: 30px; }`, и при наших
     более высоких кнопках (40px) flex-строки начинают визуально наезжать
     друг на друга. В результате крайняя кнопка (чаще "Наступна") может
     частично перекрывать соседние элементы пагинации.

     Принудительно снимаем фиксированную высоту и даем элементу расти
     по контенту. Так высота строки совпадает с фактической высотой кнопки,
     а перекрытия исчезают. */
  height: auto !important;
  min-height: 40px !important;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .page-item:not(:first-child) .page-link {
  margin-left: 0 !important;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .pagination li::before,
.spaces-scope.renters-scope.renters-page .renters-pagination .pagination li::after {
  display: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.62rem !important;
  border-radius: 11px !important;
  border: 1px solid #d4dfec !important;
  color: #2e425a !important;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
  line-height: 1 !important;
  background-image: none !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .page-item.active .page-link {
  background: linear-gradient(180deg, var(--rt-primary) 0%, var(--rt-primary-strong) 100%) !important;
  border-color: var(--rt-primary-strong) !important;
  color: #fff !important;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .page-link:hover {
  border-color: #96b5eb !important;
  background: #f1f7ff !important;
}

.spaces-scope.renters-scope.renters-page .renters-pagination .page-item.disabled .page-link {
  background: #f8fafc !important;
  border-color: #e6edf5 !important;
  color: #94a3b8 !important;
}

@media (max-width: 768px) {
  /* На телефонах добавляем больший вертикальный зазор между строками wrap-пагинации.
     Это дополнительная страховка от визуального "прилипания" длинных кнопок
     (`Попередня` / `Наступна`) к ряду с номерами страниц. */
  .spaces-scope.renters-scope.renters-page .renters-pagination .pagination {
    row-gap: 8px;
  }
}

@media (max-width: 480px) {
  /* На очень узких экранах (малые Android/iPhone SE):
     1) немного уменьшаем горизонтальные отступы;
     2) не ломаем tap-target по высоте;
     3) снижаем риск, что длинные подписи "Попередня/Наступна"
        будут выталкивать соседние номера пагинации. */
  .spaces-scope.renters-scope.renters-page .renters-pagination .page-link {
    min-width: 36px;
    min-height: 38px;
    padding: 0 0.52rem !important;
    font-size: 0.82rem;
  }
}

/* Кнопки восстановления скрытых колонок.
   Сохраняем функциональность legacy app.js, но приводим внешний вид к новому слою. */
.spaces-scope.renters-scope.renters-page .renters-hidden-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-buttons button,
.spaces-scope.renters-scope.renters-page .renters-hidden-buttons select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 0.35rem 0.82rem;
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  color: #24456b;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none !important;
  box-shadow: 0 4px 10px rgba(30, 79, 184, 0.08);
}

.spaces-scope.renters-scope.renters-page .renters-hidden-buttons button:hover,
.spaces-scope.renters-scope.renters-page .renters-hidden-buttons select:hover {
  border-color: #9cbef2;
  background: linear-gradient(180deg, #f2f8ff 0%, #e8f1ff 100%);
}

/* Стрелки сортировки в заголовках.
   Клик остается на стрелке, чтобы не провоцировать legacy-поведение скрытия колонок. */
.spaces-scope.renters-scope.renters-page .sort-arrows {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  cursor: pointer;
  color: #94a3b8;
  user-select: none;
  transition: color 0.16s ease, transform 0.14s ease;
}

.spaces-scope.renters-scope.renters-page .sort-arrows::before {
  content: '\2195';
  font-size: 12px;
  line-height: 1;
}

.spaces-scope.renters-scope.renters-page .sort-arrows.none::before {
  content: '\2195';
}

.spaces-scope.renters-scope.renters-page .sort-arrows.asc::before {
  content: '\2191';
  color: #1d4ed8;
}

.spaces-scope.renters-scope.renters-page .sort-arrows.desc::before {
  content: '\2193';
  color: #1d4ed8;
}

.spaces-scope.renters-scope.renters-page .sort-arrows.active {
  color: #1d4ed8;
  transform: translateY(-1px);
}

@media (max-width: 991px) {
  .spaces-scope.renters-scope.renters-page .renters-hero-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .spaces-scope.renters-scope.renters-page .renters-filters-inline {
    grid-template-columns: 1fr;
  }

  .spaces-scope.renters-scope.renters-page .renters-actions-group {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .spaces-scope.renters-scope.renters-page {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-filters-card {
    padding: 0.85rem !important;
    border-radius: 16px;
  }

  .spaces-scope.renters-scope.renters-page .renters-actions-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .spaces-scope.renters-scope.renters-page .renters-action-btn {
    width: 100%;
    min-height: 45px !important;
    height: 45px !important;
    font-size: 0.88rem;
  }

  .spaces-scope.renters-scope.renters-page .renters-filters-inline {
    padding: 9px;
    border-radius: 13px;
  }

  .spaces-scope.renters-scope.renters-page .renters-field-control {
    min-height: 46px;
    height: 46px !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .spaces-scope.renters-scope.renters-page .renters-table-wrap {
    border-radius: 12px;
  }
}

@media (max-width: 540px) {
  .spaces-scope.renters-scope.renters-page .renters-actions-group {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Гармонизация списков `/spaces` и `/renters` (единый UI-контракт)
   --------------------------------------------------------------------------
   Задача блока: убрать визуальный "разнобой" между двумя рабочими таблицами.
   Базовый эталон — текущая страница `/spaces`.
   Почему отдельным слоем внизу файла:
   1) не ломаем уже работающие стили выше;
   2) точечно переопределяем только renters-страницу;
   3) сохраняем историю эволюции UI без рискованного массового рефакторинга.
   ========================================================================== */

/* Карточка верхнего блока в renters приводится к той же "плоской" карточке,
   что и на spaces: мягкий фон, спокойная рамка, без декоративных бликов. */
.spaces-scope.renters-scope.renters-page .renters-filters-card {
  border-radius: 14px !important;
  background: var(--cc-surface-soft) !important;
  border: 1px solid var(--cc-border) !important;
  padding: 1.1rem !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

/* Декоративные псевдо-слои были полезны для акцентной версии дизайна,
   но в контексте унификации с spaces дают лишний контраст.
   Поэтому принудительно отключаем их только для renters. */
.spaces-scope.renters-scope.renters-page .renters-filters-card::before,
.spaces-scope.renters-scope.renters-page .renters-filters-card::after {
  display: none !important;
}

/* Общий ритм верхней панели:
   - компактные вертикальные интервалы;
   - без "плавающих" декоративных смещений;
   - предсказуемая сетка на desktop и mobile. */
.spaces-scope.renters-scope.renters-page .renters-toolbar-classic {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.9rem !important;
}

/* Заголовочная строка renters оставлена, но упрощена до "служебного" статуса,
   чтобы визуально не спорить с верхним блоком filters на spaces. */
.spaces-scope.renters-scope.renters-page .renters-hero-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.spaces-scope.renters-scope.renters-page .renters-hero-title {
  margin: 0 !important;
  color: var(--cc-text) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.spaces-scope.renters-scope.renters-page .renters-hero-subtitle {
  margin: 2px 0 0 !important;
  color: var(--cc-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
}

.spaces-scope.renters-scope.renters-page .renters-hero-badge {
  border: 1px solid var(--cc-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--cc-text) !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.85rem !important;
  box-shadow: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-hero-badge::before {
  display: none !important;
}

/* Группа действий теперь визуально совпадает с пространственным ритмом spaces:
   без отдельной "капсулы", только ряд округлых служебных кнопок. */
.spaces-scope.renters-scope.renters-page .renters-actions-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}

.spaces-scope.renters-scope.renters-page .renters-action-form {
  margin: 0 !important;
}

/* Кнопки действий намеренно подчиняем тому же паттерну, что и filter-buttons
   на spaces: одинаковая высота, pill-форма, плотная типографика. */
.spaces-scope.renters-scope.renters-page .renters-action-btn {
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  padding: 0 1rem !important;
  font-weight: 700 !important;
  font-size: 0.93rem !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* Primary/secondary цвета оставляем в том же semantic-паттерне,
   который уже используется внутри пространства .spaces-scope. */
.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-primary {
  color: #fff !important;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
}

.spaces-scope.renters-scope.renters-page .renters-action-btn.btn-secondary {
  color: var(--cc-text) !important;
  background: #fff !important;
  border: 1px solid var(--cc-border) !important;
}

/* Ряд фильтров renters приводим к плотности controls из spaces:
   одинаковая высота полей, те же радиусы и фокус-обводка. */
.spaces-scope.renters-scope.renters-page .renters-filters-inline {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, 1fr) !important;
  gap: 0.9rem !important;
  align-items: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-zone-group .form-label,
.spaces-scope.renters-scope.renters-page .renters-search-group .form-label {
  margin-bottom: 0.45rem !important;
  color: var(--cc-muted) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Иконки внутри полей в новой унифицированной версии скрываем:
   на spaces поля идут без иконок, и это снижает шум в плотной форме. */
.spaces-scope.renters-scope.renters-page .renters-field-icon {
  display: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-field-shell {
  position: relative !important;
}

.spaces-scope.renters-scope.renters-page .renters-field-control {
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  padding: 0.7rem 0.9rem !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--cc-text) !important;
  box-shadow: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-field-control:focus {
  border-color: var(--cc-primary-soft) !important;
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.14) !important;
  outline: none !important;
}

/* Отказываемся от кастомной стрелки select в renters, чтобы совпасть
   с поведением и рендером селектов на spaces. */
.spaces-scope.renters-scope.renters-page .renters-zone-select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  background-image: none !important;
  padding-right: 0.9rem !important;
}

.spaces-scope.renters-scope.renters-page .renters-search-help {
  margin-top: 0.35rem !important;
  font-size: 0.84rem !important;
  line-height: 1.25 !important;
  color: var(--cc-muted) !important;
}

/* Строка summary у renters приводится к формату spaces:
   обычный текст без "пилюли" и без декоративной точки. */
.spaces-scope.renters-scope.renters-page .renters-footer-bar {
  gap: 0.75rem !important;
  color: var(--cc-text) !important;
  font-size: 1rem !important;
}

.spaces-scope.renters-scope.renters-page #rt-summary {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--cc-text) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.spaces-scope.renters-scope.renters-page #rt-summary::before {
  display: none !important;
}

/* Таблица renters: выравниваем заголовки, плотность и бордеры под spaces-table. */
.spaces-scope.renters-scope.renters-page .renters-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid var(--cc-head-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-table {
  width: 100% !important;
  min-width: 960px !important;
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}

.spaces-scope.renters-scope.renters-page .renters-table-head th {
  text-align: center !important;
  vertical-align: middle !important;
  background: var(--cc-head-bg) !important;
  color: var(--cc-text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cc-head-border) !important;
  padding: 0.8rem 0.65rem !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

.spaces-scope.renters-scope.renters-page .renters-table tbody td {
  border: 0 !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 0.75rem 0.65rem !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.spaces-scope.renters-scope.renters-page .renters-table tbody tr:nth-child(even) > td {
  background: #fcfdff !important;
}

.spaces-scope.renters-scope.renters-page .renters-table tbody tr:hover > td {
  background: #f5f9ff !important;
}

.spaces-scope.renters-scope.renters-page .renters-table a {
  /* Жесткий override для секции унифицированного table-style:
     в этом блоке часто используются !important, поэтому и цвет фиксируем
     в таком же приоритете, чтобы не было случайного отката на другой оттенок. */
  color: #1f4b8f !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-table a:hover {
  text-decoration: underline !important;
}

/* Стрелки сортировки приводим ровно к тому виду, что на spaces:
   круглая кнопка 22px + одинаковые символы "⇅ / ↑ / ↓". */
.spaces-scope.renters-scope.renters-page .sort-arrows {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.55rem !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--cc-muted) !important;
  vertical-align: middle !important;
  position: relative !important;
  transform: none !important;
}

.spaces-scope.renters-scope.renters-page .sort-arrows::before {
  font-size: 0.88rem !important;
  line-height: 1 !important;
  color: var(--cc-muted) !important;
}

.spaces-scope.renters-scope.renters-page .sort-arrows.none::before {
  content: '⇅' !important;
}

.spaces-scope.renters-scope.renters-page .sort-arrows.asc::before {
  content: '↑' !important;
  color: var(--cc-primary-strong) !important;
}

.spaces-scope.renters-scope.renters-page .sort-arrows.desc::before {
  content: '↓' !important;
  color: var(--cc-primary-strong) !important;
}

.spaces-scope.renters-scope.renters-page .sort-arrows.active {
  color: var(--cc-primary-strong) !important;
}

/* Кнопки/селект "вернуть скрытую колонку" делаем тем же паттерном,
   что и на spaces (pill-форма, белый фон, спокойная рамка). */
.spaces-scope.renters-scope.renters-page .renters-hidden-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-buttons button,
.spaces-scope.renters-scope.renters-page .renters-hidden-buttons select {
  border: 1px solid var(--cc-border) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--cc-text) !important;
  min-height: 40px !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-buttons button:hover,
.spaces-scope.renters-scope.renters-page .renters-hidden-buttons select:hover {
  border-color: var(--cc-primary-soft) !important;
  background: #f8fbff !important;
}

@media (max-width: 992px) {
  /* На tablet/mobile переводим filters в одну колонку —
     это повторяет поведение верхнего toolbar на spaces. */
  .spaces-scope.renters-scope.renters-page .renters-filters-inline {
    grid-template-columns: 1fr !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-footer-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 768px) {
  /* На узких экранах действия renters разворачиваем в колонку:
     так кнопки не "толкаются" и повторяют mobile-поведение списка spaces. */
  .spaces-scope.renters-scope.renters-page .renters-actions-group {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-action-form {
    width: 100% !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-action-btn {
    width: 100% !important;
  }
}

/* ==========================================================================
   Компактный тюнинг полей `Пошук` и `Площа` (spaces + renters)
   --------------------------------------------------------------------------
   Этот блок решает локальный UX-запрос:
   сделать именно два ключевых поля (поиск и площадь) более элегантными
   и компактными, не затрагивая остальную форму и бизнес-логику фильтров.

   Почему отдельный блок внизу:
   1) получаем предсказуемый приоритет над предыдущими правилами;
   2) не ломаем исторический слой стилей выше;
   3) легко отключить/подкрутить только компактный режим.
   ========================================================================== */

/* Лейблы "Пошук"/"Площа" делаем легче и компактнее:
   меньше кегль, аккуратный межбуквенный интервал, без лишней тяжести. */
.spaces-scope.spaces-page label[for='sc-search'],
.spaces-scope.spaces-page label[for='sc-zone'],
.spaces-scope.renters-scope.renters-page label[for='searchInput'],
.spaces-scope.renters-scope.renters-page label[for='rt-zone'] {
  margin-bottom: 0.34rem !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  letter-spacing: 0.018em !important;
  color: #5a708d !important;
  text-transform: none !important;
}

/* Для renters дополнительно корректируем композицию под текущий запрос:
   - поле `Пошук` делаем уже (оно не должно занимать почти весь ряд);
   - `Площа` оставляем справа как отдельный компактный столбец.
   Технически:
   1) фиксируем более узкий диапазон ширины у первой колонки;
   2) вторую колонку держим компактной;
   3) `justify-content: space-between` разносит их по левому/правому краю строки. */
.spaces-scope.renters-scope.renters-page .renters-filters-inline {
  grid-template-columns: minmax(220px, 360px) minmax(170px, 230px) !important;
  justify-content: space-between !important;
  gap: 0.68rem !important;
}

/* Явно закрепляем поведение самих колонок:
   - поиск не растягивается сверх заданного диапазона;
   - селект площади прилипает к правой стороне и держит стабильную ширину. */
.spaces-scope.renters-scope.renters-page .renters-search-group {
  width: 100% !important;
  max-width: 360px !important;
}

.spaces-scope.renters-scope.renters-page .renters-zone-group {
  width: 100% !important;
  max-width: 230px !important;
  justify-self: end !important;
}

/* Общий компактный каркас для целевых полей (поиск + площадь).
   Ключевые изменения:
   - высота 42px вместо более "тяжелых" вариантов;
   - радиус 10px (строже и современнее);
   - мягкий градиентный фон + тонкая внутренняя подсветка;
   - плотная, но читаемая типографика. */
.spaces-scope.spaces-page #sc-search,
.spaces-scope.spaces-page #sc-zone,
.spaces-scope.renters-scope.renters-page #searchInput,
.spaces-scope.renters-scope.renters-page #rt-zone {
  box-sizing: border-box !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0.5rem 0.74rem !important;
  border: 1px solid #c8d6e8 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
  color: #1f2a37 !important;
  font-size: 0.92rem !important;
  line-height: 1.15 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

/* Жесткая синхронизация высоты и "уровня" для пары полей renters.
   Дополнительно:
   - убираем возможные внешние margin;
   - растягиваем shell по высоте контрола;
   - гарантируем одинаковую вертикальную геометрию input/select. */
.spaces-scope.renters-scope.renters-page .renters-field-shell {
  display: flex !important;
  align-items: stretch !important;
}

.spaces-scope.renters-scope.renters-page #searchInput,
.spaces-scope.renters-scope.renters-page #rt-zone {
  margin: 0 !important;
  min-height: 42px !important;
  height: 42px !important;
  line-height: 1.15 !important;
}

/* Поисковый input делаем чуть "воздушнее" по набору текста,
   чтобы длинные строки (ФИО/телефон/код) читались легче. */
.spaces-scope.spaces-page #sc-search,
.spaces-scope.renters-scope.renters-page #searchInput {
  letter-spacing: 0.006em !important;
}

/* Текст placeholder немного приглушаем:
   меньше визуального шума, лучше контраст с введенным значением. */
.spaces-scope.spaces-page #sc-search::placeholder,
.spaces-scope.renters-scope.renters-page #searchInput::placeholder {
  color: #7a8ea9 !important;
  opacity: 1 !important;
}

/* Для select оставляем место под нативную стрелку,
   чтобы текст не "лип" к правой границе и не обрезался. */
.spaces-scope.spaces-page #sc-zone,
.spaces-scope.renters-scope.renters-page #rt-zone {
  padding-right: 1.8rem !important;
}

/* Фокус-состояние делаем аккуратным:
   тонкий синий контур + мягкий внешний halo без агрессивного свечения. */
.spaces-scope.spaces-page #sc-search:focus,
.spaces-scope.spaces-page #sc-zone:focus,
.spaces-scope.renters-scope.renters-page #searchInput:focus,
.spaces-scope.renters-scope.renters-page #rt-zone:focus {
  border-color: #7ca1d9 !important;
  box-shadow: 0 0 0 0.16rem rgba(37, 99, 235, 0.13) !important;
  outline: none !important;
}

@media (max-width: 992px) {
  /* На tablet у renters фильтры все равно должны раскладываться в колонку,
     иначе компактность превратится в "тесноту". */
  .spaces-scope.renters-scope.renters-page .renters-filters-inline {
    grid-template-columns: 1fr !important;
  }

  /* В одно-колоночном режиме снимаем desktop-ограничения ширины,
     чтобы оба поля занимали доступную ширину и не выглядели "обрезанными". */
  .spaces-scope.renters-scope.renters-page .renters-search-group,
  .spaces-scope.renters-scope.renters-page .renters-zone-group {
    max-width: 100% !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 768px) {
  /* На mobile оставляем удобный tap-target:
     42px сохраняем, но слегка уменьшаем горизонтальные отступы текста. */
  .spaces-scope.spaces-page #sc-search,
  .spaces-scope.spaces-page #sc-zone,
  .spaces-scope.renters-scope.renters-page #searchInput,
  .spaces-scope.renters-scope.renters-page #rt-zone {
    min-height: 42px !important;
    height: 42px !important;
    padding-left: 0.66rem !important;
    padding-right: 0.66rem !important;
    font-size: 0.9rem !important;
  }

  .spaces-scope.spaces-page #sc-zone,
  .spaces-scope.renters-scope.renters-page #rt-zone {
    padding-right: 1.65rem !important;
  }
}

/* ==========================================================================
   Плавающая кнопка "Вгору" для страницы арендаторов
   --------------------------------------------------------------------------
   Отдельно от spaces-кнопки:
   - id/класс независимы, чтобы не пересекаться с логикой `/spaces`;
   - поведение controlled через класс .is-visible из public/js/renters.js.
   ========================================================================== */
.spaces-scope.renters-scope.renters-page .rt-backtop-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  border: 1px solid var(--cc-primary-strong);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--cc-primary), var(--cc-primary-strong));
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 45;

  /* По умолчанию кнопка скрыта; появляется только после прокрутки. */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
  filter: saturate(0.88);
}

.spaces-scope.renters-scope.renters-page .rt-backtop-fab.is-visible {
  /* Логика идентична spaces-странице:
     кнопка доступна после прокрутки, но остается пассивной до наведения. */
  opacity: 0.56;
  transform: translateY(0);
  pointer-events: auto;
}

.spaces-scope.renters-scope.renters-page .rt-backtop-fab:hover,
.spaces-scope.renters-scope.renters-page .rt-backtop-fab:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34);
  filter: saturate(1);
}

.spaces-scope.renters-scope.renters-page .rt-backtop-fab__icon {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 900;
}

@media (max-width: 768px) {
  .spaces-scope.renters-scope.renters-page .rt-backtop-fab {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    left: 12px;
    bottom: 12px;
  }
}

/* ==========================================================================
   Mobile action-icons for `/renters`
   --------------------------------------------------------------------------
   Контракт:
   - desktop/tablet: текстовые кнопки остаются как раньше;
   - mobile (<=768): обе action-кнопки сворачиваются в квадратные icon-only.
   Для доступности текст не удаляем из DOM, а скрываем только визуально.
   ========================================================================== */
.spaces-scope.renters-scope.renters-page .renters-action-icon {
  display: none;
  font-size: 20px;
  line-height: 1;
}

.spaces-scope.renters-scope.renters-page .renters-action-text {
  display: inline;
}

@media (max-width: 768px) {
  /* На mobile возвращаем ряд действий в горизонтальную "иконковую" группу,
     чтобы верхняя панель была компактнее и не занимала лишнюю высоту. */
  .spaces-scope.renters-scope.renters-page .renters-actions-group {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    padding: 5px !important;
    gap: 8px !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-action-form {
    width: auto !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-action-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    gap: 0 !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-action-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px;
  }

  .spaces-scope.renters-scope.renters-page .renters-action-text {
    display: none !important;
  }
}

/* ==========================================================================
   Renters: hidden-columns select + top-right total badge
   --------------------------------------------------------------------------
   Локальные оверрайды для страницы арендаторов:
   1) "Всього" фиксируем в правом верхнем углу панели;
   2) контрол возврата скрытых столбцов переводим в единый select.
   ========================================================================== */
.spaces-scope.renters-scope.renters-page .renters-toolbar-classic {
  position: relative;
}

.spaces-scope.renters-scope.renters-page .renters-hero-copy {
  /* Оставляем справа "карман" под бейдж "Всього", чтобы заголовок не наезжал. */
  padding-right: 170px;
}

.spaces-scope.renters-scope.renters-page .renters-hero-badge {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-buttons {
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-buttons.is-empty {
  /* Контрол не должен занимать вертикальное место, пока возвращать нечего. */
  display: none !important;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-select-label {
  margin: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #4b6383 !important;
  white-space: nowrap;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-columns-select {
  min-height: 40px !important;
  height: 40px !important;
  min-width: 240px !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--cc-text) !important;
  padding: 0.45rem 0.9rem !important;
  font-size: 0.9rem !important;
  line-height: 1.15 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.spaces-scope.renters-scope.renters-page .renters-hidden-columns-select:focus {
  border-color: #7ca1d9 !important;
  box-shadow: 0 0 0 0.16rem rgba(37, 99, 235, 0.13) !important;
  outline: none !important;
}

@media (min-width: 769px) {
  /* Desktop: select скрываем полностью, оставляем только кнопки-возвраты колонок. */
  .spaces-scope.renters-scope.renters-page .renters-hidden-select-label,
  .spaces-scope.renters-scope.renters-page .renters-hidden-columns-select {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .spaces-scope.renters-scope.renters-page .renters-hero-copy {
    padding-right: 120px;
  }

  .spaces-scope.renters-scope.renters-page .renters-hidden-buttons {
    align-items: stretch !important;
    gap: 6px !important;
  }

  .spaces-scope.renters-scope.renters-page .renters-hidden-columns-select {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Mobile: наоборот, используем компактный select и прячем кнопки. */
  .spaces-scope.renters-scope.renters-page .renters-hidden-column-btn {
    display: none !important;
  }
}

/* ==========================================================================
   Unified list tables + hidden-columns controls (spaces + renters)
   --------------------------------------------------------------------------
   Цель блока:
   1) выровнять визуальный язык таблиц на `/spaces` и `/renters`;
   2) сохранить и подчеркнуть границы ячеек (полный grid, включая вертикали);
   3) привести контролы возврата скрытых столбцов к общей системе кнопок/селектов.
   Важно: это финальный override-слой, поэтому размещен в самом конце файла.
   ========================================================================== */

/* Единая оболочка таблицы для обоих маршрутов списка. */
.spaces-scope.spaces-page .spaces-table-wrap,
.spaces-scope.renters-scope.renters-page .renters-table-wrap {
  border: 1px solid #d7e1ee !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: auto !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06) !important;
}

/* Общая геометрия таблиц.
   border-collapse обязателен, чтобы сетка границ выглядела аккуратно и не "дублировалась". */
.spaces-scope.spaces-page .spaces-table,
.spaces-scope.renters-scope.renters-page .renters-table {
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Унифицированный стиль заголовков таблицы.
   Сохраняем плотный табличный вид и явную сетку границ. */
.spaces-scope.spaces-page .spaces-table thead th,
.spaces-scope.renters-scope.renters-page .renters-table thead th {
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #26364a !important;
  background: #f6f9fd !important;
  border: 1px solid #d7e1ee !important;
  padding: 0.78rem 0.64rem !important;
}

/* Единая сетка тела таблицы для `/spaces` и `/renters`.
   Здесь выполняем прямой запрос пользователя: сохраняем/добавляем границы ячеек
   на обе страницы, включая вертикальные разделители. */
.spaces-scope.spaces-page .spaces-table tbody td,
.spaces-scope.spaces-page .spaces-table tfoot td,
.spaces-scope.renters-scope.renters-page .renters-table tbody td,
.spaces-scope.renters-scope.renters-page .renters-table tfoot td {
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  padding: 0.72rem 0.64rem !important;
  border: 1px solid #e3ebf4 !important;
}

/* Одинаковая "зебра" и hover для лучшей читаемости длинных списков. */
.spaces-scope.spaces-page .spaces-table tbody tr:nth-child(even) > td,
.spaces-scope.renters-scope.renters-page .renters-table tbody tr:nth-child(even) > td {
  background: #fcfdff !important;
}

.spaces-scope.spaces-page .spaces-table tbody tr:hover > td,
.spaces-scope.renters-scope.renters-page .renters-table tbody tr:hover > td {
  background: #f5f9ff !important;
}

/* Ссылки в таблицах делаем одинаковыми по акценту и hover-поведению. */
.spaces-scope.spaces-page .spaces-table a,
.spaces-scope.renters-scope.renters-page .renters-table a {
  /* Цвет ссылок синхронизирован с /rentCollection-fixed, чтобы все реестры
     выглядели как единая система (один и тот же оттенок ссылочного акцента). */
  color: #1f4b8f !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.spaces-scope.spaces-page .spaces-table a:hover,
.spaces-scope.renters-scope.renters-page .renters-table a:hover {
  text-decoration: underline !important;
}

/* Стрелки сортировки унифицируем между списками.
   Это убирает эффект "похожие, но разные" заголовки таблиц. */
.spaces-scope.spaces-page .sort-arrows,
.spaces-scope.renters-scope.renters-page .sort-arrows {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.55rem !important;
  width: 22px !important;
  height: 22px !important;
  border: 1px solid var(--cc-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  vertical-align: middle !important;
  position: relative !important;
}

.spaces-scope.spaces-page .sort-arrows::before,
.spaces-scope.renters-scope.renters-page .sort-arrows::before {
  font-size: 0.88rem;
  line-height: 1;
  color: var(--cc-muted);
}

/* Контролы возврата скрытых столбцов: единая компоновка для обоих списков.
   Desktop/ mobile-логика показа (кнопки/селект) сохраняется как была, ниже
   мы задаем только общий визуальный язык элементов. */
.spaces-scope.spaces-page .sc-hidden-buttons,
.spaces-scope.renters-scope.renters-page .renters-hidden-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  align-items: center !important;
  margin: 0 0 12px !important;
}

.spaces-scope.spaces-page .sc-hidden-col-btn,
.spaces-scope.renters-scope.renters-page .renters-hidden-column-btn {
  border: 1px solid #cdd9e8 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2b4059 !important;
  padding: 0.42rem 0.82rem !important;
  min-height: 38px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  box-shadow: none !important;
}

.spaces-scope.spaces-page .sc-hidden-col-btn:hover,
.spaces-scope.renters-scope.renters-page .renters-hidden-column-btn:hover {
  border-color: #96b3da !important;
  background: #f6faff !important;
}

.spaces-scope.spaces-page .sc-hidden-col-select,
.spaces-scope.renters-scope.renters-page .renters-hidden-columns-select {
  min-height: 40px !important;
  height: 40px !important;
  border: 1px solid #cdd9e8 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #2b4059 !important;
  padding: 0.45rem 0.88rem !important;
  font-size: 0.9rem !important;
  line-height: 1.15 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.spaces-scope.spaces-page .sc-hidden-col-select:focus,
.spaces-scope.renters-scope.renters-page .renters-hidden-columns-select:focus {
  border-color: #7ca1d9 !important;
  box-shadow: 0 0 0 0.16rem rgba(37, 99, 235, 0.13) !important;
  outline: none !important;
}

/* ==========================================================================
   Renter Card + Edit Renter
   --------------------------------------------------------------------------
   Почему отдельный слой:
   1) карточка/редактирование арендатора должны визуально совпадать с модулем spaces;
   2) при этом нельзя ломать уже стабилизированный список `/renters`;
   3) поэтому используем строго scoped-классы `.renter-card-page` и `.edit-renter-page`.
   ========================================================================== */

/* -------------------- Card: base -------------------- */
.spaces-scope.renter-card-page {
  --rc-head-main: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  --rc-head-side: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  --rc-head-tabs: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  --rc-soft-bg: #f8fbff;
  --rc-border: #d7e1ee;
}

.spaces-scope.renter-card-page .mdc-card {
  border: 1px solid var(--rc-border) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

.spaces-scope.renter-card-page .renter-main-card__head {
  background: var(--rc-head-main) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
  position: relative;
  overflow: hidden;
}

.spaces-scope.renter-card-page .renter-main-card__head::before {
  /* Декоративный "свет" в шапке:
     добавляет глубину фону без перегруза контрастом и без влияния на доступность текста. */
  content: '';
  position: absolute;
  inset: auto -24% -80% 36%;
  height: 210px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.spaces-scope.renter-card-page .renter-main-card__head h5 {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.spaces-scope.renter-card-page .renter-side-card__head {
  background: var(--rc-head-side) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
}

.spaces-scope.renter-card-page .renter-tabs-card__head {
  background: var(--rc-head-tabs) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24) !important;
}

.spaces-scope.renter-card-page .renter-main-card__body,
.spaces-scope.renter-card-page .renter-side-card .card-body,
.spaces-scope.renter-card-page .renter-tabs-card .card-body {
  background: var(--rc-soft-bg) !important;
}

.spaces-scope.renter-card-page .renter-main-card__head .btn {
  /* Все кнопки в шапке карточки арендатора центрируем по контенту,
     чтобы на mobile подпись "Редагувати" не "проваливалась" по высоте. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  line-height: 1;
  font-weight: 700;
}

.spaces-scope.renter-card-page .renter-main-card__head .btn-secondary {
  color: #1f2a37 !important;
  background: #fff !important;
  border-color: #e2e8f0 !important;
}

.spaces-scope.renter-card-page .renter-main-card__head .renter-back-btn {
  /* Кнопка "до списку" теперь иконографическая:
     фиксированная квадратная зона делает стрелку визуально аккуратнее. */
  width: 36px;
  min-width: 36px;
  padding: 0 !important;
  border-radius: 10px !important;
  border-color: #d4deec !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.09);
}

.spaces-scope.renter-card-page .renter-main-card__head .renter-back-btn .material-icons {
  font-size: 21px;
  transform: translateX(-1px);
}

.spaces-scope.renter-card-page .renter-main-card__head .renter-back-btn:hover,
.spaces-scope.renter-card-page .renter-main-card__head .renter-back-btn:focus-visible {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.spaces-scope.renter-card-page .renter-main-card__head .btn-warning {
  color: #fff !important;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: #16a34a !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.26) !important;
}

.spaces-scope.renter-card-page .renter-main-card__head .btn-warning .material-icons {
  font-size: 18px;
}

/* -------------------- Card: KPI + status -------------------- */
.spaces-scope.renter-card-page .renter-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.spaces-scope.renter-card-page .renter-kpi-card {
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spaces-scope.renter-card-page .renter-kpi-card__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5f7390;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.spaces-scope.renter-card-page .renter-kpi-card__value {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 800;
  color: #1d3557;
}

.spaces-scope.renter-card-page .renter-kpi-card__hint {
  font-size: 0.82rem;
  color: #6b7280;
}

.spaces-scope.renter-card-page .renter-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spaces-scope.renter-card-page .renter-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.28rem 0.82rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.86rem;
  border: 1px solid transparent;
}

.spaces-scope.renter-card-page .renter-status-chip.is-positive {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.25);
}

.spaces-scope.renter-card-page .renter-status-chip.is-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.24);
}

.spaces-scope.renter-card-page .renter-status-chip.is-warning {
  background: rgba(245, 158, 11, 0.13);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.28);
}

.spaces-scope.renter-card-page .renter-status-chip.is-accent {
  background: rgba(14, 165, 233, 0.12);
  color: #0c4a6e;
  border-color: rgba(14, 165, 233, 0.25);
}

.spaces-scope.renter-card-page .renter-status-chip.is-neutral {
  background: rgba(100, 116, 139, 0.1);
  color: #334155;
  border-color: rgba(100, 116, 139, 0.25);
}

/* -------------------- Card: profile + side blocks -------------------- */
.spaces-scope.renter-card-page .renter-profile-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #1f2a37;
  margin-bottom: 12px;
}

.spaces-scope.renter-card-page .renter-info-row {
  border: 1px solid #e6edf6;
  border-radius: 11px;
  padding: 10px 12px;
  background: #fff;
}

.spaces-scope.renter-card-page .renter-info-row p {
  /* В блоке арендатора часто выводятся длинные комментарии и реквизиты.
     Явно включаем перенос слов, чтобы на узких экранах не появлялся горизонтальный скролл. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.spaces-scope.renter-card-page .renter-copy-payload {
  font-weight: 700;
}

.spaces-scope.renter-card-page .sc-copy-chip {
  /* Кнопка копирования стилизована в том же паттерне, что и в карточке помещения,
     чтобы поведение "копировать реквизит" выглядело консистентно. */
  border: 1px solid #dbe4ef;
  background: #fff;
  color: #1d4ed8;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  padding: 2px 8px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.spaces-scope.renter-card-page .sc-copy-chip:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.spaces-scope.renter-card-page .sc-copy-chip.is-copied {
  color: #065f46;
  border-color: #a7f3d0;
  background: #d1fae5;
}

.spaces-scope.renter-card-page .renter-side-card__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 800;
}

.spaces-scope.renter-card-page .renter-space-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.spaces-scope.renter-card-page .renter-space-list__item {
  border: 1px solid #e4ecf6;
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
}

.spaces-scope.renter-card-page .renter-space-list__title {
  display: inline-block;
  color: #1f4b8f !important;
  font-weight: 800;
  text-decoration: none !important;
}

.spaces-scope.renter-card-page .renter-space-list__title:hover {
  text-decoration: underline !important;
}

.spaces-scope.renter-card-page .renter-space-list__meta {
  margin-top: 4px;
  font-size: 0.84rem;
  color: #5b6f8e;
}

/* -------------------- Card: tabs + tables -------------------- */
.spaces-scope.renter-card-page .renter-tabs-toolbar {
  /* Повторяем layout карточки помещения:
     слева управление вкладками, ниже meta+поиск, без хаотичного переноса элементов. */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.spaces-scope.renter-card-page .renter-tabs-toolbar__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.spaces-scope.renter-card-page .tab-select-mobile-wrap {
  position: relative;
  display: none;
  width: 100%;
}

.spaces-scope.renter-card-page .tab-select-mobile-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #1d4ed8;
  pointer-events: none;
}

.spaces-scope.renter-card-page .tab-select-mobile-icon .material-icons {
  font-size: 22px;
}

.spaces-scope.renter-card-page .tab-select-mobile {
  display: block;
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.spaces-scope.renter-card-page .tab-buttons-row {
  /* По просьбе оператора вкладки должны скроллиться в одну строку,
     а не ломаться на несколько рядов при уменьшении ширины. */
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.spaces-scope.renter-card-page .tab-buttons-row::-webkit-scrollbar {
  height: 6px;
}

.spaces-scope.renter-card-page .tab-buttons-row::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.58);
  border-radius: 999px;
}

.spaces-scope.renter-card-page .tab-buttons-row .tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid #d9e4f3;
  color: #1f2a37;
  background: #fff;
}

.spaces-scope.renter-card-page .tab-buttons-row .tab-btn.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}

.spaces-scope.renter-card-page .tab-mobile-hint {
  display: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.03em;
}

.spaces-scope.renter-card-page .renter-card-tab-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.spaces-scope.renter-card-page .renter-card-tab-meta {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  align-self: stretch;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.spaces-scope.renter-card-page .renter-card-tab-meta__title {
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.2;
}

.spaces-scope.renter-card-page .renter-card-tab-meta__hint {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.76rem;
  line-height: 1.35;
}

.spaces-scope.renter-card-page .renter-card-tab-search-host {
  flex: 0 0 clamp(250px, 28vw, 360px);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.spaces-scope.renter-card-page .renter-card-tab-search {
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: stretch;
}

.spaces-scope.renter-card-page .renter-card-tab-search .form-control {
  min-height: 42px;
  height: 100%;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
  font-size: 0.94rem;
  padding: 0 14px !important;
}

.spaces-scope.renter-card-page .renter-table-wrap {
  width: 100%;
  overflow: auto;
  max-height: 56vh;
  border: 1px solid #d7e1ee;
  border-radius: 12px;
  background: #fff;
}

.spaces-scope.renter-card-page .renter-table-wrap .renter-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.spaces-scope.renter-card-page .renter-table-wrap .renter-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.spaces-scope.renter-card-page .renter-data-table {
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
}

.spaces-scope.renter-card-page .renter-data-table thead th {
  border: 1px solid #d7e1ee !important;
  background: #f6f9fd !important;
  color: #24384e !important;
  text-align: center;
  vertical-align: middle;
  font-weight: 800;
  font-size: 0.93rem;
}

.spaces-scope.renter-card-page .renter-data-table tbody td,
.spaces-scope.renter-card-page .renter-data-table tfoot td {
  border: 1px solid #e3ebf4 !important;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.spaces-scope.renter-card-page .renter-data-table tbody tr:nth-child(even) > td {
  background: #fcfdff !important;
}

.spaces-scope.renter-card-page .renter-data-table tbody tr:hover > td {
  background: #f5f9ff !important;
}

.spaces-scope.renter-card-page .renter-data-table a {
  color: #1f4b8f !important;
  font-weight: 700;
  text-decoration: none !important;
}

.spaces-scope.renter-card-page .renter-data-table a:hover {
  text-decoration: underline !important;
}

.spaces-scope.renter-card-page .renter-total-row td {
  background: #f6faff !important;
  font-weight: 800 !important;
}

.spaces-scope.renter-card-page .renter-total-row,
.spaces-scope.renter-card-page .renter-total-row strong {
  font-weight: 800 !important;
}

.spaces-scope.renter-card-page .renter-empty-state {
  border: 1px dashed #c9d7eb;
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.spaces-scope.renter-card-page .renter-empty-state__title {
  font-weight: 800;
  color: #1f2a37;
}

.spaces-scope.renter-card-page .renter-empty-state__hint {
  margin-top: 4px;
  font-size: 0.88rem;
  color: #657890;
}

/* Кнопка "вгору" на карточке арендатора.
   Поведение идентично другим крупным страницам: кнопка пассивна в покое,
   визуально активируется только при hover/focus. */
.spaces-scope.renter-card-page .renter-card-backtop {
  position: fixed;
  left: 14px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #1d4ed8;
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
  opacity: 0.68;
  transition: opacity 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
  z-index: 45;
}

.spaces-scope.renter-card-page .renter-card-backtop:hover,
.spaces-scope.renter-card-page .renter-card-backtop:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34);
  color: #fff;
}

.spaces-scope.renter-card-page .renter-card-backtop > span {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols2", "Noto Sans Symbols", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-2px);
}

/* -------------------- Edit renter -------------------- */
.spaces-scope.edit-renter-page .edit-renter-card {
  border: 1px solid #d7e1ee !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08) !important;
}

.spaces-scope.edit-renter-page .edit-renter-card__head {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #fff !important;
}

.spaces-scope.edit-renter-page .edit-renter-card__body {
  background: #f8fbff !important;
}

.spaces-scope.edit-renter-page .edit-renter-title-wrap {
  min-width: 0;
  text-align: left;
  flex: 1 1 auto;
}

.spaces-scope.edit-renter-page .edit-renter-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
}

.spaces-scope.edit-renter-page .edit-renter-id-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.26rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.33);
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 6px;
}

.spaces-scope.edit-renter-page .edit-renter-back-btn {
  border-radius: 10px !important;
}

.spaces-scope.edit-renter-page .edit-renter-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spaces-scope.edit-renter-page .edit-renter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.28rem 0.82rem;
  border-radius: 999px;
  border: 1px solid #cfe0f3;
  background: #fff;
  color: #1f2a37;
  font-size: 0.85rem;
  font-weight: 700;
}

.spaces-scope.edit-renter-page .edit-renter-section {
  border: 1px solid #dbe6f3;
  border-radius: 12px;
  background: #fff;
  padding: 14px 14px 8px;
}

.spaces-scope.edit-renter-page .edit-renter-section__title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  color: #1f2a37;
}

.spaces-scope.edit-renter-page .form-control {
  border: 1px solid #cdd9e8 !important;
  border-radius: 10px !important;
  min-height: 40px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.74rem !important;
  line-height: 1.32 !important;
  font-size: 0.93rem;
}

.spaces-scope.edit-renter-page select.form-control {
  padding-right: 2rem !important;
}

.spaces-scope.edit-renter-page .form-label {
  margin-bottom: 0.4rem;
  font-weight: 700;
  color: #334155;
}

.spaces-scope.edit-renter-page .form-group {
  margin-bottom: 0.96rem !important;
}

.spaces-scope.edit-renter-page .form-control::placeholder {
  color: #94a3b8;
}

.spaces-scope.edit-renter-page .form-text {
  margin-top: 0.38rem;
  padding-left: 2px;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.spaces-scope.edit-renter-page .form-control:focus {
  border-color: #7ca1d9 !important;
  box-shadow: 0 0 0 0.16rem rgba(37, 99, 235, 0.13) !important;
}

.spaces-scope.edit-renter-page .edit-renter-summary {
  border: 1px dashed #c7d7eb;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
}

.spaces-scope.edit-renter-page .edit-renter-summary__title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1f2a37;
}

.spaces-scope.edit-renter-page .edit-renter-summary__list {
  padding-left: 18px;
  color: #42586f;
  display: grid;
  gap: 4px;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown {
  border: 1px solid #d7e3f1;
  border-radius: 10px;
  background: #f8fbff;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1f2a37;
  user-select: none;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__summary::-webkit-details-marker {
  display: none;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__summary::after {
  content: '▾';
  float: right;
  color: #64748b;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown[open]
  .edit-renter-visibility-dropdown__summary::after {
  content: '▴';
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__menu {
  border-top: 1px solid #dbe6f4;
  padding: 8px 10px;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #dbe6f4;
  font-size: 0.86rem;
  color: #334155;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__item input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}

.spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__empty {
  color: #64748b;
  font-size: 0.84rem;
  padding: 4px 2px;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments {
  border: 1px solid #dbe6f3;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments__title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #1f2a37;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments__list {
  display: grid;
  gap: 8px;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments__item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px 10px;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments__label {
  color: #1f2a37;
  font-size: 0.84rem;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments__text {
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.35;
  /* Длинные комментарии должны аккуратно переноситься внутри карточки.
     Это критично для mobile, где ширина контента ограничена. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments__meta {
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.32;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.spaces-scope.edit-renter-page .edit-renter-visible-comments__empty {
  color: #64748b;
  font-size: 0.84rem;
}

.spaces-scope.edit-renter-page .edit-renter-comment-editor {
  border-top: 1px dashed #dbe6f3;
  padding-top: 8px;
}

.spaces-scope.edit-renter-page .edit-renter-comment-editor__summary {
  cursor: pointer;
  color: #1d4ed8;
  font-size: 0.84rem;
  font-weight: 700;
  user-select: none;
}

.spaces-scope.edit-renter-page .edit-renter-comment-editor__body {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.spaces-scope.edit-renter-page .edit-renter-comment-editor__delete-form {
  margin: 0;
}

.spaces-scope.edit-renter-page .edit-renter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spaces-scope.edit-renter-page .edit-renter-delete-form {
  margin-top: 12px;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 992px) {
  .spaces-scope.renter-card-page .renter-kpi-grid {
    grid-template-columns: 1fr;
  }

  .spaces-scope.renter-card-page .renter-card-tab-tools {
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  .spaces-scope.renter-card-page {
    padding: 0.9rem !important;
  }

  /* Мобильный ритм шапок/кнопок повторяем как в карточке помещения,
     чтобы оба экрана ощущались одним модулем. */
  .spaces-scope.renter-card-page .card-header {
    padding: 0.58rem 0.62rem !important;
  }

  .spaces-scope.renter-card-page .card-body {
    padding: 0.62rem !important;
  }

  .spaces-scope.renter-card-page .renter-main-card__head {
    /* Компактный mobile-хедер в одну линию:
       слева возврат, по центру имя (с безопасным обрезанием),
       справа primary-действие редактирования. */
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    grid-template-areas: 'back title edit';
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 0.62rem 0.68rem !important;
  }

  .spaces-scope.renter-card-page .renter-main-card__head h5,
  .spaces-scope.renter-card-page .renter-side-card__head h5,
  .spaces-scope.renter-card-page .renter-tabs-card__head h5 {
    font-size: 0.94rem !important;
    line-height: 1.15 !important;
  }

  .spaces-scope.renter-card-page .renter-main-card__head h5 {
    grid-area: title;
    width: auto;
    margin: 0;
    text-align: left;
    font-size: 0.97rem !important;
    line-height: 1.18 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spaces-scope.renter-card-page .renter-main-card__head .renter-back-btn {
    grid-area: back;
    margin-top: 0;
    align-self: center;
    justify-self: start;
  }

  .spaces-scope.renter-card-page .renter-main-card__head .btn-warning {
    grid-area: edit;
    margin-left: 0;
    align-items: center;
    justify-content: center;
    justify-self: end;
  }

  .spaces-scope.renter-card-page .renter-main-card__head .btn {
    padding: 0 10px !important;
    font-size: 0.79rem !important;
    min-height: 38px;
    line-height: 1 !important;
  }

  .spaces-scope.renter-card-page .renter-main-card__head .renter-back-btn {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;
    border-radius: 12px !important;
    border-color: #d5e2f3 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
  }

  .spaces-scope.renter-card-page .renter-main-card__head .renter-back-btn .material-icons {
    font-size: 22px;
    transform: translateX(-1px);
  }

  .spaces-scope.renter-card-page .renter-main-card__head .btn-warning {
    min-height: 38px;
    width: 38px;
    min-width: 38px;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    font-weight: 800;
    letter-spacing: 0.01em;
    align-items: center;
    justify-content: center;
  }

  .spaces-scope.renter-card-page .renter-main-card__head .btn-warning span {
    display: none;
  }

  .spaces-scope.renter-card-page .renter-main-card__head .btn-warning .material-icons {
    font-size: 17px;
  }

  /* KPI-ряд оставляем в две колонки, как в space-card, чтобы первый экран
     не становился чрезмерно длинным на телефоне. */
  .spaces-scope.renter-card-page .renter-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .spaces-scope.renter-card-page .renter-status-strip {
    gap: 6px;
    margin-bottom: 0.6rem !important;
  }

  .spaces-scope.renter-card-page .renter-status-chip {
    min-height: 28px;
    padding: 2px 9px;
    font-size: 0.75rem;
  }

  .spaces-scope.renter-card-page .renter-kpi-card {
    padding: 0.42rem 0.52rem;
  }

  .spaces-scope.renter-card-page .renter-kpi-card__label {
    font-size: 0.72rem;
  }

  .spaces-scope.renter-card-page .renter-kpi-card__value {
    font-size: 0.92rem;
  }

  .spaces-scope.renter-card-page .renter-info-row {
    padding: 0.38rem 0.46rem !important;
    border-radius: 10px;
  }

  .spaces-scope.renter-card-page .sc-copy-chip {
    padding: 3px 9px;
    font-size: 0.7rem;
  }

  .spaces-scope.renter-card-page .renter-tabs-card__head {
    position: sticky;
    top: 8px;
    z-index: 12;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.25);
  }

  .spaces-scope.renter-card-page .renter-tabs-toolbar {
    flex-direction: column;
    gap: 8px;
  }

  .spaces-scope.renter-card-page .tab-mobile-hint {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 4px;
  }

  .spaces-scope.renter-card-page .tab-select-mobile-wrap {
    display: block !important;
  }

  .spaces-scope.renter-card-page .tab-select-mobile {
    display: block !important;
    width: 100%;
    margin-top: 2px;
    min-height: 46px;
    padding: 0 52px 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
    color: #1f2a37 !important;
    font-size: 0.95rem !important;
    font-weight: 700;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  }

  .spaces-scope.renter-card-page .tab-buttons-row {
    /* На mobile оставляем только select-переключатель вкладок. */
    display: none !important;
  }

  .spaces-scope.renter-card-page .tab-buttons-row .tab-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    min-width: max-content;
    min-height: 38px;
    margin-right: 0;
  }

  .spaces-scope.renter-card-page .tab-content {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .spaces-scope.renter-card-page .renter-card-tab-tools {
    flex-direction: column;
    gap: 10px;
  }

  .spaces-scope.renter-card-page .renter-card-tab-meta,
  .spaces-scope.renter-card-page .renter-card-tab-search-host {
    width: 100%;
    flex: 1 1 auto;
    max-width: none;
  }

  .spaces-scope.renter-card-page .renter-card-tab-meta {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .spaces-scope.renter-card-page .renter-card-tab-search {
    margin: 8px 0 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .spaces-scope.renter-card-page .renter-card-tab-search .form-control {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 0.95rem !important;
    padding: 0 14px !important;
  }

  /* Таблицы на мобильном повторяют механику space-card:
     горизонтальный touch-scroll без внутренней вертикальной "шахты". */
  .spaces-scope.renter-card-page .renter-table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .spaces-scope.renter-card-page .renter-table-wrap .renter-data-table {
    min-width: 760px !important;
    width: max(760px, 100%) !important;
  }

  .spaces-scope.renter-card-page .renter-table-wrap .renter-data-table thead th,
  .spaces-scope.renter-card-page .renter-table-wrap .renter-data-table tbody td,
  .spaces-scope.renter-card-page .renter-table-wrap .renter-data-table tfoot td {
    padding: 6px 7px !important;
    font-size: 0.86rem !important;
    white-space: nowrap;
  }

  .spaces-scope.renter-card-page .renter-empty-state {
    padding: 14px 15px;
  }

  .spaces-scope.renter-card-page .renter-card-backtop {
    width: 40px;
    height: 40px;
    left: 10px;
    bottom: 14px;
  }

  .spaces-scope.renter-card-page .renter-card-backtop > span {
    font-size: 20px;
  }

  .spaces-scope.edit-renter-page {
    padding: 0.9rem !important;
  }

  .spaces-scope.edit-renter-page .edit-renter-card__head {
    align-items: flex-start !important;
    gap: 10px;
  }

  .spaces-scope.edit-renter-page .edit-renter-title-wrap {
    order: 0;
    width: auto;
    text-align: left;
    flex: 1 1 auto;
  }

  .spaces-scope.edit-renter-page .edit-renter-subtitle {
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 34ch;
  }

  .spaces-scope.edit-renter-page .form-control {
    min-height: 38px;
    font-size: 0.9rem;
    padding: 0.45rem 0.68rem !important;
  }

  .spaces-scope.edit-renter-page .edit-renter-visibility-dropdown__list {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .spaces-scope.edit-renter-page .edit-renter-id-chip {
    margin-top: 4px;
  }
}