/* Global Layout */
html { overflow-y: scroll; }

/* --- 1. Custom Scrollbar --- */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 8px; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 8px; border: 3px solid #f1f1f1; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

.dark ::-webkit-scrollbar-track { background: #2d2d2d; border-color: #2d2d2d; }
.dark ::-webkit-scrollbar-thumb { background: #555; border-color: #2d2d2d; }

/* --- 2. Autofill Styling --- */
/* Forces the browser's autocomplete background to match the theme */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    /* Standard property for compatibility */
    box-shadow: 0 0 0 30px hsl(var(--background)) inset !important;
    /* Vendor prefix */
    -webkit-box-shadow: 0 0 0 30px hsl(var(--background)) inset !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
    caret-color: hsl(var(--foreground)) !important;
    transition: background-color 5000s ease-in-out 0s;
}
/* Dark mode specific contrast ensure */
.dark input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
    caret-color: white !important;
}

/* --- 3. Checkbox Animations --- */
/* Target the FrankenUI checkbox class */
.uk-checkbox {
    /* Smooth transition for color and border changes */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add a "bounce" effect when clicking */
.uk-checkbox:active {
    transform: scale(0.9);
}

/* Optional: Slight pop when checked */
.uk-checkbox:checked {
    animation: checkbox-pop 0.2s ease-in-out;
}

@keyframes checkbox-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}