/* ============================================
   TSLA FINANCE — Premium White Dashboard
   Overrides the dark theme for user dashboard
   ============================================ */

:root {
  --tsla-gold: #D4A843;
  --tsla-gold-light: #F0DCA0;
  --tsla-gold-dark: #B8922F;
  --tsla-navy: #0A1628;
  --tsla-navy-light: #1A2A45;
  --tsla-white: #FFFFFF;
  --tsla-off-white: #F8F9FC;
  --tsla-gray-50: #F9FAFB;
  --tsla-gray-100: #F3F4F6;
  --tsla-gray-200: #E5E7EB;
  --tsla-gray-300: #D1D5DB;
  --tsla-gray-400: #9CA3AF;
  --tsla-gray-500: #6B7280;
  --tsla-gray-600: #4B5563;
  --tsla-gray-700: #374151;
  --tsla-gray-800: #1F2937;
  --tsla-success: #10B981;
  --tsla-danger: #EF4444;
  --tsla-info: #3B82F6;
  --tsla-warning: #F59E0B;
  --tsla-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --tsla-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --tsla-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --tsla-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --tsla-radius: 12px;
  --tsla-radius-sm: 8px;
}

/* ==========================================
   1. DASHBOARD HEADER
   ========================================== */
#header.header-inner-pages,
#header.fixed-top.header-inner-pages {
  background: var(--tsla-white) !important;
  border-bottom: 1px solid var(--tsla-gray-200) !important;
  box-shadow: var(--tsla-shadow-sm) !important;
  backdrop-filter: none !important;
}

#header .logo a img {
  filter: none !important;
}

#header .sidebar-open-btn {
  color: var(--tsla-gray-600) !important;
  background: var(--tsla-gray-100) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius-sm) !important;
  padding: 6px 10px !important;
  transition: all 0.2s ease !important;
}

#header .sidebar-open-btn:hover {
  background: var(--tsla-gray-200) !important;
  color: var(--tsla-navy) !important;
}

#header .user-toggle-menu {
  background: var(--tsla-gray-100) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: 50px !important;
  padding: 4px 12px 4px 4px !important;
  transition: all 0.2s ease !important;
}

#header .user-toggle-menu:hover {
  background: var(--tsla-gray-200) !important;
}

#header .user-toggle-menu span,
#header .text-white {
  color: var(--tsla-gray-700) !important;
}

#header .user-toggle-menu img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--tsla-gold) !important;
}

#header .changeLang {
  background: var(--tsla-gray-100) !important;
  color: var(--tsla-gray-700) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius-sm) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

#header .dropdown-menu {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius-sm) !important;
  box-shadow: var(--tsla-shadow-lg) !important;
  padding: 8px !important;
}

#header .dropdown-item {
  color: var(--tsla-gray-700) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
}

#header .dropdown-item:hover {
  background: var(--tsla-gray-100) !important;
  color: var(--tsla-navy) !important;
}

/* ==========================================
   2. SIDEBAR
   ========================================== */
.d-sidebar {
  background: var(--tsla-white) !important;
  border-right: 1px solid var(--tsla-gray-200) !important;
  box-shadow: var(--tsla-shadow) !important;
}

.d-sidebar-menu li a {
  color: var(--tsla-gray-600) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: var(--tsla-radius-sm) !important;
  margin: 2px 8px !important;
  transition: all 0.2s ease !important;
}

.d-sidebar-menu li a i {
  color: var(--tsla-gray-400) !important;
  width: 20px !important;
  text-align: center !important;
  margin-right: 10px !important;
  transition: color 0.2s ease !important;
}

.d-sidebar-menu li a:hover,
.d-sidebar-menu li.active > a {
  background: linear-gradient(135deg, rgba(212,168,67,0.08), rgba(212,168,67,0.15)) !important;
  color: var(--tsla-gold-dark) !important;
}

