/* =============================================
   BLACK & GOLD THEME — Admin & User Panel
   Overrides for QuixLab Bootstrap Theme
   ============================================= */

:root {
  --coin-gold: #FFD700;
  --coin-amber: #FF8C00;
  --coin-bronze: #CD7F32;
  --coin-dark: #B8860B;
  --dark-bg: #000000;
  --dark-card: #0A0A0A;
  --dark-surface: #111111;
  --dark-border: #1F1F1F;
  --dark-hover: #1A1A1A;
  --text-primary: #FFFFFF;
  --text-secondary: #A0A0A0;
  --text-muted: #6B7280;
}

/* === BODY === */
body {
  background-color: var(--dark-bg) !important;
  color: var(--text-secondary);
}

/* === GRADIENTS === */
.gradient_one {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
}
.gold-gradient {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
}

/* === NAV HEADER (Logo area) === */
.nav-header {
  background-color: #000000 !important;
  border-bottom: 1px solid var(--dark-border);
}
.nav-header .brand-logo {
  color: #FFD700 !important;
}
.nav-header .brand-title {
  filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1000%) hue-rotate(0deg);
  /* Makes white logo images appear gold */
}
[data-theme-version="dark"] .nav-header .brand-title {
  color: #FFD700 !important;
}

/* === HEADER (Top bar) === */
.header {
  background: #000000 !important;
  border-bottom: 1px solid var(--dark-border) !important;
}
.header .header-content {
  background: #000000 !important;
}
.header .navbar {
  background: #000000 !important;
}
.header-right .nav-item .nav-link {
  color: var(--text-secondary) !important;
}
.header-right .nav-item .nav-link:hover {
  color: var(--coin-gold) !important;
}
.header-right .notification_dropdown .nav-link i,
.header-right .header-profile > a i {
  color: var(--text-secondary) !important;
}
.header-right .notification_dropdown .nav-link:hover i {
  color: var(--coin-gold) !important;
}
.header-right .dropdown-menu {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
}
.header-right .dropdown-item {
  color: var(--text-secondary) !important;
}
.header-right .dropdown-item:hover {
  background: var(--dark-hover) !important;
  color: var(--coin-gold) !important;
}
.header-right .dropdown-item i {
  color: var(--coin-gold) !important;
}

/* === SIDEBAR === */
.quixnav {
  background-color: #0A0A0A !important;
  border-right: 1px solid var(--dark-border) !important;
  box-shadow: none !important;
}
.quixnav .metismenu > li > a {
  color: #9CA3AF !important;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}
.quixnav .metismenu > li > a > i {
  color: #6B7280 !important;
  transition: all 0.2s ease;
}
.quixnav .metismenu > li:hover > a,
.quixnav .metismenu > li:focus > a,
.quixnav .metismenu > li.mm-active > a {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
  border-left-color: #FFD700;
}
.quixnav .metismenu > li:hover > a > i,
.quixnav .metismenu > li:focus > a > i,
.quixnav .metismenu > li.mm-active > a > i {
  color: #000000 !important;
}
.quixnav .metismenu ul {
  background-color: #111111 !important;
}
.quixnav .metismenu ul a {
  color: #9CA3AF !important;
  padding-left: 54px !important;
}
.quixnav .metismenu ul a:hover,
.quixnav .metismenu ul a:focus,
.quixnav .metismenu ul a.mm-active {
  color: var(--coin-gold) !important;
  background: rgba(255, 215, 0, 0.05) !important;
}
.quixnav .metismenu .has-arrow:after {
  border-color: #9CA3AF !important;
}
.quixnav .metismenu .has-arrow[aria-expanded=true]:after,
.quixnav .metismenu .mm-active > .has-arrow:after {
  border-color: #000000 !important;
}
.quixnav .metismenu .nav-label {
  color: #6B7280 !important;
}
.quixnav .metismenu li.mm-active ul {
  background-color: rgba(255, 215, 0, 0.03) !important;
}

/* === SIDEBAR MINI MODE === */
[data-sidebar-style="mini"] .quixnav .metismenu > li:hover > a {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
}

/* === HAMBURGER MENU === */
.nav-control .hamburger .line {
  background: var(--text-secondary) !important;
}
.nav-control .hamburger:hover .line {
  background: var(--coin-gold) !important;
}

/* === CARDS === */
.card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 10px;
}
.card-header {
  background: var(--dark-surface) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  color: var(--text-primary) !important;
}
.card-footer {
  background: var(--dark-surface) !important;
  border-top: 1px solid var(--dark-border) !important;
}
.card-body {
  color: var(--text-secondary);
}
.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  color: var(--text-primary) !important;
}

