/* Стили для таблиц с прокруткой */
.table-container {
  flex-grow: 1;
  max-height: 95%;
  height: calc(100% - 1px);
  overflow-y: auto;
  border: 1px solid var(--border-color);
}

/* Стили для контейнера таблицы */
.table-scroll {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  position: relative;
}

.table-wrapper {
  width: 100%;
}

/* Стили для дополнительного скролла */
.table-scrollbar {
  width: 15px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 1px;
  position: relative;
  cursor: default;
  background-color: var(--bg-secondary);
}

.table-scrollbar-thumb {
  width: 9px;
  background-color: var(--btn-primary);
  position: absolute;
  top: 0;
  height: 0;
  border-radius: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.table-scrollbar, .table-scrollbar-thumb {
  user-select: none;
}

/* Стили для таблицы */
table {
  width: 100%;
  border-collapse: collapse;
}

table:focus {
  outline: none;
}

tr {
  height: min-content;
}

/* Стили для ячеек таблицы (заголовки и данные) */
th, td {
  border: 1px solid var(--border-color);
  padding: 10px;
  text-align: left;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Стили для заголовков таблицы */
th {
  background-color: var(--header-bg);
  color: var(--header-text);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Стили для четных строк таблицы */
tr:nth-child(even) {
  background-color: var(--bg-primary);
}

/* ========== СТИЛИ ДЛЯ ВЫДЕЛЕННЫХ СТРОК ========== */

/* Стили для родителя выделенной строки */
tr.parented {
  background-color: var(--table-tr-parent-bg);
  color: var(--btn-info-text);
}

tr.parented td {
  background-color: var(--table-tr-parent-bg);
  color: var(--btn-info-text);
}

/* Стили для выделенной строки */
tr.selected {
  background-color: var(--table-tr-select-bg);
  color: var(--btn-info-text);
}

tr.selected td {
  background-color: var(--table-tr-select-bg);
  color: var(--btn-info-text);
}

/* Стили для потомков выделенной строки */
tr.descened {
  background-color: var(--table-tr-descen-bg);
  color: var(--btn-info-text);
}

tr.descened td {
  background-color: var(--table-tr-descen-bg);
  color: var(--btn-info-text);
}

/* ========== СТИЛИ ДЛЯ НАВЕДЕНИЯ ========== */

/* Базовые стили для наведения (для обычных строк без выделения) */
tr:hover {
  background-color: var(--btn-secondary);
}

tr:hover td {
  background-color: var(--btn-secondary);
  color: var(--btn-secondary-text);
}

/* Стили для наведения на родительскую строку (более светлый вариант) */
tr.parented:hover {
  background-color: color-mix(in srgb, var(--table-tr-parent-bg) 80%, white);
}

tr.parented:hover td {
  background-color: color-mix(in srgb, var(--table-tr-parent-bg) 80%, white);
  color: var(--btn-info-text);
}

/* Стили для наведения на выделенную строку (более светлый вариант) */
tr.selected:hover {
  background-color: color-mix(in srgb, var(--table-tr-select-bg) 80%, white);
}

tr.selected:hover td {
  background-color: color-mix(in srgb, var(--table-tr-select-bg) 80%, white);
  color: var(--btn-info-text);
}

/* Стили для наведения на строку-потомка (более светлый вариант) */
tr.descened:hover {
  background-color: color-mix(in srgb, var(--table-tr-descen-bg) 80%, white);
}

tr.descened:hover td {
  background-color: color-mix(in srgb, var(--table-tr-descen-bg) 80%, white);
  color: var(--btn-info-text);
}

/* ========== АЛЬТЕРНАТИВНЫЙ ВАРИАНТ (если color-mix не работает) ========== */
/* Раскомментируй этот блок и закомментируй блоки с color-mix выше, если нужно */

/*
tr.parented:hover,
tr.parented:hover td {
  background-color: var(--table-tr-parent-bg);
  filter: brightness(1.2);
}

tr.selected:hover,
tr.selected:hover td {
  background-color: var(--table-tr-select-bg);
  filter: brightness(1.2);
}

tr.descened:hover,
tr.descened:hover td {
  background-color: var(--table-tr-descen-bg);
  filter: brightness(1.2);
}
*/

/* ========== ОСТАЛЬНЫЕ СТИЛИ ========== */

.table-container-1 {
  flex-grow: 1;
  max-height: 95%;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}

/* Стили для контейнера таблицы */
.table-scroll-1 {
  flex-grow: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  max-height: 100%;
  max-width: 100%;
}