/* =====================================================================
   FiFi Dark Theme — единая тёмная тема для админ-панели
   Палитра взята с лендинга FiFi. Только оформление, разметку/функции
   не меняем. Файл подключается ПОСЛЕДНИМ, поэтому переопределяет
   custom-design.css и inline-стили (через !important там, где нужно).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --fifi-bg:          #04061a;
  --fifi-bg-2:        #070a20;
  --fifi-surface:     #0b0e28;
  --fifi-surface-2:   #10143113;
  --fifi-elevated:    #12163a;
  --fifi-border:      rgba(218, 220, 255, 0.10);
  --fifi-border-2:    rgba(218, 220, 255, 0.18);
  --fifi-text:        #F4F5FF;
  --fifi-muted:       rgba(218, 220, 255, 0.62);
  --fifi-faint:       rgba(218, 220, 255, 0.42);

  --fifi-yellow:      #F8FD01;
  --fifi-yellow-2:    #cfe000;
  --fifi-violet:      #9B5BFF;
  --fifi-violet-2:    #7D2FE0;
  --fifi-green:       #00E08A;
  --fifi-red:         #ff5b7a;
  --fifi-orange:      #ffb020;
  --fifi-cyan:        #35d0ff;

  --fifi-radius:      16px;
  --fifi-radius-sm:   11px;
  --fifi-shadow:      0 18px 44px -24px rgba(0, 0, 0, 0.85);
  --fifi-glow-violet: 0 0 0 1px rgba(155, 91, 255, 0.35), 0 14px 40px -18px rgba(125, 47, 224, 0.55);
}

/* ===================== БАЗА ===================== */
body {
  background-color: var(--fifi-bg) !important;
  color: var(--fifi-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-image:
    radial-gradient(1100px 620px at 82% -8%, rgba(125, 47, 224, 0.14), transparent 60%),
    radial-gradient(900px 520px at -6% 4%, rgba(248, 253, 1, 0.05), transparent 55%) !important;
  background-attachment: fixed !important;
}

.container-scroller,
.page-body-wrapper,
.main-panel,
.content-wrapper {
  background: transparent !important;
}

/* Прелоадер — тёмный фон вместо белого (перебиваем inline-стиль) */
#preloader { background-color: var(--fifi-bg) !important; }

h1, h2, h3, h4, h5, h6,
.card-title, .page-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  color: var(--fifi-text) !important;
  letter-spacing: -0.3px;
}

a { color: var(--fifi-violet); }
a:hover { color: var(--fifi-yellow); }

.text-muted, .page-subtitle, small.text-muted { color: var(--fifi-muted) !important; }
.text-dark { color: var(--fifi-text) !important; }
hr { border-color: var(--fifi-border) !important; }

/* Скроллбар */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--fifi-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(155, 91, 255, 0.35);
  border-radius: 20px;
  border: 3px solid var(--fifi-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(155, 91, 255, 0.6); }
* { scrollbar-color: rgba(155,91,255,.4) var(--fifi-bg); }

/* ===================== NAVBAR (топбар) ===================== */
.navbar,
.navbar .navbar-menu-wrapper {
  background: rgba(6, 8, 30, 0.86) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--fifi-border) !important;
}
/* Убираем светлое свечение под шапкой (наследие светлого шаблона) */
.navbar {
  box-shadow: 0 1px 0 var(--fifi-border), 0 8px 24px -18px rgba(0, 0, 0, 0.9) !important;
}
.navbar .navbar-brand-wrapper {
  background: rgba(6, 8, 30, 0.86) !important;
  border-bottom: 1px solid var(--fifi-border) !important;
  border-right: 1px solid var(--fifi-border) !important;
}
.navbar .navbar-toggler { color: var(--fifi-text) !important; }
.navbar .navbar-menu-wrapper .navbar-toggler,
.navbar .navbar-menu-wrapper .navbar-toggler i { color: var(--fifi-muted) !important; }

/* Бренд FiFi в топбаре — реальный логотип */
.navbar .navbar-brand.brand-logo img {
  display: inline-block !important;
  height: 34px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
}
.navbar .navbar-brand.brand-logo-mini img {
  display: inline-block !important;
  height: 34px !important;
  width: 34px !important;
  border-radius: 9px !important;
  object-fit: contain !important;
}
.navbar .nav-profile img {
  border: 1px solid var(--fifi-border-2);
  background: var(--fifi-elevated);
  padding: 2px;
}

