/**
 * BLACK-WORLD.NET theme for Sphere cabinet (personal account + admin).
 * Based on standard styles.css with gold/red dark overrides.
 */
@import url("styles.css");

:root,
html[style] {
  --bw-gold: #c6a66a;
  --bw-gold-rgb: 198, 166, 106;
  --bw-red-rgb: 142, 45, 45;
  --primary-rgb: 198, 166, 106 !important;
  --secondary-rgb: 142, 45, 45 !important;
  --body-bg-rgb: 5, 6, 8 !important;
  --body-bg-rgb2: 18, 8, 8 !important;
  --light-rgb: 5, 6, 8 !important;
  --form-control-bg: rgba(16, 8, 7, 0.92) !important;
  --input-border: rgba(198, 166, 106, 0.28) !important;
  --default-body-bg-color: rgb(5, 6, 8) !important;
  --primary-color: rgb(198, 166, 106) !important;
  --default-text-color: #fff3dc !important;
  --default-border: rgba(198, 166, 106, 0.28) !important;
  --header-bg: rgba(6, 6, 8, 0.94) !important;
  --menu-bg: rgba(5, 5, 7, 0.96) !important;
  --menu-prime-color: rgba(255, 243, 220, 0.78) !important;
  --bw-bg-img: url("/template/BlackWorld/images/bg/bg-main.png");
}

html,
body {
  min-height: 100%;
}

body,
body.has-video-bg {
  color: #fff3dc !important;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.88), rgba(18, 8, 8, 0.82)),
    var(--bw-bg-img) center top / cover fixed no-repeat !important;
}

/* Отключаем стандартные bgimg4 фоны Sphere */
[data-bg-img=bgimg1] .app-sidebar:before,
[data-bg-img=bgimg2] .app-sidebar:before,
[data-bg-img=bgimg3] .app-sidebar:before,
[data-bg-img=bgimg4] .app-sidebar:before,
[data-bg-img=bgimg5] .app-sidebar:before,
[data-menu-styles=transparent][data-bg-img=bgimg4] .app-sidebar:before,
.app-sidebar:before {
  background: linear-gradient(135deg, rgba(5, 5, 7, 0.96), rgba(35, 9, 8, 0.82)) !important;
  background-image: none !important;
  opacity: 1 !important;
}

.main-sidebar,
.main-menu-container {
  background: transparent !important;
}

/* Neon menu -> gold/red */
.glow-element:hover,
.glow-red:hover {
  box-shadow: 0 0 16px rgba(198, 166, 106, 0.35) !important;
}

.side-menu__item.text-success,
.side-menu__item.active {
  color: var(--bw-gold) !important;
}

.main-sidebar .card.custom-card.border-top-card {
  background: linear-gradient(135deg, rgba(6, 6, 8, 0.92), rgba(38, 10, 8, 0.8)) !important;
  border-color: rgba(198, 166, 106, 0.35) !important;
}

.modal-body .form-label.text-dark,
.modal-body .form-label.text-dark.fw-semibold {
  color: #fff3dc !important;
}

.alert-primary,
.custom-alert-icon.alert-primary {
  color: #fff3dc !important;
  background: linear-gradient(135deg, rgba(142, 45, 45, 0.22), rgba(6, 6, 8, 0.88)) !important;
  border-color: rgba(198, 166, 106, 0.35) !important;
}

.bg-info-transparent {
  background: rgba(198, 166, 106, 0.14) !important;
  color: var(--bw-gold) !important;
}

.bg-success-transparent {
  background: rgba(142, 45, 45, 0.22) !important;
  color: #fff3dc !important;
}

.bg-danger-transparent {
  background: rgba(142, 45, 45, 0.28) !important;
  color: #ffb4b4 !important;
}

.header-link.bg-info-transparent {
  border: 1px solid rgba(198, 166, 106, 0.35) !important;
}

.text-info {
  color: var(--bw-gold) !important;
}

.text-success {
  color: #8fd48f !important;
}

.text-warning {
  color: var(--bw-gold) !important;
}

