/* Dark mode CSS variables and base styles */
:root {
  /* Light theme variables (default) */
  --background-color: #0B0C10;
  --primary-color: #45A29E;
  --secondary-color: #1F2833;
  --text-color: #C5C6C7;
  --primary-text-color: #C5C6C7;
  --secondary-text-color: #C5C6C7;
  --border-color: #0D1B2A;
  --card-background: #1F2833;
  --header-background-color: #1F2833;
  --footer-background-color: #0B0C10;
  --banner-overlay: rgba(11, 12, 16, 0.7);
  --card-box-shadow: 0px 10px 30px rgba(11, 12, 16, 0.3);
  
  /* Common accent colors */
  --accent-color: #45A29E;
  --accent-hover: #C3073F;
  --danger-color: #C3073F;
  --warning-color: #F3BA2F;
  --info-color: #45A29E;
  --banner-overlay: rgba(11, 12, 16, 0.7);
}

/* Dark theme variables */
.dark-mode {
  --background-color: #0B0C10;
  --primary-color: #45A29E;
  --secondary-color: #0D1B2A;
  --text-color: #C5C6C7;
  --primary-text-color: #C5C6C7;
  --secondary-text-color: #C5C6C7;
  --border-color: #0D1B2A;
  --card-background: #0D1B2A;
  --header-background-color: #0D1B2A;
  --footer-background-color: #0B0C10;
  --banner-overlay: rgba(11, 12, 16, 0.8);
  --card-box-shadow: 0px 10px 30px rgba(11, 12, 16, 0.5);
  --sidebar-background: #0D1B2A;
  --sidebar-icon-background: linear-gradient(rgba(13, 27, 42, 0.9) 0%, rgba(11, 12, 16, 0.1) 100%);
  --header-border-color: #0D1B2A;
}

/* Background and text colors */
.dark-mode {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Sidebar styles */
.dark-mode .sidebar {
  background-color: var(--sidebar-background);
}

/* Sidebar icon colors - using the same colors as light mode */
.dark-mode .sidebar-icon ul li a {
  color: var(--icon-color); /* Same as light mode */
  background: var(--sidebar-icon-background);
  border: 1px solid var(--icon-border-color);
}

.dark-mode .sidebar-icon ul li.active a {
  background: var(--nft-gradient-color); /* Same as light mode */
  color: #fff;
  border: 1px solid var(--nft-gradient-color);
}

.dark-mode .sidebar-icon ul li a:hover {
  background: var(--nft-gradient-color); /* Same as light mode */
  color: #fff;
}

/* Header styles */
.dark-mode .header-area {
  background-color: var(--header-background-color);
}

.dark-mode .menu-wrap {
  background-color: var(--header-background-color);
}

/* Main navigation */
.dark-mode .main-menu ul li a {
  color: var(--primary-text-color);
}

.dark-mode .main-menu ul li.active > a, 
.dark-mode .main-menu ul li a:hover, 
.dark-mode .main-menu ul li.menu-item-has-children:hover > a {
  color: var(--accent-color);
}

/* Dropdown menus */
.dark-mode .main-menu ul li .submenu {
  background: var(--card-background);
  border: 1px solid var(--border-color);
}

.dark-mode .main-menu ul li .submenu li a {
  color: var(--primary-text-color);
  border-bottom: 1px solid var(--border-color);
}

.dark-mode .main-menu ul li .submenu li a:hover {
  background: var(--secondary-color);
  color: var(--accent-color);
}

/* Card styles */
.dark-mode .card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
}

.dark-mode .product-card {
  background-color: var(--card-background);
}

/* Button styles */
.dark-mode .btn {
  background: var(--accent-color);
  color: white;
}

.dark-mode .btn-outline {
  background: transparent;
  color: var(--primary-text-color);
  border: 1px solid var(--border-color);
}

.dark-mode .btn-outline:hover {
  background: var(--accent-color);
  color: white;
}

/* Form elements */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background-color: var(--secondary-color);
  color: var(--primary-text-color);
  border: 1px solid var(--border-color);
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
  color: var(--secondary-text-color);
}

/* Modal styles */
.dark-mode .modal-content {
  background-color: var(--card-background);
}

.dark-mode .modal-header {
  border-bottom: 1px solid var(--border-color);
}

.dark-mode .modal-footer {
  border-top: 1px solid var(--border-color);
}

/* Table styles */
.dark-mode table {
  background-color: var(--card-background);
  color: var(--primary-text-color);
}

.dark-mode th {
  background-color: var(--secondary-color);
}

.dark-mode tr:nth-child(even) {
  background-color: var(--secondary-color);
}

/* Apply smooth transitions for all elements */
body, a, button, input, textarea, select, .card, .sidebar, .header-area, .footer-area, .main-content {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}