/*portal.css*/
:root {
    /* Светлая тема (по умолчанию) */
    --main-bg: #e4e6e9;
    --main-text: #212529;
    --card-bg: #eee;
    --section-bg: #f5f7fa;
    --header-bg: #22304A;
    --footer-bg: #1A202C;
    --input-bg: #dee2e6; /* Чуть темнее фона */
    --input-text: #212529;
    --btn-primary-bg: #22304A;
    --btn-primary-text: #fff;
    --btn-secondary-bg: #e5e8ef;
    --btn-secondary-text: #222;
    --btn-outline-bg: #fff;
    --btn-outline-text: #22304A;
    --btn-outline-border: #22304A;
    --link: #265fa1;
    --link-hover: #4a71fa;
    --border: #dadde1;
    --section-title-bg: #FAFBFC;
    --section-title-text: #222b3c;
    --company-row-border: #e0e4ea;
    --container-max-width: 100%;
    --container-padding-x: 0px;
    --modal-header-bg: #f5f7fa;
    --tab-pane-bg: #fff;
    --nav-tabs-bg: #fff;
    --card-padding: 1.5rem;
    --box-shadow: 2px 2px 10px 0 rgba(0,0,0,.5);
    --bs-table-color-type: #cccccc;
    --bs-table-accent-bg: #dcdcdc;
    --bs-table-striped-color: #000;
    --bs-table-active-color: #c7c7c7;
    --bs-table-hover-color: #000000;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.75);
    --bs-table-bg: #e8e8e8;
    --bs-table-border-color: #212529;
    --bs-table-color: #000;
    --fa-edit-btn-color: rgba(255, 0, 0, 0.75);
    --bs-badge-color: #000;
    --bs-code-color: #0028ff;
}

[data-theme="dark"] {
    --main-bg: #161B22;
    --main-text: #F1F3F6;
    --card-bg: #23272f;
    --section-bg: #20232A;
    --header-bg: #14181f;
    --footer-bg: #10131a;
    --input-bg: #414857; /* Чуть светлее чем card-bg */
    --input-text: #F1F3F6;
    --btn-primary-bg: #252b35;
    --btn-primary-text: #F1F3F6;
    --btn-secondary-bg: #282d35;
    --btn-secondary-text: #F1F3F6;
    --btn-outline-bg: #23272f;
    --btn-outline-text: #b5c9e5;
    --btn-outline-border: #394867;
    --link: #53A5F7;
    --link-hover: #4a71fa;
    --border: #343a40;
    --section-title-bg: #252b35;
    --section-title-text: #dbe6fa;
    --company-row-border: #313743;
    --container-max-width: 1920px;
    --container-padding-x: 0px;
    --modal-header-bg: #14181f;
    --tab-pane-bg: #161B22;
    --nav-tabs-bg: #161B22;
    --box-shadow: 2px 2px 10px 0 rgba(0,0,0,.5);
    --bs-table-color-type: #fff;
    --bs-table-striped-color: #fff;
    --bs-table-accent-bg: #282b36;
    --bs-table-active-color: #c7c7c7;
    --bs-table-hover-color: rgba(255, 255, 0, 0.5);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.35);
    --bs-table-bg: #23272f !important;
    --bs-table-border-color: #212529;
    --bs-table-color: #cfcfcf;
    --fa-edit-btn-color: rgba(255, 255, 0, 0.75);
    --bs-badge-color: #fff;
    --bs-code-color: rgba(255, 255, 0, 0.5);
}

body, html {
    background: var(--main-bg) !important;
    color: var(--main-text) !important;
    font-family: 'Segoe UI', 'Arial', sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 94vw !important;
    width: 100% !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
}

header, .navbar {
    background: var(--header-bg) !important;
    color: var(--main-text) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(34, 48, 74, 0.04);
}
#portal-footer, footer {
    background: var(--footer-bg) !important;
    color: var(--main-text) !important;
    border-radius: 0 !important;
}

.alert {
    background: transparent !important;
    color: var(--fa-edit-btn-color) !important;
    animation: blink 1.1s infinite;
    /*border-radius: 0 !important;*/
    border-color: transparent !important;
    /*box-shadow: var(--box-shadow) !important;*/
}

