/**
 * Стили групп сущностей и свойств
 * Форма как таблица (грид): одна рамка вокруг, строки разделены границами
 */

/* === Строки формы === */
form .table-item {
  padding: 0;
}

/* Строка формы — без рамки, только фон */
.table-item {
  background-color: var(--cms-card-bg, #ffffff);
  border: none !important;
}

.table-item:last-child {
  margin-bottom: 0 !important;
}

.table-item:hover {
  background-color: var(--cms-row-hover, rgba(10, 88, 202, 0.04));
}

.table-item .k-grid,
.table-item .k-grid .k-grid-content,
.table-item .k-grid .k-grid-content table {
  background-color: var(--cms-card-bg, #ffffff) !important;
}

/* Чередование фона строк (зебра) */
.table-item.k-alt {
  background-color: var(--cms-table-striped-bg, #fafbfc) !important;
}

.table-item.k-alt:hover {
  background-color: var(--cms-row-hover, rgba(10, 88, 202, 0.06)) !important;
}

/* Внутренний ряд — без обводок, выделение цветом */
.table-item .row {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 7px 6px !important;
  background-color: transparent !important;
}

.row.table-item {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Выравнивание label по центру */
.table-item .row .col-form-label {
  display: flex !important;
  align-items: center !important;
}

/* Выравнивание значения по вертикали */
.table-item .row .flex-center {
  display: flex !important;
  align-items: center !important;
}

/* Выравнивание label по центру */
.table-item .row .col-form-label {
  display: flex !important;
  align-items: center !important;
}

/* Выравнивание значения по вертикали */
.table-item .row .flex-center {
  display: flex !important;
  align-items: center !important;
}

/* Мультиколоночный режим: колонки распределяются поровну */
.table-item:not(.cols-1) > .col-sm {
  flex: 1 !important;
  max-width: none !important;
}

.table-item.cols-1 > .col-sm-6 {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

/* Контент таблицы — ОДНА рамка вокруг всего */
.table-content {
  width: 100%;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  flex: 1;
  background-color: var(--cms-card-bg, #ffffff);
  padding: 0;
  border: 1px solid var(--cms-border-color, #dde0e5);
  border-radius: 4px;
}

/* === БЛОК ВКЛАДОК === */

/* Отступ между основным блоком и блоком вкладок */
.entity-tab-buttons {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  gap: 5px;
}

/* Кнопка-вкладка */
.entity-tab-btn {
  padding: 6px 16px;
  border: 1px solid var(--cms-border-color, #dee2e6);
  border-radius: 6px;
  background-color: #f5f6f8;
  color: var(--cms-text-bold, #515151);
  cursor: pointer;
  font-size: var(--cms-font-size-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.entity-tab-btn:hover {
  background-color: #e8f0fe !important;
  color: #0a58ca !important;
}

.entity-tab-btn.active {
  background-color: var(--cms-row-hover, rgba(10, 88, 202, 0.08));
  border-color: var(--cms-border-color, #dee2e6);
  color: var(--cms-text-bold, #515151);
}

.entity-tab-btn.active:hover {
  background-color: var(--cms-row-hover, rgba(10, 88, 202, 0.08));
  border-color: var(--cms-border-color, #dee2e6);
  color: var(--cms-text-bold, #515151);
}

.entity-tab-btn:hover {
  background-color: var(--cms-hover-bg, #f5f6f8);
}

/* Панель контента вкладки */
.entity-tab-panel {
  display: none;
}

.entity-tab-panel.active {
  display: block;
}

/* Заголовок части сущности */
.entity-part-header {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--cms-border-color, #dde0e5);
  border-left: none;
  font-size: var(--cms-font-size-sm);
  font-weight: var(--cms-font-weight-semibold);
  padding: 8px 12px;
  color: var(--cms-text-bold, #515151);
  background-color: var(--cms-table-header-bg, #f5f6f8);
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}

/* Обёртки деталей и редактирования */
.details-wrapper,
.edit-wrapper,
.create-wrapper {
  background-color: var(--cms-card-bg, #ffffff);
  border: 1px solid var(--cms-card-border, #e8ecf0);
  border-radius: 6px;
  box-shadow: var(--cms-card-shadow);
  overflow: hidden;
}

/* Поля без группы — всегда видны сверху */
.details-wrapper .table-content {
  flex-shrink: 0;
  overflow: visible !important;
  flex: none !important;
}

/* Контейнер табов занимает всё оставшееся место */
.details-wrapper > .row.table-item {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.details-wrapper > .row.table-item > .col-sm-12 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important;
}

/* Табстрип — flex-контейнер: заголовки фиксированы, контент скроллится */
.details-wrapper .entity-tabs {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.details-wrapper .entity-tabs .k-tabstrip-content.k-active {
  overflow-y: auto !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* Контейнер вкладок - flex: занимает оставшееся место, скролл внутри */
.entity-tabs-panel {
  margin-top: 10px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.entity-tabs-panel .entity-tabs.k-tabstrip {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Заголовки табов — фиксированы, не сжимаются */
.details-wrapper .entity-tabs .k-tabstrip-items-wrapper,
.entity-tabs-panel .entity-tabs .k-tabstrip-items-wrapper {
  flex-shrink: 0 !important;
  background: var(--cms-card-bg, #ffffff);
  border-bottom: none;
  padding-top: 0;
  margin-bottom: 10px;
}

/* Вкладки как кнопки с отступом 5px */
.entity-tabs-panel .k-tabstrip-items .k-item {
  border: 1px solid var(--cms-border-color, #dee2e6) !important;
  border-radius: 6px !important;
  margin-right: 5px;
  background-color: var(--cms-card-bg, #ffffff);
}

.entity-tabs-panel .k-tabstrip-items .k-item.k-active {
  background-color: var(--cms-primary, #0a58ca);
  border-color: var(--cms-primary, #0a58ca) !important;
  color: #ffffff;
}

.entity-tabs-panel .k-tabstrip-items .k-item.k-active .k-link {
  color: #ffffff;
}

/* Вкладки Groups — визуальное соответствие .entity-tab-btn */
.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item {
  margin: 0 5px 0 0 !important;
  padding: 0 !important;
  float: none !important;
  background-color: #f5f6f8 !important;
  color: var(--cms-text-bold, #515151) !important;
  font-size: var(--cms-font-size-sm) !important;
  line-height: normal !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item .k-link {
  padding: 8px 12px !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  color: var(--cms-text-bold, #515151) !important;
  font-size: inherit !important;
  font-weight: bold !important;
  line-height: normal !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item:hover {
  background-color: #e8f0fe !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item:hover .k-link {
  color: #0a58ca !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item.k-active {
  background-color: rgba(10, 88, 202, 0.08) !important;
  border-color: var(--cms-border-color, #dee2e6) !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item.k-active .k-link {
  color: var(--cms-text-bold, #515151) !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item.k-active:hover {
  background-color: rgba(10, 88, 202, 0.08) !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-items .k-item.k-active:hover .k-link {
  color: var(--cms-text-bold, #515151) !important;
}

/* Сброс обёрток контента Kendo TabStrip */
.entity-tabs-panel .entity-tabs .k-tabstrip-content {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-content.k-active {
  padding: 0 !important;
  outline: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-content .details-wrapper,
.entity-tabs-panel .entity-tabs .k-tabstrip-content .edit-wrapper {
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Выравнивание левого края k-grid внутри вкладок */

.entity-tabs-panel .entity-tabs .k-tabstrip-content .details-wrapper,
.entity-tabs-panel .entity-tabs .k-tabstrip-content .edit-wrapper {
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--cms-card-bg, #ffffff) !important;
  border: 1px solid var(--cms-card-border, #e8ecf0) !important;
  border-radius: 6px !important;
  box-shadow: var(--cms-card-shadow) !important;
  overflow: visible !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-content .table-content {
  padding: 0 !important;
  border: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-content .table-content .k-grid {
  margin: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-content .k-grid .k-grid-content,
.entity-tabs-panel .entity-tabs .k-tabstrip-content .k-grid .k-grid-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.entity-tabs-panel .entity-tabs .k-tabstrip-content .flex-center:has(.k-grid) {
  padding: 0 !important;
}

.table-item .row .flex-center:has(> .k-grid) {
  padding: 0 !important;
}

/* Убираем двойные границы у вложенных k-grid */
.details-wrapper > .k-grid,
.edit-wrapper > .k-grid,
.create-wrapper > .k-grid {
  border: none;
}

/* Лейблы полей — без отдельных рамок */
.control-label,
.col-form-label,
.editor-label {
  font-weight: var(--cms-font-weight-semibold);
  font-size: var(--cms-font-size-sm);
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: var(--cms-text-bold, #515151);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Исправление для шаблонов редактора внутри flex-center */
.table-item .flex-center > .editor-label {
  display: none;
}

.table-item .flex-center > .editor-field {
  width: 100%;
}

/* Адаптивные настройки */
@media (max-width: 768px) {
  .entity-part-header {
    padding-left: var(--spacing-sm, 0.5rem);
    padding-right: var(--spacing-sm, 0.5rem);
    margin-left: 0;
    margin-right: 0;
  }

  .table-item {
    padding: 0;
  }
}

.k-grid-pager {
  padding-block: 0.25rem !important;
}

.k-pager-numbers-wrap .k-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  height: 25px !important;
  width: 25px !important;
  min-width: 25px !important;
  border: none !important;
  background: none !important;
  color: var(--cms-text-primary, #1f2326) !important;
  border-radius: 4px !important;
  font-size: var(--cms-font-size-sm) !important;
  box-shadow: none !important;
}

.k-pager-numbers-wrap .k-button:hover:not(.k-selected) {
  background-color: var(--cms-row-hover, rgba(10, 88, 202, 0.12)) !important;
  color: var(--cms-link-color, #0a58ca) !important;
}

.k-pager-numbers-wrap .k-button.k-selected {
  background-color: var(--cms-table-header-bg, #f5f6f8) !important;
  color: var(--cms-text-bold, #515151) !important;
  font-weight: var(--cms-font-weight-bold) !important;
}

.k-pager-numbers-wrap .k-button.k-selected:hover {
  background-color: var(--cms-table-header-bg, #f5f6f8) !important;
  color: var(--cms-text-bold, #515151) !important;
}

.k-pager-sizes .k-picker {
  border: 1px solid var(--cms-filter-border-color, #dee2e6) !important;
  border-radius: 4px !important;
  font-size: var(--cms-font-size-sm) !important;
  font-family: var(--font-main) !important;
  min-width: 65px !important;
  width: auto !important;
  height: 25px !important;
  background-color: var(--cms-footer-bg, #f8f9fa) !important;
}

.k-pager-sizes .k-picker .k-input-inner {
  font-size: var(--cms-font-size-sm) !important;
  padding-block: 0 !important;
  height: 25px !important;
  line-height: 25px !important;
  background-color: transparent !important;
}

.k-pager-sizes .k-picker .k-input-solid,
.k-pager-sizes .k-picker .k-input-md,
.k-pager-sizes .k-picker .k-picker-md {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  height: 25px !important;
}

.k-pager-sizes .k-picker .k-input-values {
  gap: 0 !important;
  background-color: transparent !important;
  border: none !important;
  height: 25px !important;
}

.k-pager-sizes .k-picker .k-input-separator {
  display: none !important;
}

.k-pager-sizes .k-picker .k-input-values .k-button,
.k-pager-sizes .k-picker .k-input-button {
  min-width: 22px !important;
  padding: 0 4px !important;
  height: 25px !important;
  border: none !important;
  border-color: transparent !important;
  border-left: none !important;
  outline: none !important;
  background-color: transparent !important;
  background: none !important;
  color: var(--cms-text-primary, #1f2326) !important;
  box-shadow: none !important;
}

.k-pager-sizes .k-picker .k-input-values .k-button:hover,
.k-pager-sizes .k-picker .k-input-button:hover {
  background-color: var(--cms-row-hover, rgba(10, 88, 202, 0.12)) !important;
  color: var(--cms-link-color, #0a58ca) !important;
}

.k-pager-nav.k-disabled,
.k-pager-nav[disabled],
.k-pager-nav.k-state-disabled,
.k-pager-numbers-wrap .k-button.k-disabled {
  color: var(--cms-text-muted, #6c757d) !important;
  opacity: 0.5;
}

.k-pager-info {
  font-size: var(--cms-font-size-sm) !important;
  color: var(--cms-text-muted, #6c757d) !important;
}

/* === Flex-цепочка для страниц создания/редактирования сущностей === */

/* Форма на страницах создания/редактирования должна быть flex-колонкой,
   чтобы сохранить flex-цепочку от .container-fluid до .entity-tabs-panel */
.entity-edit-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin-block-end: 0;
}

/* Убираем верхний padding у floating label внутри property-таблиц
   — без этого контейнер получает лишнюю высоту и растягивает форму */
.table-item .k-floating-label-container {
  padding-top: 0 !important;
}