/* Custom Color Utilities */
:root {
  --lime-text: #d7ff00;          /* lime text – dark bg */
  --lime-text-secondary: #d7ff00;
  --lime-badge-bg: rgba(215,255,0,0.12);
  --lime-badge-text: #d7ff00;
  --lime-border: rgba(215,255,0,0.3);
}
html:not(.dark) {
  --lime-text: #4d7a00;          /* darker lime – readable on white */
  --lime-text-secondary: #5c7300;
  --lime-badge-bg: rgba(215,255,0,0.18);
  --lime-badge-text: #4d7a00;
  --lime-border: #b8d900;
}

.text-lime-custom {
  color: #d7ff00;
}
html:not(.dark) .text-lime-custom {
  color: var(--lime-text);
}

.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;
}

/* ── Light theme: Tailwind text-[#d7ff00] override ── */
html:not(.dark) .text-\[\#d7ff00\] {
  color: var(--lime-text) !important;
}
html:not(.dark) .hover\:text-\[\#d7ff00\]:hover {
  color: var(--lime-text) !important;
}
html:not(.dark) .group-hover\:text-\[\#d7ff00\] {
  color: var(--lime-text) !important;
}

.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;
}

/* ── Global select reset: remove native OS arrow ── */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ── Unified select style (app-select) ──
   Use this class on every <select> across the project.
   Handles dark mode automatically via html.dark selector. */
.app-select {
  display: block;
  width: auto;
  padding: 8px 32px 8px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  color: #fff;
  background-color: #1a1f26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}
.app-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.app-select:focus {
  border-color: rgba(215, 255, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(215, 255, 0, 0.08);
}
.app-select option {
  background: #1a1f26;
  color: #fff;
}

/* Light mode overrides */
html:not(.dark) .app-select {
  color: #111827;
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: #e5e7eb;
}
html:not(.dark) .app-select:hover {
  border-color: #d1d5db;
}
html:not(.dark) .app-select:focus {
  border-color: rgba(215, 255, 0, 0.6);
}
html:not(.dark) .app-select option {
  background: #fff;
  color: #111827;
}

/* Size modifier: compact (for tight toolbars/sidebars) */
.app-select-sm {
  padding: 5px 28px 5px 8px;
  font-size: 12px;
  border-radius: 4px;
}

/* 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 - only for tab triggers, not accordion content */
[role="tab"][data-state="active"] > i,
[role="tab"][data-state="active"] i {
  color: #d7ff00 !important;
}
html:not(.dark) [role="tab"][data-state="active"] > i,
html:not(.dark) [role="tab"][data-state="active"] i {
  color: var(--lime-text) !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;
}

/* ══════════════════════════════════════════════
   Light theme: global lime-as-text fixes
   ══════════════════════════════════════════════ */

/*
  Utility class: use .lime-text instead of inline color: '#d7ff00'
  Automatically adapts to light/dark themes.
*/
.lime-text { color: #d7ff00 }
html:not(.dark) .lime-text { color: var(--lime-text) }

/* Lime accent badge — label/tag with semi-transparent lime bg */
.lime-badge {
  background: rgba(215,255,0,0.12);
  color: #d7ff00;
}
html:not(.dark) .lime-badge {
  background: rgba(215,255,0,0.15);
  color: var(--lime-text);
}

/* Left sidebar border for active item */
html:not(.dark) [data-state="active"] {
  border-left-color: var(--lime-border) !important;
}