.card, .card-body,
.section, .modal-content, .dropdown-menu {
    background: var(--card-bg) !important;
    color: var(--main-text) !important;
    border-radius: 0 !important;
    border-color: var(--border) !important;
    box-shadow: var(--box-shadow) !important;
}

.card-header {
    background: var(--input-bg) !important;
    color: var(--main-text) !important;
    border-radius: 0 !important;
    border-color: var(--border) !important;
    box-shadow: var(--box-shadow) !important;
}

.card-footer {
    background: var(--input-bg) !important;
    color: var(--main-text) !important;
    border-radius: 0 !important;
    border-color: var(--border) !important;
    box-shadow: var(--box-shadow) !important;
}

/* Универсальный контейнер для центровки и отступов */
.site-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
}

/* Для всех страниц: основной контент в одном стиле и отступы */
.main-content {
    padding: 2rem 0 3rem 0;
    min-height: 60vh;
}

/* Для profile, регистрации и логина — применяем site-container */
.profile-wrapper,
.registration-wrapper,
.login-wrapper {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-x);
    padding-right: var(--container-padding-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 70vh;
}

.form-control, .form-select, .input-group, input, textarea, select {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus {
    border-color: var(--link-hover) !important;
    box-shadow: none !important;
}
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--btn-primary-bg) !important;
}

/* Вкладки */
.nav-tabs .nav-link {
    background: var(--card-bg) !important;
    color: var(--main-text) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
}
.nav-tabs .nav-link.active {
    background: var(--input-bg) !important;
    color: var(--main-text) !important;
    border-color: var(--border) var(--border) var(--input-bg) var(--border) !important;
}

/* Кнопки */
.btn, .btn-primary, .btn btn-outline-secondary, .btn-info {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background 0.2s, color 0.2s;
}
.btn-secondary {
    background: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border: none !important;
    border-radius: 0 !important;
}
.btn-outline-primary, .btn-outline-light, .btn-outline-secondary {
    background: var(--btn-outline-bg) !important;
    color: var(--btn-outline-text) !important;
    border: 1.5px solid var(--btn-outline-border) !important;
    border-radius: 0 !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-outline-primary:hover, .btn-outline-light:hover, .btn-outline-secondary:hover {
    background: var(--btn-outline-border) !important;
    color: #fff !important;
}

a, .nav-link {
    color: var(--link) !important;
    border-radius: 0 !important;
}
a:hover, .nav-link.active, .nav-link:focus {
    color: var(--link-hover) !important;
}

.navbar-brand, .navbar-nav .nav-link, .navbar-nav .nav-link.active {
    color: var(--btn-primary-text) !important;
}

.list-group-item {
    background: var(--card-bg) !important;
    color: var(--main-text) !important;
    border: 0px solid var(--border) !important;
    border-radius: 0 !important;
}

.list-group-item-action.active, .list-group-item.active {
    background: var(--footer-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: var(--btn-primary-bg) !important;
    border-radius: 0 !important;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #23272f; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #161b22; }
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #dadde1; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f5f7fa; }
[data-theme="light"] ::-webkit-scrollbar { width: 8px; }

.blink {
    animation: blink 1.1s infinite;
}
.status-blink svg circle {
    animation: blink 1.2s linear infinite;
}
@keyframes blink {
    50% { opacity: 0.3; }
}

*, *::before, *::after {
    border-radius: 0 !important;
}

/* Стиль для profile-card в users/profile.html */
.profile-card {
    background: var(--card-bg);
    border-radius: 0px !important;
    box-shadow: var(--box-shadow);
    padding: var(--card-padding);
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 32px;
}
.profile-avatar-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-width: 170px;
}
.profile-avatar-img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px !important;
    border: 2px solid var(--border);
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.profile-info-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    width: 100%;
    min-width: 0;
}
.profile-main-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 18px;
    margin-top: 0;
    color: var(--main-text);
    word-break: break-word;
}
.profile-field-label {
    font-weight: 600;
    color: var(--main-text);
}
.profile-field-value {
    color: var(--main-text);
    font-weight: 400;
}
.profile-btn-outline {
    background: var(--btn-outline-bg);
    color: var(--btn-outline-text) !important;
    border: 1.5px solid var(--btn-outline-border);
    border-radius: 0 !important;
    padding: 4px 18px;
    font-size: 1rem;
    margin-left: 14px;
    margin-top: 0;
    margin-bottom: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    display: inline-block;
    min-width: 150px;
    text-align: center;
}
.profile-btn-outline:hover, .profile-btn-outline:focus {
    background: var(--btn-outline-border);
    color: #fff !important;
    border-color: var(--btn-outline-border);
    text-decoration: none;
}