.border-top-danger {
  border-top-color: rgba(198, 166, 106, 0.45) !important;
}

.main-header-dropdown,
.header-profile-dropdown {
  background: linear-gradient(135deg, rgba(5, 5, 7, 0.98), rgba(38, 10, 8, 0.92)) !important;
  border: 1px solid rgba(198, 166, 106, 0.28) !important;
}

.main-header-dropdown .dropdown-item,
.header-profile-dropdown .dropdown-item {
  color: #fff3dc !important;
}

.main-header-dropdown .dropdown-item:hover,
.header-profile-dropdown .dropdown-item:hover {
  background: rgba(198, 166, 106, 0.12) !important;
  color: #fff !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(198, 166, 106, 0.16) !important;
}

#twoFaQrCode img {
  border-color: rgba(198, 166, 106, 0.35) !important;
}

.main-content,
.app-content,
.page {
  background: transparent !important;
}

.app-sidebar,
.app-sidebar .main-sidebar,
.main-sidebar-header {
  background: linear-gradient(135deg, rgba(5, 5, 7, 0.96), rgba(35, 9, 8, 0.82)) !important;
  border-color: rgba(198, 166, 106, 0.3) !important;
  box-shadow: 0 0 22px -10px var(--bw-gold) !important;
}

.app-header,
.main-header-container {
  background: linear-gradient(135deg, rgba(6, 6, 8, 0.94), rgba(45, 10, 8, 0.82)) !important;
  border-bottom: 1px solid rgba(198, 166, 106, 0.28) !important;
  backdrop-filter: blur(8px);
}

.side-menu__item,
.side-menu__item .side-menu__label,
.side-menu__item .side-menu__icon {
  color: rgba(255, 243, 220, 0.88) !important;
}

.side-menu__item:hover,
.side-menu__item.active,
.side-menu__item:focus {
  background: linear-gradient(135deg, rgba(90, 21, 20, 0.78), rgba(24, 8, 7, 0.88)) !important;
  border-color: rgba(198, 166, 106, 0.48) !important;
  color: #fff !important;
}

.card.custom-card,
.card,
.modal-content,
.dropdown-menu,
.choices__inner,
.form-control,
.form-select {
  color: #fff3dc !important;
  background: linear-gradient(135deg, rgba(6, 6, 8, 0.92), rgba(38, 10, 8, 0.8)) !important;
  border: 1px solid rgba(198, 166, 106, 0.38) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.card.custom-card:hover,
.card:hover {
  border-color: rgba(255, 214, 128, 0.65) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.62), 0 0 24px rgba(198, 166, 106, 0.18) !important;
}

.card-header,
.card-footer,
.card-title,
.table,
.table td,
.table th {
  color: #fff3dc !important;
  border-color: rgba(198, 166, 106, 0.22) !important;
  background: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(198, 166, 106, 0.05) !important;
}

.btn-primary,
.bg-primary {
  background: linear-gradient(135deg, rgba(142, 45, 45, 0.95), rgba(90, 21, 20, 0.92)) !important;
  border-color: rgba(198, 166, 106, 0.45) !important;
  color: #fff3dc !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, rgba(198, 166, 106, 0.85), rgba(142, 45, 45, 0.92)) !important;
  color: #050608 !important;
}

.btn-secondary,
.btn-light {
  background: rgba(5, 5, 7, 0.65) !important;
  border-color: rgba(198, 166, 106, 0.28) !important;
  color: #fff3dc !important;
}

/* === BUTTONS (BLACK-WORLD style) === */