/* ===================== SIDEBAR ===================== */
.sidebar {
  background: linear-gradient(180deg, #070a22, #05071b) !important;
  border-right: 1px solid var(--fifi-border) !important;
}
.sidebar .nav .nav-item .nav-link {
  color: var(--fifi-muted) !important;
  border-radius: 12px !important;
  margin: 2px 12px !important;
  transition: all 0.18s ease !important;
}
.sidebar .nav .nav-item .nav-link .menu-title { color: inherit !important; }
.sidebar .nav .nav-item .nav-link i,
.sidebar .nav .nav-item .nav-link [class*="mdi"],
.sidebar .nav .nav-item .nav-link .menu-icon { color: inherit !important; }
.sidebar .nav .nav-item .nav-link:hover {
  background: rgba(155, 91, 255, 0.12) !important;
  color: var(--fifi-text) !important;
}
.sidebar .nav .nav-item.active > .nav-link {
  background: linear-gradient(135deg, rgba(155, 91, 255, 0.22), rgba(125, 47, 224, 0.12)) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--fifi-yellow);
}
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link [class*="mdi"] { color: var(--fifi-yellow) !important; }
.sidebar .nav.sub-menu .nav-item .nav-link {
  color: var(--fifi-faint) !important;
}
.sidebar .nav.sub-menu .nav-item .nav-link.active,
.sidebar .nav.sub-menu .nav-item .nav-link:hover { color: var(--fifi-text) !important; }

/* ===================== КАРТОЧКИ ===================== */
.card {
  background: linear-gradient(180deg, rgba(218,220,255,0.045), rgba(218,220,255,0.02)) !important;
  background-color: var(--fifi-surface) !important;
  border: 1px solid var(--fifi-border) !important;
  border-radius: var(--fifi-radius) !important;
  box-shadow: var(--fifi-shadow) !important;
  color: var(--fifi-text) !important;
}
.card-header {
  background: rgba(218, 220, 255, 0.03) !important;
  border-bottom: 1px solid var(--fifi-border) !important;
  color: var(--fifi-text) !important;
  border-radius: var(--fifi-radius) var(--fifi-radius) 0 0 !important;
}
.card-body { color: var(--fifi-text) !important; }
.card-footer {
  background: rgba(218, 220, 255, 0.03) !important;
  border-top: 1px solid var(--fifi-border) !important;
}

/* Статистические карточки на дашборде */
.stats-card { position: relative; overflow: hidden; }
.stats-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 160px; height: 160px;
  background: radial-gradient(circle at 80% 10%, rgba(155, 91, 255, 0.18), transparent 62%);
  pointer-events: none;
}
.stats-card h3 { color: var(--fifi-text) !important; font-weight: 700 !important; }