/* Стилизация .nav-tabs, .tab-content для темной и светлой темы */
.nav-tabs, .tab-content {
    background: var(--card-bg) !important;
    border-radius: 0 !important;
    border-color: var(--border) !important;
}
.nav-tabs .nav-link {
    background: var(--card-bg) !important;
    color: var(--main-text) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
}
.nav-tabs .nav-link.active {
    background: var(--nav-tabs-bg) !important;
    color: var(--main-text) !important;
    border-color: var(--border) var(--border) var(--input-bg) var(--border) !important;
}

.tab-pane {
    background: var(--tab-pane-bg) !important;
    color: var(--main-text) !important;
    border-radius: 0 !important;
    padding: 24px 18px 18px 18px;
}

/* Стили для disabled input */
input:disabled, .form-control:disabled {
    background: #e9ecef !important;
    color: #6c757d !important;
    opacity: 1 !important;
}

.modal-header {
    background: var(--modal-header-bg) !important;
    color: var(--main-text) !important;
    border-bottom: 1px solid var(--border) !important;
}

.modal-body {
    background: var(--tab-pane-bg) !important;
    color: var(--main-text) !important;
}

.nav-tabs, .tab-content {
    background: var(--tab-pane-bg) !important;
    border-radius: 0 !important;
    border-color: var(--border) !important;
}

.iti__country-list {
    background-color: var(--input-bg) !important;
    color: var(--main-text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
}

/* ОШИБКА БЫЛА ЗДЕСЬ:
.card, .card-header, .table-responsive {
  overflow: visible !important;
}
*/

/* ======= ИСПРАВЛЕНО: table-responsive теперь с overflow-x: auto ======= */
.card, .card-header {
  overflow: visible !important;
}
/*.table-responsive {*/
/*  overflow-x: auto !important;*/
/*  overflow-y: visible !important;*/
/*}*/

.table-responsive {
  overflow: visible !important; /* меню не будет обрезаться таблицей */
}

/* ======= END FIX ======= */

.table {
    max-width: 100% !important;
    width: 100% !important;
    /* padding-left: 1vw !important;
    padding-right: 1vw !important; */ /* --- УБРАНО: padding раздувал таблицу --- */
    /*--bs-table-bg: var(--card-bg);*/
    /*--bs-table-border-color: var(--input-bg);*/
    /*--bs-table-color: var(--main-text);*/
}

.text-muted {
    color: var(--main-text)!important;
}

/*.table {*/
/*    --bs-table-color-type: var(--bs-table-color-type) !important;*/
/*    --bs-table-striped-color: var(--bs-table-striped-color) !important;*/
/*    --bs-table-active-color: var(--bs-table-hover-color) !important;*/
/*    --bs-table-hover-color: var(--bs-table-hover-color) !important;*/
/*    --bs-table-accent-bg: var(--bs-table-accent-bg) !important;*/
/*    --bs-table-hover-bg: var(--bs-table-hover-bg) !important;*/
/*}*/

input#ad-user-search {
    background: var(--card-bg) !important;
    color: var(--main-text) !important;
}

input#ad-user-search::placeholder {
    color: var(--input-bg) !important;
    opacity: 1 !important;
}

th.sortable::after {
  content: " ▼";
  color: #333;
  margin-left: 4px;
}
th.sorted-asc::after {
  content: " ▲";
  color: #2962ff;
}
th.sorted-desc::after {
  content: " ▼";
  color: #2962ff;
}

/* --- Фильтры: dropdown меню --- */
.filter-dropdown {
  position: relative;
}

