/*
 * tony.css — патч стилей Playmatic Advertiser Cabinet
 * Акцент: #6C8BFF | Тема: тёмно-серая нейтральная
 * v5 — полная перезапись с фиксами всех замечаний
 */

/* ============================================================
   ПЕРЕМЕННЫЕ — меняй здесь, работает везде
   ============================================================ */
:root {
  --tony-accent:         #6C8BFF;
  --tony-accent-hover:   #5577f5;
  --tony-accent-light:   rgba(108,139,255,0.10);
  --tony-accent-medium:  rgba(108,139,255,0.22);

  --tony-bg-base:        #1c1c1e;
  --tony-bg-surface:     #252527;
  --tony-bg-elevated:    #2d2d30;
  --tony-bg-overlay:     #333336;
  --tony-bg-hover:       #36363a;
  --tony-bg-stripe:      #222224;
  --tony-bg-total:       #2a2a2d;
  --tony-bg-input:       #2d2d30;

  --tony-text-primary:   #e8e8ea;
  --tony-text-secondary: #9a9aa8;
  --tony-text-muted:     #5e5e68;
  --tony-text-heading:   #f4f4f6;

  --tony-border:         #303033;
  --tony-border-light:   #3d3d42;

  --tony-success:        #4caf82;
  --tony-success-bg:     rgba(76,175,130,0.12);
  --tony-warning:        #e8a030;
  --tony-warning-bg:     rgba(232,160,48,0.12);
  --tony-danger:         #d95f72;
  --tony-danger-bg:      rgba(217,95,114,0.12);
  --tony-info:           #4da8c8;
  --tony-info-bg:        rgba(77,168,200,0.12);

  --tony-badge-soon:     #38383c;
  --tony-badge-soon-text:#7a7a88;

  /* Максимальная ширина кабинета */
  --tony-max-width: 1600px;
}

/* ============================================================
   1. ОСНОВНОЙ ФОН
   ============================================================ */
.dark-style {
  background-color: var(--tony-bg-base) !important;
  --bs-primary: var(--tony-accent) !important;
  --bs-primary-rgb: 108, 139, 255 !important;
  --bs-link-color: var(--tony-accent) !important;
  --bs-link-hover-color: var(--tony-accent-hover) !important;
}

.dark-style .layout-wrapper,
.dark-style .layout-page,
.dark-style .content-wrapper {
  background-color: var(--tony-bg-base) !important;
}

/* ============================================================
   2. ШИРИНА КАБИНЕТА — ограничиваем до 1600px
   ============================================================
   Навбар fixed и растянут на 1920px — центрируем через
   max-width + padding. Контентная область аналогично.
   ============================================================ */

/* Горизонтальный навбар */
.dark-style .layout-menu-horizontal,
.dark-style .menu-horizontal,
.dark-style .bg-menu-theme {
  max-width: var(--tony-max-width) !important;
  width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
}

