/* =============================
   SOCKSFIVE Dashboard Theme
   for SB Admin 2 (Bootstrap 4)
   -----------------------------
   Подключать ПОСЛЕДНИМ.
   Скроллбары — стандартные.
   ============================= */

/* ========== Токены темы ========= */
:root{
  --bg:#1a1f28;
  --panel:#242b38;
  --muted:#c0cbd8;
  --accent:#00d4ff;
  --accent-2:#7c5cff;
  --glass:rgba(255,255,255,0.06);
  --radius:12px;
  --shadow:0 6px 30px rgba(0,0,0,0.4);

  --text:#e6eef6;
  --text-dim:#a8b5c4;

  --sidebar-bg:#141922; /* темнее, по запросу */
  --sidebar-width: 280px; /* широкий сайдбар */
}

/* Базовый фон и текст */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", sans-serif;
}

/* Ссылки */
a { color: var(--muted); }
a:hover, a:focus { color: var(--accent); text-decoration: none; }

/* ========== Макет SB Admin 2 ========== */
#wrapper #content-wrapper {
  background: var(--bg) !important;
}

/* Сайдбар (левый), делаем шире и ровным цветом */
.sidebar,
.sidebar.sidebar-dark,
.bg-gradient-primary {
  background: var(--sidebar-bg) !important;
  background-image: none !important;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  border-right: 1px solid rgba(255,255,255,0.05);
}

/* Фикс ширины оберток */
#wrapper .sidebar .nav-item,
#wrapper .sidebar .sidebar-brand,
#wrapper .sidebar .nav-link,
#wrapper .sidebar .sidebar-heading {
  width: 100%;
}

 

/* Брендинг */
.sidebar .sidebar-brand {
  color: var(--text) !important;
  background: transparent !important;
  padding: 1rem 1rem 1rem 1.25rem;
  font-weight: 800;
  letter-spacing: .5px;
}

/* Разделители */
.sidebar hr.sidebar-divider {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: .5rem 1rem;
}

/* Заголовки секций сайдбара */
.sidebar .sidebar-heading {
  color: var(--text-dim) !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .75rem 1.25rem;
}

/* Пункты навигации сайдбара */
.sidebar .nav-item .nav-link {
  color: var(--muted) !important;
  padding: .65rem 1.25rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.sidebar .nav-item .nav-link i {
  color: var(--muted) !important;
  margin-right: .65rem;
  font-size: .95rem;
  transition: color .2s ease, transform .2s ease;
}

/* Hover — мягкий подсвет и лёгкий неоновый ореол */
.sidebar .nav-item .nav-link:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 6px 20px rgba(0,0,0,0.35);
}
.sidebar .nav-item .nav-link:hover i {
  color: var(--accent) !important;
  transform: translateX(2px);
}

/* Active — просто голубое свечение без градиента (по запросу) */
.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item .nav-link.active {
  color: var(--accent) !important;
  background: rgba(0,212,255,0.12) !important;
  box-shadow: 0 0 8px rgba(0,212,255,0.45), 0 0 0 1px rgba(0,212,255,0.25) inset;
}
.sidebar .nav-item.active > .nav-link i,
.sidebar .nav-item .nav-link.active i {
  color: var(--accent) !important;
}

/* Кнопка сворачивания */
#sidebarToggle, #sidebarToggleTop {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  border-radius: 10px;
}
#sidebarToggle:hover, #sidebarToggleTop:hover {
  background: rgba(255,255,255,0.12);
  color: var(--accent);
}

/* Topbar */
.topbar {
  background: var(--panel) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: var(--shadow);
}
.topbar .nav-item .nav-link, .topbar .navbar-search input {
  color: var(--text) !important;
}

/* ========== Карточки и контейнеры ========== */
.card, .shadow, .border-left-primary, .border-left-success, .border-left-info, .border-left-warning, .border-left-danger {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  border: 1px solid var(--glass) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
.card .card-header, .card-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--glass) !important;
  color: var(--text) !important;
}

