/* Base Tailwind imports */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

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

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply bg-border rounded-full hover:bg-textMuted transition-colors;
    }
}

/* Custom Range Slider */
.custom-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    @apply bg-border;
    border-radius: 9999px;
    outline: none;
    transition: background 0.2s;
}

.custom-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    @apply bg-primary;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(163, 203, 56, 0.4);
    border: 3px solid #172711;
    /* surface color */
    transition: transform 0.1s;
}

.custom-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.custom-range::-webkit-slider-thumb:active {
    transform: scale(0.95);
    @apply bg-secondary;
}

.custom-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    @apply bg-primary;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(163, 203, 56, 0.4);
    border: 3px solid #172711;
    transition: transform 0.1s;
}

.custom-range::-moz-range-thumb:hover {
    transform: scale(1.15);
}

.custom-range::-moz-range-thumb:active {
    transform: scale(0.95);
    @apply bg-secondary;
}

/* Modal Animations */
.modal-show {
    display: flex !important;
    opacity: 1 !important;
}

.modal-content-show {
    transform: scale(1) !important;
}

/* Table styling fixes */
tbody tr {
    @apply border-b border-border/50 hover:bg-white/5 transition-colors;
}

tbody tr:last-child {
    border-bottom: none;
}

td {
    @apply py-3 px-4 font-mono text-textMuted;
}