/* Theme CSS Variables for synchronized dark/light mode switching */

/* Disable all transitions during theme switching for instant updates */
body.theme-switching * {
  transition: none !important;
}

/* Re-enable transitions after theme switching is complete */
body.theme-transition-complete * {
  transition: initial;
}

:root {
  /* Light theme variables */
  --theme-bg-primary: #ffffff;
  --theme-bg-secondary: #f8f9fa;
  --theme-bg-header: #ffffff;
  --theme-text-primary: #000000;
  --theme-text-secondary: #6c757d;
  --theme-border-primary: #000000;
  --theme-border-secondary: #e5e5e5;
  --theme-accent: #f27237;
  --theme-search-bg: #ffffff;
  --theme-search-text: #000000;
  --theme-button-bg: rgba(255, 255, 255, 0);
  --theme-button-text: #000000;
  --theme-button-border: #000000;
  --theme-card-bg: #ffffff;
  --theme-card-border: #e5e5e5;
  --theme-marquee-bg: #ffffff;
  --theme-marquee-text: #000000;
  --theme-footer-bg: #ffffff;
  --theme-footer-text: #000000;
  --theme-footer-link: #6c757d;
  --theme-moon-display: none;
  --theme-sun-display: block;
}

/* Dark theme variables */
body.dark-theme {
  --theme-bg-primary: #161616;
  --theme-bg-secondary: #161616;
  --theme-bg-header: #161616;
  --theme-text-primary: #ffffff;
  --theme-text-secondary: rgba(255, 255, 255, 0.6);
  --theme-border-primary: #ffffff;
  --theme-border-secondary: rgba(229, 229, 229, 0.18);
  --theme-accent: #f27237;
  --theme-search-bg: #161616;
  --theme-search-text: #ffffff;
  --theme-button-bg: rgba(255, 255, 255, 0);
  --theme-button-text: #ffffff;
  --theme-button-border: #ffffff;
  --theme-card-bg: rgba(94, 70, 59, 0.18);
  --theme-card-border: #161616;
  --theme-marquee-bg: #161616;
  --theme-marquee-text: #ffffff;
  --theme-footer-bg: #161616;
  --theme-footer-text: #ffffff;
  --theme-footer-link: rgba(255, 255, 255, 0.6);
  --theme-moon-display: block;
  --theme-sun-display: none;
}

/* Apply theme variables to body for instant background change */
body {
  background-color: var(--theme-bg-primary) !important;
  color: var(--theme-text-primary) !important;
  transition: none !important; /* Disable transitions for instant switching */
}

header .change-language {
  border-color: var(--theme-border-primary) !important;
}

header .change-language span.d-none.d-lg-block.p-1.text-center,
header .change-language span.d-lg-block.p-1.text-center {
  background-color: var(--theme-accent) !important;
}

header .toggle-night-light {
  border-color: var(--theme-border-primary) !important;
}

header #searchBox {
  background-color: var(--theme-search-bg) !important;
  color: var(--theme-search-text) !important;
}

header .search-box {
  background-color: var(--theme-search-bg) !important;
}

header .search-box .btn-upvote {
  background-color: var(--theme-bg-header) !important;
}

header .search-box .coin-name {
  color: var(--theme-text-primary) !important;
}

header .search-box .dark-symbol {
  color: var(--theme-text-secondary) !important;
}

header .search-box .dark-price {
  color: var(--theme-text-primary) !important;
}

header .search-box .background-search {
  background-color: #ff844c !important;
}

header a.nav-link.active {
  background-color: rgba(255, 255, 255, 0.9);
}

header button.btn.btn-header {
  background-color: var(--theme-button-bg) !important;
  color: var(--theme-button-text) !important;
}

header button.btn.btn-header i {
  color: var(--theme-button-text) !important;
}

header button.btn.btn-header svg path {
  fill: var(--theme-button-text) !important;
}

/* Theme toggle icons */
header .moon {
  display: var(--theme-moon-display) !important;
}

header .sun {
  display: var(--theme-sun-display) !important;
}

/* Marquee section */
.js-marquee {
  background-color: var(--theme-marquee-bg) !important;
}

.js-marquee span.fw-bold.align-self-center.me-2 {
  color: var(--theme-marquee-text) !important;
}

.js-marquee span.fw-bold.align-self-center.no1-number {
  color: var(--theme-text-secondary) !important;
}

/* Footer */
footer {
  background-color: var(--theme-footer-bg) !important;
}

footer h3 {
  color: var(--theme-footer-text) !important;
}

footer li.nav-item a {
  background-color: var(--theme-button-bg) !important;
  color: var(--theme-footer-text) !important;
}

footer .copyright {
  background-color: transparent;
  color: var(--theme-footer-link) !important;
}

/*footer svg :not(.social-footer){*/
/*  fill: var(--theme-footer-text) !important;*/
/*}*/

