/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* Animations */
.dropdown-enter-active, .dropdown-leave-active {
    transition: opacity 0.15s ease-in-out;
}

.dropdown-enter-from, .dropdown-leave-to {
    opacity: 0;
}

/* Feather icons style override */
.feather:not(.feather-icon) {
    width: 18px;
    height: 18px;
}

/* Tailwind v4 custom colors (optional if you customize further) */
@layer utilities {
    .border-zinc-200 {
        @apply border border-gray-200;
    }
}

.logo-dark {
    display: none;
}

/* Light mode → show light logo */
[data-theme="lofi"] .logo-light {
    display: block;
}

[data-theme="lofi"] .logo-dark {
    display: none;
}

/* Dark mode → show dark logo */
[data-theme="halloween"] .logo-light {
    display: none;
}

[data-theme="halloween"] .logo-dark {
    display: block;
}


.swiper-wrapper {
    width: 100%;
    height: max-content !important;
    padding-bottom: 48px !important;
}

.swiper-pagination-bullet {
    background: #4F46E5;
}

.swiper-pagination-bullet-active {
    background: #6366F1 !important;
}

.drawer-side .menu a {
    background-color: transparent !important;
}

.drawer-side .menu a:hover,
.drawer-side .menu a:focus,
.drawer-side .menu a:active {
    background-color: transparent !important;
}

.checkbox:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ✅ Inputs: minimal custom focus style */
input:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #9ca3af !important; /* Tailwind gray-400 */
}

.nofocus:focus {
    outline: 0; /* Tailwind indigo-600 fallback */
    outline-offset: 2px;
    box-shadow: none !important;
    border-color: transparent !important;
}

.input:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: black !important; /* keeps normal border */
}

#build-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Ensure scroll appears (tune width if needed) */
@media (max-width: 768px) {
    #build-table {
        min-width: 1040px;
    }
}

/* General niceties */
#build-table th, #build-table td {
    white-space: normal;
}

#build-table td img {
    max-width: 5rem;
    height: 5rem;
    object-fit: contain;
}

#ph-legend .pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid hsl(var(--bc) / .15);
    border-radius: 9999px;
    padding: .25rem .6rem;
    margin: .25rem .25rem 0 0;
    font-size: .75rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

#ph-legend .pill .dot {
    width: .65rem;
    height: .65rem;
    border-radius: 9999px;
}

#ph-legend .pill.off {
    opacity: .45;
    text-decoration: line-through;
}

.slider-container {
    position: relative;
    height: 24px;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    position: absolute;
    background: transparent;
    pointer-events: none;
    z-index: 2;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: white;
    border: 1px solid rgb(10, 10, 10); /* Tailwind blue-600 */
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    transform: translateY(-30%);
    z-index: 3;
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: white;
    border: 1px solid rgb(10, 10, 10); /* Tailwind blue-600 */
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    transform: translateY(-30%);
}