/* Theme Dropdown Styling - Works across all themes */

/* Dropdown Container */
#page-header-themes-dropdown + .dropdown-menu {
  min-width: 320px !important;
  max-width: 400px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Header Section */
#page-header-themes-dropdown + .dropdown-menu .bg-body-light {
  border-radius: 8px 8px 0 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Theme Grid */
#page-header-themes-dropdown + .dropdown-menu .row {
  margin: 0 !important;
  padding: 0 8px !important;
}

#page-header-themes-dropdown + .dropdown-menu .col-2 {
  padding: 6px 4px !important;
}

/* Theme Buttons */
#page-header-themes-dropdown + .dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 8px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  min-height: 60px !important;
  position: relative !important;
}

#page-header-themes-dropdown + .dropdown-menu a:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

#page-header-themes-dropdown + .dropdown-menu a.active {
  background-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  border: 2px solid currentColor !important;
  position: relative !important;
}

#page-header-themes-dropdown + .dropdown-menu a.active::before {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #198754;
  color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(25, 135, 84, 0.3);
  border: 1px solid #fff;
}

/* Theme Icons */
#page-header-themes-dropdown + .dropdown-menu i.fa-circle {
  font-size: 2rem !important;
  transition: all 0.2s ease !important;
}

#page-header-themes-dropdown + .dropdown-menu a:hover i.fa-circle {
  transform: scale(1.1) !important;
}

/* Tooltip-like effect */
#page-header-themes-dropdown + .dropdown-menu a::after {
  content: attr(title);
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

#page-header-themes-dropdown + .dropdown-menu a:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Theme Colors - Based on actual theme primary colors */
/* Default theme uses Dashmix's primary blue color */
.text-default {
  color: #0665d0 !important;
}

.text-default:hover {
  color: #054a9e !important;
}

/* Arsha theme color - matching the actual theme colors */
.text-xarsha {
    color: #37517e !important; /* Primary blue from Arsha theme */
}

.text-xarsha:hover {
    color: #3d5885 !important; /* Secondary dark blue from Arsha theme */
}

/* Hoa Phat theme color - matching the actual theme colors */
.text-xhoaphat {
    color: #1e3a8a !important; /* Primary blue from Hoa Phat theme */
}

.text-xhoaphat:hover {
    color: #1362bd !important; /* Secondary darker red from Hoa Phat theme */
}

/* duplicate .text-default removed (keep the first declaration above) */

/* Work theme color - matching the actual theme colors */
.text-xwork {
    color: #6f42c1 !important; /* Purple from Work theme */
}

.text-xwork:hover {
    color: #5a32a3 !important; /* Darker purple on hover */
}

/* Play theme color - matching the actual theme colors */
.text-xplay {
    color: #fd7e14 !important; /* Orange from Play theme */
}

.text-xplay:hover {
    color: #e8690b !important; /* Darker orange on hover */
}

/* Eco theme color - matching the actual theme colors */
.text-xeco {
    color: #20c997 !important; /* Teal from Eco theme */
}

.text-xeco:hover {
    color: #1ba37e !important; /* Darker teal on hover */
}

/* Smooth theme color - matching the actual theme colors */
.text-xsmooth {
    color: #6c757d !important; /* Gray from Smooth theme */
}

.text-xsmooth:hover {
    color: #545b62 !important; /* Darker gray on hover */
}

/* Inspire theme color - matching the actual theme colors */
.text-xinspire {
    color: #e83e8c !important; /* Pink from Inspire theme */
}

.text-xinspire:hover {
    color: #c73e6b !important; /* Darker pink on hover */
}

/* Responsive adjustments */
@media (max-width: 576px) {
  #page-header-themes-dropdown + .dropdown-menu {
    min-width: 280px !important;
  }
  
  #page-header-themes-dropdown + .dropdown-menu .col-2 {
    padding: 4px 2px !important;
  }
  
  #page-header-themes-dropdown + .dropdown-menu a {
    padding: 8px 4px !important;
    min-height: 50px !important;
  }
  
  #page-header-themes-dropdown + .dropdown-menu i.fa-circle {
    font-size: 1.5rem !important;
  }
  
  #page-header-themes-dropdown + .dropdown-menu a.active::before {
    width: 14px !important;
    height: 14px !important;
    font-size: 8px !important;
    background-color: #198754 !important;
  }
}

/* Ensure dropdown appears above other elements */
#page-header-themes-dropdown + .dropdown-menu {
  z-index: 1050 !important;
}

/* Smooth transitions for all theme changes */
#page-header-themes-dropdown + .dropdown-menu a,
#page-header-themes-dropdown + .dropdown-menu i.fa-circle {
  transition: all 0.3s ease !important;
}