/* ========== Кнопки ========== */
.btn-primary{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #061018 !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 12px rgba(0,212,255,0.45);
}
.btn-secondary{
  background: var(--panel) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
}
.btn-outline-primary{
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover{
  background: rgba(0,212,255,0.1) !important;
  box-shadow: 0 0 12px rgba(0,212,255,0.35);
}

/* ========== Формы ========== */
.form-control, .custom-select, .custom-file-input ~ .custom-file-label {
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}
.form-control:focus, .custom-select:focus{
  border-color: rgba(0,212,255,0.35) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,212,255,0.15) !important;
}
.form-control::placeholder{ color: var(--text-dim) !important; }

/* Инпут-группа */
.input-group-text{
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--glass) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}

/* Чекбоксы / радио (Bootstrap custom) */
.custom-control-label::before{
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
}
.custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ========== Таблицы ========== */
.table, .table-bordered, .table-striped {
  color: var(--text) !important;
}
.table thead th{
  background: var(--panel) !important;
  border-bottom: 1px solid var(--glass) !important;
  color: var(--text) !important;
}
.table td, .table th {
  border-color: var(--glass) !important;
}
.table tr:hover td {
  background: #334155 !important;
}

/* ========== Пагинация, хлебные крошки, бэйджи ========== */
.pagination .page-link{
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.pagination .page-link:hover{
  background: rgba(255,255,255,0.08) !important;
  color: var(--accent) !important;
}
.pagination .active .page-link{
  background: rgba(0,212,255,0.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.breadcrumb{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--glass) !important;
  border-radius: 12px !important;
}
.badge-primary{ background: var(--accent) !important; color:#061018 !important; }

/* ========== Dropdown & Tooltip ========== */
.dropdown-menu{
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  border-radius: 12px !important;
}
.dropdown-item{
  color: var(--text) !important;
}
.dropdown-item:hover{
  background: rgba(255,255,255,0.08) !important;
  color: var(--accent) !important;
}

.tooltip .tooltip-inner{
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ========== Модальные окна ========== */
.modal-content{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
  border: 1px solid var(--glass) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}
.modal-header{
  border-bottom: 1px solid var(--glass) !important;
}
.modal-footer{
  border-top: 1px solid var(--glass) !important;
}

/* ========== Алёрты ========== */
.alert{
  border-radius: 12px !important;
  border: 1px solid var(--glass) !important;
  color: var(--text) !important;
}
.alert-primary { background: rgba(0,212,255,0.12) !important; border-color: rgba(0,212,255,0.35) !important; color: var(--accent) !important; }
.alert-success { background: rgba(34,197,94,0.12) !important; border-color: rgba(34,197,94,0.35) !important; }
.alert-warning { background: rgba(234,179,8,0.12) !important; border-color: rgba(234,179,8,0.35) !important; }
.alert-danger  { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.35) !important; }

/* ========== Навигация / вкладки ========== */
.nav-tabs .nav-link{
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  color: var(--text) !important;
  margin-right: .5rem;
  border-radius: 10px 10px 0 0 !important;
}
.nav-tabs .nav-link.active{
  background: rgba(0,212,255,0.12) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* ========== Progress ========== */
.progress{
  background: rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
}
.progress-bar{
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
}

/* ========== DataTables ========== */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
}
.table.dataTable tbody tr:hover { background: #2a3543 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  color: var(--text) !important;
  border-radius: 10px !important;
  margin: 0 .15rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: rgba(0,212,255,0.12) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ========== Bootstrap-Select ========== */
.bootstrap-select .btn-light{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--glass) !important;
  border-radius: 12px !important;
}
.bootstrap-select .dropdown-menu {
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  border-radius: 12px !important;
}
.bootstrap-select .dropdown-item{
  color: var(--text) !important;
}
.bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:active{
  background: rgba(0,212,255,0.12) !important;
  color: var(--accent) !important;
}

/* ========== Summernote ========== */
.note-editor.note-frame {
  border: 1px solid var(--glass) !important;
  border-radius: 16px !important;
  background: var(--panel) !important;
  color: var(--text) !important;
}
.note-toolbar{
  background: rgba(255,255,255,0.03) !important;
  border-bottom: 1px solid var(--glass) !important;
}
.note-editing-area .note-editable{
  background: var(--panel) !important;
  color: var(--text) !important;
}

/* ========== Datepicker ========== */
.datepicker-dropdown,
.datepicker {
  background: var(--panel) !important;
  border: 1px solid var(--glass) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
  background: rgba(255,255,255,0.08) !important;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover {
  background: var(--accent) !important;
  color: #061018 !important;
}

/* ========== SweetAlert2 ========== */
.swal2-popup{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--glass) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.swal2-styled.swal2-confirm{
  background: var(--accent) !important;
  color: #061018 !important;
  border-radius: 10px !important;
}
.swal2-title { color: var(--text) !important; }

/* ========== Прочее ========== */
.list-group-item{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--glass) !important;
}
.card .small, .text-muted, .small.text-gray-500, .text-gray-600, .text-gray-800 {
  color: var(--text-dim) !important;
}

/* Иконки Feather/FA чуть ярче при hover в контенте */
.card a:hover i, .btn:hover i { color: var(--accent) !important; }

/* ========= Фиксы SB Admin 2 разметки ========= */
/* Когда сайдбар свёрнут (toggled), оставляем его читаемым */
.sidebar.toggled {
  overflow: visible !important;
}
@media (min-width: 768px) {
  .sidebar.toggled {
    width: 90px !important;
    min-width: 90px !important;
  }
  #wrapper #content-wrapper {
    transition: margin-left .2s ease;
  }
  .sidebar.toggled ~ #content-wrapper {
    margin-left: 90px !important;
  }
}
/* Иконки центрируем в toggled режиме */
.sidebar.toggled .nav-item .nav-link span { display: none; }
.sidebar.toggled .nav-item .nav-link i { margin: 0 auto; }

/* Таб-активный цвет ссылок в контенте */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: rgba(0,212,255,0.12) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px !important;
}
.dropdown-menu {
  margin-top: 4px !important;
  background: var(--panel) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.dropdown-item {
  color: var(--muted) !important;
}
.dropdown-item:hover {
  background: rgba(0,212,255,0.1);
  color: var(--accent) !important;
}
.collapse-inner {
  background: var(--panel) !important;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--radius);
  margin-top: 2px;
}
.collapse-item {
  color: var(--muted) !important;
}
.collapse-item:hover {
  background: rgba(0,212,255,0.08);
  color: var(--accent);
}
footer.sticky-footer, .footer {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  padding: 12px 0;
  font-size: 13px;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
}
footer a {
  color: var(--accent);
  text-decoration: none;
}
footer a:hover {
  opacity: 0.8;
}
.row, .card, .container-fluid, .page-content {
  margin-bottom: 18px !important;
}
table.dataTable,
table.dataTable thead th,
table.dataTable tbody td,
.table,
.table th,
.table td {
  background: transparent !important;
  color: var(--muted) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Цвет заголовков */
.table thead th {
  background: var(--panel) !important;
  color: var(--accent) !important;
  font-weight: 600;
  text-transform: none;
}

/* Цвет строк */
.table tbody tr {
  background: rgba(255,255,255,0.03) !important;
}
.table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.02) !important;
}