.d-sidebar-menu li a:hover i,
.d-sidebar-menu li.active > a i {
  color: var(--tsla-gold) !important;
}

.d-sidebar-menu .submenu {
  background: transparent !important;
}

.d-sidebar-menu .submenu li a {
  padding: 8px 16px 8px 46px !important;
  font-size: 13px !important;
  color: var(--tsla-gray-500) !important;
}

.d-sidebar-menu .submenu li a:hover,
.d-sidebar-menu .submenu li.active > a {
  color: var(--tsla-gold-dark) !important;
  background: rgba(212,168,67,0.06) !important;
}

/* Sidebar Plan Notice */
.d-plan-notice {
  background: linear-gradient(135deg, var(--tsla-gold), var(--tsla-gold-dark)) !important;
  color: var(--tsla-white) !important;
  border-radius: var(--tsla-radius) !important;
  padding: 16px !important;
  border: none !important;
}

.d-plan-notice p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 13px !important;
}

.d-plan-notice a {
  color: var(--tsla-white) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* ==========================================
   3. MAIN CONTENT AREA
   ========================================== */
.dashboard-main,
.dashboard-section,
main#main {
  background: var(--tsla-off-white) !important;
}

.dashboard-body-part {
  padding: 24px !important;
}

/* ==========================================
   4. STAT CARDS — Account Balance (Primary)
   ========================================== */
.d-box-one {
  background: linear-gradient(135deg, var(--tsla-navy), var(--tsla-navy-light)) !important;
  border-radius: var(--tsla-radius) !important;
  border: none !important;
  padding: 28px !important;
  box-shadow: var(--tsla-shadow-lg) !important;
  position: relative;
  overflow: hidden;
}

.d-box-one::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  background: rgba(212,168,67,0.15);
  border-radius: 50%;
}