/* Динамическая ширина + не вываливаться за экран */
.filter-dropdown .dropdown-menu {
  width: max-content !important;
  min-width: 160px !important;
  max-width: 90vw !important;
  box-sizing: border-box;
  left: 0 !important;
  right: auto !important;
  max-height: calc(32px * 10 + 16px);
  overflow-y: auto;
  z-index: 3001 !important;
  position: absolute !important;
  /* --- Цвета по теме --- */
  background-color: var(--filter-dropdown-bg, #222) !important;
  box-shadow: 0 10px 28px 0 rgba(0,0,0,0.45), 0 2px 4px 0 rgba(0,0,0,0.14);
}

/* --- Фикс для лейблов и чекбоксов --- */
.filter-dropdown label {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  font-weight: 200;
  margin-bottom: 4px;
  white-space: normal;
  word-break: break-word;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 5px;
  cursor: pointer;
  /* --- Цвет текста по теме --- */
  color: var(--filter-dropdown-text, #fff);
  transition: background 0.13s, color 0.13s;
}

/* --- ПОДСВЕТКА ПУНКТА ПОД МЫШКОЙ --- */
.filter-dropdown label:hover,
.filter-dropdown label:focus-within {
  background: var(--filter-dropdown-item-hover-bg, #2962ff);
  color: var(--filter-dropdown-item-hover-text, #fff);
}

/* --- Чекбоксы --- */
.filter-dropdown input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--filter-dropdown-bg, #222);
  border: 2px solid #2962ff;
  border-radius: 3px;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  display: inline-block;
  transition: border-color 0.15s, background-color 0.15s;
  flex-shrink: 0;
}
.filter-dropdown input[type="checkbox"]:checked {
  background-color: #2962ff;
  border-color: #2962ff;
}
.filter-dropdown input[type="checkbox"]:checked:after {
  content: '';
  display: block;
  position: absolute;
  left: 4px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-dropdown input[type="checkbox"]:hover {
  border-color: #82b1ff;
}

.filter-dropdown .dropdown-toggle {
  z-index: 3010;
  position: relative;
}

/* --- Переменные по темам --- */
:root {
  --filter-dropdown-bg: #fff;
  --filter-dropdown-text: #222b3c;
  --filter-dropdown-item-hover-bg: #eaf6ff;
  --filter-dropdown-item-hover-text: #22304A;
}

[data-theme="dark"] {
  --filter-dropdown-bg: #23272f;
  --filter-dropdown-text: #dee2e6;
  --filter-dropdown-item-hover-bg: #2962ff;
  --filter-dropdown-item-hover-text: #fff;
}

/* --- КОНЕЦ FIX --- */

#sg-section-mail-domains .form-check {
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    margin-bottom: 0.5rem;
}
#sg-section-mail-domains .form-check-input {
    margin-left: 0 !important;
    margin-right: 7px !important;
    accent-color: #2962ff;
    width: 1.3em;
    height: 1.3em;
}

#sg-section-mail-domains .form-check-label {
    padding-left: 7px !important;
}

#sg-section-mail-notify .form-check {
    display: flex;
    align-items: center;
    padding-left: 0 !important;
    margin-bottom: 0.5rem;
}
#sg-section-mail-notify .form-check-input {
    margin-left: 0 !important;
    margin-right: 7px !important;
    accent-color: #2962ff;
    width: 1.3em;
    height: 1.3em;
}

#sg-section-mail-notify .form-check-label {
    padding-left: 7px !important;
}

/* ======= ДОБАВЛЕНО: АДАПТИВНОЕ СКРЫТИЕ СТОЛБЦОВ В ТАБЛИЦЕ ПОЛЬЗОВАТЕЛЕЙ ======= */
/*
Порядок скрытия:
1. .hide-on-xs        (ИИН)
2. .hide-on-xs-l      (Компьютер)
3. .hide-on-xs-m      (Город)
4. .hide-on-xs-s      (Подразделение)
5. .hide-on-xs-md-lg  (Имя и Фамилия)
6. .hide-on-xs-v      (Внутренний)
*/
/* Сначала показываем всё */
.hide-on-xs,
.hide-on-xs-l,
.hide-on-xs-m,
.hide-on-xs-s,
.hide-on-xs-md-lg,
.hide-on-xs-v {
    display: table-cell !important;
}