/* Подсветка при наведении */
.table tbody tr:hover {
  background: rgba(0,212,255,0.1) !important;
  transition: 0.2s ease-in-out;
}

/* Кнопки "..." в таблицах */
.btn-light, .dropdown-toggle.btn-light {
  background: var(--panel) !important;
  color: var(--muted) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.btn-light:hover {
  background: rgba(0,212,255,0.1) !important;
  color: var(--accent) !important;
}

/* Убираем белые границы DataTables */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--muted) !important;
}
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--panel);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,212,255,0.5);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #00e0ff, #9c80ff);
}

/* Для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--panel);
}

/* Для горизонтальных таблиц */
.dataTables_scrollBody::-webkit-scrollbar {
  height: 8px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 6px;
}
 .table,
.table-bordered,
table.dataTable {
  --cell-bg: #1f2734;             /* фон ячеек */
  --cell-head: #273140;           /* фон заголовка */
  --cell-border: rgba(255,255,255,0.06);
  --cell-text: #e6eef6;
  --cell-muted: #c0cbd8;
}

/* Заголовки */
.table thead th,
table.dataTable thead th {
  background: var(--cell-head) !important;
  color: var(--cell-muted) !important;
  border-color: var(--cell-border) !important;
}

/* Ячейки */
.table tbody td,
.table tbody th,
table.dataTable tbody td,
table.dataTable tbody th {
  background: var(--cell-bg) !important;
  color: var(--cell-text) !important;
  border-color: var(--cell-border) !important;
}