/* === COMP CARD === */
.comp-card {
  background: linear-gradient(145deg, #0A0A0A, #111111) !important;
  border: 1px solid rgba(255, 215, 0, 0.15) !important;
  transition: all 0.3s ease;
}
.comp-card:hover {
  border-color: rgba(255, 215, 0, 0.4) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.08) !important;
}

/* === BUTTONS === */
.btn-primary {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  border: none !important;
  color: #000000 !important;
  font-weight: 600 !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #FFA500, #FFD700) !important;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3) !important;
  transform: translateY(-1px);
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.3) !important;
}

/* === BG PRIMARY === */
.bg-primary {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
}
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background: linear-gradient(135deg, #FFA500, #FFD700) !important;
}

/* === TEXT COLORS === */
.text-primary {
  color: var(--coin-gold) !important;
}
.text-c-blue {
  color: var(--coin-gold) !important;
}
.text-c-yellow {
  color: var(--coin-amber) !important;
}
.text-dark {
  color: var(--text-primary) !important;
}

/* === ALERTS === */
.alert {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--text-secondary) !important;
}
.alert-success {
  border-left: 4px solid #10B981 !important;
}
.alert-danger {
  border-left: 4px solid #EF4444 !important;
}
.alert-warning {
  border-left: 4px solid var(--coin-amber) !important;
}

/* === TABLES === */
.table {
  color: var(--text-secondary) !important;
}
.table thead th {
  border-bottom: 2px solid var(--dark-border) !important;
  color: var(--text-primary) !important;
}
.table td, .table th {
  border-top: 1px solid var(--dark-border) !important;
}
.table-hover tbody tr:hover {
  background: var(--dark-hover) !important;
  color: var(--text-primary) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.02) !important;
}
.dataTable td {
  background: transparent !important;
}
.dataTable .sorting_1 {
  background: rgba(255, 215, 0, 0.03) !important;
}

/* === FORMS === */
.form-control {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--text-primary) !important;
}
.form-control:focus {
  border-color: var(--coin-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.15) !important;
  background: var(--dark-hover) !important;
}
.form-control::placeholder {
  color: #6B7280 !important;
}
label {
  color: var(--text-secondary) !important;
}