/* Ширина < 1600px: скрыть ИИН */
@media (max-width: 1599.98px) {
    .hide-on-xs {
        display: none !important;
    }
}
/* Ширина < 1350px: скрыть Компьютер */
@media (max-width: 1349.98px) {
    .hide-on-xs-l {
        display: none !important;
    }
}
/* Ширина < 1150px: скрыть Город */
@media (max-width: 1149.98px) {
    .hide-on-xs-m {
        display: none !important;
    }
}
/* Ширина < 950px: скрыть Подразделение */
@media (max-width: 949.98px) {
    .hide-on-xs-s {
        display: none !important;
    }
}
/* Ширина < 700px: скрыть Имя и Фамилия */
@media (max-width: 699.98px) {
    .hide-on-xs-md-lg {
        display: none !important;
    }
}
/* Ширина < 600px: скрыть Внутренний */
@media (max-width: 599.98px) {
    .hide-on-xs-v {
        display: none !important;
    }
}
/* ======= /АДАПТИВНОЕ СКРЫТИЕ СТОЛБЦОВ ======= */

.dropdown-item {
    color: var(--input-text) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--footer-bg) !important;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: var(--bs-table-hover-color) !important;
    --bs-table-bg-state: var(--bs-table-hover-bg) !important;
}

.table-users-list {
    max-width: 100% !important;
    width: 100% !important;
    font-weight: 200;
    font-size: 0.9em;
    /*padding: 12px 10px 10px 10px;*/
    /*border-bottom: 1px solid var(--border, #dadde1);*/
}

/* Пример базовых цветов для таблицы на переменных (раскомментируй, если нужно применять через custom properties) */
.table-users-list {
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color) !important;
    border-color: var(--bs-table-border-color) !important;
}

/* Стиль для полосатых (striped) строк */
.table-users-list tbody tr:nth-child(odd) {
    background-color: var(--bs-table-accent-bg) !important;
    color: var(--bs-table-striped-color) !important;
}

/* Стиль для выделенной строки (active) */
.table-users-list tbody tr.active,
.table-users-list tbody tr.selected {
    background-color: var(--bs-table-active-color) !important;
}

/* Стиль для hover */
.table-users-list tbody tr:hover {
    background-color: var(--bs-table-hover-bg) !important;
    color: var(--bs-table-hover-color) !important;
}

/* Пример для границ */
.table-users-list, .table-users-list th, .table-users-list td {
    border-color: var(--bs-table-border-color) !important;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
}

/* Responsive (если нужно) */
.table-users-list-responsive {
  overflow: visible !important;
}

/* ===== СТИЛЬ ДЛЯ ШАПКИ ТАБЛИЦЫ .table-users-list ===== */

.table-users-list thead tr {
    background: var(--section-title-bg);
}

.table-users-list thead th {
    color: var(--main-text);
    font-weight: 500 !important;
    font-size: 0.9em !important;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--section-title-bg);
    /* Если нужна "липкая" шапка: */
    position: sticky;
    top: 0;
    z-index: 2;
}

[data-theme="dark"] .table-users-list thead tr {
    background: var(--section-title-bg);
}
[data-theme="dark"] .table-users-list thead th {
    color: var(--main-text);
    background: var(--section-title-bg);
    border-bottom: 2px solid var(--border);
}

/* ====== Кнопка "Редактировать" в таблице .table-users-list ====== */

/* Стили для кнопки "Редактировать" внутри таблицы пользователей */
.table-users-list .btn-edit-user {
    background: transparent !important;
    color: var(--section-title-bg);
    border: none;
    /*border-radius: 4px;*/
    /*padding: 5px 10px;*/
    font-size: 1em;
    transition: background 0.14s, color 0.14s;
    box-shadow: none;
    outline: none;
    display: inline-flex;
    align-items: center;
}
.table-users-list .btn-edit-user:hover,
.table-users-list .btn-edit-user:focus {
    background: var(--btn-outline-bg);
    color: var(--btn-outline-text);
    /*border: 1px solid var(--btn-outline-border, #22304A);*/
    /*box-shadow: 0 0 0 2px #cde4ff;*/
    /*text-decoration: none;*/
}