/* === Таблицы в стиле сайта + отключение hover-выделения строки === */

/* Базовые цвета под твой дизайн */
.table,
.table-bordered,
table.dataTable {
  --cell-bg: #1f2734;             /* фон ячеек */
  --cell-head: #273140;           /* фон заголовка */
  --cell-border: rgba(255,255,255,0.06);
  --cell-text: #e6eef6;
  --cell-muted: #c0cbd8;
}

/* Заголовки */
.table thead th,
table.dataTable thead th {
  background: var(--cell-head) !important;
  color: var(--cell-muted) !important;
  border-color: var(--cell-border) !important;
}

/* Ячейки */
.table tbody td,
.table tbody th,
table.dataTable tbody td,
table.dataTable tbody th {
  background: var(--cell-bg) !important;
  color: var(--cell-text) !important;
  border-color: var(--cell-border) !important;
}

/* Полностью убираем подсветку строки при наведении (Bootstrap + DataTables) */
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
table.dataTable.hover > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover,
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > th {
  background: var(--cell-bg) !important;
  background-color: var(--cell-bg) !important;
  color: var(--cell-text) !important;
  box-shadow: none !important;
}

/* Отключаем любые переходы при hover у строк */
.table-hover > tbody > tr,
table.dataTable tbody tr {
  transition: none !important;
}

/* Поля ввода внутри таблицы в твоём стиле + мягкий фокус */
.table .form-control,
table.dataTable .form-control {
  background: #0f151e !important;
  color: var(--cell-text) !important;
  border: 1px solid var(--cell-border) !important;
}

.table .form-control:focus,
table.dataTable .form-control:focus {
  background: #0f151e !important;
  color: var(--cell-text) !important;
  border-color: rgba(0,212,255,0.35) !important;
  box-shadow: 0 0 0 0.15rem rgba(0,212,255,0.15) !important;
}
/* === Фикс ширины таблицы SOCKSFIVE === */
.table {
  table-layout: fixed !important;
  width: 100% !important;
}

.table thead th,
.table tbody td {
  word-wrap: break-word !important;
  white-space: normal !important;
  vertical-align: middle !important;
}

/* Первый столбец (IP) — делаем шире */
.table th:first-child,
.table td:first-child {
  width: 28% !important;
  min-width: 250px !important;
}

/* Второй столбец (Threads) — средний */
.table th:nth-child(2),
.table td:nth-child(2) {
  width: 22% !important;
  min-width: 160px !important;
}

/* Третий столбец (Info) — остальное */
.table th:nth-child(3),
.table td:nth-child(3) {
  width: 50% !important;
}

/* Поля IP */
.table input[type="text"] {
  width: 100% !important;
  background-color: #1e2530 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e6eef6 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

.table input[type="text"]:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
}

/* Убираем выделение строк */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: transparent !important;
} 
.table {
  table-layout: fixed !important;
  width: 100% !important;
}

.table th,
.table td {
  word-wrap: break-word !important;
  white-space: normal !important;
  vertical-align: middle !important;
}