.d-box-one .icon {
  background: rgba(212,168,67,0.2) !important;
  color: var(--tsla-gold) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.d-box-one .icon i {
  color: var(--tsla-gold) !important;
  font-size: 20px !important;
}

.d-box-one .caption-title {
  color: rgba(255,255,255,0.7) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.d-box-one .d-box-one-amount,
.d-box-one h3 {
  color: var(--tsla-white) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}

/* ==========================================
   5. STAT CARDS — Secondary (Withdraw, Deposit, etc.)
   ========================================== */
.d-box-three {
  background: var(--tsla-white) !important;
  border-radius: var(--tsla-radius) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  padding: 20px !important;
  box-shadow: var(--tsla-shadow) !important;
  transition: all 0.3s ease !important;
}

.d-box-three:hover {
  box-shadow: var(--tsla-shadow-md) !important;
  transform: translateY(-2px);
  border-color: var(--tsla-gold-light) !important;
}

.d-box-three .icon {
  background: var(--tsla-gray-100) !important;
  color: var(--tsla-gold) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.d-box-three .icon i {
  color: var(--tsla-gold) !important;
  font-size: 18px !important;
}

.d-box-three .caption-title {
  color: var(--tsla-gray-500) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.d-box-three .d-box-three-amount,
.d-box-three h3 {
  color: var(--tsla-navy) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

/* ==========================================
   6. STAT CARDS — Quaternary Row (Total Invest, etc.)
   ========================================== */
.d-box-four {
  background: var(--tsla-white) !important;
  border-radius: var(--tsla-radius) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  padding: 20px !important;
  box-shadow: var(--tsla-shadow) !important;
  transition: all 0.3s ease !important;
  position: relative;
}

.d-box-four:hover {
  box-shadow: var(--tsla-shadow-md) !important;
  transform: translateY(-2px);
  border-color: var(--tsla-gold-light) !important;
}

.d-box-four .link-btn {
  background: var(--tsla-gray-100) !important;
  color: var(--tsla-gray-500) !important;
  border-radius: 8px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--tsla-gray-200) !important;
  transition: all 0.2s ease !important;
}

.d-box-four .link-btn:hover {
  background: var(--tsla-gold) !important;
  color: var(--tsla-white) !important;
  border-color: var(--tsla-gold) !important;
}

.d-box-four .icon {
  background: var(--tsla-gray-100) !important;
  color: var(--tsla-gold) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.d-box-four .icon i {
  color: var(--tsla-gold) !important;
  font-size: 18px !important;
}

.d-box-four .caption-title {
  color: var(--tsla-gray-500) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.d-box-four .d-box-four-amount,
.d-box-four h3 {
  color: var(--tsla-navy) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ==========================================
   7. REFERRAL LINK INPUT
   ========================================== */
.dashboard-body-part label {
  color: var(--tsla-gray-700) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.dashboard-body-part .form-control,
.dashboard-body-part .copy-text {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  color: var(--tsla-gray-700) !important;
  border-radius: var(--tsla-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}

.dashboard-body-part .input-group-text,
.sp_theme_btn,
.dashboard-body-part .copy {
  background: var(--tsla-gold) !important;
  color: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gold) !important;
  border-radius: 0 var(--tsla-radius-sm) var(--tsla-radius-sm) 0 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.dashboard-body-part .input-group-text:hover,
.sp_theme_btn:hover {
  background: var(--tsla-gold-dark) !important;
  border-color: var(--tsla-gold-dark) !important;
}

/* ==========================================
   8. CARDS (General)
   ========================================== */
.card {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius) !important;
  box-shadow: var(--tsla-shadow) !important;
}

.card-header {
  background: var(--tsla-white) !important;
  border-bottom: 1px solid var(--tsla-gray-200) !important;
  padding: 16px 20px !important;
}

.card-header h5 {
  color: var(--tsla-navy) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.card-body {
  background: var(--tsla-white) !important;
  padding: 20px !important;
}

/* ==========================================
   9. REFERRAL TREE
   ========================================== */
.sp-referral .single-child {
  background: var(--tsla-gray-50) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius-sm) !important;
}

.sp-referral .single-child p span {
  color: var(--tsla-gray-700) !important;
}

.sub-child-list::before {
  background-color: var(--tsla-gray-300) !important;
}

.sub-child-list > .single-child::before {
  border-left-color: var(--tsla-gray-300) !important;
  border-bottom-color: var(--tsla-gray-300) !important;
}

/* ==========================================
   10. TABLES
   ========================================== */
.table {
  color: var(--tsla-gray-700) !important;
}

.table thead th {
  background: var(--tsla-gray-50) !important;
  color: var(--tsla-gray-500) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid var(--tsla-gray-200) !important;
  padding: 12px 16px !important;
}

.table tbody td {
  color: var(--tsla-gray-700) !important;
  border-bottom: 1px solid var(--tsla-gray-100) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
}

.table tbody tr:hover {
  background: var(--tsla-gray-50) !important;
}

/* ==========================================
   11. BUTTONS
   ========================================== */
.btn-primary,
.btn-premium,
.sp_theme_color {
  background: var(--tsla-gold) !important;
  border-color: var(--tsla-gold) !important;
  color: var(--tsla-white) !important;
  border-radius: var(--tsla-radius-sm) !important;
  font-weight: 600 !important;
  padding: 10px 24px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(212,168,67,0.3) !important;
}

.btn-primary:hover,
.btn-premium:hover,
.sp_theme_color:hover {
  background: var(--tsla-gold-dark) !important;
  border-color: var(--tsla-gold-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(212,168,67,0.4) !important;
}

.btn-secondary {
  background: var(--tsla-gray-100) !important;
  border-color: var(--tsla-gray-200) !important;
  color: var(--tsla-gray-700) !important;
  border-radius: var(--tsla-radius-sm) !important;
}

/* ==========================================
   12. FORMS
   ========================================== */
.form-control,
.form-select,
select.form-control {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  color: var(--tsla-gray-700) !important;
  border-radius: var(--tsla-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tsla-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,168,67,0.15) !important;
  outline: none !important;
}

.form-label,
label {
  color: var(--tsla-gray-700) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

/* ==========================================
   13. BADGES & STATUS
   ========================================== */
.badge {
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

.badge.bg-success, .badge-success {
  background: rgba(16,185,129,0.1) !important;
  color: var(--tsla-success) !important;
}

.badge.bg-danger, .badge-danger {
  background: rgba(239,68,68,0.1) !important;
  color: var(--tsla-danger) !important;
}

.badge.bg-warning, .badge-warning {
  background: rgba(245,158,11,0.1) !important;
  color: var(--tsla-warning) !important;
}

.badge.bg-info, .badge-info {
  background: rgba(59,130,246,0.1) !important;
  color: var(--tsla-info) !important;
}

/* ==========================================
   14. MODALS
   ========================================== */
.modal-content {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius) !important;
  box-shadow: var(--tsla-shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--tsla-gray-200) !important;
  padding: 16px 20px !important;
}

.modal-header h5 {
  color: var(--tsla-navy) !important;
  font-weight: 700 !important;
}

.modal-body {
  padding: 20px !important;
  color: var(--tsla-gray-700) !important;
}

.modal-footer {
  border-top: 1px solid var(--tsla-gray-200) !important;
  padding: 16px 20px !important;
}

/* ==========================================
   15. PAGINATION
   ========================================== */
.pagination .page-item .page-link {
  color: var(--tsla-gray-600) !important;
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius-sm) !important;
  margin: 0 2px !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
}

.pagination .page-item.active .page-link {
  background: var(--tsla-gold) !important;
  border-color: var(--tsla-gold) !important;
  color: var(--tsla-white) !important;
}

.pagination .page-item .page-link:hover {
  background: var(--tsla-gray-100) !important;
  color: var(--tsla-gold-dark) !important;
}

/* ==========================================
   16. EMPTY STATE
   ========================================== */
.far.fa-sad-tear {
  color: var(--tsla-gray-300) !important;
}

.text-center p {
  color: var(--tsla-gray-500) !important;
}

/* ==========================================
   17. SCROLLBAR
   ========================================== */
.d-sidebar::-webkit-scrollbar {
  width: 4px;
}

.d-sidebar::-webkit-scrollbar-track {
  background: var(--tsla-gray-100);
}

.d-sidebar::-webkit-scrollbar-thumb {
  background: var(--tsla-gray-300);
  border-radius: 4px;
}

.d-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--tsla-gray-400);
}

/* ==========================================
   18. MISC TEXT OVERRIDES
   ========================================== */
.text-white {
  color: var(--tsla-gray-700) !important;
}

/* Only override text-white in dashboard header, not in d-box-one */
.d-box-one .text-white,
.d-box-one * {
  color: inherit;
}

.d-box-one .caption-title {
  color: rgba(255,255,255,0.7) !important;
}

.d-box-one h3 {
  color: var(--tsla-white) !important;
}

/* ==========================================
   19. GATEWAY / PAYMENT PAGES
   ========================================== */
.gateway-card,
.payment-method-card {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius) !important;
  transition: all 0.3s ease !important;
}

.gateway-card:hover,
.payment-method-card:hover {
  border-color: var(--tsla-gold-light) !important;
  box-shadow: var(--tsla-shadow-md) !important;
}

/* ==========================================
   20. INVESTMENT PLAN CARDS
   ========================================== */
.plan-card,
.pricing-card,
.investment-card {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius) !important;
  box-shadow: var(--tsla-shadow) !important;
}

/* ==========================================
   21. TICKET / SUPPORT
   ========================================== */
.ticket-list .single-ticket {
  background: var(--tsla-white) !important;
  border: 1px solid var(--tsla-gray-200) !important;
  border-radius: var(--tsla-radius-sm) !important;
}

.ticket-header {
  background: var(--tsla-gray-50) !important;
  border-bottom: 1px solid var(--tsla-gray-200) !important;
}

/* ==========================================
   22. TEXT COLOR NORMALIZE
   ========================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--tsla-navy) !important;
}

/* Text colors are handled per-component below */

.dashboard-body-part h1,
.dashboard-body-part h2,
.dashboard-body-part h3,
.dashboard-body-part h4,
.dashboard-body-part h5,
.dashboard-body-part h6 {
  color: var(--tsla-navy) !important;
}

.dashboard-body-part p,
.dashboard-body-part span:not(.badge) {
  color: var(--tsla-gray-600);
}

/* ==========================================
   23. ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.d-box-one,
.d-box-three,
.d-box-four,
.card {
  animation: fadeInUp 0.5s ease forwards;
}

.d-box-three:nth-child(2) { animation-delay: 0.1s; }
.d-box-three:nth-child(3) { animation-delay: 0.2s; }
.d-box-three:nth-child(4) { animation-delay: 0.3s; }

/* ==========================================
   24. RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
  .dashboard-body-part {
    padding: 16px !important;
  }

  .d-box-one {
    padding: 20px !important;
  }

  .d-box-one h3 {
    font-size: 22px !important;
  }
}

/* ==========================================
   25. THEME TOGGLE BUTTON
   ========================================== */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background: var(--tsla-navy);
  color: var(--tsla-gold);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.dark-mode .theme-toggle {
  background: var(--tsla-gold);
  color: var(--tsla-navy);
}

/* ==========================================
   26. DARK MODE OVERRIDES
   ========================================== */
body.dark-mode {
  --dm-bg: #0D1117;
  --dm-surface: #161B22;
  --dm-surface-2: #1C2333;
  --dm-border: #30363D;
  --dm-border-light: #21262D;
  --dm-text: #E6EDF3;
  --dm-text-muted: #8B949E;
  --dm-text-subtle: #6E7681;
}

/* Dark: Main background */
body.dark-mode .dashboard-main,
body.dark-mode .dashboard-section,
body.dark-mode main#main {
  background: var(--dm-bg) !important;
}

/* Dark: Header */
body.dark-mode #header.header-inner-pages,
body.dark-mode #header.fixed-top.header-inner-pages {
  background: var(--dm-surface) !important;
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode #header .sidebar-open-btn {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}

body.dark-mode #header .user-toggle-menu {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode #header .user-toggle-menu span,
body.dark-mode #header .text-white {
  color: var(--dm-text) !important;
}

body.dark-mode #header .changeLang {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode #header .dropdown-menu {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode #header .dropdown-item {
  color: var(--dm-text-muted) !important;
}

body.dark-mode #header .dropdown-item:hover {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text) !important;
}

/* Dark: Sidebar */
body.dark-mode .d-sidebar {
  background: var(--dm-surface) !important;
  border-right-color: var(--dm-border) !important;
}

body.dark-mode .d-sidebar-menu li a {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .d-sidebar-menu li a i {
  color: var(--dm-text-subtle) !important;
}

body.dark-mode .d-sidebar-menu li a:hover,
body.dark-mode .d-sidebar-menu li.active > a {
  background: rgba(212,168,67,0.1) !important;
  color: var(--tsla-gold) !important;
}

body.dark-mode .d-sidebar-menu li a:hover i,
body.dark-mode .d-sidebar-menu li.active > a i {
  color: var(--tsla-gold) !important;
}

body.dark-mode .d-sidebar-menu .submenu li a {
  color: var(--dm-text-subtle) !important;
}

body.dark-mode .d-sidebar-menu .submenu li a:hover,
body.dark-mode .d-sidebar-menu .submenu li.active > a {
  color: var(--tsla-gold-light) !important;
}

/* Dark: Dashboard body */
body.dark-mode .dashboard-body-part {
  background: var(--dm-bg) !important;
}

/* Dark: Balance card stays dark (already looks good) */
body.dark-mode .d-box-one {
  background: linear-gradient(135deg, #0F1923, #162032) !important;
  border: 1px solid var(--dm-border) !important;
}

/* Dark: Secondary stat cards */
body.dark-mode .d-box-three {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .d-box-three:hover {
  border-color: rgba(212,168,67,0.3) !important;
}

body.dark-mode .d-box-three .icon {
  background: var(--dm-surface-2) !important;
}

body.dark-mode .d-box-three .caption-title {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .d-box-three h3,
body.dark-mode .d-box-three .d-box-three-amount {
  color: var(--dm-text) !important;
}

/* Dark: Quaternary stat cards */
body.dark-mode .d-box-four {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .d-box-four:hover {
  border-color: rgba(212,168,67,0.3) !important;
}

body.dark-mode .d-box-four .icon {
  background: var(--dm-surface-2) !important;
}

body.dark-mode .d-box-four .link-btn {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}

body.dark-mode .d-box-four .caption-title {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .d-box-four h3,
body.dark-mode .d-box-four .d-box-four-amount {
  color: var(--dm-text) !important;
}

/* Dark: Cards */
body.dark-mode .card {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .card-header {
  background: var(--dm-surface) !important;
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .card-header h5 {
  color: var(--dm-text) !important;
}

body.dark-mode .card-body {
  background: var(--dm-surface) !important;
}

/* Dark: Forms */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .copy-text {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .form-control:focus {
  border-color: var(--tsla-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,168,67,0.15) !important;
}

body.dark-mode label,
body.dark-mode .form-label {
  color: var(--dm-text-muted) !important;
}

/* Dark: Tables */
body.dark-mode .table {
  color: var(--dm-text) !important;
}

body.dark-mode .table thead th {
  background: var(--dm-surface-2) !important;
  color: var(--dm-text-muted) !important;
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .table tbody td {
  color: var(--dm-text-muted) !important;
  border-bottom-color: var(--dm-border-light) !important;
}

body.dark-mode .table tbody tr:hover {
  background: var(--dm-surface-2) !important;
}

/* Dark: Modals */
body.dark-mode .modal-content {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .modal-header {
  border-bottom-color: var(--dm-border) !important;
}

body.dark-mode .modal-header h5 {
  color: var(--dm-text) !important;
}

body.dark-mode .modal-body {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .modal-footer {
  border-top-color: var(--dm-border) !important;
}

/* Dark: Referral tree */
body.dark-mode .sp-referral .single-child {
  background: var(--dm-surface-2) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .sp-referral .single-child p span {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .sub-child-list::before {
  background-color: var(--dm-border) !important;
}

body.dark-mode .sub-child-list > .single-child::before {
  border-left-color: var(--dm-border) !important;
  border-bottom-color: var(--dm-border) !important;
}

/* Dark: Pagination */
body.dark-mode .pagination .page-item .page-link {
  background: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text-muted) !important;
}

body.dark-mode .pagination .page-item.active .page-link {
  background: var(--tsla-gold) !important;
  border-color: var(--tsla-gold) !important;
  color: var(--tsla-white) !important;
}

/* Dark: Text overrides */
body.dark-mode .dashboard-body-part h1,
body.dark-mode .dashboard-body-part h2,
body.dark-mode .dashboard-body-part h3,
body.dark-mode .dashboard-body-part h4,
body.dark-mode .dashboard-body-part h5,
body.dark-mode .dashboard-body-part h6 {
  color: var(--dm-text) !important;
}

body.dark-mode .dashboard-body-part p,
body.dark-mode .dashboard-body-part span:not(.badge) {
  color: var(--dm-text-muted) !important;
}

/* Dark: Scrollbar */
body.dark-mode .d-sidebar::-webkit-scrollbar-track {
  background: var(--dm-surface);
}

body.dark-mode .d-sidebar::-webkit-scrollbar-thumb {
  background: var(--dm-border);
}

body.dark-mode .d-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--dm-text-subtle);
}