/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #8b5cf6;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #8b5cf6;
}

/* Sidebar pattern item hover states */
.pattern-item {
    transition: all 0.2s ease;
}

.pattern-item.active {
    background-color: rgba(139, 92, 246, 0.1);
    border-left-color: #8b5cf6;
}

.pattern-item:hover:not(.active) {
    background-color: rgba(139, 92, 246, 0.05);
}

/* Tab styling */
.cat-tab {
    transition: all 0.2s ease;
}

.cat-tab.active {
    background-color: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

/* Regex Highlighter */
/* The textarea and the highlight layer must exactly overlay */
#testInput,
#highlightLayer {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 1rem;
    margin: 0;
    border: none;
}

#testInput {
    color: inherit;
}

/* We use transparent text in the highlighter, and background colors for highlights */
.highlight-match {
    background-color: rgba(139, 92, 246, 0.3);
    border-radius: 2px;
}

.dark .highlight-match {
    background-color: rgba(139, 92, 246, 0.4);
}

/* When the match is even/odd for overlapping/consecutive matches, we can alternate slight tints if needed, but solid color is fine for now */
.highlight-even {
    background-color: rgba(139, 92, 246, 0.2);
}

.dark .highlight-even {
    background-color: rgba(139, 92, 246, 0.3);
}

/* Hide scrollbar for category tabs but allow scroll */
#categoryTabs::-webkit-scrollbar {
    display: none;
}

#categoryTabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}