/* Ширина столбцов */
.table th:first-child,
.table td:first-child {
  width: 260px !important;
  min-width: 260px !important;
}
.table th:nth-child(2),
.table td:nth-child(2) {
  width: 200px !important;
  min-width: 200px !important;
}
.table th:nth-child(3),
.table td:nth-child(3) {
  width: auto !important;
}

/* Поля ввода */
.table input[type="text"] {
  width: 100% !important;
  min-width: 230px !important;
  background-color: #1e2530 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e6eef6 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

.table input[type="text"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
}

/* Отключаем hover-эффект строк */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: transparent !important;
}
/* Общее поведение таблицы */
.table.table-bordered.table-hover {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

.table thead th,
.table tbody td {
  vertical-align: middle !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* 1. Первый столбец (IP) */
.table th:first-child,
.table td:first-child {
  width: 260px !important;
  min-width: 260px !important;
}

/* 2. Второй столбец (Threads / Traffic) */
.table th:nth-child(2),
.table td:nth-child(2) {
  width: 200px !important;
  min-width: 200px !important;
}

/* 3. Третий столбец (Info) */
.table th:nth-child(3),
.table td:nth-child(3) {
  width: auto !important;
}

/* === Поля IP === */
.table input[type="text"].form-control {
  width: 100% !important;
  min-width: 230px !important;
  background-color: #1e2530 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e6eef6 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 15px !important;
  box-sizing: border-box !important;
}

.table input[type="text"].form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
  background-color: #243041 !important;
}

/* === Убираем выделение строки при наведении === */
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  background-color: transparent !important;
}

/* === Скрываем излишние внутренние отступы Bootstrap === */
.table td form {
  margin: 0 !important;
  padding: 0 !important;
}
/* === Ticket view fix === */
.ticket-block,
.card-body,
.card {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.ticket-block-arrow {
  border-color: transparent var(--surface) transparent transparent !important;
}

.circle-with-letter-blue,
.circle-with-letter-grey {
  background-color: var(--accent) !important;
  color: #fff !important;
}

.ticket-block small,
.ticket-block b,
.ticket-block i {
  color: var(--text) !important;
}

/* Исправляем цвет поля ответа */
textarea#ticket_reply {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 10px;
}  
.ticket-block-arrow {
  position: absolute;
  left: -10px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-right: 10px solid var(--surface) !important;
  background: none !important;
} 
#dataTable_ticket_admin {
  table-layout: fixed !important;      /* запрет на автоподгонку DataTables */
  width: 100% !important;
}

#dataTable_ticket_admin th,
#dataTable_ticket_admin td {
  word-wrap: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  vertical-align: middle !important;
}

#dataTable_ticket_admin th:nth-child(1),
#dataTable_ticket_admin td:nth-child(1) { width: 5% !important; }
#dataTable_ticket_admin th:nth-child(2),
#dataTable_ticket_admin td:nth-child(2) { width: 8% !important; }
#dataTable_ticket_admin th:nth-child(3),
#dataTable_ticket_admin td:nth-child(3) { width: 8% !important; }
#dataTable_ticket_admin th:nth-child(4),
#dataTable_ticket_admin td:nth-child(4) { width: 13% !important; }
#dataTable_ticket_admin th:nth-child(5),
#dataTable_ticket_admin td:nth-child(5) { width: 13% !important; }
#dataTable_ticket_admin th:nth-child(6),
#dataTable_ticket_admin td:nth-child(6) { width: 43% !important; }
#dataTable_ticket_admin th:nth-child(7),
#dataTable_ticket_admin td:nth-child(7) { width: 10% !important; }
/* === Payment List column widths override === */
#dataTable_payment_admin {
  table-layout: fixed !important;      /* фиксированная сетка */
  width: 100% !important;
}

#dataTable_payment_admin th,
#dataTable_payment_admin td {
  word-wrap: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  vertical-align: middle !important;
}

