/* Custom Color Utilities */
.text-lime-custom {
  color: #d7ff00;
}

.bg-lime-custom {
  background-color: #d7ff00;
}

.border-lime-custom {
  border-color: #d7ff00;
}

.ring-lime-custom {
  --tw-ring-color: #d7ff00;
}

.hover\:bg-lime-custom\/90:hover {
  background-color: rgba(215, 255, 0, 0.9);
}

.focus\:ring-lime-custom:focus {
  --tw-ring-color: #d7ff00;
}

.focus\:border-lime-custom:focus {
  border-color: #d7ff00;
}

.bg-dark-bg {
  background-color: #0f1419;
}

.bg-dark-surface {
  background-color: #1a1f26;
}

.text-dark-bg {
  color: #0f1419;
}

.dark .dark\:bg-dark-bg {
  background-color: #0f1419;
}

.dark .dark\:bg-dark-surface {
  background-color: #1a1f26;
}

.dark .dark\:text-white {
  color: white;
}

.dark .dark\:border-gray-700 {
  border-color: rgb(55, 65, 81);
}

.dark .dark\:border-gray-800 {
  border-color: rgb(31, 41, 55);
}

/* Remove blue browser outline globally */
* {
  outline: none !important;
}

*:focus {
  outline: none !important;
}

/* Custom focus styles using ring */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
}

/* Radix Tabs active state styles */
[data-state="active"] {
  background-color: white !important;
  border-left-color: #d7ff00 !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.dark [data-state="active"] {
  background-color: #161b21 !important;
}

/* Active tab icon color */
[data-state="active"] i {
  color: #d7ff00 !important;
}

/* Override icon colors in Settings Integrations */
#settings-root .ri-dropbox-fill {
  color: #0061FF !important;
}

#settings-root .ri-telegram-fill {
  color: #0088cc !important;
}

#settings-root .ri-link-unlink-m {
  color: #9ca3af !important;
}

/* Global button cursor */
button {
  cursor: pointer;
}
button[role="switch"] {
  all: unset;
  width: 36px;
  height: 20px;
  background-color: #9ca3af !important;
  border-radius: 9999px;
  position: relative;
  transition: background-color 200ms;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.dark button[role="switch"] {
  background-color: #4b5563 !important;
}

button[role="switch"]:focus {
  outline: none;
}

button[role="switch"][data-state="checked"] {
  background-color: #d7ff00 !important;
}

.dark button[role="switch"][data-state="checked"] {
  background-color: #d7ff00 !important;
}

button[role="switch"] > span {
  display: block;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 9999px;
  transition: transform 200ms;
  transform: translateX(2px);
  will-change: transform;
}

button[role="switch"][data-state="checked"] > span {
  transform: translateX(18px);
  background-color: #0f1419;
}