.table-users-list .btn-edit-user .fa {
    font-size: 1.3em;
    margin-right: 0;
    color: var(--section-title-text);
    vertical-align: middle;
}
.table-users-list .btn-edit-user .fa:hover,
.table-users-list .btn-edit-user .fa:focus {
    background: transparent;
    color: var(--fa-edit-btn-color);
    /*border: 1px solid var(--btn-outline-border, #22304A);*/
    /*box-shadow: 0 0 0 2px #cde4ff;*/
    /*text-decoration: none;*/
}

.badge {
    background: transparent !important;
    color: var(--main-text) !important;
    /*border-radius: 0 !important;*/
    /*font-size: 1.75em;*/
    /*font-weight: 600 !important;*/
    /*padding: 4px 8px;*/
}

.table-groups-list {
    max-width: 100% !important;
    width: 100% !important;
    font-weight: 200;
    font-size: 0.9em;
    /*padding: 12px 10px 10px 10px;*/
    /*border-bottom: 1px solid var(--border, #dadde1);*/
}

/* Пример базовых цветов для таблицы на переменных (раскомментируй, если нужно применять через custom properties) */
.table-groups-list {
    background-color: var(--bs-table-bg) !important;
    color: var(--bs-table-color) !important;
    border-color: var(--bs-table-border-color) !important;
}

/* Стиль для полосатых (striped) строк */
.table-groups-list tbody tr:nth-child(odd) {
    background-color: var(--bs-table-accent-bg) !important;
    color: var(--bs-table-striped-color) !important;
}

/* Стиль для выделенной строки (active) */
.table-groups-list tbody tr.active,
.table-groups-list tbody tr.selected {
    background-color: var(--bs-table-active-color) !important;
}

/* Стиль для hover */
.table-groups-list tbody tr:hover {
    background-color: var(--bs-table-hover-bg) !important;
    color: var(--bs-table-hover-color) !important;
}

/* Пример для границ */
.table-groups-list, .table-groups-list th, .table-groups-list td {
    border-color: var(--bs-table-border-color) !important;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
}

/* Responsive (если нужно) */
.table-groups-list-responsive {
  overflow: visible !important;
}

/* ===== СТИЛЬ ДЛЯ ШАПКИ ТАБЛИЦЫ .table-users-list ===== */

.table-groups-list thead tr {
    background: var(--section-title-bg);
}

.table-groups-list thead th {
    color: var(--main-text);
    font-weight: 500 !important;
    font-size: 0.9em !important;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--section-title-bg);
    /* Если нужна "липкая" шапка: */
    position: sticky;
    top: 0;
    z-index: 2;
}

[data-theme="dark"] .table-groups-list thead tr {
    background: var(--section-title-bg);
}
[data-theme="dark"] .table-groups-list thead th {
    color: var(--main-text);
    background: var(--section-title-bg);
    border-bottom: 2px solid var(--border);
}

/* ====== Кнопка "Редактировать" в таблице .table-users-list ====== */

/* Стили для кнопки "Редактировать" внутри таблицы пользователей */
.table-groups-list .btn-edit-group {
    background: transparent !important;
    color: var(--section-title-bg);
    border: none;
    /*border-radius: 4px;*/
    /*padding: 5px 10px;*/
    font-size: 1em;
    transition: background 0.14s, color 0.14s;
    box-shadow: none;
    outline: none;
    display: inline-flex;
    align-items: center;
}
.table-groups-list .btn-edit-group:hover,
.table-groups-list .btn-edit-group:focus {
    background: var(--btn-outline-bg);
    color: var(--btn-outline-text);
    /*border: 1px solid var(--btn-outline-border, #22304A);*/
    /*box-shadow: 0 0 0 2px #cde4ff;*/
    /*text-decoration: none;*/
}

.table-groups-list .btn-edit-group .fa {
    font-size: 1.3em;
    margin-right: 0;
    color: var(--section-title-text);
    vertical-align: middle;
}
.table-groups-list .btn-edit-group .fa:hover,
.table-groups-list .btn-edit-group .fa:focus {
    background: transparent;
    color: var(--fa-edit-btn-color);
    /*border: 1px solid var(--btn-outline-border, #22304A);*/
    /*box-shadow: 0 0 0 2px #cde4ff;*/
    /*text-decoration: none;*/
}