#dataTable_payment_admin th:nth-child(1),
#dataTable_payment_admin td:nth-child(1) { width: 10% !important; }
#dataTable_payment_admin th:nth-child(2),
#dataTable_payment_admin td:nth-child(2) { width: 10% !important; }
#dataTable_payment_admin th:nth-child(3),
#dataTable_payment_admin td:nth-child(3) { width: 10% !important; }
#dataTable_payment_admin th:nth-child(4),
#dataTable_payment_admin td:nth-child(4) { width: 13% !important; }
#dataTable_payment_admin th:nth-child(5),
#dataTable_payment_admin td:nth-child(5) { width: 16% !important; }
#dataTable_payment_admin th:nth-child(6),
#dataTable_payment_admin td:nth-child(6) { width: 27% !important; }
#dataTable_payment_admin th:nth-child(7),
#dataTable_payment_admin td:nth-child(7) { width: 8% !important; }
#dataTable_payment_admin th:nth-child(8),
#dataTable_payment_admin td:nth-child(8) { width: 6% !important; }
#dataTable_activity_admin {
  table-layout: fixed !important;
  width: 100% !important;
}

#dataTable_activity_admin th,
#dataTable_activity_admin td {
  word-wrap: break-word !important;
  white-space: normal !important;
  text-align: left !important;
  vertical-align: middle !important;
}

#dataTable_activity_admin th:nth-child(1),
#dataTable_activity_admin td:nth-child(1) { width: 8% !important; }
#dataTable_activity_admin th:nth-child(2),
#dataTable_activity_admin td:nth-child(2) { width: 12% !important; }
#dataTable_activity_admin th:nth-child(3),
#dataTable_activity_admin td:nth-child(3) { width: 12% !important; }
#dataTable_activity_admin th:nth-child(4),
#dataTable_activity_admin td:nth-child(4) { width: 68% !important; } 
#dataTable_my_activity {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#dataTable_my_activity thead th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid var(--glass) !important;
}

#dataTable_my_activity tbody td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--muted) !important;
  vertical-align: middle !important;
}

#dataTable_my_activity th:nth-child(1),
#dataTable_my_activity td:nth-child(1) { width: 8% !important; text-align: center !important; }

#dataTable_my_activity th:nth-child(2),
#dataTable_my_activity td:nth-child(2) { width: 12% !important; }

#dataTable_my_activity th:nth-child(3),
#dataTable_my_activity td:nth-child(3) { width: 12% !important; }

#dataTable_my_activity th:nth-child(4),
#dataTable_my_activity td:nth-child(4) { width: 68% !important; white-space: normal !important; }

#dataTable_my_activity tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  transition: background-color 0.2s ease;
}
#dataTable_online {
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#dataTable_online thead th {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom: 1px solid var(--glass) !important;
}

#dataTable_online tbody td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--muted) !important;
  vertical-align: middle !important;
}

#dataTable_online th:nth-child(1),
#dataTable_online td:nth-child(1) { width: 18% !important; }

#dataTable_online th:nth-child(2),
#dataTable_online td:nth-child(2) { width: 10% !important; text-align: center !important; }

#dataTable_online th:nth-child(3),
#dataTable_online td:nth-child(3) { width: 12% !important; }

#dataTable_online th:nth-child(4),
#dataTable_online td:nth-child(4) { width: 50% !important; white-space: normal !important; }

#dataTable_online tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  transition: background-color 0.2s ease;
}
/* === Мобильный фикс для таблиц, чтобы макет не ломался на узких экранах === */
@media (max-width: 767.98px) {
  .table,
  table.dataTable {
    table-layout: auto !important;
    width: 100% !important;
  }

  .table th,
  .table td,
  table.dataTable th,
  table.dataTable td {
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .table input[type="text"],
  .table input[type="text"].form-control,
  table.dataTable input[type="text"],
  table.dataTable input[type="text"].form-control {
    min-width: 0 !important;
  }

  /* На маленьких экранах всегда даём возможность горизонтального скролла,
     если таблица шире экрана */
  .table-responsive {
    overflow-x: auto !important;
  }
}