/* Иконки-боксы на карточках статистики */
.icon-box-success, .icon-box-primary, .icon-box-warning,
.icon-box-danger, .icon-box-info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 15px !important;
  width: 52px; height: 52px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.icon-box-success {
  background: linear-gradient(135deg, rgba(0, 224, 138, 0.24), rgba(0, 224, 138, 0.08)) !important;
  color: var(--fifi-green) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 224, 138, 0.30), 0 10px 22px -12px rgba(0, 224, 138, 0.5) !important;
}
.icon-box-primary {
  background: linear-gradient(135deg, rgba(155, 91, 255, 0.26), rgba(155, 91, 255, 0.09)) !important;
  color: var(--fifi-violet) !important;
  box-shadow: inset 0 0 0 1px rgba(155, 91, 255, 0.32), 0 10px 22px -12px rgba(155, 91, 255, 0.55) !important;
}
.icon-box-warning {
  background: linear-gradient(135deg, rgba(248, 253, 1, 0.22), rgba(248, 253, 1, 0.07)) !important;
  color: var(--fifi-yellow) !important;
  box-shadow: inset 0 0 0 1px rgba(248, 253, 1, 0.28), 0 10px 22px -12px rgba(248, 253, 1, 0.4) !important;
}
.icon-box-danger {
  background: linear-gradient(135deg, rgba(255, 91, 122, 0.24), rgba(255, 91, 122, 0.08)) !important;
  color: var(--fifi-red) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 91, 122, 0.30), 0 10px 22px -12px rgba(255, 91, 122, 0.5) !important;
}
.icon-box-info {
  background: linear-gradient(135deg, rgba(53, 208, 255, 0.24), rgba(53, 208, 255, 0.08)) !important;
  color: var(--fifi-cyan) !important;
  box-shadow: inset 0 0 0 1px rgba(53, 208, 255, 0.30), 0 10px 22px -12px rgba(53, 208, 255, 0.5) !important;
}
.card:hover .icon-box-success, .card:hover .icon-box-primary,
.card:hover .icon-box-warning, .card:hover .icon-box-danger,
.card:hover .icon-box-info { transform: translateY(-1px) scale(1.03); }
.icon-box-success .icon-item, .icon-box-primary .icon-item,
.icon-box-warning .icon-item, .icon-box-danger .icon-item,
.icon-box-info .icon-item {
  color: inherit !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

/* ===================== КНОПКИ ===================== */
.btn {
  border-radius: var(--fifi-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}
.btn:active { transform: translateY(1px); }
.btn:focus { box-shadow: 0 0 0 3px rgba(155, 91, 255, 0.35) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--fifi-violet), var(--fifi-violet-2)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 12px 30px -14px rgba(125, 47, 224, 0.75) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: linear-gradient(135deg, #a86dff, #8a3df0) !important;
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(135deg, #12e59a, #05b877) !important;
  border: none !important; color: #04120c !important;
}
.btn-success:hover { background: linear-gradient(135deg, #2af0a8, #08c982) !important; color: #04120c !important; }

.btn-warning {
  background: linear-gradient(135deg, var(--fifi-yellow), var(--fifi-yellow-2)) !important;
  border: none !important; color: #0b0a26 !important;
}
.btn-warning:hover { background: linear-gradient(135deg, #fbff3a, #d9ec00) !important; color: #0b0a26 !important; }

.btn-danger {
  background: linear-gradient(135deg, #ff6b86, #e83b5c) !important;
  border: none !important; color: #fff !important;
}
.btn-danger:hover { background: linear-gradient(135deg, #ff829a, #f04766) !important; color: #fff !important; }

.btn-info {
  background: linear-gradient(135deg, #47d6ff, #1fa9e6) !important;
  border: none !important; color: #04121a !important;
}
.btn-info:hover { color: #04121a !important; }

.btn-secondary,
.btn-light {
  background: rgba(218, 220, 255, 0.07) !important;
  border: 1px solid var(--fifi-border-2) !important;
  color: var(--fifi-text) !important;
}
.btn-secondary:hover, .btn-light:hover { background: rgba(218, 220, 255, 0.13) !important; color: #fff !important; }
.btn-light.bg-white { background: rgba(218,220,255,0.07) !important; color: var(--fifi-text) !important; }

/* Outline-кнопки */
.btn-outline-primary   { color: var(--fifi-violet) !important; border: 1px solid rgba(155,91,255,.5) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--fifi-violet) !important; color: #fff !important; }
.btn-outline-secondary { color: var(--fifi-muted) !important; border: 1px solid var(--fifi-border-2) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: rgba(218,220,255,.12) !important; color: #fff !important; }
.btn-outline-success   { color: var(--fifi-green) !important; border: 1px solid rgba(0,224,138,.5) !important; background: transparent !important; }
.btn-outline-success:hover { background: var(--fifi-green) !important; color: #04120c !important; }
.btn-outline-danger    { color: var(--fifi-red) !important; border: 1px solid rgba(255,91,122,.5) !important; background: transparent !important; }
.btn-outline-danger:hover { background: var(--fifi-red) !important; color: #fff !important; }
.btn-outline-warning   { color: var(--fifi-yellow) !important; border: 1px solid rgba(248,253,1,.5) !important; background: transparent !important; }
.btn-outline-warning:hover { background: var(--fifi-yellow) !important; color: #0b0a26 !important; }
.btn-outline-info      { color: var(--fifi-cyan) !important; border: 1px solid rgba(53,208,255,.5) !important; background: transparent !important; }
.btn-outline-info:hover { background: var(--fifi-cyan) !important; color: #04121a !important; }

/* ===================== ТАБЛИЦЫ ===================== */
.table-responsive {
  border: 1px solid var(--fifi-border) !important;
  border-radius: var(--fifi-radius) !important;
  background: transparent !important;
}
.table {
  background: transparent !important;
  color: var(--fifi-text) !important;
  border-color: var(--fifi-border) !important;
}
/* Нейтрализуем светлый .table-light/.thead-light из Bootstrap (иначе шапка
   таблицы получает светлый фон/тёмный текст поверх тёмной темы). */
.table > :not(caption) > * > *,
.table-light,
.table-light > th,
.table-light > td,
.thead-light th {
  --bs-table-color: var(--fifi-text) !important;
  --bs-table-bg: transparent !important;
  --bs-table-border-color: var(--fifi-border) !important;
}
/* Сам элемент thead/строка с классом table-light держит захардкоженный
   светлый фон (#fdfdfe) — гасим его, тёмный фон задаём на ячейках th. */
thead.table-light,
tr.table-light,
.table > thead.table-light,
.table-light,
.thead-light {
  background-color: transparent !important;
}
.table thead th,
.table > thead > tr > th,
thead.table-light th,
thead.thead-light th {
  background-color: #171b3f !important;
  background-image: linear-gradient(180deg, rgba(155, 91, 255, 0.14), rgba(155, 91, 255, 0.04)) !important;
  color: #eef0ff !important;
  border-bottom: 1px solid var(--fifi-border-2) !important;
  border-top: none !important;
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: 0.6px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.table tbody td {
  background: transparent !important;
  color: var(--fifi-text) !important;
  border-top: 1px solid var(--fifi-border) !important;
  vertical-align: middle !important;
}
/* th-метки строк внутри tbody (напр. «ID:», «Email:» в карточках профиля) —
   не шапка таблицы, поэтому без тёмного фона, но со светлым читаемым текстом. */
.table tbody th {
  background: transparent !important;
  background-image: none !important;
  color: var(--fifi-muted) !important;
  border-top: 1px solid var(--fifi-border) !important;
  border-bottom: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
}
.table tbody tr { transition: background 0.15s ease; }
/* Ховер строки: нейтрализуем светлый Bootstrap --bs-table-hover-bg (#f5f7ff),
   иначе строка под курсором становится почти белой. */
.table-hover > tbody > tr:hover > *,
.table-hover tbody tr:hover,
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th,
.table tbody tr:hover,
.table tbody tr:hover td {
  --bs-table-hover-bg: rgba(155, 91, 255, 0.10) !important;
  --bs-table-accent-bg: rgba(155, 91, 255, 0.10) !important;
  background-color: rgba(155, 91, 255, 0.10) !important;
  color: var(--fifi-text) !important;
}
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(218, 220, 255, 0.025) !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--fifi-border) !important; }

/* ===================== БЕЙДЖИ ===================== */
.badge { font-weight: 700 !important; border-radius: 999px !important; letter-spacing: 0.3px; }
.badge-primary, .bg-primary { background: rgba(155, 91, 255, 0.18) !important; color: #c6a9ff !important; }
.badge-success, .bg-success { background: rgba(0, 224, 138, 0.18) !important; color: #4ff0b4 !important; }
.badge-danger,  .bg-danger  { background: rgba(255, 91, 122, 0.18) !important; color: #ff8ea3 !important; }
.badge-warning, .bg-warning { background: rgba(248, 253, 1, 0.16) !important; color: var(--fifi-yellow) !important; }
.badge-info,    .bg-info    { background: rgba(53, 208, 255, 0.16) !important; color: #7fe0ff !important; }
.badge-secondary, .bg-secondary { background: rgba(218, 220, 255, 0.12) !important; color: var(--fifi-muted) !important; }
.badge.bg-warning.text-dark, .bg-warning.text-dark { color: #0b0a26 !important; background: var(--fifi-yellow) !important; }

/* Цветные текстовые утилиты */
.text-primary { color: var(--fifi-violet) !important; }
.text-success { color: var(--fifi-green) !important; }
.text-danger  { color: var(--fifi-red) !important; }
.text-warning { color: var(--fifi-yellow) !important; }
.text-info    { color: var(--fifi-cyan) !important; }
.text-white   { color: #fff !important; }

/* Мягкие фоновые утилиты */
.bg-light { background: rgba(218, 220, 255, 0.05) !important; color: var(--fifi-text) !important; }
.bg-white { background: var(--fifi-surface) !important; }
.bg-light-primary { background: rgba(155, 91, 255, 0.12) !important; }
.bg-gradient, .bg-success.bg-gradient { background-image: none !important; }

/* ===================== ФОРМЫ ===================== */
.form-control, .form-select, .custom-select,
textarea, select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"],
input[type="url"], input[type="date"] {
  background: rgba(4, 6, 26, 0.6) !important;
  border: 1px solid var(--fifi-border-2) !important;
  color: var(--fifi-text) !important;
  border-radius: var(--fifi-radius-sm) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--fifi-faint) !important; }
.form-control:focus, .form-select:focus, textarea:focus, select:focus {
  background: rgba(4, 6, 26, 0.8) !important;
  border-color: var(--fifi-violet) !important;
  box-shadow: 0 0 0 3px rgba(155, 91, 255, 0.28) !important;
  color: var(--fifi-text) !important;
}
.form-control:disabled, .form-control[readonly] { background: rgba(218, 220, 255, 0.05) !important; color: var(--fifi-muted) !important; }
label, .form-label, .col-form-label { color: var(--fifi-muted) !important; }
.form-select option, select option { background: var(--fifi-elevated) !important; color: var(--fifi-text) !important; }
.input-group-text {
  background: rgba(218, 220, 255, 0.06) !important;
  border: 1px solid var(--fifi-border-2) !important;
  color: var(--fifi-muted) !important;
}
/* ===================== ЧЕКБОКСЫ И РАДИО ===================== */
/* Единый аккуратный вид. Сбрасываем absolute-позиционирование Bootstrap 4,
   из-за которого чекбоксы «вылезали» за пределы ячейки/карточки. */
.form-check-input,
input[type="checkbox"]:not([role="switch"]),
input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: static !important;
  float: none !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  vertical-align: middle !important;
  background-color: rgba(4, 6, 26, 0.6) !important;
  background-image: none !important;
  border: 1.5px solid var(--fifi-border-2) !important;
  cursor: pointer !important;
  flex-shrink: 0;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form-check-input[type="checkbox"],
input[type="checkbox"]:not([role="switch"]) { border-radius: 5px !important; }
.form-check-input[type="radio"],
input[type="radio"] { border-radius: 50% !important; }

.form-check-input:hover,
input[type="checkbox"]:not([role="switch"]):hover,
input[type="radio"]:hover { border-color: var(--fifi-violet) !important; }

.form-check-input:focus,
input[type="checkbox"]:not([role="switch"]):focus,
input[type="radio"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(155, 91, 255, 0.30) !important;
}

.form-check-input:checked,
input[type="checkbox"]:not([role="switch"]):checked,
input[type="radio"]:checked {
  background-color: var(--fifi-violet) !important;
  border-color: var(--fifi-violet) !important;
}

/* Галочка */
.form-check-input[type="checkbox"]:checked::after,
input[type="checkbox"]:not([role="switch"]):checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  margin: 1px auto 0;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Точка для радио */
.form-check-input[type="radio"]:checked::after,
input[type="radio"]:checked::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: #fff;
}

/* Промежуточное состояние (выбраны не все) */
.form-check-input:indeterminate,
input[type="checkbox"]:not([role="switch"]):indeterminate {
  background-color: var(--fifi-violet) !important;
  border-color: var(--fifi-violet) !important;
}
.form-check-input:indeterminate::after,
input[type="checkbox"]:not([role="switch"]):indeterminate::after {
  content: "";
  display: block;
  width: 9px;
  height: 2px;
  margin: 7px auto 0;
  background: #fff;
  border: none;
  transform: none;
}

/* ===================== ИНДИКАТОР ОНЛАЙН ===================== */
.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--fifi-green);
  box-shadow: 0 0 0 0 rgba(0, 224, 138, 0.6);
  animation: fifi-online-pulse 1.8s infinite;
}
@keyframes fifi-online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 224, 138, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 224, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 224, 138, 0); }
}

/* ===================== ВКЛАДКИ / НАВ ===================== */
.nav-tabs { border-bottom: 1px solid var(--fifi-border) !important; }
.nav-tabs .nav-item .nav-link,
.nav-tabs .nav-link,
.nav-tabs button.nav-link {
  color: var(--fifi-muted) !important;
  background: rgba(218, 220, 255, 0.04) !important;
  border: 1px solid var(--fifi-border) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  margin-right: 4px;
}
.nav-tabs .nav-link:hover { color: var(--fifi-text) !important; background: rgba(155, 91, 255, 0.10) !important; }
.nav-tabs .nav-link.active,
.nav-tabs button.nav-link.active {
  color: var(--fifi-yellow) !important;
  background: var(--fifi-elevated) !important;
  border-color: var(--fifi-border-2) !important;
  border-bottom: 2px solid var(--fifi-yellow) !important;
}
.nav-pills .nav-link { color: var(--fifi-muted) !important; }
.nav-pills .nav-link.active { background: linear-gradient(135deg, var(--fifi-violet), var(--fifi-violet-2)) !important; color: #fff !important; }
.tab-content { color: var(--fifi-text) !important; }

/* ===================== СКРЫТЬ ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ===================== */
/* Единая тёмная тема — старая панель смены скинов/цветов не нужна. */
.theme-setting-wrapper,
#settings-trigger,
#theme-settings,
.settings-panel,
.demo-config-wrapper { display: none !important; }

/* ===================== УБИРАЕМ ЛИШНИЕ БЕЛЫЕ ЭЛЕМЕНТЫ ===================== */
.bg-white,
.card.bg-white,
.bg-light,
.card.bg-light {
  background-color: var(--fifi-surface) !important;
  background-image: none !important;
  color: var(--fifi-text) !important;
}
.text-dark, .text-black, .text-body { color: var(--fifi-text) !important; }
.text-secondary, .text-muted { color: var(--fifi-muted) !important; }
.border, .border-light, .border-secondary { border-color: var(--fifi-border) !important; }
hr { border-color: var(--fifi-border) !important; opacity: 1 !important; }

/* Инлайн-код / выделения / блоки кода — тёмный стиль вместо светлого */
code, kbd, samp, tt {
  background: rgba(155, 91, 255, 0.14) !important;
  color: #d9c6ff !important;
  border: 1px solid var(--fifi-border) !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
}
mark { background: rgba(248, 253, 1, 0.20) !important; color: var(--fifi-text) !important; }
pre {
  background: var(--fifi-bg-2) !important;
  color: var(--fifi-text) !important;
  border: 1px solid var(--fifi-border) !important;
  border-radius: var(--fifi-radius-sm) !important;
  padding: 12px 14px !important;
}
pre code { background: transparent !important; border: none !important; padding: 0 !important; }
.badge-light, .badge.bg-light {
  background: rgba(218, 220, 255, 0.12) !important;
  color: var(--fifi-text) !important;
}

/* Превью push-уведомления (send.blade.php) — захардкоженный белый #fff в
   инлайн-стилях. Переопределяем на тёмную карточку в стиле FiFi. */
.notification-preview {
  background: var(--fifi-elevated) !important;
  border: 1px solid var(--fifi-border-2) !important;
  border-radius: var(--fifi-radius-sm) !important;
  box-shadow: inset 0 0 0 1px rgba(155, 91, 255, 0.06), var(--fifi-shadow) !important;
}
.notification-preview .preview-header,
.notification-preview .preview-header strong { color: var(--fifi-text) !important; }
.notification-preview .preview-message { color: var(--fifi-muted) !important; }
.notification-preview .preview-time { border-top: 1px solid var(--fifi-border) !important; }

/* Хлебные крошки — тёмный фон вместо светлого #f8f9fa */
.breadcrumb {
  background: var(--fifi-surface) !important;
  border: 1px solid var(--fifi-border) !important;
  border-radius: var(--fifi-radius-sm) !important;
}
.breadcrumb-item,
.breadcrumb-item a { color: var(--fifi-muted) !important; text-decoration: none !important; }
.breadcrumb-item a:hover { color: var(--fifi-violet) !important; }
.breadcrumb-item.active { color: var(--fifi-text) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fifi-faint) !important; }

/* ===================== МОДАЛКИ / ДРОПДАУНЫ ===================== */
.modal-content {
  background: var(--fifi-elevated) !important;
  border: 1px solid var(--fifi-border-2) !important;
  border-radius: var(--fifi-radius) !important;
  color: var(--fifi-text) !important;
}
.modal-header {
  background: rgba(218, 220, 255, 0.03) !important;
  border-bottom: 1px solid var(--fifi-border) !important;
  color: var(--fifi-text) !important;
}
.modal-footer {
  background: rgba(218, 220, 255, 0.03) !important;
  border-top: 1px solid var(--fifi-border) !important;
}
.modal-title { color: var(--fifi-text) !important; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.dropdown-menu {
  background: var(--fifi-elevated) !important;
  border: 1px solid var(--fifi-border-2) !important;
  border-radius: 12px !important;
  box-shadow: var(--fifi-shadow) !important;
}
.dropdown-item { color: var(--fifi-muted) !important; }
.dropdown-item:hover { background: rgba(155, 91, 255, 0.16) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--fifi-border) !important; }

/* ===================== АЛЕРТЫ ===================== */
.alert { border-radius: var(--fifi-radius-sm) !important; border: 1px solid var(--fifi-border) !important; }
.alert-success { background: rgba(0, 224, 138, 0.10) !important; border-color: rgba(0, 224, 138, 0.4) !important; color: #6bf2c1 !important; }
.alert-danger  { background: rgba(255, 91, 122, 0.10) !important; border-color: rgba(255, 91, 122, 0.4) !important; color: #ff9db0 !important; }
.alert-warning { background: rgba(248, 253, 1, 0.08) !important; border-color: rgba(248, 253, 1, 0.4) !important; color: #f4f88a !important; }
.alert-info    { background: rgba(53, 208, 255, 0.10) !important; border-color: rgba(53, 208, 255, 0.4) !important; color: #9be6ff !important; }
.border-left-warning { border-left: 4px solid var(--fifi-yellow) !important; }
.border-left-primary { border-left: 4px solid var(--fifi-violet) !important; }

/* ===================== ПАГИНАЦИЯ ===================== */
.page-link {
  background: rgba(218, 220, 255, 0.05) !important;
  border: 1px solid var(--fifi-border) !important;
  color: var(--fifi-muted) !important;
  border-radius: 10px !important;
}
.page-link:hover {
  background: rgba(155, 91, 255, 0.2) !important;
  border-color: var(--fifi-violet) !important;
  color: #fff !important;
}
.page-item.active .page-link {
  background: linear-gradient(135deg, var(--fifi-violet), var(--fifi-violet-2)) !important;
  border-color: var(--fifi-violet) !important;
  color: #fff !important;
}
.page-item.disabled .page-link { background: rgba(218,220,255,.03) !important; color: var(--fifi-faint) !important; }

/* ===================== DATATABLES ===================== */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { color: var(--fifi-muted) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(4, 6, 26, 0.6) !important;
  border: 1px solid var(--fifi-border-2) !important;
  color: var(--fifi-text) !important;
  border-radius: 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--fifi-muted) !important;
  border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(135deg, var(--fifi-violet), var(--fifi-violet-2)) !important;
  border: none !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(155, 91, 255, 0.2) !important;
  border-color: transparent !important; color: #fff !important;
}

/* ===================== ФУТЕР ===================== */
.footer {
  background: transparent !important;
  border-top: 1px solid var(--fifi-border) !important;
  color: var(--fifi-muted) !important;
}
.footer a { color: var(--fifi-violet) !important; }

/* ===================== SWEETALERT2 ===================== */
.swal2-popup {
  background: var(--fifi-elevated) !important;
  color: var(--fifi-text) !important;
  border: 1px solid var(--fifi-border-2) !important;
  border-radius: var(--fifi-radius) !important;
}
.swal2-title, .swal2-html-container { color: var(--fifi-text) !important; }
.swal2-styled.swal2-confirm {
  background: linear-gradient(135deg, var(--fifi-violet), var(--fifi-violet-2)) !important;
  border-radius: var(--fifi-radius-sm) !important;
}
.swal2-styled.swal2-cancel {
  background: rgba(218, 220, 255, 0.12) !important;
  border-radius: var(--fifi-radius-sm) !important;
}

/* ===================== ЛОГИН ===================== */
.auth.content-wrapper,
.full-page-wrapper {
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(125, 47, 224, 0.28), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(248, 253, 1, 0.07), transparent 55%),
    var(--fifi-bg) !important;
  min-height: 100vh;
}
.auth-form-light {
  background: linear-gradient(180deg, rgba(218, 220, 255, 0.05), rgba(218, 220, 255, 0.02)) !important;
  background-color: var(--fifi-surface) !important;
  border: 1px solid var(--fifi-border-2) !important;
  border-radius: 22px !important;
  box-shadow: var(--fifi-shadow) !important;
  color: var(--fifi-text) !important;
}
.auth-form-light h4 {
  font-family: 'Space Grotesk', sans-serif !important;
  color: var(--fifi-text) !important;
}
.auth-form-light h6 { color: var(--fifi-muted) !important; }
.auth-form-light .brand-logo::after {
  content: "FiFi";
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--fifi-yellow);
  letter-spacing: -1px;
  margin-bottom: 6px;
}
.auth-form-light .form-control-lg {
  background: rgba(4, 6, 26, 0.55) !important;
  border: 1px solid var(--fifi-border-2) !important;
  color: var(--fifi-text) !important;
}
.auth-form-btn {
  background: linear-gradient(135deg, var(--fifi-yellow), var(--fifi-yellow-2)) !important;
  border: none !important;
  color: #0b0a26 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 14px 34px -14px rgba(248, 253, 1, 0.55) !important;
}
.auth-form-btn:hover { background: linear-gradient(135deg, #fbff3a, #d9ec00) !important; color: #0b0a26 !important; }
.auth-link { color: var(--fifi-muted) !important; }

/* ===================== ПРОЧЕЕ ===================== */
.list-group-item {
  background: transparent !important;
  border-color: var(--fifi-border) !important;
  color: var(--fifi-text) !important;
}
.progress { background: rgba(218, 220, 255, 0.08) !important; border-radius: 999px !important; }
.progress-bar { background: linear-gradient(135deg, var(--fifi-violet), var(--fifi-violet-2)) !important; }
code, pre {
  background: rgba(4, 6, 26, 0.7) !important;
  color: var(--fifi-yellow) !important;
  border-radius: 8px;
}
.text-black { color: var(--fifi-text) !important; }
.avatar-sm, .bg-light-primary { color: var(--fifi-violet) !important; }

/* =====================================================================
   ПОЛИРОВКА UI — аккуратность, ритм, удобство для администратора
   ===================================================================== */

/* --- Ритм карточек: единые отступы и заголовки --- */
.card-body { padding: 1.35rem 1.5rem; }
.card-header { padding: 1rem 1.5rem; font-weight: 600; }
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .card-title { margin-bottom: 0 !important; }
.page-title { margin-bottom: 0.25rem; }

/* --- Таблицы: комфортная плотность и выравнивание --- */
.table thead th { padding: 0.8rem 1rem !important; }
.table tbody td {
  padding: 0.7rem 1rem !important;
  line-height: 1.35 !important;
}
.table tbody td small,
.table tbody td .small,
.table tbody td .text-muted { line-height: 1.25; }
/* Плавный ховер строки не «прыгает» по высоте */
.table tbody tr { transition: background 0.15s ease; }

/* --- Колонка действий: аккуратная группа отдельных кнопок-чипов --- */
.btn-group-mobile {
  display: inline-flex !important;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.btn-group-mobile > .btn,
.btn-group-mobile > .btn:first-child,
.btn-group-mobile > .btn:last-child {
  border-radius: 9px !important;
}
td .btn.btn-sm i, td .btn i { pointer-events: none; }

/* --- Пагинация: фирменный фиолетовый активный пункт (перебиваем синий) --- */
.pagination .page-item.active .page-link,
ul.pagination .page-item.active .page-link,
.pagination .page-item.active span.page-link {
  background: linear-gradient(135deg, var(--fifi-violet), var(--fifi-violet-2)) !important;
  border-color: var(--fifi-violet) !important;
  color: #fff !important;
}

/* --- Комфортные поля ввода --- */
.form-control, .form-select, .custom-select { padding: 0.55rem 0.85rem; }
.form-control-lg { padding: 0.7rem 1rem; }

/* =====================================================================
   СВЕТЛЫЕ ВНУТРЕННОСТИ МОДАЛОК (экспорт, фильтры, формат, выбор цели)
   — приводим к тёмной теме FiFi, чтобы не «резало глаз» при открытии
   ===================================================================== */
.export-option-card .option-content,
.format-card .format-content,
.target-option .target-content,
.filter-chip {
  background: rgba(4, 6, 26, 0.45) !important;
  border-color: var(--fifi-border-2) !important;
  color: var(--fifi-text) !important;
}
.export-option-card:hover .option-content,
.format-card:hover .format-content,
.target-option:hover .target-content,
.filter-chip:hover {
  background: rgba(155, 91, 255, 0.12) !important;
  border-color: rgba(155, 91, 255, 0.5) !important;
}
.export-option-card input[type="radio"]:checked + .option-content,
.format-card input[type="radio"]:checked + .format-content,
.target-option input[type="radio"]:checked + .target-content,
.filter-radio:checked + .filter-chip {
  background: rgba(155, 91, 255, 0.18) !important;
  border-color: var(--fifi-violet) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(155, 91, 255, 0.2) !important;
}
.export-option-card .option-icon,
.format-card .format-icon {
  background: var(--fifi-elevated) !important;
  color: var(--fifi-violet) !important;
  box-shadow: none !important;
}
.option-text strong,
.format-card .format-label { color: var(--fifi-text) !important; }
.option-text small,
.format-card .format-desc { color: var(--fifi-muted) !important; }
.export-option-card .option-check { border-color: var(--fifi-border-2) !important; }
.export-option-card input[type="radio"]:checked + .option-content .option-check {
  background: var(--fifi-violet) !important;
  border-color: var(--fifi-violet) !important;
  color: #fff !important;
}
[id^="editUserModal"] .border-top { border-color: var(--fifi-border) !important; }
[id^="editUserModal"] .input-group .btn { border-color: var(--fifi-border-2) !important; }
[id^="editUserModal"] .input-group .btn:hover { background-color: rgba(218, 220, 255, 0.08) !important; }