/*footer svg path :not(.social-footer){*/
/*  fill: var(--theme-footer-text) !important;*/
/*}*/

/*.social-footer{*/
/*  fill: white !important;*/
/*}*/

footer .footer-overlay {
  opacity: 0.8 !important;
}

footer .xiamlol {
  color: var(--theme-footer-text) !important;
}

/* Card themes */
.text-dark-theme {
  color: var(--theme-text-primary) !important;
}

.partner-ship-dark {
  background: linear-gradient(
    to right,
    #893f27 30%,
    var(--theme-bg-primary) 30%
  ) !important;
}

.partner-ship-dark .partner-card {
  border-color: var(--theme-border-primary) !important;
}

.partner-ship-dark .partner-card-body {
  background: rgb(0 0 0 / 0%) !important;
}

.partner-ship-dark .partner-card-body .name-size {
  color: var(--theme-text-primary) !important;
}

#btnPresale {
  background: var(--theme-bg-primary) !important;
  color: var(--theme-text-primary) !important;
}

.link_select {
  background-color: var(--theme-bg-primary) !important;
  color: var(--theme-text-primary);
}

span.select2-selection.select2-selection--single {
  background: var(--theme-bg-primary) !important;
  color: var(--theme-text-primary) !important;
}

span.select2-selection.select2-selection--single span {
  color: var(--theme-text-primary) !important;
}

.pane .text-light-theme {
  color: var(--theme-text-primary) !important;
}

.pane .card-theme {
  background-color: var(--theme-card-bg) !important;
  border: 1px solid var(--theme-card-border) !important;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2) !important;
  border-radius: 20px !important;
}

.dark-theme-card-body {
  background-color: var(--theme-card-bg) !important;
  border: 1px solid var(--theme-card-border) !important;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2) !important;
  border-radius: 20px !important;
}

.dark-theme-card-body th {
  color: var(--theme-text-primary);
}

.dark-theme-card-body .sticky-colfix {
  background-color: var(--theme-card-bg) !important;
}

.dark-theme-card-body .input-group input {
  background-color: rgba(22, 22, 22, 0.15) !important;
  color: var(--theme-text-primary) !important;
}

.dark-theme-card-body .changeFixed {
  background-color: #231f1d !important;
}

.dark-theme-card-body td {
  color: var(--theme-text-primary);
}

.dark-theme-card-body .dark-text {
  color: var(--theme-text-primary);
}

.dark-theme-card-body .dark-text-2 {
  color: var(--theme-text-secondary) !important;
}

.dark-theme-card-body button.btn.btn-primary.btn-upvote {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.dark-theme-card-body button.btn.btn-primary.btn-upvote span {
  color: var(--theme-text-primary);
}

.dark-theme-card-body #allCoin tbody tr:hover {
  background: gray !important;
}

.dark-theme-card-body #allCoin tbody tr:hover .sticky-colfix {
  background: gray !important;
}

.dark-theme-card-body #allCoin tbody tr:hover .changeFixed {
  background: gray !important;
}

.dark-theme-card-body #allCoin .boder-social svg {
  stroke: var(--theme-text-primary) !important;
}

.dark-theme-card-body #allCoin .boder-social i {
  color: var(--theme-text-primary) !important;
}

/* Hide scrollbar while keeping scroll functionality */
.hide-scrollbar {
  /* For Webkit browsers (Chrome, Safari, Edge) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Webkit browsers */
}

/* Ensure smooth scrolling on all devices */
.hide-scrollbar {
  -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
  scroll-behavior: smooth;
}

/* Text truncation utilities for coin list items */
.text-truncate-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specific truncation for coin list layout */
.coin-list-item {
  min-width: 0; /* Allow flex items to shrink below content size */
  align-items: flex-start; /* Align items to top instead of center */
}

.coin-name-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 175px; /* Adjust based on your design needs */
  line-height: 1.2; /* Consistent line height for better alignment */
}

.coin-symbol-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px; /* Adjust based on your design needs */
  line-height: 1.2; /* Consistent line height for better alignment */
}

.coin-price-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px; /* Adjust based on your design needs */
  line-height: 1.2; /* Consistent line height for better alignment */
}

.coin-percent-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px; /* Adjust based on your design needs */
  line-height: 1.2; /* Consistent line height for better alignment */
}

/* Button container spacing */
.coin-upvote-container {
  margin-left: 12px; /* Add consistent left margin */
  margin-right: 8px; /* Add right margin to prevent sticking to edge */
  flex-shrink: 0; /* Prevent button from shrinking */
}

/* Coin info columns alignment */
.coin-info-column {
  align-items: flex-start !important; /* Override Bootstrap's align-self-center */
  justify-content: flex-start;
}

.coin-price-column {
  align-items: flex-start !important; /* Override Bootstrap's align-self-center */
  justify-content: flex-start;
}