/* Контентный контейнер */
.dark-style .container-fluid.flex-grow-1.container-p-y,
.dark-style .container-fluid.container-p-y {
  max-width: var(--tony-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   3. НАВБАР — стили
   ============================================================ */
.dark-style .layout-menu-horizontal,
.dark-style .bg-menu-theme {
  background-color: var(--tony-bg-elevated) !important;
  border-bottom: 1px solid var(--tony-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25) !important;
}

/* Пункты меню */
.dark-style .layout-menu-horizontal .nav-item > a,
.dark-style .layout-menu-horizontal .nav-item > .nav-link,
.dark-style .menu-horizontal .nav-link {
  color: var(--tony-text-secondary) !important;
  border-radius: 6px;
  transition: background-color 0.15s, color 0.15s;
}

.dark-style .layout-menu-horizontal .nav-item:hover > a,
.dark-style .layout-menu-horizontal .nav-item:hover > .nav-link,
.dark-style .menu-horizontal .nav-item:hover > .nav-link {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
}

/* Активный пункт */
.dark-style .layout-menu-horizontal .nav-item.active > a,
.dark-style .layout-menu-horizontal .nav-item.active > .nav-link,
.dark-style .menu-horizontal .nav-item.active > .nav-link,
.dark-style .nav-link.active.position-relative {
  background-color: var(--tony-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(108,139,255,0.28) !important;
}

/* Мобильный навбар (скрыт на десктопе) */
.dark-style .layout-navbar {
  background-color: var(--tony-bg-elevated) !important;
  border-bottom: 1px solid var(--tony-border) !important;
  box-shadow: none !important;
}

/* ============================================================
   4. ЗАГОЛОВОК СТРАНИЦЫ И ХЛЕБНЫЕ КРОШКИ
   ============================================================ */
.dark-style .page-title-box .h3,
.dark-style .page-title-box .h4,
.dark-style .page-title-box span.h3,
.dark-style .page-title-box h3,
.dark-style .page-title-box h4 {
  color: var(--tony-text-heading) !important;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.dark-style .breadcrumb-item,
.dark-style .breadcrumb-item a {
  color: var(--tony-text-muted) !important;
  font-size: 0.82rem;
  text-decoration: none;
}

.dark-style .breadcrumb-item a:hover        { color: var(--tony-accent) !important; }
.dark-style .breadcrumb-item.active          { color: var(--tony-text-secondary) !important; }
.dark-style .breadcrumb-item + .breadcrumb-item::before { color: var(--tony-text-muted) !important; }

/* ============================================================
   5. КНОПКИ УПРАВЛЕНИЯ
   ============================================================ */
.dark-style .btn-primary {
  background-color: var(--tony-accent) !important;
  border-color: var(--tony-accent) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(108,139,255,0.28) !important;
}
.dark-style .btn-primary:hover {
  background-color: var(--tony-accent-hover) !important;
  border-color: var(--tony-accent-hover) !important;
  box-shadow: 0 4px 14px rgba(108,139,255,0.38) !important;
}

/* Кнопка обновления и все label-secondary / outline-secondary */
.dark-style .btn-label-secondary,
.dark-style .btn.btn-label-secondary,
.dark-style .btn-outline-secondary {
  background-color: var(--tony-bg-elevated) !important;
  border-color: var(--tony-border-light) !important;
  color: var(--tony-text-secondary) !important;
  box-shadow: none !important;
}
.dark-style .btn-label-secondary:hover,
.dark-style .btn-outline-secondary:hover {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
  border-color: var(--tony-border-light) !important;
  box-shadow: none !important;
}
.dark-style .btn-label-secondary:active,
.dark-style .btn-label-secondary:focus,
.dark-style .btn-outline-secondary:focus {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
  box-shadow: 0 0 0 3px var(--tony-accent-light) !important;
}

/* Иконки в кнопках */
.dark-style .btn i, .dark-style .btn .fa, .dark-style .btn .bx { color: inherit !important; }

/* ============================================================
   6. БЕЙДЖИКИ
   ============================================================ */
.dark-style .badge.bg-danger,
.dark-style .badge-danger,
.dark-style .badge-notifications,
.dark-style .top-badge .badge,
.dark-style .nav-item .badge:not(.badge-dot):not(.badge-notifications) {
  background-color: var(--tony-badge-soon) !important;
  color: var(--tony-badge-soon-text) !important;
  border: 1px solid var(--tony-border-light) !important;
  box-shadow: none !important;
}
.dark-style .badge.badge-dot { background-color: var(--tony-accent) !important; }
.dark-style .badge.bg-success { background-color: var(--tony-success-bg) !important; color: var(--tony-success) !important; border: 1px solid rgba(76,175,130,0.3) !important; }
.dark-style .badge.bg-warning { background-color: var(--tony-warning-bg) !important; color: var(--tony-warning) !important; border: 1px solid rgba(232,160,48,0.3) !important; }
.dark-style .badge.bg-info    { background-color: var(--tony-info-bg)    !important; color: var(--tony-info)    !important; border: 1px solid rgba(77,168,200,0.3) !important; }
.dark-style .badge.bg-primary { background-color: var(--tony-accent-light) !important; color: var(--tony-accent) !important; border: 1px solid var(--tony-accent-medium) !important; }

/* ============================================================
   7. ТАБЛИЦА
   ============================================================ */
.dark-style .react_admin .table,
.dark-style .react_admin table {
  background-color: var(--tony-bg-surface) !important;
  border-color: var(--tony-border) !important;
  color: var(--tony-text-primary) !important;
  box-shadow: none !important;
}

/* Шапка */
.dark-style .react_admin thead th {
  background-color: var(--tony-bg-elevated) !important;
  color: var(--tony-text-secondary) !important;
  border-bottom: 2px solid var(--tony-border-light) !important;
  border-right: 1px solid var(--tony-border) !important;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 8px;
  white-space: nowrap;
}

/* Строки данных — сброс всех посторонних стилей */
.dark-style .react_admin tbody tr td {
  border-bottom: 1px solid var(--tony-border) !important;
  border-right: 1px solid rgba(48,48,51,0.5) !important;
  color: var(--tony-text-primary) !important;
  padding: 9px 8px;
  font-size: 0.855rem;
  font-weight: 400 !important;
}

/* Зебра */
.dark-style .react_admin tbody tr:nth-child(odd) td  { background-color: var(--tony-bg-surface) !important; }
.dark-style .react_admin tbody tr:nth-child(even) td { background-color: var(--tony-bg-stripe) !important; }

/* Hover строки */
.dark-style .react_admin tbody tr:hover td {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
}

/* Последняя строка ДАННЫХ — никакого выделения */
.dark-style .react_admin tbody tr:last-child td {
  font-weight: 400 !important;
  border-top: none !important;
}
.dark-style .react_admin tbody tr:last-child:nth-child(odd) td  { background-color: var(--tony-bg-surface) !important; }
.dark-style .react_admin tbody tr:last-child:nth-child(even) td { background-color: var(--tony-bg-stripe) !important; }

/* Сортировка столбца */
.dark-style .react_admin th.sorted.asc,
.dark-style .react_admin th.sorted.desc {
  background-color: var(--tony-accent-light) !important;
  color: var(--tony-accent) !important;
}

/* ============================================================
   8. TFOOT — строка ИТОГО
   ============================================================
   В DOM: tfoot → tr1 (ячейка "Итого:") + tr2 (числа).
   Задача: показать "ИТОГО" и числа в одной визуальной строке.
   Решение: tr1 display:none, числа берут из tr2.
   Метку "ИТОГО:" добавляем через псевдоэлемент к первой
   ячейке tr2 чтобы не трогать HTML.
   ============================================================ */
.dark-style .react_admin tfoot {
  background-color: var(--tony-bg-total) !important;
}

/* Скрываем строку-метку "Итого:" — она отдельная tr */
.dark-style .react_admin tfoot tr:first-child {
  display: none !important;
}

/* Строка с числами — единственная видимая */
.dark-style .react_admin tfoot tr:last-child td {
  background-color: var(--tony-bg-total) !important;
  color: var(--tony-text-heading) !important;
  font-weight: 600 !important;
  font-size: 0.875rem;
  border-top: 2px solid var(--tony-border-light) !important;
  border-bottom: none !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Первая ячейка второй строки — добавляем текст "ИТОГО" */
.dark-style .react_admin tfoot tr:last-child td:first-child::before {
  content: "ИТОГО";
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tony-text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ============================================================
   9. ФИЛЬТРЫ
   ============================================================ */
.dark-style .react_admin .filters {
  background-color: var(--tony-bg-surface) !important;
  border-bottom: 1px solid var(--tony-border) !important;
  padding: 10px 12px;
}

/* Метка над фильтром */
.dark-style .filter_item_title {
  background-color: var(--tony-bg-surface) !important;
  border-color: var(--tony-border-light) !important;
  color: var(--tony-text-muted) !important;
  font-size: 9px !important;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* Native <select> фильтры (Дата, Группировка и т.д.) */
.dark-style .react_admin .form-select,
.dark-style .react_admin select {
  background-color: var(--tony-bg-input) !important;
  border-color: var(--tony-border-light) !important;
  color: var(--tony-text-primary) !important;
  border-radius: 6px !important;
  font-size: 0.875rem;
  box-shadow: none !important;
}
.dark-style .react_admin .form-select:focus,
.dark-style .react_admin select:focus {
  border-color: var(--tony-accent) !important;
  box-shadow: 0 0 0 2px var(--tony-accent-light) !important;
}

/* ── React-Select v1 (.Select) — Кампания и Материал ────────
   Это старая библиотека с отдельными классами.
   Делаем одинаковый вид с native <select> выше.
   ─────────────────────────────────────────────────────────── */
.dark-style .Select-control {
  background-color: var(--tony-bg-input) !important;
  border-color: var(--tony-border-light) !important;
  border-radius: 6px !important;
  color: var(--tony-text-primary) !important;
  min-height: 38px !important;
  box-shadow: none !important;
}
.dark-style .Select-control:hover {
  border-color: var(--tony-accent) !important;
  box-shadow: none !important;
}
.dark-style .is-focused .Select-control,
.dark-style .is-focused:not(.is-open) .Select-control {
  border-color: var(--tony-accent) !important;
  box-shadow: 0 0 0 2px var(--tony-accent-light) !important;
}

/* Placeholder */
.dark-style .Select-placeholder,
.dark-style .Select--multi .Select-placeholder {
  color: var(--tony-text-muted) !important;
  line-height: 36px;
}

/* Значение */
.dark-style .Select-value-label,
.dark-style .Select-single-value {
  color: var(--tony-text-primary) !important;
}

/* Стрелка */
.dark-style .Select-arrow { border-top-color: var(--tony-text-secondary) !important; }
.dark-style .is-open .Select-arrow { border-bottom-color: var(--tony-text-secondary) !important; }

/* Мультиселект — тег */
.dark-style .Select-multi-value-wrapper .Select-value {
  background-color: var(--tony-accent-light) !important;
  border-color: var(--tony-accent-medium) !important;
  color: var(--tony-accent) !important;
  border-radius: 4px !important;
}
.dark-style .Select-value-icon {
  border-right-color: var(--tony-accent-medium) !important;
  color: var(--tony-accent) !important;
}
.dark-style .Select-value-icon:hover {
  background-color: var(--tony-accent) !important;
  color: #fff !important;
}

/* Выпадающее меню React-Select v1 */
.dark-style .Select-menu-outer {
  background-color: var(--tony-bg-overlay) !important;
  border-color: var(--tony-border-light) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important;
  z-index: 9999 !important;
}
.dark-style .Select-menu {
  background-color: var(--tony-bg-overlay) !important;
}
.dark-style .Select-option {
  background-color: var(--tony-bg-overlay) !important;
  color: var(--tony-text-primary) !important;
  padding: 8px 12px;
}
.dark-style .Select-option:hover,
.dark-style .Select-option.is-focused {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
}
.dark-style .Select-option.is-selected {
  background-color: var(--tony-accent-light) !important;
  color: var(--tony-accent) !important;
}
.dark-style .Select-noresults {
  color: var(--tony-text-muted) !important;
  background-color: var(--tony-bg-overlay) !important;
}

/* Нативный <option> — тёмный фон (влияет на браузерный dropdown) */
.dark-style option,
.dark-style .react_admin option {
  background-color: var(--tony-bg-overlay) !important;
  color: var(--tony-text-primary) !important;
}

/* input date */
.dark-style input[type="date"] {
  color-scheme: dark;
  background-color: var(--tony-bg-input) !important;
  color: var(--tony-text-primary) !important;
  border-color: var(--tony-border-light) !important;
  border-radius: 6px !important;
}
.dark-style input[type="date"]:focus {
  border-color: var(--tony-accent) !important;
  box-shadow: 0 0 0 2px var(--tony-accent-light) !important;
}

/* Все form-control */
.dark-style .form-control {
  background-color: var(--tony-bg-input) !important;
  border-color: var(--tony-border-light) !important;
  color: var(--tony-text-primary) !important;
}
.dark-style .form-control:focus {
  border-color: var(--tony-accent) !important;
  box-shadow: 0 0 0 2px var(--tony-accent-light) !important;
}

/* ============================================================
   10. ПАГИНАЦИЯ
   ============================================================
   Кнопки без класса disabled скрыты когда не нужны через JS.
   CSS-часть: нормальный вид + скрытие btn-prev/next-more
   когда totalPages <= 1 (добавляем через JS-патч в tony.js).
   ============================================================ */
.dark-style .pagination { gap: 3px; align-items: center; }

.dark-style .pagination .page-item .page-link,
.dark-style .page-link {
  background-color: var(--tony-bg-elevated) !important;
  border-color: var(--tony-border) !important;
  color: var(--tony-text-secondary) !important;
  border-radius: 6px !important;
  min-width: 34px;
  min-height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  transition: all 0.13s ease;
  padding: 6px 10px;
  cursor: pointer;
}
.dark-style .pagination .page-item .page-link:hover,
.dark-style .page-link:hover {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
  border-color: var(--tony-border-light) !important;
}
.dark-style .pagination .page-item.active .page-link,
.dark-style .page-item.active .page-link {
  background-color: var(--tony-accent) !important;
  border-color: var(--tony-accent) !important;
  color: #fff !important;
}
.dark-style .pagination .page-item.disabled .page-link {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Скрываем пагинацию если всего 1 страница (нет нужных классов) */
.dark-style .pagination.undefined {
  /* Когда total pages = 1 — скрываем через tony.js */
}

/* ============================================================
   11. КАРТОЧКИ, МОДАЛКИ, ДРОПДАУНЫ
   ============================================================ */
.dark-style .card {
  background-color: var(--tony-bg-surface) !important;
  border-color: var(--tony-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}
.dark-style .card-header {
  background-color: var(--tony-bg-elevated) !important;
  border-bottom-color: var(--tony-border) !important;
}

.dark-style .modal-content {
  background-color: var(--tony-bg-surface) !important;
  border-color: var(--tony-border-light) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
}
.dark-style .modal-header {
  background-color: var(--tony-bg-elevated) !important;
  border-bottom-color: var(--tony-border) !important;
}
.dark-style .modal-footer {
  background-color: var(--tony-bg-elevated) !important;
  border-top-color: var(--tony-border) !important;
}

.dark-style .dropdown-menu {
  background-color: var(--tony-bg-overlay) !important;
  border-color: var(--tony-border-light) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
  border-radius: 8px !important;
}
.dark-style .dropdown-item {
  color: var(--tony-text-primary) !important;
  border-radius: 5px;
  margin: 1px 4px;
  padding: 8px 12px;
  transition: background-color 0.12s;
}
.dark-style .dropdown-item:hover {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
}
.dark-style .dropdown-divider { border-color: var(--tony-border) !important; }

/* ============================================================
   12. СТРАНИЦА АВТОРИЗАЦИИ
   ============================================================ */
.dark-style .authentication-wrapper { background-color: var(--tony-bg-base) !important; }
.dark-style .authentication-inner .card,
.authentication-inner .card {
  background-color: var(--tony-bg-surface) !important;
  border: 1px solid var(--tony-border-light) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
  border-radius: 12px !important;
}
.authentication-inner h4   { color: var(--tony-text-heading) !important; font-weight: 700; }
.authentication-inner .form-control {
  background-color: var(--tony-bg-input) !important;
  border-color: var(--tony-border-light) !important;
  color: var(--tony-text-primary) !important;
  border-radius: 7px;
}
.authentication-inner .form-control:focus {
  border-color: var(--tony-accent) !important;
  box-shadow: 0 0 0 2px var(--tony-accent-light) !important;
}
.authentication-inner .btn-primary {
  background-color: var(--tony-accent) !important;
  border-color: var(--tony-accent) !important;
  color: #fff !important;
  border-radius: 7px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(108,139,255,0.28) !important;
  transition: all 0.18s ease;
}
.authentication-inner .btn-primary:hover {
  background-color: var(--tony-accent-hover) !important;
  box-shadow: 0 6px 18px rgba(108,139,255,0.40) !important;
  transform: translateY(-1px);
}
.authentication-inner a:not(.btn) { color: var(--tony-accent) !important; text-decoration: none; }
.authentication-inner a:not(.btn):hover { color: var(--tony-accent-hover) !important; text-decoration: underline; }
.authentication-inner .form-check-input:checked {
  background-color: var(--tony-accent) !important;
  border-color: var(--tony-accent) !important;
}

/* ============================================================
   13. ГЛОБАЛЬНЫЕ ЦВЕТА И СКРОЛЛБАР
   ============================================================ */
.dark-style .text-primary   { color: var(--tony-accent) !important; }
.dark-style .text-success   { color: var(--tony-success) !important; }
.dark-style .text-danger    { color: var(--tony-danger) !important; }
.dark-style .text-warning   { color: var(--tony-warning) !important; }
.dark-style .text-info      { color: var(--tony-info) !important; }
.dark-style .text-muted     { color: var(--tony-text-muted) !important; }
.dark-style .text-secondary { color: var(--tony-text-secondary) !important; }
.dark-style .text-body      { color: var(--tony-text-secondary) !important; }

.dark-style a               { color: var(--tony-accent) !important; }
.dark-style a:hover         { color: var(--tony-accent-hover) !important; }

.dark-style hr, .dark-style .divider { border-color: var(--tony-border) !important; }
.dark-style .border-primary          { border-color: var(--tony-accent) !important; }

.dark-style *:focus-visible {
  outline: 2px solid var(--tony-accent) !important;
  outline-offset: 2px;
}

.dark-style .form-check-input:checked {
  background-color: var(--tony-accent) !important;
  border-color: var(--tony-accent) !important;
}

.dark-style ::-webkit-scrollbar { width: 5px; height: 5px; }
.dark-style ::-webkit-scrollbar-track { background: var(--tony-bg-base); }
.dark-style ::-webkit-scrollbar-thumb { background-color: var(--tony-border-light); border-radius: 10px; }
.dark-style ::-webkit-scrollbar-thumb:hover { background-color: var(--tony-accent); }

/* ============================================================
   14. ОТСТУПЫ И МЕЛКИЕ ПРАВКИ
   ============================================================ */
.dark-style .layout-page    { min-height: 100vh; }
.dark-style .content-wrapper { padding-bottom: 2rem !important; }
.dark-style hr, .dark-style .divider { border-color: var(--tony-border) !important; }


/* ============================================================
   15. ФИКСЫ v6 — специфичность, navbar, акцент
   ============================================================ */

/* ── Акцентный цвет — перебиваем sanchos.css ID-селектор ────
   sanchos.css: #navMenu .nav-item.active > a { background: #696cff }
   Специфичность: (1,2,1) — выигрывает у нашего (0,2,1).
   Решение: используем тот же #navMenu + !important уже есть,
   но нужно добавить ID в наш селектор.
   ─────────────────────────────────────────────────────────── */

/* Активный пункт — перебиваем sanchos через #navMenu */
.dark-style #navMenu .nav-item.active > a,
.dark-style #navMenu .nav-item.active > a.nav-link {
  background-color: #6C8BFF !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(108,139,255,0.28) !important;
  border-radius: 6px !important;
}

/* Hover на остальных пунктах — тоже перебиваем sanchos */
.dark-style #navMenu .nav-item:hover > a {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
}

/* Все badge-dot точки (уведомления) — наш акцент */
.dark-style .badge.badge-dot,
.dark-style span.badge-dot {
  background-color: #6C8BFF !important;
}

/* Все hardcoded #696cff и rgb(105,108,255) — заменяем */
/* Sorted столбец */
.dark-style .react_admin th.sorted.asc,
.dark-style .react_admin th.sorted.desc {
  background-color: rgba(108,139,255,0.10) !important;
  color: #6C8BFF !important;
}

/* Select-option выбранный */
.dark-style .Select-option.is-selected {
  background-color: rgba(108,139,255,0.10) !important;
  color: #6C8BFF !important;
}

/* ordernav активный таб из sanchos.css */
.dark-style .card .ordernav.nav-tabs .nav-item > a.active {
  border-color: #6C8BFF !important;
}
.dark-style .card.border-primary .ordernav .nav-item > a {
  border-right-color: #6C8BFF !important;
}


/* ── Navbar — градиентное затухание по краям ─────────────────
   Навбар fixed и шире контента. Делаем «fade» по краям через
   pseudo-элементы на родителе .content-wrapper, которые
   перекрывают края навбара градиентом → эффект плавного
   исчезновения в тёмный фон страницы.
   ─────────────────────────────────────────────────────────── */

/* Обёртка навбара — overflow visible, позиционирование */
.dark-style .layout-menu-horizontal {
  /* Убираем обрезку через transform — используем left/right напрямую */
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Внутренний контейнер навбара — ограничиваем по ширине и центрируем */
.dark-style .layout-menu-horizontal .container-fluid {
  max-width: var(--tony-max-width) !important;
  margin: 0 auto !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Градиентные маски по краям навбара */
.dark-style .layout-menu-horizontal::before,
.dark-style .layout-menu-horizontal::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(20px, calc((100vw - var(--tony-max-width)) / 2), 120px);
  z-index: 10;
  pointer-events: none;
}

.dark-style .layout-menu-horizontal::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--tony-bg-elevated) 0%,
    var(--tony-bg-elevated) 40%,
    transparent 100%
  );
}

.dark-style .layout-menu-horizontal::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--tony-bg-elevated) 0%,
    var(--tony-bg-elevated) 40%,
    transparent 100%
  );
}


/* ── Пагинация — скрываем через CSS когда страница одна ──────
   tony.js следит за состоянием, но кнопки не получают
   класс disabled. Скрываем через tony.js (см. tony.js v2).
   CSS-резерв: если все 6 кнопок есть и нет активных номеров
   страниц — прячем ul целиком.
   Но основное решение — в tony.js ниже.
   ─────────────────────────────────────────────────────────── */
.dark-style .pagination[data-tony-hidden="true"] {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ============================================================
   16. ФИКСЫ v7
   ============================================================ */

/* ── 1. NAVBAR — маска затухания по краям ───────────────────
   position:fixed + overflow:visible = псевдоэлементы видны,
   но перекрываются контентом. Используем CSS mask-image
   на самом навбаре — работает поверх всего содержимого.
   ─────────────────────────────────────────────────────────── */
.dark-style .layout-menu-horizontal {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black clamp(40px, calc((100vw - var(--tony-max-width)) / 2 + 20px), 140px),
    black calc(100% - clamp(40px, calc((100vw - var(--tony-max-width)) / 2 + 20px), 140px)),
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black clamp(40px, calc((100vw - var(--tony-max-width)) / 2 + 20px), 140px),
    black calc(100% - clamp(40px, calc((100vw - var(--tony-max-width)) / 2 + 20px), 140px)),
    transparent 100%
  ) !important;
}

/* Убираем псевдоэлементы (заменили на mask) */
.dark-style .layout-menu-horizontal::before,
.dark-style .layout-menu-horizontal::after {
  display: none !important;
}


/* ── 2. СКРУГЛЕНИЕ FILTERS COL ──────────────────────────────
   .filters.col — обёртка всей строки фильтров.
   Скругляем углы и добавляем рамку для современного вида.
   ─────────────────────────────────────────────────────────── */
.dark-style .filters.col {
  border-radius: 8px !important;
  border: 1px solid var(--tony-border) !important;
  background-color: var(--tony-bg-surface) !important;
  padding: 8px 10px !important;
}


/* ── 3. ПУСТОЕ МЕСТО ОТ ПАГИНАЦИИ ───────────────────────────
   .pager — контейнер пагинации, остаётся видимым даже когда
   ul.pagination скрыт. Скрываем весь блок через tony.js.
   CSS-дополнение: убираем margin/padding у скрытой пагинации.
   ─────────────────────────────────────────────────────────── */
.dark-style .pager[data-tony-hidden="true"] {
  display: none !important;
}


/* ── 4. filter_item_title — цвет фона ───────────────────────
   react.css побеждает специфичностью (0,4,0).
   Добавляем .react_admin чтобы сравняться + !important.
   ─────────────────────────────────────────────────────────── */
.dark-style .react_admin .filters .filter_item .filter_item_title,
.dark-style .react_admin .filter_item .filter_item_title,
.dark-style .filter_item_title {
  background-color: var(--tony-bg-surface) !important;
  border: 1px solid var(--tony-border) !important;
  color: var(--tony-text-muted) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}


/* ── 5. Шестерёнка настройки колонок таблицы ────────────────
   .fa.fa-gear внутри .hide_column_edit
   ─────────────────────────────────────────────────────────── */
.dark-style .hide_column_edit .fa-gear,
.dark-style .hide_column_edit .fa,
.dark-style .react_admin .hide_column_edit {
  color: var(--tony-text-muted) !important;
  transition: color 0.15s;
}
.dark-style .hide_column_edit:hover .fa-gear,
.dark-style .hide_column_edit:hover .fa,
.dark-style .react_admin .hide_column_edit:hover {
  color: #6C8BFF !important;
}

/* fa-solid fa-gear в таблице (правый верхний угол) */
.dark-style .react_admin .fa-solid.fa-gear,
.dark-style .react_admin .fa-gear {
  color: var(--tony-text-muted) !important;
}
.dark-style .react_admin .fa-solid.fa-gear:hover,
.dark-style .react_admin .fa-gear:hover {
  color: #6C8BFF !important;
}


/* ── 6. ДВОЙНАЯ ОБВОДКА — убираем лишний контур ─────────────
   Проблема: наш *:focus-visible даёт outline 2px, ПЛЮС
   наш box-shadow на input — итого два контура.
   Решение: убираем outline у элементов где есть box-shadow.
   ─────────────────────────────────────────────────────────── */

/* Инпуты и селекты — только box-shadow, без outline */
.dark-style input[type="date"]:focus,
.dark-style .form-control:focus,
.dark-style .form-select:focus,
.dark-style select:focus {
  outline: none !important;
  border-color: #6C8BFF !important;
  box-shadow: 0 0 0 2px rgba(108,139,255,0.20) !important;
}

/* :focus-visible — убираем у форм-элементов, оставляем у кнопок */
.dark-style input:focus-visible,
.dark-style select:focus-visible,
.dark-style textarea:focus-visible {
  outline: none !important;
}

/* React-Select focus — одна чистая обводка */
.dark-style .is-focused .Select-control,
.dark-style .is-focused:not(.is-open) .Select-control {
  outline: none !important;
  border-color: #6C8BFF !important;
  box-shadow: 0 0 0 2px rgba(108,139,255,0.20) !important;
}

/* Select input внутри — без обводки */
.dark-style .Select-input input:focus,
.dark-style .Select-input input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* ── 7. ЦВЕТ ТЕКСТА В КАМПАНИЯ / МАТЕРИАЛ ───────────────────
   .Select-placeholder и значение — делаем как у form-select.
   form-select color = rgb(232,232,234) = var(--tony-text-primary)
   ─────────────────────────────────────────────────────────── */
.dark-style .Select-placeholder {
  color: var(--tony-text-secondary) !important;
}

.dark-style .Select-value-label,
.dark-style .Select--single .Select-value,
.dark-style .Select--multi .Select-value-label {
  color: var(--tony-text-primary) !important;
}

/* Текст поиска внутри открытого Select */
.dark-style .Select-input input {
  color: var(--tony-text-primary) !important;
  background: transparent !important;
}


/* ============================================================
   FIX v8 — градиент навбара без mask-image (не обрезает дропдауны),
   яркость плашек фильтров, яркость ИТОГО
   ============================================================ */

/* ── Убираем mask-image с навбара — он резал дропдауны ───── */
.dark-style .layout-menu-horizontal {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Градиент теперь через ::before/::after на .layout-container
   или .layout-wrapper — элемент который НЕ является родителем
   дропдаунов, но визуально перекрывает края навбара.
   Используем body::before/::after — они точно вне nav. */

/* Левый градиент поверх навбара */
.dark-style body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 48px; /* высота навбара */
  width: clamp(0px, calc((100vw - var(--tony-max-width)) / 2), 160px);
  background: linear-gradient(to right, var(--tony-bg-base) 0%, transparent 100%);
  z-index: 9999;
  pointer-events: none;
}

/* Правый градиент поверх навбара */
.dark-style body::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  height: 48px;
  width: clamp(0px, calc((100vw - var(--tony-max-width)) / 2), 160px);
  background: linear-gradient(to left, var(--tony-bg-base) 0%, transparent 100%);
  z-index: 9999;
  pointer-events: none;
}


/* ── Плашки фильтров — чуть ярче текст ──────────────────────
   Было: #5e5e68 (--tony-text-muted)
   Стало: ~15% ярче — #7a7a86
   ─────────────────────────────────────────────────────────── */
.dark-style .react_admin .filters .filter_item .filter_item_title,
.dark-style .react_admin .filter_item .filter_item_title,
.dark-style .filter_item_title {
  color: #7a7a8a !important;
}


/* ── Строка ИТОГО — чуть ярче текст метки ───────────────────
   Было: --tony-text-muted (#5e5e68) — едва видно
   Стало: --tony-text-secondary (#9a9aa8) — нормально читаемо
   ─────────────────────────────────────────────────────────── */
.dark-style .react_admin tfoot tr:last-child td {
  color: var(--tony-text-primary) !important;
}

.dark-style .react_admin tfoot tr:last-child td:first-child::before {
  color: var(--tony-text-secondary) !important;
}


/* ============================================================
   FIX v9 — убираем градиенты навбара полностью
   ============================================================ */

/* Убираем body::before и ::after — они портили правый угол */
.dark-style body::before,
.dark-style body::after {
  display: none !important;
  content: none !important;
}

/* Убираем mask-image (на случай если осталось) */
.dark-style .layout-menu-horizontal {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Убираем ::before/::after самого навбара */
.dark-style .layout-menu-horizontal::before,
.dark-style .layout-menu-horizontal::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
   FIX v10 — дропдаун пользователя, hover в Select-option
   ============================================================ */

/* ── Дропдаун пользователя — email и subtitle ────────────────
   small.text-muted внутри dropdown-menu — слишком тёмный.
   Делаем читаемым как вторичный текст.
   ─────────────────────────────────────────────────────────── */
.dark-style .dropdown-menu small,
.dark-style .dropdown-menu small.text-muted,
.dark-style .dropdown-menu .text-muted {
  color: var(--tony-text-secondary) !important;
}

/* Имя/email пользователя — основной текст в дропдауне */
.dark-style .dropdown-menu .fw-medium,
.dark-style .dropdown-menu .fw-semibold,
.dark-style .dropdown-menu strong {
  color: var(--tony-text-heading) !important;
}

/* VIP и другие badge внутри дропдауна пользователя —
   делаем акцентным, хорошо читаемым */
.dark-style .dropdown-menu .badge.badge-danger,
.dark-style .navbar-dropdown-user .badge {
  background-color: rgba(108,139,255,0.15) !important;
  color: #6C8BFF !important;
  border: 1px solid rgba(108,139,255,0.30) !important;
  font-weight: 600;
}


/* ── Select-option hover — заметнее подсветка ────────────────
   Было: #36363a на #333336 — разница ~3 единицы, невидимо.
   Стало: #404048 — +10 единиц, чётко различимо.
   Плюс лёгкий левый акцентный бордер для современного вида.
   ─────────────────────────────────────────────────────────── */
.dark-style .Select-option {
  background-color: var(--tony-bg-overlay) !important;
  color: var(--tony-text-secondary) !important;
  transition: background-color 0.12s, color 0.12s;
}

.dark-style .Select-option:hover,
.dark-style .Select-option.is-focused {
  background-color: #404048 !important;
  color: var(--tony-text-heading) !important;
  border-left: 2px solid #6C8BFF;
  padding-left: 10px;
}

.dark-style .Select-option.is-selected {
  background-color: rgba(108,139,255,0.12) !important;
  color: #6C8BFF !important;
  border-left: 2px solid #6C8BFF;
  padding-left: 10px;
  font-weight: 500;
}

/* Нативный dropdown-item hover — тоже делаем заметнее */
.dark-style .dropdown-item:hover,
.dark-style .dropdown-item:focus {
  background-color: #404048 !important;
  color: var(--tony-text-heading) !important;
}


/* ============================================================
   FIX v11 — input-group-text ("От", "До" на странице Конверсии)
   ============================================================ */
.dark-style .input-group-text {
  background-color: var(--tony-bg-elevated) !important;
  color: var(--tony-text-secondary) !important;
  border-color: var(--tony-border-light) !important;
}


/* ============================================================
   FIX v12 — скрываем хлебные крошки (дублируют заголовок)
   ============================================================
   На каждой странице название раздела повторяется трижды:
   в меню, в h3-заголовке и в хлебных крошках.
   Хлебные крошки наименее информативны — скрываем их.
   Заголовок страницы остаётся.
   ============================================================ */
.dark-style .breadcrumb,
.dark-style nav[aria-label="breadcrumb"],
.dark-style .breadcrumb-wrapper {
  display: none !important;
}

/* Выравниваем page-title-box — убираем лишнее пространство
   которое оставалось от хлебных крошек справа */
.dark-style .page-title-box {
  justify-content: flex-start !important;
}


/* ============================================================
   FIX v13 — tfoot не перехватывает hover последней строки tbody
   ============================================================
   tfoot tr:first-child скрыт через display:none, но сам tfoot
   остаётся в потоке с height:42px и перекрывает последнюю
   строку tbody, съедая события мыши.
   Решение: pointer-events:none на скрытом tr + убираем высоту.
   ============================================================ */
.dark-style .react_admin tfoot tr:first-child {
  display: none !important;
  height: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

/* Убеждаемся что tfoot не создаёт лишнего пространства сверху */
.dark-style .react_admin tfoot {
  border-top: none !important;
}

.dark-style .react_admin tfoot tr:last-child td {
  border-top: 2px solid var(--tony-border-light) !important;
}


/* ============================================================
   FIX v14 — hover на последней строке tbody
   ============================================================
   Проблема: tr:last-child:nth-child(even/odd) имеет
   специфичность (0,4,2), что выше чем tr:hover (0,3,2).
   Зебра-цвет перебивает hover на последней строке.
   Решение: добавляем :hover к last-child селекторам —
   специфичность становится (0,5,2) и всегда побеждает.
   ============================================================ */
.dark-style .react_admin tbody tr:last-child:hover td,
.dark-style .react_admin tbody tr:last-child:nth-child(even):hover td,
.dark-style .react_admin tbody tr:last-child:nth-child(odd):hover td {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА (.light-style)
   ============================================================
   Та же логика что и тёмная, но светлая палитра.
   Акцент: #6C8BFF — тот же.
   Фоны: белые и светло-серые, без синих оттенков шаблона.
   ============================================================ */

/* ── Переменные светлой темы ─────────────────────────────── */
.light-style {
  --tony-accent:          #6C8BFF;
  --tony-accent-hover:    #5577f5;
  --tony-accent-light:    rgba(108,139,255,0.10);
  --tony-accent-medium:   rgba(108,139,255,0.22);

  --tony-bg-base:         #f4f4f6;   /* фон страницы */
  --tony-bg-surface:      #ffffff;   /* карточки, таблица */
  --tony-bg-elevated:     #f0f0f4;   /* навбар, шапка таблицы */
  --tony-bg-overlay:      #ffffff;   /* дропдауны */
  --tony-bg-hover:        #eeeef4;   /* hover строк */
  --tony-bg-stripe:       #f8f8fb;   /* зебра */
  --tony-bg-total:        #f0f0f4;   /* строка итого */
  --tony-bg-input:        #ffffff;   /* инпуты */

  --tony-text-primary:    #3a3a4a;
  --tony-text-secondary:  #6b6b80;
  --tony-text-muted:      #9a9aaa;
  --tony-text-heading:    #1e1e2a;

  --tony-border:          #e4e4ec;
  --tony-border-light:    #d8d8e4;

  --tony-success:         #3a9e70;
  --tony-success-bg:      rgba(58,158,112,0.10);
  --tony-warning:         #c47f10;
  --tony-warning-bg:      rgba(196,127,16,0.10);
  --tony-danger:          #c0404e;
  --tony-danger-bg:       rgba(192,64,78,0.10);
  --tony-info:            #2e8fa8;
  --tony-info-bg:         rgba(46,143,168,0.10);

  --tony-badge-soon:      #e8e8f0;
  --tony-badge-soon-text: #8888a0;
}

/* ── Фон страницы ────────────────────────────────────────── */
.light-style {
  background-color: var(--tony-bg-base) !important;
  --bs-primary:           #6C8BFF !important;
  --bs-primary-rgb:       108, 139, 255 !important;
  --bs-link-color:        #6C8BFF !important;
  --bs-link-hover-color:  #5577f5 !important;
}

.light-style .layout-wrapper,
.light-style .layout-page,
.light-style .content-wrapper {
  background-color: var(--tony-bg-base) !important;
}

/* ── Ширина кабинета ─────────────────────────────────────── */
.light-style .container-fluid.flex-grow-1.container-p-y,
.light-style .container-fluid.container-p-y {
  max-width: var(--tony-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.light-style .layout-menu-horizontal .container-fluid {
  max-width: var(--tony-max-width) !important;
  margin: 0 auto !important;
}

/* ── Навбар ──────────────────────────────────────────────── */
.light-style .layout-menu-horizontal,
.light-style .bg-menu-theme {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--tony-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.light-style .layout-menu-horizontal .nav-item > a,
.light-style .layout-menu-horizontal .nav-item > .nav-link,
.light-style .menu-horizontal .nav-link {
  color: var(--tony-text-secondary) !important;
  border-radius: 6px;
  transition: background-color 0.15s, color 0.15s;
}

.light-style .layout-menu-horizontal .nav-item:hover > a,
.light-style .layout-menu-horizontal .nav-item:hover > .nav-link {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
}

/* Активный пункт — перебиваем sanchos.css ID-селектор */
.light-style #navMenu .nav-item.active > a,
.light-style #navMenu .nav-item.active > a.nav-link {
  background-color: #6C8BFF !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(108,139,255,0.25) !important;
  border-radius: 6px !important;
}

.light-style #navMenu .nav-item:hover > a {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
}

/* Правый блок навбара — иконки */
.light-style .layout-navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--tony-border) !important;
  box-shadow: none !important;
}

/* ── Заголовок страницы ──────────────────────────────────── */
.light-style .page-title-box .h3,
.light-style .page-title-box span.h3 {
  color: var(--tony-text-heading) !important;
  font-weight: 600;
}

/* Скрываем хлебные крошки */
.light-style .breadcrumb,
.light-style nav[aria-label="breadcrumb"] {
  display: none !important;
}

/* ── Бейджики СКОРО ──────────────────────────────────────── */
.light-style .badge.bg-danger,
.light-style .badge-danger,
.light-style .top-badge .badge,
.light-style .nav-item .badge:not(.badge-dot) {
  background-color: var(--tony-badge-soon) !important;
  color: var(--tony-badge-soon-text) !important;
  border: 1px solid var(--tony-border-light) !important;
  box-shadow: none !important;
}

/* ── Таблица ─────────────────────────────────────────────── */
.light-style .react_admin .table,
.light-style .react_admin table {
  background-color: var(--tony-bg-surface) !important;
  border-color: var(--tony-border) !important;
  box-shadow: none !important;
}

.light-style .react_admin thead th {
  background-color: var(--tony-bg-elevated) !important;
  color: var(--tony-text-secondary) !important;
  border-bottom: 2px solid var(--tony-border-light) !important;
  border-right: 1px solid var(--tony-border) !important;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.light-style .react_admin tbody tr td {
  border-bottom: 1px solid var(--tony-border) !important;
  color: var(--tony-text-primary) !important;
  font-weight: 400 !important;
  font-size: 0.855rem;
}

/* Зебра */
.light-style .react_admin tbody tr:nth-child(odd) td  { background-color: var(--tony-bg-surface) !important; }
.light-style .react_admin tbody tr:nth-child(even) td { background-color: var(--tony-bg-stripe) !important; }

/* Hover строк */
.light-style .react_admin tbody tr:hover td {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
}

/* Hover последней строки — специфичность выше зебры */
.light-style .react_admin tbody tr:last-child:hover td,
.light-style .react_admin tbody tr:last-child:nth-child(even):hover td,
.light-style .react_admin tbody tr:last-child:nth-child(odd):hover td {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
}

/* Сбрасываем лишний bold у последней строки данных */
.light-style .react_admin tbody tr:last-child td {
  font-weight: 400 !important;
  border-top: none !important;
}

/* tfoot — строка ИТОГО */
.light-style .react_admin tfoot tr:first-child { display: none !important; }

.light-style .react_admin tfoot tr:last-child td {
  background-color: var(--tony-bg-total) !important;
  color: var(--tony-text-primary) !important;
  font-weight: 600 !important;
  border-top: 2px solid var(--tony-border-light) !important;
}

.light-style .react_admin tfoot tr:last-child td:first-child::before {
  content: "ИТОГО";
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--tony-text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ── Фильтры ─────────────────────────────────────────────── */
.light-style .react_admin .filters {
  background-color: var(--tony-bg-surface) !important;
  border-bottom: 1px solid var(--tony-border) !important;
}

.light-style .filters.col {
  border-radius: 8px !important;
  border: 1px solid var(--tony-border) !important;
  background-color: var(--tony-bg-surface) !important;
}

/* filter_item_title — перебиваем react.css (0,4,0) */
.light-style .react_admin .filters .filter_item .filter_item_title,
.light-style .react_admin .filter_item .filter_item_title,
.light-style .filter_item_title {
  background-color: var(--tony-bg-surface) !important;
  border: 1px solid var(--tony-border) !important;
  color: #7a7a8a !important;
  font-size: 9px !important;
  font-weight: 500 !important;
}

/* Инпуты */
.light-style .react_admin .form-select,
.light-style .react_admin select {
  background-color: var(--tony-bg-input) !important;
  border-color: var(--tony-border-light) !important;
  color: var(--tony-text-primary) !important;
  border-radius: 6px !important;
}

.light-style .react_admin .form-select:focus,
.light-style .react_admin select:focus,
.light-style input[type="date"]:focus,
.light-style .form-control:focus {
  outline: none !important;
  border-color: #6C8BFF !important;
  box-shadow: 0 0 0 2px rgba(108,139,255,0.18) !important;
}

/* React-Select v1 — Кампания и Материал */
.light-style .Select-control {
  background-color: var(--tony-bg-input) !important;
  border-color: var(--tony-border-light) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.light-style .Select-control:hover { border-color: #6C8BFF !important; }
.light-style .is-focused .Select-control,
.light-style .is-focused:not(.is-open) .Select-control {
  outline: none !important;
  border-color: #6C8BFF !important;
  box-shadow: 0 0 0 2px rgba(108,139,255,0.18) !important;
}

.light-style .Select-placeholder { color: var(--tony-text-muted) !important; }
.light-style .Select-value-label { color: var(--tony-text-primary) !important; }
.light-style .Select-arrow { border-top-color: var(--tony-text-secondary) !important; }
.light-style .Select-input input { color: var(--tony-text-primary) !important; background: transparent !important; }
.light-style .Select-input input:focus,
.light-style .Select-input input:focus-visible { outline: none !important; box-shadow: none !important; }

/* Дропдаун Select */
.light-style .Select-menu-outer {
  background-color: #ffffff !important;
  border-color: var(--tony-border-light) !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}
.light-style .Select-option {
  background-color: #ffffff !important;
  color: var(--tony-text-primary) !important;
}
.light-style .Select-option:hover,
.light-style .Select-option.is-focused {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
  border-left: 2px solid #6C8BFF;
  padding-left: 10px;
}
.light-style .Select-option.is-selected {
  background-color: var(--tony-accent-light) !important;
  color: #6C8BFF !important;
  border-left: 2px solid #6C8BFF;
  padding-left: 10px;
}

/* input date */
.light-style input[type="date"] {
  background-color: var(--tony-bg-input) !important;
  color: var(--tony-text-primary) !important;
  border-color: var(--tony-border-light) !important;
  border-radius: 6px !important;
}

/* input-group-text (От/До на Конверсиях) */
.light-style .input-group-text {
  background-color: var(--tony-bg-elevated) !important;
  color: var(--tony-text-secondary) !important;
  border-color: var(--tony-border-light) !important;
}

/* ── Кнопки ──────────────────────────────────────────────── */
.light-style .btn-primary {
  background-color: #6C8BFF !important;
  border-color: #6C8BFF !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(108,139,255,0.25) !important;
}
.light-style .btn-primary:hover {
  background-color: #5577f5 !important;
  border-color: #5577f5 !important;
}

.light-style .btn-label-secondary,
.light-style .btn.btn-label-secondary,
.light-style .btn-outline-secondary {
  background-color: var(--tony-bg-elevated) !important;
  border-color: var(--tony-border-light) !important;
  color: var(--tony-text-secondary) !important;
  box-shadow: none !important;
}
.light-style .btn-label-secondary:hover,
.light-style .btn-outline-secondary:hover {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-primary) !important;
}

/* ── Пагинация ───────────────────────────────────────────── */
.light-style .pagination .page-item .page-link,
.light-style .page-link {
  background-color: var(--tony-bg-elevated) !important;
  border-color: var(--tony-border) !important;
  color: var(--tony-text-secondary) !important;
  border-radius: 6px !important;
  min-width: 34px; min-height: 34px;
}
.light-style .pagination .page-item .page-link:hover { background-color: var(--tony-bg-hover) !important; color: var(--tony-text-primary) !important; }
.light-style .pagination .page-item.active .page-link { background-color: #6C8BFF !important; border-color: #6C8BFF !important; color: #fff !important; }
.light-style .pagination .page-item.disabled .page-link { opacity: 0.4 !important; }

/* ── Карточки, дропдауны ─────────────────────────────────── */
.light-style .card {
  background-color: var(--tony-bg-surface) !important;
  border-color: var(--tony-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.light-style .card-header {
  background-color: var(--tony-bg-elevated) !important;
  border-bottom-color: var(--tony-border) !important;
}

.light-style .dropdown-menu {
  background-color: #ffffff !important;
  border-color: var(--tony-border-light) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
  border-radius: 8px !important;
}
.light-style .dropdown-item {
  color: var(--tony-text-primary) !important;
  border-radius: 5px; margin: 1px 4px; padding: 8px 12px;
}
.light-style .dropdown-item:hover,
.light-style .dropdown-item:focus {
  background-color: var(--tony-bg-hover) !important;
  color: var(--tony-text-heading) !important;
}

/* Дропдаун пользователя */
.light-style .dropdown-menu small,
.light-style .dropdown-menu small.text-muted,
.light-style .dropdown-menu .text-muted { color: var(--tony-text-secondary) !important; }
.light-style .dropdown-menu .badge.badge-danger,
.light-style .navbar-dropdown-user .badge {
  background-color: rgba(108,139,255,0.12) !important;
  color: #6C8BFF !important;
  border: 1px solid rgba(108,139,255,0.25) !important;
}

/* ── Шестерёнка ──────────────────────────────────────────── */
.light-style .hide_column_edit .fa-gear { color: var(--tony-text-muted) !important; }
.light-style .hide_column_edit:hover .fa-gear { color: #6C8BFF !important; }
.light-style .react_admin .fa-solid.fa-gear { color: var(--tony-text-muted) !important; }
.light-style .react_admin .fa-solid.fa-gear:hover { color: #6C8BFF !important; }

/* ── Глобальные цвета ────────────────────────────────────── */
.light-style .text-primary   { color: #6C8BFF !important; }
.light-style .text-success   { color: var(--tony-success) !important; }
.light-style .text-danger    { color: var(--tony-danger) !important; }
.light-style .text-warning   { color: var(--tony-warning) !important; }
.light-style .text-muted     { color: var(--tony-text-muted) !important; }
.light-style .text-secondary { color: var(--tony-text-secondary) !important; }
.light-style a               { color: #6C8BFF !important; }
.light-style a:hover         { color: #5577f5 !important; }
.light-style hr              { border-color: var(--tony-border) !important; }

.light-style *:focus-visible {
  outline: 2px solid #6C8BFF !important;
  outline-offset: 2px;
}
.light-style input:focus-visible,
.light-style select:focus-visible,
.light-style textarea:focus-visible { outline: none !important; }

/* Скроллбар */
.light-style ::-webkit-scrollbar { width: 5px; height: 5px; }
.light-style ::-webkit-scrollbar-track { background: var(--tony-bg-base); }
.light-style ::-webkit-scrollbar-thumb { background-color: var(--tony-border-light); border-radius: 10px; }
.light-style ::-webkit-scrollbar-thumb:hover { background-color: #6C8BFF; }

.light-style .content-wrapper { padding-bottom: 2rem !important; }


/* ============================================================
   СВЕТЛАЯ ТЕМА — УЛУЧШЕНИЯ v2
   Отступы, воздух, цвета таблицы — приводим к уровню тёмной
   ============================================================ */

/* ── Отступы страницы ────────────────────────────────────── */
.light-style .content-wrapper {
  padding: 1.5rem 1.5rem 2rem !important;
}

.light-style .page-title-box {
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
}

/* ── Card — обёртка таблицы и фильтров ──────────────────── */
.light-style .card.fade.show,
.light-style .react_admin .card {
  border-radius: 10px !important;
  border: 1px solid var(--tony-border) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
  overflow: hidden;
}

/* ── Фильтры — воздух внутри ─────────────────────────────── */
.light-style .filters.col {
  padding: 10px 14px !important;
  min-height: 56px !important;
  border-radius: 0 !important;          /* скругление на card, не на filters */
  border: none !important;
  border-bottom: 1px solid var(--tony-border) !important;
  background-color: #fafafa !important;
}

/* ── Шапка таблицы — воздух и стиль ─────────────────────── */
.light-style .react_admin thead th {
  padding: 11px 10px !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background-color: #f4f4f8 !important;
  color: #6b6b80 !important;
  border-bottom: 2px solid var(--tony-border-light) !important;
  border-right: 1px solid var(--tony-border) !important;
  white-space: nowrap !important;
}

/* ── Строки таблицы — воздух и цвета ────────────────────── */
.light-style .react_admin tbody tr td {
  padding: 10px 10px !important;
  font-size: 0.855rem !important;
  color: #3a3a4a !important;
  border-bottom: 1px solid var(--tony-border) !important;
  border-right: 1px solid rgba(228,228,236,0.5) !important;
  font-weight: 400 !important;
  /* Убираем Bootstrap синие ссылки в ячейках */
  background-clip: padding-box;
}

/* Зебра — перезаписываем с нужными цветами */
.light-style .react_admin tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}
.light-style .react_admin tbody tr:nth-child(even) td {
  background-color: #f8f8fb !important;
}

/* Hover */
.light-style .react_admin tbody tr:hover td {
  background-color: #eeeef4 !important;
  color: #1e1e2a !important;
  cursor: pointer;
}

/* Hover последней строки (высокая специфичность) */
.light-style .react_admin tbody tr:last-child:hover td,
.light-style .react_admin tbody tr:last-child:nth-child(even):hover td,
.light-style .react_admin tbody tr:last-child:nth-child(odd):hover td {
  background-color: #eeeef4 !important;
  color: #1e1e2a !important;
}

/* Убираем синий цвет ссылок внутри таблицы */
.light-style .react_admin tbody td a,
.light-style .react_admin tbody td span {
  color: inherit !important;
}

/* ── tfoot ИТОГО ─────────────────────────────────────────── */
.light-style .react_admin tfoot {
  background-color: #f4f4f8 !important;
}

.light-style .react_admin tfoot tr:first-child {
  display: none !important;
  height: 0 !important;
  pointer-events: none !important;
}

.light-style .react_admin tfoot tr:last-child td {
  background-color: #f4f4f8 !important;
  color: #1e1e2a !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 10px 10px !important;
  border-top: 2px solid var(--tony-border-light) !important;
  border-bottom: none !important;
}

.light-style .react_admin tfoot tr:last-child td:first-child::before {
  content: "ИТОГО";
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #9a9aaa;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ── filter_item_title — поднимаем специфичность ────────── */
.light-style .react_admin .filters .filter_item .filter_item_title {
  background-color: #fafafa !important;
  border: 1px solid var(--tony-border) !important;
  color: #8888a0 !important;
  font-size: 9px !important;
  font-weight: 500 !important;
}

/* ── Кнопки управления таблицей ─────────────────────────── */
.light-style .react_admin .btn-label-secondary,
.light-style .react_admin .btn.btn-label-secondary {
  background-color: #f0f0f4 !important;
  border-color: var(--tony-border-light) !important;
  color: #6b6b80 !important;
}
.light-style .react_admin .btn-label-secondary:hover {
  background-color: #eeeef4 !important;
  color: #3a3a4a !important;
}

/* ── Навбар — чуть отчётливее ────────────────────────────── */
.light-style .layout-menu-horizontal,
.light-style .bg-menu-theme {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e0e0ea !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

/* Текст пунктов меню темнее для читаемости */
.light-style .layout-menu-horizontal .nav-item > a,
.light-style .layout-menu-horizontal .nav-item > .nav-link {
  color: #5a5a6e !important;
  font-weight: 500;
}

/* ── Общий фон ───────────────────────────────────────────── */
.light-style,
.light-style .layout-wrapper,
.light-style .layout-page,
.light-style .content-wrapper {
  background-color: #f0f0f5 !important;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА — ФИКСЫ v3 (структура и отступы)
   ============================================================ */

/* ── 1. Навбар — убираем смещение ───────────────────────────
   position:fixed + наш margin на container-fluid = съезжает.
   Контейнер должен быть auto, не через margin.
   ─────────────────────────────────────────────────────────── */
.light-style .layout-menu-horizontal {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.light-style .layout-menu-horizontal .container-fluid {
  max-width: var(--tony-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* ── 2. Отступы страницы — убираем дублирование ─────────────
   container-p-y уже имеет padding-top от fixed navbar (~84px).
   Не добавляем свой padding к content-wrapper.
   ─────────────────────────────────────────────────────────── */
.light-style .content-wrapper {
  padding: 0 !important;
  background-color: #f0f0f5 !important;
}

/* container-p-y — только горизонтальные отступы */
.light-style .container-fluid.flex-grow-1.container-p-y,
.light-style .container-fluid.container-p-y {
  max-width: var(--tony-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  /* padding-top оставляем как есть — он компенсирует fixed navbar */
}

/* ── 3. Заголовок страницы — отступ снизу ───────────────────
   В тёмной теме между заголовком и фильтрами ~16px.
   page-title-box уже имеет margin-bottom: 20px — окей.
   ─────────────────────────────────────────────────────────── */
.light-style .page-title-box {
  margin-bottom: 1rem !important;
  padding: 0 !important;
}

/* ── 4. Фильтры и таблица — единый визуальный блок ──────────
   В тёмной теме фильтры и таблица выглядят как одна card.
   Здесь они в разных div, но визуально объединяем их:
   фильтры снизу без скругления, таблица сверху без скругления,
   единая рамка через wrapper.
   ─────────────────────────────────────────────────────────── */

/* Обёртка grid-default — белый фон, скругление, тень */
.light-style .grid-default {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid var(--tony-border) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
}

/* Фильтры внутри grid-default — без своей рамки */
.light-style .grid-default .filters.col {
  background-color: #fafafa !important;
  border: none !important;
  border-bottom: 1px solid var(--tony-border) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  min-height: 54px !important;
}

/* d-flex gap-3 mb-3 — убираем gap между фильтрами и таблицей */
.light-style .d-flex.gap-3.mb-3 {
  gap: 0 !important;
  margin-bottom: 0 !important;
  flex-direction: column !important;
}

/* card внутри grid-default — без своей рамки и тени */
.light-style .grid-default .card,
.light-style .grid-default .card.fade.show {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* ── 5. Таблица внутри card — убираем лишние отступы ────────*/
.light-style .grid-default .card-body {
  padding: 0 !important;
}

/* ── 6. Шестерёнка — позиционирование ───────────────────────*/
.light-style .hide_column_edit {
  top: 8px !important;
  right: 8px !important;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА — ФИКСЫ v4 (btn-group, разделитель)
   ============================================================ */

/* ── Отменяем flex-direction:column — он сломал btn-group ─── */
.light-style .d-flex.gap-3.mb-3 {
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin-bottom: 0 !important;
}

/* ── btn-group — стили как в тёмной теме ─────────────────── */
.light-style .d-flex.gap-3.mb-3 .btn-group {
  display: flex !important;
  align-items: center !important;
  padding: 8px 10px !important;
  background-color: #fafafa !important;
  border-right: 1px solid var(--tony-border) !important;
  border-bottom: 1px solid var(--tony-border) !important;
  flex-shrink: 0 !important;
}

/* ── Разделитель между строкой фильтров и таблицей ───────── 
   В тёмной теме между фильтрами и шапкой таблицы есть
   видимый разрыв — это border-bottom фильтров + padding
   сверху у thead. Воспроизводим то же самое.
   ─────────────────────────────────────────────────────────── */
.light-style .grid-default .filters.col {
  border-bottom: 1px solid var(--tony-border) !important;
  background-color: #fafafa !important;
  padding: 10px 14px !important;
  min-height: 54px !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Разрыв между фильтрами и таблицей — через padding thead */
.light-style .react_admin thead th {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* ── card-body внутри grid-default ───────────────────────── */
.light-style .grid-default .card-body {
  padding: 0 !important;
}

/* ── mb-3 на d-flex — убираем чтобы не было зазора ───────── */
.light-style .grid-default > .d-flex.gap-3 {
  margin-bottom: 0 !important;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА — ФИКСЫ v5 (контраст и единообразие)
   ============================================================ */

/* ── Фон страницы — темнее для контраста с карточкой ──────── */
.light-style,
.light-style .layout-page,
.light-style .content-wrapper,
.light-style .layout-wrapper {
  background-color: #e8e8f0 !important;
}

/* ── grid-default — чёткая карточка ─────────────────────────
   Белый фон, заметная рамка, хорошая тень.
   ─────────────────────────────────────────────────────────── */
.light-style .grid-default {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid #d4d4e0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
}

/* ── btn-group — четкая граница справа ───────────────────── */
.light-style .d-flex.gap-3.mb-3 .btn-group {
  background-color: #f5f5f9 !important;
  border-right: 1px solid #d4d4e0 !important;
  border-bottom: 1px solid #d4d4e0 !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
}

/* Кнопки внутри btn-group */
.light-style .d-flex.gap-3.mb-3 .btn-group .btn {
  background-color: transparent !important;
  border-color: #d4d4e0 !important;
  color: #6b6b80 !important;
}
.light-style .d-flex.gap-3.mb-3 .btn-group .btn:hover {
  background-color: #eeeef4 !important;
  color: #3a3a4a !important;
}

/* ── Фильтры — немного темнее белого ────────────────────────
   В тёмной теме фильтры чуть темнее тела таблицы.
   Здесь: фильтры #f5f5f9, тело таблицы #ffffff.
   ─────────────────────────────────────────────────────────── */
.light-style .grid-default .filters.col {
  background-color: #f5f5f9 !important;
  border-bottom: 2px solid #d4d4e0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 10px 14px !important;
  min-height: 54px !important;
}

/* ── Шапка таблицы — выделяется от тела ─────────────────── */
.light-style .react_admin thead th {
  background-color: #f0f0f6 !important;
  color: #5a5a70 !important;
  border-bottom: 2px solid #d4d4e0 !important;
  border-right: 1px solid #e0e0ea !important;
  padding: 11px 10px !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ── Тело таблицы — белый фон, чёткие строки ────────────── */
.light-style .react_admin tbody tr td {
  background-color: #ffffff !important;
  color: #2e2e3e !important;
  border-bottom: 1px solid #ebebf2 !important;
  border-right: 1px solid rgba(228,228,240,0.5) !important;
  padding: 10px 10px !important;
  font-size: 0.855rem !important;
  font-weight: 400 !important;
}

/* Зебра */
.light-style .react_admin tbody tr:nth-child(even) td {
  background-color: #f8f8fc !important;
}
.light-style .react_admin tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}

/* Hover */
.light-style .react_admin tbody tr:hover td,
.light-style .react_admin tbody tr:last-child:hover td,
.light-style .react_admin tbody tr:last-child:nth-child(even):hover td,
.light-style .react_admin tbody tr:last-child:nth-child(odd):hover td {
  background-color: #eaeaf4 !important;
  color: #1a1a2e !important;
  cursor: pointer;
}

/* ── tfoot — выделяется как в тёмной теме ───────────────── */
.light-style .react_admin tfoot tr:last-child td {
  background-color: #f0f0f6 !important;
  color: #1a1a2e !important;
  font-weight: 600 !important;
  border-top: 2px solid #d4d4e0 !important;
  padding: 10px 10px !important;
}

/* ── card внутри grid-default ────────────────────────────── */
.light-style .grid-default .card,
.light-style .grid-default .card.fade.show {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.light-style .grid-default .card-body {
  padding: 0 !important;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА — ФИКСЫ v6 (точное копирование структуры тёмной)
   ============================================================
   В тёмной теме:
   - d-flex.gap-3: gap=16px между btn-group и filters, mb=16px до таблицы
   - btn-group: прозрачный фон, без рамок
   - filters: фон surface, border-left
   - card таблицы: отдельный блок ниже
   - grid-default НЕ является единой карточкой
   ============================================================ */

/* ── Отменяем grid-default как единую карточку ───────────── */
.light-style .grid-default {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── d-flex.gap-3 — восстанавливаем gap как в тёмной ──────── */
.light-style .d-flex.gap-3.mb-3 {
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* ── btn-group — прозрачный, без рамок (как в тёмной) ────── */
.light-style .d-flex.gap-3.mb-3 .btn-group {
  background-color: transparent !important;
  border: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

/* Кнопки внутри btn-group */
.light-style .d-flex.gap-3.mb-3 .btn-group .btn-label-secondary,
.light-style .d-flex.gap-3.mb-3 .btn-group .btn {
  background-color: #ffffff !important;
  border: 1px solid #d4d4e0 !important;
  color: #6b6b80 !important;
  border-radius: 6px !important;
}
.light-style .d-flex.gap-3.mb-3 .btn-group .btn:hover {
  background-color: #eeeef4 !important;
  color: #3a3a4a !important;
}

/* ── filters — отдельный блок с фоном и рамкой ───────────── */
.light-style .d-flex.gap-3.mb-3 .filters.col {
  background-color: #ffffff !important;
  border: 1px solid #d4d4e0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-height: 54px !important;
}

/* filter_item_title фон совпадает с filters */
.light-style .react_admin .filters .filter_item .filter_item_title,
.light-style .filter_item_title {
  background-color: #ffffff !important;
  border: 1px solid #d4d4e0 !important;
  color: #8888a0 !important;
}

/* ── Карточка таблицы — белая с рамкой и тенью ───────────── */
.light-style .grid-default .card,
.light-style .grid-default .card.fade.show {
  background-color: #ffffff !important;
  border: 1px solid #d4d4e0 !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
  overflow: hidden !important;
}

.light-style .grid-default .card-body {
  padding: 0 !important;
}

/* ── Шапка таблицы внутри карточки ───────────────────────── */
.light-style .react_admin thead th {
  background-color: #f4f4f8 !important;
  color: #5a5a70 !important;
  border-bottom: 2px solid #d4d4e0 !important;
  border-right: 1px solid #e4e4ec !important;
  padding: 11px 10px !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА — ФИНАЛЬНАЯ ВЕРСИЯ (точная копия тёмной)
   Все значения padding/margin/border-radius взяты с тёмной.
   ============================================================ */

/* ── Сброс всех предыдущих светлых правил через переопределение */

/* Страница */
.light-style,
.light-style .layout-page,
.light-style .content-wrapper,
.light-style .layout-wrapper {
  background-color: #e8e8f0 !important;
}

/* content-wrapper — без своих padding */
.light-style .content-wrapper {
  padding: 0 !important;
}

/* container-p-y — только горизонтальные отступы как в тёмной (26px) */
.light-style .container-fluid.flex-grow-1.container-p-y,
.light-style .container-fluid.container-p-y {
  max-width: var(--tony-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}

/* ── Навбар — точно как тёмный, светлые цвета ───────────── */
.light-style .layout-menu-horizontal,
.light-style .bg-menu-theme {
  background-color: #ffffff !important;
  border-bottom: 1px solid #d4d4e0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.light-style .layout-menu-horizontal .container-fluid {
  max-width: var(--tony-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 26px !important;
  padding-right: 26px !important;
}

/* ── page-title-box — margin-bottom: 0 как в тёмной ─────── */
.light-style .page-title-box {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* ── grid-default — прозрачный, как в тёмной ─────────────── */
.light-style .grid-default {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* ── d-flex.gap-3.mb-3 — gap:16px, mb:16px как в тёмной ─── */
.light-style .d-flex.gap-3.mb-3 {
  flex-direction: row !important;
  align-items: normal !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

/* ── btn-group — прозрачный фон, padding:0, border:none ─── */
.light-style .d-flex.gap-3.mb-3 .btn-group {
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 6px !important;
}

/* Кнопки внутри btn-group — цвета тёмной → светлые аналоги */
.light-style .d-flex.gap-3.mb-3 .btn-group .btn {
  background-color: #f0f0f4 !important;
  border: 1px solid #d4d4e0 !important;
  color: #9a9aa8 !important;
  padding: 7px 14px !important;
}
.light-style .d-flex.gap-3.mb-3 .btn-group .btn:hover {
  background-color: #e4e4ec !important;
  color: #5a5a6e !important;
}

/* ── filters.col — точные размеры как в тёмной ───────────── */
.light-style .filters.col,
.light-style .d-flex.gap-3.mb-3 .filters.col {
  background-color: #f5f5f9 !important;
  border: 1px solid #d4d4e0 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  /* height будет auto как в тёмной */
}

/* filter_item_title */
.light-style .react_admin .filters .filter_item .filter_item_title,
.light-style .filter_item_title {
  background-color: #f5f5f9 !important;
  border: 1px solid #d4d4e0 !important;
  color: #8888a0 !important;
  font-size: 9px !important;
  font-weight: 500 !important;
}

/* ── card — фон, border-radius:8px, лёгкая тень ─────────── */
.light-style .grid-default .card,
.light-style .grid-default .card.fade.show {
  background-color: #ffffff !important;
  border: 1px solid #d4d4e0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
}

.light-style .grid-default .card-body {
  padding: 0 !important;
}

/* ── thead — точные значения с тёмной ───────────────────── */
.light-style .react_admin thead th {
  background-color: #f0f0f4 !important;
  color: #9a9aa8 !important;
  padding: 10px 8px !important;
  border-bottom: 2px solid #d4d4e0 !important;
  border-right: 1px solid #e4e4ec !important;
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* ── tbody — точные отступы, светлые цвета ──────────────── */
.light-style .react_admin tbody td {
  padding: 9px 8px !important;
  color: #2e2e3e !important;
  border-bottom: 1px solid #e4e4ec !important;
  border-right: 1px solid rgba(228,228,236,0.5) !important;
  font-size: 0.855rem !important;
  font-weight: 400 !important;
}

.light-style .react_admin tbody tr:nth-child(odd) td  { background-color: #ffffff !important; }
.light-style .react_admin tbody tr:nth-child(even) td { background-color: #f8f8fc !important; }

.light-style .react_admin tbody tr:hover td,
.light-style .react_admin tbody tr:last-child:hover td,
.light-style .react_admin tbody tr:last-child:nth-child(even):hover td,
.light-style .react_admin tbody tr:last-child:nth-child(odd):hover td {
  background-color: #eaeaf4 !important;
  color: #1a1a2e !important;
  cursor: pointer;
}

.light-style .react_admin tbody tr:last-child td {
  font-weight: 400 !important;
  border-top: none !important;
}

/* ── tfoot — точные отступы с тёмной ────────────────────── */
.light-style .react_admin tfoot tr:first-child {
  display: none !important;
  height: 0 !important;
  pointer-events: none !important;
}

.light-style .react_admin tfoot tr:last-child td {
  background-color: #f0f0f4 !important;
  color: #2e2e3e !important;
  font-weight: 600 !important;
  padding: 10px 8px !important;
  border-top: 2px solid #d4d4e0 !important;
  border-bottom: none !important;
}

.light-style .react_admin tfoot tr:last-child td:first-child::before {
  content: "ИТОГО";
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #9a9aaa;
  text-transform: uppercase;
  margin-bottom: 2px;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА — кнопки btn-group (точно как в тёмной)
   ============================================================ */

/* Сброс скруглений на самом btn-group */
.light-style .d-flex.gap-3.mb-3 .btn-group {
  border-radius: 6px !important;
}

/* Первая кнопка (обновить) — скругление только слева */
.light-style .d-flex.gap-3.mb-3 .btn-group .btn:first-child {
  background-color: #f0f0f4 !important;
  border: 1px solid #d4d4e0 !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  padding: 7px 20px !important;
  color: #9a9aa8 !important;
  font-size: 15px !important;
  height: 57px !important;
}
.light-style .d-flex.gap-3.mb-3 .btn-group .btn:first-child:hover {
  background-color: #e4e4ec !important;
  color: #5a5a6e !important;
}

/* Вторая кнопка (⋮) — скругление только справа */
.light-style .d-flex.gap-3.mb-3 .btn-group .btn:last-child,
.light-style .d-flex.gap-3.mb-3 .btn-group button {
  background-color: #f0f0f4 !important;
  border: 1px solid #d4d4e0 !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 7px 10.5px !important;
  color: #9a9aa8 !important;
  font-size: 15px !important;
  height: 57px !important;
}
.light-style .d-flex.gap-3.mb-3 .btn-group .btn:last-child:hover,
.light-style .d-flex.gap-3.mb-3 .btn-group button:hover {
  background-color: #e4e4ec !important;
  color: #5a5a6e !important;
}


/* ============================================================
   СВЕТЛАЯ ТЕМА — шестерёнка настройки колонок
   ============================================================
   В тёмной: top:-5px, right:-5px относительно .table-responsive
   Это помещает её над таблицей в правом углу, не поверх заголовка.
   В светлой из-за разных отступов карточки она съезжает на CTR.
   Фиксируем явным позиционированием.
   ============================================================ */
.light-style .hide_column_edit.position-absolute {
  top: -34px !important;
  right: 0px !important;
}


/* Уточнение позиции шестерёнки — поднимаем над thead */
.light-style .hide_column_edit.position-absolute {
  top: -5px !important;
  right: -5px !important;
}