.btn,
.btn-group .btn {
  position: relative;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px !important;
  padding: 0.5rem 1rem !important;
  letter-spacing: 0.03em;
  box-shadow: 0 0 12px rgba(198, 166, 106, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: color 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn:hover::before {
  left: 130%;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-dark,
.btn-light {
  border: 1px solid rgba(198, 166, 106, 0.42) !important;
  background: linear-gradient(135deg, rgba(26, 13, 11, 0.96), rgba(90, 21, 20, 0.88)) !important;
  color: #fff3dc !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-info:hover,
.btn-info:focus,
.btn-dark:hover,
.btn-dark:focus {
  color: #fff !important;
  transform: translateY(-2px);
  border-color: rgba(255, 214, 128, 0.72) !important;
  background: linear-gradient(135deg, rgba(122, 30, 27, 0.96), rgba(198, 166, 106, 0.82)) !important;
  box-shadow: 0 0 18px rgba(198, 166, 106, 0.22) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #050608 !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light {
  color: var(--bw-gold) !important;
  border: 1px solid rgba(198, 166, 106, 0.45) !important;
  background: rgba(5, 5, 7, 0.35) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover,
.btn-outline-primary:focus,
.btn-outline-secondary:focus {
  color: #050608 !important;
  border-color: rgba(255, 214, 128, 0.72) !important;
  background: linear-gradient(135deg, rgba(198, 166, 106, 0.92), rgba(142, 45, 45, 0.88)) !important;
}

.btn-transparent,
.btn-ghost-primary,
.btn-ghost-secondary {
  color: var(--bw-gold) !important;
  border-color: rgba(198, 166, 106, 0.28) !important;
  background: transparent !important;
}

.btn-transparent:hover,
.btn-ghost-primary:hover,
.btn-ghost-secondary:hover {
  color: #fff !important;
  background: rgba(198, 166, 106, 0.12) !important;
  border-color: rgba(198, 166, 106, 0.48) !important;
}

.btn-check:active + .btn,
.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:active {
  color: #fff3dc !important;
}

.btn-icon {
  border-radius: 999px !important;
}

.page-header-breadcrumb .btn,
.card-footer .btn,
.modal-footer .btn {
  min-height: 36px;
}

.text-primary,
a:not(.btn) {
  color: var(--bw-gold) !important;
}

a:not(.btn):hover {
  color: #ffe4a8 !important;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(198, 166, 106, 0.65) !important;
  box-shadow: 0 0 0 0.2rem rgba(198, 166, 106, 0.18) !important;
}

.badge.bg-primary,
.badge.bg-secondary {
  background: rgba(142, 45, 45, 0.85) !important;
  color: #fff3dc !important;
}

.authentication .card.custom-card,
.sign-in-page .card,
.sign-up-page .card {
  backdrop-filter: blur(8px);
}

.page-header-breadcrumb h1,
.page-title,
.breadcrumb-item,
.breadcrumb-item.active {
  color: #fff3dc !important;
}

.simplebar-content-wrapper,
.choices__list--dropdown,
.dropdown-menu {
  background: linear-gradient(135deg, rgba(5, 5, 7, 0.96), rgba(38, 10, 8, 0.84)) !important;
}

[data-theme-mode=dark] .app-sidebar .main-sidebar-header .header-logo .desktop-dark {
  display: block !important;
}

[data-theme-mode=dark] .app-sidebar .main-sidebar-header .header-logo .desktop-logo,
[data-theme-mode=dark] .app-sidebar .main-sidebar-header .header-logo .toggle-logo {
  display: none !important;
}

.footer,
.app-footer {
  background: transparent !important;
  color: rgba(255, 243, 220, 0.55) !important;
  border-top: 1px solid rgba(198, 166, 106, 0.18) !important;
}

.modal-backdrop.show {
  opacity: 0.75 !important;
}

.alert {
  border-color: rgba(198, 166, 106, 0.35) !important;
}

.progress-bar {
  background: linear-gradient(90deg, rgba(142, 45, 45, 0.95), rgba(198, 166, 106, 0.95)) !important;
}

.pagination .page-item.active .page-link {
  background: rgba(198, 166, 106, 0.85) !important;
  border-color: rgba(198, 166, 106, 0.85) !important;
  color: #050608 !important;
}

.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, rgba(90, 21, 20, 0.78), rgba(24, 8, 7, 0.88)) !important;
  border-color: rgba(198, 166, 106, 0.45) !important;
  color: #fff !important;
}

.apexcharts-text,
.apexcharts-title-text,
.apexcharts-legend-text {
  fill: #fff3dc !important;
  color: #fff3dc !important;
}