/* === AUTH PAGES === */
.authincation {
  background: #000000 !important;
}
.authincation-content {
  background: #0A0A0A !important;
  border: 1px solid rgba(255, 215, 0, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
.auth-form {
  background: transparent !important;
}
.auth-form h4 {
  color: var(--coin-gold) !important;
  font-weight: 700 !important;
}
.auth-form .form-group {
  margin-bottom: 1.5rem;
}
.auth-form label {
  color: var(--text-secondary) !important;
  font-weight: 500;
}
.auth-form .form-control {
  background: #111111 !important;
  border: 1px solid #1F1F1F !important;
  color: white !important;
  padding: 12px 16px;
  border-radius: 8px;
}
.auth-form .form-control:focus {
  border-color: var(--coin-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1) !important;
}
.auth-form .btn {
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
}
.auth-form .new-account p {
  color: var(--text-secondary) !important;
}
.auth-form .new-account a {
  color: var(--coin-gold) !important;
  font-weight: 500;
}
.auth-form .new-account a:hover {
  color: var(--coin-amber) !important;
  text-decoration: underline;
}

/* === INPUT GROUP FOR PASSWORD TOGGLE === */
.input-group-text {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
  border: none !important;
}

/* === BREADCRUMB === */
.breadcrumb {
  background: transparent !important;
}
.breadcrumb-item a {
  color: var(--coin-gold) !important;
}
.breadcrumb-item.active {
  color: var(--text-secondary) !important;
}

/* === PAGINATION === */
.page-link {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--text-secondary) !important;
}
.page-link:hover {
  background: var(--dark-hover) !important;
  color: var(--coin-gold) !important;
}
.page-item.active .page-link {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  border-color: #FFD700 !important;
  color: #000000 !important;
}

/* === MODAL === */
.modal-content {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
}
.modal-header {
  border-bottom: 1px solid var(--dark-border) !important;
}
.modal-footer {
  border-top: 1px solid var(--dark-border) !important;
}
.close {
  color: var(--text-primary) !important;
}

/* === DROPDOWNS === */
.dropdown-menu {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
}
.dropdown-item {
  color: var(--text-secondary) !important;
}
.dropdown-item:hover {
  background: var(--dark-hover) !important;
  color: var(--coin-gold) !important;
}

/* === SWEETALERT2 === */
.swal2-popup {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
}
.swal2-title {
  color: var(--text-primary) !important;
}
.swal2-content {
  color: var(--text-secondary) !important;
}

/* === NOTIFICATIONS === */
.pulse-css {
  background: var(--coin-gold) !important;
}
.notify-time {
  color: var(--text-muted) !important;
}

/* === DATA TABLES === */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--text-secondary) !important;
}
.dataTables_wrapper .dataTables_filter input {
  background: var(--dark-surface) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--text-primary) !important;
}

/* === MISC === */
.text-white {
  color: #FFFFFF !important;
}
.page-titles h4 {
  color: var(--text-primary) !important;
}
.page-titles span {
  color: var(--text-secondary) !important;
}
.welcome-text h4 {
  color: var(--text-primary) !important;
}
.welcome-text span {
  color: var(--text-secondary) !important;
}
hr {
  border-color: var(--dark-border) !important;
}

/* === NAV LABEL === */
.nav-label {
  color: #6B7280 !important;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 12px 20px 4px !important;
}
.nav-label.first {
  margin-top: 0;
}

/* === PRELOADER === */
#preloader {
  background: #000000 !important;
}
.sk-three-bounce .sk-child {
  background: var(--coin-gold) !important;
}

/* === BADGE === */
.badge-primary {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
}

/* === PROGRESS === */
.progress {
  background: var(--dark-border) !important;
}
.progress-bar {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
}

/* === TOASTR === */
.toast-success {
  background: linear-gradient(135deg, #FFD700, #FF8C00) !important;
  color: #000000 !important;
}
.toast-success .toast-title,
.toast-success .toast-message {
  color: #000000 !important;
}

/* === LIST GROUP === */
.list-group-item {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--text-secondary) !important;
}

/* === NAV TABS === */
.nav-tabs {
  border-bottom: 1px solid var(--dark-border) !important;
}
.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
}
.nav-tabs .nav-link:hover {
  border-color: transparent !important;
  color: var(--coin-gold) !important;
}
.nav-tabs .nav-link.active {
  background: var(--dark-surface) !important;
  border-color: var(--dark-border) !important;
  border-bottom-color: var(--coin-gold) !important;
  color: var(--coin-gold) !important;
}

/* === CAROUSEL === */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}

/* === SCROLLBAR === */
.quixnav-scroll::-webkit-scrollbar {
  width: 4px;
}
.quixnav-scroll::-webkit-scrollbar-track {
  background: #0A0A0A;
}
.quixnav-scroll::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}
.quixnav-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === CONTAINER FLUID INSIDE CONTENT === */
.content-body .container-fluid {
  padding: 20px 30px;
}

/* === NGB-ACCORDION / CUSTOM ACCORDION === */
.accordion .card {
  background: var(--dark-card) !important;
}