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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

/* Base custom select */
.custom-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
}

/* Tab Active/Inactive classes handled by JS primarily for border and text color, 
   but we can define base states here. */
.active-tab {
    color: #38bdf8;
    border-color: #38bdf8;
}

.inactive-tab {
    color: #a1a1aa;
    border-color: transparent;
}

.inactive-tab:hover {
    color: #e4e4e7;
    background-color: rgba(39, 39, 42, 0.4);
}